User:PerfektesChaos/js/editToolStrIns/User Customization/Example

The example below shows how a user might configure the personal appearance of the tool via mw.libs collection.

Definitions are limited to a situation with real editing (which is even more helpful when including from a separate page).

To avoid syntax errors an empty application object is created if not available by project setting.

A user object is created and equipped with most interesting points on top. The first two items inherit their label from project standard. Then TeX business can be selected. The options are completed by the project standard drop down not mentioned yet, with exception of Cyrillic.

Finally, cookie usage is requested.

if ( /^(edit|submit)$/.test( mw.config.get("wgAction") ) ) {
   if ( typeof(mw.libs.editToolStrIns) !== "object" ) {
      mw.libs.editToolStrIns  =  { };
   }
   mw.libs.editToolStrIns.user  =
        "custom": [ "0",        true,
                    "[[]]",     true,
                    ":6",       "Datei:",
                    "TeX",      "TeX",
                    "TeX_ar",   "TeX_ar",
                    "TeX_bi",   "TeX_bi",
                    "TeX_di",   "TeX_di",
                    "TeX_gr",   "TeX_gr",
                    "TeX_tx",   "TeX_tx",
                    "Cyrillic", false,
                    "de",       "Deutsch"
                  ],
        "config": { "cookieName": "editToolStrIns" }
      };
}
// [[User:PerfektesChaos/js/editToolStrIns]]

If not defined by project a mw.loader.load() statement may follow. It may be included anyway and will be ignored if loaded twice.

mw.hook application registration

The following code will register a user defined configuration function. mw.libs wouldn‘t be required any longer. Registration should be done before loading the gadget.

mw.hook( "editToolStrIns.ready" ).add( myETSIfurnisher );

An arbitrary user defined function will receive the application object app and might look like:

function myETSIfurnisher( app ) {
   app.set( "this", "that" );
   app.user = { custom: [ "0",    true,
                          "[[]]", true,
                          "TeX",  "TeX" ] };
   app.update();
}

Toolbar surrogate

The following specification will generate three links as occurring in the very first toolbar:

app.user = { defs: { "@Toolbar": [ [ [ "''", "''", "", "italic text",
                                       "<span style='font-style:italic'>I</span>" ],
                                     [ "'''", "'''", "", "bold text",
                                       "<span style='font-weight:bold'>B</span>" ],
                                     [ "[", "]", "", "external link",
                                       "[URL]" ]
                                 ] ]
                   } };

The last item in every list is the explicit specification of visible link appearance; the one before provides a tooltip.

If someone prefers button-like appearance of items, they may be equipped with a class toolbar-button or others:

app.user = { defs: { "@Toolbar": [ [ [ "''", "''", "", "italic text",
                                       "<span class='toolbar-button' style='font-family:serif; font-style:italic;'>I</span>" ],
                                     [ "'''", "'''", "", "bold text",
                                       "<span class='toolbar-button' style='font-weight:bold'>B</span>" ],
                                     [ "[", "]", "", "external link",
                                       "<span class='toolbar-button'>[www]</span>" ]
                                 ] ]
                   } };

A class definition for buttons mignt be taken from varios MediaWiki resources or by user CSS specification like

.toolbar-button {
   background: #D0D0D0;
   border: 2px solid;
   border-color: #E0E0E0 #E0E0E0 #707070 #707070;
   display: inline-block;
   min-width: 1.5em;
   text-align: center;
}

That will result in: I B [www]

Container for gadget

The following code will discard all tool areas and will create a new target area just before (above) the textarea edit form. The target area may be decorated utilizing the #textarea-before selector.

app.user = { config: { container: { "#textarea-before": { start: "#editform",
                                                          fiat:  "before"
                                                        }
                                  }
                     }
           };

User defined function

The following function may be referenced in a .user.defs specification (titled cite web) as advanced [5] feature.

myUDF  =  function ( arglist, active ) {
   // User defined function to be executed when a token is clicked
   //    arglist  -- Array()
   //                [0] to be inserted before cursor position / selection
   //                [1] to be inserted after cursor position / selection
   //                [2] to be inserted if there is no selection range
   //                [3] tooltip
   //                [4] explicit label for token
   //                [5] this function itself
   //                [...] any further value
   //    active   -- object: current selection
   // Postcondition:
   //    Returns encapsulateSelection object,  or false
   // 2011-11-25 PerfektesChaos@de.wikipedia
   var r = false;
   switch ( arglist[ 4 ] ) {   // fork according to token label
      case "cite web" :
         r = new Date();
         r = { "pre":  "{{cite web |url=",
               "post": " |title= |author= |date= |work= |publisher= "
                       + "|accessdate="
                             + r.getDate() + " "
                             + mw.config.get( "wgMonthNames" )[ r.getMonth() + 1 ]
                             + " " + r.getFullYear()
                       + "}}" };
         break;
      case "Another case" :
         // other case
   }   // switch arglist
   return r;
};   // myUDF()

The function definition may be stored in .user.defs as well.

Example: indented pre- and syntaxhighlight-tags

if (!String.prototype.spn) String.prototype.spn = function(s) {
// Ermittelt die Länge der am Anfang übereinstimmenden Zeichen
// Counts how many characters at the beginning match the given ones
// PHP: strspn()
	return this.match(new RegExp("^["+s+"]*"))[0].length;
}
function indentTag(params, selection) {
/* get: Array([attribute], [style-attribute], , , tagname), string selected text
return: encapsulateSelection-Object */
// copyleft [[de:wp:User:✓|Bergi]]
	var t = document.getElementById("wpTextbox1");
	var newline = t.selectionStart && t.value.charAt(t.selectionStart-1)=="\n" ? 1 : 0;
	var linestart = t.value.lastIndexOf("\n", t.selectionStart - 2*newline);
	var line = t.value.substring(linestart+1);
	var indent = line.spn(":*#");
	
	var attrs = params[0];
	var tag = params[4];
	var style = params[1] || "";
	if (indent)
		style += "margin-left:"+(2*indent)+"em;"
	return {
		pre: (newline ? "<" : "\n<") + tag + (attrs ? " "+attrs : "") + (style ? " style=\""+style+"\"" : "") + ">",
		post: "</" + tag + ">"
	};
}
mw.libs.editToolStrIns.user.defs["<>"] =  [
	null,
//	…,
	[
		[ ,"white-space:pre-wrap;",,, "pre", indentTag],
		[ "<math>", "</math>",,, "math"],
		[ "lang=\"\"",,,, "syntaxhighlight", indentTag]
	]
];