Hi,
The reason I break it up, is due to the amount of features. This is one of the pages in question:
https://www.chambresdhotes.org/...ne_Chambres_D_Hotes/ (GT Metrics:
https://gtmetrix.com/...sdhotes.org/SBXLbBKm - the old version of this page used to take between 4-8 seconds to load - depending on how large the category is)
Each time you click on a feature (for example, adding to your favourites, viewing the map, contacting them) , it will load an external module. What you do, is just require it like:
Code:
<script>window.VARS = window.VARS || {};
window.VARS.thisPage = "home_new";
window.VARS.temp_set = "luna";
</script>
<script data-main="/2018/v9/js/decider" src="/2018/v9/js/lib/require.js" async="true"></script>
Then you would have something like this in add.js:
Code:
// check if we need to use the decent "new" scripts, or crappy non-ES6 versions!
// later on when loading the paths we change from "lib" to "lib-non-es6"
function check_es6() {
if (location.search.indexOf('non-es6') !== -1) {
return false;
}
try { eval("`foo`"); }
catch (e) { return false; }
return true;
}
var base_path;
if (check_es6()) {
base_path = "/2018/" + window.scriptVersion + "/js/lib"
} else {
base_path = "/2018/" + window.scriptVersion + "/js/lib-non-es6"
}
var langs_file = "langs-fr";
require.config({
//"urlArgs": "foo=" + (new Date()).getTime(),
//"urlArgs": "",
"baseUrl": base_path,
"waitSeconds": 0,
"paths": {
// "jquery": "jquery",
"app": "../app",
"datepicker": "datepicker/new",
"datepicker-lang": "datepicker/"+ langs_file,
"google_maps": 'https://maps.google.fr/maps/api/js?v=3.34&lang=fr&key=xxxx-ssfYuDsBc&',
"google_maps_detailed": 'https://maps.google.fr/maps/api/js?v=3.34&lang=fr&key=xxx&',
"leaflet": "leaflet/leaflet",
// ...etc
},
"shim": {
"leaflet.markercluster": {
"deps": ["leaflet"]
},
"datepicker": {
"deps": ["datepicker-lang"]
},
"leaflet.markercluster.freezable": {
"deps": ["leaflet","leaflet.markercluster"]
}
}
});
if (window.VARS.thisPage == "home") {
require(['domReady','storage','common-functions','home'], function(domReady,store){
}, function (err) {
console.log("Error: " + err)
});
} else {
// some other page
}
If window.VARS.thisPage == "home", it would then load /lib/home.js
For the CSS - check out :
https://sass-lang.com/ If you don't already have it on the server, check out:
https://sass-lang.com/install Then once you have it set up, you can "watch" it for changes to apply changes:
Code:
cd /home/theuser/thedomain.com/public_html/2018/css/sass
sass --watch /home/theuser/thedomain.com/public_html/2018/css/sass:/home/theuser/web/thedomain.com/public_html/2018/css --style expanded^C
Anyway, that should give you enough to play with. I'd recommend acclimatising yourself to SASS and requireJS. When looking at how to program vanilla JS, just search Google and there are tons of examples / tutorials. What I've done is create helper functions for myself - such as :
Code:
/*!
* Add an event listener
* (c) 2017 Chris Ferdinandi, MIT License, https://gomakethings.com
* @param {String} event The event type
* @param {Node} elem The element to attach the event to (optional, defaults to window)
* @param {Function} callback The callback to run on the event
* @param {Boolean} capture If true, forces bubbling on non-bubbling events
*/
const on = function (event, elem, callback, capture) {
if (typeof (elem) === 'function') {
capture = callback;
callback = elem;
elem = window;
}
capture = capture ? true : false;
elem = typeof elem === 'string' ? document.querySelector(elem) : elem;
// console.dir(elem);
if (!elem) return;
elem.addEventListener(event, callback, capture);
};
function handleEvent(base, evt, selector, handler) {
var els = document.querySelectorAll(selector);
for (var i = 0; i < els.length; i++) {
els
.addEventListener(evt, handler);
}
}
// Show an element
const show = function (elem,what) {
if (typeof elem == "object") {
if (typeof what == "string") {
elem.style.display = what;
} else {
elem.style.display = 'block';
}
} else {
// need to look it up first
var elem = document.querySelector(elem);
if (elem) {
if (typeof what == "string") {
elem.style.display = what;
} else {
elem.style.display = 'block';
}
}
}
};
// Hide an element
const hide = function (elem) {
//console.log("hiding",elem);
if (typeof elem == "object") {
elem.style.display = 'none';
} else {
var elem = document.querySelector(elem);
if (elem) {
elem.style.display = 'none';
}
}
};
// Toggle element visibility
const toggle = function (elem,what) {
if (!what) {
what = "block";
}
// If the element is visible, hide it
if (window.getComputedStyle(elem).display === what) {
hide(elem);
return;
}
// Otherwise, show it
show(elem,what);
};
// set and get height for element
const height = function(elem,size) {
if (elem && size == null) {
// just return the height of the element
return elem.style.height;
} else {
// looks like we want to SET the height - so do this here
object.style.height = size+"px";
}
// object.style.width
}
// height of the element, inc padding etc
const heightOuter = function(elem) {
if (elem) {
return elem.clientHeight;
}
}
// width of the element, inc padding etc
const widthOuter = function(elem) {
if (elem) {
return elem.clientWidth;
}
}
// height of the element, inc padding etc
const heightInner = function(elem) {
if (elem) {
var style = window.getComputedStyle(elem, null);
// console.log(style);
return parseInt(style.getPropertyValue("height"));
}
}
// width of the element, inc padding etc
const widthInner = function(elem) {
if (elem) {
var style = window.getComputedStyle(elem, null);
return parseInt(style.getPropertyValue("width"));
}
}
const isInViewport = function (elem) {
var bounding = elem.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
// this bit seems to break the filters bar, so having to comment out :(
//&&
//bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
const triggerDo = function(elem,what) {
//elem.dispatchEvent(new MouseEvent(what));
elem.focus();
};
const toggleClass = function (e,theClass) {
e.classList.toggle(theClass);
};
const removeClass = function (e,theClass) {
e.classList.remove(theClass);
};
const addClass = function (e,theClass) {
e.classList.add(theClass);
}; Cheers
Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my
Amazon Wish List GLinks ULTRA Package | GLinks ULTRA Package PRO Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin |
Pre-Made Template Sets |
FREE GLinks Plugins!