MediaWiki:Gadget-sandbox.js: Difference between revisions

no edit summary
No edit summary
No edit summary
 
Line 1:
"use strict";
 
/**
* highlightTable.js
Line 88 ⟶ 90:
*/
 
(function ($, mw, OO, rs) {
'use strict';
 
// constants
var STORAGE_KEY = 'rs:lightTable',
TABLE_CLASS = 'lighttable',
TBLID = 'tableid',
ROWID = 'rowid',
LIGHT_ON_CLASS = 'highlight-on',
MOUSE_OVER_CLASS = 'highlight-over',
BASE_64_URL = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_',
PAGE_SEPARATOR = '!',
TABLE_SEPARATOR = '.',
CASTAGNOLI_POLYNOMIAL = 0x04c11db7,
UINT32_MAX = 0xffffffff,
self = {
/*
* Stores the current uncompressed data for the current page.
*/
data: null,
/*
* Perform initial checks on the page and browser.
*/
init: function init() {
var $tables = $('table.' + TABLE_CLASS),
hashedPageName = self.hashString(mw.config.get('wgPageName'));
 
// check we have some tables to interact with
self = {
if (!$tables.length) /*{
return;
* Stores the current uncompressed data for the current page.
*/}
// check the browser data:supports null,local storage
if (!rs.hasLocalStorage()) {
return;
}
self.data = self.load(hashedPageName, $tables.length);
self.initTables(hashedPageName, $tables);
},
/*
* Initialise table highlighting.
*
* @param hashedPageName The current page name as a hash.
* @param $tables A list of highlightable tables on the current page.
*/
initTables: function initTables(hashedPageName, $tables) {
$tables.each(function (tIndex) {
var $this = $(this),
$table = $this,
tblid = $this.data(TBLID),
// data cells
$cells = $this.find('td'),
$rows = $this.find('tr:has(td)'),
// don't rely on headers to find number of columns
// count them dynamically
columns = 1,
tableData = self.data[tIndex],
mode = 'cells',
initialised = false;
if (tblid) {
initialised = self.initNamed(tblid);
}
 
// Switching between either highlighting rows or cells
/*
if (!$this.hasClass('individual')) {
* Perform initial checks on the page and browser.
mode */= 'rows';
init:$cells function()= {$rows;
}
var $tables = $('table.' + TABLE_CLASS),
hashedPageName = self.hashString(mw.config.get('wgPageName'));
 
// check we have some tablesinitialise torows interactif withnecessary
while ($cells.length > if (!$tablestableData.length) {
returntableData.push(0);
}
// check the browser supports local storage
if (!rs.hasLocalStorage()) {
return;
}
 
// counting the column count
self.data = self.load(hashedPageName, $tables.length);
// necessary to determine colspan of reset button
self.initTables(hashedPageName, $tables);
$rows.each(function () },{
var $this = $(this);
columns = Math.max(columns, $this.children('th,td').length);
});
$cells.each(function (cIndex) {
var $this = $(this),
cellData = tableData[cIndex];
 
// forbid highlighting any cells/rows that have class nohighlight
/*
if (!$this.hasClass('nohighlight')) {
* Initialise table highlighting.
// initialize highlighting based on localStorage, unless namedInit already did that
*
* @paramif hashedPageName(!initialised) The current page name as a hash.{
self.setHighlight($this, cellData);
* @param $tables A list of highlightable tables on the current page.
*/ }
initTables: function(hashedPageName, $tables) {
$tables.each(function(tIndex) {
var $this = $(this),
$table = $this,
tblid = $this.data(TBLID),
// data cells
$cells = $this.find('td'),
$rows = $this.find('tr:has(td)'),
// don't rely on headers to find number of columns
// count them dynamically
columns = 1,
tableData = self.data[tIndex],
mode = 'cells',
initialised = false;
if (tblid) {
initialised = self.initNamed(tblid);
}
 
// Switching between either highlighting rowsset ormouse cellsevents
if (!$this.hasClassmouseover(function ('individual')) {
self.setHighlight($this, mode = 'rows'2);
}).mouseout(function () $cells = $rows;{
self.setHighlight($this, }3);
}).click(function (e) {
 
// don't toggle highlight // initialise rowswhen ifclicking necessarylinks
if (e.target.tagName !== 'A' while&& ($cellse.lengthtarget.tagName >!== tableData.length'IMG') {
// 1 -> tableData.push(0);
// 0 }-> 1
tableData[cIndex] = 1 - tableData[cIndex];
 
self.setHighlight($this, // counting the column counttableData[cIndex]);
if (tblid) // necessary to determine colspan of reset button{
self.saveNamed($rowstable.each(functiondata(TBLID)) {;
} else var $this = $(this);{
columns = Mathself.maxsave(columns, $this.children('th,td').lengthhashedPageName);
});
e.stopPropagation();
 
$cells.each(function(cIndex) {
var $this = $(this),
cellData = tableData[cIndex];
 
// forbid highlighting any cells/rows that have class nohighlight
if (!$this.hasClass('nohighlight')) {
// initialize highlighting based on localStorage, unless namedInit already did that
if (!initialised) {
self.setHighlight($this, cellData);
}
 
// set mouse events
$this
.mouseover(function() {
self.setHighlight($this, 2);
})
.mouseout(function() {
self.setHighlight($this, 3);
})
.click(function(e) {
// don't toggle highlight when clicking links
if ((e.target.tagName !== 'A') && (e.target.tagName !== 'IMG')) {
// 1 -> 0
// 0 -> 1
tableData[cIndex] = 1 - tableData[cIndex];
 
self.setHighlight($this, tableData[cIndex]);
if (tblid) {
self.saveNamed($table.data(TBLID));
} else {
self.save(hashedPageName);
}
e.stopPropagation();
}
});
}
});
// if this is a named table, which wasn't initialised yet, make sure to save data to the named system
if (tblid && !initialised) {
self.saveNamed($table.data(TBLID));
}
 
// add a button for reset
var button = new OO.ui.ButtonWidget({
label: 'Clear selection',
icon: 'clear',
title: 'Removes all highlights from the table',
classes: ['ht-reset'] // this class is targeted by other gadgets, be careful removing it
});
 
button.$element.click(function() {
$cells.each(function(cIndex) {
tableData[cIndex] = 0;
self.setHighlight($(this), 0);
});
 
if (tblid) {
self.saveNamed($table.data(TBLID));
} else {
self.save(hashedPageName, $tables.length);
}
});
 
$this.append(
$('<tfoot>')
.append(
$('<tr>')
.append(
$('<th>')
.attr('colspan', columns)
.append(button.$element)
)
)
);
});
},
 
/*
* Change the cell background color based on mouse events.
*
* @param $cell The cell element.
* @param val The value to control what class to add (if any).
* 0 -> light off (no class)
* 1 -> light on without hover
* 2 -> mouse over
*/
setHighlight: function($cell, val) {
switch (val) {
// no highlighting
case 0:
$cell.removeClass(MOUSE_OVER_CLASS);
$cell.removeClass(LIGHT_ON_CLASS);
break;
 
// light on
case 1:
$cell.removeClass(MOUSE_OVER_CLASS);
$cell.addClass(LIGHT_ON_CLASS);
break;
 
// mouse-over
case 2:
$cell.addClass(MOUSE_OVER_CLASS);
break;
// mouse-out without affecting highlights
case 3:
$cell.removeClass(MOUSE_OVER_CLASS);
break;
}
},);
}
});
 
// if this is a named table, which wasn't initialised yet, make sure to save data to the named system
/*
if (tblid && !initialised) {
* Merge the updated data for the current page into the data for other pages into local storage.
*self.saveNamed($table.data(TBLID));
}
* @param hashedPageName A hash of the current page name.
*/
save: function(hashedPageName) {
// load the existing data so we know where to save it
var curData = localStorage.getItem(STORAGE_KEY),
compressedData;
 
// add a button for if (curData === null) {reset
var button = new curData = OO.ui.ButtonWidget({};
label: 'Clear } else {selection',
icon: curData = JSON.parse(curData);'clear',
title: 'Removes all highlights from the curData = self.parse(curData);table',
classes: ['ht-reset'] // this class is targeted by other gadgets, be careful removing it
}
});
button.$element.click(function () {
$cells.each(function (cIndex) {
tableData[cIndex] = 0;
self.setHighlight($(this), 0);
});
if (tblid) {
self.saveNamed($table.data(TBLID));
} else {
self.save(hashedPageName, $tables.length);
}
});
$this.append($('<tfoot>').append($('<tr>').append($('<th>').attr('colspan', columns).append(button.$element))));
});
},
/*
* Change the cell background color based on mouse events.
*
* @param $cell The cell element.
* @param val The value to control what class to add (if any).
* 0 -> light off (no class)
* 1 -> light on without hover
* 2 -> mouse over
*/
setHighlight: function setHighlight($cell, val) {
switch (val) {
// no highlighting
case 0:
$cell.removeClass(MOUSE_OVER_CLASS);
$cell.removeClass(LIGHT_ON_CLASS);
break;
 
// merge in our updated data and compresslight iton
case 1:
curData[hashedPageName] = self.data;
compressedData = self$cell.compressremoveClass(curDataMOUSE_OVER_CLASS);
$cell.addClass(LIGHT_ON_CLASS);
break;
 
// convert to a string and save to localStoragemouse-over
case 2:
compressedData = JSON.stringify(compressedData);
localStorage$cell.setItemaddClass(STORAGE_KEY, compressedDataMOUSE_OVER_CLASS);
},break;
 
// mouse-out /*without affecting highlights
case 3:
* Compress the entire data set using tha algoritm documented at the top of the page.
*$cell.removeClass(MOUSE_OVER_CLASS);
* @param data The data to compress.break;
*}
},
* @return the compressed data.
*/*
* Merge the updated data for the current page into the data for other pages into local storage.
compress: function(data) {
var ret = {};*
* @param hashedPageName A hash of the current page name.
*/
save: function save(hashedPageName) {
// load the existing data so we know where to save it
var curData = localStorage.getItem(STORAGE_KEY),
compressedData;
if (curData === null) {
curData = {};
} else {
curData = JSON.parse(curData);
curData = self.parse(curData);
}
 
// merge in our updated data and compress it
Object.keys(data).forEach(function(hashedPageName) {
var pageDatacurData[hashedPageName] = self.data[hashedPageName],;
pageKeycompressedData = hashedPageNameself.charAtcompress(0curData);
 
// convert to a string and save to localStorage
if (!ret.hasOwnProperty(pageKey)) {
compressedData = JSON.stringify(compressedData);
ret[pageKey] = {};
localStorage.setItem(STORAGE_KEY, compressedData);
}
},
/*
* Compress the entire data set using tha algoritm documented at the top of the page.
*
* @param data The data to compress.
*
* @return the compressed data.
*/
compress: function compress(data) {
var ret = {};
Object.keys(data).forEach(function (hashedPageName) {
var pageData = data[hashedPageName],
pageKey = hashedPageName.charAt(0);
if (!ret.hasOwnProperty(pageKey)) {
ret[pageKey] = {};
}
ret[pageKey][hashedPageName] = [];
pageData.forEach(function (tableData) {
var compressedTableData = '',
i,
j,
k;
for (i = 0; i < Math.ceil(tableData.length / 6); i += 1) {
k = tableData[6 * i];
for (j = 1; j < 6; j += 1) {
k = 2 * k + (6 * i + j < tableData.length ? tableData[6 * i + j] : 0);
}
compressedTableData += BASE_64_URL.charAt(k);
}
ret[pageKey][hashedPageName].push(compressedTableData);
});
ret[pageKey][hashedPageName] = ret[pageKey][hashedPageName].join(TABLE_SEPARATOR);
});
Object.keys(ret).forEach(function (pageKey) {
var hashKeys = Object.keys(ret[pageKey]),
hashedData = [];
hashKeys.forEach(function (key) {
var pageData = ret[pageKey][key];
hashedData.push(key + pageData);
});
hashedData = hashedData.join(PAGE_SEPARATOR);
ret[pageKey] = hashedData;
});
return ret;
},
/*
* Get the existing data for the current page.
*
* @param hashedPageName A hash of the current page name.
* @param numTables The number of tables on the current page. Used to ensure the loaded
* data matches the number of tables on the page thus handling cases
* where tables have been added or removed. This does not check the
* amount of rows in the given tables.
*
* @return The data for the current page.
*/
load: function load(hashedPageName, numTables) {
var data = localStorage.getItem(STORAGE_KEY),
pageData;
if (data === null) {
pageData = [];
} else {
data = JSON.parse(data);
data = self.parse(data);
if (data.hasOwnProperty(hashedPageName)) {
pageData = data[hashedPageName];
} else {
pageData = [];
}
}
 
// if more tables were added
ret[pageKey][hashedPageName] = [];
// add extra arrays to store the data in
// also populates if no existing data was found
while (numTables > pageData.length) {
pageData.push([]);
}
 
// if tables were removed, remove data from the end of the list
pageData.forEach(function(tableData) {
// as there's no way to tell which was var compressedTableData = '',removed
while (numTables < pageData.length) {
i, j, k;
pageData.pop();
}
return pageData;
},
/*
* Parse the compressed data as loaded from local storage using the algorithm desribed
* at the top of the page.
*
* @param data The data to parse.
*
* @return the parsed data.
*/
parse: function parse(data) {
var ret = {};
Object.keys(data).forEach(function (pageKey) {
var pageData = data[pageKey].split(PAGE_SEPARATOR);
pageData.forEach(function (tableData) {
var hashedPageName = tableData.substr(0, 8);
tableData = tableData.substr(8).split(TABLE_SEPARATOR);
ret[hashedPageName] = [];
tableData.forEach(function (rowData, index) {
var i, j, k;
ret[hashedPageName].push([]);
for (i = 0; i < rowData.length; i += 1) {
k = BASE_64_URL.indexOf(rowData.charAt(i));
 
for (i = 0; i < Math.ceil(tableData.length // 6); i += 1)input {validation
if (k = tableData[6< *0) i];{
k = 0;
 
for (j = 1; j < 6; j += 1) {
k = 2 * k + ((6 * i + j < tableData.length) ? tableData[6 * i + j] : 0);
}
 
compressedTableData += BASE_64_URL.charAt(k);
}
 
ret[pageKey][hashedPageName].push(compressedTableData);
});
 
ret[pageKey][hashedPageName] = ret[pageKey][hashedPageName].join(TABLE_SEPARATOR);
});
 
Object.keys(ret).forEach(function(pageKey) {
var hashKeys = Object.keys(ret[pageKey]),
hashedData = [];
 
hashKeys.forEach(function(key) {
var pageData = ret[pageKey][key];
hashedData.push(key + pageData);
});
 
hashedData = hashedData.join(PAGE_SEPARATOR);
ret[pageKey] = hashedData;
});
 
return ret;
},
 
/*
* Get the existing data for the current page.
*
* @param hashedPageName A hash of the current page name.
* @param numTables The number of tables on the current page. Used to ensure the loaded
* data matches the number of tables on the page thus handling cases
* where tables have been added or removed. This does not check the
* amount of rows in the given tables.
*
* @return The data for the current page.
*/
load: function(hashedPageName, numTables) {
var data = localStorage.getItem(STORAGE_KEY),
pageData;
 
if (data === null) {
pageData = [];
} else {
data = JSON.parse(data);
data = self.parse(data);
 
if (data.hasOwnProperty(hashedPageName)) {
pageData = data[hashedPageName];
} else {
pageData = [];
}
}
for (j = 5; j >= 0; j -= 1) {
 
// if moreret[hashedPageName][index][6 tables* werei added+ j] = k & 0x1;
// add extrak arrays>>= to store the data in1;
// also populates if no existing data was found
while (numTables > pageData.length) {
pageData.push([]);
}
}
});
});
});
return ret;
},
/*
* Hash a string into a big endian 32 bit hex string. Used to hash page names.
*
* @param input The string to hash.
*
* @return the result of the hash.
*/
hashString: function hashString(input) {
var ret = 0,
table = [],
i,
j,
k;
 
// guarantee 8-bit chars
// if tables were removed, remove data from the end of the list
input = window.unescape(window.encodeURI(input));
// as there's no way to tell which was removed
while (numTables < pageData.length) {
pageData.pop();
}
 
// calculate the crc (cyclic redundancy check) for returnall pageData;8-bit data
// bit-wise operations discard anything left of bit 31
},
for (i = 0; i < 256; i += 1) {
k = i << 24;
for (j = 0; j < 8; j += 1) {
k = k << 1 ^ (k >>> 31) * CASTAGNOLI_POLYNOMIAL;
}
table[i] = k;
}
 
// the actual /*calculation
for (i = 0; i < input.length; i += 1) {
* Parse the compressed data as loaded from local storage using the algorithm desribed
ret = ret *<< at8 the^ toptable[ret of>>> the24 page^ input.charCodeAt(i)];
*}
* @param data The data to parse.
*
* @return the parsed data.
*/
parse: function(data) {
var ret = {};
 
// make negative numbers unsigned
Object.keys(data).forEach(function(pageKey) {
if (ret < 0) {
var pageData = data[pageKey].split(PAGE_SEPARATOR);
ret += UINT32_MAX;
}
 
// 32-bit hex string, padded on the left
pageData.forEach(function(tableData) {
ret = '0000000' + ret.toString(16).toUpperCase();
var hashedPageName = tableData.substr(0, 8);
ret = ret.substr(ret.length - 8);
 
return ret;
tableData = tableData.substr(8).split(TABLE_SEPARATOR);
},
ret[hashedPageName] = [];
/*
 
* Save highlighted rows for named tables, using the data-tableid attribute.
tableData.forEach(function(rowData, index) {
* Does not override values that are not present in the current table. This allows usethe use of a var i, j, k;single
* table ID on pages like [[Music]]
 
*
ret[hashedPageName].push([]);
* @param tblid The table id for the table to initialise
 
*/
for (i = 0; i < rowData.length; i += 1) {
saveNamed: function saveNamed(tblid) {
k = BASE_64_URL.indexOf(rowData.charAt(i));
// local storage key is prefixed by the generic storage key, to avoid local storage naming conflicts.
 
var lsKey = STORAGE_KEY + ':' + tblid,
// input validation
data = if localStorage.getItem(k < 0lsKey) {;
var $tbls = $('table.lighttable[data-tableid="' + tblid + '"]');
k = 0;
if (data === null) }{
data = {};
 
} else {
for (j = 5; j >= 0; j -= 1) {
data = JSON.parse(data);
ret[hashedPageName][index][6 * i + j] = (k & 0x1);
}
k >>= 1;
$tbls.find('[data-rowid]').each(function () {
}
var id = }$(this).data('rowid');
if (!id) })return;
data[id] = }Number($(this).hasClass(LIGHT_ON_CLASS));
});
 
localStorage.setItem(lsKey, JSON.stringify(data));
});
console.log(data);
 
return ret;},
},/*
* Initialise a named table that uses data-tableid
 
/*
* Hash@param atblid stringThe intotable aid bigfor endianthe 32 bit hex string. Usedtable to hash page names.initialise
* @return Boolean true if successfully initialised, false if no named highlight data was available
*
*/
* @param input The string to hash.
initNamed: function initNamed(tblid) {
*
var lsKey = STORAGE_KEY + *':' @return+ the result of the hash.tblid;
var data = */localStorage.getItem(lsKey);
var $tbls = $('table.lighttable[data-tableid="' + tblid + '"]');
hashString: function(input) {
if (data === null) var ret = 0,{
// no data stored yet, so fall back to unnamed table = [],init
return i, j, kfalse;
}
 
var data = // guarantee 8-bit charsJSON.parse(data);
$tbls.find('[data-rowid]').each(function () {
input = window.unescape(window.encodeURI(input));
var id = $(this).data('rowid');
 
if (!id) return;
// calculate the crc (cyclic redundancy check) for all 8-bit data
if // bit($('[data-wiserowid="' operations+ discardid anything+ left'"]').length of> bit1) 31{
mw.log.warn('Reused rowid detected in fornamed lighttable:', id, $(i '[data-rowid="' 0; i < 256;+ iid += 1'"]') {);
k = (i << 24);}
self.setHighlight($(this), Number(data[id]));
 
});
for (j = 0; j < 8; j += 1) {
return true;
k = (k << 1) ^ ((k >>> 31) * CASTAGNOLI_POLYNOMIAL);
}
table[i] = k;
}
 
// the actual calculation
for (i = 0; i < input.length; i += 1) {
ret = (ret << 8) ^ table[(ret >>> 24) ^ input.charCodeAt(i)];
}
 
// make negative numbers unsigned
if (ret < 0) {
ret += UINT32_MAX;
}
 
// 32-bit hex string, padded on the left
ret = '0000000' + ret.toString(16).toUpperCase();
ret = ret.substr(ret.length - 8);
 
return ret;
},
/*
* Save highlighted rows for named tables, using the data-tableid attribute.
* Does not override values that are not present in the current table. This allows usethe use of a single
* table ID on pages like [[Music]]
*
* @param tblid The table id for the table to initialise
*/
saveNamed: function(tblid) {
// local storage key is prefixed by the generic storage key, to avoid local storage naming conflicts.
var lsKey = STORAGE_KEY + ':' + tblid,
data = localStorage.getItem(lsKey);
var $tbls = $('table.lighttable[data-tableid="'+tblid+'"]')
 
if (data === null) {
data = {};
} else {
data = JSON.parse(data);
}
$tbls.find('[data-rowid]').each(function() {
var id = $(this).data('rowid');
if (!id) return;
data[id] = Number($(this).hasClass(LIGHT_ON_CLASS));
});
 
localStorage.setItem(lsKey, JSON.stringify(data));
console.log(data);
},
/*
* Initialise a named table that uses data-tableid
*
* @param tblid The table id for the table to initialise
* @return Boolean true if successfully initialised, false if no named highlight data was available
*/
initNamed: function(tblid) {
var lsKey = STORAGE_KEY + ':' + tblid;
var data = localStorage.getItem(lsKey);
var $tbls = $('table.lighttable[data-tableid="'+tblid+'"]')
if (data === null) {
// no data stored yet, so fall back to unnamed init
return false;
}
var data = JSON.parse(data);
 
$tbls.find('[data-rowid]').each(function() {
var id = $(this).data('rowid')
if (!id) return;
if ($('[data-rowid="'+id+'"]').length > 1) {
mw.log.warn('Reused rowid detected in named lighttable:', id, $('[data-rowid="'+id+'"]'));
}
self.setHighlight($(this), Number(data[id]))
});
return true;
}
};
 
$(self.init);
 
/*
// sample data for testing the algorithm used
var data = {
// page1
'0FF47C63': [
[0, 1, 1, 0, 1, 0],
[0, 1, 1, 0, 1, 0, 1, 1, 1],
[0, 0, 0, 0, 1, 1, 0, 0]
],
// page2
'02B75ABA': [
[0, 1, 0, 1, 1, 0],
[1, 1, 1, 0, 1, 0, 1, 1, 0],
[0, 0, 1, 1, 0, 0, 0, 0]
],
// page3
'0676470D': [
[1, 0, 0, 1, 0, 1],
[1, 0, 0, 1, 0, 1, 0, 0, 0],
[1, 1, 1, 1, 0, 0, 1, 1]
]
};
$(self.init);
 
/*
// sample data for testing the algorithm used
var data = {
// page1
'0FF47C63': [
[0, 1, 1, 0, 1, 0],
[0, 1, 1, 0, 1, 0, 1, 1, 1],
[0, 0, 0, 0, 1, 1, 0, 0]
],
// page2
'02B75ABA': [
[0, 1, 0, 1, 1, 0],
[1, 1, 1, 0, 1, 0, 1, 1, 0],
[0, 0, 1, 1, 0, 0, 0, 0]
],
// page3
'0676470D': [
[1, 0, 0, 1, 0, 1],
[1, 0, 0, 1, 0, 1, 0, 0, 0],
[1, 1, 1, 1, 0, 0, 1, 1]
]
};
console.log('input', data);
 
var compressedData = self.compress(data);
console.log('compressed', compressedData);
 
var parsedData = self.parse(compressedData);
console.log(parsedData);
*/
})((void 0).jQuery, (void 0).mediaWiki, (void 0).OO, (void 0).rswiki);
 
}(this.jQuery, this.mediaWiki, this.OO, this.rswiki));