Add bounding boxes to GlyphWiki

Add bounding boxes to 200px GlyphWiki preview images that approximate the one on the Glyph Editor

Poser une question, écrire un avis, ou signaler le script.

Enveloppe les lignes

// ==UserScript==
// @name        Add bounding boxes to GlyphWiki
// @namespace   szc
// @description Add bounding boxes to 200px GlyphWiki preview images that approximate the one on the Glyph Editor
// @include     /^https?://(en\.|ko\.|zhs\.|zht\.|)glyphwiki\.org/.*$/
// @version     1
// @grant       GM_addStyle
// ==/UserScript==

function addClasses() {
	let images = document.getElementsByClassName('glyph');
	
	for (var i = 0; i < images.length; i++) {	
		let image = images.item(i);
		
		if (
			image.classList.contains('thumb100')
			||
			image.classList.contains('thumb')
		) {
			continue;
		}
		
		let wrapper = document.createElement('div');
		let boundingBox = document.createElement('div');

		wrapper.classList.add('x-glyph-200-wrapper');
		boundingBox.classList.add('x-glyph-200-bounding-box');
		
		wrapper.innerHTML = image.outerHTML + boundingBox.outerHTML;
		image.outerHTML = wrapper.outerHTML;
	}
}

function addStyles() {
	GM_addStyle(`
.x-glyph-200-wrapper {
	position: relative;
	display: inline-block;
}

.x-glyph-200-bounding-box {
	position: absolute;
	top: 0;
	border: 1px dotted darkgrey;
	content: "";
	height: 176px;
	width: 176px;
	margin-top: calc(12px + 1em);
	margin-left: 12px;
}

.compare ~ .x-glyph-200-bounding-box {
	margin-top: calc(12px + 1em);
	margin-left: calc(12px + 1em);
}
	`);
}

addClasses();
addStyles();