in src/js/embed.js [125:516]
function buildApp(el) {
el.querySelector('#interactive-now-and-then-container').classList.add(interactiveType);
var lastChar = String(properties["mobile_before"]).substr(String(properties["mobile_before"]).length - 1);
var elWidth = el.getBoundingClientRect().width;
var isMobile = elWidth < 480 ? true : false;
var photoSize = isMobile ? "mobile" : "desktop";
if (lastChar == "/") {
loadHtmlImagery = true;
photoSize = "mobile";
el.querySelector('#interactive-now-and-then-container').classList.add("use-html-imagery");
}
properties[photoSize + "_before"] = reinstateChars(properties[photoSize + "_before"]);
properties[photoSize + "_after"] = reinstateChars(properties[photoSize + "_after"]);
// Add image srcs
// if (interactiveType != "slider") {
if (!loadHtmlImagery) {
if (interactiveType != "slider") {
el.querySelector('#first-photo img').src = "https:" + properties[photoSize + "_before"];
el.querySelector('#second-photo img').src = "https:" + properties[photoSize + "_after"];
} else {
el.querySelector('#first-photo img').src = "https:" + properties[photoSize + "_after"];
el.querySelector('#second-photo img').src = "https:" + properties[photoSize + "_before"];
}
} else {
reqwest({
url: properties["mobile_before"] + 'index.html',
type: 'text',
crossOrigin: true,
success: (resp) => { el.querySelector('#first-photo').innerHTML = replaceImages(resp.response, properties["mobile_before"]); updateMaxWidths(el.querySelector('#first-photo')); } //`Your IP address is ${resp.ip}`
});
reqwest({
url: properties["mobile_after"] + 'index.html',
type: 'text',
crossOrigin: true,
success: (resp) => { el.querySelector('#second-photo').innerHTML = replaceImages(resp.response, properties["mobile_after"]); updateMaxWidths(el.querySelector('#second-photo')); }//el.querySelector('#second-photo').innerHTML = resp.response //`Your IP address is ${resp.ip}`
});
}
// } else {
// if (!loadHtmlImagery) {
// el.querySelector('#first-photo img').src = properties[photoSize + "_before"];
// el.querySelector('#second-photo img').src = properties[photoSize + "_after"];
// } else {
// reqwest({
// url: properties["mobile_before"] + 'index.html',
// type: 'text',
// crossOrigin: true,
// success: (resp) => { el.querySelector('#first-photo').innerHTML = replaceImages(resp.response, properties["mobile_before"]); updateMaxWidths ( el.querySelector('#first-photo') ); } //`Your IP address is ${resp.ip}`
// });
// reqwest({
// url: properties["mobile_after"] + 'index.html',
// type: 'text',
// crossOrigin: true,
// success: (resp) => { el.querySelector('#second-photo').innerHTML = replaceImages(resp.response, properties["mobile_after"]); updateMaxWidths ( el.querySelector('#second-photo') ); }//el.querySelector('#second-photo').innerHTML = resp.response //`Your IP address is ${resp.ip}`
// });
// }
// Add code to replace all img srcs with
//el.querySelector('#first-photo').innerHTML = await fetchHtmlAsText("https://interactive.guim.co.uk/embed/testing/test-divs-for-then-now/a_path/index.html");
//}
function replaceImages(resp, path) {
var newResp = resp.replaceAll('background-image:url(', 'background-image:url(' + path);
//console.log(newResp);
return newResp;
}
function updateMaxWidths(elem) {
if (!maxWidthsUpdated) {
var i, minWidths = [],
css = "",
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
[].slice.apply(elem.querySelectorAll('.gu-artboard')).forEach(ab => {
minWidths.push(getDatasetProperty(ab.dataset, "minWidth"));
});
for (i = 1; i < minWidths.length; i++) {
css += "@media screen and (min-width: " + minWidths[i] + "px) { .interactive-embed {max-width:" + minWidths[i] + "px;}"
}
style.type = 'text/css';
if (style.styleSheet) {
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
maxWidthsUpdated = true;
}
}
function getDatasetProperty(dataset, propName) {
return typeof Reflect !== 'undefined' ? Reflect.get(dataset, propName) : dataset[propName]
}
String.prototype.replaceAll = function (searchStr, replaceStr) {
var str = this;
// escape regexp special characters in search string
searchStr = searchStr.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
return str.replace(new RegExp(searchStr, 'gi'), replaceStr);
};
var slider, start, step, min, max;
var sliderLabelBefore, sliderLabelAfter;
var headingBefore, headingAfter;
switch (interactiveType) {
case "duo":
headingBefore = el.querySelector('#duo-heading-before');
headingAfter = el.querySelector('#duo-heading-after');
headingBefore.innerHTML = decodeURIComponent(properties.label_before);
headingAfter.innerHTML = decodeURIComponent(properties.label_after);
break;
case "fader":
slider = el.querySelector('#slider-1');
start = 0;
step = 0.05;
min = 0;
max = 1;
sliderLabelBefore = el.querySelector('#slider-before');
sliderLabelAfter = el.querySelector('#slider-after');
headingBefore = sliderLabelBefore;
headingAfter = sliderLabelAfter;
break;
case "slider":
//var headingBefore = el.querySelector('#slider-heading-before');
//var headingAfter = el.querySelector('#slider-heading-after');
slider = el.querySelector('#slider-2');
start = 50;
step = 0.00000000001;
min = 0;
max = 100;
sliderLabelBefore = el.querySelector('#slider-heading-before');
sliderLabelAfter = el.querySelector('#slider-heading-after');
headingBefore = sliderLabelBefore;
headingAfter = sliderLabelAfter;
// var temp = properties.label_before;
// properties.label_before = properties.label_after;
// properties.label_after = temp;
break;
}
if (decodeURIComponent(properties.label_before) == "" && decodeURIComponent(properties.label_after) == "") {
headingBefore.classList.add("gv-hide");
headingAfter.classList.add("gv-hide");
}
// Add interactivity if not "Duo"
if (interactiveType == "fader" || interactiveType == "slider") {
// var slider = el.querySelector('#slider');
// var sliderStateBefore = el.querySelector('#slider-before');
// var sliderStateAfter = el.querySelector('#slider-after');
// var start = 0;
// var step = 0.05;
// if (interactiveType == "slider") {
// start = 0.5;
// step = 0.00000000001;
// }
sliderLabelBefore.innerHTML = decodeURIComponent(properties.label_before);
sliderLabelAfter.innerHTML = decodeURIComponent(properties.label_after);
sld = noUiSlider.create(slider, {
start: [start],
step: step,
animate: true,
animationDuration: 300,
range: {
'min': min,
'max': max
}
})
var secondPhoto = el.querySelector('#second-photo');
var origin = el.querySelector('.noUi-origin');
//var origin =el.querySelector('.noUi-origin');
slider.noUiSlider.on('start', function () {
secondPhoto.classList.remove("slider-transition");
secondPhoto.classList.remove("slider-transition-initial");
origin.classList.remove("origin-smooth");
});
slider.noUiSlider.on('end', function (values) {
secondPhoto.classList.add("slider-transition");
origin.classList.add("origin-smooth");
if (interactiveType == "slider") {
if (values < 5) {
slider.noUiSlider.set(0);
values = 0;
}
if (values > 95) {
slider.noUiSlider.set(100);
values = 100;
}
}
// secondPhoto.style.width = values + "%";
// secondPhoto.offsetHeight;
// secondPhoto.classList.add("slider-transition");
});
slider.noUiSlider.on('update', function (values, handle) {
if (typeof ga !== 'undefined') {
fireAnalytics(properties);
}
if (interactiveType == "fader") {
secondPhoto.style.opacity = values;
sliderLabelAfter.style.opacity = values;
sliderLabelBefore.style.opacity = 1 - values;
} else if (interactiveType == "slider") {
//console.log(origin.style.left);
//origin =el.querySelector('.noUi-origin');
secondPhoto.style.width = values + "%";
//secondPhoto.style.clipPath = "inset(0 0 0 " + values + "%)";
//secondPhoto.style["-webkit-clip-path"] = "inset(0 0 0 " + values + "%)";
//secondPhoto.style.width = origin.style.left;
updateLabelVisibility(values, sliderLabelBefore, sliderLabelAfter);
}
});
if (interactiveType == "fader") {
var photoContainer = el.querySelector('.photos-wrapper-container');
var fadeTimeout;
photoContainer.addEventListener('click', function () {
if (typeof ga !== 'undefined') {
fireAnalytics(properties);
}
clearTimeout(fadeTimeout);
var currentValue = parseFloat(slider.noUiSlider.get());
var targetValue = currentValue > 0.5 ? 0 : 1;
var addUp = targetValue > currentValue ? true : false;
function setSlider() {
fadeTimeout = setTimeout(function () {
if (addUp) {
currentValue += 0.05;
} else {
currentValue -= 0.05;
}
slider.noUiSlider.set(currentValue);
if (addUp && currentValue < targetValue) {
setSlider();
} else if (!addUp && currentValue > targetValue) {
setSlider();
}
}, 50)
}
setSlider();
})
} // end if fader
if (interactiveType == "slider") {
var photoContainer = el.querySelector('.photos-wrapper-container');
//var wrapperEl = document.querySelector("#interactive-now-and-then-container");
photoContainer.addEventListener('click', function (e) {
fireAnalytics(properties);
//alert(e.clientX);
//alert(window.innerWidth);
//var secondPhoto = el.querySelector('#second-photo');
//secondPhoto.classList.add("slider-transition");
})
// wrapperEl.addEventListener('touchstart', function(e){
// //console.log("start");
// }, false);
// wrapperEl.addEventListener('touchend', function(e){
// //console.log("end");
// }, false);
// document.addEventListener('touchstart', ( event ) => {
// // down = 1;
// event.stopPropagation();
// }, false);
// document.addEventListener('touchend', ( event ) => {
// // down = 0;
// event.stopPropagation();
// }, false);
// document.addEventListener('touchmove', ( event ) => {
// // down = 0;
// event.stopPropagation();
// }, false);
} // end if slider
}
intervalCheck = setInterval(fetchParentInfo, 300);
// var base = el.querySelector('.noUi-base');
// base.addEventListener("mouseup", function() {
// el.querySelector('#second-photo').classList.add("slider-transition");
// });
}