☰

Tag Preview

Show tags on hover.

// ==UserScript==
// @name         Tag Preview
// @version      2.02
// @description  Show tags on hover.
// @author       Hauffen
// @runat        document-start
// @include      /https?:\/\/(e-|ex)hentai\.org\/.*/
// @require      https://code.jquery.com/jquery-3.3.1.min.js
// @namespace    https://greasyfork.org/users/285675
// ==/UserScript==

(function() {
	let $ = window.jQuery, tags = {};
	const elem = {0: '.gl3m a', 1: '.gl3m a', 2: '.gl3c a', 4: '.gl3t a'};
    const defaultNamespace = "misc";
	const spl = document.URL.split('/');
	var element, title;

	if ((spl[3].substr(0, 1).match(/[?#fptw]/i) && !spl[3].startsWith('toplist')) || !spl[3]) {
        if ($('#tagPreview')) return;
		var $tagP = $('<div id="tagPreview">');
		$tagP.css({
			position: 'absolute',
			zIndex: '2',
			visiblility: 'hidden !important',
			maxWidth: '400px',
			background: window.getComputedStyle(document.getElementsByClassName('ido')[0]).backgroundColor,
			border: '1px solid #000',
			padding: '10px'
		});
		$tagP.appendTo("body");
		$('#tagPreview').css('visibility', 'hidden');

		element = elem[$(".searchnav div > select > option:selected").index()];

		$('.itg').on('mouseover', `${element}`, function(e) {
			if(document.getElementById('tagPreview').children.length > 2) { $tagP.empty(); }

            title = this.children[0].title; // Save the title so we can put it back later, probably unnecessary
            this.children[0].title = ""; // Clear the title so we don't have it over our new window

			var str = this.href.split('/');
			generateRequest(str[4], str[5]);

			var posY, posX = (e.pageX + 432 < screen.width) ? e.pageX + 10 : e.pageX - 412;
			var scrollHeight = $(document).height();
			var scrollPosition = $(window).height() + $(window).scrollTop();

			if ((scrollHeight - scrollPosition) < (scrollHeight / 10)) { posY = (e.pageY + 300 < scrollHeight) ? e.pageY + 10 : e.pageY - 300; }
			else { posY = e.pageY + 10; }

			$tagP.css({
				left: posX,
				top: posY,
				border: '1px solid ' + window.getComputedStyle(document.getElementsByTagName("a")[0]).getPropertyValue("color"),
				visibility: 'visible'
			});
			$('#tagPreview').css('visibility', 'visible');
		}).on('mousemove', `${element}`,function(e) {
			var posY, posX = (e.pageX + 432 < screen.width) ? e.pageX + 10 : e.pageX - 412;
			var scrollHeight = $(document).height();
			var scrollPosition = $(window).height() + $(window).scrollTop();

			if ((scrollHeight - scrollPosition) < (scrollHeight / 10)) { posY = (e.pageY + document.getElementById('tagPreview').offsetHeight < window.innerHeight) ? e.pageY + 10 : e.pageY - 10 - document.getElementById('tagPreview').offsetHeight; }
			else { posY = e.pageY + 10; }

			$tagP.css({
				visibility:'visible',
				top: posY,
				left: posX
			});
			$('#tagPreview').css('visibility', 'visible');
		}).on('mouseout', `${element}`, function() {
            this.children[0].title = title; // Put the saved title back
			$tagP.css({
				visibility:'hidden'
			});
			$('#tagPreview').css('visibility', 'hidden');
			$tagP.empty(); // Clear out the tag
		});

		$(document).on('scroll', function() {
			$('#tagPreview').css('visibility', 'hidden');
		});
	} else {
		return;
	}

	/**
	 * Generate the inner HTML for the tag preview window
	 * @param {JSON} apirsp - The E-H API response
	 */
	function generateListing(apirsp) {
        generateTags(apirsp); // We actually have to generate the tag list from the raw JSON file
		$('#tagPreview').append(`<h1 id="gn">${apirsp.title}</h1><h1 id="gj">${apirsp.title_jpn}</h1>`);
		let taglist = "<div id='taglist' style='height:fit-content;'><table><tbody>";
        for (const namespace in tags) {
            taglist += `<tr><td class="tc">${namespace}:</td><td>`;
            for (var i = 0; i < tags[namespace].length; i++) {
                taglist += `<div id="td_${namespace}:${tags[namespace][i]}" class="gt" style="opacity:1.0"><a id="ta_${namespace}:${tags[namespace][i]}" href="${document.location.origin}/tag/${namespace}:${tags[namespace][i]}">${tags[namespace][i]}</a></div>`;
            }
            taglist += "</td></tr>";
        }
        taglist += "</tbody></table></div>";
        $('#tagPreview').append(taglist);
	}

	/**
	 * Converts the tag listing within the API response to a categorized array
	 * @param {JSON} apirsp - The E-H API response
	 */
	function generateTags(apirsp) {
        tags = {}; // Reset the tags array for each new tag listing
		if (Array.isArray(apirsp.tags)) {
			for (const jsonTag of apirsp.tags) {
				const stringTag = getJsonString(jsonTag);
				if (stringTag === null) { continue; }

				const {tag, namespace} = getTagAndNamespace(stringTag);

				let namespaceTags;
				if (tags.hasOwnProperty(namespace)) { namespaceTags = tags[namespace]; }
                else {
					namespaceTags = [];
					tags[namespace] = namespaceTags;
				}
				namespaceTags.push(tag);
			}
		}
	}

	/**
     * Generate the JSON request for the E-H API
	 * @param {Integer} gid - The gallery ID
	 * @param {String} token - The gallery token
     */
    function generateRequest(gid, token) {
        var reqList = [[gid, token]]; // We use an array for our gidlist, since the API can handle up to 25 galleries per request
        var request = {"method": "gdata", "gidlist": reqList, "namespace": 1};

        var req = new XMLHttpRequest();
        req.onreadystatechange = e => {
            if (req.readyState == 4) {
				if (req.status == 200) {
					var apirsp = JSON.parse(req.responseText);
					for (var i = 0; i < apirsp.gmetadata.length; i++) generateListing(apirsp.gmetadata[i]);
				} else { console.error(); }
			}
        }
        req.open("POST", document.location.origin + "/api.php", true); // Due to CORS, we need to use the API on the same domain as the script
        req.send(JSON.stringify(request));
    }

	// Helper functions
	function getTagAndNamespace(tag) {
		const pattern = /^(?:([^:]*):)?([\w\W]*)$/;
		const match = pattern.exec(tag);
		return (match !== null) ?
			({ tag: match[2], namespace: match[1] || defaultNamespace }) :
			({ tag: tag, namespace: defaultNamespace });
	}

	function toProperCase(text) {
		return text.replace(/(^|\W)(\w)/g, (m0, m1, m2) => `${m1}${m2.toUpperCase()}`);
	}

	function getJsonString(value) {
		if (typeof(value) === "string") { return value; }
		if (typeof(value) === "undefined" || value === null) { return value; }
		return `${value}`;
	}
})();