-----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_pa…
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!
[2]
[3]
[4]
https://api.jquery.com/ready/
On Tue, Dec 17, 2013 at 10:24 AM, Sigbert Klinke
<sigbert(a)wiwi.hu-berlin.de>wrote;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 MediaWiki-l(a)lists.wikimedia.org
>>
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
>
>
_______________________________________________ MediaWiki-l
> mailing list MediaWiki-l(a)lists.wikimedia.org
>
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
_______________________________________________ MediaWiki-l mailing
list MediaWiki-l(a)lists.wikimedia.org
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-----