Utilisateur:Phe/Inject-css.js

function inject_css_for_table() {

    var table_nr = 0;

    var builtin_class = {
        /* listé ici les classes builtin, cad celle définit dans common.css */
    };

    var non_builtin_class = {
        /* listé ici les classes qui ne rentre pas dans le cadre du générateur
         * de css ci-dessus par exemple
         * 'foo' : table.foo { des règles };
         */
    };

    function select_table() {
        return 'table#t_' + table_nr + ' ';
    }

    function build_single_selector(nr, is_column) {
        var cell_type = is_column ? 'tr' : 'td';
        var dict_col_lig = {
            '1' : cell_type + ':first-child',
            'all' : cell_type,
            'last' : cell_type + ':last-child'
        };

        var selector = '';

        if (dict_col_lig[nr]) {
            selector += dict_col_lig[nr];
        } else {
            selector  += cell_type + ':first-child';
            for (var i = 1; i < nr; ++i)
                selector += ' + ' + cell_type;
        }
        return selector;
    }

    function build_selector(col, lig) {
        var selector = [];
        var cols = col.split('-');
        var ligs = lig.split('-');
        for (var i = 0; i < cols.length; ++i) {
            for (var j = 0; j < ligs.length; ++j) {
                var sel = build_single_selector(ligs[j], true) + ' > ' +
                          build_single_selector(cols[i], false);
                selector.push(select_table() + sel);
            }
        }

        return selector.join(",\n");
    }

    /* special case first */

    /* border rules, three parameters */
    function build_border_rules(params) {
        var dict_border = { 'g' : '-left', 'gauche' : '-left',
                            'd' : '-right', 'droite' : '-right',
                            'h' : '-top', 'haut' : '-top',
                            'b' : '-bottom', 'bas' : '-bottom',
                            't' : '', 'tous' : '' };
        var dict_width  = { 'l' : 'thick', 'm' : 'medium', 'p' : 'thin' };
        var dict_type   = { 'd' : 'double', 's' : 'solid', 'p' : 'dotted', 'n' : 'none' };

        return '{ border' +
                      dict_border[params[0]] + ":" +
                      dict_width[params[1]]  + " " +
                      dict_type[params[2]]   + ";" +
                ' }';
    }

    function build_rules_two_param(name, params) {
        var dict_rule = { 'remplissage' : 'padding' };
        return '{ ' + dict_rule[name] + ':' + params[0] / 10 + 'em ' + params[1] / 10 + 'em;  }';
    }

    function build_rules_one_param(name, params) {
        var dict_rule = { 'taille' :'font-size',
                          'interligne' : 'line-height'  };
        return '{ ' + dict_rule[name] + ':' + params[0] + '%; }';
    }

    /* rules without parameters */
    function build_rules(name) {
        var dict_rule = {
            "left" : "text-align:left;",
            "right" : "text-align:right;",
            "center" : "text-align:center;",
            "top" : "vertical-align:top;",
            "bottom" : "vertical-align:bottom;",
            "centerv" : "vertical-align:middle;",
            "nowrap" : "white-space:nowrap;",
            'negatif' : 'text-indent:-2em; padding-left:2em;',
            'positif' : 'text-indent: 2em;'
        };
        return "{ " + dict_rule[name] + " }";
    }

    /* last the css generator, it splits the class name and from it
     * build the needed css rules, this mean the class name must encode
     * the needed characteristics. An higher level of abstraction is given
     * to editor through a template which generate the class name */
    function get_css(classname) {
        var params = classname.split('_');
        var class_name = params[1];
        /* features, if any, this array can be empty */
        var features = params.slice(2, -4);
        var col = params.slice(-3)[0];
        var lig = params.slice(-1)[0];

        var css_text = '';

        if (builtin_class[classname]) {
            /* predefined in css */
        } else if (non_builtin_class[classname]) {
            css_text += non_builtin_class[classname];
        } else if (class_name == "bord") {
            switch (features[0]) {
                case 'interieur':
                    /* interieur <==> g_x_x_col_all + g_x_n_col_1 */
                    css_text += build_selector('all', 'all') + " " +
                                build_border_rules(['g', features[1], features[2]]) +
                                '\n' +
                                build_selector('1', 'all') + " " +
                                build_border_rules(['g', features[1], 'n']);
                    break;
                case 'exterieur':
                   /* e.g. table.t_#id { border:thin double; } */
                   css_text += select_table() +
                               build_border_rules(['t', features[1], features[2]]);

                   break;
                default:
                    css_text += build_selector(col, lig) + " " +
                                build_border_rules(features);
                    break;
            }
        } else if (class_name == 'alinea') {
            css_text += build_selector(col, lig) + " " +
                        build_rules(features[0]);
        } else if (class_name == 'para') {
            /* assert features[0] == 'alinea' */
            css_text += build_selector(col, lig) + " > p " +
                        build_rules(features[1]);
        } else if ($.inArray(class_name, [ 'taille', 'interligne' ]) != -1) {
            css_text += build_selector(col, lig) + " " +
                        build_rules_one_param(class_name, features);
        } else if ($.inArray(class_name, [ 'remplissage' ]) != -1) {
            css_text += build_selector(col, lig) + " " +
                        build_rules_two_param(class_name, features);
        } else {
            /* fallback for all class name w/o any parameters */
            css_text += build_selector(col, lig) + " " +
                        build_rules(class_name);
        }
        return css_text;
    }

    var css_text = '';

    var elt = $('table[class^="t_"]');
    for (var i = 0; i < elt.length; ++i) {
        table_nr += 1;

        /* to avoid it in the table style */
        css_text += select_table() + '{ border-collapse:collapse; }\n';

        var classes = $(elt[i]).attr('class').split(" ");
        for (var idx in classes) {
            css_text += get_css(classes[idx]) + '\n';
        }

        $(elt[i]).attr('id', 't_' + table_nr);
    }

    if (css_text) {
        mw.log(css_text);
        $('head').append('<style type="text/css" media="all">' + css_text + '</style>');
    }
}

$(document).ready(inject_css_for_table);