Difference between revisions of "MediaWiki:Common.js"

m
m (Screwing with tables, part 1.)
Line 2: Line 2:
  
 
/**
 
/**
−
  * Import utility functions.
+
  * Determines if a particular element possesses a class.
 
  */
 
  */
−
importScript('MediaWiki:Common.js/Utility.js');
+
var hasClass = (function () {
 +
    var reCache = {};
 +
    return function (element, className) {
 +
        return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp('(?:\\s|^)' + className + '(?:\\s|$)'))).test(element.className);
 +
    };
 +
})();
 +
 
 +
/**
 +
* Determines if a given value is a number.
 +
*/
 +
function isNumeric(value) {
 +
    return new RegExp(/(^\d+$)|(^\d+\.\d+$)/).test(value);
 +
}
 +
 
 +
/**
 +
* Removes all children from an element.
 +
*/
 +
function removeChildren(element) {
 +
    while (element.hasChildNodes()) {
 +
        element.removeChild(element.firstChild);
 +
    }
 +
}
 +
 
 +
/**
 +
* Implementation of classical inheritance for Objects.
 +
*/
 +
(function(){
 +
    var initializing = false, fnTest = /xyz/.test(function() { xyz; }) ? /\b_super\b/ : /.*/;
 +
 
 +
    this.Class = function() { };
 +
 +
    Class.extend = function(prop) {
 +
        var _super = this.prototype;
 +
 
 +
        initializing = true;
 +
        var prototype = new this();
 +
        initializing = false;
 +
 
 +
        for (var name in prop) {
 +
            prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn) {
 +
                return function() {
 +
                    var tmp = this._super;
 +
                    this._super = _super[name];
 +
                    var ret = fn.apply(this, arguments);     
 +
                    this._super = tmp;
 +
                    return ret;
 +
                };
 +
            })(name, prop[name]) : prop[name];
 +
        }
 +
 
 +
        function Class() {
 +
            if (!initializing && this.init)
 +
                this.init.apply(this, arguments);
 +
        }
 +
 
 +
        Class.prototype = prototype;
 +
        Class.constructor = Class;
 +
        Class.extend = arguments.callee;
 +
 
 +
        return Class;
 +
    };
 +
})();
  
 
/**
 
/**
Line 17: Line 78:
 
  * Code for collapsible tables.
 
  * Code for collapsible tables.
 
  */
 
  */
−
function collapseTable(tableIndex) {
+
function createCollapseButtons() {
−
    var button = document.getElementById('collapseButton' + tableIndex);
+
    var collapseTable = function(tableIndex) {
−
    var table = document.getElementById('collapsibleTable' + tableIndex);
+
        var button = document.getElementById('collapseButton' + tableIndex);
 +
        var table = document.getElementById('collapsibleTable' + tableIndex);
  
−
    if (!table || !button) {
+
        if (!table || !button) return false;
−
        return false;
+
−
    }
+
  
−
    var rows = table.rows;
+
        var rows = table.rows;
  
−
    if (button.firstChild.data == 'hide') {
+
        if (button.firstChild.data == 'hide') {
−
        for (var i = 1; i < rows.length; i++) {
+
            for (var i = 1; i < rows.length; i++) {
−
            rows[i].style.display = 'none';
+
                rows[i].style.display = 'none';
 +
            }
 +
            button.firstChild.data = 'show';
 +
        } else {
 +
            for (var i = 1; i < rows.length; i++) {
 +
                rows[i].style.display = rows[0].style.display;
 +
            }
 +
            button.firstChild.data = 'hide';
 
         }
 
         }
−
        button.firstChild.data = 'show';
+
     };
−
     } else {
+
−
        for (var i = 1; i < rows.length; i++) {
+
−
            rows[i].style.display = rows[0].style.display;
+
−
        }
+
−
        button.firstChild.data = 'hide';
+
−
    }
+
−
}
+
−
 
+
−
function createCollapseButtons() {
+
−
    var tableIndex = 0;
+
−
    var navigationBoxes = new Object();
+
 
     var tables = getElementsByClassName(document, 'table', 'collapsible');
 
     var tables = getElementsByClassName(document, 'table', 'collapsible');
  
 
     for (var i = 0; i < tables.length; i++) {
 
     for (var i = 0; i < tables.length; i++) {
 
         var headerRow = tables[i].getElementsByTagName('tr')[0];
 
         var headerRow = tables[i].getElementsByTagName('tr')[0];
−
         if (!headerRow) {
+
         if (!headerRow) continue;
−
            continue;
+
−
        }
+
−
 
+
 
         var header = headerRow.getElementsByTagName('th')[0];
 
         var header = headerRow.getElementsByTagName('th')[0];
−
         if (!header) {
+
         if (!header) continue;
−
            continue;
+
−
        }
+
  
−
        navigationBoxes[tableIndex] = tables[i];
+
         tables[i].setAttribute('id', 'collapsibleTable' + i);
−
         tables[i].setAttribute('id', 'collapsibleTable' + tableIndex);
+
  
 
         var spacer = document.createElement('div');
 
         var spacer = document.createElement('div');
−
        var button = document.createElement('span');
 
−
        var buttonLink = document.createElement('a');
 
−
        var buttonText = document.createTextNode('hide');
 
−
 
 
         spacer.style.cssFloat = 'left';
 
         spacer.style.cssFloat = 'left';
 
         spacer.style.styleFloat = 'left';
 
         spacer.style.styleFloat = 'left';
Line 69: Line 115:
 
         spacer.style.width = '35px';
 
         spacer.style.width = '35px';
 
         spacer.appendChild(document.createTextNode('\u00a0'));
 
         spacer.appendChild(document.createTextNode('\u00a0'));
−
         header.insertBefore(spacer, header.childNodes[0]);
+
         /*header.insertBefore(spacer, header.childNodes[0]);*/
  
 +
        var button = document.createElement('span');
 
         button.style.cssFloat = 'right';
 
         button.style.cssFloat = 'right';
 
         button.style.styleFloat = 'right';
 
         button.style.styleFloat = 'right';
Line 78: Line 125:
 
         button.style.width = '35px';
 
         button.style.width = '35px';
  
 +
        var buttonLink = document.createElement('a');
 
         buttonLink.style.color = '#FFFFFF';
 
         buttonLink.style.color = '#FFFFFF';
−
         buttonLink.id = 'collapseButton' + tableIndex;
+
         buttonLink.id = 'collapseButton' + i;
−
         buttonLink.href = 'javascript:collapseTable(' + tableIndex + ');';
+
         buttonLink.onclick = function(i) {
−
         buttonLink.appendChild(buttonText);
+
            collapseTable(i);
 +
        };
 +
        /*buttonLink.href = 'javascript:collapseTable(' + i + ');';*/
 +
         buttonLink.appendChild('hide');
  
 
         button.appendChild(document.createTextNode('['));
 
         button.appendChild(document.createTextNode('['));
Line 87: Line 138:
 
         button.appendChild(document.createTextNode(']'));
 
         button.appendChild(document.createTextNode(']'));
 
         header.insertBefore(button, header.childNodes[0]);
 
         header.insertBefore(button, header.childNodes[0]);
−
 
−
        tableIndex++;
 
−
    }
 
−
 
−
    for (var i = 0; i < tableIndex; i++) {
 
−
        if (hasClass(navigationBoxes[i], 'collapsed') || (tableIndex >= 2 && hasClass(navigationBoxes[i], 'autocollapse'))) {
 
−
            collapseTable(i);
 
−
        }
 
−
        else if (hasClass(navigationBoxes[i], 'innercollapse')) {
 
−
            var element = navigationBoxes[i];
 
−
            while (element = element.parentNode) {
 
−
                if (hasClass(element, 'outercollapse')) {
 
−
                    collapseTable(i);
 
−
                    break;
 
−
                }
 
−
            }
 
−
        }
 
 
     }
 
     }
 
}
 
}
 
addOnloadHook(createCollapseButtons);
 
addOnloadHook(createCollapseButtons);
  
−
/**
+
/*var CollapseButton = Class.extend({
−
* Classical inheritance implementation.
+
    init: function(table)
−
*/
+
        var collapse = function(table) {
−
(function(){
+
            var rows = table.rows;
−
    var initializing = false, fnTest = /xyz/.test(function() { xyz; }) ? /\b_super\b/ : /.*/;
+
  
−
    this.Class = function() { };
+
            if (this.firstChild.data == 'hide') {
−
+
                for (var i = 1; i < rows.length; i++) {
−
    Class.extend = function(prop) {
+
                    rows[i].style.display = 'none';
−
        var _super = this.prototype;
+
                }
 +
                this.firstChild.data = 'show';
 +
            } else {
 +
                for (var i = 1; i < rows.length; i++) {
 +
                    rows[i].style.display = rows[0].style.display;
 +
                }
 +
                this.firstChild.data = 'hide';
 +
            }
 +
        };
  
−
         initializing = true;
+
         var spacer = document.createElement('div');
−
         var prototype = new this();
+
         spacer.style.cssFloat = 'left';
−
         initializing = false;
+
        spacer.style.styleFloat = 'left';
 +
        spacer.style.textAlign = 'left';
 +
        spacer.style.width = '35px';
 +
        spacer.appendChild(document.createTextNode('\u00a0'));
 +
         header.insertBefore(spacer, header.childNodes[0]);
  
−
         for (var name in prop) {
+
         var button = document.createElement('span');
−
            prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn) {
+
        button.style.cssFloat = 'right';
−
                return function() {
+
        button.style.styleFloat = 'right';
−
                    var tmp = this._super;
+
        button.style.fontSize = '11px';
−
                    this._super = _super[name];
+
        button.style.fontWeight = 'normal';
−
                    var ret = fn.apply(this, arguments);      
+
        button.style.textAlign = 'right';
−
                    this._super = tmp;
+
        button.style.width = '35px';
−
                    return ret;
+
−
                };
+
−
            })(name, prop[name]) : prop[name];
+
−
        }
+
  
−
         function Class() {
+
         var buttonLink = document.createElement('a');
−
             if (!initializing && this.init)
+
        buttonLink.style.color = '#FFFFFF';
−
                this.init.apply(this, arguments);
+
        buttonLink.id = 'collapseButton' + i;
−
        }
+
        buttonLink.onclick = function() {
 +
             collapseTable(table);
 +
        };
 +
        buttonLink.appendChild(document.createTextNode('hide'));
  
−
         Class.prototype = prototype;
+
         button.appendChild(document.createTextNode('['));
−
         Class.constructor = Class;
+
         button.appendChild(buttonLink);
−
         Class.extend = arguments.callee;
+
         button.appendChild(document.createTextNode(']'));
 +
        header.insertBefore(button, header.childNodes[0]);
 +
    }
 +
});
  
−
         return Class;
+
function createCollapseButtons() {
−
     };
+
    var tables = getElementsByClassName(document, 'table', 'collapsible');
−
})();
+
 
 +
    for (var i = 0; i < tables.length; i++) {
 +
         var headerRow = tables[i].getElementsByTagName('tr')[0];
 +
        if (!headerRow) continue;
 +
        var header = headerRow.getElementsByTagName('th')[0];
 +
        if (!header) continue;
 +
        header.insertBefore(new CollapseButton(tables[i]), header.childNodes[0]);
 +
     }
 +
}
 +
addOnloadHook(createCollapseButtons);*/
  
 
/**
 
/**

Revision as of 10:22, 28 April 2010

/* Any JavaScript here will be loaded for all users on every page load. */

/**
 * Determines if a particular element possesses a class.
 */
var hasClass = (function () {
    var reCache = {};
    return function (element, className) {
        return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp('(?:\\s|^)' + className + '(?:\\s|$)'))).test(element.className);
    };
})();

/**
 * Determines if a given value is a number.
 */
function isNumeric(value) {
    return new RegExp(/(^\d+$)|(^\d+\.\d+$)/).test(value);
}

/**
 * Removes all children from an element.
 */
function removeChildren(element) {
    while (element.hasChildNodes()) {
        element.removeChild(element.firstChild);
    }
}

/**
 * Implementation of classical inheritance for Objects.
 */
(function(){
    var initializing = false, fnTest = /xyz/.test(function() { xyz; }) ? /\b_super\b/ : /.*/;

    this.Class = function() { };
 
    Class.extend = function(prop) {
        var _super = this.prototype;

        initializing = true;
        var prototype = new this();
        initializing = false;

        for (var name in prop) {
            prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn) {
                return function() {
                    var tmp = this._super;
                    this._super = _super[name];
                    var ret = fn.apply(this, arguments);       
                    this._super = tmp;
                    return ret;
                };
            })(name, prop[name]) : prop[name];
        }

        function Class() {
            if (!initializing && this.init)
                this.init.apply(this, arguments);
        }

        Class.prototype = prototype;
        Class.constructor = Class;
        Class.extend = arguments.callee;

        return Class;
    };
})();

/**
 * Import more specific scripts, if necessary.
 */
if (wgAction == 'edit' || wgAction == 'submit')
{
    importScript('MediaWiki:Common.js/Editbar.js');
}

/**
 * Code for collapsible tables.
 */
function createCollapseButtons() {
    var collapseTable = function(tableIndex) {
        var button = document.getElementById('collapseButton' + tableIndex);
        var table = document.getElementById('collapsibleTable' + tableIndex);

        if (!table || !button) return false;

        var rows = table.rows;

        if (button.firstChild.data == 'hide') {
            for (var i = 1; i < rows.length; i++) {
                rows[i].style.display = 'none';
            }
            button.firstChild.data = 'show';
        } else {
            for (var i = 1; i < rows.length; i++) {
                rows[i].style.display = rows[0].style.display;
            }
            button.firstChild.data = 'hide';
        }
    };
    var tables = getElementsByClassName(document, 'table', 'collapsible');

    for (var i = 0; i < tables.length; i++) {
        var headerRow = tables[i].getElementsByTagName('tr')[0];
        if (!headerRow) continue;
        var header = headerRow.getElementsByTagName('th')[0];
        if (!header) continue;

        tables[i].setAttribute('id', 'collapsibleTable' + i);

        var spacer = document.createElement('div');
        spacer.style.cssFloat = 'left';
        spacer.style.styleFloat = 'left';
        spacer.style.textAlign = 'left';
        spacer.style.width = '35px';
        spacer.appendChild(document.createTextNode('\u00a0'));
        /*header.insertBefore(spacer, header.childNodes[0]);*/

        var button = document.createElement('span');
        button.style.cssFloat = 'right';
        button.style.styleFloat = 'right';
        button.style.fontSize = '11px';
        button.style.fontWeight = 'normal';
        button.style.textAlign = 'right';
        button.style.width = '35px';

        var buttonLink = document.createElement('a');
        buttonLink.style.color = '#FFFFFF';
        buttonLink.id = 'collapseButton' + i;
        buttonLink.onclick = function(i) {
            collapseTable(i);
        };
        /*buttonLink.href = 'javascript:collapseTable(' + i + ');';*/
        buttonLink.appendChild('hide');

        button.appendChild(document.createTextNode('['));
        button.appendChild(buttonLink);
        button.appendChild(document.createTextNode(']'));
        header.insertBefore(button, header.childNodes[0]);
    }
}
addOnloadHook(createCollapseButtons);

/*var CollapseButton = Class.extend({
    init: function(table)
        var collapse = function(table) {
            var rows = table.rows;

            if (this.firstChild.data == 'hide') {
                for (var i = 1; i < rows.length; i++) {
                    rows[i].style.display = 'none';
                }
                this.firstChild.data = 'show';
            } else {
                for (var i = 1; i < rows.length; i++) {
                    rows[i].style.display = rows[0].style.display;
                }
                this.firstChild.data = 'hide';
            }
        };

        var spacer = document.createElement('div');
        spacer.style.cssFloat = 'left';
        spacer.style.styleFloat = 'left';
        spacer.style.textAlign = 'left';
        spacer.style.width = '35px';
        spacer.appendChild(document.createTextNode('\u00a0'));
        header.insertBefore(spacer, header.childNodes[0]);

        var button = document.createElement('span');
        button.style.cssFloat = 'right';
        button.style.styleFloat = 'right';
        button.style.fontSize = '11px';
        button.style.fontWeight = 'normal';
        button.style.textAlign = 'right';
        button.style.width = '35px';

        var buttonLink = document.createElement('a');
        buttonLink.style.color = '#FFFFFF';
        buttonLink.id = 'collapseButton' + i;
        buttonLink.onclick = function() {
            collapseTable(table);
        };
        buttonLink.appendChild(document.createTextNode('hide'));

        button.appendChild(document.createTextNode('['));
        button.appendChild(buttonLink);
        button.appendChild(document.createTextNode(']'));
        header.insertBefore(button, header.childNodes[0]);
    }
});

function createCollapseButtons() {
    var tables = getElementsByClassName(document, 'table', 'collapsible');

    for (var i = 0; i < tables.length; i++) {
        var headerRow = tables[i].getElementsByTagName('tr')[0];
        if (!headerRow) continue;
        var header = headerRow.getElementsByTagName('th')[0];
        if (!header) continue;
        header.insertBefore(new CollapseButton(tables[i]), header.childNodes[0]);
    }
}
addOnloadHook(createCollapseButtons);*/

/**
 * Code for calculators.
 */
var Calculator = Class.extend({
    init: function(content, id, title, columns) {
        var location = document.getElementById(id);

        var table = document.createElement('table');
        table.className = 'uoguidetable open';

        var calcTableBody = document.createElement('tbody');
        table.appendChild(calcTableBody);

        var calcTableRow = document.createElement('tr');
        calcTableBody.appendChild(calcTableRow);

        var calcTableHeader = document.createElement('th');
        calcTableHeader.colSpan = columns;
        calcTableHeader.appendChild(document.createTextNode(title));
        calcTableRow.appendChild(calcTableHeader);

        calcTableRow = content;
        calcTableBody.appendChild(calcTableRow);

        location.appendChild(table);
    }
});

/**
 * Calculator that calculates your percentage chance for more and better loot given a specified Luck value.
 */
var LuckToChanceCalculator = Calculator.extend({
    init: function() {
        var calculate = function(input, label) {
            if (input.value) {
                if (isNumeric(input.value)) {
                    var percentChance = Math.pow(input.value, (5 / 9));
                    if (percentChance > 100) {
                        percentChance = 100;
                    }
                    percentChance = percentChance.toFixed(3);
                    removeChildren(label);
                    label.appendChild(document.createTextNode(percentChance + '% Chance'));
                }
            }
        };
        var calcTableRow = document.createElement('tr');
        var calcTableCell = document.createElement('td');
        var luckInput = document.createElement('input');
        var calculateButton = document.createElement('input');
        var percentChanceLabel = document.createElement('div');

        calcTableCell.style.textAlign = 'right';
        calcTableCell.appendChild(document.createTextNode('Luck:'));
        calcTableRow.appendChild(calcTableCell);

        luckInput.id = 'luckInput';
        luckInput.maxLength = '4';
        luckInput.type = 'text';
        luckInput.style.width = '35px';
        luckInput.onkeyup = function(keyEvent) {
            var keyID = window.event ? event.keyCode : keyEvent.keyCode;
            if (keyID == 13)
                calculate(luckInput, percentChanceLabel);
        };
	calcTableCell = document.createElement('td');
        calcTableCell.appendChild(luckInput);
        calcTableRow.appendChild(calcTableCell);

        calculateButton.type = 'button';
        calculateButton.value = 'Calculate >>';
        calculateButton.onclick = function() {
            calculate(luckInput, percentChanceLabel);
        };
	calcTableCell = document.createElement('td');
        calcTableCell.appendChild(calculateButton);
        calcTableRow.appendChild(calcTableCell);

        percentChanceLabel.appendChild(document.createTextNode('0.000% Chance'));
        percentChanceLabel.style.textAlign = 'right';
        percentChanceLabel.style.width = '110px';
	calcTableCell = document.createElement('td');
        calcTableCell.appendChild(percentChanceLabel);
        calcTableRow.appendChild(calcTableCell);

        this._super(calcTableRow, 'LuckToChance', 'Luck to Chance', 4);
    }
});

/**
 * Calculator that calculates the amount of Luck required to achieve a specified percentage chance for more and better loot.
 */
var ChanceToLuckCalculator = Calculator.extend({
    init: function() {
        var calculate = function(input, label) {
            if (input.value) {
                if (input.value > 100) {
                    input.value = '100';
                }
                if (isNumeric(input.value)) {
                    var luckAmount = Math.ceil(Math.pow(input.value, (9 / 5)));
                    removeChildren(label);
                    label.appendChild(document.createTextNode(luckAmount + ' Luck'));
                }
            }
        };
        var calcTableRow = document.createElement('tr');
        var calcTableCell = document.createElement('td');
        var chanceInput = document.createElement('input');
        var calculateButton = document.createElement('input');
        var luckAmountLabel = document.createElement('div');

        calcTableCell.style.textAlign = 'right';
        calcTableCell.appendChild(document.createTextNode('Chance:'));
        calcTableRow.appendChild(calcTableCell);

        chanceInput.id = 'chanceInput';
        chanceInput.maxLength = '3';
        chanceInput.type = 'text';
        chanceInput.style.width = '25px';
        chanceInput.onkeyup = function(keyEvent) {
            var keyID = window.event ? event.keyCode : keyEvent.keyCode;
            if (keyID == 13)
                calculate(chanceInput, luckAmountLabel);
        };
	calcTableCell = document.createElement('td');
        calcTableCell.appendChild(chanceInput);
        calcTableRow.appendChild(calcTableCell);

        calculateButton.type = 'button';
        calculateButton.value = 'Calculate >>';
        calculateButton.onclick = function() {
            calculate(chanceInput, luckAmountLabel);
        };
	calcTableCell = document.createElement('td');
        calcTableCell.appendChild(calculateButton);
        calcTableRow.appendChild(calcTableCell);

        luckAmountLabel.appendChild(document.createTextNode('0 Luck'));
        luckAmountLabel.style.textAlign = 'right';
        luckAmountLabel.style.width = '60px';
	calcTableCell = document.createElement('td');
        calcTableCell.appendChild(luckAmountLabel);
        calcTableRow.appendChild(calcTableCell);

        this._super(calcTableRow, 'ChanceToLuck', 'Chance to Luck', 4);
    }
});

function searchForCalculators() {
    var calculators = document.getElementsByTagName('div');

    for (var i in calculators) {
         if (calculators[i].id == 'LuckToChance') {
             new LuckToChanceCalculator();
         } else if (calculators[i].id == 'ChanceToLuck') {
             new ChanceToLuckCalculator();
         }
    }
}
addOnloadHook(searchForCalculators);
Retrieved from "https://www.uoguide.com/index.php?title=MediaWiki:Common.js&oldid=42966"