SVG Symbols Shower Bookmarklet

gistfile1.txt

javascript:void(function(){

    var doc = document;
    var body = doc.querySelector("body");
    var head = doc.querySelector("head");
    var icons = "";

    var resultElem = doc.querySelector("#icons-shower");

    if ( !resultElem ) {

        var styleElem = doc.createElement("style");
        styleElem.setAttribute("id", "icons-styles");
        styleElem.innerHTML += "UL {padding: 0;} LI {list-style: none;}";
        styleElem.innerHTML += "#icons-shower {position: absolute; z-index: 5010; top: 0; right: 0; width: 500px; padding: 30px; background: white; border: 1px solid #DDD; box-shadow: 0 0 5px rgba(0,0,0,.5)}";
        styleElem.innerHTML += ".icons-list__item {padding: 1em 0; border-bottom: 1px solid #DDD;}";
        styleElem.innerHTML += ".icons-list__title {display: inline-block;  margin: 0;}";
        styleElem.innerHTML += ".svg-icon { float: right; width: 2em; height: 2em;}";
        styleElem.innerHTML += ".icons-shower__title {margin-bottom: 1.5em}";
        styleElem.innerHTML += ".icons-shower__close {float: right; cursor: pointer; font-size: 3em; line-height: 1;}";

        head.appendChild(styleElem);

        resultElem = doc.createElement("div");
        resultElem.setAttribute("id", "icons-shower");
        body.appendChild(resultElem);

        resultCloseElem = doc.createElement("span");
        resultCloseElem.classList.add("icons-shower__close");
        resultCloseElem.innerHTML = "&times";
        resultElem.appendChild(resultCloseElem);

        resultCloseElem.onclick = function(){
            resultElem.parentNode.removeChild(resultElem);
        };

        resultContentElem = doc.createElement("div");
        resultContentElem.setAttribute("id", "icons-result");
        resultElem.appendChild(resultContentElem);

    }

    var symbols = doc.querySelectorAll("symbol");

    if ( symbols.length == 0 ) {
        resultContentElem.innerHTML = "<i>There is no symbols.</i>";
    }
    else {

    for (var i = 0; i< symbols.length; i++){
          var svg_id = symbols[i].getAttribute("id");

          icons += "<li class=\"icons-list__item\"><h5 class=\"icons-list__title\">#" + svg_id + "</h5><svg class=\"svg-icon\"><use xlink:href=\"#" + svg_id + "\"></svg></li>";
        }
        resultContentElem.innerHTML = "<h4 class=\"icons-shower__title\">Symbols on page:</h4>";
        resultContentElem.innerHTML += "<ul class=\"icons-list\">" + icons + "</ul>";
    }
})();