slide-element/index.html at master · alexmacarthur/slide-element · 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
<!DOCTYPE html>
<html>
  <head>
    <style>
      .thing {
        display: none;
        background: blue;
        color: white;
        border-radius: 3px;
      }

      .inner-wrapper {
        padding: 20px;
        box-sizing: border-box;
      }

      .container {
        padding: 20px;
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="box">
        <button id="slideThing1">Slide Thing #1</button>

        <div class="thing inner-wrapper" id="thing1">
          <div>
            <h1>My First Heading</h1>
            <p>My first paragraph.</p>
            <label>Text Block:</label>
            <textarea></textarea>

            <pre style="background: black;">
              1
              2
              3
              4
              5
              6
              7
              8
              9
              10
              11
              12
            </pre>
          </div>
        </div>
      </div>

      <div class="box">
        <button id="slideThing2">Slide Thing #2</button>

        <div class="thing" id="thing2">
          <div class="inner-wrapper">
            <h1>My First Heading</h1>
            <p>My first paragraph.</p>
            <label>Text Block:</label>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <!--
    <script src="./dist/index.umd.js"></script>
    <script>
        document.getElementById('slideThing1').addEventListener('click', (e) => {
            SlideElement.toggle(document.getElementById('thing1'));
        });

        document.getElementById('slideThing2').addEventListener('click', (e) => {
            SlideElement.toggle(document.getElementById('thing2'));
        });
    </script>
    -->

    <script type="module">
      import { toggle } from "./src/index.ts";

      document.getElementById('slideThing1').addEventListener('click', (e) => {
        toggle(document.getElementById('thing1'), {
          display: 'flex',
          duration: 200,
        }).then(opened => {
          console.log("Is open:", opened);
          e.target.setAttribute("aria-expanded", opened);
        });
      });

      document.getElementById('slideThing2').addEventListener('click', (e) => {
        toggle(document.getElementById('thing2')).then((opened) => {
          console.log("Is open:", opened);
          e.target.setAttribute("aria-expanded", opened);
        });
      });
    </script>
  </body>
</html>