generated from daviddarnes/component-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
paper-stamp.js
110 lines (99 loc) · 3.03 KB
/
paper-stamp.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
class PaperStamp extends HTMLElement {
static register(tagName) {
if ("customElements" in window) {
customElements.define(tagName || "paper-stamp", PaperStamp)
}
}
static css = `
:host {
background-image:
radial-gradient(
calc(var(--stamp-perforation, 8px) / 2),
transparent 95%,
var(--stamp-color, antiquewhite)
),
linear-gradient(var(--stamp-color, antiquewhite) 0 0);
background-size:
calc(var(--stamp-perforation, 8px) * var(--stamp-spacing, 3.5) / 2) calc(var(--stamp-perforation, 8px) * var(--stamp-spacing, 3.5) / 2),
calc(100% - var(--stamp-perforation, 8px) * var(--stamp-spacing, 3.5) / 2) calc(100% - var(--stamp-perforation, 8px) * var(--stamp-spacing, 3.5) / 2);
background-position:
calc(var(--stamp-perforation, 8px) * var(--stamp-spacing, 3.5) / -4) calc(var(--stamp-perforation, 8px) * var(--stamp-spacing, 3.5) / -4),
50%;
background-repeat:
round,
no-repeat;
max-inline-size: 100%;
display: inline-block;
image-rendering: pixelated;
}
:host img {
display: block;
padding: var(--stamp-padding, 15px);
}
`
static observedAttributes = ["color", "padding", "perforation", "spacing"]
connectedCallback() {
this.initTemplate()
}
getBaseCSS() {
let sheet = new CSSStyleSheet()
sheet.replaceSync(PaperStamp.css)
return sheet
}
setCSS() {
let stylesheets = [this.getBaseCSS()]
if (this.hasAttribute("color") && this.getAttribute("color") !== "") {
let sheet = new CSSStyleSheet()
sheet.replaceSync(`
:host {
--stamp-color: ${this.getAttribute("color")};
}
`)
stylesheets.push(sheet)
}
if (this.hasAttribute("padding") && this.getAttribute("padding") !== "") {
let sheet = new CSSStyleSheet()
sheet.replaceSync(`
:host {
--stamp-padding: ${this.getAttribute("padding")};
}
`)
stylesheets.push(sheet)
}
if (this.hasAttribute("perforation") && this.getAttribute("perforation") !== "") {
let sheet = new CSSStyleSheet()
sheet.replaceSync(`
:host {
--stamp-perforation: ${this.getAttribute("perforation")};
}
`)
stylesheets.push(sheet)
}
if (this.hasAttribute("spacing") && this.getAttribute("spacing") !== "") {
let sheet = new CSSStyleSheet()
sheet.replaceSync(`
:host {
--stamp-spacing: ${this.getAttribute("spacing")};
}
`)
stylesheets.push(sheet)
}
this.shadowRoot.adoptedStyleSheets = stylesheets
}
initTemplate() {
if (this.shadowRoot) {
this.setCSS()
return
}
this.attachShadow({ mode: "open" })
this.setCSS()
let template = document.createElement("template")
template.innerHTML = this.innerHTML
this.innerHTML = ""
this.shadowRoot.appendChild(template.content.cloneNode(true))
}
attributeChangedCallback() {
this.initTemplate()
}
}
PaperStamp.register()