-
Notifications
You must be signed in to change notification settings - Fork 1
/
wc-marquee.js
96 lines (85 loc) · 2.37 KB
/
wc-marquee.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
/* eslint no-undef: 0 */
export class WCMarquee extends HTMLElement {
static get observedAttributes () {
return ['party']
}
attributeChangedCallback (name, oldValue, newValue) {
if (!this.__initialized) { return }
if (oldValue !== newValue) {
this[name] = newValue
}
}
get party () { return this.hasAttribute('party') }
set party (value) {
const party = this.hasAttribute('party')
if (party) {
this.setAttribute('party', '')
} else {
this.removeAttribute('party')
}
this.setParty()
}
constructor () {
super()
const template = document.createElement('template')
template.innerHTML = WCMarquee.template()
this.attachShadow({ mode: 'open' })
this.shadowRoot.appendChild(template.content.cloneNode(true))
this.__element = this.shadowRoot.querySelector('.marquee')
this.__initialized = false
this.__partifier = null
}
async connectedCallback () {
this.style.width = (this.style.width) ? this.style.width : '100%'
this.style.fontFamily = (this.style.fontFamily) ? this.style.fontFamily : 'Comic Sans MS'
if (this.hasAttribute('party')) {
this.setParty()
}
this.__initialized = true
}
disconnectedCallback () {
this.__partifier = null
}
setParty () {
const party = this.hasAttribute('party')
if (party) {
this.__partifier = setInterval(() => {
const r = Math.floor(Math.random() * 255)
const g = Math.floor(Math.random() * 255)
const b = Math.floor(Math.random() * 255)
this.__element.style.color = `rgb(${r}, ${g}, ${b})`
}, 400)
} else {
if (this.__partifier) {
this.__element.style.color = 'black'
clearInterval(this.__partifier)
}
}
}
static template () {
return `
<style>
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
</style>
<p class="marquee" style="width: inherit;"><span><slot></slot></span></p>`
}
}
customElements.define('wc-marquee', WCMarquee)