Page MenuHomePhabricator

Bad article layout on it.wikivoyage for some articles: "Unhandled Error: hasClass is not a function"
Closed, DeclinedPublic

Description

Recently I've noticed some layout issues, and after several hours of investigation I've understood the root of the issue: hidden category.

Let's compare two similar pages:

  1. [[voy:it:Pafo]] ...its layout it's fine ... and it has no hidden category
  2. [[voy:it:Pisa]] ...its layout it's ruined ... and it has [[Category:Città]] (inserted by the Template:Quickfooter)

When I say HTML ruined I mean:

  1. TOC of Pisa has no collassable voices
  2. The first paragraph (Introduzione) it's positioned under teh TOC instead of beside it.
  3. The globe icon shown by Template:GeoData in the top of the page, it doesn't appear

I'm adding also that I've noticed that previously the hiddencat could be shown by a dedicated link positioned next to the other visible categories, but now that link has disappeared.


Version: unspecified
Severity: major
URL: http://it.wikivoyage.org/wiki/Pisa

Details

Reference
bz48019

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 1:33 AM
bzimport set Reference to bz48019.
bzimport added a subscriber: Unknown Object (MLST).

The link to the category is: [[voy:it:Categoria:Città]]

I can't reproduce logged out nor logged in.

And neither after enabling showing of hidden categories. It's probably some gadget or user script...

I can reproduce it both from logged and from NOT logged.
I've tried both with Chrome, IE and FF.

Today I've asked to other user to check it and they have confirmed.

I would exclude the effect from gadget/script because they haven't changed by long time, and this issues has appeared just recently (around 10 days)

trying to be clearer. The problem on voy:it:Pisa can be seen as I've said above on Comment 4, while voy:it:Pafo works fine, unless I add (also just in preview mode) this category: voy:it:Categoria:Città.

I could reproduce the display/rendering problem in Firefox 18 (logged in) and Google Chrome 24 (not logged in).

Then I played a bit with Firefox' "Firebug" extension (note that loading https://it.wikivoyage.org/w/index.php?title=MediaWiki:Gadget-AutofocusRicerca.js&action=raw&ctype=text/javascript&169180 takes ages only for the Pisa article) and suddenly the Pisa article once showed correctly for me.

(In reply to comment #3 by MatmaRex)

And neither after enabling showing of hidden categories. It's probably some
gadget or user script...

Same feeling here. <img class="wmamapbutton noprint"> is just missing for the Pisa one. Pisa article has 35 JS requests in Firebug, Pafo only 32.

I don't know if you have used JS just to perform some test, anyway I take the chance to state that I think that the solution consist on working on coreload and not on JS.

I have no idea what you meant by the last comment (and what "coreload" is here), could you rephrase?

Andrea, sorry for making confusion (maybe) using not appropriate language. What I meant is that I've supposed that you have used JS only for the first analysis of the problem. I've also added that, although JS can "adjust" the layout of a page, it can't be a definitive solution, so I was hoping that someone could solve this problem patching the code that create the HTML page.
If I wasn't clear again, please, feel free to ask again.

From this link [http://it.wikivoyage.org/wiki/Speciale:PuntanoQui/Template:Quickfooter] you can find 562 pages that are affected by this layout problem.

It's a big portion of the whole it.wikivoyage site. Please prioritize the resolution of this bug, and possibly assign it to someone, because it gives a very bad image on this wiki project.

Thanks

Problem does not happen in Opera 12.15 by the way.
My uneducated guess, after giving this a try:

The code in https://bits.wikimedia.org/it.wikivoyage.org/load.php?debug=false&lang=it&modules=site&only=scripts&skin=vector&* line 48 says:

else if (hasClass(hc, 'mw-hidden-cats-hidden')) {
   var ahc = ' | <a onclick="javascript:toggleHiddenCats();" 
   id="mw-hidden-cats-link" style="cursor:pointer; color:#002BB8;" 
   title="Questa voce contiene categorie nascoste">[altre]</a>';
   document.getElementById('mw-normal-catlinks').innerHTML += ahc;

and that triggers "Unhandled Error: hasClass is not a function"

Pisa page uses "mw-hidden-cats-hidden" in

<div id="mw-hidden-catlinks" class="mw-hidden-catlinks 
mw-hidden-cats-hidden">Categoria nascosta:

while Pafo page does not use it.

That's probably where to start.

hasClass() is JQuery stuff I think?

Tpt just fixed bug 48531 by https://de.wikisource.org/w/index.php?title=MediaWiki%3ACommon.js&diff=2003222&oldid=1803972

It seems that hasClass excepts to receive only one parameter but receives two.
So likely somebody just needs to change

else if (hasClass(hc, 'mw-hidden-cats-hidden')) {

to

else if ($(hc).hasClass('mw-hidden-cats-hidden')) {

in http://it.wikivoyage.org/wiki/MediaWiki:Common.js (plus the other occurrences of "hasClass").

This should be fixed on-wiki by anybody who was sufficient rights, and confirmed here that it works.

I've just modified the following occurrences:

  • if (hasClass(node, className)) -> if ($(node).hasClass(className))
  • if (!hasClass(node, className)) -> if (!$(node).hasClass(className))
  • else if( hasClass(hc, 'mw-hidden-cats-hidden') ) -> else if( $(hc).hasClass('mw-hidden-cats-hidden') )
  • if( hasClass(hc, 'mw-hidden-cats-hidden') ) -> if( $(hc).hasClass('mw-hidden-cats-hidden') )
  • if (hasClass(NavChild, 'NavPic')) -> if ($(NavChild).hasClass('NavPic'))
  • if (hasClass(NavChild, 'NavContent')) -> if ($(NavChild).hasClass('NavContent'))
  • if (hasClass(NavChild, 'NavToggle')) -> if ($(NavChild).hasClass('NavToggle'))
  • if (hasClass(NavFrame, 'NavFrame')) -> if ($(NavFrame).hasClass('NavFrame'))

And... now it works! :-)
Thanks a lot.

Last question on this topic before closing it. Inside http://it.wikivoyage.org/wiki/MediaWiki:Common.js I've seen this declaration:
var hasClass = (function () {

var reCache = {};
return function (element, className) {
    return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
};

})();

Does it makes sense?

I am no programmer and I have no idea. Maybe ask on a Village Pump, or https://www.mediawiki.org/wiki/Project:Support_desk ?

Closing this ticket as the original problem is solved now. Glad we found out in the end (thanks to Tpt).