-
Notifications
You must be signed in to change notification settings - Fork 0
/
carbo-spotlighter.html
24 lines (14 loc) · 2.2 KB
/
carbo-spotlighter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html><head><meta charset="UTF-8"><link rel="import" href="../polymer/polymer.html">
</head><body><div hidden="" by-vulcanize=""><dom-module id="carbo-spotlighter-styles" assetpath="/"><template><style>#wrapper {position: fixed;z-index: 2;top: 0;left: 0;height: 100%;width: 100%;}#wrapper.hidden {width: 0;height: 0;}</style></template></dom-module></div><dom-module id="carbo-spotlighter">
<style include="carbo-spotlighter-styles"></style>
<template>
<svg id="wrapper" class="hidden" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<mask id="mask">
<rect width="100%" height="100%" fill="white"></rect>
</mask>
<rect width="100%" height="100%" fill="rgba(0, 0, 0, 0.7)" mask="url(#mask)"></rect>
</svg>
</template>
<script src="../lodash/lodash.js"></script>
<script>!function(){function t(t){var e=document.createElementNS(r,"rect"),i=this.padding;return e.setAttribute("x",t.left-i),e.setAttribute("y",t.top-i),e.setAttribute("width",t.width+2*i),e.setAttribute("height",t.height+2*i),e}function e(e){var n=document.createElementNS(r,"g");return n.setAttribute("id",_.uniqueId(i)),e.forEach(function(e){n.appendChild(t.call(this,e))}.bind(this)),n}var r="http://www.w3.org/2000/svg",i="carbo_spotlghter_";Polymer({is:"carbo-spotlighter",properties:{padding:{type:Number,notify:!0,value:5}},setTargetBoundingRects:function(t){this.unsetTarget();var r=e.call(this,t);return this.$.mask.appendChild(r),this.set("_currentApertureGroup",r),this},setTargetElements:function(t){"string"==typeof t?(t=document.querySelectorAll(t),t=Array.prototype.slice.call(t,0)):_.isArray(t)||(t=Array.prototype.slice.call(t,0));var e=t.map(function(t){return t.getBoundingClientRect()}.bind(this));return this.setTargetBoundingRects(e),this},unsetTarget:function(){var t=this.get("_currentApertureGroup");return t&&(this.$.mask.removeChild(t),this.set("_currentApertureGroup",!1)),this},hide:function(){return Polymer.Base.toggleClass("hidden",!0,this.$.wrapper),this},show:function(){return Polymer.Base.toggleClass("hidden",!1,this.$.wrapper),this}})}();</script>
</dom-module></body></html>