☰

Blogger Editor IMG helper

Help adding/removing classes to your images and automatically remove anchor links.

  1. // ==UserScript==
  2. // @name         Blogger Editor IMG helper
  3. // @namespace    http://llorxscript.blogspot.com.es/
  4. // @version      0.1
  5. // @description  Help adding/removing classes to your images and automatically remove anchor links.
  6. // @author       Llorx
  7. // @match        https://www.blogger.com/blogger.g*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. var config = {
  12.     removeAnchor: true,
  13.     classes: {
  14.         gif: {
  15.             color: "red",
  16.             unique: true
  17.         },
  18.         img: {
  19.             color: "blue",
  20.             unique: true
  21.         },
  22.     }
  23. };
  24.  
  25. (function() {
  26.     'use strict';
  27.     var lastImg;
  28.     var interval = setInterval(function() {
  29.         var target = document.querySelector('#postingComposeBox');
  30.         if (target && target.contentDocument) {
  31.             var header = target.contentDocument.head;
  32.             target = target.contentDocument.querySelector('#postingComposeBox');
  33.             if (header && target) {
  34.                 var style = document.createElement('style');
  35.                 style.type = 'text/css';
  36.                 var st = [];
  37.                 for (var className in config.classes) {
  38.                     if (config.classes.hasOwnProperty(className)) {
  39.                         var cl = config.classes[className];
  40.                         st += "."+className+" {border-radius:10px; border: 5px solid "+cl.color+";} ";
  41.                     }
  42.                 }
  43.                 style.appendChild(document.createTextNode(st));
  44.                 header.appendChild(style);
  45.                 clearInterval(interval);
  46.                 changes(target);
  47.             }
  48.         }
  49.     }, 1000);
  50.  
  51.     function changes(target) {
  52.         var observer = new MutationObserver(function(mutations) {
  53.             mutations.forEach(function(mutation) {
  54.                 if (config.removeAnchor) {
  55.                     for (var i = 0; i < mutation.addedNodes.length; i++) {
  56.                         if (!mutation.addedNodes[i].querySelectorAll) {
  57.                             continue;
  58.                         }
  59.                         var all = mutation.addedNodes[i].querySelectorAll("a > img");
  60.                         for (var ii = 0; ii < all.length; ii++) {
  61.                             var n = all[ii];
  62.                             var a = n.parentNode;
  63.                             if (a.href == n.src) {
  64.                                 var p = a.parentNode;
  65.                                 p.insertBefore(n, a);
  66.                                 p.removeChild(a);
  67.                             }
  68.                         }
  69.                     }
  70.                 }
  71.                 if (mutation.target.nodeName && mutation.target.nodeName.toLowerCase() == 'img') {
  72.                     lastImg = mutation.target;
  73.                 }
  74.             });
  75.         });
  76.         observer.observe(target, {
  77.             childList: true,
  78.             subtree: true,
  79.             attributes: true
  80.         });
  81.     }
  82.     var observer = new MutationObserver(function(mutations) {
  83.         mutations.forEach(function(mutation) {
  84.             for (var i = 0; i < mutation.addedNodes.length; i++) {
  85.                 if (!mutation.addedNodes[i].querySelector) {
  86.                     continue;
  87.                 }
  88.                 var el = mutation.addedNodes[i].querySelector("[id='tr_sizes-div']");
  89.                 if (!el || el.getAttribute("data-customimg")) {
  90.                     return;
  91.                 }
  92.                 el.setAttribute("data-customimg", "true");
  93.                 for (var className in config.classes) {
  94.                     if (config.classes.hasOwnProperty(className)) {
  95.                         var cl = config.classes[className];
  96.                         (function(className, cl) {
  97.                             var classClick = document.createElement("span");
  98.                             classClick.style.cursor = "pointer";
  99.                             classClick.style.textDecoration = "underline";
  100.                             classClick.style.color = "#0000cc";
  101.                             cl.check = function() {
  102.                                 if (!lastImg) {
  103.                                     return;
  104.                                 }
  105.                                 if (hasClass(lastImg, className)) {
  106.                                     classClick.innerHTML = "REMOVE " + className;
  107.                                 } else {
  108.                                     classClick.innerHTML = "SET " + className;
  109.                                 }
  110.                             };
  111.                             setTimeout(cl.check, 1);
  112.                             classClick.onclick = function() {
  113.                                 if (!lastImg) {
  114.                                     return;
  115.                                 }
  116.                                 var cls = lastImg.className;
  117.                                 if (!cls) {
  118.                                     cls = "";
  119.                                 }
  120.                                 cls = cls.split(" ");
  121.                                 if (cls.indexOf(className) > -1) {
  122.                                     cls.splice(cls.indexOf(className), 1);
  123.                                 } else {
  124.                                     cls.push(className);
  125.                                 }
  126.                                 if (cl.unique) {
  127.                                     for (var cName in config.classes) {
  128.                                         if (config.classes.hasOwnProperty(cName) && className != cName) {
  129.                                             var c = config.classes[cName];
  130.                                             if (c.unique) {
  131.                                                 if (cls.indexOf(cName) > -1) {
  132.                                                     cls.splice(cls.indexOf(cName), 1);
  133.                                                 }
  134.                                             }
  135.                                         }
  136.                                     }
  137.                                 }
  138.                                 while (cls.indexOf("") > -1) {
  139.                                     cls.splice(cls.indexOf(""), 1);
  140.                                 }
  141.                                 lastImg.className = cls.join(" ");
  142.                                 if (lastImg.className === "") {
  143.                                     lastImg.removeAttribute("class");
  144.                                 }
  145.                                 for (var cN in config.classes) {
  146.                                     if (config.classes.hasOwnProperty(cN)) {
  147.                                         config.classes[cN].check();
  148.                                     }
  149.                                 }
  150.                             };
  151.                             el.insertBefore(document.createTextNode(" | "), el.firstChild);
  152.                             el.insertBefore(classClick, el.firstChild);
  153.                         })(className, cl);
  154.                     }
  155.                 }
  156.             }
  157.         });
  158.     });
  159.     observer.observe(document.body, {
  160.         childList: true,
  161.         subtree: true
  162.     });
  163.     function hasClass(element, cls) {
  164.         return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
  165.     }
  166. })();