hyperbook 0.33.2 → 0.34.0

package/dist/assets/directive-slideshow/client.js

@@ -0,0 +1,64 @@
+hyperbook.slideshow = (function () {
+  /**
+   * @param {string} id
+   */
+  const update = (id) => {
+    const el = document.querySelector(`.slideshow[data-id="${id}"]`);
+    let active = Number(el.getAttribute("data-active"));
+    const dots = document.querySelectorAll(`.dot[data-id="${id}"]`);
+    const images = document.querySelectorAll(
+      `.image-container[data-id="${id}"]`,
+    );
+    dots.forEach((dot) => {
+      dot.className = dot.className.replace(" active", "");
+      if (dot.getAttribute("data-index") == active) {
+        dot.className += " active";
+      }
+    });
+    images.forEach((e) => {
+      e.className = e.className.replace(" active", "");
+      if (e.getAttribute("data-index") == active) {
+        e.className += " active";
+      }
+    });
+  };
+
+  /**
+   * @param {string} id
+   * @param {number} steps
+   */
+  const moveBy = (id, steps) => {
+    const el = document.querySelector(`.slideshow[data-id="${id}"]`);
+    const images = document.querySelectorAll(`.dot[data-id="${id}"]`);
+    let active = Number(el.getAttribute("data-active"));
+    active += steps;
+    active = ((active % images.length) + images.length) % images.length;
+    el.setAttribute("data-active", active);
+    window.hyperbook.slideshow.update(id);
+  };
+
+  /**
+   * @param {string} id
+   * @param {number} index
+   */
+  const setActive = (id, index) => {
+    const el = document.querySelector(`.slideshow[data-id="${id}"]`);
+    const images = document.querySelectorAll(`.dot[data-id="${id}"]`);
+    if (index >= 0 && index < images.length) {
+      el.setAttribute("data-active", index);
+    }
+    window.hyperbook.slideshow.update(id);
+  };
+
+  const slideshows = document.getElementsByClassName("slideshow");
+  for (let slideshow of slideshows) {
+    const id = slideshow.getAttribute("data-id");
+    update(id);
+  }
+
+  return {
+    update,
+    moveBy,
+    setActive,
+  };
+})();

package/dist/assets/directive-slideshow/style.css

@@ -0,0 +1,117 @@
+.directive-slideshow {
+  margin-bottom: 8px;
+  position: relative;
+}
+
+.directive-slideshow .slideshow {
+  position: relative;
+  margin: auto;
+  overflow: hidden;
+  margin-bottom: 8px;
+  border-radius: 8px;
+}
+
+.directive-slideshow .slideshow .image-container {
+  height: inherit;
+  display: none;
+}
+
+.directive-slideshow .slideshow .image-container.active {
+  display: block;
+}
+
+.directive-slideshow .slideshow figure.normal img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 50%;
+}
+
+.directive-slideshow .slideshow figure.normal {
+  margin: 0;
+  overflow: hidden;
+  position: relative;
+  height: inherit;
+}
+
+.directive-slideshow .slideshow figure.normal figcaption {
+  position: absolute;
+  padding: 8px;
+  background-color: rgba(120, 120, 120, 0.2);
+  color: white;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  text-align: center;
+  max-width: 100%;
+}
+
+.directive-slideshow .dots-container {
+  text-align: center;
+}
+
+.directive-slideshow .dot {
+  cursor: pointer;
+  height: 15px;
+  width: 15px;
+  margin: 0 2px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.6s ease;
+}
+
+.directive-slideshow .dot:hover,
+.directive-slideshow .active {
+  background-color: #717171;
+}
+
+.directive-slideshow .dot.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+
+.directive-slideshow .fade figure.normal img {
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+
+@keyframes fade {
+  from {
+    opacity: 0.4;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/* Next & previous buttons */
+.directive-slideshow .prev,
+.directive-slideshow .next {
+  cursor: pointer;
+  position: absolute;
+  background-color: rgba(120, 120, 120, 0.2);
+  top: 50%;
+  width: auto;
+  margin-top: -22px;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+}
+
+/* Position the "next button" to the right */
+.directive-slideshow .next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.directive-slideshow .prev:hover,
+.directive-slideshow .next:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}

package/dist/assets/directive-sqlide/client.js

@@ -0,0 +1,14 @@
+hyperbook.sqlide = (function () {
+  /**
+   * @param {HTMLElement} el
+   */
+  function openFullscreen(el) {
+    const iframeEl =
+      el.parentElement.parentElement.getElementsByTagName("iframe")[0];
+    iframeEl.requestFullscreen();
+  }
+
+  return {
+    openFullscreen,
+  };
+})();

package/dist/assets/directive-sqlide/style.css

@@ -0,0 +1,24 @@
+.directive-sqlide {
+  margin-bottom: 10px;
+  border: 1px solid var(--color-spacer);
+  border-radius: 8px;
+  background: #1e1e1e;
+  overflow: hidden;
+}
+
+.directive-sqlide iframe {
+  width: 100%;
+}
+
+.directive-sqlide .menu {
+  display: flex;
+  border-top: 1px solid var(--color-spacer);
+}
+
+.directive-sqlide .menu button {
+  flex: 1;
+  background: var(--color-nav);
+  color: var(--color-text);
+  border: none;
+  cursor: pointer;
+}