User:Slevinski/signwriting viewer.js
/**
* SignWriting Styled Viewer
*
* Copyright 2007-2013 Stephen E Slevinski Jr
* Steve (Slevin@signpuddle.net)
*
* This file is part of SWIS: the SignWriting Icon Server.
*
* SWIS is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* SWIS is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with SWIS. If not, see
*
* END Copyright
*
* @copyright 2007-2013 Stephen E Slevinski Jr
* @author Steve (slevin@signpuddle.net)
* @license http://opensource.org/licenses/GPL-2.0 GPL
* @access public
* @version 1.0.0.rc.3
* @filesource
*
*/
/**
* define a function that uses regular expression to modify a node,
* then crawl the document object model for TEXT elements and apply the function
*/
signwriting_styled=(function (node) {
var u = '//swis.wmflabs.org/',
v = '1.0.0-rc.3',
s1, s2, d, p, r, r2, o, f;
r = /(A(S[123][0-9a-f]{2}[0-5][0-9a-f])+)?[BLMR]([0-9]{3}x[0-9]{3})(S[123][0-9a-f]{2}[0-5][0-9a-f][0-9]{3}x[0-9]{3})*|S38[7-9ab][0-5][0-9a-f][0-9]{3}x[0-9]{3}/;
r2 = /[0-9]{3}x[0-9]{3}/g;
o = {};
o.L = -1;
o.R = 1;
var newStyle = "a:hover .signwritingtext { opacity: 0.8; } \
.signwritingtext{ \
background-repeat: no-repeat; \
background-origin: content-box; } \
.signwritingtext span{ display: table-cell; \
vertical-align: middle; \
font-size: 0%; \
height:inherit;}"
/* writing modes?
var elemStyle = document.createElement('div').style;
if ( '-webkit-writing-mode' in elemStyle || '-moz-writing-mode' in elemStyle || 'writing-mode' in elemStyle ) {
newStyle += "\
.mw-content-ltr { \
-webkit-writing-mode: vertical-lr; \
-moz-writing-mode: vertical-lr; \
writing-mode: vertical-lr; \
} \
.mw-content-ltr .signwritingtext { \
display: inline-block; \
left: 0 !important; \
vertical-align: middle; \
min-width: 50px; \
background-position-x: 50%; \
}"
}
*/
mw.util.addCSS( newStyle )
function rgbToHex(rgb) {
if (rgb.match(/^[0-9A-Fa-f]{6}$/)) {
return rgb;
}
var rgbvals = /rgba?\((.+),(.+),(.+)\)/i.exec(rgb);
if (!rgbvals) {
return 'ffffff';
}
var rval = parseInt(rgbvals[1]);
var gval = parseInt(rgbvals[2]);
var bval = parseInt(rgbvals[3]);
var pad = function (value) {
return (value.length < 2 ? '0' : '') + value;
};
return pad(rval.toString(16)) + pad(gval.toString(16)) + pad(bval.toString(16));
}
var color, background, size;
f = function ( node ) {
for( var ex, value; ex = r.exec( value = node.nodeValue ); ) {
var x, x1 = 500,
x2 = 500,
y, y1 = 500,
y2 = 500,
k, l, m = ex[0], index = ex.index, parent = node.parentNode;
k = m.charAt(0);
m.replace(r2, function ($0) {
x = parseInt($0.slice(0, 3));
y = parseInt($0.slice(4, 7));
x1 = Math.min(x1, x);
x2 = Math.max(x2, x);
y1 = Math.min(y1, y);
y2 = Math.max(y2, y);
});
if (k == 'S') {
x2 = 1000 - x1;
y2 = 1000 - y1;
}
l = o[k] || 0;
l = (l * 75 + x1 - 400) * size;
var div = document.createElement( "div" ), span = div.appendChild( document.createElement( "span" ) ), style = div.style;
div.className = "signwritingtext";
style.padding = 10 * size + 'px';
style.width = (x2 - x1) * size + 'px';
style.height = (y2 - y1) * size + 'px';
style.marginLeft = l + 'px';
style.backgroundImage = 'url(\'' + u + 'glyphogram.php?font=svg&text=' + m + '&line=' + color + '&fill=' + background + '&size=' + size + '\')';
if ( index > 0 ) {
node = node.splitText( index );
}
if ( value.length > index + m.length ) {
var nS = node.splitText( m.length );
span.appendChild( node );
parent.insertBefore( div, node = nS );
} else {
span.appendChild( node );
parent.appendChild( div );
return;
}
}
};
function fswReplace(node) {
if (node.nodeType == 3) {
color = rgbToHex(jQuery(node.parentNode).css('color'));
background = jQuery(node.parentNode).css('background-color');
parent = node.parentNode;
while (background.toString() == 'rgba(0, 0, 0, 0)' || background.toString() == 'transparent') {
parent = parent.parentNode;
background = jQuery(parent).css('background-color');
}
background = rgbToHex(background);
size = parseInt(jQuery(node.parentNode).css('font-size')) / 30;
f( node );
} else {
var nodes;
if (node.nodeName != 'TEXTAREA') nodes = node.childNodes;
if (nodes) {
var i = nodes.length;
while (i--) fswReplace(nodes[i]);
}
}
};
if (!node || !node.nodeType) node = document.body;
fswReplace(node);
});
//page should be loaded so call the function to crawl the DOM
signwriting_styled();