From 417ab7daeb564f13ddc970c5515e5080337735bc Mon Sep 17 00:00:00 2001 From: Edvard Rejthar Date: Fri, 22 Mar 2024 18:48:50 +0100 Subject: [PATCH] file info map button --- slidershow/frame.js | 11 ++++++----- slidershow/hud.js | 10 ++++++---- slidershow/map.js | 2 +- slidershow/menu.js | 6 ++++-- slidershow/playback.js | 7 +++++-- slidershow/slidershow.js | 2 +- slidershow/style.css | 3 ++- slidershow/style.less | 6 ++++-- 8 files changed, 29 insertions(+), 18 deletions(-) diff --git a/slidershow/frame.js b/slidershow/frame.js index 1f141f8..bd19520 100644 --- a/slidershow/frame.js +++ b/slidershow/frame.js @@ -12,9 +12,10 @@ class Frame { * * Why some of them run multiple times without calling .leave()? * After calling playback.reset(), ex: moving another frames in the grid. - * Or after window resize. To handle this, we use ._entered check. + * Or after window resize. Or after frame import. To handle this, we use ._entered check. * XX But if we identify what has to be restored after size change (textFit, new frame size?), * this might solve some future bugs. + * (After import, at least HUD refresh is needed so that is it seen in the thumbnails.) * * @param {JQuery} $el * @param {Playback} playback @@ -148,10 +149,10 @@ class Frame { }) // File name - if (!this._entered) { - // What would vanish when second refresh? Video shortcuts that were added. - this.playback.hud.refresh(this, lastFrame) - } + // XX We might come here twice. Sometimes, it's not good, sometimes, it is- + // What would vanish when second refresh? Video shortcuts that were added. + // But we need to refresh ex: thumbnails after frame import. + this.playback.hud.refresh(this, lastFrame) // Map this.map_prepare() diff --git a/slidershow/hud.js b/slidershow/hud.js index 44fc013..7ebd66a 100644 --- a/slidershow/hud.js +++ b/slidershow/hud.js @@ -41,6 +41,10 @@ class Hud { $("
", { html: "▷" }) .appendTo(this.$control_icons) .on("click", () => pl.goNext()) + + this.$hud_gps.on("click", () => { + pl.hud_map.toggle(true) + }) } /** @@ -395,14 +399,12 @@ class Hud { */ refresh(frame, lastFrame = null) { const $actor = frame.$actor - if (!$actor) { - $actor = { data: () => null } - } this.$hud_filename.html(frame.get_filename($actor) || "?") this.$hud_device.text($actor.data("device") || "") this.$hud_datetime.text($actor.data("datetime") || "") - this.$hud_gps.text($actor.data("gps") || "") + // display the map button only if map was previously blocked by user + this.$hud_gps.html(this.playback.hud_map.blocked && $actor.data("gps") ? "🗺" : "") this.tag($actor.attr("data-tag")) // Counter diff --git a/slidershow/map.js b/slidershow/map.js index 11871d6..a5c8b04 100644 --- a/slidershow/map.js +++ b/slidershow/map.js @@ -157,7 +157,7 @@ class MapWidget { this.$map.remove() } /** - * + * Move the map to a position and show it (if not blocked by the user action). * @param {Place[]} places * @param {*} animate * @param {*} geometry_show diff --git a/slidershow/menu.js b/slidershow/menu.js index 2fc731a..3e36d06 100644 --- a/slidershow/menu.js +++ b/slidershow/menu.js @@ -27,7 +27,8 @@ class Menu { } // Drop new files - const $drop = this.$drop = $("#drop").on("drop", ev => { + const $drop = this.$drop = $("#drop") + this.$menu.on("drop", ev => { ev.preventDefault() const items = [...ev.originalEvent.dataTransfer.items].filter(i => i.kind === "file").map(i => i.getAsFile()) if (this.appendFiles(items)) { @@ -36,7 +37,7 @@ class Menu { $drop.text('Drop failed, try again') } }).on("dragover", ev => { - $drop.text("Drop") + $drop.text("Drop anywhere") ev.preventDefault() }).on("dragleave", ev => { @@ -133,6 +134,7 @@ class Menu { const items = [...e.originalEvent.dataTransfer.items].filter(i => i.kind === "file").map(i => i.getAsFile()) const frames = this.loadFiles(items) if (frames.length) { + this.playback.hud.info("Imported: " + frames.length) onDrop(frames, e.currentTarget, before) // we should insert them into DOM } else { this.playback.hud.info("Drop failed, try again") diff --git a/slidershow/playback.js b/slidershow/playback.js index 0085839..09b8e89 100644 --- a/slidershow/playback.js +++ b/slidershow/playback.js @@ -3,8 +3,11 @@ */ class Playback { - constructor(menu = null, aux_window = null) { - /** @type {Menu} */ + /** + * @param {Menu} menu + * @param {AuxWindow} aux_window + */ + constructor(menu, aux_window) { this.menu = menu this.aux_window = aux_window this.hud = new Hud(this) diff --git a/slidershow/slidershow.js b/slidershow/slidershow.js index 4ddc498..a5e8bc7 100644 --- a/slidershow/slidershow.js +++ b/slidershow/slidershow.js @@ -123,7 +123,7 @@ function get_menu() {
-
+
diff --git a/slidershow/style.css b/slidershow/style.css index fc1f52d..0b039de 100644 --- a/slidershow/style.css +++ b/slidershow/style.css @@ -173,7 +173,8 @@ frame-preview article-map:before { text-align: right; } #hud #hud-fileinfo #hud-gps { - display: none; + float: left; + cursor: pointer; } #hud #hud-fileinfo #hud-tag { background-color: blue; diff --git a/slidershow/style.less b/slidershow/style.less index 96571a0..21e4c16 100644 --- a/slidershow/style.less +++ b/slidershow/style.less @@ -186,7 +186,8 @@ frame-preview { position: fixed; } - .alwaysHidden { // some controles + .alwaysHidden { + // some controles position: fixed; bottom: -100px; } @@ -223,7 +224,8 @@ frame-preview { text-align: right; #hud-gps { - display: none; // XX not used right now + float: left; + cursor: pointer; } #hud-tag {