1 line
No EOL
7.2 KiB
JavaScript
1 line
No EOL
7.2 KiB
JavaScript
define("zoomer",["queue","jquery","d3","picture-book","underscore"],function(i,o,s,e,u){c={};var a="/assets/images/syria",r={},h={syria:[{name:"09.jpg",scale:1/.0057},{name:"08.jpg",scale:1/.0114},{name:"07.jpg",scale:1/.0228},{name:"06.jpg",scale:1/.0456},{name:"05.jpg",scale:1/.0912},{name:"04.jpg",scale:1/.184},{name:"03.jpg",scale:1/.368},{name:"02.jpg",scale:1/.736},{name:"01.jpg",scale:1/1.472},{name:"00.jpg",scale:1/2.944}]},d=new e;function g(){var n,i,a,e=d.activeBook;I!==e&&(I=e,n=[],i=[],a=[],u.each(e.pages,function(e){a.push(e.position),n.push(+e.node.getAttribute("data-pb-zoom"));var t=+e.node.getAttribute("data-pb-focus-x"),e=+e.node.getAttribute("data-pb-focus-y");i.push([t,e])}),t=s.scale.linear().domain(a).range(n).clamp(!0),focusScale=s.scale.linear().domain(a).range(i).clamp(!0),p=A?1.5*t(e.progress):t(e.progress),e.pages[0].node.getAttribute("data-pb-zoom"),e.pages[e.pages.length-1].node.getAttribute("data-pb-zoom")),y()||(e.minPage.node.getAttribute("data-pb-zoom"),e.maxPage.node.getAttribute("data-pb-zoom"),f=t(e.progress),v=focusScale(e.progress))}function l(e,t){var n,i=a+"/"+e.name;r.hasOwnProperty(e.name)?(e.imageObj=r[e.name],t(null,e)):((n=new Image).src=i,e.imageObj=n,r[e.name]=e.imageObj,n.onload=function(){t(null,e)})}var t,m={syria:.0057},p=.0057,f=.0057,b=[.5,.5],v=[.5,.5],w=.015,x=.6,I="",A=window.innerWidth<600;function P(e,t,n){var i=n.slug,a=n.width,o=n.height,s=n.ctx,r=(n.zoom=e,n.coverDim=window.innerWidth>window.innerHeight?a:o,n.coverDim),i=function(o,e){var s,r,c,d,g;o*=.9,u.each(h[e],function(e){var t=e.showAt=1/e.scale,n=Math.abs(t-o),i=void 0===s,a=void 0===c;t<=o&&(i||n<s.distance)&&((s=e).distance=n,0<=e-1)&&(r=e-1),o<=t&&(a||n<c.distance)&&((c=e).distance=n),(i||t<d.showAt)&&((d=e).distance=n),(a||t>g.showAt)&&((g=e).distance=n)}),void 0===s&&(s=d);void 0===r&&(r=d);void 0===c&&(c=g);return e=(o-s.showAt)/(c.showAt-s.showAt),e=isNaN(e)?0:isFinite(e)?e:1,{loImage:s,bgImage:r,hiImage:c,progress:e}}(e,i),c=i.hiImage,d=i.loImage,t=(i.bgImage,A&&(t[1]=x),[t[0]*a,t[1]*o]);A&&e<.02&&"syria"===n.slug&&(s.fillStyle="#152735",s.fillRect(0,0,a,o)),d.scale;s.save(),s.translate(t[0],t[1]),s.scale(e,e),s.save(),s.scale(d.scale,d.scale),s.globalAlpha=1,s.drawImage(d.imageObj,-r/2,-r/2,r,r),s.restore(),s.save(),s.scale(c.scale,c.scale),s.globalAlpha=+i.progress,s.drawImage(c.imageObj,-r/2,-r/2,r,r),s.restore(),s.restore(),e<.02&&n.slug}function y(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry/.test(navigator.userAgent)}return function(){var a,t,e,n;y()||(e="syria",n=c={},c.slug=e,c.container=s.select("#zoomer-"+e),c.zoomer=c.container.select(".g-zoomer"),c.width=parseInt(c.zoomer.style("width")),c.height=parseInt(c.zoomer.style("height")),c.canvas=c.zoomer.append("canvas").datum(function(){return{slug:e}}).attr("width",c.width).attr("height",c.height).style("width",c.width+"px").style("height",c.height+"px"),c.ctx=c.canvas.node().getContext("2d"),n=(a=n).slug,t=i(1),h[n].forEach(function(e){t.defer(l,e)}),t.awaitAll(function(e,t){n=a,o("#zoomer-syria").addClass("show");var n,i=n;P(m[i.slug],b,i),requestAnimationFrame(function e(){var t,n;d.activeBook&&i.slug===d.activeBook.slug&&(n=(t={z:f-p,f:[v[0]-b[0],v[1]-b[1]]}).z<0?Math.pow(w,.65):w,t.z=t.z*n,t.f=[t.f[0]*n,t.f[1]*n],p+=t.z,b=[b[0]+t.f[0],b[1]+t.f[1]],P(p,b,i)),requestAnimationFrame(e)})}),window.addEventListener("resize",function(e){c.width=parseInt(c.zoomer.style("width")),c.height=parseInt(c.zoomer.style("height")),c.canvas.attr("width",c.width).attr("height",c.height).style("width",c.width+"px").style("height",c.height+"px")})),d.init(g)}}),define("picture-book",[],function(){/iPad|iPhone/.test(navigator.userAgent),/Android/.test(navigator.userAgent);var n=/Android|webOS|iPhone|iPad|iPod|BlackBerry/.test(navigator.userAgent)&&!(navigator.userAgent.match(/(iPad|iPhone);.*CPU.*OS [8|9]_\d/i)&&-1<navigator.userAgent.indexOf("Safari")&&-1==navigator.userAgent.indexOf("CriOS")||-1<navigator.userAgent.indexOf("Twitter"));return function(e){var c=0;function t(){return window.scrollY}this.init=function(e){var t=this;this.books.forEach(function(e){e.datum=[].slice.call(e.node.attributes).filter(function(e){return 0===e.name.indexOf("data-pb-")}).map(function(e){return{name:e.name.replace("data-pb-",""),value:+e.value}})}),document.addEventListener("scroll",function(){t.scroll()},!1),document.addEventListener("resize",function(){t.resize()},!1),n&&(document.body.addEventListener("touchstart",function(){t.scroll()},!1),document.body.addEventListener("touchmove",function(){t.scroll()},!1),document.body.addEventListener("touchend",function(){t.scroll()},!1)),t.update=e,t.scroll()},this.books=[].map.call(document.querySelectorAll(".g-picture-book"),function(e){return{node:e,slug:e.getAttribute("data-slug"),bgNode:e.querySelector(".g-picture-book__bg"),pages:[].map.call(e.querySelectorAll(".g-picture-book__page"),function(e){return{node:e}})}}),this.scroll=function(){var a=this,s=t(),r=!1;this.scan(),this.books.forEach(function(o,e){var t,n=s-c-o.rect.top,i=s-c-o.rect.bottom+o.bgRect.height;n<=0&&i<=0?(o.bgNode.classList.remove("g-fixed"),o.bgNode.classList.remove("g-bottom")):0<i?(o.bgNode.classList.remove("g-fixed"),o.bgNode.classList.add("g-bottom")):(a.activeBook=o,r=!0,o.bgNode.classList.add("g-fixed"),o.bgNode.classList.remove("g-bottom"),o.pages.length&&(i=o.pages[0],t=o.pages[o.pages.length-1],i.pxPosition=i.rect.middle-o.rect.top,t.pxPosition=t.rect.middle-o.rect.top,n=n-i.pxPosition+o.bgRect.height/2,i=o.rect.height-i.pxPosition-(o.rect.height-t.pxPosition),o.progress=n/i,o.minIndex=0,o.pages.forEach(function(e,t){var n=s-c-e.rect.top+.5*innerHeight,i=s-c-(e.rect.top+e.rect.height/2)+.5*innerHeight,a=s-c-e.rect.bottom+.5*innerHeight;e.progress=(e.rect.top+e.rect.height/2)/innerHeight,e.midDistance=i,0<=a?(e.distance=a,o.minIndex=t):n<=0?e.distance=n:0<n&&a<0&&(e.distance=0,o.minIndex=t)}),o.maxIndex=Math.min(o.minIndex+1,o.pages.length-1),o.minPage=o.pages[o.minIndex],o.maxPage=o.pages[o.maxIndex],o.remainder=o.minIndex===o.maxIndex?0:1-Math.max(0,-o.minPage.distance/(o.maxPage.distance-o.minPage.distance)),o.middleRemainder=o.minIndex===o.maxIndex?0:1-Math.max(0,o.minPage.midDistance/innerHeight),o.remainder=a.easeInOutQuad(o.remainder),a.activePage=o.minPage,a.update(a.activePage)))}),r||(a.activeBook=null)},this.scan=function(){c=t(),this.books.forEach(function(e){e.rect=e.node.getBoundingClientRect(),e.bgRect=e.bgNode.getBoundingClientRect(),e.pages.forEach(function(e){e.rect=e.node.getBoundingClientRect(),e.rect.middle=e.rect.top+e.rect.height/2});var t=e.pages[0],n=e.pages[e.pages.length-1];e.pages.forEach(function(e){e.position=(e.rect.middle-t.rect.middle)/(n.rect.middle-t.rect.middle),e.node.setAttribute("data-pb-pos",e.position)})})},this.resize=function(){this.scan(),this.scroll()},this.easeLinear=function(e){return e},this.easeInOutSinusoidal=function(e){return(Math.sin(e*Math.PI-Math.PI/2)+1)/2},this.easeInQuad=function(e){return e*e},this.easeOutQuad=function(e){return 1-this.easeInQuad(1-e)},this.easeInOutQuad=function(e){return e<.5?this.easeInQuad(2*e)/2:1-this.easeInQuad(2*(1-e))/2},this.easeInCubic=function(e){return Math.pow(e,3)},this.easeOutCubic=function(e){return 1-this.easeInCubic(1-e)},this.easeInOutCubic=function(e){return e<.5?this.easeInCubic(2*e)/2:1-this.easeInCubic(2*(1-e))/2}}}); |