From c91551c95643901687a9bdc9dfce02b72a56bc35 Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Thu, 6 Apr 2023 22:31:45 +0700 Subject: [PATCH] Add multiline timestamp tooltip Backport from place-catalog --- web/_js/config.js | 6 +++--- web/_js/main/time.js | 9 ++++++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/web/_js/config.js b/web/_js/config.js index 81f7dbff..d6ed0925 100644 --- a/web/_js/config.js +++ b/web/_js/config.js @@ -94,7 +94,7 @@ const variationsConfig = { { "timestamp": 1648911600, "url": ["./_img/canvas/place30/049.png", "./_img/canvas/place30/051_049.png"] }, { "timestamp": 1648913400, "url": ["./_img/canvas/place30/049.png", "./_img/canvas/place30/052_049.png"] }, { "timestamp": 1648915200, "url": ["./_img/canvas/place30/049.png", "./_img/canvas/place30/053_049.png"] }, - { "timestamp": 1648917000, "url": ["./_img/canvas/place30/049.png", "./_img/canvas/place30/054_049.png"] }, + { "timestamp": ["First Expansion", 1648917000], "url": ["./_img/canvas/place30/049.png", "./_img/canvas/place30/054_049.png"] }, { "timestamp": 1648918800, "url": ["./_img/canvas/place30/060.png", "./_img/canvas/place30/055_060.png"] }, { "timestamp": 1648920600, "url": ["./_img/canvas/place30/060.png", "./_img/canvas/place30/056_060.png"] }, { "timestamp": 1648922400, "url": ["./_img/canvas/place30/060.png", "./_img/canvas/place30/057_060.png"] }, @@ -148,7 +148,7 @@ const variationsConfig = { { "timestamp": 1649008800, "url": ["./_img/canvas/place30/104.png", "./_img/canvas/place30/105_104.png"] }, { "timestamp": 1649010600, "url": ["./_img/canvas/place30/104.png", "./_img/canvas/place30/106_104.png"] }, { "timestamp": 1649012400, "url": ["./_img/canvas/place30/104.png", "./_img/canvas/place30/107_104.png"] }, - { "timestamp": 1649014200, "url": ["./_img/canvas/place30/104.png", "./_img/canvas/place30/108_104.png"] }, + { "timestamp": ["Second Expansion", 1649014200], "url": ["./_img/canvas/place30/104.png", "./_img/canvas/place30/108_104.png"] }, { "timestamp": 1649016000, "url": ["./_img/canvas/place30/104.png", "./_img/canvas/place30/109_104.png"] }, { "timestamp": 1649017800, "url": ["./_img/canvas/place30/115.png", "./_img/canvas/place30/110_115.png"] }, { "timestamp": 1649019600, "url": ["./_img/canvas/place30/115.png", "./_img/canvas/place30/111_115.png"] }, @@ -203,7 +203,7 @@ const variationsConfig = { { "timestamp": 1649107800, "url": ["./_img/canvas/place30/159.png", "./_img/canvas/place30/160_159.png"] }, { "timestamp": 1649109600, "url": ["./_img/canvas/place30/159.png", "./_img/canvas/place30/161_159.png"] }, { "timestamp": 1649111400, "url": ["./_img/canvas/place30/159.png", "./_img/canvas/place30/162_159.png"] }, - { "timestamp": 1649112460, "url": ["./_img/canvas/place30ex/final.png"] }, + { "timestamp": ["Final Canvas", 1649112460], "url": ["./_img/canvas/place30ex/final.png"] }, { "timestamp": 1649113200, "url": ["./_img/canvas/place30/159.png", "./_img/canvas/place30/163_159.png"] }, { "timestamp": 1649115000, "url": ["./_img/canvas/place30/159.png", "./_img/canvas/place30/164_159.png"] }, { "timestamp": 1649116800, "url": ["./_img/canvas/place30/159.png", "./_img/canvas/place30/165_159.png"] }, diff --git a/web/_js/main/time.js b/web/_js/main/time.js index dfd4ced9..f8f323cf 100644 --- a/web/_js/main/time.js +++ b/web/_js/main/time.js @@ -207,7 +207,14 @@ function updateTooltip(period, variation) { const configObject = variationsConfig[variation].versions[period] // If timestap is a number return a UTC formatted date otherwise use exact timestap label - if (typeof configObject.timestamp === "number") tooltip.querySelector('div').textContent = new Date(configObject.timestamp * 1000).toUTCString() + if (Array.isArray(configObject.timestamp)) { + tooltip.querySelector('div').textContent = "" + configObject.timestamp.forEach(timestamp => { + if (tooltip.querySelector('div').textContent) tooltip.querySelector('div').innerHTML += "
" + if (typeof timestamp === "number") tooltip.querySelector('div').innerHTML += new Date(timestamp * 1000).toUTCString() + else tooltip.querySelector('div').innerHTML += timestamp + }) + } else if (typeof configObject.timestamp === "number") tooltip.querySelector('div').textContent = new Date(configObject.timestamp * 1000).toUTCString() else tooltip.querySelector('div').textContent = configObject.timestamp // Clamps position of tooltip to prevent from going off screen