* Copyright (c) 2015 Alex Duner and Northwestern University Knight Lab
* Source project on Github: https://github.com/NUKnightLab/juxtapose
* Official Webiste: https://juxtapose.knightlab.com/
*/
(function(document,window){varjuxtapose={sliders:[],OPTIMIZATION_ACCEPTED:1,OPTIMIZATION_WAS_CONSTRAINED:2};varflickr_key="d90fc2d1f4acc584e08b8eaea5bf4d6c";varFLICKR_SIZE_PREFERENCES=["Large","Medium"];functionGraphic(properties,slider){varself=this;this.image=newImage;this.loaded=false;this.image.onload=function(){self.loaded=true;slider._onLoaded()};this.image.src=properties.src;this.label=properties.label||false;this.credit=properties.credit||false}functionFlickrGraphic(properties,slider){varself=this;this.image=newImage;this.loaded=false;this.image.onload=function(){self.loaded=true;slider._onLoaded()};this.flickrID=this.getFlickrID(properties.src);this.callFlickrAPI(this.flickrID,self);this.label=properties.label||false;this.credit=properties.credit||false}FlickrGraphic.prototype={getFlickrID:function(url){varidx=url.indexOf("flickr.com/photos/");varpos=idx+"flickr.com/photos/".length;varphoto_info=url.substr(pos);if(photo_info.indexOf("/")==-1)returnnull;if(photo_info.indexOf("/")===0)photo_info=photo_info.substr(1);id=photo_info.split("/")[1];returnid},callFlickrAPI:function(id,self){varurl="https://api.flickr.com/services/rest/?method=flickr.photos.getSizes"+"&api_key="+flickr_key+"&photo_id="+id+"&format=json&nojsoncallback=1";varrequest=newXMLHttpRequest;request.open("GET",url,true);request.onload=function(){if(request.status>=200&&request.status<400){data=JSON.parse(request.responseText);varflickr_url=self.bestFlickrUrl(data.sizes.size);self.setFlickrImage(flickr_url)}else{console.error("There was an error getting the picture from Flickr")}};request.onerror=function(){console.error("There was an error getting the picture from Flickr")};request.send()},setFlickrImage:function(src){this.image.src=src},bestFlickrUrl:function(ary){vardict={};for(vari=0;i<ary.length;i++){dict[ary[i].label]=ary[i].source}for(varj=0;j<FLICKR_SIZE_PREFERENCES.length;j++){if(FLICKR_SIZE_PREFERENCES[j]indict){returndict[FLICKR_SIZE_PREFERENCES[j]]}}returnary[0].source}};functiongetNaturalDimensions(DOMelement){if(DOMelement.naturalWidth&&DOMelement.naturalHeight){return{width:DOMelement.naturalWidth,height:DOMelement.naturalHeight}}varimg=newImage;img.src=DOMelement.src;return{width:img.width,height:img.height}}functiongetImageDimensions(img){vardimensions={width:getNaturalDimensions(img).width,height:getNaturalDimensions(img).height,aspect:function(){returnthis.width/this.height}};returndimensions}functionaddClass(element,c){if(element.classList){element.classList.add(c)}else{element.className+=""+c}}functionremoveClass(element,c){element.className=element.className.replace(/(\S+)\s*/g,function(w,match){if(match===c){return""}returnw}).replace(/^\s+/,"")}functionsetText(element,text){if(document.body.textContent){element.textContent=text}else{element.innerText=text}}functiongetComputedWidthAndHeight(element){if(window.getComputedStyle){return{width:parseInt(getComputedStyle(element).width,10),height:parseInt(getComputedStyle(element).height,10)}}else{w=element.getBoundingClientRect().right-element.getBoundingClientRect().left;h=element.getBoundingClientRect().bottom-element.getBoundingClientRect().top;return{width:parseInt(w,10)||0,height:parseInt(h,10)||0}}}functionviewport(){vare=window,a="inner";if(!("innerWidth"inwindow)){a="client";e=document.documentElement||document.body}return{width:e[a+"Width"],height:e[a+"Height"]}}functiongetPageX(e){varpageX;if(e.pageX){pageX=e.pageX}elseif(e.touches){pageX=e.touches[0].pageX}else{pageX=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft}returnpageX}functiongetPageY(e){varpageY;if(e.pageY){pageY=e.pageY}elseif(e.touches){pageY=e.touches[0].pageY}else{pageY=e.clientY+document.body.scrollTop+document.documentElement.scrollTop}returnpageY}functioncheckFlickr(url){varidx=url.indexOf("flickr.com/photos/");if(idx==-1){returnfalse}else{returntrue}}functiongetLeftPercent(slider,input){if(typeofinput==="string"||typeofinput==="number"){leftPercent=parseInt(input,10)}else{varsliderRect=slider.getBoundingClientRect();varoffset={top:sliderRect.top+document.body.scrollTop,left:sliderRect.left+document.body.scrollLeft};varwidth=slider.offsetWidth;varpageX=getPageX(input);varrelativeX=pageX-offset.left;leftPercent=relativeX/width*100}returnleftPercent}functiongetTopPercent(slider,input){if(typeofinput==="string"||typeofinput==="number"){topPercent=parseInt(input,10)}else{varsliderRect=slider.getBoundingClientRect();varoffset={top:sliderRect.top+document.body.scrollTop,left:sliderRect.left+document.body.scrollLeft};varwidth=slider.offsetHeight;varpageY=getPageY(input);varrelativeY=pageY-offset.top;topPercent=relativeY/width*100;console.log("sliderRect",sliderRect);console.log("pageY",pageY);console.log("relativeY",relativeY);console.log("topPercent",topPercent)}returntopPercent}varBOOLEAN_OPTIONS={animate:true,showLabels:true,showCredits:true,makeResponsive:true};functioninterpret_boolean(x){if(typeofx!="string"){returnBoolean(x)}return!(x==="false"||x==="")}functionJXSlider(selector,images,options){this.selector=selector;vari;this.options={animate:true,showLabels:true,showCredits:true,makeResponsive:true,startingPosition:"50%",mode:"horizontal",callback:null};for(iinthis.options){if(iinoptions){if(iinBOOLEAN_OPTIONS){this.options[i]=interpret_boolean(options[i])}else{this.options[i]=options[i]}}}if(images.length==2){if(checkFlickr(images[0].src)){this.imgBefore=newFlickrGraphic(images[0],this)}else{this.imgBefore=newGraphic(images[0],this)}if(checkFlickr(images[1].src)){this.imgAfter=newFlickrGraphic(images[1],this)}else{this.imgAfter=newGraphic(images[1],this)}}else{console.warn("The images parameter takes two Image objects.")}if(this.imgBefore.credit||this.imgAfter.credit){this.options.showCredits=true}else{this.options.showCredits=false}}JXSlider.prototype={updateSlider:function(input,animate){varleftPercent,rightPercent;if(this.options.mode==="vertical"){leftPercent=getTopPercent(this.slider,input)}else{leftPercent=getLeftPercent(this.slider,input)}leftPercent=leftPercent.toFixed(2)+"%";leftPercentNum=parseFloat(leftPercent);rightPercent=100-leftPercentNum+"%";if(leftPercentNum>0&&leftPercentNum<100){removeClass(this.handle,"transition");removeClass(this.rightImage,"transition");removeClass(this.leftImage,"transition");if(this.options.animate&&animate){addClass(this.handle,"transition");addClass(this.leftImage,"transition");addClass(this.rightImage,"transition")}if(this.options.mode==="vertical"){this.handle.style.top=leftPercent;this.leftImage.style.height=leftPercent;this.rightImage.style.height=rightPercent}else{this.handle.style.left=leftPercent;this.leftImage.style.width=leftPercent;this.rightImage.style.width=rightPercent}this.sliderPosition=leftPercent}},getPosition:function(){returnthis.sliderPosition},displayLabel:function(element,labelText){label=document.createElement("div");label.className="jx-label";label.setAttribute("tabindex",0);setText(label,labelText);element.appendChild(label)},displayCredits:function(){credit=document.createElement("div");credit.className="jx-credit";text="<em>Photo Credits:</em>";if(this.imgBefore.credit){text+=" <em>Before</em> "+this.imgBefore.credit}if(this.imgAfter.credit){text+=" <em>After</em> "+this.imgAfter.credit}credit.innerHTML=text;this.wrapper.appendChild(credit)},setStartingPosition:function(s){this.options.startingPosition=s},checkImages:function(){if(getImageDimensions(this.imgBefore.image).aspect()==getImageDimensions(this.imgAfter.image).aspect()){returntrue}else{returnfalse}},calculateDims:function(width,height){varratio=getImageDimensions(this.imgBefore.image).aspect();if(width){height=width/ratio}elseif(height){width=height*ratio}return{width:width,height:height,ratio:ratio}},responsivizeIframe:function(dims){if(dims.height<window.innerHeight){if(dims.ratio>=1){this.wrapper.style.paddingTop=parseInt((window.innerHeight-dims.height)/2)+"px"}}elseif(dims.height>window.innerHeight){dims=this.calculateDims(0,window.innerHeight);this.wrapper.style.paddingLeft=parseInt((window.innerWidth-dims.width)/2)+"px"}if(this.options.showCredits){dims.height-=13}returndims},setWrapperDimensions:function(){varwrapperWidth=getComputedWidthAndHeight(this.wrapper).width;varwrapperHeight=getComputedWidthAndHeight(this.wrapper).height;vardims=this.calculateDims(wrapperWidth,wrapperHeight);if(window.location!==window.parent.location){dims=this.responsivizeIframe(dims)}this.wrapper.style.height=parseInt(dims.height)+"px";this.wrapper.style.width=parseInt(dims.width)+"px"},optimizeWrapper:function(maxWidth){varresult=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}elseif(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();returnresult},_onLoaded:function(){if(this.imgBefore&&this.imgBefore.loaded===true&&this.imgAfter&&this.imgAfter.loaded===true){this.wrapper=document.querySelector(this.selector);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.labCredit=document.createElement("a");this.labCredit.setAttribute("href","http://juxtapose.knightlab.com");this.labCredit.setAttribute("target","_blank");this.labCredit.className="jx-knightlab";this.labLogo=document.createElement("div");this.labLogo.className="knightlab-logo";this.labCredit.appendChild(this.labLogo);this.projectName=document.createElement("span");this.projectName.className="juxtapose-name";setText(this.projectName,"JuxtaposeJS");this.labCredit.appendChild(this.projectName);this.slider.appendChild(this.handle);this.slider.appendChild(this.leftImage);this.slider.appendChild(this.rightImage);/**this.slider.appendChild(this.labCredit);**/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()}varself=this;window.addEventListener("resize",function(){self.setWrapperDimensions()});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)}});document.addEventListener("mouseup",function(e){e=e||window.event;e.preventDefault();animate=false})});this.slider.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;varkey=event.which||event.keyCode;varariaValue=parseFloat(this.style.left);if(key==37){ariaValue=ariaValue-1;varleftStart=parseFloat(this.style.left)-1;self.updateSlider(leftStart,false);self.controller.setAttribute("aria-valuenow",ariaValue)}if(key==39){ariaValue=ariaValue+1;varrightStart=parseFloat(this.style.left)+1;self.updateSlider(rightStart,false);self.controller.setAttribute("aria-valuenow",ariaValue)}});this.leftImage.addEventListener("keydown",function(event){varkey=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){varkey=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&&typeofthis.options.callback=="function"){this.options.callback(this)}}};juxtapose.makeSlider=function(element,idx){if(typeofidx=="undefined"){idx=juxtapose.sliders.length}varw=element;varimages=w.querySelectorAll("img");varoptions={};if(w.getAttribute("data-animate")){options.animate=w.getAttribute("data-animate")}if(w.getAttribute("data-showlabels")){options.showLabels=w.getAttribute("data-showlabels")}if(w.getAttribute("data-showcredits")){options.showCredits=w.getAttribute("data-showcredits")}if(w.getAttribute("data-startingposition")){options.startingPosition=w.getAttribute("data-startingposition")}if(w.getAttribute("data-mode")){options.mode=w.getAttribute("data-mode")}specificClass="juxtapose-"+idx;addClass(element,specificClass);selector="."+specificClass;if(w.innerHTML){w.innerHTML=""}else{w.innerText=""}slider=newjuxtapose.JXSlider(selector,[{src:images[0].src,label:images[0].getAttribute("data-label"),credit:images[0].getAttribute("data-credit")},{src:images[1].src,label:images[1].getAttribute("data-label"),credit:images[1].getAttribute("data-credit")}],options);juxtapose.sliders.push(slider)};juxtapose.scanPage=function(){varelements=document.querySelectorAll(".juxtapose");for(vari=0;i<elements.length;i++){juxtapose.makeSlider(elements[i],i)}};juxtapose.JXSlider=JXSlider;window.juxtapose=juxtapose;juxtapose.scanPage()})(document,window);(function(win,doc){if(win.addEventListener)return;functiondocHijack(p){varold=doc[p];doc[p]=function(v){returnaddListen(old(v))}}functionaddEvent(on,fn,self){return(self=this).attachEvent("on"+on,function(e){vare=e||win.event;e.preventDefault=e.preventDefault||function(){e.returnValue=false};e.stopPropagation=e.stopPropagation||function(){e.cancelBubble=true};fn.call(self,e)})}functionaddListen(obj,i){if(i=obj.length)while(i--)obj[i].addEventListener=addEvent;elseobj.addEventListener=addEvent;returnobj}addListen([doc,win]);if("Element"inwin)win.Element.prototype.addEventListener=addEvent;else{doc.attachEvent("onreadystatechange",function(){addListen(doc.all)});docHijack("getElementsByTagName");docHijack("getElementById");docHijack("createElement");addListen(doc.all)}})(window,document);
