Difference between revisions of "MediaWiki:Common.js"
From LIMSWiki
Jump to navigationJump to searchShawndouglas (talk | contribs) (Added code.) |
Shawndouglas (talk | contribs) m (Testing.) |
||
Line 432: | Line 432: | ||
NavToggle.firstChild.data = NavigationBarHide; | NavToggle.firstChild.data = NavigationBarHide; | ||
} | } | ||
} | |||
/* Experiment to see if adding LESS script here works */ | |||
// Framework grid generation | |||
// | |||
// Used only by Bootstrap to generate the correct number of grid classes given | |||
// any value of `@grid-columns`. | |||
.make-grid-columns() { | |||
// Common styles for all sizes of grid columns, widths 1-12 | |||
.col(@index) { // initial | |||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | |||
.col((@index + 1), @item); | |||
} | |||
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo | |||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | |||
.col((@index + 1), ~"@{list}, @{item}"); | |||
} | |||
.col(@index, @list) when (@index > @grid-columns) { // terminal | |||
@{list} { | |||
position: relative; | |||
// Prevent columns from collapsing when empty | |||
min-height: 1px; | |||
// Inner gutter via padding | |||
padding-left: (@grid-gutter-width / 2); | |||
padding-right: (@grid-gutter-width / 2); | |||
} | |||
} | |||
.col(1); // kickstart it | |||
} | |||
.float-grid-columns(@class) { | |||
.col(@index) { // initial | |||
@item: ~".col-@{class}-@{index}"; | |||
.col((@index + 1), @item); | |||
} | |||
.col(@index, @list) when (@index =< @grid-columns) { // general | |||
@item: ~".col-@{class}-@{index}"; | |||
.col((@index + 1), ~"@{list}, @{item}"); | |||
} | |||
.col(@index, @list) when (@index > @grid-columns) { // terminal | |||
@{list} { | |||
float: left; | |||
} | |||
} | |||
.col(1); // kickstart it | |||
} | |||
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { | |||
.col-@{class}-@{index} { | |||
width: percentage((@index / @grid-columns)); | |||
} | |||
} | |||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { | |||
.col-@{class}-push-@{index} { | |||
left: percentage((@index / @grid-columns)); | |||
} | |||
} | |||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { | |||
.col-@{class}-push-0 { | |||
left: auto; | |||
} | |||
} | |||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { | |||
.col-@{class}-pull-@{index} { | |||
right: percentage((@index / @grid-columns)); | |||
} | |||
} | |||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { | |||
.col-@{class}-pull-0 { | |||
right: auto; | |||
} | |||
} | |||
.calc-grid-column(@index, @class, @type) when (@type = offset) { | |||
.col-@{class}-offset-@{index} { | |||
margin-left: percentage((@index / @grid-columns)); | |||
} | |||
} | |||
// Basic looping in LESS | |||
.loop-grid-columns(@index, @class, @type) when (@index >= 0) { | |||
.calc-grid-column(@index, @class, @type); | |||
// next iteration | |||
.loop-grid-columns((@index - 1), @class, @type); | |||
} | |||
// Create grid for specific class | |||
.make-grid(@class) { | |||
.float-grid-columns(@class); | |||
.loop-grid-columns(@grid-columns, @class, width); | |||
.loop-grid-columns(@grid-columns, @class, pull); | |||
.loop-grid-columns(@grid-columns, @class, push); | |||
.loop-grid-columns(@grid-columns, @class, offset); | |||
} | } | ||
/* Load any necessary secondary scripts */ | /* Load any necessary secondary scripts */ | ||
importScript('MediaWiki:JBBWidget.js'); | importScript('MediaWiki:JBBWidget.js'); |
Revision as of 18:17, 6 March 2015
/* Any JavaScript here will be loaded for all users on every page load. */
/* Return whether a particular class is used**************************************
* Description: Uses regular expressions and caching for better performance.
*/
var usesClass = (function () {
var reCache = {};
return function (element, className) {
return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
};
})();
/** Collapsible tables code *****************************************************
* Description: Allows tables to be collapsed, showing only the header
* Author: User:Bigfoot Lover @ BionicWiki.com
* Added: 24 September 2007
*/
/* Add a hook to make buttons, where need be, on every pageload */
addOnloadHook( createTableButtons );
/* Define global variables:
* autoShrink is the number of tables that must exist on the page for usage of "class=collapsible autocollapse"
* minimizeSymbol can be either a symbol such as a minus sign or a word such as hide or disappear
* maximizeSymbol can be either a symbol such as a plus sign or a word such as show or appear */
var autoShrink = 2;
var minimizeSymbol = "hide";
var maximizeSymbol = "show";
/* Define functions that do-the-work */
/* Function toggleTableView() toggles a specified table's view from minimized to maximized, or vice versa */
function toggleTableView( tableIndex, tableShrink )
{
var Table = document.getElementById( "collapsibleTable" + tableIndex );
/* If there is no collapsible tables on the page, no need to do any shrinking */
if (!Table) {
return false;
}
var Button = document.getElementById( "collapseButton" + tableIndex );
/* If no collapsible buttons, no need to do any shrinking */
if (!Button ) {
return false;
}
/* Grab the rows of the specified table */
var Rows = Table.getElementsByTagName( "tr" );
/* Do the hiding/unhiding */
if ( Button.firstChild.data == minimizeSymbol || tableShrink == 1 ) {
/* if the button is set to minimize its contents,
* then loop through the rows and mark them hidden */
var count = 1;
while (Rows.length > count) {
if (Rows[count].parentNode.parentNode.id == ("collapsibleTable" + tableIndex))
{
Rows[count].style.display = "none";
}
count++;
}
/* After marking, change the table to show the maximize symbol */
Button.firstChild.data = maximizeSymbol;
} else {
/* if the button is set to maximize its contents,
* then loop through the rows and mark them visible */
var count = 1;
while (Rows.length > count) {
if(Rows[count].parentNode.parentNode.id == ("collapsibleTable" + tableIndex))
{
Rows[count].style.display = Rows[0].style.display;
}
count++;
}
/* After marking, change the table to show the minimize symbol */
Button.firstChild.data = minimizeSymbol;
}
}
/* Funtion createTableButtons() creates the plus or minus symbol and alignment text
* to be applied on collapsible tables */
function createTableButtons()
{
/* Define local variables */
var tableIndex = 0;
var NavBoxes = new Object();
var Tables = document.getElementsByTagName( "table" );
/* Use two count variables to handle cases where continue is used */
var loopcount = 0;
var count = 0;
while (Tables.length > loopcount) {
/* For all collapsible table on the page, this code goes through
* them and makes a button for each one individually */
count = loopcount;
loopcount++;
if ( usesClass( Tables[count], "collapsible" ) ) {
/* Proceed only if a header row and header exist */
var HeaderRow = Tables[count].getElementsByTagName( "tr" )[0];
if (!HeaderRow) continue;
var Header = HeaderRow.getElementsByTagName( "th" )[0];
if (!Header) continue;
/* Log where you are in the looping */
NavBoxes[ tableIndex ] = Tables[count];
/* Set the identifier of the table being edited in this iteration */
Tables[count].setAttribute( "id", "collapsibleTable" + tableIndex );
/* Create the button assuming it is a minimized table
* to do the initial creation. */
var Button = document.createElement( "span" );
var ButtonLink = document.createElement( "a" );
var ButtonText = document.createTextNode( maximizeSymbol );
/* Define where the button floats and its font and size.
* The width should be set to the max character count of
* the mininizeSymbol and maximizeSymbol + 2. ie. min and max
* are 3 letters each + 2 = 5em */
Button.style.styleFloat = "right";
Button.style.cssFloat = "right";
Button.style.fontWeight = "normal";
Button.style.textAlign = "right";
Button.style.width = "5em";
/* Set the link color and identifier */
ButtonLink.style.color = Header.style.color;
ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
/* Set the destination of the button */
ButtonLink.setAttribute( "href", "javascript:toggleTableView(" + tableIndex + ");" );
ButtonLink.appendChild( ButtonText );
Button.appendChild( document.createTextNode( "[" ) );
Button.appendChild( ButtonLink );
Button.appendChild( document.createTextNode( "]" ) );
/* Load the next header and table for the next iteration */
Header.insertBefore( Button, Header.childNodes[0] );
tableIndex++;
}
}
/* Earlier in this function, assumed all tables are minimized to do the initial creation.
* Now, loop again through the tables and set those to maximized that need setting,
* and set the rows of those that don't as hidden */
loopcount = 0;
while (tableIndex > loopcount) {
/* If autocollapse or collapse is not invalid, maximize; otherwise, minimize */
if (((autoShrink > tableIndex) && usesClass( NavBoxes[loopcount], "autocollapse" )) || !usesClass( NavBoxes[loopcount], "collapsed" ) ) {
toggleTableView( loopcount, 0 );
}
else {
toggleTableView( loopcount, 1 );
}
loopcount++;
}
}
/* JavaScript for rounding borders
Source: http://webdesign.html.it/articoli/leggi/528/more-nifty-corners */
function NiftyCheck(){
if(!document.getElementById || !document.createElement)
return(false);
isXHTML=/html\:/.test(document.getElementsByTagName('body')[0].nodeName);
if(Array.prototype.push==null){Array.prototype.push=function(){
this[this.length]=arguments[0]; return(this.length);}}
return(true);
}
function Rounded(selector,wich,bk,color,opt){
var i,prefixt,prefixb,cn="r",ecolor="",edges=false,eclass="",b=false,t=false;
if(color=="transparent"){
cn=cn+"x";
ecolor=bk;
bk="transparent";
}
else if(opt && opt.indexOf("border")>=0){
var optar=opt.split(" ");
for(i=0;i<optar.length;i++)
if(optar[i].indexOf("#")>=0) ecolor=optar[i];
if(ecolor=="") ecolor="#666";
cn+="e";
edges=true;
}
else if(opt && opt.indexOf("smooth")>=0){
cn+="a";
ecolor=Mix(bk,color);
}
if(opt && opt.indexOf("small")>=0) cn+="s";
prefixt=cn;
prefixb=cn;
if(wich.indexOf("all")>=0){t=true;b=true}
else if(wich.indexOf("top")>=0) t="true";
else if(wich.indexOf("tl")>=0){
t="true";
if(wich.indexOf("tr")<0) prefixt+="l";
}
else if(wich.indexOf("tr")>=0){
t="true";
prefixt+="r";
}
if(wich.indexOf("bottom")>=0) b=true;
else if(wich.indexOf("bl")>=0){
b="true";
if(wich.indexOf("br")<0) prefixb+="l";
}
else if(wich.indexOf("br")>=0){
b="true";
prefixb+="r";
}
var v=getElementsBySelector(selector);
var l=v.length;
for(i=0;i<l;i++){
if(edges) AddBorder(v[i],ecolor);
if(t) AddTop(v[i],bk,color,ecolor,prefixt);
if(b) AddBottom(v[i],bk,color,ecolor,prefixb);
}
}
function AddBorder(el,bc){
var i;
if(!el.passed){
if(el.childNodes.length==1 && el.childNodes[0].nodeType==3){
var t=el.firstChild.nodeValue;
el.removeChild(el.lastChild);
var d=CreateEl("span");
d.style.display="block";
d.appendChild(document.createTextNode(t));
el.appendChild(d);
}
for(i=0;i<el.childNodes.length;i++){
if(el.childNodes[i].nodeType==1){
el.childNodes[i].style.borderLeft="1px solid "+bc;
el.childNodes[i].style.borderRight="1px solid "+bc;
}
}
}
el.passed=true;
}
function AddTop(el,bk,color,bc,cn){
var i,lim=4,d=CreateEl("b");
if(cn.indexOf("s")>=0) lim=2;
if(bc) d.className="artop";
else d.className="rtop";
d.style.backgroundColor=bk;
for(i=1;i<=lim;i++){
var x=CreateEl("b");
x.className=cn + i;
x.style.backgroundColor=color;
if(bc) x.style.borderColor=bc;
d.appendChild(x);
}
el.style.paddingTop=0;
el.insertBefore(d,el.firstChild);
}
function AddBottom(el,bk,color,bc,cn){
var i,lim=4,d=CreateEl("b");
if(cn.indexOf("s")>=0) lim=2;
if(bc) d.className="artop";
else d.className="rtop";
d.style.backgroundColor=bk;
for(i=lim;i>0;i--){
var x=CreateEl("b");
x.className=cn + i;
x.style.backgroundColor=color;
if(bc) x.style.borderColor=bc;
d.appendChild(x);
}
el.style.paddingBottom=0;
el.appendChild(d);
}
function CreateEl(x){
if(isXHTML) return(document.createElementNS('http://www.w3.org/1999/xhtml',x));
else return(document.createElement(x));
}
function getElementsBySelector(selector){
var i,selid="",selclass="",tag=selector,f,s=[],objlist=[];
if(selector.indexOf(" ")>0){ //descendant selector like "tag#id tag"
s=selector.split(" ");
var fs=s[0].split("#");
if(fs.length==1) return(objlist);
f=document.getElementById(fs[1]);
if(f) return(f.getElementsByTagName(s[1]));
return(objlist);
}
if(selector.indexOf("#")>0){ //id selector like "tag#id"
s=selector.split("#");
tag=s[0];
selid=s[1];
}
if(selid!=""){
f=document.getElementById(selid);
if(f) objlist.push(f);
return(objlist);
}
if(selector.indexOf(".")>0){ //class selector like "tag.class"
s=selector.split(".");
tag=s[0];
selclass=s[1];
}
var v=document.getElementsByTagName(tag); // tag selector like "tag"
if(selclass=="")
return(v);
for(i=0;i<v.length;i++){
if(v[i].className.indexOf(selclass)>=0){
objlist.push(v[i]);
}
}
return(objlist);
}
function Mix(c1,c2){
var i,step1,step2,x,y,r=new Array(3);
if(c1.length==4)step1=1;
else step1=2;
if(c2.length==4) step2=1;
else step2=2;
for(i=0;i<3;i++){
x=parseInt(c1.substr(1+step1*i,step1),16);
if(step1==1) x=16*x+x;
y=parseInt(c2.substr(1+step2*i,step2),16);
if(step2==1) y=16*y+y;
r[i]=Math.floor((x*50+y*50)/100);
}
return("#"+r[0].toString(16)+r[1].toString(16)+r[2].toString(16));
}
function doRoundEdges(){
if(!NiftyCheck())
return;
Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");
}
addOnloadHook( doRoundEdges );
/* IE Correction Code **********************************************
* Description: This is code to fix known bugs in IE
* Detects if an IE browser and applies browser-specific code
* Author: User:Bigfoot Lover @ Bionic Wiki
* Added: 8 October 2007
* Modified 18 October 2007 to fix ie imagemap bug
*/
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setStyleById(i, p, v) {
var n = document.getElementById(i);
n.style[p] = v;
}
/* Add a hook to perform code on every pageload */
addOnloadHook( performIE );
function performIE()
{
if ( -1 != navigator.userAgent.indexOf ("MSIE") ) {
/* perform Microsoft Internet Explorer-specific subs */
var Divs = document.getElementsByTagName( "div" );
var divCnt = 0;
var divID = "";
if (Divs.length > 0) {
var CurrDiv = Divs[0];
var s = "";
while (Divs.length > divCnt) {
s = eval("CurrDiv.style.ietop");
if ((s != "") && (s != null)) {
divID = "mapDiv" + divCnt;
CurrDiv.setAttribute( "id", divID );
setStyleById(divID, "top", CurrDiv.style.ietop);
}
divCnt++;
CurrDiv = Divs[divCnt];
}
}
}
}
/** Dynamic Navigation Bars (experimental) *************************************
*
* Description: See [[Wikipedia:NavFrame]].
* Maintainers: UNMAINTAINED
*/
// set up the words in your language
// var NavigationBarHide = '[' + collapseCaption + ']';
// var NavigationBarShow = '[' + expandCaption + ']';
var NavigationBarHide = '[Collapse]';
var NavigationBarShow = '[Expand]';
// shows and hides content and picture (if available) of navigation bars
// Parameters:
// indexNavigationBar: the index of navigation bar to be toggled
window.toggleNavigationBar = function(indexNavigationBar){
var NavToggle = document.getElementById("NavToggle" + indexNavigationBar);
var NavFrame = document.getElementById("NavFrame" + indexNavigationBar);
if (!NavFrame || !NavToggle) {
return false;
}
// if shown now
if (NavToggle.firstChild.data == NavigationBarHide) {
for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) {
if (hasClass(NavChild, 'NavContent') || hasClass(NavChild, 'NavPic')) {
NavChild.style.display = 'none';
}
}
NavToggle.firstChild.data = NavigationBarShow;
// if hidden now
} else if (NavToggle.firstChild.data == NavigationBarShow) {
for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) {
if (hasClass(NavChild, 'NavContent') || hasClass(NavChild, 'NavPic')) {
NavChild.style.display = 'block';
}
}
NavToggle.firstChild.data = NavigationBarHide;
}
}
/* Experiment to see if adding LESS script here works */
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.col(1); // kickstart it
}
.float-grid-columns(@class) {
.col(@index) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
float: left;
}
}
.col(1); // kickstart it
}
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
.col-@{class}-push-0 {
left: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
.col-@{class}-pull-0 {
right: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}
// Create grid for specific class
.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}
/* Load any necessary secondary scripts */
importScript('MediaWiki:JBBWidget.js');