v-spotlight
Version:
Tiny reusable Spotlight component for your Vue App
2 lines (1 loc) • 5.47 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VSpotlight=t()}(this,(function(){"use strict";var e={name:"VSpotlight",props:{background:{type:String,required:!0},position:{type:String,default:"center",required:!1}},data:()=>({spotlight:null,spotlightSize:"transparent 160px, rgba(0, 0, 0, 0.85) 200px)"}),mounted(){const e=this;e.spotlight=document.querySelector(".spotlight"),window.addEventListener("mousemove",t=>{e.updateSpotlight(t)}),window.addEventListener("mousedown",t=>{1===t.which&&(e.spotlightSize="transparent 130px, rgba(0, 0, 0, 0.95) 150px)",e.updateSpotlight(t))}),window.addEventListener("mouseup",t=>{e.spotlightSize="transparent 160px, rgba(0, 0, 0, 0.85) 200px)",e.updateSpotlight(t)})},methods:{updateSpotlight(e){this.spotlight.style.backgroundImage=`radial-gradient(circle at ${e.pageX/window.innerWidth*100}% ${e.pageY/window.innerHeight*100}%, ${this.spotlightSize}`}}};const t="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());let n;const i={};const o=e;var s=function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"bg-container",style:{background:"url("+this.background+") no-repeat "+this.position}},[t("div",{staticClass:"spotlight"})])};s._withStripped=!0;return function(e,t,n,i,o,s,a,r,d,p){"boolean"!=typeof a&&(d=r,r=a,a=!1);const l="function"==typeof n?n.options:n;let c;if(e&&e.render&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,o&&(l.functional=!0)),i&&(l._scopeId=i),s?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},l._ssrRegister=c):t&&(c=a?function(e){t.call(this,p(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),c)if(l.functional){const e=l.render;l.render=function(t,n){return c.call(n),e(t,n)}}else{const e=l.beforeCreate;l.beforeCreate=e?[].concat(e,c):[c]}return n}({render:s,staticRenderFns:[]},(function(e){e&&e("data-v-60ffb0e1_0",{source:"\n.bg-container[data-v-60ffb0e1] {\n background-size: cover;\n height: 100vh;\n}\n.spotlight[data-v-60ffb0e1] {\n position: absolute;\n height: 100vh;\n width: 100vh;\n background-image: radial-gradient(\n circle,\n transparent 160px,\n rgba(0, 0, 0, 0.85) 200px\n );\n}\n",map:{version:3,sources:["/home/runner/work/v-spotlight/v-spotlight/src/VSpotlight.vue"],names:[],mappings:";AAwDA;EACA,sBAAA;EACA,aAAA;AACA;AACA;EACA,kBAAA;EACA,aAAA;EACA,YAAA;EACA;;;;GAIA;AACA",file:"VSpotlight.vue",sourcesContent:["<template>\n <div\n class=\"bg-container\"\n :style=\"{ background: `url(${background}) no-repeat ${position}` }\"\n >\n <div class=\"spotlight\"></div>\n </div>\n</template>\n<script>\n export default {\n name: 'VSpotlight',\n props: {\n background: {\n type: String,\n required: true,\n },\n position: {\n type: String,\n default: 'center',\n required: false,\n },\n },\n data() {\n return {\n spotlight: null,\n spotlightSize: 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)',\n };\n },\n mounted() {\n const t = this;\n t.spotlight = document.querySelector('.spotlight');\n window.addEventListener('mousemove', (e) => {\n t.updateSpotlight(e);\n });\n window.addEventListener('mousedown', (e) => {\n if (e.which === 1) {\n t.spotlightSize = 'transparent 130px, rgba(0, 0, 0, 0.95) 150px)';\n t.updateSpotlight(e);\n }\n });\n window.addEventListener('mouseup', (e) => {\n t.spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';\n t.updateSpotlight(e);\n });\n },\n methods: {\n updateSpotlight(e) {\n const t = this;\n t.spotlight.style.backgroundImage = `radial-gradient(circle at ${\n (e.pageX / window.innerWidth) * 100\n }% ${(e.pageY / window.innerHeight) * 100}%, ${t.spotlightSize}`;\n },\n },\n };\n<\/script>\n<style scoped>\n .bg-container {\n background-size: cover;\n height: 100vh;\n }\n .spotlight {\n position: absolute;\n height: 100vh;\n width: 100vh;\n background-image: radial-gradient(\n circle,\n transparent 160px,\n rgba(0, 0, 0, 0.85) 200px\n );\n }\n</style>\n"]},media:void 0})}),o,"data-v-60ffb0e1",!1,void 0,!1,(function(e){return(e,o)=>function(e,o){const s=t?o.media||"default":e,a=i[s]||(i[s]={ids:new Set,styles:[]});if(!a.ids.has(e)){a.ids.add(e);let t=o.source;if(o.map&&(t+="\n/*# sourceURL="+o.map.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o.map))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",o.media&&a.element.setAttribute("media",o.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(a.element)),"styleSheet"in a.element)a.styles.push(t),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{const e=a.ids.size-1,n=document.createTextNode(t),i=a.element.childNodes;i[e]&&a.element.removeChild(i[e]),i.length?a.element.insertBefore(n,i[e]):a.element.appendChild(n)}}}(e,o)}),void 0,void 0)}));