Участник:Tachikoma/Sandbox.js

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

/** Tabbed Edittools *************************************
  *
  *  Description: Делает из таблицы edittools страницы с табами.
  *  Made by:  Tachikoma, Anotubus
  */

(function(){
    function isClass(e,c) { return e.className.match(new RegExp("\\b"+c+"\\b")) }
    function addClass(e,c) { if(!isClass(e,c)) e.className+=c+" " }
    function remClass(e,c) { e.className=e.className.replace(new RegExp("\\b"+c+"\\b ?"),"") }
    function replClass(e,o,n) { remClass(e,o); addClass(e,n) }

    var TabSwitchTimer=null;
    var TabSwitchState=[];
    var TabSwitchGlobState=0;

    var MyEditTools = {
        extraCSS: "\
            #switcher { font-family: sans-serif }\
            #switcher div { padding: 0px 3px; top: 1px; position: relative; z-index: 3; margin: 0 0.3em 0 0; overflow-y: visible; background: #ffffff; border: 1px solid #aaaaaa; display: inline-block; margin-right: 2px; margin-left: 2px; font-size: 95%; cursor: pointer}\
            #switcher div.selected { padding: 3px 3px 0px 3px; font-weight: normal; border: 1px solid #fabd23; border-bottom: none; top: 2px; margin-right: 2px; margin-left: 2px; background-color: #ffffff; text-decoration: none}\
            #switcher div.fixed { padding: 2px 3px 0px 3px; font-weight: bold; border: 1px solid #009933; border-bottom: dotted 1px #009933; top: 1px; margin-right: 2px; margin-left: 2px }\
            #switcher div u { text-decoration:none }\
            #switcher div.swoff { font-weight: bold; float:right; text-decoration: underline; color: blue; border: none }\
            #switcher div.swon { font-weight: bold; float:right; text-decoration: underline; color: blue }\
            #switcher div#pageHelp { padding-left: 10pt; border: none; font-weight: bold; float:right; text-decoration: underline; color: blue }\
            #editpage-specialchars table { width: 100%; border: solid 1px #aaaaaa }\
            #editpage-specialchars table tr { z-index: 0 }\
            #editpage-specialchars table tr td:first-child { width: 9em }\
            #editpage-specialchars table tr.first { height: 9ex }\
            #editpage-specialchars table tr.visible { display: table-row }\
            #editpage-specialchars table tr.hidden { display: none }\
        ",
      
      updateFirstVisible : function() {
        var first=document.querySelector(".first");
        if(first) remClass(first,"first");
        var rows=document.getElementById("editpage-specialchars").getElementsByTagName("table")[0].getElementsByTagName("tr");
        for(i=0;i<rows.length;i++) if(isClass(rows[i],"visible")) { addClass(rows[i],"first"); return; }
      },
      
      setAll : function(t) {
        var table=document.getElementById("editpage-specialchars").getElementsByTagName("table")[0];
        var rows=table.getElementsByTagName("tr");
        var sw=document.getElementById("switcher").getElementsByTagName("div");
        if(t){
            for(i=0;i<rows.length;i++) {
                if(!TabSwitchGlobState)TabSwitchState[i]=[rows[i].className,sw[i].className];
                rows[i].className=t>0?"visible":"hidden";
                sw[i].className=t>0?"fixed":"";
            };
        } else {
            for(i=0;i<rows.length;i++) {
                rows[i].className=TabSwitchState[i][0];
                sw[i].className=TabSwitchState[i][1];
            }
        }
        TabSwitchGlobState=t;
        document.getElementById("pageShowAll").className=t>0?"swon":"swoff";    
        document.getElementById("pageHideAll").className=t<0?"swon":"swoff";
        MyEditTools.updateFirstVisible();
      },
      
      clearTimer : function(){
        if(TabSwitchTimer)window.clearTimeout(TabSwitchTimer); TabSwitchTimer=null;
      },
      
      clearSelected : function() {
        if(TabSwitchSelected!="") {
            var sw0=document.getElementById("sw"+TabSwitchSelected);
            var row0=document.getElementById("r"+TabSwitchSelected);
            remClass(sw0,"selected");replClass(row0,"visible","hidden")
        };
      },
      
      init : function() {
        function createHoverCallback(i) {
            return function() {
                MyEditTools.clearTimer();
                var sw=document.getElementById("sw"+i); var row=document.getElementById("r"+i);
                if(isClass(sw,"fixed")) return;
                TabSwitchTimer=window.setTimeout(function(){
                    MyEditTools.clearSelected();
                    addClass(sw,"selected");replClass(row,"hidden","visible");
                    TabSwitchSelected=i;
                    MyEditTools.updateFirstVisible();
                }, 50);
            };
        };
        function createOutCallback(i) {
            return function() {
                MyEditTools.clearTimer();
            };
        };
        function createClickCallback(i) {
            return function() {
                MyEditTools.clearTimer();
                var sw=document.getElementById("sw"+i); var row=document.getElementById("r"+i);
                if(!isClass(sw,"fixed")) {
                    replClass(sw,"selected","fixed");
                    replClass(row,"hidden","visible");
                    TabSwitchSelected="";
                } else {
                    MyEditTools.clearSelected();
                    replClass(sw,"fixed","selected");
                    TabSwitchSelected=i;
                }
                MyEditTools.updateFirstVisible();
            };
        };

        var edittools_div=document.getElementById("editpage-specialchars");
        if(!edittools_div)return;
        
        var switcher=document.createElement("caption");
        switcher.setAttribute("id","switcher");
        switcher.style.textAlign = "left";

        var table=edittools_div.getElementsByTagName("table")[0];
        var rows=table.getElementsByTagName("tr");
        for(i=0;i<rows.length;i++) {
            var d=document.createElement("div");
            var td=rows[i].getElementsByTagName("td")[0];
            var id="page"+i;

            d.setAttribute("id","sw"+id);
            rows[i].setAttribute("id","r"+id);

            d.innerHTML=td.innerHTML.replace(/:/,'');

            addHandler(d, "mouseover", createHoverCallback(id));
            addHandler(d, "mouseout",createOutCallback(id));
            addHandler(d, "click",createClickCallback(id));

            switcher.appendChild(d);

            addClass(rows[i], i==0?"visible":"hidden");
            if(i==0)addClass(d,"selected");
        };
        
        TabSwitchSelected="page0";
/*
        var d=document.createElement("div");
        d.innerHTML = "<a href="http://lurkmore.ru/Lurkmore:FAQ">Справка</a>";
        switcher.appendChild(d);
*/        
        var d=document.createElement("div");
        d.setAttribute("id","pageShowAll");
        addClickHandler(d, function() {
            MyEditTools.clearTimer();
            MyEditTools.setAll(TabSwitchGlobState>0?0:1);
        });
        d.innerHTML="Show All";
        d.className="swoff";
        switcher.appendChild(d);

        var d=document.createElement("div");
        d.setAttribute("id","pageHideAll");
        addClickHandler(d, function() {
            MyEditTools.clearTimer();
            MyEditTools.setAll(TabSwitchGlobState<0?0:-1);
        });
        d.innerHTML="Hide All";
        d.className="swoff";
        switcher.appendChild(d);
        
        edittools_div.style.border="none";

        table.insertBefore(switcher, table.firstChild);
        
        appendCSS(MyEditTools.extraCSS);
      }
    };

    addOnloadHook(MyEditTools.init());
})();