☰

Add bounding boxes to GlyphWiki

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

  1. // ==UserScript==
  2. // @name        Add bounding boxes to GlyphWiki
  3. // @namespace   szc
  4. // @description Add bounding boxes to 200px GlyphWiki preview images that approximate the one on the Glyph Editor
  5. // @include     /^https?://(en\.|ko\.|zhs\.|zht\.|)glyphwiki\.org/.*$/
  6. // @version     1
  7. // @grant       GM_addStyle
  8. // ==/UserScript==
  9.  
  10. function addClasses() {
  11. 	let images = document.getElementsByClassName('glyph');
  12. 	
  13. 	for (var i = 0; i < images.length; i++) {	
  14. 		let image = images.item(i);
  15. 		
  16. 		if (
  17. 			image.classList.contains('thumb100')
  18. 			||
  19. 			image.classList.contains('thumb')
  20. 		) {
  21. 			continue;
  22. 		}
  23. 		
  24. 		let wrapper = document.createElement('div');
  25. 		let boundingBox = document.createElement('div');
  26.  
  27. 		wrapper.classList.add('x-glyph-200-wrapper');
  28. 		boundingBox.classList.add('x-glyph-200-bounding-box');
  29. 		
  30. 		wrapper.innerHTML = image.outerHTML + boundingBox.outerHTML;
  31. 		image.outerHTML = wrapper.outerHTML;
  32. 	}
  33. }
  34.  
  35. function addStyles() {
  36. 	GM_addStyle(`
  37. .x-glyph-200-wrapper {
  38. 	position: relative;
  39. 	display: inline-block;
  40. }
  41.  
  42. .x-glyph-200-bounding-box {
  43. 	position: absolute;
  44. 	top: 0;
  45. 	border: 1px dotted darkgrey;
  46. 	content: "";
  47. 	height: 176px;
  48. 	width: 176px;
  49. 	margin-top: calc(12px + 1em);
  50. 	margin-left: 12px;
  51. }
  52.  
  53. .compare ~ .x-glyph-200-bounding-box {
  54. 	margin-top: calc(12px + 1em);
  55. 	margin-left: calc(12px + 1em);
  56. }
  57. 	`);
  58. }
  59.  
  60. addClasses();
  61. addStyles();