index.js

(function(){"use strict";class f{constructor(e,t={}){this.name=e,this.state=this.loadState(t)}loadState(e={}){try{const t=localStorage.getItem(this.name);return t===null?e:JSON.parse(t)}catch{return e}}hasState(){return Object.keys(this.state).length>0}saveState(e){try{const t=JSON.stringify(e);localStorage.setItem(this.name,t)}catch{}}getState(){return this.state}setState(e){return this.state=e,this.saveState(e),e}clearState(){this.state={},this.saveState({})}}function o(s,e,t,a,i,c,d,E){var n=typeof s=="function"?s.options:s;e&&(n.render=e,n.staticRenderFns=t,n._compiled=!0),a&&(n.functional=!0),c&&(n._scopeId="data-v-"+c);var l;if(d?(l=function(r){r=r||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!r&&typeof __VUE_SSR_CONTEXT__<"u"&&(r=__VUE_SSR_CONTEXT__),i&&i.call(this,r),r&&r._registeredComponents&&r._registeredComponents.add(d)},n._ssrRegister=l):i&&(l=E?function(){i.call(this,(n.functional?this.parent:this).$root.$options.shadowRoot)}:i),l)if(n.functional){n._injectStyles=l;var W=n.render;n.render=function(q,u){return l.call(u),W(q,u)}}else{var p=n.beforeCreate;n.beforeCreate=p?[].concat(p,l):[l]}return{exports:s,options:n}}const _={data(){return{model:null,storage:null}},props:{endpoints:{type:Object,default:()=>({})},fields:{type:Array,default:()=>[]},value:{type:Object,default:()=>({breakpoints:[],settings:[]})}},created(){this.$panel.events.on("keydown.cmd.s",this.hasChanges?this.submit:null),this.storage=new f("responsive-images"),this.model=this.storage.hasState()?this.storage.getState():JSON.parse(JSON.stringify(this.value))},destroyed(){this.$panel.events.off("keydown.cmd.s",this.hasChanges?this.submit:null)},methods:{input(s){this.model=this.storage.setState(s)},async submit(s){s&&s.preventDefault(),await this.$api.post(this.endpoints.field,this.model),this.storage.clearState(),window.location.reload()},reset(){this.storage.clearState(),this.model=JSON.parse(JSON.stringify(this.value))}},computed:{hasChanges(){return JSON.stringify(this.model)!==JSON.stringify(this.value)}}};var h=function(){var e=this,t=e._self._c;return t("k-panel-inside",{staticClass:"k-user-view",attrs:{"data-has-tabs":!1,"data-id":"responsive-images"}},[t("k-header",{staticClass:"k-user-view-header",scopedSlots:e._u([e.hasChanges?{key:"buttons",fn:function(){return[t("k-button-group",{staticClass:"k-form-buttons",attrs:{layout:"collapsed"}},[t("k-button",{attrs:{theme:"notice",icon:"undo",size:"sm",variant:"filled",text:e.$t("revert"),responsive:!0},on:{click:function(a){return a.preventDefault(),e.reset.apply(null,arguments)}}}),t("k-button",{attrs:{theme:"notice",icon:"check",size:"sm",variant:"filled",text:e.$t("save"),responsive:!0},on:{click:function(a){return a.preventDefault(),e.submit.apply(null,arguments)}}})],1)]},proxy:!0}:null],null,!0)}),t("k-fieldset",{attrs:{fields:e.fields,value:e.model},on:{input:e.input}})],1)},v=[],m=o(_,h,v,!1,null,null,null,null);const g=m.exports,y={props:{focalpoints:{type:Array,default:()=>[]},label:{type:String,default:"Focal Points"},help:{type:String,default:""},fieldModel:{type:Array,default:()=>[]},breakpoints:{type:Array,default:()=>[]},fileType:{type:String,default:""},value:{type:Object,default:()=>({})}},methods:{updateModel(s){this.$emit("input",s)}}};var k=function(){var e=this,t=e._self._c;return t("div",[e.fileType==="image"?[t("k-field",{attrs:{label:e.label,help:e.help}},[t("nerdcel-focal-points-dialog",{attrs:{model:e.fieldModel,breakpoints:e.breakpoints,"focal-model":e.value},on:{input:function(a){return e.updateModel(a)}}})],1)]:t("k-field",[t("k-box",{attrs:{theme:"warning",text:e.$t("nerdcel.responsive-images.focalpoints.field-not-supported")}})],1)],2)},$=[],S=o(y,k,$,!1,null,null,null,null);const b=S.exports,G="",C={data(){return{selectedBreakpoint:null,store:null}},props:{model:{type:Array,default:()=>[]},focalModel:{type:Object,default:()=>({})},breakpoints:{type:Array,default:()=>[]}},computed:{canSet(){return this.selectedBreakpoint&&this.focalModel[this.selectedBreakpoint]},coords(){return this.transformCoords(this.focalModel[this.selectedBreakpoint])},breakpointOptions(){return this.breakpoints.map(s=>({text:`${s.name} - ${s.width}`,value:s.name}))}},methods:{transformCoords(s){if(!s)return null;const[e,t]=s.split(" ");return{x:parseFloat(e),y:parseFloat(t)}},updateCoords(s){this.setFocal(this.selectedBreakpoint,`${s.x.toFixed(1)}% ${s.y.toFixed(1)}%`)},setFocal(s,e="50% 50%"){this.$emit("input",{...this.focalModel,[s]:`${e}`})},removeFocal(s){this.$emit("input",{...this.focalModel,[s]:null})}}};var F=function(){var a;var e=this,t=e._self._c;return t("div",{staticClass:"nerdcel-focal-points"},[t("k-grid",{staticStyle:{"--grid-inline-gap":"0"},attrs:{variant:"columns"}},[t("k-column",{staticStyle:{"--width":"8/12"}},[t("div",{staticClass:"nerdcel-focal-points__image"},[t("k-coords-input",{class:["nerdcel-focal-points__image-coords",{"nerdcel-focal-points__image-coords-set":e.canSet}],staticStyle:{"--opacity-disabled":"1"},attrs:{value:e.coords,disabled:!e.canSet},on:{input:e.updateCoords}},[t("img",{attrs:{src:e.model.url,alt:(a=e.model.content)==null?void 0:a.alt}}),t("nerdcel-pins",{attrs:{pins:e.focalModel}})],1)],1)]),t("k-column",{staticStyle:{"--width":"4/12"}},[t("div",{staticClass:"nerdcel-focal-points__details"},[t("k-field",{attrs:{input:"breakpointOptions",label:e.$t("nerdcel.responsove-images.focalpoints.label-breakpoints"),help:e.$t("nerdcel.responsove-images.focalpoints.help-breakpoints")}},[t("k-select-input",{attrs:{id:"breakpointOptions",name:"select",options:e.breakpointOptions,value:e.selectedBreakpoint},on:{input:function(i){e.selectedBreakpoint=i}}})],1),e.selectedBreakpoint?t("k-field",[e.focalModel[e.selectedBreakpoint]?t("k-button",{attrs:{theme:"light",variant:"filled",icon:"trash",size:"sm"},on:{click:function(i){return e.removeFocal(e.selectedBreakpoint)}}},[e._v(e._s(e.focalModel[e.selectedBreakpoint])+" ")]):t("k-button",{attrs:{variant:"filled",icon:"preview",size:"sm"},on:{click:function(i){return e.setFocal(e.selectedBreakpoint)}}},[e._v(e._s(e.$t("nerdcel.responsive-images.field.label.set-focal-point"))+" ")])],1):e._e()],1)])],1)],1)},O=[],w=o(C,F,O,!1,null,null,null,null);const x=w.exports,H="",R={props:{name:{type:String,default:""},pin:{type:String,default:"50% 50%"}},computed:{getCoords(){const[s,e]=this.pin.split(" ");return{"--x":`${s}`,"--y":`${e}`}}}};var B=function(){var e=this,t=e._self._c;return t("span",{class:["nerdcel-focal-points-pin",{"nerdcel-focal-points-pin--is-right":parseInt(e.getCoords["--x"])>80}],style:e.getCoords},[t("i",[e._v(e._s(e.name))])])},M=[],N=o(R,B,M,!1,null,null,null,null);const J=N.exports,K="",P={components:{Pin:J},props:{pins:{type:Array,default:()=>[]}}};var z=function(){var e=this,t=e._self._c;return t("div",{staticClass:"nerdcel-focal-points-pins"},e._l(e.pins,function(a,i){return t("pin",{key:i,attrs:{pin:a,name:i}})}),1)},A=[],T=o(P,z,A,!1,null,null,null,null);const D=T.exports,I={};var j=function(){var e=this,t=e._self._c;return t("k-inside",{staticClass:"k-responsive-images-panel"},[t("k-view",[t("k-header",[t("h2",[e._v(e._s(e.$t("nerdcel.responsive-images.restricted.title")))])]),t("p",[e._v(" "+e._s(e.$t("nerdcel.responsive-images.restricted.text"))+" ")])],1)],1)},U=[],V=o(I,j,U,!1,null,null,null,null);const X=V.exports;window.panel.plugin("nerdcel/responsive-images",{components:{"nerdcel-responsive-images":g,"nerdcel-restricted":X,"nerdcel-pins":D,"nerdcel-focal-points-dialog":x},fields:{focalpoints:b}})})();