mozilla

Revision 516461 of Template:csssyntaxdef

  • Revision slug: Template:csssyntaxdef
  • Revision title: Template:csssyntaxdef
  • Revision id: 516461
  • 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! var db = wiki.page(mdn.localString({ "en-US": "en-US/docs/CSS/CSS_values_syntax", "fr" : "fr/docs/CSS/Syntaxe_des_valeurs_CSS", "ja" : "ja/docs/Web/CSS/CSS_values_syntax", "de" : "de/docs/CSS/CSS_werte_syntax" })); var s_where = mdn.localString({ "en-US": "where ", "fr" : "où ", "de" : "wo " }); var s_and = mdn.localString({ "en-US": "and ", "fr" : "et ", "ja" : "と", "de" : "und " }); 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!

var db = wiki.page(mdn.localString({
    "en-US": "en-US/docs/CSS/CSS_values_syntax",
    "fr"   : "fr/docs/CSS/Syntaxe_des_valeurs_CSS",
    "ja"   : "ja/docs/Web/CSS/CSS_values_syntax",
    "de"   : "de/docs/CSS/CSS_werte_syntax"
})); 

var s_where = mdn.localString({
	"en-US": "where ",
	"fr"   : "où ",
	"de"   : "wo "
});
						 
var s_and = mdn.localString({
	"en-US": "and ",
	"fr"   : "et ",
	"ja"   : "と",
	"de"   : "und "
});

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 optional, 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 (it may be used once, or not at all)." 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 = /&amp;&amp;/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 %>