[Web Component] Watermark
Web Component
2023-09-14 08:59:11 时间
/* eslint-disable no-param-reassign */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { throttle } from 'lodash'
const getCoverInfo = () => {
const minWidth = 350
const maxWidth = 500
const width = '30vw'
const minHeight = 300
const height = '25vh'
const maxHeight = 450
const numCols = Math.ceil(window.innerWidth / minWidth)
const numRows = Math.ceil(window.innerHeight / minHeight)
return {
maxHeight,
maxWidth,
minWidth,
width,
height,
minHeight,
numCols,
numRows,
total: numCols * numRows,
} as const
}
const createTemplate = (
userName: string | null = 'xxx@zscaler.com',
message: string | null = 'watermark',
time = new Intl.DateTimeFormat('en-US').format(new Date()),
) => {
// Calculate the number of columns and rows needed to cover the screen
const { total, numCols, numRows, width, height, minHeight, minWidth, maxHeight, maxWidth } = getCoverInfo()
const template = document.createElement('template')
template.innerHTML = `
<style>
.org__overlay--watermark {
pointer-events: none;
-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5);
-webkit-text-fill-color: rgba(0, 0, 0, 0.5);
font-size: 1.5rem;
width: ${width};
min-width: ${minWidth}px;
height: ${height};
min-height: ${minHeight}px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-45deg);
}
.org__overlay--container {
position: fixed;
top: 0px;
left: 0px;
opacity: 0.5;
width: 120vw;
height: 125vh;
z-index: 2147483647;
pointer-events: none;
display: grid;
grid-template-columns: repeat(${numCols}, minmax(${minWidth}px, ${width}));
grid-template-rows: repeat(${numRows}, minmax(${minHeight}px, ${height}))
overflow: hidden;
}
.zscaler__overlay--container > div {
max-width: ${maxWidth}px;
max-height: ${maxHeight}px;
}
</style>
<div class="zscaler__overlay--container">
${Array.from({ length: total })
.map(
() => `<div class="zscaler__overlay--watermark">
<div>
<div data-name>${userName || ''}</div>
<div>${time}</div>
<div data-message>${message || ''}</div>
</div>
</div>`,
)
.join('')}
</div>
`
return template
}
// Add the style element to the template element's content
export default class CbiWatermark extends HTMLElement {
#maxTotal = 0
constructor() {
super()
this.attachShadow({ mode: 'open' })
}
handleResize = throttle(() => {
const { total } = getCoverInfo()
if (total > this.#maxTotal) {
this.render()
}
this.#maxTotal = Math.max(total, this.#maxTotal)
}, 200)
connectedCallback() {
this.render()
this.#maxTotal = getCoverInfo().total
window.addEventListener('resize', this.handleResize)
}
disconnectedCallback() {
window.removeEventListener('resize', this.handleResize)
}
changeOverlayStyles(styles: Record<PropertyKey, string>) {
const elm = this.shadowRoot!.querySelector<HTMLDivElement>('.zscaler__overlay--container')
if (!elm) {
return
}
Object.keys(styles).forEach((styleKey) => {
;(elm.style as any)[styleKey] = styles[styleKey]
})
}
changeWatermarkStyles(styles: Record<PropertyKey, string>) {
const elms = this.shadowRoot!.querySelectorAll<HTMLDivElement>('.zscaler__overlay--watermark')
if (!elms) {
return
}
Object.keys(styles).forEach((styleKey) => {
elms.forEach((elm) => {
;(elm.style as any)[styleKey] = styles[styleKey]
})
})
}
static get observedAttributes() {
return ['data-name', 'data-message']
}
attributeChangedCallback(attribute: 'data-name' | 'data-message', oldValue: string | null, newValue: string | null) {
if (this.hasAttribute(attribute) && oldValue !== null && newValue !== oldValue) {
this.render()
}
}
render() {
this.shadowRoot!.replaceChildren(
createTemplate(this.getAttribute('data-name'), this.getAttribute('data-message')).content.cloneNode(true),
)
}
}
customElements.define('cbi-watermark', CbiWatermark)
export const cbiWatermark = document.createElement("cbi-watermark");
cbiWatermark.setAttribute("data-message", "Loemlw aweio aoawef co");
cbiWatermark.setAttribute("data-name", "zddhentian@abc.com");
document.body.prepend(cbiWatermark);
相关文章
- 使用云服务器与calibre-web构建自己的在线书架(2022年版)
- web移动端开发(7)上传码云+响应式布局_bootstrap框架
- 图扑 Web SCADA 零代码组态水泥生产工艺流程 HMI
- 【说站】python web框架能够实现的功能
- 【云安全最佳实践】WEB安全常见攻击与防范
- spring boot整合jsp的时候访问页面错误日志:Path with "WEB-INF" or "META-INF":
- OpenVPN AS:基于web管理OpenVPN服务
- Linux系统下使用WSDL开发Web服务(linuxwsdl)
- 平台MySQL程序开发构建现代Web应用程序平台(mysql程序)
- 给你一个美观、安全的Web连接MySQL指南(web连接mysql)
- 器步步俱升:手把手教你配置Linux Web服务器(linux配置web服务)
- 器Linux实现快速开启Web服务器(linux开启web服务)
- 快速部署Linux环境下Web项目(linux部署web项目)
- 小米被指记录用户的 Web 和手机使用数据 / Redis 6.0.0 GA 稳定版本发布
- 产品经理眼中比较理想的WEB扫描器
- 使用Linux优化Web开发体验(web开发linux)
- 管理MSSQL的好帮手:在线Web管理器来帮忙!(在线web管理mssql)
- asp.net的web服务MSSQL检测ASP.NET的Web服务——利用它构建更棒的站点(mssql检测基于)
- Redis在Web开发中的光辉成就(web框架redis)
- 的优势利用Redis构建Web应用,提升性能与效率(web应用中redis)
- Web与Redis哪一种优胜(web和redis哪种好)
- 抉择Web还是Redis(web和redis哪个好)
- 前端Web与Redis的连接创建更强大的服务(前端web连接redis)
- 让WEB连接REDIS打通数据桥梁(使用web连接redis)