first commit
This commit is contained in:
root
224
public/component/pear/module/watermark/watermark.js
Executable file
224
public/component/pear/module/watermark/watermark.js
Executable file
@ -0,0 +1,224 @@
|
||||
/* global Watermark */
|
||||
layui.define(['jquery', 'element'], function(exports) {
|
||||
var $=layui.$;
|
||||
var _parentEle;
|
||||
var _wmContainer;
|
||||
var _wmObserver;
|
||||
var _wmParentObserver;
|
||||
var _resizeHandler;
|
||||
var _windowsWidth = window.outerWidth;
|
||||
var _windowsHeight = window.outerHeight;
|
||||
|
||||
var _left = 0;
|
||||
var _top = 0;
|
||||
|
||||
/**
|
||||
* Create DOM of watermark's container
|
||||
* @param {Watermark} watermark
|
||||
*/
|
||||
var _createContainer = function (watermark) {
|
||||
watermark._container = document.createElement('div');
|
||||
watermark._container.classList.add('cell-watermark-container');
|
||||
watermark._container.style.cssText = 'display: block; pointer-events: none;';
|
||||
watermark._container.setAttribute('aria-hidden', true);
|
||||
_parentEle = document.querySelector(watermark.options.appendTo) || document.body;
|
||||
//获取页面最大宽度
|
||||
_windowsWidth = Math.min(_parentEle.scrollWidth, _parentEle.clientWidth);
|
||||
//获取页面最大高度
|
||||
_windowsHeight = Math.min(_parentEle.scrollHeight, _parentEle.clientHeight);
|
||||
_parentEle.appendChild(watermark._container);
|
||||
};
|
||||
|
||||
/**
|
||||
* Create watermark's DOM
|
||||
* @param {Watermark} watermark
|
||||
* @param {Object} options
|
||||
*/
|
||||
var _createWatermark = function (watermark, options) {
|
||||
options.rowSpacing = options.rowSpacing || 60;
|
||||
options.colSpacing = options.colSpacing || 30;
|
||||
options.width = options.width || 150;
|
||||
options.height = options.height || 20;
|
||||
|
||||
let rows = parseInt(_windowsHeight / (options.height + options.rowSpacing));
|
||||
let cols = parseInt(_windowsWidth / (options.width + options.colSpacing));
|
||||
let offsetLeft =_left+ (_windowsWidth - options.width * cols - options.colSpacing * (cols - 1)) / 2;
|
||||
let offsetTop = _top+(_windowsHeight - options.height * rows - options.rowSpacing * (rows - 1)) / 2;
|
||||
let watermarkBase = document.createElement('div');
|
||||
watermarkBase.classList.add('cell-watermark');
|
||||
watermarkBase.style.cssText =
|
||||
'transform: rotate(15deg); opacity: 0.1; font-size: 0.85rem; text-align: center;' +
|
||||
'position: absolute; user-select: none; word-break: break-all; overflow: hidden; z-index: 999999;';
|
||||
for (let row = 0; row < rows; row++) {
|
||||
let top = offsetTop + (options.rowSpacing + options.height) * row;
|
||||
let tempCols = cols;
|
||||
row % 2 !== 0 && tempCols++;
|
||||
for (let col = 0; col < tempCols; col++) {
|
||||
let left = offsetLeft + (options.colSpacing + options.width) * col;
|
||||
tempCols !== cols && (left -= (options.colSpacing + options.width) / 2);
|
||||
let watermarkEle = watermarkBase.cloneNode();
|
||||
watermarkEle.style.cssText += `left: ${left}px; top: ${top}px; width: ${options.width}px; height: ${options.height}px`;
|
||||
watermarkEle.style.transform = `rotate(${options.rotate}deg)`;
|
||||
watermarkEle.style.opacity = options.opacity;
|
||||
watermarkEle.style.fontSize = `${options.fontSize}rem`;
|
||||
watermarkEle.style.fontFamily = options.fontFamily;
|
||||
watermarkEle.innerHTML = options.content;
|
||||
watermark._container.appendChild(watermarkEle);
|
||||
}
|
||||
}
|
||||
//Backup for recover the watermark's container when the its DOM is removed
|
||||
_wmContainer = watermark._container;
|
||||
};
|
||||
|
||||
/**
|
||||
* Rerender watermark
|
||||
* @param {Watermark} watermark
|
||||
* @param {Object} options
|
||||
*/
|
||||
var _render = function (watermark, options) {
|
||||
_wmObserver.disconnect();
|
||||
watermark._container.innerHTML = '';
|
||||
_createWatermark(watermark, options);
|
||||
_wmObserver.observe(watermark._container, {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
characterData: true,
|
||||
subtree: true
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Observe watermark and watermark's parentNode mutations
|
||||
* @param {Watermark} watermark
|
||||
*/
|
||||
var _addObserve = function (watermark) {
|
||||
//Observe watermark element and its child element
|
||||
_wmObserver = new MutationObserver(function (mutations, observer) {
|
||||
_render(watermark, watermark.options);
|
||||
});
|
||||
_wmObserver.observe(watermark._container, {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
characterData: true,
|
||||
subtree: true
|
||||
});
|
||||
//Observe parent element, recreate if the element is deleted
|
||||
_wmParentObserver = new MutationObserver(function (mutations) {
|
||||
for (let m of mutations) {
|
||||
if (
|
||||
m.type === 'childList' &&
|
||||
m.removedNodes.length > 0 &&
|
||||
document.querySelectorAll('.cell-watermark-container').length === 0
|
||||
) {
|
||||
_parentEle.appendChild(_wmContainer);
|
||||
}
|
||||
}
|
||||
});
|
||||
_wmParentObserver.observe(watermark._container.parentNode, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Window's resize listener
|
||||
* @param {Watermark} watermark
|
||||
*/
|
||||
var _addResizeListener = function (watermark) {
|
||||
_resizeHandler = function () {
|
||||
|
||||
//获取页面最大宽度
|
||||
var _windowsWidth_n = Math.max(_parentEle.scrollWidth, _parentEle.clientWidth);
|
||||
//获取页面最大高度
|
||||
var _windowsHeight_n = Math.max(_parentEle.scrollHeight, _parentEle.clientHeight);
|
||||
|
||||
|
||||
/*if (window.outerHeight !== _windowsHeight || window.outerWidth !== _windowsWidth) {
|
||||
_windowsHeight = window.outerHeight;
|
||||
_windowsWidth = window.outerWidth;
|
||||
_render(watermark, watermark.options);
|
||||
}*/
|
||||
if (_windowsHeight_n !== _windowsHeight || _windowsWidth_n !== _windowsWidth) {
|
||||
_windowsHeight = _windowsHeight_n;
|
||||
_windowsWidth = _windowsWidth_n;
|
||||
_render(watermark, watermark.options);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
window.addEventListener('resize', _resizeHandler);
|
||||
};
|
||||
|
||||
/**
|
||||
* Watermark.
|
||||
* Create watermark for webpage and automatic adjust when windows resize.
|
||||
* @param {Object} options
|
||||
* @param {String} [options.content] watermark's text
|
||||
* @param {String} [options.appendTo='body'] parent of watermark's container
|
||||
* @param {Number} [options.width=150] watermark's width. unit: px
|
||||
* @param {Number} [options.height=20] watermark's height. unit: px
|
||||
* @param {Number} [options.rowSpacing=60] row spacing of watermarks. unit: px
|
||||
* @param {Number} [options.colSpacing=30] col spacing of watermarks. unit: px
|
||||
* @param {Number} [options.rotate=15] watermark's tangent angle. unit: deg
|
||||
* @param {Number} [options.opacity=0.1] watermark's transparency
|
||||
* @param {Number} [options.fontSize=0.85] watermark's fontSize. unit: rem
|
||||
* @param {Number} [options.fontFamily='inherit'] watermark's fontFamily.
|
||||
* @namespace Watermark
|
||||
* @class Watermark
|
||||
* @version 1.0.3
|
||||
* @author @Lruihao https://lruihao.cn
|
||||
*/
|
||||
function Watermark(options = {}) {
|
||||
var _proto = Watermark.prototype;
|
||||
this.options = options;
|
||||
_createContainer(this);
|
||||
_createWatermark(this, this.options);
|
||||
_addObserve(this);
|
||||
_addResizeListener(this);
|
||||
|
||||
/**
|
||||
* Upload watermark's text content
|
||||
* @param {String} content watermark's text
|
||||
*/
|
||||
_proto.upload = function (content) {
|
||||
if (!content) {
|
||||
return;
|
||||
}
|
||||
_wmParentObserver.disconnect();
|
||||
_wmObserver.disconnect();
|
||||
this.options.content = content;
|
||||
for (const watermark of this._container.querySelectorAll('.cell-watermark')) {
|
||||
watermark.innerHTML = content;
|
||||
}
|
||||
_wmParentObserver.observe(this._container.parentNode, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
_wmObserver.observe(this._container, {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
characterData: true,
|
||||
subtree: true
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Rerender watermark
|
||||
* @param {Object} options
|
||||
*/
|
||||
_proto.render = function (options = {}) {
|
||||
_render(this, Object.assign(this.options, options));
|
||||
};
|
||||
|
||||
/**
|
||||
* Force destroy watermark
|
||||
*/
|
||||
_proto.destroy = function () {
|
||||
_wmObserver.disconnect();
|
||||
_wmParentObserver.disconnect();
|
||||
window.removeEventListener('resize', _resizeHandler);
|
||||
this._container.parentNode.removeChild(this._container);
|
||||
};
|
||||
}
|
||||
exports("watermark",Watermark);
|
||||
})
|
||||
Reference in New Issue
Block a user