User:Paradoctor/CatVisor-test.js

//helpers function newNode(type,text,attr1,cont1,attr2,cont2,attr3,cont3,attr4,cont4) { var a = document.createElement(type) if (text>'') a.textContent = text if (attr1>'') a.setAttribute(attr1,cont1) if (attr2>'') a.setAttribute(attr2,cont2) if (attr3>'') a.setAttribute(attr3,cont3) if (attr4>'') a.setAttribute(attr4,cont4) return a } function newControl(label,onclik) { var a = newNode('a',label) a.onclick=onclik return a }

//master switch function updateCSS { if ( isRow && isSorted) document.getElementById('CatVisorStyle').textContent = CatVisor_style_base + CatVisor_style_row + CatVisor_style_sorted + CatVisor_style_first if ( isRow && !isSorted) document.getElementById('CatVisorStyle').textContent = CatVisor_style_base + CatVisor_style_row if (!isRow && isSorted) document.getElementById('CatVisorStyle').textContent = CatVisor_style_base + CatVisor_style_column + CatVisor_style_sorted if (!isRow && !isSorted) document.getElementById('CatVisorStyle').textContent = CatVisor_style_base + CatVisor_style_column } function flexsort  { isSorted = true;  updateCSS } function flexunsort { isSorted = false; updateCSS } function flexrow   { isRow    = true;  updateCSS } function flexcolumn { isRow   = false; updateCSS }

//find objects of interest var catbox           = document.getElementById('catlinks') var catbox_normal_ul = document.getElementById('mw-normal-catlinks').getElementsByTagName('ul')[0] catbox_normal_ul.setAttribute('id','catlist') var catbox_normal_lis = catbox_normal_ul.getElementsByTagName('li') //add stylesheet, create style fragments catbox.appendChild(newNode("style",CatVisor_style_base,'id','CatVisorStyle','type','text/css')) var CatVisor_style_base    =   '#CatVisorControls a {cursor:pointer; margin-right:0.25em}\n' + '#CatVisorControls a:first-child:after {content:":"}\n' + '#catlist {display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap}\n' //nail "add new category" to the last position when HotCat is enabled + '#catlist li.noprint {-ms-flex-order:666666; order:666666}\n' var CatVisor_style_row     =   '#catlist {-ms-flex-direction:row; flex-direction:row}\n' var CatVisor_style_column  =   '#catlist {-ms-flex-direction:column; flex-direction:column}\n' + '#catlist li {border-left:none; padding-left:0.5em}\n' var CatVisor_style_first   =   '#catlist li:first-child {border-left:1px solid #AAA; padding-left:0.5em}\n' + '#firstinsorted {border-left:none; padding-left:0.25em}\n' //compute alphabetic ordering var alphaindex = [] for (var i=0;icatbox_normal_lis[b].textContent)?1:-1}) var CatVisor_style_sorted  = '' for (var i=0;i<catbox_normal_lis.length;i++) CatVisor_style_sorted += '#catlist li:nth-child('+(alphaindex[i]+1)+') {-ms-flex-order:'+i+'; order:'+i+'}\n' //first element in row display is styled differently catbox_normal_lis[alphaindex[0]].setAttribute("id","firstinsorted")

//add controls controls = newNode('div','','id','CatVisorControls') controls.appendChild(newNode('a','CatVisor','href','http://en.wikipedia.org/wiki/User:Paradoctor/CatVisor')) controls.appendChild(newControl('column' ,flexcolumn)) controls.appendChild(newControl('row'    ,flexrow   )) controls.appendChild(newControl('sorted' ,flexsort  )) controls.appendChild(newControl('unsorted',flexunsort)) catbox.insertBefore(controls,catbox.firstChild)

//set default and beat it var isRow=true, isSorted=false; updateCSS(isRow,isSorted)