Suggest new theme from Theme Store, Segment Editor Create/Save and Exit button, add omega, omegacap, and i/j/k-hat symbols

Author: faisalnjs

admin/editor.html

@@ -133,7 +133,10 @@ <h1>Questions</h1>
       </div>
       <button class="space" id="launch-speed-mode">Launch Speed Mode</button>
     </div>
-    <button class="space" id="create-button">Create</button>
+    <div class="input-group row space">
+      <button id="create-button">Create</button>
+      <button id="create-and-exit-button">Create and Exit</button>
+    </div>
   </div>
   <!-- Controls -->
   <div id="controls-container" class="pill">

admin/upload.html

@@ -141,11 +141,6 @@
             flex-direction: column;
         }
 
-        .input-group.row {
-            flex-direction: row;
-            gap: 0.25em;
-        }
-
         .input-group:not(.row),
         .input-group:has(#ai),
         .input-group:has([data-question-number]) {
@@ -187,6 +182,7 @@
 
         #stem.active {
             background: var(--accent-color, dodgerblue);
+            color: var(--accent-text-color, white);
         }
 
         #stem.active i.bi-diagram-3 {

index.html

@@ -211,12 +211,19 @@ <h6 data-question-title hidden></h6>
                 <i class="bi bi-three-dots"></i>
               </button>
             </div>
-            <div id="set-type-selector" data-button-select>
-              <button aria-selected="true" data-value="brackets">&lcub; Brackets &rcub;</button>
-              <button aria-selected="false" data-value="vector">&lt; Vector &gt;</button>
-              <button aria-selected="false" data-value="array">&lbrack; Array &rbrack;</button>
-              <button aria-selected="false" data-value="coordinate">&lpar; Coordinate &rpar;</button>
-              <button aria-selected="false" data-value="product">&lang; Product &rang;</button>
+            <div class="row">
+              <div id="set-type-selector" data-button-select>
+                <button aria-selected="true" data-value="brackets">&lcub; Brackets &rcub;</button>
+                <button aria-selected="false" data-value="vector">&lt; Vector &gt;</button>
+                <button aria-selected="false" data-value="array">&lbrack; Array &rbrack;</button>
+                <button aria-selected="false" data-value="coordinate">&lpar; Coordinate &rpar;</button>
+                <button aria-selected="false" data-value="product">&lang; Product &rang;</button>
+              </div>
+              <div class="button-grid" style="width: fit-content; margin-left: auto;">
+                <button data-insert-symbol="40" data-target-input="set-input"></button>
+                <button data-insert-symbol="41" data-target-input="set-input"></button>
+                <button data-insert-symbol="42" data-target-input="set-input"></button>
+              </div>
             </div>
             <div class="button-grid">
               <input type="text" autocomplete="off" id="set-input" data-set-input="1" />

src/checker/admin.js

@@ -1100,6 +1100,9 @@ try {
   // Save
   document.querySelectorAll("#save-button").forEach(w => w.addEventListener("click", save));
   document.querySelectorAll("#create-button").forEach(w => w.addEventListener("click", createSegment));
+  document.querySelectorAll("#create-and-exit-button").forEach(w => w.addEventListener("click", () => {
+    createSegment(null, true);
+  }));
 
   async function save(event, hideResult) {
     if (!active) return;
@@ -2882,14 +2885,15 @@ try {
     const top = (window.screen.height / 2) - (height / 2);
     const windowFeatures = `width=${width},height=${height},resizable=no,scrollbars=no,status=yes,left=${left},top=${top}`;
     const newWindow = window.open(url, '_blank', windowFeatures);
+    ui.modeless(`<i class="bi bi-window-stack"></i>`, "Speed Mode Started", "Waiting for window to close...", true);
     let uploadSuccessful = false;
     let endingQuestionId = startingQuestionId || null;
     let endingQuestion = startingQuestion || null;
     window.addEventListener('message', (event) => {
       if (event.origin !== (window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : ''))) return;
       if (event.data && (String(event.data) === 'uploadSuccess')) {
         uploadSuccessful = true;
-        init();
+        // init();
       } else if (event.data && String(event.data).includes(';+;')) {
         [endingQuestionId, endingQuestion] = event.data.split(';+;');
       } else if (event.data === 'exitToCourse') {
@@ -3782,7 +3786,7 @@ try {
     ui.reloadUnsavedInputs();
   }
 
-  function createSegment() {
+  function createSegment(event = null, exitToCourse = false) {
     if (!active) return;
     const course = document.getElementById("course-period-input");
     const number = document.getElementById("segment-number-input");
@@ -3802,6 +3806,7 @@ try {
       return name.focus();
     }
     document.querySelector("#create-button").disabled = true;
+    document.querySelector("#create-and-exit-button").disabled = true;
     const question_ids = JSON.stringify(Array.from(document.querySelectorAll('.question')).filter(q => (q.querySelectorAll('input')[1].value.length > 0) && (q.querySelectorAll('input')[1].value != ' ')).map(q => {
       return {
         name: q.querySelectorAll('input')[1].value,
@@ -3847,7 +3852,11 @@ try {
       .then((r) => {
         ui.setUnsavedChanges(false);
         ui.toast(loadedSegmentEditor ? "Segment updated successfully." : "Segment created successfully.", 3000, "success", "bi bi-check-circle-fill");
-        editSegment(null, loadedSegmentEditor ? loadedSegment.id : (r.id || null));
+        if (exitToCourse) {
+          window.location.href = '/admin/';
+        } else {
+          editSegment(null, loadedSegmentEditor ? loadedSegment.id : (r.id || null));
+        }
       })
       .catch((e) => {
         console.error(e);
@@ -3888,6 +3897,7 @@ try {
     document.getElementById("question-list").innerHTML = '';
     JSON.parse(loadedSegment.question_ids).filter((item, index, self) => index === self.findIndex((t) => (t.id === item.id))).forEach(q => addExistingQuestion(q.id));
     document.getElementById("create-button").innerText = "Save";
+    document.getElementById("create-and-exit-button").innerText = "Save and Exit";
     document.querySelector('[data-delete-segment]')?.addEventListener('click', deleteSegmentConfirm);
     document.querySelector('[edit-segment-questions]')?.addEventListener('click', () => {
       if (ui.unsavedChanges) return ui.toast("You have unsaved changes. Please save or discard them before editing questions.", 3000, "error", "bi bi-exclamation-triangle-fill");

src/checker/checker.js

@@ -7,7 +7,7 @@ import Element from "/src/modules/element.js";
 import extendedSchedule from "/src/periods/extendedSchedule.json";
 import * as themes from "/src/themes/themes.js";
 
-import { autocomplete, uniqueSymbols } from "/src/symbols/symbols.js";
+import { autocomplete, uniqueSymbols, insertFromIndex } from "/src/symbols/symbols.js";
 import { unixToString, unixToTimeString } from "/src/modules/time.js";
 import { getExtendedPeriodRange } from "/src/periods/periods";
 import { convertLatexToAsciiMath, convertLatexToMarkup, renderMathInElement } from "mathlive";
@@ -880,12 +880,6 @@ try {
 
     resetInputs();
 
-    if (question.nonscored) {
-      document.querySelector('.column:has(#answer-mode-selector)').setAttribute('hidden', '');
-    } else {
-      document.querySelector('.column:has(#answer-mode-selector)').removeAttribute('hidden');
-    }
-
     const feed = document.getElementById('question-history-feed');
     var latestResponses = history.filter(r => (String(r.segment) === String(segments.value)) && (String(r.question_id) === String(question.id))).sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
     feed.innerHTML = "";

src/design.css

@@ -485,6 +485,11 @@ div.ML__keyboard {
   width: -webkit-fill-available;
 }
 
+.input-group.row {
+  flex-direction: row;
+  gap: 0.25em;
+}
+
 [square] {
   width: 2.25em !important;
   min-width: 36px;

src/layout.css

@@ -268,7 +268,7 @@ body:has(.island.visible) #checker {
   width: fit-content;
   overflow: hidden;
   align-self: center;
-  position: sticky;
+  position: fixed;
   bottom: 25px;
 }
 

src/modules/ui.css

@@ -139,19 +139,19 @@ dialog > button[data-suggestions] {
 }
 
 div.modeless {
-  position: absolute;
+  position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 999;
-
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 1.5rem;
   border-radius: 1rem;
   box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
   pointer-events: none;
+  background: var(--background-color);
 }
 
 div.modeless > h2 {
@@ -1099,6 +1099,26 @@ body:has(.topbar) #checker.horizontal .column:last-child {
   transition: border-right-width 0.25s ease-in-out;
 }
 
+[data-modal-page="store"] .themes-grid .theme-item.suggest-theme {
+  border: 2px dashed var(--accent-color) !important;
+  background: transparent !important;
+  cursor: pointer;
+  transition: background-color 0.25s ease-in-out;
+}
+
+[data-modal-page="store"] .themes-grid .theme-item.suggest-theme:hover {
+  background: var(--surface-color) !important;
+  transition: background-color 0.25s ease-in-out;
+}
+
+[data-modal-page="store"] .themes-grid .theme-item.suggest-theme i {
+  position: relative !important;
+  margin: auto;
+  padding: 0;
+  top: 0;
+  left: 0;
+}
+
 [data-modal-page="store"] .themes-grid .theme-item i:not(.hd) {
   position: absolute;
   bottom: 10px;

src/modules/ui.js

@@ -435,7 +435,7 @@ export function view(path = "") {
   target.dispatchEvent(event);
 }
 
-export function modeless(icon, message, description = null) {
+export function modeless(icon, message, description = null, stayOpen = false) {
   document.querySelector("div.modeless")?.remove();
   const element = document.createElement("div");
   const keyframes = [{ opacity: 0 }, { opacity: 1 }];
@@ -448,7 +448,7 @@ export function modeless(icon, message, description = null) {
     duration: 100,
     fill: "forwards",
   });
-  setTimeout(() => {
+  if (!stayOpen) setTimeout(() => {
     element.animate(keyframes, {
       duration: 100,
       direction: "reverse",

src/symbols/symbols.json

@@ -36,5 +36,10 @@
   "mu": "μ",
   "lambda": "λ",
   "gamma": "γ",
-  "kappa": "κ"
+  "kappa": "κ",
+  "omega": "ω",
+  "omegacap": "Ω",
+  "ihat": "î",
+  "jhat": "ĵ",
+  "khat": "k̂"
 }