☰

tumblr-megaeditor-page-preview

show an entry page's preview in inline frame on the Tumblr Mega Editor page when the mouse cursor is on.

// ==UserScript==
// @name tumblr-megaeditor-page-preview
// @name:ja tumblr-megaeditor-page-preview
// @namespace namespace http://reppets.hatenablog.com/
// @description show an entry page's preview in inline frame on the Tumblr Mega Editor page when the mouse cursor is on.
// @description:ja Tumblrの複数投稿編集ツール(mega-editor)で、マウスカーソルを当てた投稿の個別ページをインラインフレームにプレビュー表示します。
// @compatible firefox (verified with 43.0.4)
// @compatible chrome (verified with  47.0.2526.111)
// @license https://raw.githubusercontent.com/reppets/tumblr-megaeditor-page-preview/master/LICENSE
// @include https://www.tumblr.com/mega-editor/*
// @version 1.0.0
// @grant none
// ==/UserScript==
var TIMEOUT_MILLISEC = 1000;

function toArray(nodeList) {
	return Array.prototype.slice.call(nodeList, 0);
}

function showIFrame(anchor, showOnRight) {
	iframe.source = anchor;
	iframe.setAttribute('src', anchor.getAttribute('href'));
	if (showOnRight) {
		iframe.style.transformOrigin = 'top right'
		iframe.style.left = 'auto';
		iframe.style.right = '10px';
	} else {
		iframe.style.transformOrigin = 'top left';
		iframe.style.left = '10px';
		iframe.style.right = 'auto';
	}
	iframe.style.display = 'block';
}

function hideIFrame() {
	iframe.style.display = 'none';
	iframe.source = null;
}

function appendListener(anchor) {
	if (anchor.hasAttribute('href')) {
		anchor.addEventListener('mouseenter', function(event){
			anchor.showing = setTimeout(function() {
				if (anchor.showing) {
					showIFrame(anchor, event.clientX < window.innerWidth / 2);
					anchor.showing = null;
				}
			}, TIMEOUT_MILLISEC);
		}, false);
		anchor.addEventListener('mouseleave', function() {
			if (anchor.showing) {
				clearTimeout(anchor.showing);
				anchor.showing = null;
			} else {
				anchor.hiding = setTimeout(hideIFrame, TIMEOUT_MILLISEC);
			}
		}, false);
	}
};

// construct an iframe for preview.
var iframe = document.createElement('iframe');
iframe.setAttribute('src', 'about:blank');
iframe.style.zIndex = 2147483647;
iframe.style.display = 'none';
iframe.style.position = 'fixed';
iframe.style.width = '95%';
iframe.style.height = '180%';
iframe.style.top = '50px';
iframe.style.border = '2px solid black';
iframe.style.transform = 'scale(0.5,0.5)';
iframe.style.transformOrigin = 'top left';
iframe.addEventListener('mouseenter', function() {
	if (iframe.source && iframe.source.hiding) {
		clearTimeout(iframe.source.hiding);
		iframe.source.hiding = null;
	}
});
iframe.addEventListener('mouseleave', function() {
	if (iframe.source) {
		iframe.source.hiding = setTimeout(hideIFrame, TIMEOUT_MILLISEC);
	}
});
document.getElementById('body').appendChild(iframe);

// add event listeners to anchors
var initialLinks = toArray(document.querySelectorAll('.l-content a'));
initialLinks.forEach(function(elem,index,array) {
	appendListener(elem);
});

// register an observer to add event listeners to ajax-added anchors.
var observer = new MutationObserver(function(records, observer) {
	records.forEach(function(record,i1,a1) {
		if (record.addedNodes) {
			var nodes = toArray(record.addedNodes);
			nodes.forEach(function(elem, index, array) {
				if (elem.tagName.toLowerCase() === 'a') {
					appendListener(elem);
				}
			});
		}
	});
});
observer.observe(document.getElementsByClassName('l-content')[0], {childList: true});