Masonry intermittently does not arrange blocks upon page load

[darenwelsh]

When loading a MediaWiki page that uses MasonryMainPage, sometimes masonry will arrange the blocks and sometimes it will not. It is not clear if there is a conflict with div IDs, CSS, or something within the masonry or imagesLoaded scripts.

[darenwelsh]

I have not seen this issue in a long time. Since we just merged a new way of loading (#5) and that tested successfully, I think this is okay to close.

[JosefMikkelsen]

I'm seeing an issue, it's possible this is the same one.

With MW 1.27, I'm getting the blocks arranged in a vertical line, they aren't making use of the horizontal space. Is that the same thing you were seeing?

[darenwelsh]

Sorry I didn't notice your comment until just now. I think you're describing the same behavior. Is it consistent or intermittent? Any console or debug messages?

[JosefMikkelsen]

It's 100% consistent, which is convenient :)

It looks like this:

The console does indeed throw an exception:

TypeError: EventEmitter is not a constructor
http://REDACTED_HOST/load.php?debug=false&lang=en&modules=ext.jquery.blockUI%7Cext.jquery.jqplot.core%2Cpie%7Cext.jquery.migration.browser%7Cext.masonrymainpage.base%7Cext.srf.jqplot.chart%2Cpie%2Cthemes%7Cjquery.accessKeyLabel%2Casync%2CbyteLength%2Cclient%2CtabIndex%2Cthrottle-debounce%7Cmediawiki.RegExp%2CTitle%2CUri%2Cnotify%2Ctemplate%2Cutil%7Cmediawiki.page.startup%7Cmediawiki.template.regexp%7Cskins.vector.js&skin=vector&version=0d2cf39c442e
Line 227

Screenshot from the console:

I can't see much in the apache logs or mw debug log that might appear relevant. Happy as ever to provide any extras info. :)

[gadgetmg]

I'm seeing this exact behavior as well. I have no idea if this is useful (I know very little about JavaScript), but I got this out of Chrome:
TypeError: EventEmitter is not a constructor at factory (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=ext.masonrymainpage.base%7Cext.visualEditor.desktopArticleTarget.init%7Cext.visualEditor.supportCheck%2Ctrack%2Cve%7Cjquery.accessKeyLabel%2CbyteLength%2Cclient%2Ccookie%2CtabIndex%2Cthrottle-debounce%7Cmediawiki.RegExp%2CTitle%2CUri%2Capi%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cnotify%2Ctemplate%2Cuser%2Cutil%7Cmediawiki.action.view.postEdit%7Cmediawiki.api.options%2Cuser%7Cmediawiki.language.data%2Cinit%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.startup%7Cmediawiki.template.regexp%7Cskins.vector.js%7Cuser.defaults&skin=vector&version=c8d4c4c19dfb:7:969) at $ (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=ext.masonrymainpage.base%7Cext.visualEditor.desktopArticleTarget.init%7Cext.visualEditor.supportCheck%2Ctrack%2Cve%7Cjquery.accessKeyLabel%2CbyteLength%2Cclient%2Ccookie%2CtabIndex%2Cthrottle-debounce%7Cmediawiki.RegExp%2CTitle%2CUri%2Capi%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cnotify%2Ctemplate%2Cuser%2Cutil%7Cmediawiki.action.view.postEdit%7Cmediawiki.api.options%2Cuser%7Cmediawiki.language.data%2Cinit%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.startup%7Cmediawiki.template.regexp%7Cskins.vector.js%7Cuser.defaults&skin=vector&version=c8d4c4c19dfb:6:890) at mw.loader.implement.css (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=ext.masonrymainpage.base%7Cext.visualEditor.desktopArticleTarget.init%7Cext.visualEditor.supportCheck%2Ctrack%2Cve%7Cjquery.accessKeyLabel%2CbyteLength%2Cclient%2Ccookie%2CtabIndex%2Cthrottle-debounce%7Cmediawiki.RegExp%2CTitle%2CUri%2Capi%2Ccldr%2Ccookie%2CjqueryMsg%2Clanguage%2Cnotify%2Ctemplate%2Cuser%2Cutil%7Cmediawiki.action.view.postEdit%7Cmediawiki.api.options%2Cuser%7Cmediawiki.language.data%2Cinit%7Cmediawiki.libs.pluralruleparser%7Cmediawiki.page.startup%7Cmediawiki.template.regexp%7Cskins.vector.js%7Cuser.defaults&skin=vector&version=c8d4c4c19dfb:6:944) at Object.<anonymous> (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:163:74) at fire (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:45:122) at Object.add [as done] (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:45:656) at Object.always (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:46:874) at runScript (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:162:955) at checkCssHandles (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:163:774) at Object.mw.loader.cssHandle (http://REDACTED_HOST/load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=vector&version=HnMmScYJ:163:904)

[bryandamon]

I'm now seeing this behavior as well. The blocks always are arranged in a vertical line, but intermittently the blocks lose their formatting. I recently upgraded my wiki from 1.26 to 1.28.2.

Vertical Blocks

---

Vertical Blocks and loss of formatting

---

[jamesmontalvo3]

@bryandamon: Have you upgraded MasonryMainPage? What version are you on? If you're using git you can do cd /path/to/mediawiki/extensions/MasonryMainPage and then git rev-parse HEAD and report the An upgrade was required when jumping from MW1.25 to 1.27. I have not tested on 1.28 specifically.

[JosefMikkelsen]

I still experience this issue. MW 1.27.1 here, and MasonryMainPage is at commit 9837244. I've checked it in several browsers, same issue. The js console complains about:

ReferenceError: imagesLoaded is not defined
http://wiki/load.php?debug=false&lang=en&modules=ext.jquery.blockUI%7Cext.jquery.jqplot.core%2Cpie%7Cext.jquery.migration.browser%7Cext.masonrymainpage.base%7Cext.srf.jqplot.chart%2Cpie%2Cthemes%7Cjquery.accessKeyLabel%2Casync%2CbyteLength%2Cclient%2CtabIndex%2Cthrottle-debounce%7Cmediawiki.RegExp%2CTitle%2CUri%2Cnotify%2Ctemplate%2Cutil%7Cmediawiki.page.startup%7Cmediawiki.template.regexp%7Cskins.vector.js&skin=vector&version=2dcda0e27f37
Line 221

I noticed the (new) notice in the MasonryMainPage README to install the ImagesLoaded library; I dropped that in my extensions folder. Wasn't entirely sure how to load it so I dropped a require_once "$IP/extensions/ImagesLoaded/ImagesLoaded.class.php"; in my LocalSettings.php` like any reckless idiot would do (even though I'm pretty sure that isn't how it's loaded) and the blocks are still stacking vertically; no joy. Is that ImagesLoaded library required? and is it something we're meant to use composer to install?

[jamesmontalvo3]

Not composer, but need to use the new MediaWiki method of loading extensions, e.g.

wfLoadExtensions( 'ImagesLoaded' );

Sorry this isn't listed in the docs. I've been trying to get several things updated to current MediaWiki versions and I just created an issue against Extension:ImagesLoaded to remember to circle back and add docs. Pull requests welcome. :)

Note that MasonryMainPage can be loaded in the above method, as well, but does not require it.

[jamesmontalvo3]

For more info on extension registration: https://www.mediawiki.org/wiki/Manual:Extension_registration