gall/template.html at main · dominickp/gall · 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
  <head>
    <title><!-- GALLERY_TITLE --></title>
    <style>
      html {
        background-color: black;
      }
      main {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
        grid-template-rows: masonry;
        gap: 0.1rem;
      }
      figure {
        position: relative;
        counter-increment: item-counter;
        margin: 0;
      }
      img, video {
        width: 100%;
        height: auto;
        display: block;
        cursor: pointer;
      }
      main.is-selecting figure:not(.toggling) img, main.is-selecting figure:not(.toggling) video {
        opacity: 0.5;
      }
      .hidden {
        display: none;
      }
      .invisible {
        visibility: hidden;
      }
      #filter-options {
        position: fixed;
        display: inline-block;
        right: 0;
        top: 0;
        z-index: 1000;
        margin: 20px;
      }
      .visible-on-selecting {
        display: inline;
      }
      a.button {
        cursor: pointer;
        box-sizing: border-box;
      }
      #gallery-info {
        position: fixed;
        display: inline;
        right: 0;
        top: 34px;
        z-index: 999;
        margin: 20px;
        font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
          "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 2px 10px;
        border-radius: 9px;
        font-size: 14px;
      }
    </style>
    <script>
      function bootstrapSelecting() {
        var main = document.querySelector("main");
        main.classList.add("is-selecting");
        var filterOptions = document.querySelector(
          "#filter-options .visible-on-selecting"
        );
        filterOptions.classList.remove("invisible");
      }

      /**
       * Reset gallery to its original state (unsets any selected items)
       */
      function resetSelecting() {
        const main = document.querySelector("main");
        // Remove the is-selecting class from the main element
        main.classList.remove("is-selecting");
        // Select all images
        const images = document.querySelectorAll("main figure.card");
        for (const image of images) {
          // Remove the toggling/hidden classes
          image.classList.remove("toggling");
          image.classList.remove("hidden");
        }
        const filterOptions = document.querySelector("#filter-options .visible-on-selecting");
        filterOptions.classList.add("invisible");
      }

      /**
       * Filter the gallery based on the selected items (hides any unselected items)
       */
      function filterSelection() {
        // Select all images
        var images = document.querySelectorAll("main figure.card");
        for (const image of images) {
          // If the image is not toggling, add the hidden class to it
          if (!image.classList.contains("toggling")) {
            image.classList.add("hidden");
          }
        }
      }

      /**
       * Randomize the order of the images in the gallery
       */
      function randomizeImageOrder() {
        var main = document.querySelector("main");
        var figures = document.querySelectorAll("main figure");
        // Create an array to store the figures
        var figuresArray = Array.from(figures);
        // Shuffle the array
        figuresArray.sort(() => Math.random() - 0.5);
        // Remove all the figures from the main element
        main.innerHTML = "";
        // Append the shuffled figures to the main element
        for (const figure of figuresArray) {
          main.appendChild(figure);
        }
      }

      function showGalleryInfo() {
        var galleryInfo = document.querySelector("#gallery-info");
        galleryInfo.classList.remove("invisible");
      }

      function hideGalleryInfo() {
        var galleryInfo = document.querySelector("#gallery-info");
        galleryInfo.classList.add("invisible");
      }

      function toggleImage(event) {
        // Set the is-selecting class on the main element
        bootstrapSelecting();
        var image = event.target;
        var figure = image.parentElement;
        // Check if the figure element has the toggling class
        if (figure.classList.contains("toggling")) {
          // Remove the toggling class
          figure.classList.remove("toggling");
        } else {
          // Add the toggling class
          figure.classList.add("toggling");
        }
      }

      document.addEventListener("DOMContentLoaded", (event) => {
        // Select all images
        var images = document.querySelectorAll("main figure.card");
        // Loop through each image
        for (const image of images) {
          // Add click event listener to each image
          image.addEventListener("click", function (event) {
            // Call the toggleImage function when an image is clicked
            toggleImage(event);
            console.log("click");
          });
        }
      });

    </script>
  </head>
  <body>
    <div id="filter-options">
      <div class="visible-on-selecting invisible">
        <a title="Reset gallery" class="button" onclick="resetSelecting()">🔄</a
        ><a title="Filter gallery" class="button" onclick="filterSelection()"
          >✅</a
        >
      </div>
      <a title="Randomize images" class="button" onclick="randomizeImageOrder()"
        >🔀</a
      ><a
        class="button"
        onmouseenter="showGalleryInfo()"
        onmouseleave="hideGalleryInfo()"
        >ℹ️</a
      >
    </div>
    <div id="gallery-info" class="invisible"><!-- GALLERY_INFO --></div>
    <main class="grid"><!-- GALLERY_CONTENTS --></main>
  </body>
</html>