@projektemacher/storymapjs 0.10.6 → 0.10.8

package/src/scss/icons/Icons.scss

@@ -0,0 +1,239 @@
+/* Icons
+================================================== */
+
+/* Icon font binaries live in public/css/icons/ (copied to dist/css/icons/ at
+build time). The source uses the absolute public path so `vite dev` serves
+them directly; buildLibraryCss() in vite.config.ts rewrites these to relative
+./icons/... for dist/css/storymap.css so subpath, bundler and Electron
+consumers keep resolving them. */
+@font-face {
+    font-family: vco-icons;
+    src:
+        url("/css/icons/vco-icons.woff2") format("woff2"),
+        url("/css/icons/vco-icons.woff") format("woff"),
+        url("/css/icons/vco-icons.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="vco-icon-"],
+[class*=" vco-icon-"] {
+    /* icon font only: a generic fallback would render glyph codepoints as tofu */
+    font-family: vco-icons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+    speak: none;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+}
+
+.vco-icon-wikipedia::after {
+    content: "\e64e";
+}
+
+.vco-icon-chevron-right::after {
+    content: "\e64f";
+}
+
+.vco-icon-chevron-left::after {
+    content: "\e650";
+}
+
+.vco-icon-youtube-logo::after {
+    content: "\e651";
+}
+
+.vco-icon-foursquare::after {
+    content: "\e652";
+}
+
+.vco-icon-camera-retro::after {
+    content: "\e653";
+}
+
+.vco-icon-doc::after {
+    content: "\e654";
+}
+
+.vco-icon-weibo::after {
+    content: "\e655";
+}
+
+.vco-icon-resize-horizontal::after {
+    content: "\e656";
+}
+
+.vco-icon-resize-vertical::after {
+    content: "\e657";
+}
+
+.vco-icon-resize-full::after {
+    content: "\e658";
+}
+
+.vco-icon-resize-small::after {
+    content: "\e659";
+}
+
+.vco-icon-twitter::after {
+    content: "\e62b";
+}
+
+.vco-icon-google-plus::after {
+    content: "\e62c";
+}
+
+.vco-icon-video::after {
+    content: "\e62d";
+}
+
+.vco-icon-plaintext::after {
+    content: "\e62e";
+}
+
+.vco-icon-image-v2::after {
+    content: "\e62f";
+}
+
+.vco-icon-quote-v2::after {
+    content: "\e630";
+}
+
+.vco-icon-zoom-in::after {
+    content: "\e631";
+}
+
+.vco-icon-zoom-out::after {
+    content: "\e632";
+}
+
+.vco-icon-list::after {
+    content: "\e633";
+}
+
+.vco-icon-music::after {
+    content: "\e634";
+}
+
+.vco-icon-location::after {
+    content: "\e635";
+}
+
+.vco-icon-web::after {
+    content: "\e636";
+}
+
+.vco-icon-share-v2::after {
+    content: "\e637";
+}
+
+.vco-icon-soundcloud::after {
+    content: "\e639";
+}
+
+.vco-icon-video-v2::after {
+    content: "\e63a";
+}
+
+.vco-icon-youtube::after {
+    content: "\e63a";
+}
+
+.vco-icon-tumblr::after {
+    content: "\e63b";
+}
+
+.vco-icon-lastfm::after {
+    content: "\e63c";
+}
+
+.vco-icon-github::after {
+    content: "\e63d";
+}
+
+.vco-icon-goback::after {
+    content: "\e63e";
+}
+
+.vco-icon-doc-v2::after {
+    content: "\e63f";
+}
+
+.vco-icon-googledrive::after {
+    content: "\e640";
+}
+
+.vco-icon-facebook::after {
+    content: "\e641";
+}
+
+.vco-icon-flickr::after {
+    content: "\e642";
+}
+
+.vco-icon-dribbble::after {
+    content: "\e643";
+}
+
+.vco-icon-image::after {
+    content: "\e605";
+}
+
+.vco-icon-vimeo::after {
+    content: "\e606";
+}
+
+.vco-icon-instagram::after {
+    content: "\e644";
+}
+
+.vco-icon-pinterest::after {
+    content: "\e645";
+}
+
+.vco-icon-arrow-left::after {
+    content: "\e646";
+}
+
+.vco-icon-arrow-down::after {
+    content: "\e647";
+}
+
+.vco-icon-arrow-up::after {
+    content: "\e648";
+}
+
+.vco-icon-arrow-right::after {
+    content: "\e649";
+}
+
+.vco-icon-share::after {
+    content: "\e64a";
+}
+
+.vco-icon-blockquote::after {
+    content: "\e64b";
+}
+
+.vco-icon-evernote::after {
+    content: "\e64c";
+}
+
+.vco-icon-mappin::after {
+    content: "\e600";
+}
+
+.vco-icon-swipe-right::after {
+    content: "\e601";
+}
+
+.vco-icon-swipe-left::after {
+    content: "\e602";
+}
+
+.vco-icon-touch-spread::after {
+    content: "\e603";
+}
+
+.vco-icon-touch-pinch::after {
+    content: "\e604";
+}

package/src/scss/map/VCO.ImageMarker.scss

@@ -0,0 +1,23 @@
+/* Requires Variables.less
+================================================== */
+$leaflet-offset: 6px;
+$map-icon-size: 44px; // 52
+$map-icon-width: 32px; // 38
+$map-icon-size: 52px;
+$map-icon-width: 38px;
+
+.vco-map {
+    .vco-mapimage-display:hover {
+        .vco-mapmarker,
+        .vco-mapmarker-active {
+            display: block;
+        }
+    }
+
+    .vco-mapimage-display {
+        .vco-mapmarker,
+        .vco-mapmarker-active {
+            display: none;
+        }
+    }
+}

package/src/scss/map/VCO.Map.scss

@@ -0,0 +1,21 @@
+@use "../Variables" as *;
+
+/* Requires Variables.less
+================================================== */
+.vco-map {
+    height: 100%;
+    overflow: hidden;
+    top: 0;
+    background-color: $color-foreground;
+
+    .vco-map-mask {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+
+        .vco-map-display {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}

package/src/scss/map/VCO.MapMarker.scss

@@ -0,0 +1,242 @@
+@use "../Variables" as *;
+@use "../core/Mixins" as *;
+
+/* Requires Variables.less
+================================================== */
+$map-icon-size: 44px; // 52
+$map-icon-width: 32px; // 38
+$map-icon-size: 52px;
+$map-icon-width: 38px;
+
+.vco-map {
+    .vco-mapmarker,
+    .vco-mapmarker-active {
+        font-family: vco-icons, sans-serif;
+        speak: none;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        line-height: 1;
+        width: $map-icon-width !important;
+        height: $map-icon-size !important;
+
+        // NB: the pin alignment is handled by the overlay positioning
+        // (bottom-center + offset, see MapMarker.OpenLayers._addTo) —
+        // OL's inline styles would override any CSS top/left here anyway.
+    }
+
+    // Map Pin
+    .vco-mapmarker::before,
+    .vco-mapmarker-active::before {
+        content: "\e600";
+        font-size: $map-icon-size;
+        text-shadow: rgb(0 0 0 / 66%) 0 2px 5px;
+    }
+
+    .vco-mapmarker,
+    .vco-mapmarker-active {
+        // enlarged invisible tap target (issue #434); the negative margins
+        // keep the pin glyph exactly where it was
+        padding: 4px;
+        margin: -4px;
+    }
+
+    .vco-mapmarker {
+        color: #a5a5a5;
+    }
+
+    .vco-mapmarker-active {
+        color: $color-theme;
+    }
+
+    // Custom icon markers render only their image (no vco-mapmarker class,
+    // so none of the pin rules above apply): belt and braces against the
+    // default pin glyph, and the pointer cursor that pins get elsewhere.
+    .vco-mapmarker-custom {
+        cursor: pointer;
+    }
+
+    .vco-mapmarker-custom::before {
+        content: none;
+    }
+
+    .vco-mapmarker-image-icon,
+    .vco-mapmarker-image-icon-active {
+        border: 2px solid #a5a5a5;
+        box-shadow: 2px 2px 2px #000;
+        opacity: 1;
+    }
+
+    .vco-mapmarker-image-icon {
+        filter: grayscale(100%);
+    }
+
+    .vco-mapmarker-image-icon-active {
+        border: 4px solid $color-theme;
+        filter: grayscale(0);
+    }
+
+    /* Place-name label on the active marker (issue #243)
+	================================================== */
+    .vco-marker-label {
+        position: absolute;
+        left: 50%;
+        bottom: 100%;
+        transform: translateX(-50%);
+        margin-bottom: 6px;
+        padding: 3px 8px;
+        white-space: nowrap;
+        font-family: $font-sanserif;
+        font-size: 12px;
+        font-weight: bold;
+        color: $color-text;
+        background-color: $color-background;
+        border: 1px solid $color-theme;
+        border-radius: 4px;
+        box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
+        pointer-events: none;
+    }
+
+    /* Marker Media Icons
+	================================================== */
+    .vco-mapmarker-icon::after {
+        // font-size:20px;
+        font-size: 24px;
+        color: #fff;
+        text-align: center;
+        width: $map-icon-width;
+        height: 24px;
+        overflow: hidden;
+
+        // content:'';
+        display: block;
+        position: absolute;
+
+        // top:4px;
+        top: 8px;
+        left: 0;
+        opacity: 0.75;
+    }
+
+    .vco-mapmarker-active.vco-mapmarker-icon::after {
+        opacity: 1;
+    }
+
+    .vco-mapmarker-icon.vco-icon-youtube::after {
+        // content: "\e63a";
+        // font-size:22px;
+    }
+
+    .vco-icon-wikipedia::after {
+        // font-size:14px;
+        font-size: 16px;
+
+        // top:10px;
+        top: 12px;
+    }
+
+    .vco-icon-image::after {
+        top: 6px;
+    }
+
+    .vco-icon-vimeo::after,
+    .vco-icon-twitter::after {
+        // top: 6px;
+    }
+}
+
+/*  Marker popup and audio badge (docs/plans/iiif-media-tours.md §2)
+================================================== */
+// A card anchored to the marker element: it is a DOM child, so it travels
+// with the pin and needs no positioning maths. 44px tap targets and a
+// visible focus ring, like the rest of the map furniture.
+.vco-mapmarker-popup-open {
+    z-index: 1100; // above the active pin's 1000
+}
+
+.vco-marker-popup {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    width: max-content;
+    max-width: 260px;
+    padding: 10px 12px;
+    border: 1px solid rgb(0 0 0 / 20%);
+    border-radius: 4px;
+    background: #fff;
+    color: #222;
+    font-size: 13px;
+    line-height: 1.4;
+    text-align: left;
+    box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
+    cursor: default;
+    pointer-events: auto; // the pin's overlay sets stopEvent: false
+
+    .vco-marker-popup-close {
+        flex: 0 0 auto;
+        min-width: 28px;
+        min-height: 28px;
+        margin: -4px -4px 0 0;
+        padding: 0;
+        border: 0;
+        background: none;
+        color: inherit;
+        font-size: 18px;
+        line-height: 1;
+        cursor: pointer;
+
+        &:focus-visible {
+            outline: 2px solid #1a6fb5;
+            outline-offset: 1px;
+        }
+    }
+
+    .vco-marker-popup-thumb {
+        flex: 0 0 auto;
+        width: 48px;
+        height: 48px;
+        border-radius: 2px;
+        object-fit: cover;
+    }
+
+    .vco-marker-popup-body {
+        min-width: 0;
+    }
+
+    .vco-marker-popup-headline {
+        margin: 0 0 4px;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    .vco-marker-popup-excerpt {
+        margin: 0;
+    }
+
+    // a long card is capped and scrolls rather than growing off-screen
+    p,
+    .vco-marker-popup-excerpt {
+        max-height: 8em;
+        overflow-y: auto;
+    }
+}
+
+// A slide with narration or audio media: a small dot on the pin, so a tour's
+// audible stops are visible without reading the card.
+.vco-mapmarker-has-audio {
+    &::after {
+        content: "";
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        width: 8px;
+        height: 8px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        background: #d24d4d;
+    }
+}

package/src/scss/map/openlayers/VCO.Map.OpenLayers.scss

@@ -0,0 +1,126 @@
+@use "sass:color";
+@use "../../Variables" as *;
+
+/* Requires Variables
+================================================= */
+.vco-map {
+    .ol-viewport {
+        /* markers live in overlays */
+    }
+
+    // keep the marker overlays above the layer canvases: during pan/zoom
+    // animations the canvas containers get promoted to compositor layers,
+    // which can transiently paint over the (non-promoted) overlay DOM —
+    // the icons flicker
+    .ol-overlaycontainer {
+        z-index: 1;
+    }
+
+    .vco-mapmarker,
+    .vco-mapmarker-active,
+    .vco-mapmarker-custom,
+    .vco-mapmarker-image-icon,
+    .vco-mapmarker-image-icon-active {
+        cursor: pointer;
+    }
+
+    .ol-overlaycontainer-stopevent {
+        z-index: auto;
+    }
+
+    /* Attribution */
+    .vco-map-attribution {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background-color: rgb(255 255 255 / 75%);
+        font-size: 10px;
+        padding: 1px 4px;
+        z-index: 1000;
+
+        a {
+            color: #666;
+            text-decoration: none;
+        }
+
+        .vco-knightlab-brand,
+        a.vco-knightlab-brand {
+            margin-right: 5px;
+            text-shadow:
+                0 0 1px #fff,
+                0 0 1px #fff,
+                0 0 5px #fff;
+            font-size: 14px;
+            font-weight: bold;
+
+            // branding of the original authors (Knight Lab / Northwestern
+            // University): de-emphasized, and any logo images grayscale
+            filter: grayscale(1);
+            opacity: 0.5;
+
+            img {
+                filter: grayscale(1);
+                opacity: 0.5;
+            }
+
+            span {
+                color: $color-theme;
+                display: inline-block;
+                transform: rotate(45deg);
+            }
+
+            &:hover {
+                text-decoration: none;
+                color: color.adjust($color-theme, $lightness: 15%);
+            }
+        }
+    }
+
+    /* Overview map (mini map) */
+    .ol-overviewmap {
+        left: 8px;
+        top: 40px;
+        bottom: auto;
+
+        .ol-overviewmap-map {
+            border: none;
+
+            // the original mini map dimensions
+            width: 150px;
+            height: 100px;
+        }
+
+        button {
+            background-color: rgb(0 0 0 / 40%);
+        }
+    }
+}
+
+/* Landscape
+================================================= */
+.vco-layout-landscape {
+    .vco-map {
+        .vco-map-attribution {
+            bottom: 0;
+        }
+    }
+}
+
+/* Mobile, iPhone and skinny
+================================================== */
+.vco-skinny {
+    // let vertical page scrolls pass through the map instead of being
+    // captured as map pans (issue #288); horizontal drags still pan
+    .vco-map .ol-viewport {
+        touch-action: pan-y;
+    }
+
+    .vco-map-attribution {
+        font-size: 8px;
+
+        .vco-knightlab-brand,
+        a.vco-knightlab-brand {
+            font-size: 12px;
+        }
+    }
+}