mozilla

Revision 315485 of Template:csssyntaxdef

  • Revision slug: Template:csssyntaxdef
  • Revision title: Template:csssyntaxdef
  • Revision id: 315485
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

<% // $0 is the name of the definition (property or data type), without < > or '' // $1 is the definition, it is raw text, no HTML (except
, no link. <> already are escaped. // $2 is the type, by default it is 'property', but can be 'non-terminal' or 'non-terminal-cont' // Localization: all these strings should be localized! db = wiki.page(mdn.localString({"en-US": "en-US/docs/CSS/CSS_values_syntax", "fr" : "fr/docs/CSS/Syntaxe_des_valeurs_CSS" })); var s_where = mdn.localString({"en-US": "where ", "fr" : "où " }); var s_and = mdn.localString({"en-US": "and ", "fr" : "et ", "ja" : "と" }); var s_hash_mark = mdn.localString({"en-US": '#', "fr" : '#' // TBD: Once translated update the URL to the translation (different slug) }); var s_double_bar = mdn.localString({"en-US": '||', "fr" : '||' // TBD: Once translated update the URL to the translation (different slug) }); var s_single_bar = mdn.localString({"en-US": '|', "fr" : '|' // TBD: Once translated update the URL to the translation (different slug) }); var s_double_ampersand = mdn.localString({"en-US": '&&', "fr" : '&&' // TBD: Once translated update the URL to the translation (different slug) }); var s_question_mark = mdn.localString({"en-US": '?', "fr" : '?' // TBD: Once translated update the URL to the translation (different slug) }); var result =""; // The header of the definition, including the id, and eventual prefixes switch($2) { case 'non-terminal': result += s_where + "<" + $0 + "> = "; break; case 'non-terminal-cont': result += s_and + "<" + $0 + "> = "; break; } result += ''; // Let's modify the syntax, we want to put some fancy links in it. // Pay attention: the order is important! syntax = $1; // Multipliers and combinators re = /\#/g; syntax = syntax.replace(re, s_hash_mark); re = /\|\|/g; syntax = syntax.replace(re, s_double_bar); //The next regexp eat the space between and after the pipe (logical, but unfortunate), so we readd them ;-) re = /[^\|]\|[^\|]/g; syntax = syntax.replace(re, ' ' + s_single_bar + ' '); re = /&&/g; syntax = syntax.replace(re, s_double_ampersand); re = /\?/g; syntax = syntax.replace(re, s_question_mark); re = /\*/g; syntax = syntax.replace(re, '*'); re = /\+/g; syntax = syntax.replace(re, '+'); locale = env.locale; // Non-terminal & basic data types function buildLinkWithTooltipForBasicAndNonTerminal(match, p1, p2) { if (p1 == "") { // Not a <'column-width'> switch(p2) { case 'string': link = '/' + locale + '/docs/CSS/string'; title = ''; break; case 'url': link = '/' + locale + '/docs/CSS/url'; title = ''; break; case 'integer': link = '/' + locale + '/docs/CSS/integer'; title = ''; break; case 'number': link = '/' + locale + '/docs/CSS/number'; title = ''; break; case 'percentage': link = '/' + locale + '/docs/CSS/percentage'; title = ''; break; case 'length': link = '/' + locale + '/docs/CSS/length'; title = "Possible value: a number followed by 'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc', 'px', like 3px, 1.5cm, -0.5em, 0."; break; case 'angle': link = '/' + locale + '/docs/CSS/angle'; title = "Possible values: a number followed by 'deg', 'grad', 'rad' or 'turn' like 2turn, 1.3rad, -60deg, or 0grad."; break; case 'time': link = '/' + locale + '/docs/CSS/time'; title = "Possible values: a number followed by 's' or 'ms' like 3s, -2.5ms, or 0s."; break; case 'frequency': link = '/' + locale + '/docs/CSS/frequency'; title = ''; break; case 'resolution': link = '/' + locale + '/docs/CSS/resolution'; title = ''; break; case 'color': link = '/' + locale + '/docs/CSS/color'; title = ''; break; case 'image': link = '/' + locale + '/docs/CSS/image'; title = ''; break; case 'position': link = '/' + locale + '/docs/CSS/position'; title = ''; break; case 'timing-function': link = '/' + locale + '/docs/CSS/timing-function'; title = 'Possible values: cubic-bezier(), steps(), linear, ease, ease-in, ease-out, east-in-out, step-start-step-end'; break; case 'transform-function': link = '/' + locale + '/docs/CSS/transform-function'; title = 'Possible values: matrix(), matrix3d(), rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(), scale(), scale3d(), scaleX(), scaleY(), scaleZ(), skewX(), skewY(), translate(), translate3d(), translateX(), translateY(), or translateZ()'; break; default: // It is a non-terminal data type link = '/en-US/docs/CSS/CSS_values_syntax#syntax-' + p2; var rg = new RegExp("<\\s*span\\s+id\\s*=\\s*\"syntax-" + p2 +"\"[^>]*>(.*?)<\\s*/\\s*span\\s*\\>","igm"); title = rg.exec(db) if (!title) { title = "Tooltip not found in DB." } else { title = title[1]; // Cleaning the tooltip of all html tags rg = /<.*?>/g; title = title.replace(rg, ""); } } } else { // <'column-width'> and such var reg = new RegExp("<\\s*span\\s+id\\s*=\\s*\"syntax-" + p2 +"\"[^>]*>(.*?)<\\s*/\\s*span\\s*\\>","igm"); var tooltip = reg.exec(db) if (!tooltip) { tooltip = "Tooltip not found in DB." } else { tooltip = tooltip[1]; } // Cleaning the tooltip of all html tags reg = /<.*?>/g; title = tooltip.replace(reg, ""); link = '/' + locale + '/docs/CSS/' +p2; } return ''+ match +''; } re = /<('?)(.*?)'?>/g; syntax = syntax.replace(re, buildLinkWithTooltipForBasicAndNonTerminal); //re = /<'(.*?)'>/g; //syntax = syntax.replace(re, buildLinkWithTooltip); // We are done mangling with the syntax, let's add it to the result result += syntax; // The footer of the definition, closing tags result += ''; %> <%- result %>

Revision Source

<% 
    // $0 is the name of the definition (property or data type), without < > or ''
    // $1 is the definition, it is raw text, no HTML (except <br/>, no link. <> already are escaped.
    // $2 is the type, by default it is 'property', but can be 'non-terminal' or 'non-terminal-cont'
    
    // Localization: all these strings should be localized!
    db = wiki.page(mdn.localString({"en-US": "en-US/docs/CSS/CSS_values_syntax",
                                    "fr"   : "fr/docs/CSS/Syntaxe_des_valeurs_CSS"
                                   })); 
    
    var s_where = mdn.localString({"en-US": "where ",
                                   "fr"   : "où "
                                 });
                                 
    var s_and = mdn.localString({"en-US": "and ",
                                 "fr"   : "et ",
                                 "ja"   : "と"
                                });
    var s_hash_mark = mdn.localString({"en-US": '<a title="Hash mark multiplier: the previous entity may appear 0, 1 or several times, each occurence being separated from the previous one by a comma" href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Hash_mark_(.23)">#</a>',
                                       "fr"   : '<a title="Le multiplicateur dièse: l\'entité qui le précède peut apparaître 0 ou plusieurs fois, chaque occurence étant séparée de la précédente par une virgule"href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Hash_mark_(.23)">#</a>' // TBD: Once translated update the URL to the translation (different slug)
                                      });
    
    var s_double_bar = mdn.localString({"en-US": '<a title="Double bar: the two entities are optional, and may appear in any order." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Double_bar">||</a>',
                                        "fr"   : '<a title="La double barre verticale: les deux entités sont des options et peuvent apparaître dans n\'importe quel ordre." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Double_bar">||</a>' // TBD: Once translated update the URL to the translation (different slug)
                                       });
                
    var s_single_bar = mdn.localString({"en-US": '<a title="Single bar: the two entities are options, but exactly one must be present." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Single_bar">|</a>',
                                        "fr"   : '<a title="Barre verticale simple: exactement une des deux entités, mais pas les deux, doit être présente." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Single_bar">|</a>' // TBD: Once translated update the URL to the translation (different slug)
                                       });
                    
    var s_double_ampersand = mdn.localString({"en-US": '<a title="Double ampersand: the two entities are mandatory, but may appear in any order." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Double_ampersand">&&</a>',
                                              "fr"   : '<a title="La double esperluette: les deux entités sont obligatoires, mais peuvent apparaître dans n\'importe quel ordre." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Double_ampersand">&&</a>' // TBD: Once translated update the URL to the translation (different slug)
                                             });
                    
    var s_question_mark = mdn.localString({"en-US": '<a title="Question mark multiplier: the previous entity is optional (Zero or one occurence)." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Question_mark_(.3F)">?</a>',
                                           "fr"   : '<a title="Le multiplicateur point d\'interrogation: l\'entité qui le précède est optionnelle (Zero ou one occurence)." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Question_mark_(.3F)">?</a>' // TBD: Once translated update the URL to the translation (different slug)
                                           });
                                           
    
    var result ="";
    
    // The header of the definition, including the id, and eventual prefixes
    switch($2) {
        case 'non-terminal':
            result += s_where + "<code>&lt;" + $0 + "&gt; = </code>";
            break;
        case 'non-terminal-cont':
            result += s_and + "<code>&lt;" + $0 + "&gt; = </code>";
            break;
    }
    result += '<span id="syntax-' + $0 + '"><code>';
    
    // Let's modify the syntax, we want to put some fancy links in it.
    // Pay attention: the order is important!
    syntax = $1; 
    // Multipliers and combinators
    re = /\#/g;             syntax = syntax.replace(re, s_hash_mark);
    re = /\|\|/g;           syntax = syntax.replace(re, s_double_bar);
    //The next regexp eat the space between and after the pipe (logical, but unfortunate), so we readd them ;-)
    re = /[^\|]\|[^\|]/g;   syntax = syntax.replace(re, ' ' + s_single_bar + ' ');
    re = /&&/g;             syntax = syntax.replace(re, s_double_ampersand);
    re = /\?/g;             syntax = syntax.replace(re, s_question_mark);
    re = /\*/g;             syntax = syntax.replace(re, '<a title="Asterisk multiplier: the previous entity may appear 0, 1 or several times." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Asterisk_(*)">*</a>');
    re = /\+/g;             syntax = syntax.replace(re, '<a title="Plus multiplier: the previous entity may appear 1 or several times." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Plus_(.2B)">+</a>');

    locale = env.locale;
    
    //  Non-terminal & basic data types
    function buildLinkWithTooltipForBasicAndNonTerminal(match, p1, p2) {
        if (p1 == "") { // Not a <'column-width'>
          switch(p2) {
            case 'string':          
                link = '/' + locale + '/docs/CSS/string';
                title = '';
                break;
            case 'url':             
                link  = '/' + locale + '/docs/CSS/url';
                title = '';
                break;
            case 'integer':         
                link  = '/' + locale + '/docs/CSS/integer';
                title = '';
                break; 
            case 'number':         
                link  = '/' + locale + '/docs/CSS/number';
                title = '';
                break;
            case 'percentage':      
                link  = '/' + locale + '/docs/CSS/percentage';
                title = '';
                break;
            case 'length':          
                link  = '/' + locale + '/docs/CSS/length';
                title = "Possible value: a number followed by 'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc', 'px', like 3px, 1.5cm, -0.5em, 0.";
                break;
            case 'angle':           
                link  = '/' + locale + '/docs/CSS/angle';
                title = "Possible values: a number followed by 'deg', 'grad', 'rad' or 'turn' like 2turn, 1.3rad, -60deg, or 0grad.";
                break;
            case 'time':            
                link  = '/' + locale + '/docs/CSS/time';
                title = "Possible values: a number followed by 's' or 'ms' like 3s, -2.5ms, or 0s.";
                break;
            case 'frequency':       
                link  = '/' + locale + '/docs/CSS/frequency';
                title = '';
                break;
            case 'resolution':      
                link  = '/' + locale + '/docs/CSS/resolution';
                title = '';
                break;
            case 'color':           
                link  = '/' + locale + '/docs/CSS/color';
                title = '';
                break;
            case 'image':           
                link  = '/' + locale + '/docs/CSS/image';
                title = '';
                break;
            case 'position':        
                link  = '/' + locale + '/docs/CSS/position';
                title = '';
                break;
            case 'timing-function': 
                link  = '/' + locale + '/docs/CSS/timing-function';
                title = 'Possible values: cubic-bezier(), steps(), linear, ease, ease-in, ease-out, east-in-out, step-start-step-end';
                break;
            case 'transform-function':
                link  = '/' + locale + '/docs/CSS/transform-function';
                title = 'Possible values: matrix(), matrix3d(), rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(), scale(), scale3d(), scaleX(), scaleY(), scaleZ(), skewX(), skewY(), translate(), translate3d(), translateX(), translateY(), or translateZ()';
                break;
            default: // It is a non-terminal data type
                link  = '/en-US/docs/CSS/CSS_values_syntax#syntax-' + p2;
                 var rg = new RegExp("<\\s*span\\s+id\\s*=\\s*\"syntax-" + p2 +"\"[^>]*>(.*?)<\\s*/\\s*span\\s*\\>","igm");
                title = rg.exec(db)
                if (!title) {
                    title = "Tooltip not found in DB."
                }
                else {
                    title = title[1];
                    // Cleaning the tooltip of all html tags
                    rg = /<.*?>/g;
                    title = title.replace(rg, "");
                }
          }
        }
        else { // <'column-width'> and such
            var reg = new RegExp("<\\s*span\\s+id\\s*=\\s*\"syntax-" + p2 +"\"[^>]*>(.*?)<\\s*/\\s*span\\s*\\>","igm");
            var tooltip = reg.exec(db)
            if (!tooltip) {
                tooltip = "Tooltip not found in DB."
            }
            else {
                tooltip = tooltip[1];
            }
            // Cleaning the tooltip of all html tags
            reg = /<.*?>/g;
            title = tooltip.replace(reg, "");
            link  = '/' + locale + '/docs/CSS/' +p2;  
        }
        
        return '<a title="' + title +'" href="' + link + '">'+ match +'</a>';    

    }
    
    re = /&lt;('?)(.*?)'?&gt;/g;
    syntax = syntax.replace(re, buildLinkWithTooltipForBasicAndNonTerminal);
    
    //re = /&lt;'(.*?)'&gt;/g;
    //syntax = syntax.replace(re, buildLinkWithTooltip);

    // We are done mangling with the syntax, let's add it to the result
    result += syntax;
    
    // The footer of the definition, closing tags
    result += '</code></span>';

%>
<%- result %>