Hi Sigbert,
Depending on the complexity of the javascript involved, I'd recommend one
of these two approaches.
== More future proof, scalable ==
Put the ` $( '#slider' ).slider() ` code in a separate javascript file
(e.g. extensions/Rslider/modules/ext.rslider.js), register that as a
ResourceLoader module[1] named 'ext.rslider', with dependency on
'jquery.ui.slider'.
Then from your parser tag callback, don't add the <script> and <div>.
Instead you'd add only the <div>, and then call `addModules(
'ext.rslider'
); `. [2]
Since it is now in a separate file, be sure to hook into $(document).ready
instead of directly querying ` $( '.mw-Rslider-tag' ) ` as the element
might not exist yet. Or better yet, use mw.hook( 'wikipage.content' ) [3]
instead of $(document).ready [4], that way your tag will also work in live
preview and other environments that reload wikipage content without a
complete document refresh.
You'd end up with (pseudo-code):
Rslider.php:
modules['ext.rslider'] => {
scripts: 'modules/ext.rslider.js'
dependencies: 'jquery.ui.slider'
localBasePath: ___DIR__
remoteExtPath: 'Rslider'
}
modules/ext.rslider.js:
mw.hook( 'wikipage.content', function ( $content ) {
$content.find( '.mw-Rslider-tag' ).slider();
} );
Rslider.hooks.php#onParserHookRslider:
$parserOutput->addModules( 'ext.rslider' );
return '<div class="mw-rslider-tag"></div>';
== Simple way ==
If you're absolute sure that there will only ever be 1 instance of
<Rslider> on the page, then you could go with the inline <script> approach
without having any ResourceLoader modules, however in that case keep the
following three things mind (one of these is why your code didn't work):
* Put the <script> tag after the <div> not before. Otherwise the element
will not yet exist when $() tries to query it.
* The mw.loader.using() statement you have is correct, don't remove it as
you'll need it. jquery.ui might happen to be on the page already, but this
is by no means a guarantee (it'd be pure luck, depending on whether some
other extension requests it, it is not loaded by default). mw.loader takes
care[5] never to request the same module twice, so don't worry about using
it twice.
* Wrap your inline <script> contents in ` if ( window.mw ) { .. }` so that
there won't be a fatal javascript exception on the page if MediaWiki's
startup module decides to serve the user a lightweight page without
mediawiki and jquery modules (e.g. for older browsers).
You'd end up with:
Rslider.hooks.php#onParserHookRslider:
$html = '<div class="mw-rslider-tag"></div>';
// This creates <script>if(window.mw){ ... }</script> and automatically
escapes any html
// or xml characters inside the script if needed for this page.
$html .= Html::inlineScript( ResourceLoader::makeLoaderConditionalScript(
'mw.loader.using( \'jquery.ui.slider\', function () {
$(\'.mw-rslider-tag\').slider();
});'
));
return $html;
-- Krinkle
PS: This has been an early Christmas present. Happy Holidays!
[1]
https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoade…
[2]
https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoade…
[3]
https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.hook-event-wik…
[4]
https://api.jquery.com/ready/
[5]
https://www.mediawiki.org/wiki/ResourceLoader/Features
On Tue, Dec 17, 2013 at 10:24 AM, Sigbert Klinke
<sigbert(a)wiwi.hu-berlin.de>wrote;wrote:
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1
Hi,
in my extension I would like to use the slider from jquery.ui .
Therefore I created a tag <Rslider /> to show the slider. It translate
in a wiki page to
<script>mw.loader.using( 'jquery.ui.slider', function() { $(
"#slider" ).slider(); });</script><div
id="slider"></div>
As I understand I do not need to use ResourceLoader at all since I
want to use just a standard element of jquery.ui .
However, the slider does not show up which means I'am doing something
wrong :(
Thanks for any help
Sigbert
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)
Comment: Using GnuPG with Thunderbird -
http://www.enigmail.net/
iQEcBAEBAgAGBQJSsBg5AAoJEBgNLCKL5DEWcksIAK6ck38aRTFKcZzoKUc3gtdk
MlLBsbgbp4I3CyXxb8Q8eBBHl/JB5WJVB6G3OQcjKOKiKoH9gm9G8RWxKsWymtzh
Tywr3N/vflyIGzRccAu2IZimvkzSOo0xIhIsHcJHhCqYewZfg9cWyiOyGY2gX1VO
vDgoQrH7QCH8L2wKeq69eKGywDMfVdSPZx/2WfKQG2UXgoD+6M2BBXjLiw1M9ha4
N0d9Vd0+UVaVUhZ7UBwgCDe716tnsTkVQ8IpdaDUG/YKkxF394+c5dqhLC2ixhNz
ZlWaV6QufqTBn9uFVKahFy/6EjQoU+gFCtJD2ID7XmnA1TYZTCXR71yZh6wjyzk=
=1xLn
-----END PGP SIGNATURE-----
_______________________________________________
MediaWiki-l mailing list
MediaWiki-l(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l