-----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_page/ > > 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#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 >> <[email protected]>wrote: > >> 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 [email protected] >>> https://lists.wikimedia.org/mailman/listinfo/mediawiki-l >>> >> _______________________________________________ MediaWiki-l >> mailing list [email protected] >> https://lists.wikimedia.org/mailman/listinfo/mediawiki-l > > > > _______________________________________________ MediaWiki-l mailing > list [email protected] > https://lists.wikimedia.org/mailman/listinfo/mediawiki-l > -----BEGIN PGP SIGNATURE----- Version: GnuPG v1.4.11 (GNU/Linux) iQEcBAEBAgAGBQJS4M8WAAoJEBgNLCKL5DEW38MIAMkoFg9lfzS7sxkVth8amYdc Gxm6UEkCg6bHqopg/pTKeeGYUC+To7dXoyB5Hmz5cRwa6yX2Z1UxTdXrx3jpO7ro WROCDd136WxTz+Lo8OHn+MvJDobRBN283oGy4I9ZY4ka1XEKplSFL8HDlT9v8vBR futrWkaPOmn4Ns0AYwnlfcP/ZFPd0Q3NrkVv9RCF4rDEMni657d1XMxceZ48imcv OwvOjxl59nFVfT+Kp3HYoHfkFIEk95M6i597IVbrkjsHTsdc3b9vVtlYr6eMQmDo 2IyIGtkRYj1nF1DRKwPm5WZYwc49/83xYgGkZ8A+qRLsGEOjeNUg7BEKt2Hfk08= =PEpP -----END PGP SIGNATURE----- _______________________________________________ MediaWiki-l mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
