Wikipedia:User scripts/Guide: Difference between revisions
Content deleted Content added
Pi Delport (talk | contribs) m neatness: template:TOCright |
Pi Delport (talk | contribs) convert to source tags, few other tweaks |
||
Line 18:
== Structure ==
When your <tt>monobook.js</tt> is executed most [[HTML]] page elements do not exist yet. So most user scripts look like this:
<source lang="javascript">
//part 1
addOnloadHook(func_start); //means «execute func_start later»
//quite often it simply adds a javascript link
<a onclick="func_action()" href="#">
}
//and then there is …
//part 3 — executed when user clicks on this link
function func_action (){
}
</source>
== Basic methods ==
=== Finding elements ===
Every [[HTML]] element is a node of [[DOM]] model which allows scripts to access the element. For example on this page
<source lang="html4strict">
<form name="frmname" id="frmid">
<textarea name="txtname" id="txtid">
<input id="neighbor">
</source>
we can «find» element <tt>textarea</tt>:
* using it's <tt>id</tt>: <tt>document.'''getElementById'''('txtid')</tt>
Line 48 ⟶ 54:
* as a form element, using <tt>name</tt>: <tt style="white-space:nowrap">document.'''frmname.txtname'''</tt>
Also see [http://www.w3schools.com/dom/dom_element.asp w3schools] or [http://developer.mozilla.org/en/docs/DOM:element mozilla.org].
<!--To see all the elements on the page and their relations simply look at the page source code.-->
Line 56 ⟶ 62:
* page address
<source lang="javascript">
if (document.___URL.indexOf('action=history') != -1) {
//continue only on history pages
</source>
* <tt>wg</tt> variables; many of them have the same meaning as [[Help:Magic words|Magic words]]
<source lang="javascript">
if (wgCanonicalNamespace == 'User_talk') {
//continue only on User_talk pages
</source>
* presense of elements (only in 2nd and 3rd parts of the script)
<source lang="javascript">
function func_start () {
if (!document.editform) return; //no edit form → exit
… …
</source>
=== portlets ===
Line 81 ⟶ 92:
<br/><div style="border:1px solid gray">
<sup>''p-navigation''</sup><br/>
Main page …</div>
<!-- <br/><div style="border:1px solid gray">
<sup>''p-participation''</sup><br/> …
Line 88 ⟶ 99:
<sup>''p-search''</sup>
<div style="height:10px;width:40px;border:1px solid gray;margin-left:10px;margin-bottom:3px"> </div>
</div>
<br/><div style="border:1px solid gray">
<sup>''p-tb''</sup><br/>Upload file…
</div>
<br/><div style="border:1px solid gray">
<sup>''p-lang''</sup><br/>(interwikis)
</div>
|
<
Portlet structure:
<source lang="html4strict">
<div id="…" class="portlet">
<h5>Header</h5>
<div class="pBody">
<ul>
<li id=
<li id=
… …
</
</div>
|}
</div>
Line 114 ⟶ 127:
There is a special function in [{{SERVER}}/skins-1.5/common/wikibits.js wikibits.js] that simplifies the process of adding your own links into portlets:<br/>
<tt>'''addPortletLink''' (portlet, href, text, id, tooltip, accesskey, nextnode)</tt>
<source lang="javascript">
//Example: add the link into «toolbox» portlet
addPortletLink ('p-tb', '/wiki/Special:MyPage/monobook.js', 'My monobook.js');
</source>
Last 4 arguments are optional; all arguments are explained in the code.
<!--
* <tt>id</tt> of your new link (in case you need to access it later with <tt>getElementById</tt>)
* <tt>tooltip</tt>
* <tt>accesskey</tt>
* <tt>nextnode</tt> — if you want to insert new link before another element, in our example this could be <code>document.getElementById('t-specialpages')</code>, i.e. «Special pages» link
Line 130 ⟶ 147:
1) adding them to <tt>'''innerHTML'''</tt> of the parent element
<source lang="javascript">
//Example: using innerHTML to create a new portlet
document.getElementById('p-participation').innerHTML +=
'</div>'+
'<div id=my class=portlet>'+
Line 137 ⟶ 155:
'<div class=pBody><ul>'+
'<li><a href=\"/wiki/Special:MyPage/monobook.js\">My monobook.js</a>'+
'</ul></div></div>';
</ Line 148 ⟶ 167:
To hide an element you can set its <code>style.display</code> to <code>none</code>:
<source lang="javascript">
//Example: remove copyright warning from edit page
var el = document.getElementById('editpage-copywarn');
if (el) el.style.display = 'none';
</source>
This is easier with [[Special:Mypage/monobook.css|your monobook.css]] though: <code style="white-space:nowrap">#editpage-copywarn {display:none}</code>
Line 169 ⟶ 191:
=== Toolbar ===
Buttons above textarea are located inside <code><nowiki><div id='toolbar'></nowiki></code>.
Buttons are defined with <tt>mwEditButtons[]<tt> and <tt>mwCustomEditButtons[]</tt> arrays. Then the 2nd part of your script is called by <tt>addOnloadHook</tt>. Only after that the buttons are created by <tt>mwSetupToolbar()</tt> in wikibits.js.
So the easiest way to modify buttons is to work with these arrays:
<source lang="javascript">
//Example: modify signature button.
if (mwEditButtons.length >= 10 && mwEditButtons[9].tagOpen == '--~~~~')
mwEditButtons[9].tagOpen = ' — ~~~~';
</source>
Also see [[:en:User:MarkS/Extra_edit_buttons]].
=== Edittools ===
There is another edit panel under textarea. It's generated from [[MediaWiki:Edittools]] by [[mw:Extension:CharInsert|Extension:CharInsert]], it consists of a lot of javascript links to the <tt>insertTags()</tt>.
<source lang="javascript">
//Example: adding your own quick insert to Edittools
var specialchars = document.getElementById ('editpage-specialchars');
specialchars.innerHTML +=
"<a onclick=\"insertTags('<div>','</div>','');return false\"
href='#'><div></a>";
</source>
There is no crucial difference between toolbar and edittools, you can insert your own custom links into both.
<!--
== Misc ==
Unnamed function:
<source lang="javascript">
addOnloadHook(function(){
// … …
});
</source>
:en:Wikipedia:Keyboard_shortcuts
-->
Line 213 ⟶ 242:
=== Call from Monobook.js ===
The best and most recommended way is to insert into your <tt>monobook.js</tt>
<source lang="javascript">
document.write('<script type="text/javascript"
src="http://localhost/test.js"></script>');
</source>
Then run any [[webserver]] on your computer and create <tt>test.js</tt> file in the appropriate folder. The code inside this file will be executed as if it was inside <tt>monobook.js</tt>
Line 225 ⟶ 258:
* in [[FireFox]] with [[Greasemonkey]]
* in [[Opera]] with [http://www.opera.com/support/tutorials/userjs/using/ User JavaScript]
* in [[Internet Explorer]] 6 (and maybe in some other browsers) with [[bookmarklet]]
<source lang="javascript">
javascript: var s = document.createElement('script');
s.src = 'file://C:/myscript.js';
document.getElementsByTagName('head')[0].appendChild(s);void 0
</source>
However all these methods execute your user script at slightly different time than <tt>monobook.js</tt>, so you might have to do some temporary code modifications during debugging.
Line 236 ⟶ 272:
Or you can use [[bookmarklet]] «JavaScript Shell». It opens new browser window where you can paste or type your code and run it in the context of the current page.
* [http://www.squarefree.com/shell/ JavaScript Shell for FireFox and Opera]
* [http://blog.monstuff.com/archives/000287.html JavaScript Shell for IE]
Line 243 ⟶ 279:
== Software ==
Any text editor will do. If you plan to use non-ascii characters in string, your text editor should support [[UTF-8]].
[[Notepad++]] is recommended, since it can:
| |||