Topic on Extension talk:CategoryTree

Fix for making CategoryTree work in sidebar again with MW 1.24.1 and Vector skin

5
Bhuber (talkcontribs)

Hi all, I used to offer a CategoryTree in my MediaWiki sidebar with MW 1.20.4. Everything worked well, but since my update to MW 1.24.1 all appropriate releases of CategoryTree stopped working in the sidebar. This includes the REL1_24 version but also the development master version. The problem is, that the expandable symbols are not shown at all and no click handle is registered. Interestingly CategoryTree works perfect as part of a WikiPage in parallel to not work at all in the sidebar.

I figured out that the way how the ext.CategoryTree.js works is that it uses a mw.hook to access the WikiPage content and to make CategoryTree working there. But obviously the sidebar is not part of the content which is access by this approach. I tested it by just removing the whole content in the ext.CategoryTree.js and literally just the inner section of my page disappeared but the sidebar was still there together with some other navigation content. So I am looking for a fix to have ext.CategroyTree.js to access the whole content including the sidebar.

I am no MediaWiki nor js nor php specialist, but after looking into the vector skin, I figured out how the skin accesses the whole content. I decided to give this appraoch a try, so I modified the beginning of ext.CategoryTree.js (which is located in extensions/CategoryTree/modules by the way) to make it look like this:

//( function ( $, mw ) {
//
//   mw.hook( 'wikipage.content' ).add( function ( $content ) {
jQuery( function ( $ ) {
               /**
                * Sets display inline to tree toggle
                */
               function showToggles() {

and the end of ext.CategoryTree.js to look like this;

        // Register click events and show toggle buttons
        $( '.CategoryTreeToggle' ).click( handleNode );
        showToggles();
   } );
 
//}( jQuery, mediaWiki ) );

From my understanding this gives the ext.CategoryTree.js access to the whole page content. So good news is, that everything works well after this modification, CategoryTree in the sidebar works like expected.

So now I have a question to all MediaWiki specialists: is this a valid approach to solve the problem? Or does it cause tremendous load to the system or break system concepts?

David6243 (talkcontribs)

I think a crucial change is missing from the js code you posted, something like:

jQuery( function ( $ ) { var $fullcontent = $(this);

And later, access fullcontent instead of content, e.g.

function showToggles() { $fullcontent.find( 'span.CategoryTreeToggle' ).css( 'display', 'inline' ); }

Anyway, the hints about the sidebar not being part of the content and looking at vector.js for reference were very helpful to me, and I can now show a category tree anywhere in the skin. Thanks!

As for your question: Don't know. I haven't noticed any problems.

Also, sorry about editing the subject of your post. Initially, I couldn't respond because of this:

This page can only be edited by users with the autoconfirmed right because it matches the following title blacklist entry: .*Make.*cat.* autoconfirmed

By now, my account is confirmed. Changing the subject hadn't helped either.

Bhuber (talkcontribs)

David,

you are absolutely right, for some weird reason I missed to add two really important changes...

Generally speaking, you want to replace any use of the term $content.find by a single $, which refers to the whole DOM from my understanding. This needs to happen two time in the ext.categoryTree.js:

               function showToggles() {
                       $content.find( 'span.CategoryTreeToggle' ).css( 'display', 'inline' );
               }

needs to be modified to look like this:

               function showToggles() {
                       $( 'span.CategoryTreeToggle' ).css( 'display', 'inline' );
               }

and

               // Register click events and show toggle buttons
               $content.find( '.CategoryTreeToggle' ).click( handleNode );
               showToggles();

needs to be modified to look like this:

               // Register click events and show toggle buttons
               $( '.CategoryTreeToggle' ).click( handleNode );
               showToggles();

So there is absolutely no need to search or build another $content var, obviously you can work on the whole DOM like the skin sample does.

PS: There is absolutely no need to excuse for making my post usable to you and others by doing whatever is required...

Ken Roy (talkcontribs)
Thanks for providing this fix, which now allows the portlet to work correctly in the sidebar
Wonder how long it will take to get incorporated in the CategoryTree extension, since even 1.29 is still broken and their troubleshooting hints do not work.
85.84.143.206 (talkcontribs)

Brilliant !! Many Thanks !

Reply to "Fix for making CategoryTree work in sidebar again with MW 1.24.1 and Vector skin"