User:Slevinski/signwriting viewer.js

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump.
This code will be executed when previewing this page.

Documentation for this user script can be added at User:Slevinski/signwriting viewer.

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/**
 * 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 = '//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();