-----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
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... [2] https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader... [3] https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.hook-event-wiki... [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@wiwi.hu-berlin.dewrote:
-----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
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1
Hi,
thanks a lot for your help/present. It took me some time but I got it working following your suggestion using mw.hook( 'wikipage.content' ) .
However, the next problem arises: Since in MediaWikis default theme the slider is not well visible (at least for my old eyes), so I decided to use the sunny theme of jquery. Everything works well but at some time I have to open a dialog box. The fonts, colors etc. are okay, but the background images in the dialog are always taken from the mediawiki theme and not from the sunny theme. Which means for the dialog box title that the font color is white on a nearly white background image :(
Even when I follow the suggestion of http://filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_pag... and add via javascript for each div, span and button element in the dialog the class "sunny" explicitly (that is how I named the class for my custom theme) the background images are taken from the mediawiki theme.
Any suggestions or ideas?
Thanks a lot
Sigbert
Am 20.12.2013 10:10, schrieb Krinkle:
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...
[2]
https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader...
[3]
https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.hook-event-wiki...
[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@wiwi.hu-berlin.dewrote:
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
_______________________________________________ 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
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1
Hi,
I think the problem is a CSS problem. In the mediawiki theme is a rule "body ..." which simply supersedes the jquery theme rule. However, this can be solved by editing my custom jquery theme CSS.
Sigbert
Am 22.01.2014 09:52, schrieb Sigbert Klinke:
Hi,
thanks a lot for your help/present. It took me some time but I got it working following your suggestion using mw.hook( 'wikipage.content' ) .
However, the next problem arises: Since in MediaWikis default theme the slider is not well visible (at least for my old eyes), so I decided to use the sunny theme of jquery. Everything works well but at some time I have to open a dialog box. The fonts, colors etc. are okay, but the background images in the dialog are always taken from the mediawiki theme and not from the sunny theme. Which means for the dialog box title that the font color is white on a nearly white background image :(
Even when I follow the suggestion of http://filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_pag...
and add via javascript for each div, span and button element in the
dialog the class "sunny" explicitly (that is how I named the class for my custom theme) the background images are taken from the mediawiki theme.
Any suggestions or ideas?
Thanks a lot
Sigbert
Am 20.12.2013 10:10, schrieb Krinkle:
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...
[2]
https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader...
[3]
https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.hook-event-wiki...
[4] https://api.jquery.com/ready/
On Tue, Dec 17, 2013 at 10:24 AM, Sigbert Klinke sigbert@wiwi.hu-berlin.dewrote:
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
_______________________________________________ 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
_______________________________________________ MediaWiki-l mailing list MediaWiki-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
mediawiki-l@lists.wikimedia.org