ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
61 lines (60 loc) • 2.94 kB
JavaScript
import { n as r, t as h } from "./utils-D1iZnChu.js";
import { _ as o, i as e } from "./factory-ZNhcQ4tf.js";
import { a as n, n as d } from "./ssr-DSGwPtEd.js";
var l = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{position:relative;display:block}.ran-scratch-ticket{position:relative;display:block;width:100%;height:100%}.ran-scratch-ticket-award{position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:#000;z-index:1}.ran-scratch-ticket-canvas{position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:2}", u = class extends d {
scratchTicketContainer;
scratchTicket;
state;
scratchAward;
_shadowDom;
static get observedAttributes() {
return [
"disabled",
"icon",
"effect",
"iconSize",
"sheet"
];
}
constructor() {
super(), this._shadowDom = r(this, l);
const t = h(this._shadowDom, ".ran-scratch-ticket", () => {
const s = o("canvas").class("ran-scratch-ticket-canvas").style("width", "100%").style("height", "100%").build(), i = e().class("ran-scratch-ticket-award").build();
return e().class("ran-scratch-ticket").children(s, i).build();
}), c = t.querySelector(".ran-scratch-ticket-award"), a = t.querySelector(".ran-scratch-ticket-canvas");
this.scratchTicketContainer = t, this.scratchAward = c, this.scratchTicket = a, this.state = {
touchStart: !1,
scratchArea: 0
};
}
touchStartScratch = (t) => {
this.state.touchStart = !0;
};
touchMoveScratch = () => {
if (this.state.touchStart) {
const t = this.scratchTicket.getContext("2d");
if (!t) return;
this.state.scratchArea += 30, t.beginPath(), t.arc(100, 100, 30, 0, 2 * Math.PI), t.globalCompositeOperation = "destination-out", t.fill(), t.closePath();
}
};
touchEndScratch = () => {
this.state.touchStart = !1;
const { width: t, height: c } = this.scratchTicket, a = this.scratchTicket.getContext("2d");
a && this.state.scratchArea > t * c * 0.03 && (this.state.scratchArea = 0, a.clearRect(0, 0, t, c));
};
drawScratchTicket = () => {
const t = this.scratchTicket.getContext("2d");
if (!this.scratchTicketContainer || !t) return;
const c = new Image();
c.src = "", c.onload = () => {
t.drawImage(c, 0, 0, this.scratchTicket.width, this.scratchTicket.height);
}, this.scratchTicket.addEventListener("touchstart", this.touchStartScratch), this.scratchTicket.addEventListener("touchmove", this.touchMoveScratch), this.scratchTicket.addEventListener("touchend", this.touchEndScratch);
};
attributeChangedCallback() {
this._shadowDom.contains(this.scratchTicketContainer) || this._shadowDom.appendChild(this.scratchTicketContainer), this.drawScratchTicket();
}
};
n("r-scratch", u);
export {
u as t
};