User talk:Alex Smotrov/edittools.js

Current EditTools

Current EditTools solution consists of:

• HTML: MediaWiki:Edittools is divided by paragraphs, all hidden except the 1st one
• JS: MediaWiki:Edittools.js (called from Common.js) creates a drop-down selection box
• CSS: some styling in MediaWiki:Common.css

The problems are:

• The big size of the HTML part. This is inherent problem with Extension:CharInsert: each insertable character has to be represented with the line <a onclick="insertTags('X','','');return false" href="#">X</a>. The current version (rendered Edittools) takes around 8 kb compressed (traffic compression is supported by most browsers), affecting traffic on every edit or preview. Uncompressed size is approx. 80 kb and affects the page load time.
• HTML part is loaded even for users with disabled JavaScript (when character insertion simply does not work)
• There is no way to disable Edittools: user scripts or CSS can only hide or alter it. MediaWiki:Edittools.js claims that load_edittools=true disables the "selection" functionality. This is not even true and doing this wouldn't make any sense, since all the HTML and code is loaded anyway.
• Current CSS styles are broken for IE: links are not black, hover doesn't work

How to try proposed EditTools

Put the following into your monobook.js. This should disable the current Edittools.js script, completely erase current Edittools content, and then recreate the same content using only User:Alex_Smotrov/edittools.js (which takes approx. 8kb).

//Disable current Edittools script
if (window.removeEventListener) 
  window.removeEventListener('load', addCharSubsetMenu, false)
else if (window.detachEvent) 
  window.detachEvent('onload', addCharSubsetMenu)

//erase current Edittools content
addOnloadHook(function(){
 var old = document.getElementById('specialchars')
 if (old) old.parentNode.removeChild(old)
})

//call new Edittools script
if (wgAction == 'edit' || wgAction == 'submit')
 addOnloadHook(function loadEditTools(){
   if (window.noDefaultEdittools) return
   includePage('User:Alex_Smotrov/edittools.js')
})

Visual differences you should notice:

• select box is always in one place (left top corner)
• select box has its own tooltip "Choose character subset"
• tag <includeonly> instead of <includeonly></includeonly>
• proper links styling in IE
• "Devanagari" subset instead of "Devanāgarī" (more consistent with other English-only names)

Comparison

In addition to the existing problems described above, the new solution has the following advatages:

• Unlike Edittools, the script is cached by browser and not requested from the server every time
• The script is cutomizable. Try adding this to the code above:

var charinsertCustom = {
'Tags': '<br./> +<small> +<big> +<sup> +<sub> +<blockquote> +<poem>'
 +' +<nowiki> +<pre> +<code> +<tt>',
'Standard': '__NOTOC__ __TOC__ __FORCETOC__'
}

• The script can be completely disabled (preventing it from even loading) with noDefaultEdittools=true.

Disadvantages:

• It will be slightly more difficult for sysops to modify Edittools.
• After modifications users need to either wait or manually clear browser cache.

Transition

The transition phase is a bit tricky due to chaching issues. The proposed method is:

1. replace MediaWiki:Edittools.js with the new version
2. replace the current code in Common.js with the code above (minus "Disable current Edittools script" part)
3. wait a couple of days till most users have the new version
4. replace MediaWiki:Edittools with <!--Edit MediaWiki:Edittools.js instead-->
5. remove corresponding CSS from MediaWiki:Common.css
6. remove "erase current Edittools content" from Common.js
7. offer alternative Edittools gadget(s)

Syntax

Short overview of the syntax used inside new Edittools script:

• insertable tags/characters are divided by spaces
• a dot is used when a tag needs to have a space inside
• double space creates a visual · divider
• + is used the same way as in Extension:CharInsert
• + in the beginning is a trick for a shortet tag name: +<pre> → <pre></pre>
• 3 or more non-ASCII charaters can be written without spaces, the script divides them automatically, so ĈĉĜĝ is the same as Ĉ ĉ Ĝ ĝ

Legacy JavaScript

Hello! This script has been detected as using deprecated parameters that need to be replaced with the updated version. Examples include addOnloadHook() needs to be replaced with $(); all wgGlobalVariables need to be properly gotten with mw.config.get( 'wgGlobalVariable' ); and addPortletLink needs to be called with mw.util.addPortletLink. Please see MW:ResourceLoader/Legacy JavaScript for details. Thank you. Technical 13 (talk) 18:13, 18 January 2015 (UTC)