MediaWiki:Gadget-WikiEditor-CssTools.js

/** * WikiEditor tools for CSS editing * * The WikiEditor-Tools-loader gadget will only load this when editing a * page with CSS content model. Users not editing such pages will never have * it loaded. * * Suggest new help items on the talk page. */

/* eslint-disable one-var */

( function {

'strict';

var makeHeadings = function ( hs ) { return hs.map( function ( h ) {			return { text: h };		} ); };

var makeRows = function ( hs, ents ) { return ents.map( function ( entry ) {			var row = {};			hs.forEach( function ( h, i ) { row[ h ] = { text: entry[ i ] }; } );			return row;		} ); };

var makeTable = function ( label, headings, entries ) { var table = { layout: 'table', label: label, headings: makeHeadings( headings ), rows: makeRows( headings, entries ) };		return table; };

var makeHelpPanel = function {

return { type: 'booklet', label: 'CSS Help', pages: { basics: makeTable(					'CSS Basics',					[ 'Term', 'Information' ],					[						[ 'Selectors',							'Selectors are used to target any number of elements on the page. They can be used to select based on "class", "ID", the HTML tag type and other attributes.' ],						[ 'Properties',							'Properties are individual styles that can be applied to a "selected" element.' ],						[ 'Rules',							'A CSS rule applies a set of one or more properties to all the elements selected by one or more selectors. Rules have the form: Selector1, Selector2 {\n   Property1: Value1;\n    Property2: Value2;\n    ...\n} ' ],						[ 'Cascading',							'The rules "cascade" (this is the C in CSS). A rule can be overridden by a rule that comes later, or a more specific rule. For example,   is more specific than   so it "wins".' ],						[ 'Classes',							'Classes can apply to any number of elements. They are set with HTML   attribute:  .' ], [ 'IDs', 'IDs can be set on any element with the. Every ID should be unique on a page: no two elements should have the same ID. Each element can only have one ID.' ], [ 'Pseudo-classes', 'Pseudo-classes are way for CSS to target elements based on various "implicit" properties of elements. For example, the first child element of another element can be selected with. They are denoted by a colon.' ] ] ),				selectors: makeTable( 'Selectors', [ 'Selector', 'Description' ], [						[ '.class', 'Select all elements with this class.' ], [ '#id', 'Select the element with the given ID (there should be only one.' ],						[ 'parent > child',							'A > sign means an element matching "child" that is a direct child of an element matching "parent".' ],						[ 'ancestor descendant',							'A space means an element matching "descendant" that is a descendant of an element matching "ancestor", with any number of intervening layers.' ],						[ ':nth-child(n)',							'Pseudo-class that selects the given element that is the n\'th child (of any type) of its parent. Useful for cells in tables.' ],						[ ':first-child,\n:last-child',							'Pseudo-class that selects the first/last child of the parent element' ]					] ), properties: makeTable(					'Properties',					[ 'Property', 'Description' ],					[						[ 'font-size', 'The size of the font, usually relative to the surrounding text.' ],						[ 'font-variant', 'Set to  for small caps, or   to unset.' ],						[ 'font-style', '  or  ' ],						[ 'font-weight', '  or  ' ],						[ 'text-align', 'Alignment of the text within a block element:  ,   or  .   can also be used, but should not be applied to a whole work.' ],						[ 'text-align-last', 'Alignment of the last line of text within a block.' ],						[ ' text-decoration ', ' ,  ,  . Can be combined.' ],						[ 'padding', 'Set an internal "buffer" of space within an element. If one value is given, all four side are the same. If two are given, it is top/bottom, then left/right. If four, it is top, right, bottom, left (TRBL)' ],						[ 'margin', 'Similar to padding, but the "buffer" is outside the element\'s box' ], [ 'float', 'Remove an element from the normal page flow and "float" it  or  ' ] ] ),				more: makeTable( 'Learn more', [ 'Where', 'Information' ], [						[ 'Wikisource', 'Help:Page styles' ], [ 'W3Schools', 'W3Schools CSS Reference' ], [ 'MDN Web Docs', 'Mozilla CSS Reference' ] ] )			}		};	};

var addCssTemplates = function ( wikiEditor ) {

var makeSelectorRule = function ( label, selector, peri, post ) { return { label: label, action: { type: 'encapsulate', options: { pre: selector, periMsg: peri, post: post }				}			};		};

var templates = { idRule: makeSelectorRule( '#id', '#', 'ID' ), classRule: makeSelectorRule( '.class', '.', 'CLASS_NAME' ), directChild: makeSelectorRule( '> direct child', '> ', 'CHILD' ), descendant: makeSelectorRule( 'descendant', ' ', 'DESCENDANT' ), nthChild: makeSelectorRule( ':nth-child', '.', 'CLASS_NAME', ':nth-child(1)' ) };

var makePropRule = function ( prop, val, post ) { return { label: prop + ': ' + val + ';', action: { type: 'encapsulate', options: { pre: prop + ': ' + val + ';', post: post }				}			};		};

var props = { bold: makePropRule( 'font-weight', 'bold' ), normal: makePropRule( 'font-weight', 'normal' ), italic: makePropRule( 'font-style', 'italic' ), sc: makePropRule( 'font-variant', 'small-caps' ), asc: makePropRule( 'font-variant', 'all-small-caps' ), tc: makePropRule( 'text-align', 'center' ), tr: makePropRule( 'text-align', 'right' ) };

wikiEditor( 'addToToolbar', {			section: 'main',			groups: {				list: {					tools: {						templates: {							label: 'Selectors',							type: 'select',							list: templates						},						props: {							label: 'Common rules',							type: 'select',							list: props						}					}				}			}		} );

wikiEditor( 'addToToolbar', {			sections: {				info: makeHelpPanel			}		} ); };

window.wsutils.wikiEditorConfigIncantation( addCssTemplates );

} );