feat: More flexible interval output. Add settings. (#3)

xxchan · May 31, 2022 · 9449540 · 9449540
1 parent a6cd226
commit 9449540
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -5,12 +5,11 @@
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Hello World LSPlugin :)</title>
+  <title>Deadline Countdown LSPlugin :)</title>
 </head>
 <body>
 <div id="app"></div>
 <script src="https://cdn.jsdelivr.net/npm/@logseq/libs"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
 <script src="./index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,24 +1,85 @@
-function renderCountdown(el) {
-  // add a countdown to the element
-  // change <time>2022-02-05 Sat</time> to <time>2022-02-05 Sat(x days left)</time>
-  const time = el.querySelector("time")
-  const timeText = time.textContent
-
-  const timeTextParts = timeText.split(" ")
-  const timeDate = moment(timeTextParts[0]).toDate()
-
-  const now = new Date()
-  const daysDiff = daysDifference(now, timeDate)
-  const daysText = daysDiff === 1 ? "day" : "days"
-  time.textContent = `${timeText} (${daysDiff} ${daysText} left)`
+const SETTINGS_SCHEMA = [
+  {
+    key: 'show-future',
+    type: 'boolean',
+    title: 'Future',
+    description: 'Add annotation for events in the future',
+    default: true,
+  },
+  {
+    key: 'show-past',
+    type: 'boolean',
+    title: 'Past',
+    description: 'Add annotation for events in the past',
+    default: true,
+  },
+  {
+    key: 'minimum-interval',
+    type: 'enum',
+    title: 'Minimum interval',
+    enumPicker: 'select',
+    enumChoices: ['days', 'hours', 'minutes', 'seconds'],
+    description: 'If set to hours, the annotation will only be added if the interval is at least an hour. Note: Annotations are only generated when the page loads and do not update in real time.',
+    default: 'hours',
+  },
+];
+
+
+const INTERVALS = [
+  ['d', 86400],
+  ['h', 3600],
+  ['m', 60],
+  ['s', 1],
+];
+
+
+const INTERVALS_LOOKUP = Object.fromEntries(INTERVALS);
+
+
+let cfgShowFuture = true, cfgShowPast = true, cfgMinInterval = 60;
+
+
+function settingsHandler(newSettings, _oldSettings) {
+  cfgShowFuture = newSettings['show-future'] !== false;
+  cfgShowPast = newSettings['show-past'] !== false;
+  cfgMinInterval = INTERVALS_LOOKUP[(newSettings['minimum-interval'] || 'm')[0]];
+}
+
+
+
+function prettyTimeDifference(sec, minSec) {
+  minSec = minSec === undefined ? 60 : minSec;
+  let result = [];
+  for (const [label, interval] of INTERVALS) {
+    if (sec < minSec) break;
+    if (sec < interval) continue;
+    const count = Math.trunc(sec / interval);
+    sec -= interval * count;
+    result.push(`${count}${label}`);
+  }
+  return result.join(' ');
 }
 
-function daysDifference(d0, d1) {
-  var diff = d1.setHours(12) - d0.setHours(12);
-  return Math.round(diff / 8.64e7);
+
+function renderCountdown(el) {
+  const time = el.querySelector("time");
+  if (!time) return;
+  const timeText = time.textContent, now = new Date();
+  const timeTextParts = timeText.split(' ');
+  const timePart = timeTextParts[2] && !isNaN(timeTextParts[2][0]) ? timeTextParts[2] : '';
+  const then = new Date(timeTextParts[0].concat(' ', timePart));
+  if (then < now && !cfgShowPast) return;
+  if (then > now && !cfgShowFuture) return;
+  const diff = Math.floor(Math.abs(then - now) / 1000);
+  const prettyDiff = prettyTimeDifference(diff, cfgMinInterval);
+  if (prettyDiff === '') return;
+  time.textContent = `${timeText} (${then >= now ? 'in' : 'past'} ${prettyDiff})`;
 }
 
+
 async function main() {
+  logseq.onSettingsChanged(settingsHandler);
+  logseq.useSettingsSchema(SETTINGS_SCHEMA);
   const pluginId = logseq.baseInfo.id
   console.info(`#${pluginId}: MAIN`)
 
@@ -44,4 +105,4 @@ async function main() {
 }
 
 // bootstrap
-logseq.ready(main).catch(console.error);
+logseq.ready(main).catch(console.error);