User:Alexis Jazz/ColMask.js

//ColMask is irrevocably released as WTFPL Version 2[www.wtfpl.net/about/] by its author, Alexis Jazz. //adds fading effect to collapsible elements, making them partially visible in collapsed state and makes the whole thing clickable in collapsed state to resolve the "fat finger problem" //see also https://phabricator.wikimedia.org/T111565#9135498

/*globals $:false,mw:false*/

mw.util.addCSS('table.mw-collapsed.aj-doublerow tbody,table.mw-collapsed.aj-multirow tbody,ul.mw-collapsed.aj-doublerow,ul.mw-collapsed.aj-multirow,ol.mw-collapsed.aj-doublerow,ol.mw-collapsed.aj-multirow,div.mw-collapsed .mw-collapsible-content{mask: linear-gradient(#000, #0000);max-height:5em;}'+ 'table.mw-collapsed.aj-altcollapse tbody tr,ul.mw-collapsed.aj-altcollapse li,ol.mw-collapsed.aj-altcollapse li{display:none}'+ 'table.mw-collapsed.aj-altcollapse:not(.aj-singlerow) tbody tr:nth-child(1),table.mw-collapsed.aj-altcollapse:not(.aj-doublerow) tbody tr:nth-child(2){display:table-row !important}'+ 'table.mw-collapsed.aj-altcollapse.aj-singlerow tbody{display:none}'+ 'tfoot.aj-collapsible-toggle button{float:unset !important}'+ 'tfoot.aj-collapsible-toggle{text-align:center}'+ 'ul.mw-collapsed.aj-altcollapse li:nth-child(1)'+ ',ul.mw-collapsed.aj-doublerow li:nth-child(2)'+ ',ul.mw-collapsed.aj-multirow li:nth-child(2)'+ ',ul.mw-collapsed.aj-multirow li:nth-child(3)'+ ',ol.mw-collapsed.aj-altcollapse li:nth-child(1)'+ ',ol.mw-collapsed.aj-doublerow li:nth-child(2)'+ ',ol.mw-collapsed.aj-multirow li:nth-child(2)'+ ',ol.mw-collapsed.aj-multirow li:nth-child(3)'+ '{display:list-item !important}'+ 'div.mw-collapsed .mw-collapsible-content{display:block !important}' );

var ColMask = function(int,colDivs,colLists,colTables,newFooter,newTr,newTd,itemCount,listClass,rowCount,rowClass) { colDivs = $('div.mw-collapsible'); for(int=0;int<colDivs.length;int++){ colDivs[int].classList.add('aj-altcollapse'); }	colLists = $('ol.mw-collapsible,ul.mw-collapsible'); for(int=0;int<colLists.length;int++){ if ( colLists[int].classList.contains('aj-nomask') || colLists[int].classList.contains('aj-altcollapse') ) { continue; }		itemCount = colLists[int].querySelectorAll('li').length; if ( itemCount < 3 ) { listClass='aj-singlerow'; } else if ( itemCount == 3 ) { listClass='aj-doublerow'; } else { listClass='aj-multirow'; }		colLists[int].classList.add(listClass); colLists[int].classList.add('aj-altcollapse'); }	colTables = $('table.mw-collapsible'); newFooter = {}; newTr = {}; newTd = {}; for(int=0;inttr').length; if ( rowCount < 2 ) { rowClass='aj-singlerow'; } else if ( rowCount == 2 ) { rowClass='aj-doublerow'; } else { rowClass='aj-multirow'; }		colTables[int].classList.add(rowClass); colTables[int].classList.add('aj-altcollapse'); if ( colTables[int].querySelectorAll('button.mw-collapsible-toggle')[0] ) { newFooter[int] = document.createElement('tfoot'); newTr[int] = document.createElement('tr'); newTd[int] = document.createElement('td'); newTd[int].colSpan = 999; newTr[int].append(newTd[int]); newFooter[int].append(newTr[int]); newFooter[int].classList.add('aj-collapsible-toggle'); newTd[int].append(colTables[int].querySelectorAll('button.mw-collapsible-toggle')[0]); colTables[int].append(newFooter[int]); }	}	$('.mw-collapsible.aj-altcollapse').on('click',function(event){		if ( event.delegateTarget.classList.contains('mw-collapsed') ) {			event.stopPropagation;			try{event.delegateTarget.querySelectorAll('.mw-collapsible-toggle')[0].click;} catch(e){}		}	}); }; if ( $('.mw-made-collapsible:eq(0)').length == 0 ) { mw.loader.load('ext.gadget.MakeMobileCollapsible'); } var ColMaskInt=0; var DelayedColMask = setInterval(function {	ColMaskInt++;	if ( $('.mw-made-collapsible:eq(0)').length == 1 || ColMaskInt > 50 ) {		mw.hook( 'wikipage.content' ).add( ColMask );		clearInterval(DelayedColMask);	}

},100);