The two questions here are:
-
How does one add Waypoints shortcuts?
-
Where does one add the custom script?
Below I’ve just gone through each step as understood (or not) in the documentation. It’s not working, so I hope someone can help clarify the ‘Sage method’ where it’s misunderstood, and I can help improve the documentation on it.
I’ve followed the book documentation and theme building documentation. I’ve spent two days reading and learning how to do this. It is still not clear how this I would do this correctly.
Specifically with Waypoints, there is a bower install. The Sage documentation says this is the preferred method of installing if available: bower waypoints install --save
The above appears to work fine. Satisfyingly, waypoints seems to automatically be added to the Sage them bower.json with the addition of this: "waypoints": "~4.0.0"
Is this all that is required, or does it need adding to the manifest and enqueuing?
After that, thing get confusing. Waypoints has shortcut scripts, and also a custom script needs to be written in any case. First question: How does one add the shortcut scripts? These currently reside in the waypoints bower folder: /shortcuts. If my understanding is correct (p31 of theme dev with sage first edition), this is added manually in the manifest like this:
"sticky.js": {
"files": ["shortcuts/sticky.js"],
"external": true,
"bower": ["waypoints"]
}
The above adds sticky.js and sticky.js.map to the list folder, so this seems to be correct. Looking at those files, waypoints.js and sticky.js are exactly the same, so something is up here? Are one of these, or both supposed to be a merged and minified file?
The above is slightly conflicted with:
(p31) As long as the Bower package you’ve installed has defined the files you want loaded in its bower.json file, you won’t need to add any overrides.
The shortcut is not included in the waypoints bower.json, so the above addition top the manifest seems correct? In a previous post, I mentioned I had added it here and was informed NOT to touch a packages .json file.
Assuming also that the above is, or had worked properly, the documentation seems to say these don’t need enqueuing (because they are bower). This doesn’t make sense to me if the are being mapped to the list folder. I looked at further documentation, which suggest
After this, we have a custom script i.e.:
function stickyExample() {
var $stickyElement = $('.basic-sticky-example')
var sticky
if ($stickyElement.length) {
sticky = new Waypoint.Sticky({
element: $stickyElement[0],
wrapper: '<div class="sticky-wrapper waypoint" />'
})
}
}
Where does this go? I would assume it goes in the main.js (I’m using on all pages, so in the common part?)
Thanks in advance for any help on this!