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_ResourceLoader#Registering
[2]
https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader#Server-side
[3]
https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.hook-event-wikipage_content
[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
<sigb...@wiwi.hu-berlin.de>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@lists.wikimedia.org
> https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
>
_______________________________________________
MediaWiki-l mailing list
MediaWiki-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
