Adds beep on error setting on the example.

openvanilla · Mar 13, 2024 · 648b99a · 648b99a
1 parent efb548c
commit 648b99a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 11 deletions.
diff --git a/output/example/index.html b/output/example/index.html
@@ -137,6 +137,9 @@
           <tr>
             <td class="option_title">其他：</td>
             <td>
+              <input type="checkbox" name="beep_on_error" id="beep_on_error"><label for="beep_on_error">錯誤時發出<a
+                  onclick="beep(); return false;">
+                  嗶聲</a></label><br />
               <a href="#" id="fullscreen">全螢幕編輯</a><br />
               <!-- <a href="#" id="dump_user_phrases">印出使用者詞彙</a><br /> -->
             </td>

diff --git a/output/example/index.js b/output/example/index.js
@@ -9,6 +9,13 @@ function resetUI() {
   composingBuffer = "";
 }
 
+function beep() {
+  var snd = new Audio(
+    "data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU="
+  );
+  snd.play();
+}
+
 let ui = (function () {
   let that = {};
   that.reset = resetUI;
@@ -84,6 +91,13 @@ let controller = new InputController(ui);
 controller.setOnOpenUrl(function (url) {
   window.open(url);
 });
+controller.setOnError(function () {
+  // console.log("on error");
+  if (settings.beep_on_error) {
+    beep();
+  }
+});
+
 let defaultSettings = {
   trad_mode: false,
   chinese_conversion: false,
@@ -97,6 +111,7 @@ let defaultSettings = {
   letter_mode: "upper",
   ctrl_enter_option: 0,
   use_jk_key_to_move_cursor: false,
+  beep_on_error: true,
 };
 let settings = {};
 
@@ -107,6 +122,13 @@ function loadSettings() {
     if (!obj) {
       return defaultSettings;
     }
+
+    for (let key in defaultSettings) {
+      if (!(key in obj)) {
+        obj[key] = defaultSettings[key];
+      }
+    }
+
     return obj;
   } catch (e) {}
   return defaultSettings;
@@ -206,6 +228,10 @@ function applySettings(settings) {
     document.getElementById("jk_key").checked =
       settings.use_jk_key_to_move_cursor;
   }
+  {
+    document.getElementById("beep_on_error").checked =
+      settings.use_jk_key_to_move_cursor;
+  }
   {
     document.getElementById("move_cursor").checked = settings.move_cursor;
     controller.setMoveCursorAfterSelection(settings.move_cursor);
@@ -420,6 +446,13 @@ document.getElementById("ctrl_enter_option").onchange = function (event) {
   document.getElementById("text_area").focus();
 };
 
+document.getElementById("beep_on_error").onchange = function (event) {
+  let value = document.getElementById("beep_on_error").checked;
+  settings.beep_on_error = value;
+  saveSettings(settings);
+  document.getElementById("text_area").focus();
+};
+
 document.getElementById("fullscreen").onclick = function (event) {
   let elem = document.getElementById("edit_area");
   if (elem.requestFullscreen) {

diff --git a/src/McBopomofo/InputController.ts b/src/McBopomofo/InputController.ts
@@ -375,14 +375,16 @@ export class InputController {
       this.state_ instanceof SelectingDateMacro ||
       this.state_ instanceof SelectingDictionary
     ) {
-      this.ui_.reset();
       this.handleCandidateKeyEvent(
         key,
-        (newState) => this.enterNewState(newState),
+        (newState) => {
+          this.enterNewState(newState);
+        },
         () => {
           this.onError_?.();
         }
       );
+
       if (this.state_ instanceof NotEmpty) {
         this.updatePreedit(this.state_);
       } else {
@@ -394,11 +396,14 @@ export class InputController {
     let accepted = this.keyHandler_.handle(
       key,
       this.state_,
-      (newState) => this.enterNewState(newState),
+      (newState) => {
+        this.enterNewState(newState);
+      },
       () => {
         this.onError_?.();
       }
     );
+
     if (this.state_ instanceof NotEmpty) {
       this.updatePreedit(this.state_);
     } else {
@@ -425,7 +430,6 @@ export class InputController {
       let cursor = this.keyHandler_.cursor;
       if (cursor === 0) {
         errorCallback();
-        this.enterNewState(this.state_);
         return;
       }
       let newIndex = cursor - 1;
@@ -442,7 +446,6 @@ export class InputController {
       let max = this.keyHandler_.gridLength;
       if (cursor >= max) {
         errorCallback();
-        this.enterNewState(this.state_);
         return;
       }
       let newIndex = cursor + 1;
@@ -722,12 +725,6 @@ export class InputController {
     let totalPageCount = this.candidateController_.totalPageCount;
     let pageIndex = this.candidateController_.currentPageIndex;
     this.ui_.setPageIndex(pageIndex + 1, totalPageCount);
-
-    if (state instanceof NotEmpty) {
-      this.updatePreedit(state);
-    } else {
-      this.ui_.update();
-    }
   }
 
   private handleMarking(prev: InputState, state: Marking) {