@wendyjs/watermarker
Version:
This is a framework-agnostic package that provides a Watermark class for managing watermarks on HTML elements. It includes features such as automatic re-rendering when mutations occur, customizable watermark styles
2 lines (1 loc) • 11.7 kB
JavaScript
function _createForOfIteratorHelper(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,o=function(){};return{s:o,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,i=!0,c=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return i=e.done,e},e:function(e){c=!0,a=e},f:function(){try{i||null==r.return||r.return()}finally{if(c)throw a}}}}function ownKeys(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach((function(t){_defineProperty(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function _defineProperty(e,t,r){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,_toPropertyKey(n.key),n)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e}function _toPropertyKey(e){var t=_toPrimitive(e,"string");return"symbol"==_typeof(t)?t:t+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!=_typeof(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArrayLimit(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,i,c=[],l=!0,u=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(c.push(n.value),c.length!==t);l=!0);}catch(e){u=!0,o=e}finally{try{if(!l&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(u)throw o}}return c}}function _arrayWithHoles(e){if(Array.isArray(e))return e}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}}function _iterableToArray(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function _typeof(e){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_typeof(e)}!function(e,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Watermark=t()}(this,(function(){"use strict";var e=function(e,t){var r=!1;return e.removedNodes.length&&(r=Array.from(e.removedNodes).some((function(e){return t(e)}))),"attributes"===e.type&&t(e.target)&&(r=!0),r};var t,r=3;function n(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,n=document.createElement("canvas"),o=n.getContext("2d"),a=e*r,i=t*r;return n.setAttribute("width","".concat(a,"px")),n.setAttribute("height","".concat(i,"px")),o.save(),[o,n,a,i]}function o(){return function(e,t,r,o,a,i,c,l){var u=_slicedToArray(n(o,a,r),4),f=u[0],s=u[1],y=u[2],d=u[3];if(e instanceof HTMLImageElement)f.drawImage(e,0,0,y,d);else{var b=i.color,p=i.fontSize,m=i.fontStyle,h=i.fontWeight,v=i.fontFamily,g=i.textAlign,_=Number(p)*r;f.font="".concat(m," normal ").concat(h," ").concat(_,"px/").concat(a,"px ").concat(v),f.fillStyle=b,f.textAlign=g,f.textBaseline="top";var w=Array.isArray(e)?e:[e];w&&w.forEach((function(e,t){f.fillText(e||"",y/2,t*(_+3*r))})),f.fillStyle="rgba(0,0,0,0)",f.fillRect(0,0,s.width,s.height)}var A=Math.PI/180*Number(t),S=Math.max(o,a),x=_slicedToArray(n(S,S,r),3),j=x[0],k=x[1],T=x[2];j.translate(T/2,T/2),j.rotate(A),y>0&&d>0&&j.drawImage(s,-y/2,-d/2);var O=0,P=0,M=0,I=0,C=y/2,F=d/2;[[0-C,0-F],[0+C,0-F],[0+C,0+F],[0-C,0+F]].forEach((function(e){var t=_slicedToArray(e,2),r=function(e,t){return[e*Math.cos(A)-t*Math.sin(A),e*Math.sin(A)+t*Math.cos(A)]}(t[0],t[1]),n=_slicedToArray(r,2),o=n[0],a=n[1];O=Math.min(O,o),P=Math.max(P,o),M=Math.min(M,a),I=Math.max(I,a)}));var W=O+T/2,E=M+T/2,L=P-O,z=I-M,N=c*r,H=l*r,D=2*(L+N),K=z+H,R=_slicedToArray(n(D,K),2),B=R[0],U=R[1];function $(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;B.drawImage(k,W,E,L,z,e,t,L,z)}return $(),$(L+N,-z/2-H/2),$(L+N,+z/2+H/2),[U.toDataURL(),D/r,K/r]}}!function(e){e.Color="rgba(0,0,0,0.1)",e[e.FontSize=14]="FontSize",e.FontWeight="normal",e.FontStyle="normal",e.FontFamily="sans-serif",e.TextAlign="center"}(t||(t={}));var a=function(){function n(e,t){_classCallCheck(this,n),Object.defineProperty(this,"watermarkMap",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"configs",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"getClips",{enumerable:!0,configurable:!0,writable:!0,value:o()}),Object.defineProperty(this,"watermarkInfo",{enumerable:!0,configurable:!0,writable:!0,value:["",0]}),Object.defineProperty(this,"observer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"container",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"debounced",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.configs=_objectSpread({zIndex:99999,rotate:-22,font:{},gap:[100,100],inherit:!0},e),this.container=t||document.body,this.watermarkMap=new Map,this.debounced=function(e,t){var r=(arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}).signal,n=null,o=function(){for(var o=arguments.length,a=new Array(o),i=0;i<o;i++)a[i]=arguments[i];null!==n&&clearTimeout(n),(null==r?void 0:r.aborted)||(n=setTimeout((function(){e.apply(void 0,a),n=null}),t))};return o.cancel=function(){null!==n&&(clearTimeout(n),n=null)},null==r||r.addEventListener("abort",(function(){o.cancel()}),{once:!0}),o}(this.renderWatermark.bind(this),500),this.observer=new MutationObserver(this.onMutate.bind(this))}return _createClass(n,[{key:"onMutate",value:function(t){var r,n=this,o=function(e){return Array.from(n.watermarkMap.values()).includes(e)},a=_createForOfIteratorHelper(t);try{for(a.s();!(r=a.n()).done;){var i=r.value;e(i,o)?this.debounced(this.container,!0):i.target===this.container&&i.attributeName}}catch(e){a.e(e)}finally{a.f()}}},{key:"renderWatermark",value:function(e){var n=this;e&&(this.container=e),this.removeWatermark(this.container);var o=this.configs,a=o.rotate,i=void 0===a?-22:a,c=o.image,l=o.content,u=o.font,f=void 0===u?{}:u,s=o.gap,y=void 0===s?[100,100]:s,d=f.color,b=void 0===d?t.Color:d,p=f.fontSize,m=void 0===p?t.FontSize:p,h=f.fontWeight,v=void 0===h?t.FontWeight:h,g=f.fontStyle,_=void 0===g?t.FontStyle:g,w=f.fontFamily,A=void 0===w?t.FontFamily:w,S=f.textAlign,x=void 0===S?t.TextAlign:S,j=_slicedToArray(y,2),k=j[0],T=j[1],O=document.createElement("canvas").getContext("2d");if(O&&this.container){var P=window.devicePixelRatio||1,M=function(e,t){var n=120,o=64,a=t.image,i=t.font,c=void 0===i?{}:i,l=t.width,u=t.height,f=t.content,s=c.fontSize,y=void 0===s?14:s,d=c.fontFamily,b=void 0===d?"sans-serif":d;if(!a&&e.measureText){e.font="".concat(Number(y),"px ").concat(b);var p=Array.isArray(f)?f:[f],m=p.map((function(t){var r=e.measureText(t);return[r.width,r.fontBoundingBoxAscent+r.fontBoundingBoxDescent]}));n=Math.ceil(Math.max.apply(Math,_toConsumableArray(m.map((function(e){return e[0]}))))),o=Math.ceil(Math.max.apply(Math,_toConsumableArray(m.map((function(e){return e[1]})))))*p.length+(p.length-1)*r}return[l||n,u||o]}(O,this.configs),I=_slicedToArray(M,2),C=I[0],F=I[1],W=function(e){var t=_slicedToArray(n.getClips(e||"",i,P,C,F,{color:b,fontSize:m,fontStyle:_,fontWeight:v,fontFamily:A,textAlign:x},k,T),2),r=t[0],o=t[1];n.watermarkInfo=[r,o];var a=n.appendWatermark(n.watermarkInfo[0],n.watermarkInfo[1],n.container);n.observer.observe(n.container,{attributes:!0,childList:!0,subtree:!0}),a&&n.observer.observe(a,{attributes:!0,childList:!0,subtree:!0})};if(c){var E=new Image;E.onload=function(){W(E)},E.onerror=function(){W(l)},E.crossOrigin="anonymous",E.referrerPolicy="no-referrer",E.src=c}else W(l)}}},{key:"appendWatermark",value:function(e,t,r){var n,o,a,i,c,l,u,f,s,y,d;if(r){if(!this.watermarkMap.get(r)){var b=document.createElement("div");this.watermarkMap.set(r,b)}n=this.watermarkMap.get(r);var p=(a=this.configs,i={zIndex:99999,position:"absolute",left:0,top:0,width:"100%",height:"100%",pointerEvents:"none",backgroundRepeat:"repeat"},c=a.offset,l=a.gap,u=_slicedToArray(void 0===l?[100,100]:l,2),f=u[0]/2,s=u[1]/2,y=((c?c[0]:0)||f)-f,d=((c?c[1]:0)||s)-s,y>0&&(i.left="".concat(y,"px"),i.width="calc(100% - ".concat(y,"px)"),y=0),d>0&&(i.top="".concat(d,"px"),i.height="calc(100% - ".concat(d,"px)"),d=0),i.backgroundPosition="".concat(y,"px ").concat(d,"px"),i);n.setAttribute("style",(o=_objectSpread(_objectSpread({},p),{},{backgroundImage:"url('".concat(e,"')"),backgroundSize:"".concat(Math.floor(t),"px")},{visibility:"visible !important"}),Object.keys(o).map((function(e){return"".concat(function(e){return e.replace(/([A-Z])/g,"-$1").toLowerCase()}(e),": ").concat(o[e],";")})).join(" "))),n.removeAttribute("class"),n.parentElement!==r&&r.append(n)}return n}},{key:"removeWatermark",value:function(e){var t=this.watermarkMap.get(e);t&&t.parentNode&&t.parentNode.removeChild(t),this.watermarkMap.delete(e),this.observer.disconnect()}}],[{key:"create",value:function(e,t){return null==this.instance?this.instance=new n(e,t):(e&&(this.instance.configs=_objectSpread(_objectSpread({},this.instance.configs),e)),t&&(this.instance.container=t)),this.instance.renderWatermark(),this.instance}}])}();return a}));