(function(t){function e(e){for(var s,n,a=e[0],c=e[1],h=e[2],d=0,f=[];d<a.length;d++)n=a[d],Object.prototype.hasOwnProperty.call(r,n)&&r[n]&&f.push(r[n][0]),r[n]=0;for(s in c)Object.prototype.hasOwnProperty.call(c,s)&&(t[s]=c[s]);l&&l(e);while(f.length)f.shift()();return o.push.apply(o,h||[]),i()}function i(){for(var t,e=0;e<o.length;e++){for(var i=o[e],s=!0,a=1;a<i.length;a++){var c=i[a];0!==r[c]&&(s=!1)}s&&(o.splice(e--,1),t=n(n.s=i[0]))}return t}var s={},r={app:0},o=[];function n(e){if(s[e])return s[e].exports;var i=s[e]={i:e,l:!1,exports:{}};return t[e].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=s,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)n.d(i,s,function(e){return t[e]}.bind(null,s));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="";var a=window["webpackJsonp"]=window["webpackJsonp"]||[],c=a.push.bind(a);a.push=e,a=a.slice();for(var h=0;h<a.length;h++)e(a[h]);var l=c;o.push([0,"chunk-vendors"]),i()})({0:function(t,e,i){t.exports=i("56d7")},"1c4c":function(t,e,i){"use strict";var s=i("fe03"),r=i.n(s);r.a},"1f9f":function(t,e,i){},"21bb":function(t,e,i){"use strict";var s=i("2dad"),r=i.n(s);r.a},"2dad":function(t,e,i){},"2ee5":function(t,e,i){t.exports=i.p+"img/error.svg"},3678:function(t,e,i){"use strict";var s=i("1f9f"),r=i.n(s);r.a},5452:function(t,e,i){"use strict";var s=i("af35"),r=i.n(s);r.a},"56d7":function(t,e,i){"use strict";i.r(e);i("e260"),i("e6cf"),i("cca6"),i("a79d");var s=i("2b0e"),r=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{attrs:{id:"app"}},[t.hasInit?i("router-view"):t._e()],1)},o=[],n=(i("96cf"),i("1da1")),a={name:"app",data:function(){return{hasInit:!1}},created:function(){this.readConfig()},methods:{readConfig:function(){var t;t=JSON.parse(document.getElementById("config").innerHTML).rsr_images_info,this.$store.commit("setRsrImagesInfo",t),this.readWideFileImage(t.fpv_image.file_name)},readWideFileImage:function(t){var e=new Image;e.src=t;var i=this;e.onerror=function(){console.error("load wide image error"),e=null,i.hasInit=!0},e.onload=Object(n["a"])(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){while(1)switch(t.prev=t.next){case 0:if(!(e&&e.naturalWidth&&e.naturalHeight)){t.next=3;break}return t.next=3,i.$store.dispatch("initWideImgNatural",{width:e.naturalWidth,height:e.naturalHeight});case 3:e=null,i.hasInit=!0;case 5:case"end":return t.stop()}}),t)})))}}},c=a,h=(i("5c0b"),i("2877")),l=Object(h["a"])(c,r,o,!1,null,null,null),d=l.exports,f=i("8c4f"),g=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"home"},[i("HeaderNav"),i("router-view"),t._m(0)],1)},u=[function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"zoom-toast-box"},[i("div",{staticClass:"zoom-toast",attrs:{id:"zoomToast"}},[i("span",{staticClass:"toast-text"})])])}],p=(i("a4d3"),i("4de4"),i("e439"),i("dbb4"),i("b64b"),i("159b"),i("ade3")),m=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("header",{staticClass:"header-nav"},[i("div",{directives:[{name:"show",rawName:"v-show",value:!t.isDetail,expression:"!isDetail"}],staticClass:"logo"}),i("div",{directives:[{name:"show",rawName:"v-show",value:t.isDetail,expression:"isDetail"}],staticClass:"back-btn",on:{click:t.goHome}},[i("span",{staticClass:"back-arrow"}),i("span",{staticClass:"back-text"},[t._v(t._s(t.$t("message.backToLargeImg")))])]),i("div",{staticClass:"title-text"},[t._v(t._s(t.title))]),i("div",{directives:[{name:"show",rawName:"v-show",value:!t.isDetail,expression:"!isDetail"}],staticClass:"option-btn"},[i("span",{staticClass:"toggle-text"},[t._v(t._s(t.$t("message.showLargeOnly")))]),i("span",{staticClass:"toggle-btn",class:{checked:!t.showGrid},attrs:{id:"switch"},on:{click:function(e){return t.$store.commit("setShowGrid",!t.showGrid)}}})])])},w=[],v=(i("99af"),i("b0c0"),i("ac1f"),i("5319"),i("2f62"));function b(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,s)}return i}function x(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?b(Object(i),!0).forEach((function(e){Object(p["a"])(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):b(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}var O={name:"HeaderNav",computed:x({},Object(v["b"])(["config","showGrid"]),{isDetail:function(){return"detail"===this.$route.name},title:function(){if(!this.config)return"";if(this.isDetail){var t=this.$route.params?this.$route.params.index:0;return this.config.items[t].src.replace(/\.\w+$/,"")+" (".concat(this.config.items[t].order+1,"/").concat(this.config.totals,")")}return this.config.filename+this.$t("message.totalNums").replace("%1",this.config.totals)}}),methods:{goHome:function(){this.$router.push({name:"wide"})}}},y=O,j=(i("5452"),Object(h["a"])(y,m,w,!1,null,null,null)),k=j.exports;function S(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,s)}return i}function I(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?S(Object(i),!0).forEach((function(e){Object(p["a"])(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):S(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}var C={name:"home",components:{HeaderNav:k},computed:I({},Object(v["b"])(["config"])),data:function(){return{}},mounted:function(){var t=this;this.$nextTick(Object(n["a"])(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:return e.next=2,t.$store.dispatch("initConfig");case 2:console.log("home init"),window.onload=function(){};case 4:case"end":return e.stop()}}),e)}))))}},P=C,H=(i("21bb"),Object(h["a"])(P,g,u,!1,null,null,null)),W=H.exports,_=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"container-zoom"},[i("div",{staticClass:"img-item-container",attrs:{draggable:"false"}},[i("div",{staticClass:"img-box",style:{width:t.showWidth+"px",height:t.showHeight+"px"},attrs:{id:"viewerImageBox",draggable:"false"}},[i("img",{ref:"viewerImage",staticClass:"image-item",class:{fade:t.loadingImg},style:{width:t.showWidth+"px",height:t.showHeight+"px"},attrs:{draggable:"false",src:t.imgSrc}}),t._v(": ")]),i("preview-box",{attrs:{imgSrc:t.imgSrc}})],1),i("wideSideView",{attrs:{show:t.wideShow},on:{"update:show":function(e){t.wideShow=e}}}),i("keymapSideView",{attrs:{show:t.helpShow},on:{"update:show":function(e){t.helpShow=e}}}),i("div",{staticClass:"option-panel"},[i("div",{staticStyle:{width:"100%","text-align":"center"}},[i("span",{staticClass:"option-item up",class:{disable:0===t.rowNum},on:{click:function(e){return t.slideHandler("up")}}})]),i("div",{staticStyle:{width:"100%","text-align":"center"}},[i("span",{staticClass:"option-item left",class:{disable:0===t.colNum},on:{click:function(e){return t.slideHandler("left")}}}),i("span",{staticClass:"option-item right",class:{disable:t.config&&t.colNum===t.config.col-1},on:{click:function(e){return t.slideHandler("right")}}})]),i("div",{staticStyle:{width:"100%","text-align":"center"}},[i("span",{staticClass:"option-item down",class:{disable:t.config&&t.rowNum===t.config.row-1},on:{click:function(e){return t.slideHandler("down")}}})])])],1)},B=[],$=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"wide-side-view",class:{show:t.show}},[i("div",{staticClass:"drag-btn",on:{click:t.toggleShow}},[i("i",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"el-icon-d-arrow-right"}),i("i",{directives:[{name:"show",rawName:"v-show",value:!t.show,expression:"!show"}],staticClass:"el-icon-d-arrow-left"})]),i("div",{staticClass:"wide-side-box",style:{width:t.boxWidth+"px",height:t.boxHeight+"px"}},[i("img",{staticClass:"wide-img",style:{width:t.boxWidth+"px",height:t.boxHeight+"px"},attrs:{src:"./"+t.mainImagePath,draggable:"false"}}),i("div",{staticClass:"grid-container"},[i("div",{staticClass:"grid",style:{"border-width":t.gridBorderWidth}},[i("div",{staticClass:"grid-box",style:{width:t.gridWidth+"px",height:t.gridHeight+"px"}},t._l(t.itemList,(function(e,s){return i("div",{key:s,staticClass:"grid-item",class:{offline:e.notExist,"not-complete":e.notComplete,active:t.imgIndex===s},style:{width:t.gridItemWidth+"px",height:t.gridItemHeight+"px",cursor:"pointer"},on:{click:function(i){return t.goDetail(e,s)}}})})),0)])])])])},E=[];function D(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,s)}return i}function M(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?D(Object(i),!0).forEach((function(e){Object(p["a"])(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):D(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}var T={name:"side-view",props:{show:Boolean},computed:M({},Object(v["b"])(["config","mainImagePath","itemList","showWidth","showHeight"]),{imgIndex:function(){return this.$route.params?this.$route.params.index-0:0}}),data:function(){return{boxWidth:0,boxHeight:0,gridItemWidth:0,gridItemHeight:0,gridBorderWidth:0,gridWidth:0,gridHeight:0}},mounted:function(){var t=this;this.$nextTick((function(){setTimeout((function(){t.computeBoxSize()}),300)}))},methods:{toggleShow:function(){this.$emit("update:show",!this.show)},computeBoxSize:function(){var t=40,e=.8*this.showHeight,i=this.config,s=i.itemsHeight/t;if(i.height/s<e){this.boxWidth=i.width/s,this.boxHeight=i.height/s,this.gridItemWidth=i.itemsWidth/s,this.gridItemHeight=t,this.gridWidth=(this.gridItemWidth+1)*i.col,this.gridHeight=(this.gridItemHeight+1)*i.row;var r=i.offsetX/s,o=i.offsetY/s;this.gridBorderWidth="".concat(o,"px ").concat(this.showWidth-this.gridWidth-r,"px ").concat(this.showHeight-this.gridHeight-o,"px ").concat(r,"px")}else{s=i.height/e,this.boxWidth=i.width/s,this.boxHeight=e,this.gridItemWidth=i.itemsWidth/s,this.gridItemHeight=i.itemsHeight/s,this.gridWidth=(this.gridItemWidth+1)*i.col,this.gridHeight=(this.gridItemHeight+1)*i.row;var n=i.offsetX/s,a=i.offsetY/s;this.gridBorderWidth="".concat(a,"px ").concat(this.showWidth-this.gridWidth-n,"px ").concat(this.showHeight-this.gridHeight-a,"px ").concat(n,"px")}},goDetail:function(t,e){this.$router.push({name:"detail",params:{index:e}})}}},N=T,L=(i("c119"),Object(h["a"])(N,$,E,!1,null,"01d9f5b2",null)),Y=L.exports,X=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"keymap-view",class:{show:t.show}},[i("div",{staticClass:"drag-btn",on:{click:function(e){return t.toggleShow()}}},[i("i",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"el-icon-d-arrow-left"}),i("i",{directives:[{name:"show",rawName:"v-show",value:!t.show,expression:"!show"}],staticClass:"el-icon-d-arrow-right"})]),i("div",{staticClass:"wide-side-box"},[i("div",{staticClass:"help-title"},[t._v(t._s(t.$t("message.help")))]),i("div",{staticClass:"option-items"},[i("ul",[i("li",[t._m(0),i("span",{staticClass:"key-desc"},[t._v(t._s(t.$t("message.switchPhoto")))])]),i("li",[i("span",{staticClass:"key-item"},[t._v("E")]),i("span",{staticClass:"key-desc"},[t._v(t._s(t.$t("message.zoomIn")))])]),i("li",[i("span",{staticClass:"key-item"},[t._v("Q")]),i("span",{staticClass:"key-desc"},[t._v(t._s(t.$t("message.zoomOut")))])]),i("li",[i("span",{staticClass:"key-item"},[t._v("W")]),i("span",{staticClass:"key-desc"},[t._v(t._s(t.$t("message.back")))])]),i("li",[i("span",{staticClass:"key-item"},[t._v("A")]),i("span",{staticClass:"key-desc"},[t._v(t._s(t.$t("message.preview")))])]),i("li",[i("span",{staticClass:"key-item"},[t._v("H")]),i("span",{staticClass:"key-desc"},[t._v(t._s(t.$t("message.help")))])])])])])])},z=[function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("span",{staticClass:"key-item"},[i("span",{staticClass:"key-icon-direction"})])}],F={name:"side-view",props:{show:Boolean},data:function(){return{}},methods:{toggleShow:function(){this.$emit("update:show",!this.show)}},mounted:function(){}},R=F,A=(i("c836"),Object(h["a"])(R,X,z,!1,null,"9bc6bfca",null)),Z=A.exports,G=i("9b6a"),q=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"preview-box",attrs:{id:"previewBox",draggable:"false"}},[i("img",{staticClass:"preview-img",attrs:{id:"previewBoxImg",src:t.imgSrc,draggable:"false"}}),i("div",{staticClass:"img-cropper",attrs:{id:"cropper",draggable:"false"}})])},J=[],V=i("d4ec"),Q=i("bee2");function U(t){var e=0,i=0;if(t.offsetParent){do{e+=t.offsetLeft,i+=t.offsetTop,t=t.offsetParent}while(t);return{left:e,top:i}}}var K=function(){function t(e,i,s,r,o){var n=this;Object(V["a"])(this,t);var a=111,c=s/r,h=a*c,l=a;this.originWidth=s,this.originHeight=r,this.previewWidth=h,this.previewHeight=l,this.imgBox=e.querySelector(".img-box"),this.imgBoxOffset={x:0,y:0},this.scale=1;var d=this.imgBox.firstElementChild;i.firstElementChild.src=o||d.src,i.style.width=h+"px",i.style.height=l+"px",this.preview=i,this.initScale=s/h,this.cropper=i.querySelector(".img-cropper"),this.cropperClickPos={x:0,y:0},this.active=!1;var f=U(this.cropper);this.cropperOffset={x:f.left,y:f.top},this.cropper.addEventListener("mousedown",this.cropStart.bind(this)),i.addEventListener("mousemove",this.cropMove.bind(this)),i.addEventListener("mouseout",(function(){n.toggleFade(!1)})),this.cropper.addEventListener("mouseup",this.cropEnd.bind(this)),this.initScrollZoom(e,s,r),this.initDragEvt(e,s,r),this.showZoomTimer="",this.fadeTimer="",this.FadeHideTimer="",this.preview.style.opacity=0}return Object(Q["a"])(t,[{key:"zoomIn",value:function(){this.renderScale(1.1)}},{key:"zoomOut",value:function(){this.renderScale(1/1.1)}},{key:"renderScale",value:function(t){var e=this,i=this.scale*t;if(this.scale=Math.max(.2,Math.min(4,i)),this.renderImageBox(),this.scale<1)this.showZoom(this.scale);else{this.toggleFade(!0),clearTimeout(this.fadeTimer),this.fadeTimer=setTimeout((function(){e.toggleFade(!1)}),1e3),this.cropperOffset.x=-this.imgBoxOffset.x/(this.initScale*this.scale),this.cropperOffset.y=-this.imgBoxOffset.y/(this.initScale*this.scale);var s=-(this.previewWidth-this.previewWidth/this.scale)/2,r=(this.previewWidth-this.previewWidth/this.scale)/2,o=-(this.previewHeight-this.previewHeight/this.scale)/2,n=(this.previewHeight-this.previewHeight/this.scale)/2;this.cropperOffset.x<s&&(this.cropperOffset.x=s,this.imgBoxOffset.x=-s*(this.initScale*this.scale)),this.cropperOffset.x>r&&(this.cropperOffset.x=r,this.imgBoxOffset.x=-r*(this.initScale*this.scale)),this.cropperOffset.y<o&&(this.cropperOffset.y=o,this.imgBoxOffset.y=-o*(this.initScale*this.scale)),this.cropperOffset.y>n&&(this.cropperOffset.y=n,this.imgBoxOffset.y=-n*(this.initScale*this.scale)),this.renderCropper(),this.showZoom(this.scale)}}},{key:"initScrollZoom",value:function(t,e,i){var s=this,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:4,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:.025,n=t.firstElementChild,a=function(t){s.toggleFade(!0),clearTimeout(s.fadeTimer),s.fadeTimer=setTimeout((function(){s.toggleFade(!1)}),1e3),t.preventDefault();var e=t.deltaY||t.wheelDelta||t.originalEvent.wheelDelta;void 0===e&&(e=t.originalEvent.detail),e=-e,e=Math.max(-1,Math.min(1,e));var i=e*o*s.scale+s.scale;if(s.scale=Math.max(.2,Math.min(r,i)),s.scale<1)return s.renderImageBox(),s.showZoom(s.scale),void s.toggleFade(!1);s.renderImageBox(),s.cropperOffset.x=-s.imgBoxOffset.x/(s.initScale*s.scale),s.cropperOffset.y=-s.imgBoxOffset.y/(s.initScale*s.scale);var n=-(s.previewWidth-s.previewWidth/s.scale)/2,a=(s.previewWidth-s.previewWidth/s.scale)/2,c=-(s.previewHeight-s.previewHeight/s.scale)/2,h=(s.previewHeight-s.previewHeight/s.scale)/2;s.cropperOffset.x<n&&(s.cropperOffset.x=n,s.imgBoxOffset.x=-n*(s.initScale*s.scale)),s.cropperOffset.x>a&&(s.cropperOffset.x=a,s.imgBoxOffset.x=-a*(s.initScale*s.scale)),s.cropperOffset.y<c&&(s.cropperOffset.y=c,s.imgBoxOffset.y=-c*(s.initScale*s.scale)),s.cropperOffset.y>h&&(s.cropperOffset.y=h,s.imgBoxOffset.y=-h*(s.initScale*s.scale)),s.renderCropper(),s.showZoom(s.scale)};n.addEventListener("wheel",a)}},{key:"initDragEvt",value:function(){var t=this;this.imgBox.addEventListener("mousedown",this.dragStart.bind(this)),this.imgBox.addEventListener("mousemove",this.dragMove.bind(this)),this.imgBox.addEventListener("mouseout",(function(e){t.dragActive&&(t.dragActive=!1,document.getElementById("previewBox").style.pointerEvents="auto",t.imgBoxOffset.x=t.dragOffsetX,t.imgBoxOffset.y=t.dragOffsetY,t.renderImageBox(),t.toggleFade(!1))})),this.imgBox.addEventListener("mouseup",this.dragEnd.bind(this))}},{key:"dragStart",value:function(t){this.dragActive=!0,document.getElementById("previewBox").style.pointerEvents="none",this.imgClickPos={x:t.clientX,y:t.clientY},console.log("dragStart",t.clientX,t.clientY)}},{key:"dragMove",value:function(t){if(this.dragActive){this.toggleFade(!0),this.dragOffsetX=Math.round(t.clientX-this.imgClickPos.x)+this.imgBoxOffset.x,this.dragOffsetY=Math.round(t.clientY-this.imgClickPos.y)+this.imgBoxOffset.y,console.log("dragMove",this.dragOffsetX,this.dragOffsetY);var e=-(this.previewWidth/2-this.cropper.offsetWidth/2)*this.initScale*this.scale,i=-(this.previewHeight/2-this.cropper.offsetHeight/2)*this.initScale*this.scale;console.log(e,i,"factorW, factorH"),this.dragOffsetX=Math.max(Math.min(this.dragOffsetX,-e),e),this.dragOffsetY=Math.max(Math.min(this.dragOffsetY,-i),i),this.cropper.style.transform="translate(".concat(Math.round(-this.dragOffsetX/this.initScale/this.scale),"px, ").concat(Math.round(-this.dragOffsetY/this.initScale/this.scale),"px)"),this.imgBox.style.transform="translate(".concat(this.dragOffsetX,"px, ").concat(this.dragOffsetY,"px) scale(").concat(this.scale,") ")}}},{key:"dragEnd",value:function(t){if(this.dragActive){console.log("dragEnd",t.clientX-this.imgClickPos.x,t.clientY-this.imgClickPos.y),this.dragActive=!1,document.getElementById("previewBox").style.pointerEvents="auto";var e=Math.round(t.clientX-this.imgClickPos.x)+this.imgBoxOffset.x,i=Math.round(t.clientY-this.imgClickPos.y)+this.imgBoxOffset.y,s=-(this.previewWidth/2-this.cropper.offsetWidth/2)*this.initScale*this.scale,r=-(this.previewHeight/2-this.cropper.offsetHeight/2)*this.initScale*this.scale;console.log(s,r,"factorW, factorH"),e=Math.max(Math.min(e,-s),s),i=Math.max(Math.min(i,-r),r),this.imgBoxOffset.x=e,this.imgBoxOffset.y=i,this.renderImageBox(),this.toggleFade(!1)}}},{key:"showZoom",value:function(t){clearTimeout(this.showZoomTimer);var e=document.getElementById("zoomToast");e.querySelector(".toast-text").innerHTML="".concat(Math.round(100*t),"%"),e.style.opacity="1",this.imgBox.style.cursor=t>1?"all-scroll":"default",this.showZoomTimer=setTimeout((function(){e.style.opacity="0"}),300)}},{key:"renderCropper",value:function(){this.cropper.style.transform="translate(".concat(this.cropperOffset.x,"px, ").concat(this.cropperOffset.y,"px)"),this.cropper.style.width=this.preview.offsetWidth/this.scale+"px",this.cropper.style.height=this.preview.offsetHeight/this.scale+"px"}},{key:"renderImageBox",value:function(){this.imgBox.style.transform="translate(".concat(this.imgBoxOffset.x,"px, ").concat(this.imgBoxOffset.y,"px) scale(").concat(this.scale,") ")}},{key:"cropStart",value:function(t){console.log("cropstart"),this.active=!0,this.cropperClickPos={x:t.clientX,y:t.clientY}}},{key:"cropMove",value:function(t){if(this.toggleFade(!0),this.active){console.log("cropMove",this.active),t.preventDefault();var e=Math.round(t.clientX-this.cropperClickPos.x)+this.cropperOffset.x,i=Math.round(t.clientY-this.cropperClickPos.y)+this.cropperOffset.y,s=this.previewWidth/2-this.cropper.offsetWidth/2,r=this.previewHeight/2-this.cropper.offsetHeight/2;e=Math.max(Math.min(e,s),-s),i=Math.max(Math.min(i,r),-r),this.cropper.style.transform="translate(".concat(e,"px, ").concat(i,"px)"),this.imgBoxOffset.x=-e*this.initScale*this.scale,this.imgBoxOffset.y=-i*this.initScale*this.scale,this.renderImageBox()}}},{key:"cropEnd",value:function(t){this.active=!1,this.cropperOffset.x=Math.round(t.clientX-this.cropperClickPos.x)+this.cropperOffset.x,this.cropperOffset.y=Math.round(t.clientY-this.cropperClickPos.y)+this.cropperOffset.y}},{key:"toggleShow",value:function(t){this.preview.style.display=t?"block":"none"}},{key:"toggleFade",value:function(t){var e=this;clearTimeout(this.FadeHideTimer),"none"===this.preview.style.display?(this.preview.style.opacity=0,this.preview.style.display="block",setTimeout((function(){e.preview.style.opacity=1}))):this.preview.style.opacity=t?"1":"0",this.dragActive||(this.FadeHideTimer=setTimeout((function(){e.toggleShow(t)}),500))}}]),t}();function tt(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,s)}return i}function et(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?tt(Object(i),!0).forEach((function(e){Object(p["a"])(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):tt(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}var it={name:"Preview-Box",props:{imgSrc:String},computed:et({},Object(v["b"])(["config","showWidth","showHeight"]),{imgIndex:function(){return this.$route.params?this.$route.params.index-0:0}}),data:function(){return{preview:null}},mounted:function(){var t=this;this.$nextTick((function(){setTimeout((function(){t.preview=new K(document.querySelector(".img-item-container"),document.getElementById("previewBox"),t.showWidth,t.showHeight),t.$store.commit("setPreview",t.preview)}),400)}))}},st=it,rt=(i("3678"),Object(h["a"])(st,q,J,!1,null,"7a8d29fc",null)),ot=rt.exports;function nt(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,s)}return i}function at(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?nt(Object(i),!0).forEach((function(e){Object(p["a"])(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):nt(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}var ct={name:"home",components:{PreviewBox:ot,wideSideView:Y,keymapSideView:Z},computed:at({},Object(v["b"])(["config","showWidth","showHeight","preview"]),{imgIndex:function(){return this.$route.params?this.$route.params.index-0:0}}),data:function(){return{image:null,imgSrc:"",loadingImg:!0,rowNum:0,colNum:0,wideShow:!1,helpShow:!1}},watch:{$route:function(){console.log("route change"),this.loadImage(this.$route.params?this.$route.params.index-0:0)}},beforeDestroy:function(){G["a"].deleteScope("showDetail")},mounted:function(){var t=this;this.$nextTick((function(){t.init(),G["a"].setScope("showDetail"),Object(G["a"])("left,right,up,down,a,h,e,q,w,s","showDetail",(function(e,i){switch(console.log("carry!"),i.key){case"left":t.slideHandler("left");break;case"right":t.slideHandler("right");break;case"up":t.slideHandler("up");break;case"down":t.slideHandler("down");break;case"a":t.wideShow=!t.wideShow;break;case"h":t.helpShow=!t.helpShow;break;case"w":t.$router.push({name:"wide"});break;case"e":t.preview&&t.preview.zoomIn();break;case"q":t.preview&&t.preview.zoomOut();break;default:break}}))}))},methods:{init:function(){var t=Object(n["a"])(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){while(1)switch(t.prev=t.next){case 0:if(this.config){t.next=3;break}return t.next=3,this.$store.dispatch("initConfig");case 3:return t.next=5,this.$store.dispatch("initShowWidthAndHeight");case 5:this.loadImage(this.imgIndex);case 6:case"end":return t.stop()}}),t,this)})));function e(){return t.apply(this,arguments)}return e}(),loadImage:function(t){var e=this,i=this.$refs.viewerImage;i.onerror=function(){e.imgSrc="/assets/no-image.jpg",e.$message.closeAll(),e.$message.error(e.$t("message.loadFail")),e.loadingImg=!1,e.image=null},i.onload=function(){e.loadingImg=!1},this.loadingImg=!0,this.imgSrc="./"+this.config.items[t].src,this.image=i,this.computedOptionStyle()},saveImage:function(t){var e=this,i=new Image;i.setAttribute("crossOrigin","Anonymous"),i.src=t||this.imgSrc,i.onload=function(){var t=document.createElement("canvas");t.width=i.width,t.height=i.height;var e=t.getContext("2d");e.drawImage(i,0,0,i.width,i.height);var s=t.toDataURL("image/png"),r=document.createElement("a"),o=new MouseEvent("click");r.download="pilot.png",r.href=s,r.dispatchEvent(o)},i.onerror=function(){e.$message.error(e.$t("message.loadFail"))}},slideHandler:function(t){if(!("up"===t&&0===this.rowNum||"down"===t&&this.rowNum===this.config.row-1||"left"===t&&0===this.colNum||"right"===t&&this.colNum===this.config.col-1)){var e,i=this;switch(this.preview.scale=1,this.preview.renderImageBox(),t){case"up":e=this.imgIndex-this.config.col;break;case"left":e=this.imgIndex-1;break;case"right":e=this.imgIndex+1;break;case"down":e=this.imgIndex+this.config.col;break;default:break}try{i.$router.push({name:"detail",params:{index:e}})}catch(s){console.log(s)}}},computedOptionStyle:function(){var t=this.config;this.rowNum=Math.floor(this.imgIndex/t.col),this.colNum=Math.floor(this.imgIndex%t.col)}}},ht=ct,lt=(i("ed23"),Object(h["a"])(ht,_,B,!1,null,null,null)),dt=lt.exports,ft=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"container",attrs:{id:"wideBox"}},[i("div",{staticClass:"img-container"},[i("div",{staticClass:"img-box",attrs:{id:"imgBox"}},[i("img",{staticClass:"image-wide",style:{width:t.showWidth+"px",height:t.showHeight+"px"},attrs:{src:t.mainImagePath,id:"imageWide",alt:"loading···"}}),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showGrid,expression:"showGrid"}],staticClass:"grid-container",attrs:{id:"gridContainer"}},[i("div",{staticClass:"grid",style:{"border-width":t.gridBorderWidth},attrs:{id:"grid"}},[i("div",{staticClass:"grid-box",style:{width:t.gridWidth+"px",height:t.gridHeight+"px"},attrs:{id:"gridBox"}},t._l(t.itemList,(function(e,s){return i("div",{key:s,staticClass:"grid-item",class:{offline:e.notExist,"not-complete":e.notComplete},style:{width:t.gridItemWidth+"px",height:t.gridItemHeight+"px",cursor:"pointer"},on:{click:function(i){return t.goDetail(e,s)}}},[e.notComplete?i("div",{staticClass:"not-complete-text"},[i("img",{staticStyle:{width:"24px","max-width":"100%","max-height":"100%"},attrs:{src:t.ErrorImage}})]):t._e()])})),0)])])])])])},gt=[],ut=i("2ee5"),pt=i.n(ut);function mt(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,s)}return i}function wt(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?mt(Object(i),!0).forEach((function(e){Object(p["a"])(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):mt(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}var vt={name:"home",components:{},computed:wt({},Object(v["b"])(["config","mainImagePath","itemList","showGrid","showWidth","showHeight"])),data:function(){return{radio:1,gridItemWidth:0,gridItemHeight:0,gridBorderWidth:0,gridWidth:0,gridHeight:0,ErrorImage:pt.a}},methods:{init:function(){var t=Object(n["a"])(regeneratorRuntime.mark((function t(){var e;return regeneratorRuntime.wrap((function(t){while(1)switch(t.prev=t.next){case 0:return console.log("wide init"),t.next=3,this.$store.dispatch("initShowWidthAndHeight");case 3:e=this.config,this.radio=e.width/this.showWidth,this.gridItemWidth=e.itemsWidth/this.radio,this.gridItemHeight=e.itemsHeight/this.radio,this.gridWidth=this.gridItemWidth*e.col,this.gridHeight=this.gridItemHeight*e.row,this.offsetX=e.offsetX/this.radio,this.offsetY=e.offsetY/this.radio,this.gridBorderWidth="".concat(this.offsetY,"px ").concat(this.showWidth-this.gridWidth-this.offsetX,"px ").concat(this.showHeight-this.gridHeight-this.offsetY,"px ").concat(this.offsetX,"px");case 12:case"end":return t.stop()}}),t,this)})));function e(){return t.apply(this,arguments)}return e}(),goDetail:function(t,e){return t.notExist?(this.$message.closeAll(),void this.$message.error(this.$t("message.loadFail"))):t.notComplete?(this.$message.closeAll(),void this.$message.error(this.$t("message.loadStop"))):void this.$router.push({name:"detail",params:{index:e}})}},mounted:function(){var t=this;this.$nextTick(Object(n["a"])(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:if(t.config){e.next=3;break}return e.next=3,t.$store.dispatch("initConfig");case 3:t.init();case 4:case"end":return e.stop()}}),e)}))))}},bt=vt,xt=(i("1c4c"),Object(h["a"])(bt,ft,gt,!1,null,null,null)),Ot=xt.exports;s["default"].use(f["a"]);var yt=[{path:"/",component:W,children:[{path:"",name:"wide",component:Ot},{path:"detail/:index",name:"detail",component:dt}]}],jt=new f["a"]({mode:"hash",base:"",routes:yt}),kt=jt;function St(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,s)}return i}function It(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?St(Object(i),!0).forEach((function(e){Object(p["a"])(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):St(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}s["default"].use(v["a"]);var Ct=new v["a"].Store({state:{config:null,mainImagePath:"",itemList:[],showGrid:!0,showWidth:0,showHeight:0,preview:null,wideImgNatural:{width:4056,height:3040},rsrImagesInfo:{}},mutations:{setRsrImagesInfo:function(t,e){t.rsrImagesInfo=e},setWideImgNatural:function(t,e){t.wideImgNatural=e},setConfig:function(t,e){t.config=e},setMainImagePath:function(t,e){t.mainImagePath=e},setItemList:function(t,e){t.itemList=e},setShowGrid:function(t,e){t.showGrid=e},setShowWidth:function(t,e){t.showWidth=e},setShowHeight:function(t,e){t.showHeight=e},setPreview:function(t,e){t.preview=e}},actions:{initWideImgNatural:function(){var t=Object(n["a"])(regeneratorRuntime.mark((function t(e,i){var s,r;return regeneratorRuntime.wrap((function(t){while(1)switch(t.prev=t.next){case 0:return s=e.commit,r=e.dispatch,s("setWideImgNatural",i),t.next=4,r("initConfig");case 4:case"end":return t.stop()}}),t)})));function e(e,i){return t.apply(this,arguments)}return e}(),initConfig:function(){var t=Object(n["a"])(regeneratorRuntime.mark((function t(e){var i,s,r,o,n,a,c,h,l;return regeneratorRuntime.wrap((function(t){while(1)switch(t.prev=t.next){case 0:for(i=e.commit,s=e.state,r=It({filename:"DJI 001",filePath:"wide.png",row:3,col:3,nums:9,itemsWidth:300,itemsHeight:300,offsetX:1e3,offsetY:1e3,items:[{src:"wide.png",name:""}]},s.wideImgNatural),o=s.rsrImagesInfo,r.filename=o.fpv_image.file_name,r.filePath=o.fpv_image.file_name,r.row=o.capture_region.row_num,r.col=o.capture_region.column_num,r.nums=r.row*r.col,r.itemsWidth=r.width*(o.capture_region.right-o.capture_region.left)/r.col,r.itemsHeight=r.height*(o.capture_region.bottom-o.capture_region.top)/r.row,r.offsetX=r.width*o.capture_region.left,r.offsetY=r.height*o.capture_region.top,r.items=[],r.totals=0,n=0;n<r.row*r.col;n++)a=o.zoom_images[n],c=Math.floor(n/r.col),c%2===1?(h=r.col-n%r.col-1+c*r.col,l=o.zoom_images[h],l&&l.file_name?(r.totals++,r.items.push({src:l.file_name,order:h})):r.items.push({src:"",notComplete:!0,order:h})):a&&a.file_name?(r.totals++,r.items.push({src:a.file_name,order:n})):r.items.push({src:"",notComplete:!0,order:n});i("setItemList",r.items),i("setMainImagePath",r.filePath),i("setConfig",r);case 18:case"end":return t.stop()}}),t)})));function e(e){return t.apply(this,arguments)}return e}(),initShowWidthAndHeight:function(){var t=Object(n["a"])(regeneratorRuntime.mark((function t(e){var i,s,r,o,n,a,c;return regeneratorRuntime.wrap((function(t){while(1)switch(t.prev=t.next){case 0:if(i=e.commit,s=e.state,!s.showWidth||!s.showHeight){t.next=3;break}return t.abrupt("return");case 3:r=document.body.clientWidth,o=document.body.clientHeight-56,n=s.config.width/s.config.height,a=o*n>r?r:o*n,c=a/n,i("setShowWidth",a),i("setShowHeight",c);case 10:case"end":return t.stop()}}),t)})));function e(e){return t.apply(this,arguments)}return e}()},modules:{}}),Pt=i("2726"),Ht={en:{message:{backToLargeImg:"back to large image",showLargeOnly:"large image only",totalNums:" ( %1 total )",loadFail:"image damaged or missing,can not be loaded",loadStop:"Task interruption, shooting is not completed",loadnotComplete:"Can't load",help:"Help",switchPhoto:"Switch Photo",zoomIn:"Zoom In",zoomOut:"Zoom Out",back:"Back",save:"Save Current Photo",preview:"Preview"}},zh:{message:{backToLargeImg:"返回大图视图",showLargeOnly:"仅显示大图",totalNums:"(共 %1 张)",loadFail:"图片文件已损坏,无法完成加载",loadStop:"任务中断,拍摄未完成",loadnotComplete:"无法加载",help:"帮助",switchPhoto:"切换照片",zoomIn:"放大图片",zoomOut:"缩小图片",back:"返回大图",save:"保存当前图片",preview:"开启缩略图"}}};s["default"].use(Pt["a"]);var Wt=new Pt["a"]({locale:"zh-CN"===navigator.language?"zh":"en",messages:Ht}),_t=Wt,Bt=i("cca1"),$t=i.n(Bt);i("8842");s["default"].use($t.a),s["default"].config.productionTip=!1,new s["default"]({router:kt,store:Ct,i18n:_t,render:function(t){return t(d)}}).$mount("#app")},"5c0b":function(t,e,i){"use strict";var s=i("9c0c"),r=i.n(s);r.a},"9c0c":function(t,e,i){},af35:function(t,e,i){},c119:function(t,e,i){"use strict";var s=i("ebf6"),r=i.n(s);r.a},c836:function(t,e,i){"use strict";var s=i("e69b"),r=i.n(s);r.a},d68a:function(t,e,i){},e69b:function(t,e,i){},ebf6:function(t,e,i){},ed23:function(t,e,i){"use strict";var s=i("d68a"),r=i.n(s);r.a},fe03:function(t,e,i){}});将这段代码反编译成vue写法
最新发布