j-gallery/example/node_modules/j-gallery/dist/gallery.min.js

a picture layout library

"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}(function(root,factory){if(typeof define==="function"&&define.amd){define(factory)}else if((typeof exports==="undefined"?"undefined":_typeof(exports))==="object"){module.exports=factory}else{root.Gallery=factory()}})(window,function(){"use strict";var Gallery=function(){function Gallery(containerSelector){_classCallCheck(this,Gallery);this.container=document.querySelector(containerSelector);this.options={layout:2,waterfallColumn:4,fullScreen:false,puzzleHeight:600,barrelMinHeight:200,gutter:{x:10,y:10},images:[]};this.galleryBox=null;this.columns=[];this.nPhotos=[];this.nPhotosWrap=null;this.resizeTimer=null;this.onresize=false;this.imgIndex=0;this.cacheWidth=this.container.clientWidth;this.init()}_createClass(Gallery,[{key:"init",value:function init(){var _this=this;window.onresize=function(){if(_this.onresize){_this.resizeUpdate(200)}};this.bindClickHandle();this.setView()}},{key:"setImage",value:function setImage(image,option){if(typeof image==="string"){image=[image]}for(var key in this.options){this.options[key]=option[key]||this.options[key]}var galleryBox=this.galleryBox=document.createElement("div");galleryBox.className="galleryBox";this.container.appendChild(galleryBox);this.addImage(image);this.setLayout(option.layout,true)}},{key:"getImageDomElements",value:function getImageDomElements(){return this.options.images}},{key:"addImage",value:function addImage(image){var _this2=this;var bool=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;if(typeof image==="string"){image=[image]}image.forEach(function(imgUrl){_this2.createImage(imgUrl,bool)})}},{key:"createImage",value:function createImage(url,bool){var _this3=this;var wrap=document.createElement("div");var img=new Image;img.src=url;wrap.appendChild(img);if(!bool){this.options.images.push(wrap);return false}img.onload=function(){_this3.options.images.push(wrap);_this3.addBox(wrap,img.width,img.height)}}},{key:"removeImage",value:function removeImage(image){if(typeof image==="string"){image=[image]}var imageArr=this.options.images;image.forEach(function(ele){var index=imageArr.indexOf(ele);if(index>0){imageArr.splice(index,1)}});this.updateLayout()}},{key:"setLayout",value:function setLayout(){var _this4=this;var layout=arguments.length>0&&arguments[0]!==undefined?arguments[0]:2;var init=arguments[1];this.options.layout=layout;this.clearLayout();switch(layout){case 1:this.onresize=false;this.setPuzzle();break;case 2:this.onresize=false;if(init){window.onload=function(){return _this4.setWaterFall()};return false}this.setWaterFall();break;case 3:this.onresize=true;if(init){window.onload=function(){return _this4.setBarrel()};return false}this.setBarrel()}}},{key:"getLayout",value:function getLayout(){return this.options.layout}},{key:"clearLayout",value:function clearLayout(){var node=this.galleryBox;node.style.height="";this.imgIndex=0;if(node){while(node.firstChild){node.firstChild.remove()}}this.options.images.forEach(function(img){img.style.width="";img.style.margin="";img.style.border=""})}},{key:"setPuzzle",value:function setPuzzle(){var galleryBox=this.galleryBox;var images=this.getImageDomElements().slice(0,6);var boxHeight=this.options.puzzleHeight;var boxWidth=parseInt(window.getComputedStyle(this.container,null).getPropertyValue("width"));galleryBox.style.height=boxHeight+"px";images.forEach(function(img,i){img.className="puzzleBox";img.style.height="";img.firstChild.setAttribute("index",i);galleryBox.appendChild(img)});galleryBox.className="galleryBox count"+images.length;if(images.length===5){var sizeL=Math.ceil(boxWidth/3);images[1].style.height=sizeL+"px";images[2].style.height=boxHeight-sizeL+"px"}}},{key:"setWaterFall",value:function setWaterFall(){var _this5=this;var col=this.options.waterfallColumn;this.columns=[];for(var i=0,l=col;i<l;i++){var column=document.createElement("div");column.className="waterfallColumn";column.style.width=100/col+"%";this.columns.push(column);this.galleryBox.appendChild(column)}var images=this.getImageDomElements();images.forEach(function(img){return _this5.addBox(img)})}},{key:"setBarrel",value:function setBarrel(){var _this6=this;this.minRatio=this.galleryBox.clientWidth/this.options.barrelMinHeight;this.nPhotos=[];this.nPhotosWrap=null;var images=this.getImageDomElements();images.forEach(function(img){return _this6.addBox(img,img.firstChild.width,img.firstChild.height)})}},{key:"getMinWaterfallColumn",value:function getMinWaterfallColumn(){return this.columns.sort(function(a,b){return a.clientHeight-b.clientHeight})[0]}},{key:"appendBarrel",value:function appendBarrel(url,ratio,dom,wid,hei){var nPhotos=this.nPhotos;var gutterX=this.options.gutter.x;var nPhotosWrap=this.nPhotosWrap;var nPhotosDoms=nPhotosWrap.querySelectorAll(".barrelBox");nPhotos.push({url:url,ratio:ratio});dom.className="barrelBox";dom.style.marginRight=gutterX+"px";nPhotosWrap.appendChild(dom);var total=nPhotos.reduce(function(a,b){return a+b.ratio},0);if(total>this.minRatio){var lastPhoto=nPhotos.pop();var conHeight=this.galleryBox.clientWidth-(nPhotos.length-1)*gutterX;var rowHeight=conHeight/(total-lastPhoto.ratio);nPhotosWrap.style.height=rowHeight+"px";Array.from(nPhotosDoms).forEach(function(wrap,i,self){if(i===self.length-1)return false;wrap.style.width=nPhotos[i].ratio*rowHeight+"px"});dom.remove();this.nPhotos=[];this.addBox(dom,wid,hei,true)}}},{key:"addBox",value:function addBox(){for(var _len=arguments.length,args=Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}var box=args[0];var bool=args[3];box.style.height="";if(!bool){box.firstChild.setAttribute("index",this.imgIndex++)}var funcNameArr=["setPuzzle","addWaterFall","addBarrel"];var funcName=funcNameArr[this.options.layout-1];var func=this[funcName];func&&func.apply(this,args)}},{key:"addWaterFall",value:function addWaterFall(box){var min=this.getMinWaterfallColumn();var gutter=this.options.gutter;box.className="waterfallBox";box.style.borderBottom=gutter.y+"px solid transparent";box.style.borderRight=gutter.x+"px solid transparent";min.appendChild(box)}},{key:"addBarrel",value:function addBarrel(box,wid,hei){if(!this.nPhotos.length){var options=this.options;var nPhotosWrap=this.nPhotosWrap=document.createElement("div");nPhotosWrap.className="barrelRow";nPhotosWrap.style.marginBottom=options.gutter.y+"px";nPhotosWrap.style.height=options.barrelMinHeight+"px";this.galleryBox.appendChild(nPhotosWrap)}var ratio=wid/hei;this.appendBarrel(box.firstChild.src,ratio,box,wid,hei)}},{key:"updateLayout",value:function updateLayout(){this.setLayout(this.options.layout)}},{key:"setPuzzleHeight",value:function setPuzzleHeight(){var height=arguments.length>0&&arguments[0]!==undefined?arguments[0]:500;if(!Number.isInteger(height)||height<0){console.error("拼图布局高度必须是正整数");return false}this.options.puzzleHeight=height;this.updateLayout();return true}},{key:"setGutter",value:function setGutter(){var x=arguments.length>0&&arguments[0]!==undefined?arguments[0]:10;var y=arguments.length>1&&arguments[1]!==undefined?arguments[1]:10;if(x<0||y<0){console.error("图片间距必须大于等于0");return false}this.options.gutter={x:x,y:y};this.updateLayout();return true}},{key:"setWaterfallColumn",value:function setWaterfallColumn(){var column=arguments.length>0&&arguments[0]!==undefined?arguments[0]:4;if(!Number.isInteger(column)||column<0){console.error("瀑布流列数必须为正整数");return false}this.options.waterfallColumn=column;this.updateLayout();return true}},{key:"enableFullscreen",value:function enableFullscreen(){this.options.fullScreen=true}},{key:"disableFullscreen",value:function disableFullscreen(){this.options.fullScreen=false}},{key:"isFullscreenEnabled",value:function isFullscreenEnabled(){return this.options.fullScreen}},{key:"setBarrelHeight",value:function setBarrelHeight(){var min=arguments.length>0&&arguments[0]!==undefined?arguments[0]:200;if(!Number.isInteger(min)||min<0){console.error("木桶布局最小高度必须为正整数");return false}this.options.barrelMinHeight=min;this.updateLayout()}},{key:"getBarrelHeightMin",value:function getBarrelHeightMin(){return this.options.barrelMinHeight}},{key:"resizeUpdate",value:function resizeUpdate(wait){var _this7=this;var resizeTime=this.resizeTimer;if(!resizeTime){var clientWidth=this.container.clientWidth;if(this.cacheWidth!==clientWidth){resizeTime=setTimeout(function(){clearTimeout(resizeTime);resizeTime=null;_this7.updateLayout();_this7.cacheWidth=clientWidth},wait)}}}},{key:"setView",value:function setView(){var view='\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+=view;this.viewImg=document.querySelector(".gallery-viewImg");this.view=document.querySelector(".gallery-view")}},{key:"setThumbnail",value:function setThumbnail(index){var wrap=document.querySelector(".gallery-view-list");var imgs=this.getImageDomElements();var wrapImgs=Array.from(wrap.querySelectorAll("img"));var len=imgs.length;if(len>5){len=5}if(wrapImgs.length!==len){for(var i=0;i<len;i++){var image=document.createElement("img");wrap.appendChild(image)}wrapImgs=Array.from(wrap.querySelectorAll("img"))}var imageIndex=index;if(index>1&&index<imgs.length-2){imageIndex-=2}else if(index<=1){imageIndex=0}else if(index>=imgs.length-2){imageIndex=imgs.length-len}for(var _i=0;_i<len;_i++,imageIndex++){var currentImg=wrapImgs[_i];currentImg.className="";currentImg.src=imgs[imageIndex].firstChild.src;currentImg.setAttribute("index",imageIndex);if(imageIndex===index){currentImg.classList.add("gallery-view--current")}}}},{key:"bindClickHandle",value:function bindClickHandle(){var _this8=this;this.container.addEventListener("click",function(e){if(e.target.nodeName==="IMG"&&e.target.className!=="gallery-viewImg"&&_this8.options.fullScreen){var index=parseInt(e.target.getAttribute("index"));_this8.viewImg.src=e.target.src;_this8.view.style.display="block";_this8.setThumbnail(index)}if(e.target.className==="gallery-view-close"){_this8.view.style.display="none"}})}}]);return Gallery}();return Gallery});