snuggsi/examples/x-flashy.html at text-editor · devpunks/snuggsi · GitHub

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
111
112
<meta charset=UTF-8>
<meta name=viewport content=width=device-width,initial-scale=1>

<title>&lt;x-flashy&gt;</title>

<link rel=stylesheet href=https://devpunks.herokuapp.com/typography.css>

<style>

  body {
    display: flex;
    flex-flow: column;
    background: #444;
  }

  x-flashy {
    display: block;
    position: absolute;
    padding: 1em;
    cursor: pointer;

    transition-duration: 0.5s;
    transition-property: top, left, color, background;
    transition-timing-function: ease-in-out;

    border-radius: 5px;
    font-family: cursive;
    font-size: 2rem;
    line-height: 2rem;
    box-shadow: 0.2em 0.2em 0.3em, -0.2em -0.2em 0.3em, 0.2em -0.2em 0.3em, -0.2em 0.2em 0.3em;
  }
</style>

<script src=/></script>
<script name=polyfill src=https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js></script>

<link rel=icon type=image/png href=/favicon-32x32.png sizes=32x32>

<header-group>
  <h2 slot=header>&lt;x-flashy&gt;</h2>
  <a  slot=subheader Title='See more componentexamples' href=/examples>See more component examples</a>
</header-group>
<!-- import works inline body -->
<link rel=import href=/examples/header-group>


<x-flashy>
  {greeting}
</x-flashy>

<script>

Element `x-flashy`

(class extends HTMLElement {

  get speed () { return 3000 }

  onclick (event)
    { console.log ('mole whacked') }

  initialize () {

    this.context.greeting = 'initial'

    this.context.greetings = [
      'Hello',
      'Bonjour',
      'Howdy',
      'Snuggsi ツ',
      'very component',
      'such lightweight'
    ]

    this.randomize()
    const intervalId = setInterval
      (this.randomize.bind (this), this.speed)
  }

  get greeting () { return this.context.greeting }

  randomize () {
    this.style.color = this.randomLightColor
    this.style.background = this.randomDarkColor
    this.style.top = Math.floor(Math.random() * 300)
    this.style.left = Math.floor(Math.random() * 300)

    this.context.greeting = this.randomArrayElement(this.context.greetings)
    this.render ()
  }

  get randomDarkColor () {
    return this.randomColor('0123456')
  }

  get randomLightColor () {
    return this.randomColor('9abcdef')
  }

  randomColor (hexRange) {
    return '#' + hexRange.split('').
                  map( (v,i,a) => {
                    return i>5 ? null : this.randomArrayElement(hexRange.split(''))
                  }).join('')
  }

  randomArrayElement (arr) {
    return arr[Math.floor(Math.random() * arr.length)]
  }
})

</script>