@projektemacher/storymapjs 0.10.6 → 0.10.8

package/src/scss/ui/VCO.MenuBar.scss

@@ -0,0 +1,20 @@
+@use "sass:color";
+@use "../Variables" as *;
+
+/* MenuBar 
+================================================== */
+
+.vco-menubar {
+    position: absolute;
+    z-index: 11;
+    text-align: left;
+    overflow: hidden;
+    border-bottom: 1px solid color.adjust($color-background, $lightness: -10%);
+    border-right: 1px solid color.adjust($color-background, $lightness: -10%);
+    border-bottom-right-radius: 7px;
+    left: 0;
+
+    .vco-menubar-button:first-child {
+        border-left: 0;
+    }
+}

package/src/scss/ui/VCO.Message.scss

@@ -0,0 +1,101 @@
+@use "../core/Mixins" as *;
+
+/* MESSAGE
+================================================== */
+.vco-message,
+.vco-message-full {
+    width: 100%;
+
+    // max-width: 			200px;
+    height: 100%;
+    position: absolute;
+
+    // position: 			relative;
+
+    display: table;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    margin: auto;
+    text-align: center;
+
+    .vco-message-container {
+        padding: 20px;
+        margin: 20px;
+        text-align: center;
+        vertical-align: middle;
+        display: table-cell;
+
+        .vco-message-content {
+            color: #666;
+            text-align: center;
+            font-size: 11px;
+            line-height: 13px;
+            text-transform: uppercase;
+            margin-top: 7.5px;
+            margin-bottom: 7.5px;
+            text-shadow: 1px 1px 1px #fff;
+        }
+
+        .vco-loading-icon {
+            width: 30px;
+            height: 30px;
+            background-color: #666;
+            vertical-align: middle;
+            box-shadow: inset 0 1px 2px rgb(255 255 255 / 10%);
+            margin-left: auto;
+            margin-right: auto;
+
+            // margin: 100px auto;
+            animation: rotateplane 1.2s infinite ease-in-out;
+        }
+
+        @keyframes rotateplane {
+            0% {
+                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+            }
+
+            50% {
+                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+            }
+
+            100% {
+                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+            }
+        }
+    }
+}
+
+.vco-message-full {
+    @include translucent-background(#333, 0.8);
+
+    [class^="vco-icon-"],
+    [class*=" vco-icon-"] {
+        // width: 48px;
+        // height: 48px;
+        color: #fff;
+        font-size: 72px;
+    }
+
+    .vco-message-container {
+        .vco-message-content {
+            font-size: 22px;
+            line-height: 22px;
+            text-shadow: none;
+            color: #fff;
+            text-transform: none;
+            font-weight: bold;
+
+            .vco-button {
+                display: inline-block;
+                cursor: pointer;
+                background-color: #fff;
+                color: #333;
+                padding: 10px;
+                margin-top: 10px;
+                border-radius: 7px;
+            }
+        }
+    }
+}

package/src/site/site.ts

@@ -0,0 +1,88 @@
+/* Example cards for the landing page. Curated, non-`issue-*` fixtures from
+ * public/examples plus remote showcase examples; each card opens the storymap
+ * in the built embed player. The page chrome is site.css (compiled from
+ * src/scss/site/site.scss by the sitegen vite plugin) — this script only adds
+ * the cards and the demo height adjustment. */
+
+interface ExampleEntry {
+    /** Local fixture name (public/examples/<id>.json), or a remote storymap JSON url */
+    id?: string;
+    url?: string;
+    /** Thumbnail name under thumbs/ (defaults to the fixture id) */
+    thumb?: string;
+    title: string;
+    kind: string;
+}
+
+const EXAMPLES: ExampleEntry[] = [
+    { id: "katrina", title: "Hurricane Katrina", kind: "Map" },
+    { id: "population", title: "US Population Shifts", kind: "Map" },
+    { id: "marktwain", title: "Mark Twain's Travels", kind: "Map" },
+    // a legacy Zoomify pyramid, not IIIF — labelled accordingly
+    { id: "seurat", title: "A Sunday on La Grande Jatte", kind: "Large image (legacy)" },
+    { id: "iiif-wellcome", title: "Wellcome Collection (IIIF)", kind: "IIIF" },
+    { id: "president", title: "A Month in the Life of President Obama", kind: "Map" },
+    // remote showcase examples, rendered by the embed player
+    {
+        url: "https://s3.amazonaws.com/uploads.knightlab.com/storymapjs/a1a349b51799ee49e96bed10cc235e7f/garden-of-earthly-delights/published.json",
+        thumb: "bosch-garden",
+        title: "The Garden of Earthly Delights – Hieronymus Bosch",
+        kind: "Knight Lab example",
+    },
+    {
+        url: "https://uploads.knightlab.com/storymapjs/3df56e350378e51781746bfb2a2ea428/test/published.json",
+        thumb: "southern-literary-trail",
+        title: "Southern Literary Trail",
+        kind: "Georgia Humanities",
+    },
+];
+
+function card(ex: ExampleEntry): HTMLAnchorElement {
+    const target = ex.url ?? "examples/" + ex.id + ".json";
+    const thumbId = ex.thumb ?? ex.id ?? "";
+
+    const a = document.createElement("a");
+    a.className = "card";
+    a.href = `./embed/index.html?url=${encodeURIComponent(target)}`;
+
+    const header = document.createElement("span");
+    header.className = "header-image";
+    const media = document.createElement("span");
+    media.className = "header-image-background bw";
+    // build-time screenshots (tasks/build-thumbnails.mjs); fall back to a
+    // deterministic two-tone gradient when a thumb is missing
+    media.style.backgroundImage = `url('./thumbs/${thumbId}.jpg'), linear-gradient(135deg, #b8b8b8, #646464)`;
+    media.setAttribute("role", "img");
+    media.setAttribute("aria-label", ex.title);
+    header.append(media);
+
+    const body = document.createElement("article");
+    body.className = "card-content";
+    const title = document.createElement("h3");
+    title.textContent = ex.title;
+    body.append(title);
+
+    const footer = document.createElement("footer");
+    footer.textContent = ex.kind;
+
+    a.append(header, body, footer);
+    return a;
+}
+
+const target = document.getElementById("examples-cards");
+if (target) {
+    target.classList.add("cards-link");
+    for (const ex of EXAMPLES) {
+        target.append(card(ex));
+    }
+}
+
+// the original sizes the homepage demo to the window height minus 20px
+const frame = document.getElementById("demo-frame") as HTMLIFrameElement | null;
+if (frame) {
+    const size = () => {
+        frame.style.height = window.innerHeight - 20 + "px";
+    };
+    size();
+    window.addEventListener("resize", size);
+}