j-gallery
Version:
a picture layout library
1 lines • 17 kB
JavaScript
"use strict";function _temporalAssertDefined(a,b,c){if(a===c)throw new ReferenceError(b+" is not defined - temporal dead zone");return!0}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _typeof(a){return a&&a.constructor===Symbol?"symbol":typeof a}var _temporalUndefined={},_createClass=function(){function a(a,b){var c,d;for(c=0;c<b.length;c++)d=b[c],d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}();!function(a,b){"function"==typeof define&&define.amd?define(b):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=b:a.Gallery=b()}(window,function(){var a=_temporalUndefined;return a=function(){function a(b){_classCallCheck(this,_temporalAssertDefined(a,"Gallery",_temporalUndefined)&&a),this.container=document.querySelector(b),this.galleryBox=null,this.options={layout:2,waterfallColumn:4,fullScreen:!1,puzzleHeight:600,barrelMinHeight:200,gutter:{x:10,y:10},images:[]},this.columns=[],this.nPhotos=[],this.nPhotosWrap=null,this.resizeTimer=null,this.onresize=!1,this.imgIndex=0,this.cacheWidth=this.container.clientWidth,this.init()}return _createClass(_temporalAssertDefined(a,"Gallery",_temporalUndefined)&&a,[{key:"init",value:function(){var a=this;window.onresize=function(){a.onresize&&a.resizeUpdate(200)},this.bindClickHandle(),this.setView()}},{key:"setImage",value:function(a,b){"string"==typeof a&&(a=[a]);for(var c in this.options)this.options[_temporalAssertDefined(c,"key",_temporalUndefined)&&c]=b[_temporalAssertDefined(c,"key",_temporalUndefined)&&c]||this.options[_temporalAssertDefined(c,"key",_temporalUndefined)&&c];this.galleryBox=document.createElement("div"),this.galleryBox.className="galleryBox",this.container.appendChild(this.galleryBox),this.addImage(a),this.setLayout(b.layout,!0)}},{key:"getImageDomElements",value:function(){return this.options.images}},{key:"addImage",value:function(a){var c,b=this;a=_temporalUndefined,c=_temporalUndefined,a=arguments.length<=0||void 0===arguments[0]?void 0:arguments[0],c=arguments.length<=1||void 0===arguments[1]?!1:arguments[1],"string"==typeof(_temporalAssertDefined(a,"image",_temporalUndefined)&&a)&&(_temporalAssertDefined(_temporalAssertDefined(a,"image",_temporalUndefined)&&a,"image",_temporalUndefined),a=[_temporalAssertDefined(_temporalAssertDefined(a,"image",_temporalUndefined)&&a,"image",_temporalUndefined)&&_temporalAssertDefined(a,"image",_temporalUndefined)&&a]),(_temporalAssertDefined(a,"image",_temporalUndefined)&&a).forEach(function(a){var e=_temporalUndefined,f=_temporalUndefined;return e=document.createElement("div"),f=new Image,(_temporalAssertDefined(f,"img",_temporalUndefined)&&f).src=a,(_temporalAssertDefined(e,"wrap",_temporalUndefined)&&e).appendChild(_temporalAssertDefined(f,"img",_temporalUndefined)&&f),_temporalAssertDefined(c,"bool",_temporalUndefined)&&c?((_temporalAssertDefined(f,"img",_temporalUndefined)&&f).onload=function(){b.options.images.push(_temporalAssertDefined(e,"wrap",_temporalUndefined)&&e),b.addBox(_temporalAssertDefined(e,"wrap",_temporalUndefined)&&e,(_temporalAssertDefined(f,"img",_temporalUndefined)&&f).width,(_temporalAssertDefined(f,"img",_temporalUndefined)&&f).height)},void 0):(b.options.images.push(_temporalAssertDefined(e,"wrap",_temporalUndefined)&&e),!1)})}},{key:"removeImage",value:function(a){var b=_temporalUndefined;"string"==typeof a&&(a=[a]),b=this.options.images,a.forEach(function(a){var c=_temporalUndefined;c=(_temporalAssertDefined(b,"imageArr",_temporalUndefined)&&b).indexOf(a),(_temporalAssertDefined(c,"index",_temporalUndefined)&&c)>0&&(_temporalAssertDefined(b,"imageArr",_temporalUndefined)&&b).splice(_temporalAssertDefined(c,"index",_temporalUndefined)&&c,1)}),this.updateLayout()}},{key:"setLayout",value:function(a,b){var c=this;switch(a=_temporalUndefined,b=_temporalUndefined,a=arguments.length<=0||void 0===arguments[0]?2:arguments[0],b=arguments.length<=1||void 0===arguments[1]?void 0:arguments[1],this.options.layout=_temporalAssertDefined(a,"layout",_temporalUndefined)&&a,this.clearLayout(),_temporalAssertDefined(a,"layout",_temporalUndefined)&&a){case 1:this.onresize=!1,this.setPuzzle();break;case 2:if(this.onresize=!1,_temporalAssertDefined(b,"init",_temporalUndefined)&&b)return window.onload=function(){c.setWaterFall()},!1;this.setWaterFall();break;case 3:if(this.onresize=!0,_temporalAssertDefined(b,"init",_temporalUndefined)&&b)return window.onload=function(){c.setBarrel()},!1;this.setBarrel()}}},{key:"getLayout",value:function(){return this.options.layout}},{key:"clearLayout",value:function(){var a=_temporalUndefined;if(a=this.galleryBox,this.imgIndex=0,_temporalAssertDefined(a,"node",_temporalUndefined)&&a)for(;(_temporalAssertDefined(a,"node",_temporalUndefined)&&a).firstChild;)(_temporalAssertDefined(a,"node",_temporalUndefined)&&a).firstChild.remove();this.options.images.forEach(function(a){a.style.width="",a.style.margin="",a.style.border=""})}},{key:"setPuzzle",value:function(){var e,a=this,b=_temporalUndefined,c=_temporalUndefined,d=_temporalUndefined;b=this.getImageDomElements().slice(0,6),c=this.options.puzzleHeight,d=parseInt(window.getComputedStyle(this.container,null).getPropertyValue("width")),this.galleryBox.style.height=this.options.puzzleHeight+"px",(_temporalAssertDefined(b,"images",_temporalUndefined)&&b).forEach(function(b,c){b.className="puzzleBox",b.style.height="",b.firstChild.setAttribute("index",c),a.galleryBox.appendChild(b)}),this.galleryBox.className="galleryBox count"+String((_temporalAssertDefined(b,"images",_temporalUndefined)&&b).length),5===(_temporalAssertDefined(b,"images",_temporalUndefined)&&b).length&&(e=_temporalUndefined,e=Math.ceil((_temporalAssertDefined(d,"boxWidth",_temporalUndefined)&&d)/3),(_temporalAssertDefined(b,"images",_temporalUndefined)&&b)[1].style.height=(_temporalAssertDefined(e,"sizeL",_temporalUndefined)&&e)+"px",(_temporalAssertDefined(b,"images",_temporalUndefined)&&b)[2].style.height=(_temporalAssertDefined(c,"boxHeight",_temporalUndefined)&&c)-(_temporalAssertDefined(e,"sizeL",_temporalUndefined)&&e)+"px")}},{key:"setWaterFall",value:function(){var d,e,f,a=this,b=_temporalUndefined,c=_temporalUndefined;for(b=this.options.waterfallColumn,this.galleryBox.style.height="",this.columns=[],d=0,e=_temporalAssertDefined(b,"col",_temporalUndefined)&&b;e>d;d++)f=_temporalUndefined,f=document.createElement("div"),(_temporalAssertDefined(f,"column",_temporalUndefined)&&f).className="waterfallColumn",(_temporalAssertDefined(f,"column",_temporalUndefined)&&f).style.width=String(100/(_temporalAssertDefined(b,"col",_temporalUndefined)&&b))+"%",this.columns.push(_temporalAssertDefined(f,"column",_temporalUndefined)&&f),this.galleryBox.appendChild(_temporalAssertDefined(f,"column",_temporalUndefined)&&f);c=this.getImageDomElements(),(_temporalAssertDefined(c,"images",_temporalUndefined)&&c).forEach(function(b){return a.addBox(b)})}},{key:"setBarrel",value:function(){var a=this,b=_temporalUndefined;this.minRatio=this.galleryBox.clientWidth/this.options.barrelMinHeight,this.nPhotos=[],this.nPhotosWrap=null,b=this.getImageDomElements(),(_temporalAssertDefined(b,"images",_temporalUndefined)&&b).forEach(function(b){return a.addBox(b,b.firstChild.width,b.firstChild.height)})}},{key:"getMinWaterfallColumn",value:function(){return this.columns.sort(function(a,b){return a.clientHeight-b.clientHeight})[0]}},{key:"appendBarrel",value:function(a,b,c,d,e){var f=this,g=_temporalUndefined,h=_temporalUndefined,i=_temporalUndefined,j=_temporalUndefined;g=this.nPhotos,h=this.nPhotosWrap,i=(_temporalAssertDefined(h,"nPhotosWrap",_temporalUndefined)&&h).getElementsByClassName("barrelBox"),(_temporalAssertDefined(g,"nPhotos",_temporalUndefined)&&g).push({url:a,ratio:b}),c.className="barrelBox",c.style.marginRight=this.options.gutter.x+"px",(_temporalAssertDefined(h,"nPhotosWrap",_temporalUndefined)&&h).appendChild(c),j=(_temporalAssertDefined(g,"nPhotos",_temporalUndefined)&&g).reduce(function(a,b){return a+b.ratio},0),(_temporalAssertDefined(j,"total",_temporalUndefined)&&j)>this.minRatio&&function(){var a=_temporalUndefined,b=_temporalUndefined,k=_temporalUndefined;a=(_temporalAssertDefined(g,"nPhotos",_temporalUndefined)&&g).pop(),b=f.galleryBox.clientWidth-((_temporalAssertDefined(g,"nPhotos",_temporalUndefined)&&g).length-1)*f.options.gutter.x,k=(_temporalAssertDefined(_temporalAssertDefined(b,"conHeight",_temporalUndefined)&&b,"conHeight",_temporalUndefined)&&_temporalAssertDefined(b,"conHeight",_temporalUndefined)&&b)/((_temporalAssertDefined(j,"total",_temporalUndefined)&&j)-(_temporalAssertDefined(_temporalAssertDefined(a,"lastPhoto",_temporalUndefined)&&a,"lastPhoto",_temporalUndefined)&&_temporalAssertDefined(a,"lastPhoto",_temporalUndefined)&&a).ratio),(_temporalAssertDefined(h,"nPhotosWrap",_temporalUndefined)&&h).style.height=(_temporalAssertDefined(_temporalAssertDefined(k,"rowHeight",_temporalUndefined)&&k,"rowHeight",_temporalUndefined)&&_temporalAssertDefined(k,"rowHeight",_temporalUndefined)&&k)+"px",Array.from(_temporalAssertDefined(i,"nPhotosDoms",_temporalUndefined)&&i).forEach(function(a,b,c){return b===c.length-1?!1:(a.style.width=f.nPhotos[b].ratio*(_temporalAssertDefined(_temporalAssertDefined(k,"rowHeight",_temporalUndefined)&&k,"rowHeight",_temporalUndefined)&&_temporalAssertDefined(k,"rowHeight",_temporalUndefined)&&k)+"px",void 0)}),c.remove(),f.nPhotos=[],f.addBox(c,d,e)}()}},{key:"addBox",value:function(a,b,c){var d,e;switch(a.style.height="",a.firstChild.setAttribute("index",this.imgIndex++),this.options.layout){case 1:this.setPuzzle();break;case 2:d=_temporalUndefined,d=this.getMinWaterfallColumn(),a.className="waterfallBox",a.style.borderBottom=this.options.gutter.y+"px solid transparent",a.style.borderRight=this.options.gutter.x+"px solid transparent",d.appendChild(a);break;case 3:this.nPhotos.length||(this.nPhotosWrap=document.createElement("div"),this.nPhotosWrap.className="barrelRow",this.nPhotosWrap.style.marginBottom=this.options.gutter.y+"px",this.nPhotosWrap.style.height=this.options.barrelMinHeight+"px",this.galleryBox.appendChild(this.nPhotosWrap)),e=_temporalUndefined,e=b/c,this.appendBarrel(a.firstChild.src,e,a,b,c)}}},{key:"updateLayout",value:function(){this.setLayout(this.options.layout)}},{key:"setPuzzleHeight",value:function(){var a=_temporalUndefined;return a=arguments.length<=0||void 0===arguments[0]?500:arguments[0],!Number.isInteger(_temporalAssertDefined(a,"height",_temporalUndefined)&&a)||(_temporalAssertDefined(a,"height",_temporalUndefined)&&a)<0?(console.error("拼图布局高度必须是正整数"),!1):(this.options.puzzleHeight=_temporalAssertDefined(a,"height",_temporalUndefined)&&a,this.updateLayout(),!0)}},{key:"setGutter",value:function(){var a=_temporalUndefined,b=_temporalUndefined;return a=arguments.length<=0||void 0===arguments[0]?10:arguments[0],b=arguments.length<=1||void 0===arguments[1]?10:arguments[1],(_temporalAssertDefined(a,"x",_temporalUndefined)&&a)<0||(_temporalAssertDefined(b,"y",_temporalUndefined)&&b)<0?(console.error("图片间距必须大于等于0"),!1):(this.options.gutter={x:_temporalAssertDefined(a,"x",_temporalUndefined)&&a,y:_temporalAssertDefined(b,"y",_temporalUndefined)&&b},this.updateLayout(),!0)}},{key:"setWaterfallColumn",value:function(){var a=_temporalUndefined;return a=arguments.length<=0||void 0===arguments[0]?4:arguments[0],!Number.isInteger(_temporalAssertDefined(a,"column",_temporalUndefined)&&a)||(_temporalAssertDefined(a,"column",_temporalUndefined)&&a)<0?(console.error("瀑布流列数必须为正整数"),!1):(this.options.waterfallColumn=_temporalAssertDefined(a,"column",_temporalUndefined)&&a,this.updateLayout(),!0)}},{key:"enableFullscreen",value:function(){this.options.fullScreen=!0}},{key:"disableFullscreen",value:function(){this.options.fullScreen=!1}},{key:"isFullscreenEnabled",value:function(){return this.options.fullScreen}},{key:"setBarrelHeight",value:function(){var a=_temporalUndefined;return a=arguments.length<=0||void 0===arguments[0]?200:arguments[0],!Number.isInteger(_temporalAssertDefined(a,"min",_temporalUndefined)&&a)||(_temporalAssertDefined(a,"min",_temporalUndefined)&&a)<0?(console.error("木桶布局最小高度必须为正整数"),!1):(this.options.barrelMinHeight=_temporalAssertDefined(a,"min",_temporalUndefined)&&a,this.updateLayout(),void 0)}},{key:"getBarrelHeightMin",value:function(){return this.options.barrelMinHeight}},{key:"resizeUpdate",value:function(a){var b=this;this.resizeTimer||this.cacheWidth!==this.container.clientWidth&&(this.resizeTimer=setTimeout(function(){b.resizeTimer=null,b.updateLayout(),b.cacheWidth=b.container.clientWidth},a))}},{key:"setView",value:function(){var a=_temporalUndefined;a='\n <div class="gallery-view">\n <span class="gallery-view-close">X</span>\n <div class="gallery-view-img">\n <img class="gallery-viewImg" src="http://placehold.it/1105x645/449F93/fff" />\n </div>\n <div class="gallery-view-list"></div>\n </div>\n ',this.container.innerHTML+=_temporalAssertDefined(a,"view",_temporalUndefined)&&a,this.viewImg=document.querySelector(".gallery-viewImg"),this.view=document.querySelector(".gallery-view")}},{key:"setThumbnail",value:function(a){var g,h,b=_temporalUndefined,c=_temporalUndefined,d=_temporalUndefined,e=_temporalUndefined,f=_temporalUndefined;if(b=document.querySelector(".gallery-view-list"),c=this.getImageDomElements(),d=(_temporalAssertDefined(b,"wrap",_temporalUndefined)&&b).getElementsByTagName("img"),e=(_temporalAssertDefined(c,"imgs",_temporalUndefined)&&c).length,(_temporalAssertDefined(e,"len",_temporalUndefined)&&e)>5&&(_temporalAssertDefined(_temporalAssertDefined(e,"len",_temporalUndefined)&&e,"len",_temporalUndefined),e=5),(_temporalAssertDefined(d,"wrapImgs",_temporalUndefined)&&d).length!==(_temporalAssertDefined(e,"len",_temporalUndefined)&&e)){for(g=0;g<(_temporalAssertDefined(e,"len",_temporalUndefined)&&e);g++)h=_temporalUndefined,h=document.createElement("img"),(_temporalAssertDefined(b,"wrap",_temporalUndefined)&&b).appendChild(_temporalAssertDefined(h,"image",_temporalUndefined)&&h);_temporalAssertDefined(_temporalAssertDefined(d,"wrapImgs",_temporalUndefined)&&d,"wrapImgs",_temporalUndefined),d=Array.from((_temporalAssertDefined(_temporalAssertDefined(b,"wrap",_temporalUndefined)&&b,"wrap",_temporalUndefined)&&_temporalAssertDefined(b,"wrap",_temporalUndefined)&&b).getElementsByTagName("img"))}for(f=a,a>1&&a<(_temporalAssertDefined(c,"imgs",_temporalUndefined)&&c).length-2?(_temporalAssertDefined(_temporalAssertDefined(f,"imageIndex",_temporalUndefined)&&f,"imageIndex",_temporalUndefined),f-=2):1>=a?(_temporalAssertDefined(_temporalAssertDefined(f,"imageIndex",_temporalUndefined)&&f,"imageIndex",_temporalUndefined),f=0):a>=(_temporalAssertDefined(c,"imgs",_temporalUndefined)&&c).length-2&&(_temporalAssertDefined(_temporalAssertDefined(f,"imageIndex",_temporalUndefined)&&f,"imageIndex",_temporalUndefined),f=(_temporalAssertDefined(_temporalAssertDefined(c,"imgs",_temporalUndefined)&&c,"imgs",_temporalUndefined)&&_temporalAssertDefined(c,"imgs",_temporalUndefined)&&c).length-(_temporalAssertDefined(_temporalAssertDefined(e,"len",_temporalUndefined)&&e,"len",_temporalUndefined)&&_temporalAssertDefined(e,"len",_temporalUndefined)&&e)),g=0;g<(_temporalAssertDefined(e,"len",_temporalUndefined)&&e);g++,_temporalAssertDefined(f,"imageIndex",_temporalUndefined),f++)(_temporalAssertDefined(d,"wrapImgs",_temporalUndefined)&&d)[_temporalAssertDefined(g,"i",_temporalUndefined)&&g].className="",(_temporalAssertDefined(d,"wrapImgs",_temporalUndefined)&&d)[_temporalAssertDefined(g,"i",_temporalUndefined)&&g].src=(_temporalAssertDefined(c,"imgs",_temporalUndefined)&&c)[_temporalAssertDefined(f,"imageIndex",_temporalUndefined)&&f].firstChild.src,(_temporalAssertDefined(d,"wrapImgs",_temporalUndefined)&&d)[_temporalAssertDefined(g,"i",_temporalUndefined)&&g].setAttribute("index",_temporalAssertDefined(f,"imageIndex",_temporalUndefined)&&f),(_temporalAssertDefined(f,"imageIndex",_temporalUndefined)&&f)===a&&(_temporalAssertDefined(d,"wrapImgs",_temporalUndefined)&&d)[_temporalAssertDefined(g,"i",_temporalUndefined)&&g].classList.add("gallery-view--current")}},{key:"bindClickHandle",value:function(){var a=this;this.container.addEventListener("click",function(b){if("IMG"===b.target.nodeName&&"gallery-viewImg"!==b.target.className&&a.options.fullScreen){var c=_temporalUndefined;a.viewImg.src=b.target.src,a.view.style.display="block",c=parseInt(b.target.getAttribute("index")),a.setThumbnail(_temporalAssertDefined(c,"index",_temporalUndefined)&&c)}"gallery-view-close"===b.target.className&&(a.view.style.display="none")})}}]),_temporalAssertDefined(a,"Gallery",_temporalUndefined)&&a}(),_temporalAssertDefined(a,"Gallery",_temporalUndefined)&&a});