Based on 'Flickr Original Link' (https://greasyfork.org/scripts/1190-flickr-original-link). Adds an 'Embed' field containing HTML code for each photo.
// ==UserScript==
// @name Flickr Large Embed
// @namespace https://greasyfork.org/en/scripts/6699-flickr-large-embed
// @description Based on 'Flickr Original Link' (https://greasyfork.org/scripts/1190-flickr-original-link). Adds an 'Embed' field containing HTML code for each photo.
// @include /flickr\.com/
// @version 2015-05-30
// @grant GM_getValue
// @grant GM_setValue
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
// ==/UserScript==
//
// TODO : fix 'Loading' bug on photostream
var postfix = ".";
var imageSizeOrder = [ "o", "k", "h", "l", "c", "z" ];
var globalObserver = null;
function log(s) {
console.log(s);
}
function checkAlwaysShow() {
$('div.interaction-view').css('opacity', '1');
}
function action_single_page() {
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}";
$('head').append('<style>' + strCss + '</style>');
var target = $('#content')[0];
var config = {
childList : true,
subtree : true,
};
var action = function(sourceCode) {
var size = sourceCode.match(/modelExport: {.+?"sizes":{.+?}}/i);
var mSize = size[0].match(/"width":"?\d+"?,"height":"?\d+"?,/ig);
var mLink = size[0].match(/"displayUrl":"[^"]+"/ig);
var length = mLink.length;
var embedSize = 0;
var linkSize = 0;
var embedHeight = 0;
var embedWidth = 0;
for (var k = 0; k < length; k++) {
var myArray = mSize[k].match(/:\w+,/g);
var width = parseInt(myArray[0].replace(':','').replace(',',''));
var height = parseInt(myArray[1].replace(':','').replace(',',''));
mLink[k] = "http:" + mLink[k].replace(/"displayUrl":"([^"]+)"/i, "$1").replace(/\\/g, "").replace(/(_[a-z])\.([a-z]{3,4})/i, '$1' + postfix + '$2');
if (embedSize == 0 && (width >= 800 || height >= 600) ) {
embedSize = k;
embedHeight = height;
embedWidth = width;
}
if (linkSize == 0 && (width >= 2048 || height >= 1024) ) {
linkSize = k;
}
if (embedSize == 0 && k == length-1) {
embedSize = k;
embedHeight = height;
embedWidth = width;
}
if (linkSize == 0 && k == length-1) {
linkSize = k;
}
}
var maxWidth = '';
if (embedHeight < embedWidth) {
// Landscape image: full width and auto-height
maxWidth= 'style="max-width: ' + embedWidth + 'px"';
embedWidth = '100%';
} else {
embedWidth += 'px';
}
var embedHTML = '<p><a href="' + mLink[linkSize] + '" target="_blank" border="0"><img src="' + mLink[embedSize] + '" width="' + embedWidth + '" height="auto" border="0" ' + maxWidth + ' /></a></p>';
var embedBB = '[url=' + mLink[linkSize] + '][img]' + mLink[embedSize] + '[/img][/url]';
var insertLocation = $('.sub-photo-right-row1').filter(':first');
if (insertLocation.length > 0) {
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>');
$('#EMBED_HTML').val(embedHTML);
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>');
$('#EMBED_BB').val(embedBB);
}
};
var oldUrl = document.URL;
$.get(oldUrl, action);
globalObserver = new MutationObserver(function(mutations, ob) {
if (document.URL == oldUrl) return false; // page is not changed
oldUrl = document.URL;
$.get(oldUrl, action);
});
globalObserver.observe(target, config);
}
function getLinkFromSource(data) {
if (data === null) return;// source code is not loaded, or empty, or has nothing good
var sizes = data.match(/"sizes":.+?}}/ig);
if (sizes === null) return false; // source code is not loaded, or empty, or has nothing good
var e2 = $('div.photo-list-photo-view').get();
checkAlwaysShow();
for (var index = 0; index < e2.length; index++) {
var e = $(e2[index]);
if (e.find('.myEmbedLink').filter(':first').length > 0) continue;
//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>');
e.find('.interaction-bar').css('padding-bottom', '15px');
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>');
var embedUrl = false;
var linkUrl = false;
var currentEmbedWidth = 100000;
var currentEmbedHeight = 100000;
var currentLinkWidth = 100000;
var currentLinkHeight = 100000;
var maxWidth = 0;
var maxHeight = 0;
var maxUrl = false;
for (var i = 0; i < imageSizeOrder.length; ++i) {
var photo = sizes[index].match(new RegExp('"' + imageSizeOrder[i] + '":{"displayUrl":"([^"]+)","width":(\\d+),"height":(\\d+)', "i"));
if (photo === null) continue;
var width = parseInt(photo[2]);
var height = parseInt(photo[3]);
var url = "http:" + photo[1].replace(/\\/g, "").replace(/(_[a-z])\.([a-z]{3,4})/i, '$1' + postfix + '$2');
if ((width >= 800 || height >= 600) && width < currentEmbedWidth && height < currentEmbedHeight) {
embedUrl = url;
currentEmbedHeight = height;
currentEmbedWidth = width;
}
if ((width >= 2048 || height >= 1024) && width < currentLinkWidth && height < currentLinkHeight ) {
linkUrl = url;
currentLinkHeight = height;
currentLinkWidth = width;
}
if (width > maxWidth && height > maxHeight) {
maxWidth = width;
maxHeight = height;
maxUrl = url;
}
}
if (!linkUrl) {
linkUrl = maxUrl;
currentLinkHeight = maxHeight;
currentLinkWidth = maxWidth;
}
if (!embedUrl) {
embedUrl = maxUrl;
currentEmbedHeight = maxHeight;
currentEmbedWidth = maxWidth;
}
if (linkUrl && embedUrl) {
var maxWidth= '';
if (currentEmbedHeight < currentEmbedWidth) {
// Landscape image: full width and auto-height
maxWidth= 'style="max-width: ' + currentEmbedWidth + 'px"';
currentEmbedWidth = '100%';
} else {
currentEmbedWidth += 'px';
}
var htmlCode = '<p><a href="' + linkUrl + '" target="_blank" border="0"><img src="' + embedUrl + '" width="' + currentEmbedWidth + '" height="auto" border="0" ' + maxWidth + ' /></a></p>';
var bbCode = '[url=' + linkUrl + '][img]' + embedUrl + '[/img][/url]';
e.find('.htmlCode').val(htmlCode);
e.find('.bbCode').val(bbCode);
}
}
}
function load_links(sourceCode) {
// empty
}
function action_normal_page() {
var target = $('#content')[0];
var config = {
childList : true,
subtree : true,
};
var strCss = ".myEmbedLink{position:absolute;right:3px;bottom:0px;z-index:999;display:inline-block;color:white!important;}";
$('head').append('<style>' + strCss + '</style>');
var prevLink = "none";
var prevUrl = "none";
var prevThumbLength = 0;
var sourceCode = null;
var action = function() {
var e3 = $('div.photo-list-photo-view');
if (document.URL == prevUrl) {
if (e3.length == prevThumbLength) return false; // number of thumbnail is not change, no need to process further
prevThumbLength = e3.length;
log("Number of thumb: " + prevThumbLength);
// source code is get, use it now
getLinkFromSource(sourceCode);
}
else {
var e1 = e3.find('a').filter(':first');
if (e1.length < 1) return false; // not found any link to valid single image page
// show image information for newly added nodes
// get full source code for this page
sourceCode = null;
prevUrl = document.URL;
var link1 = e1.attr('href');
console.time("GetSource");
$('#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>');
log("Begin find source code, start with: " + link1);
$.get(link1, function(data) {// process single image page source to get entry-type link
var link2 = data.match(/<a\s+class='entry-type'\s+href='([^']+)/i)[1];
$.get(link2, function(data) {// process page source to get image links
log("Got page source: " + link2);
console.timeEnd("GetSource");
$('#embedLoadingIndicator').remove();
sourceCode = data;
getLinkFromSource(sourceCode);
});
});
}
}
action();
globalObserver = new MutationObserver(function(mutations, ob) {
action();
});
globalObserver.observe(target, config);
}
function pageType() {
var t = "none";
var htmlClass = $('html').attr('class');
console.log("HTML class: " + htmlClass);
if (htmlClass.match(/html-photo-page.+scrappy-view/i) !== null) t = 'single';
else if (htmlClass.match(/html-search-photos-unified-page-view/i) !== null) t = 'hover';
else if ($('div.photo-list-photo-view').filter(':first').length > 0) t = 'normal';
console.log("Page type: " + t);
return t;
}
var target = $('html')[0];
var config = {
childList : false,
attributes : true,
};
var prevType = "none";
var type = "none";
var observer = new MutationObserver(function(mutations, ob) {
type = pageType();
if (type != prevType) {
if (globalObserver != null) {
globalObserver.disconnect();
}
prevType = type;
if (type == 'single') {
action_single_page();
} else if (type == 'normal') {
action_normal_page();
}
}
});
observer.observe(target, config);