After my post here
https://xoops.org/modules/newbb/viewtopic.php?post_id=363102 I wish I propose a nice mechanism I saw on a payed project. I can't copy/paste some code, but the principle of the mechanism is interesting.
There are a LOT of jQuery plugins on the web, and we should adopt some of it. Like Bootstrap, but many other goodies are out there. We should put them into a folder, and Xoops already have a dedicated folder for this.
Is about a little javascript file that is included into theme main file. That script read the loaded DOM and ...
- could do something on resize window;
- could initiate all tooltip elements based on some attributes like this:
jQuery("a[data-toggle=tooltip]").tooltip();
or a button related tooltip, or other one ...
- could manage the preloader layer;
- could detect if any specific class div is present on the DOM... and if so, load the script and initialize it based on attributes data, like a carousel or a countDown animation, or a calendar or chart or ... and the list of interesting jQuery plugins is so long...
The plugins folder could be quite big, but there is loaded only what is needed. So the result is lightweight.
In this way we just have to load jQuery file, boostrap files, and after that ... is about the syntax we use, based on a list of jQuery plugin we adopt. And we have to write some documentation for each one.
It have to be a loadMyScript function, with some arguments, scriptname, callbacks ... which manage the load of a specific script process. On DOM loaded time, an initialization function that run a list of other functions (and here should be our adopted plugins). Each one check the DOM for specific strings/classes and load/run something based on attributes.
Example:
jQuery(window).ready(function() {
loadMyScript(pathToTheLibrary + 'bootstrap/js/bootstrap.js', function() {
Initialization();
});
});
function Initialization) {
lightboxFunction();
someNiceSliderFunction();
someNiceMenuFunction();
someNiceScrollFunction();
.....
}
function loadMyScript(script, callback) {
// here jQuery append some javascript to the body, trigger it ...
}
each someNiceDoSomethingFunction() search the DOM for specific syntax, use loadMyScript function to pick the plugin, read attributes data and run the plugin based on it.
in conclusion:
We could have a list of usefull jQuery plugins;
A javascript file that run on load, read the DOM and append what is needed from library. And make them run based on syntax and attributes.
The modules developers could just use carousels-calendars-charts-countDown-masonryStylePhotos- and so on... just using the right syntax and attributes.
