MediaWiki talk:Common.js/Archive 5: Difference between revisions

Revision as of 00:35, 4 May 2007

Revision as of 00:50, 11 May 2007

Line 10:

: Admins tend to tweak the message several times while it is displayed so that approach would likely not be very effective. Adding a unique id/class for each different message might work, though. —''[[User:Ruud Koot|Ruud]]'' 16:37, 31 March 2007 (UTC)

<span id="63301303375" />

== Query strings ==

{{tl|editprotected}}

I have made a querystring function in my morebits.js, wonder if you think it should be included here? _{→[[User:AzaToth|<span style="color:#773">Aza</span>]][[User_talk:AzaToth|<span style="color:#359">Toth</span>]]} 19:45, 1 April 2007 (UTC)

{{hidden|Code|

<pre>

/**

* Maps the querystring to an object

*

* Functions:

*

* QueryString.exists(key)

* returns true if the particular key is set

* QueryString.get(key)

* returns the value associated to the key

* QueryString.equals(key, value)

* returns true if the value associated with given key equals given value

* QueryString.toString()

* returns the query string as a string

* QueryString.create( hash )

* creates an querystring and encodes strings via encodeURIComponent and joins arrays with |

*

* In static context, the value of ___location.search.substring(1), else the value given to the constructor is going to be used. The mapped hash is saved in the object.

*

* Example:

*

* var value = QueryString.get('key');

* var obj = new QueryString('foo=bar&baz=quux');

* value = obj.get('foo');

*/

function QueryString(qString) {

this.string = qString;

this.params = {};

if( qString.length == 0 ) {

return;

}

qString.replace(/\+/, ' ');

var args = qString.split('&');

for( var i in args ) {

if( typeof( args[i] ) != 'string' ) {

continue;

}

var pair = args[i].split( '=' );

var key = decodeURIComponent( pair[0] ), value = key;

if( pair.length == 2 ) {

value = decodeURIComponent( pair[1] );

}

this.params[key] = value;

}

}

QueryString.static = null;

QueryString.staticInit = function() {

if( QueryString.static == null ) {

QueryString.static = new QueryString(___location.search.substring(1));

}

}

QueryString.get = function(key) {

QueryString.staticInit();

return QueryString.static.get(key);

};

QueryString.prototype.get = function(key) {

return this.params[key] ? this.params[key] : null;

};

QueryString.exists = function(key) {

QueryString.staticInit();

return QueryString.static.exists(key);

}

QueryString.prototype.exists = function(key) {

return this.params[key] ? true : false;

}

QueryString.equals = function(key, value) {

QueryString.staticInit();

return QueryString.static.equals(key, value);

}

QueryString.prototype.equals = function(key, value) {

return this.params[key] == value ? true : false;

}

QueryString.toString = function() {

QueryString.staticInit();

return QueryString.static.toString();

}

QueryString.prototype.toString = function() {

return this.string ? this.string : null;

}

QueryString.create = function( arr ) {

var resarr = Array();

for( var i in arr ) {

if( typeof arr[i] == 'object' ){

var v = Array();

for(var j in arr[i] ) {

v[j] = encodeURIComponent( arr[i][j] );

}

resarr.push( encodeURIComponent( i ) + '=' + v.join('|') );

} else {

resarr.push( encodeURIComponent( i ) + '=' + encodeURIComponent( arr[i] ) );

}

}

return resarr.join('&');

}

QueryString.prototype.create = QueryString.create;

</pre>

}}

Looks great, but do we really need it? It's long, and each load is an unnecessary drain on the servers if its relatively unused. —<span style="color: red;">[[User:Mets501|M<small>ETS</small>501]] ([[User talk:Mets501|talk]])</span> 20:03, 1 April 2007 (UTC)

:I don't know how much extra load it will generate to just load the script, but it won't execute anything unless used. _{→[[User:AzaToth|<span style="color:#773">Aza</span>]][[User_talk:AzaToth|<span style="color:#359">Toth</span>]]} 20:05, 1 April 2007 (UTC)

::I was referring to the load from loading it. It's 2,837 bytes, which means over millions of loads, it starts to add up. See [https://wikitech.leuksman.com/view/Squid_bandwidth_breakdown] for the server breakdown: css and js eat almost as much bandwith as pure article views. —<span style="color: red;">[[User:Mets501|M<small>ETS</small>501]] ([[User talk:Mets501|talk]])</span> 20:10, 1 April 2007 (UTC)

::: That are only the static CSS and JS files, not ones editable on-wiki. No idea if those significantly contribute to the bandwidth usage as well? —''[[User:Ruud Koot|Ruud]]'' 21:02, 1 April 2007 (UTC)

What does it do? At first glance it doesn't seem to have any use outside of other user-scipts (which can just as easily import it themselves.) —''[[User:Ruud Koot|Ruud]]'' 21:02, 1 April 2007 (UTC)

:Also, does <tt>Common.js</tt> really need [[Object-oriented programming|OOP]] techniques? The smaller is the better, imho — [[User:Alex Smotrov|Alex Smotrov]] 21:29, 1 April 2007 (UTC)

::That's just a minor thing, the idea first is to only parse the query string once. second point is to use correct encoding, as some has been using wrong function for that (window.escape()), and to do it transparent. _{→[[User:AzaToth|<span style="color:#773">Aza</span>]][[User_talk:AzaToth|<span style="color:#359">Toth</span>]]} 21:34, 1 April 2007 (UTC)

:::For something unlikely to be used often, wouldn't it be just as well to put the burden on the client side (extra parsing) rather than on the servers (extra bandwidth for longer code)? See below (obviously just an example). --[[User:Splarka|Splarka]] ([[User_talk:Splarka|rant]]) 07:18, 2 April 2007 (UTC)

{{hidden|Code|<pre>

function queryString(p) {

var re = RegExp('[&?]' + p + '=([^&]*)');

var matches;

if (matches = re.exec(document.___location)) {

try {

return decodeURI(matches[1]);

} catch (e) {

}

}

return null;

}

</pre>

}}

The above is basically from Lupin's popups, no? Or somewhere else before that, given the nature of much javascript code. Now, my opinion really doesn't matter here (not really that professional a javascript coder), but it might be useful to have one standardized function related to query strings, since a lot of scripts need them, and said scripts have their own query functions. So if those scripts are used together, you have (possibly) three or four query string functions altogether, which doesn't strike me as that efficient. Creating and getting query strings sounds useful; the rest, not as much. [[User:Gracenotes|<font color="#960">Grace</font><font color="#000">notes</font>]]^{[[User talk:Gracenotes|<font color="#960">T</font>]]} § 14:29, 2 April 2007 (UTC)

As [[WP:TW]] is probably the only script as of yet using QueryString (by some freak coincident), the number of calls to QueryString as of yet is 59 times. _{→[[User:AzaToth|<span style="color:#773">Aza</span>]][[User_talk:AzaToth|<span style="color:#359">Toth</span>]]} 14:45, 2 April 2007 (UTC)

:I have added an {{tl|editprotected}} to the top of the page. So, which parts of this are we going to implement? All of it? Static? Object? Certain methods, and not others? [[User:Gracenotes|<font color="#960">Grace</font><font color="#000">notes</font>]]^{[[User talk:Gracenotes|<font color="#960">T</font>]]} § 19:37, 4 April 2007 (UTC)

::I think this is the sort of thing that is more appropriate for [[WP:US]]. Maybe I'm missing the point, but I don't see why this needs to be in the site-wide js, unless it is likely to be used by a general reader or editor. [[User:CMummert|CMummert]] · <small>[[User talk:CMummert|talk]]</small> 16:55, 5 April 2007 (UTC)

::: I agree with this. —''[[User:Ruud Koot|Ruud]]'' 20:41, 5 April 2007 (UTC)

:::: Sorry, I was away a bit. My only problem with this is that I need query string scripts, so I'll have to include my own. And if someone else needs to include them, they'll have to include their own. And all these functions for doing the same thing need to load, rather than having one standardized function. No matter, eh. [[User:Gracenotes|<font color="#960">Grace</font><font color="#000">notes</font>]]^{[[User talk:Gracenotes|<font color="#960">T</font>]]} § 22:53, 7 April 2007 (UTC)

::::: No, <code>importScrtipt</code> will only load a script once, even if it is included multiple times. —''[[User:Ruud Koot|Ruud]]'' 11:17, 8 April 2007 (UTC)

:::::: Do you know of a library that has this code? [[User:Gracenotes|<font color="#960">Grace</font><font color="#000">notes</font>]]^{[[User talk:Gracenotes|<font color="#960">T</font>]]} § 19:24, 8 April 2007 (UTC)

::::::: Uhh... AzaToth just wrote the code? He now only has to locate it somewhere (in his userspace or at [[WP:US]] for example) in list it at [[WP:US]]. —''[[User:Ruud Koot|Ruud]]'' 19:46, 8 April 2007 (UTC)

::::::: Yeah, it doesn't exist now. [[User:Gracenotes|<font color="#960">Grace</font><font color="#000">notes</font>]]^{[[User talk:Gracenotes|<font color="#960">T</font>]]} § 22:45, 8 April 2007 (UTC)

As to show you why it's so "complicated", I'm using it for example to create things like this (though I'm usually tries to make it asyncronus, it's syncrone here for the ease of typing):

<pre>

var query = {

'title': 'User talk:' + user,

'action': 'submit'

};

xmlhttp = sajax_init_object();

xmlhttp.overrideMimeType('text/xml');

xmlhttp.open( 'GET' , wgServer + wgScriptPath + '/index.php?' + QueryString.create( query ), false);

xmlhttp.send( null );

form = xmlhttp.responseXML.getElementById('editform');

var postData = {

'wpMinoredit': form.wpMinoredit.checked,

'wpWatchthis': form.wpWatchthis.checked,

'wpStarttime': form.wpStarttime.value,

'wpEdittime': form.wpEdittime.value,

'wpAutoSummary': form.wpAutoSummary.value,

'wpEditToken': form.wpEditToken.value,

'wpSummary': summary,

'wpTextbox1': text

};

xmlhttp = sajax_init_object();

xmlhttp.overrideMimeType('text/xml');

xmlhttp.open( 'POST' , wgServer + wgScriptPath + '/index.php?' + QueryString.create( query ), false);

xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

xmlhttp.send( QueryString.create( postData ) );

</pre>

Another example could be to check if we are "editing" the page:

<pre>

var isEditing = QueryString.equals('action', 'edit');

</pre>

A third common example of you want to do, is when you want to grab data from a link:

<pre>

var query = new QueryString( node.getAttribute('href').split('?',2) );

var rev = query.get('oldid');

</pre>

This is just simple examples, and I made it extensive, so it would be easy to parse/create query strings. one good thing is that it takes care of encoding automatically, for example

QueryString.create({'foo bar':['a','123!"#åäö']})

becomes

"foo%20bar=a|123!%22%23%C3%A5%C3%A4%C3%B6"

vice versa_{→[[User:AzaToth|<span style="color:#773">Aza</span>]][[User_talk:AzaToth|<span style="color:#359">Toth</span>]]} 23:32, 7 April 2007 (UTC)

:I think that it looks like a very useful script for [[WP:US]]. I don't see how it would help to have it in the sitewide monobook.js, since it seems that the only people who will use it will do so from scripts they are already adding to their personal monobook.js. If there were some function coded into a standard template that required it, that would be an argument in favor. Of course there is also the magic word <nowiki>{{urlencode}}</nowiki> built into mediawiki. [[User:CMummert|CMummert]] · <small>[[User talk:CMummert|talk]]</small> 23:22, 8 April 2007 (UTC)