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 <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();