☰

Flickr Large Embed

Based on 'Flickr Original Link' (https://greasyfork.org/scripts/1190-flickr-original-link). Adds an 'Embed' field containing HTML code for each photo.

  1. // ==UserScript==
  2. // @name        Flickr Large Embed
  3. // @namespace   https://greasyfork.org/en/scripts/6699-flickr-large-embed
  4. // @description Based on 'Flickr Original Link' (https://greasyfork.org/scripts/1190-flickr-original-link). Adds an 'Embed' field containing HTML code for each photo. 
  5. // @include 	/flickr\.com/
  6. // @version     2015-05-30
  7. // @grant       GM_getValue
  8. // @grant       GM_setValue
  9. // @require 	http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
  10. // ==/UserScript==
  11. //
  12.  
  13. // TODO : fix 'Loading' bug on photostream
  14.  
  15. var postfix = ".";
  16.  
  17. var imageSizeOrder = [ "o", "k", "h", "l", "c", "z" ];
  18. var globalObserver = null;
  19.  
  20. function log(s) {
  21.     console.log(s);
  22. }
  23.  
  24.  
  25. function checkAlwaysShow() {
  26. 	$('div.interaction-view').css('opacity', '1');
  27. }
  28.  
  29. function action_single_page() {
  30.     var strCss = ".commonButton{display:inline-block;cursor:pointer;border-radius:1.5em;margin:0.3em;font-size:90%} .bigButton{border-width:2px;padding:1em;font-weight:bold;border-style:solid} .smallButton{padding:0.5em;background-color:pink}";
  31.     $('head').append('<style>' + strCss + '</style>');
  32.     var target = $('#content')[0];
  33.     var config = {
  34. 			childList : true,
  35. 			subtree : true,
  36.     };
  37.     var action = function(sourceCode) {
  38. 			var size = sourceCode.match(/modelExport: {.+?"sizes":{.+?}}/i);
  39. 			var mSize = size[0].match(/"width":"?\d+"?,"height":"?\d+"?,/ig);
  40. 			var mLink = size[0].match(/"displayUrl":"[^"]+"/ig);
  41. 			var length = mLink.length;
  42. 			
  43. 			var embedSize = 0;
  44. 			var linkSize = 0;
  45. 			var embedHeight = 0;
  46. 			var embedWidth = 0;
  47. 			
  48. 			for (var k = 0; k < length; k++) {
  49. 				
  50. 				var myArray = mSize[k].match(/:\w+,/g);
  51. 				var width = parseInt(myArray[0].replace(':','').replace(',',''));
  52. 				var height = parseInt(myArray[1].replace(':','').replace(',',''));
  53. 				
  54. 				mLink[k] = "http:" + mLink[k].replace(/"displayUrl":"([^"]+)"/i, "$1").replace(/\\/g, "").replace(/(_[a-z])\.([a-z]{3,4})/i, '$1' + postfix + '$2');
  55. 				
  56. 				if (embedSize == 0 && (width >= 800 || height >= 600) ) {
  57. 					embedSize = k;
  58. 					embedHeight = height;
  59. 					embedWidth = width;
  60. 				}
  61.  
  62. 				if (linkSize == 0 && (width >= 2048 || height >= 1024) ) {
  63. 					linkSize = k;
  64. 				}
  65.  
  66. 				if (embedSize == 0 && k == length-1) {
  67. 					embedSize = k;
  68. 					embedHeight = height;
  69. 					embedWidth = width;
  70. 				}
  71. 				if (linkSize == 0 && k == length-1) {
  72. 					linkSize = k;
  73. 				}
  74. 				
  75. 			}
  76. 			
  77. 			var maxWidth = '';
  78. 			if (embedHeight < embedWidth) {
  79. 				// Landscape image: full width and auto-height
  80. 				maxWidth= 'style="max-width: ' + embedWidth + 'px"';
  81. 				embedWidth = '100%';
  82. 			} else {
  83. 				embedWidth += 'px';
  84. 			}
  85. 			
  86. 			var embedHTML = '<p><a href="' + mLink[linkSize] + '" target="_blank" border="0"><img src="' + mLink[embedSize] + '"  width="' + embedWidth + '" height="auto" border="0" ' + maxWidth + ' /></a></p>';	
  87. 			var embedBB = '[url=' + mLink[linkSize] + '][img]' + mLink[embedSize] + '[/img][/url]';	
  88. 			
  89. 			var insertLocation = $('.sub-photo-right-row1').filter(':first');
  90.     	if (insertLocation.length > 0) {
  91. 				insertLocation.append('<p>Embed</p><div style="color: black; display:block;">HTML <input type="text" name="textfield" onclick="this.select();" style="width:350px;" id="EMBED_HTML" value="Loading"/></div>');
  92. 				$('#EMBED_HTML').val(embedHTML);
  93. 				insertLocation.append('<div style="color: black; display:block;">BB <input type="text" name="textfield" onclick="this.select();" style="width:350px;" id="EMBED_BB" value="Loading"/></div>');
  94. 				$('#EMBED_BB').val(embedBB);
  95.     	}
  96. 			
  97.     };
  98.     var oldUrl = document.URL;
  99.     $.get(oldUrl, action);
  100.     globalObserver = new MutationObserver(function(mutations, ob) {
  101. 			if (document.URL == oldUrl) return false; // page is not changed
  102. 			oldUrl = document.URL;
  103. 			$.get(oldUrl, action);
  104.     });
  105.     globalObserver.observe(target, config);
  106. }
  107.  
  108. function getLinkFromSource(data) {
  109.     if (data === null) return;// source code is not loaded, or empty, or has nothing good
  110.     var sizes = data.match(/"sizes":.+?}}/ig);
  111.     if (sizes === null) return false; // source code is not loaded, or empty, or has nothing good
  112.     var e2 = $('div.photo-list-photo-view').get();
  113.     checkAlwaysShow();
  114.     for (var index = 0; index < e2.length; index++) {
  115. 			var e = $(e2[index]);
  116. 			if (e.find('.myEmbedLink').filter(':first').length > 0) continue;
  117. 			//e.find('.interaction-bar').append('<div class="myEmbedLink" style="color: white; display: block; opacity: 0.5">HTML <input type="text" name="textfield" onclick="this.select();" style="width:100px;" value="Loading" class="htmlCode"/> BB <input type="text" name="textfield" onclick="this.select();" style="width:100px;" value="Loading" class="bbCode"/></div>');
  118. e.find('.interaction-bar').css('padding-bottom', '15px');
  119. 			e.append('<div class="myEmbedLink" style="color: white; display: block; opacity: 0.5">HTML <input type="text" name="textfield" onclick="this.select();" style="width:100px;" value="Loading" class="htmlCode"/> BB <input type="text" name="textfield" onclick="this.select();" style="width:100px;" value="Loading" class="bbCode"/></div>');
  120. 			
  121. 					
  122. 			var embedUrl = false;
  123. 			var linkUrl = false;
  124. 			var currentEmbedWidth = 100000;
  125. 			var currentEmbedHeight = 100000;
  126. 			var currentLinkWidth = 100000;
  127. 			var currentLinkHeight = 100000;
  128. 			var maxWidth = 0;
  129. 			var maxHeight = 0;
  130. 			var maxUrl = false;
  131. 			
  132. 			for (var i = 0; i < imageSizeOrder.length; ++i) {
  133. 					var photo = sizes[index].match(new RegExp('"' + imageSizeOrder[i] + '":{"displayUrl":"([^"]+)","width":(\\d+),"height":(\\d+)', "i"));
  134. 					if (photo === null) continue;
  135. 					var width = parseInt(photo[2]);
  136. 					var height = parseInt(photo[3]);
  137. 					var url = "http:" + photo[1].replace(/\\/g, "").replace(/(_[a-z])\.([a-z]{3,4})/i, '$1' + postfix + '$2');
  138. 					if ((width >= 800 || height >= 600) && width < currentEmbedWidth && height < currentEmbedHeight) {
  139. 						embedUrl = url;
  140. 						currentEmbedHeight = height;
  141. 						currentEmbedWidth = width;
  142. 					}
  143.  
  144. 					if ((width >= 2048 || height >= 1024) && width < currentLinkWidth && height < currentLinkHeight ) {
  145. 						linkUrl = url;
  146. 						currentLinkHeight = height;
  147. 						currentLinkWidth = width;
  148. 					}
  149.  
  150. 					if (width > maxWidth && height > maxHeight) {
  151. 						maxWidth = width;
  152. 						maxHeight = height;
  153. 						maxUrl = url;
  154. 					}
  155. 			}
  156. 			
  157. 			if (!linkUrl) {
  158. 				linkUrl = maxUrl;
  159. 				currentLinkHeight = maxHeight;
  160. 				currentLinkWidth = maxWidth;
  161. 			}
  162. 			if (!embedUrl) {
  163. 				embedUrl = maxUrl;
  164. 				currentEmbedHeight = maxHeight;
  165. 				currentEmbedWidth = maxWidth;
  166. 			}
  167.  
  168. 			if (linkUrl && embedUrl) {
  169. 				var maxWidth= '';
  170. 				if (currentEmbedHeight < currentEmbedWidth) {
  171. 					// Landscape image: full width and auto-height
  172. 					maxWidth= 'style="max-width: ' + currentEmbedWidth + 'px"';
  173. 					currentEmbedWidth = '100%';
  174. 				} else {
  175. 					currentEmbedWidth += 'px';
  176. 				}
  177. 			
  178. 				var htmlCode = '<p><a href="' + linkUrl + '" target="_blank" border="0"><img src="' + embedUrl + '" width="' + currentEmbedWidth + '" height="auto" border="0" ' + maxWidth + ' /></a></p>';	
  179. 				var bbCode = '[url=' + linkUrl + '][img]' + embedUrl + '[/img][/url]';	
  180.  
  181. 				e.find('.htmlCode').val(htmlCode);
  182. 				e.find('.bbCode').val(bbCode);
  183. 			}		
  184.     }
  185. }
  186.  
  187. function load_links(sourceCode) {
  188.     // empty
  189. }
  190.  
  191. function action_normal_page() {
  192.     var target = $('#content')[0];
  193.     var config = {
  194. 			childList : true,
  195. 			subtree : true,
  196.     };
  197.     var strCss = ".myEmbedLink{position:absolute;right:3px;bottom:0px;z-index:999;display:inline-block;color:white!important;}";
  198.     $('head').append('<style>' + strCss + '</style>');
  199.     var prevLink = "none";
  200.     var prevUrl = "none";
  201.     var prevThumbLength = 0;
  202.     var sourceCode = null;
  203.  
  204. 		var action = function() {
  205. 			var e3 = $('div.photo-list-photo-view');
  206. 			if (document.URL == prevUrl) {
  207. 				if (e3.length == prevThumbLength) return false; // number of thumbnail is not change, no need to process further
  208. 				prevThumbLength = e3.length;
  209. 				log("Number of thumb: " + prevThumbLength);
  210. 				// source code is get, use it now
  211. 				getLinkFromSource(sourceCode);
  212. 			}
  213. 			else {
  214. 				var e1 = e3.find('a').filter(':first');
  215. 				if (e1.length < 1) return false; // not found any link to valid single image page
  216. 				// show image information for newly added nodes
  217. 				// get full source code for this page
  218. 				sourceCode = null;
  219. 				prevUrl = document.URL;
  220. 				var link1 = e1.attr('href');
  221. 				console.time("GetSource");
  222. 				$('#content').append('<div id="embedLoadingIndicator" style="position:fixed;left:5px;top:4em;display:block;background-color:pink;border:solid;padding:3px; z-index:999;">Getting embed links<br>Please wait...</div>');
  223. 				log("Begin find source code, start with: " + link1);
  224. 				$.get(link1, function(data) {// process single image page source to get entry-type link
  225. 					var link2 = data.match(/<a\s+class='entry-type'\s+href='([^']+)/i)[1];
  226. 					$.get(link2, function(data) {// process page source to get image links
  227. 						log("Got page source: " + link2);
  228. 						console.timeEnd("GetSource");
  229. 						$('#embedLoadingIndicator').remove();
  230. 						sourceCode = data;
  231. 						getLinkFromSource(sourceCode);
  232. 					});
  233. 				});
  234. 			}
  235.     }
  236.     action();
  237.     globalObserver = new MutationObserver(function(mutations, ob) {
  238. 			action();
  239.     });
  240.     globalObserver.observe(target, config);
  241. }
  242.  
  243. function pageType() {
  244.     var t = "none";
  245.     var htmlClass = $('html').attr('class');
  246.     console.log("HTML class: " + htmlClass);
  247.     if (htmlClass.match(/html-photo-page.+scrappy-view/i) !== null) t = 'single';
  248.     else if (htmlClass.match(/html-search-photos-unified-page-view/i) !== null) t = 'hover';
  249.     else if ($('div.photo-list-photo-view').filter(':first').length > 0) t = 'normal';
  250.     console.log("Page type: " + t);
  251.     return t;
  252. }
  253.  
  254. var target = $('html')[0];
  255. var config = {
  256.     childList : false,
  257.     attributes : true,
  258. };
  259.  
  260. var prevType = "none";
  261. var type = "none";
  262. var observer = new MutationObserver(function(mutations, ob) {
  263. 	type = pageType();
  264.     
  265.   if (type != prevType) {
  266. 		if (globalObserver != null) { 
  267. 			globalObserver.disconnect();
  268. 		}
  269. 		prevType = type;
  270. 		if (type == 'single') {
  271. 			action_single_page();
  272. 		} else if (type == 'normal') {
  273. 			action_normal_page();
  274. 		}
  275. 	}
  276. });
  277. observer.observe(target, config);