Utilisateur:Phe/Inject-css.js
Apparence
Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : Maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac) ;
- Google Chrome : Appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac) ;
- Internet Explorer : Maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ;
- Opera : Allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d'exploration → Images et fichiers en cache.
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);