☰

BetterFetLife

See website

  1. // ==UserScript==
  2. // @name        BetterFetLife
  3. // @namespace   com.fetlife.better
  4. // @include     https://fetlife.com/*
  5. // @version     1.4
  6. // @grant       none
  7. // @description See website
  8. // ==/UserScript==
  9.  
  10. $(document).ready(function(){
  11. 			
  12. 	// add custom css
  13. 	$('head').append('<style type="text/css">' + bfl_css + '</style>');
  14. 	
  15. 	// === USER POPUP === //
  16. 	
  17. 	// create user popup
  18. 	$('body').append('							' +
  19. 		'	<div id="bfl-user">					' +
  20. 		'		<a class="avatar-wrap">			' +
  21. 		'			<div class="avatar"></div>	' +
  22. 		'		</a>							' +
  23. 		'		<a class="name"></a>			' +
  24. 		'		<span class="status"></span>	' +
  25. 		'		<span class="location"></span>	' +
  26. 		'		<span class="photos"></span>	' +
  27. 		'	</div>								'
  28. 	);
  29. 	
  30. 	// show a user popup on hover
  31. 	$(document).hoverIntent({
  32. 		selector: 'a[href^="/users/"], a[href^="https://fetlife.com/users/"]',
  33. 		over: function(){
  34. 				
  35. 			var linkEl = this;
  36. 			var href = $(linkEl).attr('href');
  37. 				href = href.replace('https://fetlife.com', '');
  38. 			
  39. 			// prevent non-user links
  40. 			if( href.split('/').length != 3 ) return;
  41. 			
  42. 			// prevent self-links
  43. 			if( $(linkEl).closest('#bfl-user').length > 0 ) return;		
  44. 			
  45. 			// prevent closing
  46. 			clearTimeout(hideUserPopupTimeout);	
  47. 			
  48. 			// reset the popup
  49. 			hideUserPopup();
  50. 					
  51. 			// show the popup
  52. 			$('#bfl-user')
  53. 				.addClass('loading')
  54. 				.css({
  55. 					top: $(linkEl).offset().top + $(linkEl).height() + 8,
  56. 					left: $(linkEl).offset().left
  57. 				})
  58. 				.show();
  59. 									
  60. 			$.ajax({
  61. 				url: href,
  62. 	            dataType: "html",
  63. 				
  64. 				// cache is OK
  65. 				cache: true,
  66. 				
  67. 				// prevent 503, fetlife don't liking ajax calls
  68. 			    beforeSend: function(xhr) {
  69. 			        xhr.setRequestHeader(
  70. 			            'X-Requested-With',
  71. 			            {
  72. 			                toString: function() { return ''; }
  73. 			            }
  74. 			        );
  75. 			    },
  76. 				success: function(userDOM){
  77. 					
  78. 					var userAvatarEl = $(userDOM).find('#main_content a img');
  79. 					
  80. 					// avatar href
  81. 					$('#bfl-user')
  82. 						.attr('avatar-href', $(userAvatarEl).attr('src'));
  83. 										
  84. 					// avatar
  85. 					$('#bfl-user .avatar-wrap')
  86. 						.attr('href', href)
  87. 						
  88. 					$('#bfl-user .avatar')
  89. 						.css('background-image', 'url(' + $(userAvatarEl).attr('src') + ')')
  90. 	
  91. 					// name
  92. 					$('#bfl-user .name')
  93. 						.attr('href', href)
  94. 						.html( $(userAvatarEl).attr('alt') );
  95. 					
  96. 					// status (age+gender+orientation)
  97. 					$('#bfl-user .status')
  98. 						.html( $(userDOM).find('#profile h2 .small').html() );
  99. 					
  100. 					// location
  101. 					$('#bfl-user .location')
  102. 						.html( $(userDOM).find('#profile h2.bottom + p').html() );
  103. 					
  104. 					window.userDOM = userDOM;
  105. 					
  106. 					// photos
  107. 					var photos = $(userDOM).find('#profile .container a[href^="/users/"][href*="/pictures"]');
  108. 					photos = photos.filter(function(){
  109. 						return $(this).find('img').length > 0;
  110. 					})
  111. 					photos = photos.slice(0,5);
  112. 					$('#bfl-user .photos')
  113. 						.html('')
  114. 						.append( photos );
  115. 						
  116. 					// friends status
  117. 					// remove the link first
  118. 					$(userDOM).find('.friends_badge').find('a').remove()
  119. 					$('#bfl-user .friends_status')
  120. 						.html( $(userDOM).find('.friends_badge').text() );	
  121. 						
  122. 					$('#bfl-user')
  123. 						.removeClass('loading')	
  124. 				}
  125. 			});
  126. 			
  127. 		},
  128. 		
  129. 		out: function(e){
  130. 			
  131. 			var linkEl = this;
  132. 			var href = $(linkEl).attr('href');
  133. 			
  134. 			// prevent non-user links
  135. 			if( href.split('/').length != 3 ) return;
  136. 			
  137. 			clearTimeout(hideUserPopupTimeout);
  138. 			hideUserPopupTimeout = setTimeout(hideUserPopup, hideUserPopupDelay);
  139. 		}
  140. 	});
  141. 	$(document).on('mouseover', '#bfl-user', function(e){
  142. 		clearTimeout(hideUserPopupTimeout);
  143. 	});
  144. 	$(document).on('mouseleave', '#bfl-user', function(e){
  145. 		clearTimeout(hideUserPopupTimeout);
  146. 		hideUserPopupTimeout = setTimeout(hideUserPopup, hideUserPopupDelay);
  147. 	});
  148.  
  149. 	var hideUserPopupTimeout = setTimeout('', 0);
  150. 	var hideUserPopupDelay = 500;
  151. 	
  152. 	function hideUserPopup() {
  153. 		
  154. 		$('#bfl-user .avatar').attr('style', '');
  155. 		$('#bfl-user .name').html('').attr('href', '');
  156. 		$('#bfl-user .status').html('');
  157. 		$('#bfl-user .location').html('');
  158. 		$('#bfl-user .friends_badge').html('');
  159. 		$('#bfl-user .photos').html('');
  160. 		$('#bfl-user').removeClass('loading');
  161. 		
  162. 		$('#bfl-user').hide();
  163. 	}
  164. 	
  165. 	// === IMAGE POPUP === //
  166. 	
  167. 	// create image popup
  168. 	$('body').append('										' +
  169. 		'	<div id="bfl-image">							' +
  170. 		'		<span class="header">						' +
  171. 		'			<span class="title"></span>				' +
  172. 		'			<span class="like-wrap">				' +
  173. 		'				<span class="like-count"></span>	' +
  174. 		'				<span class="like picto">k</span>	' +
  175. 		'			</span>									' +
  176. 		'		</span>										' +
  177. 		'		<a class="image-wrap">						' +
  178. 		'			<img class="image" />					' +
  179. 		'		</a>										' +
  180. 		'	</div>											'
  181. 	);
  182. 	
  183. 	
  184. 	$(document).hoverIntent({
  185. 		selector: 'a[href^="/users/"][href*="/pictures"], a[href^="https://fetlife.com/users/"][href*="/pictures"]',
  186. 		over: function(){
  187. 							
  188. 			var linkEl = this;
  189. 			var href = $(this).attr('href');
  190. 				href = href.replace('https://fetlife.com', '');
  191. 			
  192. 			// prevent non-image links
  193. 			if( href.split('/').length != 5 ) return;
  194. 			
  195. 			// prevent self-links
  196. 			if( $(linkEl).closest('#bfl-image').length > 0 ) return;
  197. 			
  198. 			// prevent 'next image'
  199. 			if( $(linkEl).children('.fake_img').length > 0 ) return;
  200. 			
  201. 			// reset the popup
  202. 			hideImagePopup();
  203. 			
  204. 			// show the popup
  205. 			var css = {
  206. 				top: $(linkEl).offset().top + $(linkEl).height() + 8
  207. 			}
  208. 			
  209. 			if( $(linkEl).offset().left > $(window).width()/2 ) {
  210. 				css.right = $(window).width() - $(linkEl).offset().left - $(linkEl).width();
  211. 				$('#bfl-image').addClass('alignright');
  212. 			} else {
  213. 				css.left = $(linkEl).offset().left;
  214. 			}
  215. 			
  216. 			$('#bfl-image')
  217. 				.addClass('loading')
  218. 				.css(css)
  219. 				.show();
  220. 			
  221. 			$.ajax({
  222. 	            url: href,
  223. 	            dataType: "html",
  224. 	            success: function(html){  
  225. 	               
  226. 	                var title = $(html).find('.s.i.caption').text();
  227. 	                
  228. 		            var likeUrl = href.split('/');  
  229. 		                likeUrl = likeUrl[ likeUrl.length-1 ];
  230. 		                likeUrl = "/pictures/" + likeUrl + "/likes"
  231. 					
  232. 					// extract the image src                                          
  233. 	                var src = $(html).find('style').first().html().match(/\(\'(.*?)\'\)/);
  234. 	                    src = src[0];
  235. 	                    src = src.replace("('", "");
  236. 	                    src = src.replace("')", "");
  237. 	                   					
  238. 					$('#bfl-image .title')
  239. 						.html(title)
  240. 						.attr('title', title)
  241. 					
  242. 					$('#bfl-image .like-wrap')
  243. 						.attr('data-href', likeUrl);
  244. 					
  245. 					$('#bfl-image .image-wrap')
  246. 						.attr('href', href);
  247. 						
  248. 					$('#bfl-image .image')
  249. 						.load(function(){
  250. 							$('#bfl-image').removeClass('loading')
  251. 						})
  252. 						.attr('src', src)
  253. 	               
  254. 					// get amount of likes
  255. 	                $.ajax({
  256. 	                    url: likeUrl,
  257. 	                    dataType: "json",
  258. 	                    success: function(data) {
  259. 	                        $('#bfl-image .like-wrap').toggle(data.user_can_like);
  260. 	                        if( data.is_liked_by_user ) {
  261. 	                            $('#bfl-image .like-wrap').addClass('liked');
  262. 	                        }
  263. 					
  264. 							$('#bfl-image .like-count')
  265. 								.html(data.total);
  266. 	                    }
  267. 	                });
  268. 	            }
  269. 	        });
  270. 			
  271. 		},
  272. 	
  273. 		out: function(e){
  274. 			
  275. 			var linkEl = this;
  276. 			var href = $(linkEl).attr('href');
  277. 			
  278. 			// prevent non-user links
  279. 			if( href.split('/').length != 5 ) return;
  280. 			
  281. 			clearTimeout(hideImagePopupTimeout);
  282. 			hideImagePopupTimeout = setTimeout(hideImagePopup, hideImagePopupDelay);
  283. 		}
  284. 	});
  285. 	$(document).on('mouseover', '#bfl-image', function(e){
  286. 		clearTimeout(hideImagePopupTimeout);	
  287. 		clearTimeout(hideUserPopupTimeout);
  288. 	});
  289. 	$(document).on('mouseleave', '#bfl-image', function(e){
  290. 		clearTimeout(hideImagePopupTimeout);
  291. 		hideImagePopupTimeout = setTimeout(hideImagePopup, hideImagePopupDelay);
  292. 	});
  293.  
  294. 	var hideImagePopupTimeout = setTimeout('', 0);
  295. 	var hideImagePopupDelay = 500;
  296. 	
  297. 	function hideImagePopup() {
  298. 		
  299. 		$('#bfl-image .title').html('').attr('href', '');
  300. 		$('#bfl-image .image').attr('src', '');
  301. 		$('#bfl-image .like-wrap').attr('data-href', '');
  302. 		$('#bfl-image .like-count').html('');
  303. 		$('#bfl-image').removeClass('loading');
  304. 		$('#bfl-image').removeClass('alignright');
  305. 		$('#bfl-image').hide();
  306. 	}
  307. 	
  308. 	$(document).on('click', '#bfl-image .like-wrap', function(){
  309.         var this_ = this;
  310.         $.ajax({
  311.             url: $(this_).data('href') + '/toggle',
  312.             type: 'post',
  313.             success: function(){
  314.                 
  315.                 if( $(this_).hasClass('liked') ) {
  316. 	                $('#bfl-image .like-count').html( parseInt( $('#bfl-image .like-count').html()) - 1 )
  317.                 } else {
  318. 	                $('#bfl-image .like-count').html( parseInt( $('#bfl-image .like-count').html()) + 1 )
  319.                 }
  320.                 
  321.                 $(this_).toggleClass('liked');
  322.             }
  323.         });
  324.        
  325.         return false;
  326.     });
  327. 	
  328. });
  329.  
  330. var bfl_css = '' +
  331. '	#bfl-user {' +
  332. '		position: absolute;' +
  333. '		z-index: 100;' +
  334. '		display: none;' +
  335. '		padding: 4px;' +
  336. '		min-width: 180px;' +
  337. '		height: 80px;' +
  338. '		padding-left: 92px;' +
  339. '		padding-right: 8px;' +
  340. '		background: #323232;' +
  341. '		border: 3px solid #171717;' +
  342. '	}' +
  343. '	#bfl-user.loading {' +
  344. '		padding-left: 84px;' +
  345. '		padding-right: 4px;' +
  346. '		min-width: 0;' +
  347. '	}' +
  348. '	#bfl-user:before,' +
  349. '	#bfl-image:before {' +
  350. '		position: absolute;' +
  351. '		z-index: 101;' +
  352. '		display: block;' +
  353. '		content: "";' +
  354. '		left: 7px;' +
  355. '		top: -8px;' +
  356. '		border: 8px solid transparent;' +
  357. '		border-bottom-color: #171717;' +
  358. '		border-top-width: 0;' +
  359. '	}' +
  360. '	#bfl-user:after,' +
  361. '	#bfl-image:after {' +
  362. '		position: absolute;' +
  363. '		z-index: 102;' +
  364. '		display: block;' +
  365. '		content: "";' +
  366. '		left: 10px;' +
  367. '		top: -5px;' +
  368. '		border: 5px solid transparent;' +
  369. '		border-bottom-color: #323232;' +
  370. '		border-top-width: 0;' +
  371. '	}' +
  372. '		#bfl-user .avatar {' +
  373. '			position: absolute;' +
  374. '			left: 4px;' +
  375. '			width: 80px;' +
  376. '			height: 80px;' +
  377. '			padding: 0px;' +
  378. '			margin-right: 8px;' +
  379. '			background-color: transparent;' +
  380. '			background-size: cover;' +
  381. '			background-position: center center;' +
  382. '			background-repeat: no-repeat;' +
  383. '		}' +
  384. '		#bfl-user.loading .avatar {' +
  385. '			background-size: auto;' +
  386. '			background-image: url(https://flassets.a.ssl.fastly.net/std/spinners/circle_big.gif);' +
  387. '			margin-right: 0;' +
  388. '		}' +
  389. '		#bfl-user .name {' +
  390. '			white-space: nowrap;' +
  391. '		}'	+
  392. '		#bfl-user .status {' +
  393. '			white-space: nowrap;' +
  394. '			color: #aaa;' +
  395. '		}'	+
  396. '		#bfl-user .location {' +
  397. '			display: block;' +
  398. '			font-size: 12px;' +
  399. '			white-space: nowrap;' +
  400. '		}' +
  401. '		#bfl-user .friends_status {' +
  402. '			float: right;' +
  403. '			font-size: 12px;' +
  404. '		}' +
  405. '		#bfl-user .photos {' +
  406. '			position: absolute;' +
  407. '			right: 4px;' +
  408. '			bottom: 4px;' +
  409. '			font-size: 12px;' +
  410. '		}' +
  411. '			#bfl-user .photos a {' +
  412. '				float: left;' +
  413. '				font-size: 12px;' +
  414. '			}' +
  415. '				#bfl-user .photos a img {' +
  416. '					float: left;' +
  417. '					margin: 2px;' +
  418. '					width: 25px;' +
  419. '					height: 25px;' +
  420. '					padding: 0;' +
  421. '				}' +
  422. '	#bfl-image {' +
  423. '		position: absolute;' +
  424. '		z-index: 100;' +
  425. '		display: none;' +
  426. '		background: #323232;' +
  427. '		border: 3px solid #171717;' +
  428. '		padding: 4px;' +
  429. '	}' +
  430. '	#bfl-image.alignright:before {' +
  431. '		left: auto;' +
  432. '		right: 7px;' +
  433. '	}' +
  434. '	#bfl-image.alignright:after {' +
  435. '		left: auto;' +
  436. '		right: 10px;' +
  437. '	}' +
  438. '	#bfl-image.loading {' +
  439. '		width: 80px;' +
  440. '		height: 80px;' +
  441. '		background: #323232 url(https://flassets.a.ssl.fastly.net/std/spinners/circle_big.gif) no-repeat center center;' +
  442. '	}' +
  443. '		#bfl-image .header {' +
  444. '			position: absolute;' +
  445. '			left: 0;' +
  446. '			right: 0;' +
  447. '			top: 0;' +
  448. '			background: #323232;' +
  449. '			padding: 4px;' +
  450. '			overflow: hidden;' +
  451. '			font-size: 12px;;' +
  452. '		}'	+
  453. '		#bfl-image.loading .header {' +
  454. '			display: none;' +
  455. '		}' +
  456. '			#bfl-image .title {' +
  457. '				float: left;' +
  458. '				width: 80%;' +
  459. '				white-space: nowrap;' +
  460. '				overflow: hidden;' +
  461. '				text-overflow: ellipsis;' +
  462. '			}'	+
  463. '			#bfl-image .like-wrap {' +
  464. '				float: right;' +
  465. '				width: 10%;' +
  466. '				white-space: nowrap;' +
  467. '				text-align: right;' +
  468. '				cursor: pointer;' +
  469. '			}'	+
  470. '			#bfl-image .like-wrap:hover {' +
  471. '				color: #ffffff;' +
  472. '			}'	+
  473. '			#bfl-image .like-wrap:active {' +
  474. '				color: #bbbbbb;' +
  475. '			}'	+
  476. '			#bfl-image .like-wrap.liked {' +
  477. '				color: #DD0000;' +
  478. '			}'	+
  479. '			#bfl-image .like-wrap.liked:hover {' +
  480. '				color: #FF0000;' +
  481. '			}'	+
  482. '			#bfl-image .like-wrap.liked:active {' +
  483. '				color: #BB0000;' +
  484. '			}'	+
  485. '		#bfl-image .image {' +
  486. '			display: block;' +
  487. '			padding: 0;' +
  488. '		}'	+
  489. '		#bfl-image.loading .image {' +
  490. '			opacity: 0;' +
  491. '		}' +
  492.  
  493. /*!
  494.  * hoverIntent v1.8.0 // 2014.06.29 // jQuery v1.9.1+
  495.  * http://cherne.net/brian/resources/jquery.hoverIntent.html
  496.  *
  497.  * You may use hoverIntent under the terms of the MIT license. Basically that
  498.  * means you are free to use hoverIntent as long as this header is left intact.
  499.  * Copyright 2007, 2014 Brian Cherne
  500.  */
  501.  
  502. /* hoverIntent is similar to jQuery's built-in "hover" method except that
  503.  * instead of firing the handlerIn function immediately, hoverIntent checks
  504.  * to see if the user's mouse has slowed down (beneath the sensitivity
  505.  * threshold) before firing the event. The handlerOut function is only
  506.  * called after a matching handlerIn.
  507.  *
  508.  * // basic usage ... just like .hover()
  509.  * .hoverIntent( handlerIn, handlerOut )
  510.  * .hoverIntent( handlerInOut )
  511.  *
  512.  * // basic usage ... with event delegation!
  513.  * .hoverIntent( handlerIn, handlerOut, selector )
  514.  * .hoverIntent( handlerInOut, selector )
  515.  *
  516.  * // using a basic configuration object
  517.  * .hoverIntent( config )
  518.  *
  519.  * @param  handlerIn   function OR configuration object
  520.  * @param  handlerOut  function OR selector for delegation OR undefined
  521.  * @param  selector    selector OR undefined
  522.  * @author Brian Cherne <brian(at)cherne(dot)net>
  523.  */
  524. (function($) {
  525.     $.fn.hoverIntent = function(handlerIn,handlerOut,selector) {
  526.  
  527.         // default configuration values
  528.         var cfg = {
  529.             interval: 100,
  530.             sensitivity: 6,
  531.             timeout: 0
  532.         };
  533.  
  534.         if ( typeof handlerIn === "object" ) {
  535.             cfg = $.extend(cfg, handlerIn );
  536.         } else if ($.isFunction(handlerOut)) {
  537.             cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } );
  538.         } else {
  539.             cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } );
  540.         }
  541.  
  542.         // instantiate variables
  543.         // cX, cY = current X and Y position of mouse, updated by mousemove event
  544.         // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
  545.         var cX, cY, pX, pY;
  546.  
  547.         // A private function for getting mouse position
  548.         var track = function(ev) {
  549.             cX = ev.pageX;
  550.             cY = ev.pageY;
  551.         };
  552.  
  553.         // A private function for comparing current and previous mouse position
  554.         var compare = function(ev,ob) {
  555.             ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
  556.             // compare mouse positions to see if they've crossed the threshold
  557.             if ( Math.sqrt( (pX-cX)*(pX-cX) + (pY-cY)*(pY-cY) ) < cfg.sensitivity ) {
  558.                 $(ob).off("mousemove.hoverIntent",track);
  559.                 // set hoverIntent state to true (so mouseOut can be called)
  560.                 ob.hoverIntent_s = true;
  561.                 return cfg.over.apply(ob,[ev]);
  562.             } else {
  563.                 // set previous coordinates for next time
  564.                 pX = cX; pY = cY;
  565.                 // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
  566.                 ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
  567.             }
  568.         };
  569.  
  570.         // A private function for delaying the mouseOut function
  571.         var delay = function(ev,ob) {
  572.             ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
  573.             ob.hoverIntent_s = false;
  574.             return cfg.out.apply(ob,[ev]);
  575.         };
  576.  
  577.         // A private function for handling mouse 'hovering'
  578.         var handleHover = function(e) {
  579.             // copy objects to be passed into t (required for event object to be passed in IE)
  580.             var ev = $.extend({},e);
  581.             var ob = this;
  582.  
  583.             // cancel hoverIntent timer if it exists
  584.             if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
  585.  
  586.             // if e.type === "mouseenter"
  587.             if (e.type === "mouseenter") {
  588.                 // set "previous" X and Y position based on initial entry point
  589.                 pX = ev.pageX; pY = ev.pageY;
  590.                 // update "current" X and Y position based on mousemove
  591.                 $(ob).on("mousemove.hoverIntent",track);
  592.                 // start polling interval (self-calling timeout) to compare mouse coordinates over time
  593.                 if (!ob.hoverIntent_s) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
  594.  
  595.                 // else e.type == "mouseleave"
  596.             } else {
  597.                 // unbind expensive mousemove event
  598.                 $(ob).off("mousemove.hoverIntent",track);
  599.                 // if hoverIntent state is true, then call the mouseOut function after the specified delay
  600.                 if (ob.hoverIntent_s) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
  601.             }
  602.         };
  603.  
  604.         // listen for mouseenter and mouseleave
  605.         return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector);
  606.     };
  607. })(jQuery);