@projektemacher/storymapjs 0.10.7 → 0.11.0

package/src/scss/snapmap/VCO.SnapMap.scss

@@ -10,7 +10,7 @@
             text-transform: none !important;
 
             a {
-                color: color.adjust($color-dark, $lightness: 40%);
+                color: var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)});
             }
         }
     }
@@ -21,7 +21,7 @@
         font-weight: bold;
         margin-top: 10px;
         font-size: 12px;
-        color: color.adjust($color-dark, $lightness: 40%);
+        color: var(--vco-color-text-muted, #{color.adjust($color-dark, $lightness: 40%)});
 
         /*
 		&:before {
@@ -51,7 +51,7 @@
         display: none;
 
         a {
-            color: #000;
+            color: var(--vco-color-dark, #{$color-dark});
         }
 
         .vco-snapmap-instagram-posts,

package/src/scss/ui/VCO.Consent.scss

@@ -20,12 +20,12 @@
     .vco-consent-title {
         margin: 0;
         font-weight: bold;
-        color: $color-foreground;
+        color: var(--vco-color-foreground, #{$color-foreground});
     }
 
     .vco-consent-message {
         margin: 0;
-        color: $color-dark;
+        color: var(--vco-color-dark, #{$color-dark});
     }
 
     .vco-consent-buttons {
@@ -35,26 +35,32 @@
 
         button {
             padding: 8px 18px;
-            border: 1px solid $color-dark;
+            min-height: 44px;
+            border: 1px solid var(--vco-color-dark, #{$color-dark});
             border-radius: 4px;
             background-color: transparent;
-            color: $color-dark;
+            color: var(--vco-color-dark, #{$color-dark});
             font-family: $font-sanserif;
             cursor: pointer;
 
             &:hover {
-                background-color: $color-dark;
-                color: $color-background;
+                background-color: var(--vco-color-dark, #{$color-dark});
+                color: var(--vco-color-background, #{$color-background});
+            }
+
+            &:focus-visible {
+                outline: 2px solid var(--vco-color-dark, #{$color-dark});
+                outline-offset: 2px;
             }
 
             &.vco-consent-allow {
-                background-color: $color-theme;
-                border-color: $color-theme;
-                color: $color-background;
+                background-color: var(--vco-color-theme, #{$color-theme});
+                border-color: var(--vco-color-theme, #{$color-theme});
+                color: var(--vco-color-background, #{$color-background});
 
                 &:hover {
-                    background-color: $color-theme-dark;
-                    border-color: $color-theme-dark;
+                    background-color: var(--vco-color-theme-dark, #{$color-theme-dark});
+                    border-color: var(--vco-color-theme-dark, #{$color-theme-dark});
                 }
             }
         }
@@ -69,9 +75,53 @@
     height: 100%;
     min-height: 120px;
     padding: 20px;
-    background-color: $color-background;
-    color: $color-dark;
+    background-color: var(--vco-color-background, #{$color-background});
+    color: var(--vco-color-dark, #{$color-dark});
     font-family: $font-sanserif;
     font-size: $base-font-size;
     text-align: center;
 }
+
+/* Start-of-story consent: allow all / individually / decline all
+================================================= */
+.vco-consent-start {
+    .vco-consent-services {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        max-width: 420px;
+        width: 100%;
+        margin-top: 6px;
+    }
+
+    .vco-consent-service {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 4px 0;
+        border-bottom: 1px solid rgb(0 0 0 / 10%);
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .vco-consent-service-label {
+        color: var(--vco-color-dark, #{$color-dark});
+        text-align: left;
+    }
+
+    .vco-consent-buttons {
+        margin-top: 0;
+
+        button:disabled {
+            opacity: 0.5;
+            cursor: default;
+        }
+    }
+
+    .vco-consent-start-actions {
+        margin-top: 12px;
+    }
+}

package/src/scss/ui/VCO.Layers.scss

@@ -0,0 +1,119 @@
+@use "sass:color";
+@use "../Variables" as *;
+
+/* Layers control (show_layers_control option)
+================================================== */
+
+// Disclosure button. The open/active state lives on the button itself:
+// MenuBar.setColor() replaces the .vco-menubar className wholesale, so a
+// state class on the menubar would not survive a repaint.
+.vco-menubar-button.vco-menubar-layers {
+    &.vco-active {
+        background: var(--vco-color-theme, #{$color-theme});
+        color: var(--vco-color-background, #{$color-background});
+    }
+}
+
+// The panel is absolutely positioned under the disclosure button so it never
+// contributes to .vco-menubar.offsetHeight (menubar_height drives the map and
+// slider heights).
+.vco-layers {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 12;
+    min-width: 200px;
+    max-width: min(320px, 90vw);
+    max-height: 70vh;
+    overflow-y: auto;
+    padding: 8px 0;
+    border: 1px solid var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
+    border-radius: 0 0 7px;
+    background-color: var(--vco-color-background, #{$color-background});
+    color: var(--vco-color-foreground, #{$color-foreground});
+    font-family: $font-sanserif;
+    font-size: $base-font-size-small;
+    text-align: left;
+
+    &[hidden] {
+        display: none;
+    }
+
+    .vco-layers-group {
+        margin: 0;
+        padding: 4px 0;
+        border: 0;
+        border-top: 1px solid
+            var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
+
+        &:first-child {
+            border-top: 0;
+        }
+
+        legend {
+            padding: 0 12px;
+            font-weight: bold;
+            color: var(--vco-color-text, #{$color-text});
+        }
+
+        label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            min-height: 44px;
+            padding: 4px 12px;
+            cursor: pointer;
+
+            &:hover {
+                background-color: var(
+                    --vco-color-hover,
+                    #{color.adjust($color-background, $lightness: -5%)}
+                );
+            }
+
+            &:has(input:checked) {
+                font-weight: bold;
+            }
+
+            &:has(input:disabled) {
+                opacity: 0.55;
+                cursor: default;
+            }
+
+            input[type="radio"],
+            input[type="checkbox"] {
+                flex-shrink: 0;
+                margin: 0;
+                accent-color: var(--vco-color-theme, #{$color-theme});
+
+                &:disabled {
+                    cursor: default;
+                }
+
+                &:focus-visible {
+                    outline: 2px solid var(--vco-color-theme, #{$color-theme});
+                    outline-offset: 2px;
+                }
+            }
+        }
+    }
+}
+
+/* Right to Left: anchor the panel under the button from the right
+================================================== */
+.vco-rtl {
+    .vco-layers {
+        right: 0;
+        left: auto;
+        text-align: right;
+    }
+}
+
+/* Mobile: cap the panel width so it never covers the slide
+================================================== */
+.vco-mobile {
+    .vco-layers {
+        min-width: 0;
+        max-width: 240px;
+    }
+}

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

@@ -4,18 +4,49 @@
 /* MenuBar Button
 ================================================== */
 
-.vco-menubar-button {
-    border-left: 1px solid color.adjust($color-background, $lightness: -10%);
+.vco-menubar .vco-menubar-button {
+    // scoped under .vco-menubar on purpose: the ported normalize reset in
+    // core/Reset.scss targets `.vco-storymap button` (0,1,1) and would
+    // otherwise zero the padding, border, size and weight below
+    border-left: 1px solid
+        var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
     font-size: 14px;
+
+    // real <button>s do not inherit the typeface: without this they render
+    // in the UA system font instead of the storymap stack the pre-0.9.0
+    // divs inherited. No `font` shorthand: it would reset font-weight.
+    font-family: inherit;
+    line-height: inherit;
     padding: 6px 12px;
 
+    // pointer targets stay usable for coarse pointers and low vision
+    min-height: 44px;
+
+    // the widget root is content-box (see VCO.StoryMap.scss): without this
+    // the 6px+6px padding lands on top of the 44px instead of inside it
+    box-sizing: border-box;
+
+    // the 44px box dwarfs the label: center it so the original padding
+    // reads as padding, not as dead space below the text
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    // text-to-icon spacing lives here, not as a literal space in the
+    // button markup: flex ignores inter-item whitespace, and a gap stays
+    // consistent across locales, RTL and icon-only mobile buttons
+    gap: 6px;
+
     // position:relative;
     // top:-24px;
-    background-color: fadeout($ui-background-color, 10%);
-    background-color: $color-background;
+    background-color: var(--vco-color-ui-fade, #{fadeout($ui-background-color, 10%)});
+    background-color: var(--vco-color-background, #{$color-background});
     cursor: pointer;
     font-weight: bold;
-    color: $color-text;
+
+    // pre-0.9.0 gray, not the body text color: the classic menubar buttons
+    // read as chrome, not content. 4.7:1 on white, so no contrast cost.
+    color: #737373;
 
     .vco-icon-arrow-up,
     .vco-icon-arrow-down {
@@ -28,21 +59,61 @@
     }
 
     &:hover {
-        background: $color-theme;
-        color: $color-background;
+        background: var(--vco-color-theme, #{$color-theme});
+        color: var(--vco-color-background, #{$color-background});
+    }
+
+    // keyboard focus parity with the hover state. The ring is dark on the
+    // theme background (a theme-coloured ring on itself is 1:1) and sits
+    // outside the button edge so it is never covered.
+    &:focus-visible {
+        background: var(--vco-color-theme, #{$color-theme});
+        color: var(--vco-color-background, #{$color-background});
+        outline: 2px solid var(--vco-color-dark, #{$color-dark});
+        outline-offset: 2px;
+    }
+}
+
+// dark mode keeps a lighter gray for the same chrome look: #737373 on the
+// dark panel would fail contrast (the themed text it replaces passed).
+// Mirrors the data-vco-theme / prefers-color-scheme switching in
+// VCO.StoryMap.scss.
+.vco-storymap[data-vco-theme="dark"] .vco-menubar-button {
+    color: #b3b3b3;
+}
+
+@media (prefers-color-scheme: dark) {
+    .vco-storymap:not([data-vco-theme="light"]) .vco-menubar-button {
+        color: #b3b3b3;
+    }
+}
+
+// the dark resting color above ties with :hover/:focus-visible (0,3,0)
+// and wins by source order, leaving gray text on the theme background —
+// restate the inverted interactive look explicitly so dark hover matches
+// light hover (panel text on the theme background, high contrast both ways)
+.vco-storymap[data-vco-theme="dark"] .vco-menubar-button:hover,
+.vco-storymap[data-vco-theme="dark"] .vco-menubar-button:focus-visible {
+    color: var(--vco-color-background, #222);
+}
+
+@media (prefers-color-scheme: dark) {
+    .vco-storymap:not([data-vco-theme="light"]) .vco-menubar-button:hover,
+    .vco-storymap:not([data-vco-theme="light"]) .vco-menubar-button:focus-visible {
+        color: var(--vco-color-background, #222);
     }
 }
 
 .vco-mobile {
     .vco-menubar-button {
         &:hover {
-            background-color: fadeout($ui-background-color, 33%);
-            color: $color-text;
+            background-color: var(--vco-color-ui-faint, #{fadeout($ui-background-color, 33%)});
+            color: var(--vco-color-text, #{$color-text});
         }
 
         &:active {
-            background: $color-theme;
-            color: $color-background;
+            background: var(--vco-color-theme, #{$color-theme});
+            color: var(--vco-color-background, #{$color-background});
         }
     }
 }
@@ -75,7 +146,7 @@
     height: 6px;
     margin: 0 12px;
     vertical-align: middle;
-    background-color: color.adjust($color-background, $lightness: -10%);
+    background-color: var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
     border-radius: 3px;
     overflow: hidden;
 
@@ -83,9 +154,67 @@
         display: block;
         height: 100%;
         width: 0;
-        background-color: $color-theme;
+        background-color: var(--vco-color-theme, #{$color-theme});
         border-radius: 3px;
     }
+
+    // height variants of the fill bar (progressbar block/thinblock)
+    &.vco-menubar-progress-block {
+        height: 12px;
+    }
+
+    &.vco-menubar-progress-thinblock {
+        height: 3px;
+    }
+
+    // per-slide steps (progressbar dots/squares): buttons jumping to
+    // their slide, built by MenuBar._renderProgressSteps
+    &.vco-menubar-progress-dots,
+    &.vco-menubar-progress-squares {
+        width: auto;
+        height: auto;
+        background: none;
+        overflow: visible;
+    }
+
+    .vco-menubar-progress-step {
+        display: inline-block;
+        min-height: 0;
+        min-width: 0;
+        margin: 0 3px;
+        padding: 0;
+        border: 1px solid var(--vco-color-theme, #{$color-theme});
+        background: transparent;
+        cursor: pointer;
+        vertical-align: middle;
+
+        &.vco-menubar-progress-dots {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+        }
+
+        &.vco-menubar-progress-squares {
+            width: 10px;
+            height: 10px;
+            border-radius: 0;
+        }
+
+        &.vco-past {
+            background-color: var(--vco-color-theme, #{$color-theme});
+        }
+
+        &.vco-active {
+            background-color: var(--vco-color-theme, #{$color-theme});
+            outline: 2px solid var(--vco-color-dark, #{$color-dark});
+            outline-offset: 1px;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--vco-color-dark, #{$color-dark});
+            outline-offset: 2px;
+        }
+    }
 }
 
 /* Route distance display (issue #341)
@@ -95,5 +224,5 @@
     margin: 0 12px;
     vertical-align: middle;
     font-size: $base-font-size-small;
-    color: $color-dark;
+    color: var(--vco-color-dark, #{$color-dark});
 }

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

@@ -9,11 +9,18 @@
     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: 1px solid
+        var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
+    border-right: 1px solid
+        var(--vco-color-border, #{color.adjust($color-background, $lightness: -10%)});
     border-bottom-right-radius: 7px;
     left: 0;
 
+    // opt-in HUD palette (hudcolor/hudbgcolor): the theme values stay the
+    // default, so stories without the options render unchanged
+    background-color: var(--vco-hud-bg, transparent);
+    color: var(--vco-hud-fg, inherit);
+
     .vco-menubar-button:first-child {
         border-left: 0;
     }

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

@@ -1,4 +1,5 @@
 @use "../core/Mixins" as *;
+@use "../Variables" as *;
 
 /* MESSAGE
 ================================================== */
@@ -10,6 +11,12 @@
     height: 100%;
     position: absolute;
 
+    // dismissable by click and keyboard: keyboard focus gets a ring
+    &.vco-message-dismiss:focus-visible {
+        outline: 2px solid var(--vco-color-dark, #{$color-dark});
+        outline-offset: -2px;
+    }
+
     // position: 			relative;
 
     display: table;
@@ -43,14 +50,19 @@
             height: 30px;
             background-color: #666;
             vertical-align: middle;
-
-            @include box-shadow(inset 0 1px 2px rgba(255, 255, 255, 0.1));
-
+            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;
+
+            // an infinite loader is vestibular-hostile: freeze it for
+            // reduced-motion visitors (a static square still reads "busy"
+            // next to the loading text)
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+            }
         }
 
         @keyframes rotateplane {
@@ -96,8 +108,7 @@
                 color: #333;
                 padding: 10px;
                 margin-top: 10px;
-
-                @include border-radius(7px);
+                border-radius: 7px;
             }
         }
     }

package/src/site/site.ts

@@ -18,7 +18,8 @@ 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" },
-    { id: "seurat", title: "A Sunday on La Grande Jatte", kind: "Gigapixel" },
+    // 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