vue-focuspoint-component
Version:
Set focus point on elements
1 lines • 6.67 kB
JavaScript
webpackJsonp([1],{EOwc:function(t,e,s){t.exports=s.p+"img/image_1.01b1131.jpg"},NHnr:function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=s("Dd8w"),a=s.n(i),n=s("/5sW"),o={name:"FocusPoint",props:{value:{type:Object,default:function(){return{x:50,y:50}}}},data:function(){return{pin:null}},computed:{pinStyle:function(){if(!this.pin)return null;var t=this.pin,e=t.width,s=t.height;if(!this.value)return{left:this.s(50,e),top:this.s(50,s)};var i=this.value,a=i.x,n=i.y;return{left:this.s(a,e),top:this.s(n,s)}}},mounted:function(){this.pin=this.$refs.pin.getBoundingClientRect()},methods:{click:function(t){var e=t.clientX,s=t.clientY,i=this.$el.getBoundingClientRect(),a=i.left,n=i.width,o=i.top,c=i.height;this.$emit("input",{x:this.c(e,a,n),y:this.c(s,o,c)})},c:function(t,e,s){return Math.round((t-e)/s*100)},s:function(t,e){return"calc("+t+"% - "+e/2+"px)"}}},c={render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"focus-point",on:{click:this.click}},[this._t("default"),this._v(" "),e("div",{ref:"pin",staticClass:"focus-point-pin",style:this.pinStyle},[this._t("pin")],2)],2)},staticRenderFns:[]},l={name:"App",components:{FocusPoint:s("VU/8")(o,c,!1,null,null,null).exports},data:function(){return{imageOne:null,imageTwo:{x:69,y:60},imageThree:{x:69,y:58},imageFour:null}}},r={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{attrs:{id:"app"}},[i("div",{staticClass:"my-5 container"},[t._m(0),t._v(" "),i("main",{attrs:{role:"main"}},[i("div",{staticClass:"row my-5"},[i("div",{staticClass:"col-md-6"},[i("h4",[t._v("Feel free set a focus point")]),t._v(" "),i("p",[t._v("Click on the element (picture)")]),t._v(" "),i("focus-point",{model:{value:t.imageOne,callback:function(e){t.imageOne=e},expression:"imageOne"}},[i("img",{staticClass:"img-fluid",attrs:{src:s("EOwc"),alt:"vue-focuspoint-component"}})]),t._v(" "),t.imageOne?i("div",{staticClass:"row my-3"},[i("div",{staticClass:"col-6"},[i("pre",[t._v(t._s(t.imageOne))])]),t._v(" "),i("div",{staticClass:"col-5 col-sm-4 ml-auto image-description"},[i("img",{staticClass:"img-fluid preview-image",style:{objectPosition:t.imageOne.x+"% "+t.imageOne.y+"%"},attrs:{src:s("EOwc"),alt:"vue-focuspoint-component"}})])]):t._e()],1),t._v(" "),i("div",{staticClass:"col-md-6"},[i("h4",[t._v("A saved focus point")]),t._v(" "),t._m(1),t._v(" "),i("focus-point",{model:{value:t.imageTwo,callback:function(e){t.imageTwo=e},expression:"imageTwo"}},[i("img",{staticClass:"img-fluid",attrs:{src:s("EOwc"),alt:"vue-focuspoint-component"}})]),t._v(" "),t.imageTwo?i("div",{staticClass:"row my-3"},[i("div",{staticClass:"col-6"},[i("pre",[t._v(t._s(t.imageTwo))])]),t._v(" "),i("div",{staticClass:"col-5 col-sm-4 ml-auto image-description"},[i("img",{staticClass:"img-fluid preview-image",style:{objectPosition:t.imageTwo.x+"% "+t.imageTwo.y+"%"},attrs:{src:s("EOwc"),alt:"vue-focuspoint-component"}})])]):t._e()],1)]),t._v(" "),i("div",{staticClass:"row my-5"},[i("div",{staticClass:"col-md-6"},[i("h4",[t._v("Own focus pin")]),t._v(" "),t._m(2),t._v(" "),i("focus-point",{model:{value:t.imageThree,callback:function(e){t.imageThree=e},expression:"imageThree"}},[i("template",{slot:"pin"},[t._v("\n 😀\n ")]),t._v(" "),i("img",{staticClass:"img-fluid",attrs:{src:s("EOwc"),alt:"vue-focuspoint-component"}})],2),t._v(" "),t.imageThree?i("div",{staticClass:"row my-3"},[i("div",{staticClass:"col-6"},[i("pre",[t._v(t._s(t.imageThree))])]),t._v(" "),i("div",{staticClass:"col-5 col-sm-4 ml-auto image-description"},[i("img",{staticClass:"img-fluid preview-image",style:{objectPosition:t.imageThree.x+"% "+t.imageThree.y+"%"},attrs:{src:s("EOwc"),alt:"vue-focuspoint-component"}})])]):t._e()],1),t._v(" "),i("div",{staticClass:"col-md-6"},[i("h4",[t._v("Other elements")]),t._v(" "),i("p",[t._v("Test on another element")]),t._v(" "),i("focus-point",{model:{value:t.imageFour,callback:function(e){t.imageFour=e},expression:"imageFour"}},[i("div",{staticClass:"jumbotron"},[i("h1",{staticClass:"display-4"},[t._v("Hello, world!")]),t._v(" "),i("p",{staticClass:"lead"},[t._v("\n This is a simple hero unit, a simple jumbotron-style component for\n calling extra attention to featured content or information.\n ")]),t._v(" "),i("hr",{staticClass:"my-4"}),t._v(" "),i("p",[t._v("\n It uses utility classes for typography and spacing to\n space content out within the larger container.\n ")]),t._v(" "),i("p",{staticClass:"lead"},[i("a",{staticClass:"btn btn-primary btn-lg",attrs:{href:"#",role:"button"}},[t._v("\n Learn more\n ")])])])]),t._v(" "),t.imageFour?i("div",{staticClass:"row my-3"},[i("div",{staticClass:"col-6"},[i("pre",[t._v(t._s(t.imageFour))])])]):t._e()],1)])])])])},staticRenderFns:[function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("header",{staticClass:"pb-3 clearfix border-bottom"},[s("ul",{staticClass:"nav float-right"},[s("li",{staticClass:"nav-item"},[s("a",{staticClass:"nav-link",attrs:{href:"https://github.com/EvodiaAut/vue-focuspoint-component",target:"_blank"}},[t._v("\n Github\n ")])])]),t._v(" "),s("h1",{staticClass:"text-muted"},[t._v("vue-focuspoint-component")]),t._v(" "),s("p",{staticClass:"lead"},[t._v("Set focus point on elements ")]),t._v(" "),s("div",{staticClass:"d-flex flex-wrap"},[s("a",{attrs:{href:"https://www.npmjs.com/package/vue-focuspoint-component",target:"_blank"}},[s("img",{staticClass:"m-1",attrs:{src:"https://img.shields.io/npm/v/vue-focuspoint-component.svg?style=for-the-badge",alt:"vue-focuspoint-component npm"}})]),t._v(" "),s("a",{attrs:{href:"https://github.com/EvodiaAut/vue-focuspoint-component/blob/master/LICENSE.md",target:"_blank"}},[s("img",{staticClass:"m-1",attrs:{src:"https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge",alt:"vue-focuspoint-component license"}})]),t._v(" "),s("a",{attrs:{href:"https://www.npmjs.com/package/vue-focuspoint-component",target:"_blank"}},[s("img",{staticClass:"m-1",attrs:{src:"https://img.shields.io/npm/dt/vue-focuspoint-component.svg?style=for-the-badge",alt:"vue-focuspoint-component npm"}})])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[e("code",[this._v('v-model="imageOne"')])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[e("code",[this._v('slot="pin"')]),this._v(" Set your own pin")])}]};var m=s("VU/8")(l,r,!1,function(t){s("rZkm")},null,null).exports;n.a.config.productionTip=!1,new n.a(a()({el:"#app"},m))},rZkm:function(t,e){}},["NHnr"]);