dthAndHeight(this.wrapper).height; var dims = this.calculateDims(wrapperWidth, wrapperHeight); if (window.location !== window.parent.location && !this.options.makeResponsive) { dims = this.responsivizeIframe(dims); } this.wrapper.style.height = parseInt(dims.height) + 'px'; this.wrapper.style.width = parseInt(dims.width) + 'px'; }, optimizeWrapper: function (maxWidth) { var result = juxtapose.OPTIMIZATION_ACCEPTED; if (this.imgBefore.image.naturalWidth >= maxWidth && this.imgAfter.image.naturalWidth >= maxWidth) { this.wrapper.style.width = maxWidth + 'px'; result = juxtapose.OPTIMIZATION_WAS_CONSTRAINED; } else if (this.imgAfter.image.naturalWidth < maxWidth) { this.wrapper.style.width = this.imgAfter.image.naturalWidth + 'px'; } else { this.wrapper.style.width = this.imgBefore.image.naturalWidth + 'px'; } this.setWrapperDimensions(); return result; }, _onLoaded: function () { if (this.imgBefore && this.imgBefore.loaded === true && this.imgAfter && this.imgAfter.loaded === true) { this.wrapper = document.querySelector(this.selector); if (this.wrapper === null) { return; } addClass(this.wrapper, 'juxtapose'); this.wrapper.style.width = getNaturalDimensions(this.imgBefore.image).width; this.setWrapperDimensions(); this.slider = document.createElement('div'); this.slider.className = 'jx-slider'; this.wrapper.appendChild(this.slider); if (this.options.mode != 'horizontal') { addClass(this.slider, this.options.mode); } this.handle = document.createElement('div'); this.handle.className = 'jx-handle'; this.rightImage = document.createElement('div'); this.rightImage.className = 'jx-image jx-right'; this.rightImage.appendChild(this.imgAfter.image); this.leftImage = document.createElement('div'); this.leftImage.className = 'jx-image jx-left'; this.leftImage.appendChild(this.imgBefore.image); this.slider.appendChild(this.handle); this.slider.appendChild(this.leftImage); this.slider.appendChild(this.rightImage); this.leftArrow = document.createElement('div'); this.rightArrow = document.createElement('div'); this.control = document.createElement('div'); this.controller = document.createElement('div'); this.leftArrow.className = 'jx-arrow jx-left'; this.rightArrow.className = 'jx-arrow jx-right'; this.control.className = 'jx-control'; this.controller.className = 'jx-controller'; this.controller.setAttribute('tabindex', 0); this.controller.setAttribute('role', 'slider'); this.controller.setAttribute('aria-valuenow', 50); this.controller.setAttribute('aria-valuemin', 0); this.controller.setAttribute('aria-valuemax', 100); this.handle.appendChild(this.leftArrow); this.handle.appendChild(this.control); this.handle.appendChild(this.rightArrow); this.control.appendChild(this.controller); this._init(); } }, _init: function () { if (this.checkImages() === false) { console.warn(this, 'Check that the two images have the same aspect ratio for the slider to work correctly.'); } this.updateSlider(this.options.startingPosition, false); if (this.options.showLabels === true) { if (this.imgBefore.label) { this.displayLabel(this.leftImage, this.imgBefore.label); } if (this.imgAfter.label) { this.displayLabel(this.rightImage, this.imgAfter.label); } } if (this.options.showCredits === true) { this.displayCredits(); } var self = this; window.addEventListener('resize', function () { self.setWrapperDimensions(); }); var isMobile = false; if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { isMobile = true; } if (!isMobile) { this.slider.addEventListener('mousedown', function (e) { e = e || window.event; e.preventDefault(); self.updateSlider(e, true); animate = true; this.addEventListener('mousemove', function (e) { e = e || window.event; e.preventDefault(); if (animate) { self.updateSlider(e, false); } }); this.addEventListener('mouseup', function (e) { e = e || window.event; e.preventDefault(); e.stopPropagation(); this.removeEventListener('mouseup', arguments.callee); animate = false; }); }); } this.handle.addEventListener('touchstart', function (e) { e = e || window.event; e.preventDefault(); e.stopPropagation(); self.updateSlider(e, true); this.addEventListener('touchmove', function (e) { e = e || window.event; e.preventDefault(); e.stopPropagation(); self.updateSlider(event, false); }); }); this.handle.addEventListener('keydown', function (e) { e = e || window.event; var key = e.which || e.keyCode; var ariaValue = parseFloat(this.style.left); if (key == 37) { ariaValue = ariaValue - 1; var leftStart = parseFloat(this.style.left) - 1; self.updateSlider(leftStart, false); self.controller.setAttribute('aria-valuenow', ariaValue); } if (key == 39) { ariaValue = ariaValue + 1; var rightStart = parseFloat(this.style.left) + 1; self.updateSlider(rightStart, false); self.controller.setAttribute('aria-valuenow', ariaValue); } }); this.leftImage.addEventListener('keydown', function (event) { var key = event.which || event.keyCode; if (key == 13 || key == 32) { self.updateSlider('90%', true); self.controller.setAttribute('aria-valuenow', 90); } }); this.rightImage.addEventListener('keydown', function (event) { var key = event.which || event.keyCode; if (key == 13 || key == 32) { self.updateSlider('10%', true); self.controller.setAttribute('aria-valuenow', 10); } }); juxtapose.sliders.push(this); if (this.options.callback && typeof this.options.callback == 'function') { this.options.callback(this); } } }; juxtapose.JXSlider = JXSlider; window.juxtapose = juxtapose; })(document, window); (function (win, doc) { if (win.addEventListener) return; function docHijack(p) { var old = doc[p]; doc[p] = function (v) { return addListen(old(v)); }; } function addEvent(on, fn, self) { return (self = this).attachEvent('on' + on, function (e) { var e = e || win.event; e.preventDefault = e.preventDefault || function () { e.returnValue = false; }; e.stopPropagation = e.stopPropagation || function () { e.cancelBubble = true; }; fn.call(self, e); }); } function addListen(obj, i) { if (i = obj.length) while (i--) obj[i].addEventListener = addEvent; else obj.addEventListener = addEvent; return obj; } addListen([doc, win]); if ('Element' in win) win.Element.prototype.addEventListener = addEvent; else { doc.attachEvent('onreadystatechange', function () { addListen(doc.all); }); docHijack('getElementsByTagName'); docHijack('getElementById'); docHijack('createElement'); addListen(doc.all); } })(window, document);