♻️ Refactor Bootstrap to ES module import and fix related bugs

Author: hidao80

.eslintrc.json

@@ -30,8 +30,5 @@
     ],
     "no-unused-vars": "warn",
     "no-console": "off"
-  },
-  "globals": {
-    "bootstrap": "readonly"
   }
 }

config.html

@@ -7,10 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link rel="icon" href="img/android-launchericon-72-72.png" type="image/png">
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-
     <link href="/css/config.css" rel="stylesheet">
 
     <!-- i18n初期化スクリプト(同期実行でDOM構築前に翻訳) -->

index.html

@@ -17,7 +17,6 @@
     <meta property="og:description" content="Time-stamped work notes PWA">
     <meta property="og:image" content="https://fast-logbook.netlify.app/img/android-launchericon-512-512.png">
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
 

js/config.js

@@ -9,9 +9,6 @@ document.addEventListener('DOMContentLoaded', async () => {
   // Set the theme automatically
   autoSetTheme();
 
-  // 翻訳はi18n-init.jsで既に完了しているため、ここでは不要
-  // Multilingualization.translateAll();
-
   // Get the version number from manifest.json.
   fetch('/manifest.json')
     .then(response => response.json())
@@ -26,7 +23,13 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     // Save the input when focus is removed or changed
     node.addEventListener('change', e => {
-      localStorage.setItem(e.target.dataset.translate, e.target.value.trim());
+      try {
+        localStorage.setItem(e.target.dataset.translate, e.target.value.trim());
+      } catch (e) {
+        if (e.name === 'QuotaExceededError') {
+          alert('ストレージ容量が不足しています');
+        }
+      }
     });
   });
 
@@ -35,15 +38,14 @@ document.addEventListener('DOMContentLoaded', async () => {
   $$one('select').value = getRoundingUnit(min);
 
   // Save the value when the rounding unit is changed
-  $$one('select').addEventListener('change', () => {
-    localStorage.setItem(ROUNDING_UNIT_MINUTE_KEY, this.value);
+  $$one('select').addEventListener('change', e => {
+    localStorage.setItem(ROUNDING_UNIT_MINUTE_KEY, e.target.value);
   });
 
   // Synchronize when the setting changes
   window.addEventListener('storage', (event) => {
-    const $ = bootstrap.$;
     if (event.storageArea === localStorage) {
-      const target = event.key === ROUNDING_UNIT_MINUTE_KEY ? $('select') : $(`[data-translate='${event.key}']`);
+      const target = event.key === ROUNDING_UNIT_MINUTE_KEY ? $$one('select') : $$one(`[data-translate='${event.key}']`);
       if (target) {
         target.value = event.newValue;
       }

js/main.js

@@ -2,6 +2,7 @@ import { $$one, $$all, $$disableConsole } from './lib/indolence.min.js';
 import { LOG_DATA_KEY, ROUNDING_UNIT_MINUTE_KEY, trimNewLine, appendTime, installPWA, autoSetTheme } from './lib/utils.js';
 import Multilingualization from './lib/multilingualization.js';
 import { downloadLog, generateFormattedLog } from './lib/download.js';
+import * as bootstrap from 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js';
 
 /**
  * Add one log entry
@@ -41,7 +42,13 @@ async function loadLogs() {
  * @return {Promise}
  */
 function saveLogs() {
-  localStorage.setItem(LOG_DATA_KEY, trimNewLine($$one('textarea').value));
+  try {
+    localStorage.setItem(LOG_DATA_KEY, trimNewLine($$one('textarea').value));
+  } catch (e) {
+    if (e.name === 'QuotaExceededError') {
+      alert('ストレージ容量が不足しています');
+    }
+  }
   $$one('.navbar-save-status').classList.toggle('saved', true);
 }
 
@@ -131,7 +138,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   // When input to the 0th element is confirmed, stamp the entered log for PC
   $$one('input').addEventListener('keydown', async e => {
     // Ignore events processed by IME
-    if ('Enter' === e.key && (e.keyCode === 229 || !e.isComposing)) {
+    if (!e.isComposing && e.keyCode !== 229) {
       processInput(e.target);
     }
   });
@@ -144,7 +151,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   $$one('textarea').addEventListener('keydown', async e => {
     if ('Enter' == e.code) {
       // Ignore events processed by IME
-      if (e.isComposing || e.keyCode === 229) {
+      if (!e.isComposing && e.keyCode !== 229) {
         return;
       }
       await saveLogs();