index.js

(function(){"use strict";function s(i,t,e,o,p,g,c,w){var a=typeof i=="function"?i.options:i;return t&&(a.render=t,a.staticRenderFns=e,a._compiled=!0),{exports:i,options:a}}const n={props:{label:String,value:String,downloadSize:String,pageId:String},data:function(){return{items:[],selectedPhoto:{id:"",photo:"",photographer:"",photographerUrl:"",downloadUrl:""},keyword:"",pexelPage:1,perPage:1,remaining:0,totalResults:0,loading:!1,downloaded:!1}},computed:{pages(){return Math.round(this.totalResults/this.perPage,10)}},methods:{onSubmit(i){this.keyword=i,this.timer!==null&&clearTimeout(this.timer),!(i.length<3)&&(this.timer=setTimeout(()=>{this.search(i)},250))},showNext(){this.pexelPage*this.perPage>this.remaining||(this.pexelPage++,this.search(this.keyword))},showPrev(){this.pexelPage!==1&&(this.pexelPage--,this.search(this.keyword))},search(i){this.loading=!0,this.$api.get(`pexels/search/${i}/${this.pexelPage}/${this.downloadSize}`).then(t=>{this.page=t.page,this.perPage=t.perPage,this.remaining=t.remaining,this.totalResults=t.totalResults,this.loading=!1,this.items=t.photos.map(e=>({id:e.id,downloadUrl:e.downloadUrl,link:e.downloadUrl,photographer:e.photographer,photographerUrl:e.photographerUrl,text:`${e.photographer} <br /> ${e.width} × ${e.height}`,options:[{icon:"open",text:"View",link:e.downloadUrl,target:"_blank"},{icon:"download",text:"Download",click:()=>{this.downloadImage(e.id)}}],image:{src:e.small,width:e.width}}))})},downloadImage(i){this.downloaded=!1;const t=this.items.find(o=>o.id===i),e=t.text;t.text="Downloading…",this.$api.post("pexels/download",{imageId:i,pageId:this.pageId.split("?")[0],downloadUrl:t.downloadUrl,photographer:t.photographer,photographerUrl:t.photographerUrl}).then(()=>{this.downloaded=!1,panel.view.reload(),window.panel.notification.success("Image downloaded"),t.text=e}).catch(()=>{this.downloaded=!1,window.panel.notification.error("Image download failed"),t.text=e})}}};var l=function(){var t=this,e=t._self._c;return e("div",{staticClass:"k-pexels-field"},[e("k-field",{attrs:{label:t.label}},[e("k-input",{attrs:{theme:"field",icon:"search",type:"text",name:"textfield",value:this.keyword},on:{input:t.onSubmit}})],1),e("div",[t.loading?e("div",{staticClass:"loader"},[e("div",[e("k-icon",{attrs:{type:"loader"}})],1)]):e("div",{staticClass:"imagegrid"},[e("k-collection",{attrs:{layout:"cards",items:t.items}}),t.pages>0?e("div",{staticClass:"prev-next"},[e("button",{staticClass:"k-link k-button",on:{click:t.showPrev}},[e("k-icon",{attrs:{type:"angle-left"}})],1),e("span",[t._v(t._s(t.pexelPage)+" of "+t._s(t.pages))]),e("button",{staticClass:"k-link k-button",on:{click:t.showNext}},[e("k-icon",{attrs:{type:"angle-right"}})],1)]):t._e()],1)])],1)},r=[],d=s(n,l,r);const h=d.exports;panel.plugin("mauricerenck/PexelsImageField",{fields:{pexels:h}})})();