User:Slevinski/signwriting viewer.js
Jump to navigation
Jump to search
Note: After saving, changes may not occur immediately. Click here to learn how to bypass your browser's cache.
- Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac);
- Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5;
- Konqueror: simply click the Reload button, or press F5;
- Opera users may need to completely clear their cache in Tools→Preferences.
Warning: Malicious code can compromise your account. Page preview will cause your web browser to execute this page's content as code under some skins, including Monobook. If you have any questions about any code you plan to add, you can ask at the appropriate reading room. |
Documentation for this script can be added at User:Slevinski/signwriting viewer. |
/**
* 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 <http://www.gnu.org/licenses/>.
*
* 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 = 'http://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();