1 line
12 KiB
JavaScript
1 line
12 KiB
JavaScript
!function(o,n){var l={sliders:[],OPTIMIZATION_ACCEPTED:1,OPTIMIZATION_WAS_CONSTRAINED:2},s=["Large","Medium"];function a(t,e){var i=this;this.image=new Image,this.loaded=!1,this.image.onload=function(){i.loaded=!0,e._onLoaded()},this.image.src=t.src,this.label=t.label||!1,this.credit=t.credit||!1}function d(t,e){var i=this;this.image=new Image,this.loaded=!1,this.image.onload=function(){i.loaded=!0,e._onLoaded()},this.flickrID=this.getFlickrID(t.src),this.callFlickrAPI(this.flickrID,i),this.label=t.label||!1,this.credit=t.credit||!1}function e(t){if(t.naturalWidth&&t.naturalHeight)return{width:t.naturalWidth,height:t.naturalHeight};var e=new Image;return e.src=t.src,{width:e.width,height:e.height}}function r(t){return{width:e(t).width,height:e(t).height,aspect:function(){return this.width/this.height}}}function c(t,e){t.classList?t.classList.add(e):t.className+=" "+e}function p(t,i){t.className=t.className.replace(/(\S+)\s*/g,function(t,e){return e===i?"":t}).replace(/^\s+/,"")}function i(t,e){o.body.textContent?t.textContent=e:t.innerText=e}function g(t){return n.getComputedStyle?{width:parseInt(getComputedStyle(t).width,10),height:parseInt(getComputedStyle(t).height,10)}:(w=t.getBoundingClientRect().right-t.getBoundingClientRect().left,h=t.getBoundingClientRect().bottom-t.getBoundingClientRect().top,{width:parseInt(w,10)||0,height:parseInt(h,10)||0})}function u(t){return-1!=t.indexOf("flickr.com/photos/")}function m(t,e){if("string"==typeof e||"number"==typeof e)leftPercent=parseInt(e,10);else{var i=t.getBoundingClientRect(),r=(i.top,o.body.scrollTop,i.left+o.body.scrollLeft),s=t.offsetWidth,a=(n=e).pageX?n.pageX:n.touches?n.touches[0].pageX:n.clientX+o.body.scrollLeft+o.documentElement.scrollLeft;leftPercent=(a-r)/s*100}var n;return leftPercent}function f(t,e){if("string"==typeof e||"number"==typeof e)topPercent=parseInt(e,10);else{var i=t.getBoundingClientRect(),r=i.top+o.body.scrollTop,s=(i.left,o.body.scrollLeft,t.offsetHeight),a=(n=e).pageY?n.pageY:n.touches?n.touches[0].pageY:n.clientY+o.body.scrollTop+o.documentElement.scrollTop;topPercent=(a-r)/s*100}var n;return topPercent}d.prototype={getFlickrID:function(t){var e=t.indexOf("flickr.com/photos/")+"flickr.com/photos/".length,i=t.substr(e);return-1==i.indexOf("/")?null:(0===i.indexOf("/")&&(i=i.substr(1)),id=i.split("/")[1],id)},callFlickrAPI:function(t,e){var i="https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=d90fc2d1f4acc584e08b8eaea5bf4d6c&photo_id="+t+"&format=json&nojsoncallback=1",r=new XMLHttpRequest;r.open("GET",i,!0),r.onload=function(){if(200<=r.status&&r.status<400){data=JSON.parse(r.responseText);var t=e.bestFlickrUrl(data.sizes.size);e.setFlickrImage(t)}else console.error("There was an error getting the picture from Flickr")},r.onerror=function(){console.error("There was an error getting the picture from Flickr")},r.send()},setFlickrImage:function(t){this.image.src=t},bestFlickrUrl:function(t){for(var e={},i=0;i<t.length;i++)e[t[i].label]=t[i].source;for(var r=0;r<s.length;r++)if(s[r]in e)return e[s[r]];return t[0].source}};var b={animate:!0,showLabels:!0,showCredits:!0,makeResponsive:!0};function t(t,e,i){var r,s;for(r in this.selector=t,this.options={animate:!0,showLabels:!0,showCredits:!0,makeResponsive:!0,startingPosition:"50%",mode:"horizontal",prevIcon:"",nextIcon:"",callback:null},this.options)r in i&&(this.options[r]=r in b?"string"!=typeof(s=i[r])?Boolean(s):!("false"===s||""===s):i[r]);2==e.length?(u(e[0].src)?this.imgBefore=new d(e[0],this):this.imgBefore=new a(e[0],this),u(e[1].src)?this.imgAfter=new d(e[1],this):this.imgAfter=new a(e[1],this)):console.warn("The images parameter takes two Image objects."),this.imgBefore.credit||this.imgAfter.credit?this.options.showCredits=!0:this.options.showCredits=!1}t.prototype={updateSlider:function(t,e){var i,r;i=(i="vertical"===this.options.mode?f(this.slider,t):m(this.slider,t)).toFixed(2)+"%",leftPercentNum=parseFloat(i),r=100-leftPercentNum+"%",0<leftPercentNum&&leftPercentNum<100&&(p(this.handle,"transition"),p(this.rightImage,"transition"),p(this.leftImage,"transition"),this.options.animate&&e&&(c(this.handle,"transition"),c(this.leftImage,"transition"),c(this.rightImage,"transition")),"vertical"===this.options.mode?(this.handle.style.top=i,this.leftImage.style.height=i,this.rightImage.style.height=r):(this.handle.style.left=i,this.leftImage.style.width=i,this.rightImage.style.width=r),this.sliderPosition=i)},getPosition:function(){return this.sliderPosition},displayLabel:function(t,e){label=o.createElement("div"),label.className="jx-label",label.setAttribute("tabindex",0),i(label,e),t.appendChild(label)},displayCredits:function(){credit=o.createElement("div"),credit.className="jx-credit",text="<em>Photo Credits:</em>",this.imgBefore.credit&&(text+=" <em>Before</em> "+this.imgBefore.credit),this.imgAfter.credit&&(text+=" <em>After</em> "+this.imgAfter.credit),credit.innerHTML=text,this.wrapper.appendChild(credit)},setStartingPosition:function(t){this.options.startingPosition=t},checkImages:function(){return r(this.imgBefore.image).aspect()==r(this.imgAfter.image).aspect()},calculateDims:function(t,e){var i=r(this.imgBefore.image).aspect();return t?e=t/i:e&&(t=e*i),{width:t,height:e,ratio:i}},responsivizeIframe:function(t){return t.height<n.innerHeight?1<=t.ratio&&(this.wrapper.style.paddingTop=parseInt((n.innerHeight-t.height)/2)+"px"):t.height>n.innerHeight&&(t=this.calculateDims(0,n.innerHeight),this.wrapper.style.paddingLeft=parseInt((n.innerWidth-t.width)/2)+"px"),this.options.showCredits&&(t.height-=13),t},setWrapperDimensions:function(){var t=g(this.wrapper).width,e=g(this.wrapper).height,i=this.calculateDims(t,e);n.location===n.parent.location||this.options.makeResponsive||(i=this.responsivizeIframe(i)),this.slider.style.height=parseInt(i.height)+"px",this.slider.style.width=parseInt(i.width)+"px"},optimizeWrapper:function(t){var e=l.OPTIMIZATION_ACCEPTED;return this.imgBefore.image.naturalWidth>=t&&this.imgAfter.image.naturalWidth>=t?(this.wrapper.style.width=t+"px",e=l.OPTIMIZATION_WAS_CONSTRAINED):this.imgAfter.image.naturalWidth<t?this.wrapper.style.width=this.imgAfter.image.naturalWidth+"px":this.wrapper.style.width=this.imgBefore.image.naturalWidth+"px",this.setWrapperDimensions(),e},_onLoaded:function(){this.imgBefore&&!0===this.imgBefore.loaded&&this.imgAfter&&!0===this.imgAfter.loaded&&(this.wrapper=o.querySelector(this.selector),c(this.wrapper,"juxtapose"),this.slider=o.createElement("div"),this.slider.className="jx-slider",this.wrapper.appendChild(this.slider),this.wrapper.style.width=e(this.imgBefore.image).width,this.setWrapperDimensions(),"horizontal"!=this.options.mode&&c(this.slider,this.options.mode),this.handle=o.createElement("div"),this.handle.className="jx-handle",this.rightImage=o.createElement("div"),this.rightImage.className="jx-image jx-right",this.rightImage.appendChild(this.imgAfter.image),this.leftImage=o.createElement("div"),this.leftImage.className="jx-image jx-left",this.leftImage.appendChild(this.imgBefore.image),this.labCredit=o.createElement("a"),this.labCredit.setAttribute("href","http://juxtapose.knightlab.com"),this.labCredit.setAttribute("target","_blank"),this.labCredit.className="jx-knightlab",this.labLogo=o.createElement("div"),this.labLogo.className="knightlab-logo",this.labCredit.appendChild(this.labLogo),this.projectName=o.createElement("span"),this.projectName.className="juxtapose-name",i(this.projectName,"JuxtaposeJS"),this.labCredit.appendChild(this.projectName),this.slider.appendChild(this.handle),this.slider.appendChild(this.leftImage),this.slider.appendChild(this.rightImage),this.leftArrow=o.createElement("div"),this.rightArrow=o.createElement("div"),this.control=o.createElement("div"),this.controller=o.createElement("div"),this.controllerPrev=o.createElement("i"),this.controllerNext=o.createElement("i"),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.controllerPrev.className=this.options.prevIcon,this.controllerNext.className=this.options.nextIcon,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.controller.appendChild(this.controllerPrev),this.controller.appendChild(this.controllerNext),this._init())},_init:function(){!1===this.checkImages()&&console.warn(this,"Check that the two images have the same aspect ratio for the slider to work correctly."),this.updateSlider(this.options.startingPosition,!1),!0===this.options.showLabels&&(this.imgBefore.label&&this.displayLabel(this.leftImage,this.imgBefore.label),this.imgAfter.label&&this.displayLabel(this.rightImage,this.imgAfter.label)),!0===this.options.showCredits&&this.displayCredits();var a=this;this.slider.addEventListener("mousedown",function(t){(t=t||n.event).preventDefault(),a.updateSlider(t,!0),animate=!0,this.addEventListener("mousemove",function(t){(t=t||n.event).preventDefault(),animate&&a.updateSlider(t,!1)}),this.addEventListener("mouseup",function(t){(t=t||n.event).preventDefault(),t.stopPropagation(),this.removeEventListener("mouseup",arguments.callee),animate=!1})}),this.slider.addEventListener("touchstart",function(t){(t=t||n.event).preventDefault(),t.stopPropagation(),a.updateSlider(t,!0),this.addEventListener("touchmove",function(t){(t=t||n.event).preventDefault(),t.stopPropagation(),a.updateSlider(event,!1)})}),n.addEventListener("orientationchange",function(){a.setWrapperDimensions()}),n.addEventListener("resize",function(){a.setWrapperDimensions()}),this.handle.addEventListener("keydown",function(t){var e=(t=t||n.event).which||t.keyCode,i=parseFloat(this.style.left);if(37==e){i-=1;var r=parseFloat(this.style.left)-1;a.updateSlider(r,!1),a.controller.setAttribute("aria-valuenow",i)}if(39==e){i+=1;var s=parseFloat(this.style.left)+1;a.updateSlider(s,!1),a.controller.setAttribute("aria-valuenow",i)}}),this.leftImage.addEventListener("keydown",function(t){var e=t.which||t.keyCode;13!=e&&32!=e||(a.updateSlider("90%",!0),a.controller.setAttribute("aria-valuenow",90))}),this.rightImage.addEventListener("keydown",function(t){var e=t.which||t.keyCode;13!=e&&32!=e||(a.updateSlider("10%",!0),a.controller.setAttribute("aria-valuenow",10))}),l.sliders.push(this),this.options.callback&&"function"==typeof this.options.callback&&this.options.callback(this)}},l.makeSlider=function(t,e){void 0===e&&(e=l.sliders.length);var i=t,r=i.querySelectorAll("img"),s={};i.getAttribute("data-animate")&&(s.animate=i.getAttribute("data-animate")),i.getAttribute("data-showlabels")&&(s.showLabels=i.getAttribute("data-showlabels")),i.getAttribute("data-showcredits")&&(s.showCredits=i.getAttribute("data-showcredits")),i.getAttribute("data-startingposition")&&(s.startingPosition=i.getAttribute("data-startingposition")),i.getAttribute("data-mode")&&(s.mode=i.getAttribute("data-mode")),i.getAttribute("data-makeresponsive")&&(s.mode=i.getAttribute("data-makeresponsive")),i.getAttribute("data-prev-icon")&&(s.prevIcon=i.getAttribute("data-prev-icon")),i.getAttribute("data-next-icon")&&(s.nextIcon=i.getAttribute("data-next-icon")),specificClass="juxtapose-"+e,c(t,specificClass),selector="."+specificClass,i.innerHTML?i.innerHTML="":i.innerText="",slider=new l.JXSlider(selector,[{src:r[0].src,label:r[0].getAttribute("data-label"),credit:r[0].getAttribute("data-credit")},{src:r[1].src,label:r[1].getAttribute("data-label"),credit:r[1].getAttribute("data-credit")}],s)},l.scanPage=function(t){for(var e=o.querySelectorAll(t),i=0;i<e.length;i++)"true"!==e[i].getAttribute("data-init")&&(e[i].setAttribute("data-init","true"),l.makeSlider(e[i],i))},l.JXSlider=t,n.juxtapose=l}(document,window),function(r,i){function t(t){var e=i[t];i[t]=function(t){return a(e(t))}}function s(t,e,i){return(i=this).attachEvent("on"+t,function(t){(t=t||r.event).preventDefault=t.preventDefault||function(){t.returnValue=!1},t.stopPropagation=t.stopPropagation||function(){t.cancelBubble=!0},e.call(i,t)})}function a(t,e){if(e=t.length)for(;e--;)t[e].addEventListener=s;else t.addEventListener=s;return t}r.addEventListener||(a([i,r]),"Element"in r?r.Element.prototype.addEventListener=s:(i.attachEvent("onreadystatechange",function(){a(i.all)}),t("getElementsByTagName"),t("getElementById"),t("createElement"),a(i.all)))}(window,document); |