I’ve made significant progress with the first Swatch template. However, it’s a little way off being completely ready as there are a number of js functions that need to be completed (or in some cases, rewritten) first before the alpha phase of testing can start.
In addition, there’s the rapid succession of changes and updates to the bootstrap core in NodeBB v3, plus updates to the harmony theme itself, It’s hard to determine the impact this will have on the Swatch code itself. I’ve already found an issue in the tooltip function - as the Swatch code runs after the harmony code, it means that the same function for the tooltip has to be run again.
This then causes an error to be generated in the console at random intervals. I know why this is - essentially, it’s because destroy as a JS function was removed in BS 4.1 and replaced with dispose - see the below thread raised in the NodeBB forum.Jan 18 / Bug Reports 3.0.0 Bug Report Thread 3.0.0 Bug Report Thread
I get the below multiple times in the console nodebb.min.js?v=rgrdp0ckjj8:26 Uncaught TypeError: No method named "destroy" at HTMLImageElement. (nodebb.min.js?v=rgrdp0ckjj8:26:50217) at Function.each (nodebb.min.js?v=rgrdp0ckjj8:67:2834) at g....
The advice here is to start NodeBB using Grunt so that the JS remains uncompressed - which should make the destroy function easier to track. None of this is the “end of the world” - it’s merely cosmetic, but could cause issues further down the line, so it’s best to isolate this issue now and remediate - unless there’s a better way to activate the tooltip function again without it throwing the same error.
Another option here is to use the navigation menu in the ACP which means that the tooltip function should fire as the menu items are already in the DOM. However, taking this route comes with a number of drawbacks in the sense that it isn’t as flexible as adding arbitrary code.
This is something I’ll need to investigate further but taking this route places additional burden on those using the Swatch code which obviously negates the user experience.