@towavephone/react-watermark-component
Version:
react-watermark-component is a component that can generate a water mark background image.
85 lines (72 loc) • 11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var SecurityDefense = function SecurityDefense(watermarkDOM, style, securityHooks) {
var _this = this;
_classCallCheck(this, SecurityDefense);
this.getDOM = function (id) {
return document.getElementById(id);
};
this.registerNodeRemoveListener = function (target) {
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === 'childList') {
var removeNodes = mutation.removedNodes;
if (removeNodes && removeNodes[0] && removeNodes[0].id) {
var id = removeNodes[0].id;
if (id && id.indexOf(_this.watermarkId) > -1) {
if (_this.securityAlarm) {
_this.securityAlarm();
}
_this.createWaterMarkDom(target);
}
}
}
});
});
var config = { childList: true };
observer.observe(target, config);
_this.updateObserver({ DOMRemoveObserver: observer });
};
this.createWaterMarkDom = function (parent) {
var newWaterMark = document.createElement('div');
_this.watermarkId = _this.genRandomId('water-mark-dynamic');
newWaterMark.id = _this.watermarkId;
_this.waterMarkStyle = _this.waterMarkStyle.concat('background-image: url("' + _this.getImageUrl() + '");');
newWaterMark.style = _this.waterMarkStyle;
parent.appendChild(newWaterMark);
var newDOM = _this.getDOM(_this.watermarkId);
_this.registerNodeAttrChangeListener(newDOM);
};
this.registerNodeAttrChangeListener = function (target) {
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === 'attributes') {
target.parentNode.removeChild(target);
observer.disconnect();
}
});
});
var config = { attributes: true, attributeFilter: ['style'] };
observer.observe(target, config);
_this.updateObserver({ DOMAttrModifiedObserver: observer });
};
this.watermarkId = watermarkDOM.watermarkId;
this.watermarkWrapperId = watermarkDOM.watermarkWrapperId;
this.genRandomId = watermarkDOM.genRandomId;
this.waterMarkStyle = style.waterMarkStyle;
this.getImageUrl = style.getCanvasUrl;
this.securityAlarm = securityHooks.securityAlarm;
this.updateObserver = securityHooks.updateObserver;
var wrapper = this.getDOM(this.watermarkWrapperId);
var watermark = this.getDOM(this.watermarkId);
this.registerNodeRemoveListener(wrapper);
this.registerNodeAttrChangeListener(watermark);
};
exports.default = SecurityDefense;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9TZWN1cml0eURlZmVuc2UuanMiXSwibmFtZXMiOlsiU2VjdXJpdHlEZWZlbnNlIiwid2F0ZXJtYXJrRE9NIiwic3R5bGUiLCJzZWN1cml0eUhvb2tzIiwiZ2V0RE9NIiwiaWQiLCJkb2N1bWVudCIsImdldEVsZW1lbnRCeUlkIiwicmVnaXN0ZXJOb2RlUmVtb3ZlTGlzdGVuZXIiLCJ0YXJnZXQiLCJNdXRhdGlvbk9ic2VydmVyIiwid2luZG93IiwiV2ViS2l0TXV0YXRpb25PYnNlcnZlciIsIk1vek11dGF0aW9uT2JzZXJ2ZXIiLCJvYnNlcnZlciIsIm11dGF0aW9ucyIsImZvckVhY2giLCJtdXRhdGlvbiIsInR5cGUiLCJyZW1vdmVOb2RlcyIsInJlbW92ZWROb2RlcyIsImluZGV4T2YiLCJ3YXRlcm1hcmtJZCIsInNlY3VyaXR5QWxhcm0iLCJjcmVhdGVXYXRlck1hcmtEb20iLCJjb25maWciLCJjaGlsZExpc3QiLCJvYnNlcnZlIiwidXBkYXRlT2JzZXJ2ZXIiLCJET01SZW1vdmVPYnNlcnZlciIsInBhcmVudCIsIm5ld1dhdGVyTWFyayIsImNyZWF0ZUVsZW1lbnQiLCJnZW5SYW5kb21JZCIsIndhdGVyTWFya1N0eWxlIiwiY29uY2F0IiwiZ2V0SW1hZ2VVcmwiLCJhcHBlbmRDaGlsZCIsIm5ld0RPTSIsInJlZ2lzdGVyTm9kZUF0dHJDaGFuZ2VMaXN0ZW5lciIsInBhcmVudE5vZGUiLCJyZW1vdmVDaGlsZCIsImRpc2Nvbm5lY3QiLCJhdHRyaWJ1dGVzIiwiYXR0cmlidXRlRmlsdGVyIiwiRE9NQXR0ck1vZGlmaWVkT2JzZXJ2ZXIiLCJ3YXRlcm1hcmtXcmFwcGVySWQiLCJnZXRDYW52YXNVcmwiLCJ3cmFwcGVyIiwid2F0ZXJtYXJrIl0sIm1hcHBpbmdzIjoiOzs7Ozs7OztJQUFxQkEsZSxHQUNuQix5QkFBWUMsWUFBWixFQUEwQkMsS0FBMUIsRUFBaUNDLGFBQWpDLEVBQWdEO0FBQUE7O0FBQUE7O0FBQUEsT0FpQmhEQyxNQWpCZ0Qs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R0FBMEI3QyxhQUFhNkMsa0JBQXZDO0FBQ0EsT0FBS2IsV0FBTCxHQUFtQmhDLGFBQWFnQyxXQUFoQzs7QUFFQSxPQUFLQyxjQUFMLEdBQXNCaEMsTUFBTWdDLGNBQTVCO0FBQ0EsT0FBS0UsV0FBTCxHQUFtQmxDLE1BQU02QyxZQUF6Qjs7QUFFQSxPQUFLeEIsYUFBTCxHQUFxQnBCLGNBQWNvQixhQUFuQztBQUNBLE9BQUtLLGNBQUwsR0FBc0J6QixjQUFjeUIsY0FBcEM7O0FBRUEsTUFBTW9CLFVBQVUsS0FBSzVDLE1BQUwsQ0FBWSxLQUFLMEMsa0JBQWpCLENBQWhCO0FBQ0EsTUFBTUcsWUFBWSxLQUFLN0MsTUFBTCxDQUFZLEtBQUtrQixXQUFqQixDQUFsQjtBQUNBLE9BQUtkLDBCQUFMLENBQWdDd0MsT0FBaEM7QUFDQSxPQUFLVCw4QkFBTCxDQUFvQ1UsU0FBcEM7QUFDRCxDOztrQkFoQmtCakQsZSIsImZpbGUiOiJTZWN1cml0eURlZmVuc2UuanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCBjbGFzcyBTZWN1cml0eURlZmVuc2Uge1xuICBjb25zdHJ1Y3Rvcih3YXRlcm1hcmtET00sIHN0eWxlLCBzZWN1cml0eUhvb2tzKSB7XG4gICAgdGhpcy53YXRlcm1hcmtJZCA9IHdhdGVybWFya0RPTS53YXRlcm1hcmtJZFxuICAgIHRoaXMud2F0ZXJtYXJrV3JhcHBlcklkID0gd2F0ZXJtYXJrRE9NLndhdGVybWFya1dyYXBwZXJJZFxuICAgIHRoaXMuZ2VuUmFuZG9tSWQgPSB3YXRlcm1hcmtET00uZ2VuUmFuZG9tSWRcblxuICAgIHRoaXMud2F0ZXJNYXJrU3R5bGUgPSBzdHlsZS53YXRlck1hcmtTdHlsZVxuICAgIHRoaXMuZ2V0SW1hZ2VVcmwgPSBzdHlsZS5nZXRDYW52YXNVcmxcblxuICAgIHRoaXMuc2VjdXJpdHlBbGFybSA9IHNlY3VyaXR5SG9va3Muc2VjdXJpdHlBbGFybVxuICAgIHRoaXMudXBkYXRlT2JzZXJ2ZXIgPSBzZWN1cml0eUhvb2tzLnVwZGF0ZU9ic2VydmVyXG5cbiAgICBjb25zdCB3cmFwcGVyID0gdGhpcy5nZXRET00odGhpcy53YXRlcm1hcmtXcmFwcGVySWQpXG4gICAgY29uc3Qgd2F0ZXJtYXJrID0gdGhpcy5nZXRET00odGhpcy53YXRlcm1hcmtJZClcbiAgICB0aGlzLnJlZ2lzdGVyTm9kZVJlbW92ZUxpc3RlbmVyKHdyYXBwZXIpXG4gICAgdGhpcy5yZWdpc3Rlck5vZGVBdHRyQ2hhbmdlTGlzdGVuZXIod2F0ZXJtYXJrKVxuICB9XG5cbiAgZ2V0RE9NID0gKGlkKSA9PiB7XG4gICAgcmV0dXJuIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGlkKVxuICB9XG5cbiAgcmVnaXN0ZXJOb2RlUmVtb3ZlTGlzdGVuZXIgPSAodGFyZ2V0KSA9PiB7XG4gICAgbGV0IE11dGF0aW9uT2JzZXJ2ZXIgPSB3aW5kb3cuTXV0YXRpb25PYnNlcnZlciB8fCB3aW5kb3cuV2ViS2l0TXV0YXRpb25PYnNlcnZlciB8fCB3aW5kb3cuTW96TXV0YXRpb25PYnNlcnZlclxuICAgIGxldCBvYnNlcnZlciA9IG5ldyBNdXRhdGlvbk9ic2VydmVyKChtdXRhdGlvbnMpID0+IHtcbiAgICAgIG11dGF0aW9ucy5mb3JFYWNoKChtdXRhdGlvbikgPT4ge1xuICAgICAgICBpZiAobXV0YXRpb24udHlwZSA9PT0gJ2NoaWxkTGlzdCcpIHtcbiAgICAgICAgICBjb25zdCByZW1vdmVOb2RlcyA9IG11dGF0aW9uLnJlbW92ZWROb2Rlc1xuICAgICAgICAgIGlmIChyZW1vdmVOb2RlcyAmJiByZW1vdmVOb2Rlc1swXSAmJiByZW1vdmVOb2Rlc1swXS5pZCkge1xuICAgICAgICAgICAgY29uc3QgaWQgPSByZW1vdmVOb2Rlc1swXS5pZFxuICAgICAgICAgICAgaWYgKGlkICYmIGlkLmluZGV4T2YodGhpcy53YXRlcm1hcmtJZCkgPiAtMSkge1xuICAgICAgICAgICAgICBpZiAodGhpcy5zZWN1cml0eUFsYXJtKSB7XG4gICAgICAgICAgICAgICAgdGhpcy5zZWN1cml0eUFsYXJtKClcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICB0aGlzLmNyZWF0ZVdhdGVyTWFya0RvbSh0YXJnZXQpXG4gICAgICAgICAgICB9XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9KVxuICAgIH0pXG4gICAgbGV0IGNvbmZpZyA9IHsgY2hpbGRMaXN0OiB0cnVlIH1cbiAgICBvYnNlcnZlci5vYnNlcnZlKHRhcmdldCwgY29uZmlnKVxuICAgIHRoaXMudXBkYXRlT2JzZXJ2ZXIoeyBET01SZW1vdmVPYnNlcnZlcjogb2JzZXJ2ZXIgfSlcbiAgfVxuXG4gIGNyZWF0ZVdhdGVyTWFya0RvbSA9IChwYXJlbnQpID0+IHtcbiAgICBjb25zdCBuZXdXYXRlck1hcmsgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKVxuICAgIHRoaXMud2F0ZXJtYXJrSWQgPSB0aGlzLmdlblJhbmRvbUlkKCd3YXRlci1tYXJrLWR5bmFtaWMnKVxuICAgIG5ld1dhdGVyTWFyay5pZCA9IHRoaXMud2F0ZXJtYXJrSWRcbiAgICB0aGlzLndhdGVyTWFya1N0eWxlID0gdGhpcy53YXRlck1hcmtTdHlsZS5jb25jYXQoYGJhY2tncm91bmQtaW1hZ2U6IHVybChcIiR7dGhpcy5nZXRJbWFnZVVybCgpfVwiKTtgKVxuICAgIG5ld1dhdGVyTWFyay5zdHlsZSA9IHRoaXMud2F0ZXJNYXJrU3R5bGVcbiAgICBwYXJlbnQuYXBwZW5kQ2hpbGQobmV3V2F0ZXJNYXJrKVxuICAgIGNvbnN0IG5ld0RPTSA9IHRoaXMuZ2V0RE9NKHRoaXMud2F0ZXJtYXJrSWQpXG4gICAgdGhpcy5yZWdpc3Rlck5vZGVBdHRyQ2hhbmdlTGlzdGVuZXIobmV3RE9NKVxuICB9XG5cbiAgcmVnaXN0ZXJOb2RlQXR0ckNoYW5nZUxpc3RlbmVyID0gKHRhcmdldCkgPT4ge1xuICAgIGxldCBNdXRhdGlvbk9ic2VydmVyID0gd2luZG93Lk11dGF0aW9uT2JzZXJ2ZXIgfHwgd2luZG93LldlYktpdE11dGF0aW9uT2JzZXJ2ZXIgfHwgd2luZG93Lk1vek11dGF0aW9uT2JzZXJ2ZXJcbiAgICBsZXQgb2JzZXJ2ZXIgPSBuZXcgTXV0YXRpb25PYnNlcnZlcigobXV0YXRpb25zKSA9PiB7XG4gICAgICBtdXRhdGlvbnMuZm9yRWFjaCgobXV0YXRpb24pID0+IHtcbiAgICAgICAgaWYgKG11dGF0aW9uLnR5cGUgPT09ICdhdHRyaWJ1dGVzJykge1xuICAgICAgICAgIHRhcmdldC5wYXJlbnROb2RlLnJlbW92ZUNoaWxkKHRhcmdldClcbiAgICAgICAgICBvYnNlcnZlci5kaXNjb25uZWN0KClcbiAgICAgICAgfVxuICAgICAgfSlcbiAgICB9KVxuICAgIGxldCBjb25maWcgPSB7IGF0dHJpYnV0ZXM6IHRydWUsIGF0dHJpYnV0ZUZpbHRlcjogWydzdHlsZSddIH1cbiAgICBvYnNlcnZlci5vYnNlcnZlKHRhcmdldCwgY29uZmlnKVxuICAgIHRoaXMudXBkYXRlT2JzZXJ2ZXIoeyBET01BdHRyTW9kaWZpZWRPYnNlcnZlcjogb2JzZXJ2ZXIgfSlcbiAgfVxufVxuIl19