@todojs/

08-example

HTML, CSS, JS

No description

fork
loading
Files
  • index.html

This Plugin Crashed!

Error: Error: must not create an existing file {"type":"CREATE_FILE","wid":"0.9940792381312626","path":"index.html","file":{"path":"index.html","content":{"asEncoding":{"base64":"PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDx0aXRsZT5MaWdodCBET008L3RpdGxlPgogIDxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9Ad2ViY29tcG9uZW50cy93ZWJjb21wb25lbnRzanMvd2ViY29tcG9uZW50cy1sb2FkZXIuanMiPjwvc2NyaXB0Pgo8L2hlYWQ+Cjxib2R5Pgo8c3VwZXItY2Fyb3VzZWwgbGFwc2U9IjIiPgogIDxzb3VyY2Ugc3JjPSJodHRwczovL3ZpYS5wbGFjZWhvbGRlci5jb20vMTUwLnBuZyI+CiAgPHNvdXJjZSBzcmM9Imh0dHBzOi8vdmlhLnBsYWNlaG9sZGVyLmNvbS8xNTAucG5nL2Y5MC8wMDAiPgogIDxzb3VyY2Ugc3JjPSJodHRwczovL3ZpYS5wbGFjZWhvbGRlci5jb20vMTUwLnBuZy8wOTAvZmZmIj4KPC9zdXBlci1jYXJvdXNlbD4KPHA+CiAgPGJ1dHRvbiBpZD0iYWRkIj5hZGQ8L2J1dHRvbj4KICA8YnV0dG9uIGlkPSJyZW1vdmUiPnJlbW92ZTwvYnV0dG9uPgo8L3A+CjxzY3JpcHQ+CiAgZG9jdW1lbnQucXVlcnlTZWxlY3RvciAoJyNhZGQnKS5hZGRFdmVudExpc3RlbmVyICgnY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgICBjb25zdCBzb3VyY2UgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50ICgnc291cmNlJyk7CiAgICBzb3VyY2Uuc3JjICAgPSAnaHR0cHM6Ly92aWEucGxhY2Vob2xkZXIuY29tLzE1MC5wbmcvJwogICAgICAgICAgICAgICAgICAgKyAoMCB8IE1hdGgucmFuZG9tICgpICogMjU1KS50b1N0cmluZyAoMTYpCiAgICAgICAgICAgICAgICAgICArICgwIHwgTWF0aC5yYW5kb20gKCkgKiAyNTUpLnRvU3RyaW5nICgxNikKICAgICAgICAgICAgICAgICAgICsgKDAgfCBNYXRoLnJhbmRvbSAoKSAqIDI1NSkudG9TdHJpbmcgKDE2KQogICAgICAgICAgICAgICAgICAgKyAnLzAwMCc7CiAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yICgnc3VwZXItY2Fyb3VzZWwnKS5hcHBlbmRDaGlsZCAoc291cmNlKTsKICB9KTsKICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yICgnI3JlbW92ZScpLmFkZEV2ZW50TGlzdGVuZXIgKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAgIGNvbnN0IHNvdXJjZSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IgKCdzdXBlci1jYXJvdXNlbCA+IHNvdXJjZTpsYXN0LW9mLXR5cGUnKTsKICAgIGlmICghc291cmNlKSB7CiAgICAgIHJldHVybjsKICAgIH0KICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IgKCdzdXBlci1jYXJvdXNlbCcpLnJlbW92ZUNoaWxkIChzb3VyY2UpOwogIH0pOwoKICBjbGFzcyBTdXBlckNhcm91c2VsIGV4dGVuZHMgSFRNTEVsZW1lbnQgewogICAgY29uc3RydWN0b3IgKCkgewogICAgICBzdXBlciAoKTsKICAgICAgdGhpcy5hdHRhY2hTaGFkb3cgKHttb2RlIDogJ29wZW4nfSk7CiAgICAgIHRoaXMuc2hhZG93Um9vdC5pbm5lckhUTUwgPSAnPGltZyBpZD0iY29udGVudCI+JzsKICAgIH0KCiAgICBjb25uZWN0ZWRDYWxsYmFjayAoKSB7CiAgICAgIG5ldyBNdXRhdGlvbk9ic2VydmVyICh0aGlzLnNob3cuYmluZCAodGhpcykpCiAgICAgICAgLm9ic2VydmUgKHRoaXMsIHtjaGlsZExpc3QgOiB0cnVlfSk7CiAgICAgIHRoaXMuc2hvdyAoKTsKICAgIH0KCiAgICBzaG93IChtdXRhdGlvbikgewogICAgICBjbGVhclRpbWVvdXQgKHRoaXMuX3RpbWVyKTsKICAgICAgbGV0IGFjdGl2ZSA9IHRoaXMucXVlcnlTZWxlY3RvciAoJ3NvdXJjZVthY3RpdmVdJykgfHwKICAgICAgICAgICAgICAgICAgIHRoaXMucXVlcnlTZWxlY3RvciAoJ3NvdXJjZScpOwogICAgICBpZiAoIWFjdGl2ZSkgewogICAgICAgIHRoaXMuc2hhZG93Um9vdC5xdWVyeVNlbGVjdG9yICgnaW1nJykuc3JjID0gJyc7CiAgICAgICAgcmV0dXJuOwogICAgICB9CiAgICAgIGxldCBuZXh0ID0gdGhpcy5xdWVyeVNlbGVjdG9yICgnc291cmNlW2FjdGl2ZV0gKyBzb3VyY2UnKSB8fAogICAgICAgICAgICAgICAgIHRoaXMucXVlcnlTZWxlY3RvciAoJ3NvdXJjZScpOwogICAgICBhY3RpdmUucmVtb3ZlQXR0cmlidXRlICgnYWN0aXZlJyk7CiAgICAgIG5leHQuc2V0QXR0cmlidXRlICgnYWN0aXZlJywgJycpOwogICAgICB0aGlzLnNoYWRvd1Jvb3QucXVlcnlTZWxlY3RvciAoJ2ltZycpLnNyYyA9IG5leHQuc3JjOwogICAgICBjb25zdCBsYXBzZSA9IChwYXJzZUludCAodGhpcy5nZXRBdHRyaWJ1dGUgKCdsYXBzZScpKSAqIDEwMDApIHx8IDEwMDA7CiAgICAgIHRoaXMuX3RpbWVyID0gc2V0VGltZW91dCAodGhpcy5zaG93LmJpbmQgKHRoaXMpLCBsYXBzZSk7CiAgICB9CiAgfQogIGN1c3RvbUVsZW1lbnRzLmRlZmluZSAoJ3N1cGVyLWNhcm91c2VsJywgU3VwZXJDYXJvdXNlbCk7Cjwvc2NyaXB0Pgo8L2JvZHk+CjwvaHRtbD4="},"asBuffer":null},"loaded":true}}
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Light DOM</title>
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
<super-carousel lapse="2">
  <source src="https://via.placeholder.com/150.png">
  <source src="https://via.placeholder.com/150.png/f90/000">
  <source src="https://via.placeholder.com/150.png/090/fff">
</super-carousel>
<p>
  <button id="add">add</button>
  <button id="remove">remove</button>
</p>
<script>
  document.querySelector ('#add').addEventListener ('click', function () {
    const source = document.createElement ('source');
    source.src   = 'https://via.placeholder.com/150.png/'
                   + (0 | Math.random () * 255).toString (16)
                   + (0 | Math.random () * 255).toString (16)
                   + (0 | Math.random () * 255).toString (16)
                   + '/000';
    document.querySelector ('super-carousel').appendChild (source);
  });
  document.querySelector ('#remove').addEventListener ('click', function () {
    const source = document.querySelector ('super-carousel > source:last-of-type');
    if (!source) {
      return;
    }
    document.querySelector ('super-carousel').removeChild (source);
  });

  class SuperCarousel extends HTMLElement {
    constructor () {
      super ();
      this.attachShadow ({mode : 'open'});
      this.shadowRoot.innerHTML = '<img id="content">';
    }

    connectedCallback () {
      new MutationObserver (this.show.bind (this))
        .observe (this, {childList : true});
      this.show ();
    }

    show (mutation) {
      clearTimeout (this._timer);
      let active = this.querySelector ('source[active]') ||
                   this.querySelector ('source');
      if (!active) {
        this.shadowRoot.querySelector ('img').src = '';
        return;
      }
      let next = this.querySelector ('source[active] + source') ||
                 this.querySelector ('source');
      active.removeAttribute ('active');
      next.setAttribute ('active', '');
      this.shadowRoot.querySelector ('img').src = next.src;
      const lapse = (parseInt (this.getAttribute ('lapse')) * 1000) || 1000;
      this._timer = setTimeout (this.show.bind (this), lapse);
    }
  }
  customElements.define ('super-carousel', SuperCarousel);
</script>
</body>
</html>
result
console