Merge pull request #56 from Bubobubobubobubo/vim-overhaul

Fix vim bindings not having access to keyboard shortcuts

index.html

@@ -213,11 +213,11 @@
               <!-- Editor mode selection -->
               <div class="flex flex-row space-x-4 justify-center px-2 mx-2">
                 <div class="flex items-center pl-4 border border-gray-200 rounded border-gray-700 w-full">
-                  <input id="bordered-radio-1" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600">
+                  <input id="normal-mode-radio" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600">
                   <label id="normal-mode" for="bordered-radio-1" class="w-full py-4 ml-2 text-sm font-medium text-black">Normal Mode</label>
                 </div>
                 <div class="flex items-center pl-4 border rounded border-gray-700 w-full">
-                  <input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                  <input checked id="vim-mode-radio" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                   <label id="vim-mode" for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Mode</label>
                 </div>
               </div>

src/examples/excerpts.ts

@@ -75,23 +75,20 @@ beat([4, 2, 8].pick() / [2,1].bar()) :: sound('triangle')
   .delay(0.5).delaytime(.75).delayfb(0.25)
   .room(1.5).size(1.9).out()
   `,
-  `// Super gentle computing - Bubobubobubo
+  `// Super gentle computing aka Super-Zapping - Bubobubobubo
 let melody = [30,30,34,35,37].palindrome()
   .beat() + [0, -12].repeatAll(2).beat(2)
 if (flip(8, 75)) {
-  rhythm(.5, 4, 8) :: sound('ST12').n([0,1,2].beat(0.5)).speed(0.5).gain(0.4).out()
+  rhythm(.5, 4, 8) :: sound('ST71').n([5,6,8].beat(0.5)).gain(0.4).out()
-  rhythm(.5, 6, 8) :: sound('ST20').n([0,1,2].beat(0.5) + 20).gain(0.4)
+  beat(.5) :: sound('ST11').note(melody).gain(0.4)
-    .speed(0.25).end(0.1).orbit(2).room(0.5).size(0.5).out()
+    .n($(1)).room(0.5).size(0.5).out()  
-  beat(.5) :: sound('ST01').note(melody).gain(0.4)
-    .n($(1)).speed(0.5).room(0.5).size(0.5).out()  
 } else {
   rhythm(.5, 2, 8) :: sound('ST20')
-    .n([0,1,2].beat(0.5)).speed(0.5).gain(0.4)
+    .n([0,1,2].beat(0.5)).gain(0.4)
-    .end(0.1).out()
+    .end(1).out()
-  beat(.5) :: sound('ST01').note(melody).n($(1)).speed(0.5).gain(0.4).end(0.1).out()  
+  beat(.5) :: sound('ST01').note(melody).n($(1)).gain(0.4).end(1).out()  
-  beat(1) :: sound('ST02').note(melody).n($(1)).speed(0.5).gain(0.4).end(0.1).out() 
+  beat(1) :: sound('ST02').note(melody).n($(1)).gain(0.4).end(1).out() 
-}`,
+}`, `// Race day - Bubobubobubo
-  `// Race day - Bubobubobubo
 bpm(125);
 beat(.5) :: sound('STB6').n(irand(1,10)).gain(1).out()
 rhythm(flip(4) ? 1 : .5, 5, 8) :: sound('kick').out()

src/main.ts

@@ -35,7 +35,7 @@ import { makeStringExtensions } from "./StringExtensions";
 const classMap = {
   h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
   h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
-  h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-700 rounded-lg py-2 px-2 lg:mt-16",
+  h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutoral-700 rounded-lg py-2 px-2 lg:mt-16",
   ul: "text-underline pl-6",
   li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
   p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
@@ -287,9 +287,9 @@ export class Editor {
     });
 
     this.editorExtensions = [
+      this.vimModeCompartment.of(vimPlugin),
       this.withLineNumbers.of(lines),
       this.fontSize.of(fontModif),
-      this.vimModeCompartment.of(vimPlugin),
       this.hoveringCompartment.of(this.settings.tips ? inlineHoveringTips : []),
       editorSetup,
       toposTheme,
@@ -554,12 +554,28 @@ export class Editor {
         "style",
         `font-size: ${this.settings.font_size}px;`
       );
+
+      // Get the right value to update graphical widgets
       this.line_numbers_checkbox.checked = this.settings.line_numbers;
       this.time_position_checkbox.checked = this.settings.time_position;
       this.tips_checkbox.checked = this.settings.tips;
+
+      if (this.settings.vimMode) {
+        let vim = document.getElementById("vim-mode-radio") as HTMLInputElement;
+        let normal = document.getElementById("normal-mode-radio") as HTMLInputElement;
+        vim.checked = true;
+        normal.checked = false;
+      } else {
+        let vim = document.getElementById("vim-mode-radio") as HTMLInputElement;
+        let normal = document.getElementById("normal-mode-radio") as HTMLInputElement;
+        normal.checked = true;
+        vim.checked = false;
+      }
+
       let modal_settings = document.getElementById("modal-settings");
       let editor = document.getElementById("editor");
       modal_settings?.classList.remove("invisible");
+
       editor?.classList.add("invisible");
     });