"use strict";
// Class definition
var KTAppHero = function () {
// Private variables
var preview;
var previewDrag;
var previewSlider;
var previewLight;
var previewLightImg;
var previewDark;
var previewDarkImg;
var slide = function(e) {
const sliderPos = e.target.value;
// Update the width of the foreground image
KTUtil.css(previewDark, "width", `${sliderPos}%`);
// Update the position of the slider button
KTUtil.css(previewDrag, "left", `calc(${sliderPos}% - 0px)`);
}
var handlePreview = function() {
calculate();
resize();
previewSlider.addEventListener("input", slide);
previewSlider.addEventListener("change", slide);
}
var calculate = function() {
const width = KTUtil.css(preview, "width");
KTUtil.css(previewLightImg, "width", width);
KTUtil.css(previewDarkImg, "width", width);
}
var resize = function() {
// Window resize Handling
window.addEventListener("resize", calculate);
}
// Public methods
return {
init: function () {
preview = document.querySelector(".preview");
previewSlider = document.querySelector(".preview .preview-slider");
previewDrag = document.querySelector(".preview .preview-drag");
previewLight = document.querySelector(".preview .preview-light");
previewLightImg = document.querySelector(".preview .preview-light > img");
previewDark = document.querySelector(".preview .preview-dark");
previewDarkImg = document.querySelector(".preview .preview-dark > img");
if (!preview) {
return;
}
handlePreview();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppHero.init();
});