cube-gallery-custom-elements/index.html at master · Danjohnsonnj/cube-gallery-custom-elements · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Cube Gallery with Custom Elements</title>
  <style>
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <style>
    .demo {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      font-size: 20px;
      line-height: 1.2em;
    }

    .demo > div:first-child {
      padding: 2vh 2vw;
      width: 34em;
    }

    .demo pre {
      display: inline;
      font-family: 'Courier New', Courier, monospace;
      text-transform: uppercase;
    }

    .demo a {
      display: inline-block;
      color: #000;
      text-decoration: underline wavy rgb(255, 175, 0);
      transition: all 0.1s ease-in-out;
      background: rgba(255, 175, 0, 0);
      padding: 0.2em;
      margin: -0.2em;
    }

    .demo a:hover {
      background: rgb(255, 175, 0);
    }

    .flip-gallery-tag {
      padding: 2vh 2vw;
      background-color: gray;
      color: ghostwhite;
    }

    .flip-gallery-tag,
    .flip-gallery-tag input,
    .flip-gallery-tag select {
      font-size: 16px;
      line-height: 2em;
      font-family: 'Courier New', Courier, monospace;
    }

    .flip-gallery-tag em {
      font-weight: 900;
    }

    .flip-gallery-tag input,
    .flip-gallery-tag select {
      width: 5em;
      height: 2em;
      background-color: rgb(255, 220, 145);
      border: 0.2em solid rgb(255, 175, 0);
      border-radius: 5px;
      text-align: center;
    }

    .flip-gallery-tag input#columns {
      width: 2em;
    }

    .flip-gallery-tag select {
      width: 7em;
    }
  </style>
  <div class="demo">
    <div>
      Below is a representation of a <pre>flip-gallery</pre> <a href="https://developers.google.com/web/fundamentals/web-components/customelements" target="_blank">custom element</a>.
      Change the "attributes" in this representation to see how the custom element behaves.
    </div>
    <div class="flip-gallery-tag">
      &lt;flip-gallery
        <em>columns</em>="<input type="text" id="columns" />"
        <em>item-height</em>="<input type="text" id="item-height" />"
        <em>gallery-color</em>="<input type="text" id="gallery-color" />"
        <em>caption-bg-color</em>="<input type="text" id="caption-bg-color" />"
        <em>caption-text-color</em>="<input type="text" id="caption-text-color" />"
        <em>transition-style</em>="<select id="transition-style">
          <option value="default">default</option>
          <option value="push">push</option>
        </select>" &gt;
      <div style="margin-left: 2em;">[...images]</div>
      &lt;/flip-gallery&gt;
    </div>
  </div>


  <flip-gallery columns="3" item-height="40vmin" gallery-color="#121212" caption-bg-color="#4d4d4d" caption-text-color="#b8b8b8"
    transition-style="push">
    <img src="https://images.unsplash.com/photo-1518639401307-b20d68513079?fit=crop&w=1600&q=80" data-credit-name="Jandré van der Walt"
      data-credit-link="https://unsplash.com/@jandrevdw" />
    <img src="https://images.unsplash.com/photo-1431440869543-efaf3388c585?fit=crop&w=1600&q=80" data-credit-name="Breno Machado"
      data-credit-link="https://unsplash.com/@brenomachado" />
    <img src="https://images.unsplash.com/photo-1500674425229-f692875b0ab7?fit=crop&w=1600&q=80" data-credit-name="Johannes Plenio"
      data-credit-link="https://unsplash.com/@jplenio" />
    <img src="https://images.unsplash.com/photo-1504466664756-1adbe6d13b36?fit=crop&w=1600&q=80" data-credit-name="Ian Froome"
      data-credit-link="https://unsplash.com/@ian_froome_photography" />
    <img src="https://images.unsplash.com/photo-1442213391790-7656f6e368b9?fit=crop&w=1600&q=80" data-credit-name="Lucy Chian"
      data-credit-link="https://unsplash.com/@shlucy" />
    <img src="https://images.unsplash.com/photo-1472750033574-16946775d458?fit=crop&w=1600&q=80" data-credit-name="Emil Jarfelt"
      data-credit-link="https://unsplash.com/@emiljarfelt" />
  </flip-gallery>

  <script src="cube.js"></script>
  <script>
    const flipGalleryElement = document.querySelector('flip-gallery')
    const demoTag = document.querySelector('.flip-gallery-tag')
    const inputs = Array.from(demoTag.querySelectorAll('input, select'))
    inputs.forEach(i => {
      i.value = flipGalleryElement.getAttribute(i.id)
      i.addEventListener('change', e => {
        console.log(e.currentTarget.id, e.currentTarget.value)
        flipGalleryElement.setAttribute(e.currentTarget.id, e.currentTarget.value)
      })
    })
  </script>
</body>

</html>