StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The <a href="http://trac.wikia-code.com/browser/wikia/trunk/extensions/wikia/TabView/TabView.php" rel="nofollow">TabView extension</a> you linked to seems to depend on the <a href="http://dev.wikia.com/wiki/Nirvana" rel="nofollow">Wikia Nirvana framework</a>, and specifically on the <a href="http://trac.wikia-code.com/browser/wikia/trunk/includes/wikia/nirvana/WikiaSuperFactory.class.php" rel="nofollow">WikiaSuperFactory class</a> (which the class "F" is a dummy subclass of). Through the framework, it instantiates a <a href="http://trac.wikia-code.com/browser/wikia/trunk/extensions/wikia/JSSnippets/JSSnippets.class.php" rel="nofollow">JSSnippets</a> object from the <a href="http://trac.wikia-code.com/browser/wikia/trunk/extensions/wikia/JSSnippets" rel="nofollow">Wikia JSSnippets extension</a>.</p> <p>In short, the JS side of that extension seems to make use of a whole bunch of Wikia-specific code. You could try adding all the dependencies to your wiki, but it might be easier to just replicate the functionality using standard MediaWiki features.</p> <hr> <p>Specifically, looking at the JSSnippets class documentation (see links above), what the <code>addToStack()</code> call does is tell the browser to asynchronously load the two linked JS files and then, once the files have loaded, call the JS function <code>TabView.init()</code> with the named arguments <code>id</code> and <code>selected</code> (passed as properties of a generic object, like in JSON).</p> <p>It shouldn't be too hard to do the same thing with the standard <a href="http://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader" rel="nofollow">MediaWiki ResourceLoader</a>. First, we need to define a ResourceLoader module that loads the scripts we need (warning: untested code!):</p> <pre class="lang-php prettyprint-override"><code>$wgResourceModules['ext.TabView'] = array( 'scripts' => array( 'js/mustache.js', 'js/TabView.js' ), 'localBasePath' => __DIR__, 'remoteExtPath' => 'TabView', ); </code></pre> <p>Insert this somewhere near the top of the extension code, outside the function definitions. You'll also need to copy the <a href="http://trac.wikia-code.com/browser/wikia/trunk/resources/wikia/libraries/mustache/mustache.js" rel="nofollow">mustache.js library</a> to the <code>TabView/js</code> subdirectory.</p> <p>(I <em>believe</em> loading the two JS files together like this should work, even with <a href="http://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_%28developers%29#Troubleshooting_and_tips" rel="nofollow">ResourceLoader's scoping peculiarities</a>. Of course, if we had several extensions that used the mustache.js library, it would be more efficient and elegant to make it a separate module by itself, but then it would need a glue script that did something like <code>window.Mustache = Mustache;</code>.)</p> <p>In the hook function, we then need to tell MediaWiki to load this module and to call the <code>TabView.init()</code> function, like this:</p> <pre class="lang-php prettyprint-override"><code>$opts = array( 'id' => "flytabs_$id", 'selected' => $optionsIndex ); $opts = json_encode( $opts ); $js = "mw.loader.using( 'ext.TabView', function () { TabView.init($opts) } );"; $out .= "<script type='text/javascript'>$js</script>"; </code></pre> <p>Ps. The <a href="http://trac.wikia-code.com/browser/wikia/trunk/extensions/wikia/TabView/js/TabView.js" rel="nofollow">TabView.js file</a> says that it "[d]epends on skins/oasis/js/tab.js". I couldn't find any file with that name in Wikia's repo, but there <em>is</em> a <a href="http://trac.wikia-code.com/browser/wikia/trunk/skins/oasis/js/tabs.js" rel="nofollow">skins/oasis/js/tab<b>s</b>.js</a> which you <em>may</em> also need to copy into the <code>TabView/js</code> subdirectory and add to the module definition alongside mustache.js.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload