Skip to content

Commit 9811ec0

Browse files
faisalnjsfaisalnjs
authored
v4.5.0, matrix input type, modal improvements
2 parents b59249e + 7e192ef commit 9811ec0

File tree

9 files changed

+338
-27
lines changed

9 files changed

+338
-27
lines changed

‎index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ <h1><span class="code" data-modal-view="settings/code">000</span></h1>
4949
<button aria-selected="true" data-value="input">Text</button>
5050
<button aria-selected="false" data-value="math">Math</button>
5151
<button aria-selected="false" data-value="set">Set</button>
52+
<button aria-selected="false" data-value="matrix">Matrix</button>
5253
<button aria-selected="false" data-value="frq">FRQ</button>
5354
</div>
5455
</div>
@@ -124,6 +125,43 @@ <h1><span class="code" data-modal-view="settings/code">000</span></h1>
124125
<button square data-remove-set-input disabled><i class="bi bi-dash"></i></button>
125126
</div>
126127
</div>
128+
<div data-answer-mode="matrix">
129+
<div class="row">
130+
<div class="button-grid" id="insert-row">
131+
<button data-insert-symbol="0" data-target-input="set-input"></button>
132+
<button data-insert-symbol="1" data-target-input="set-input"></button>
133+
<button data-insert-symbol="2" data-target-input="set-input"></button>
134+
<button data-insert-symbol="3" data-target-input="set-input"></button>
135+
<button data-insert-symbol="4" data-target-input="set-input"></button>
136+
<button data-insert-symbol="5" data-target-input="set-input"></button>
137+
<button data-insert-symbol="6" data-target-input="set-input"></button>
138+
<button data-insert-symbol="7" data-target-input="set-input"></button>
139+
<button data-insert-symbol="8" data-target-input="set-input"></button>
140+
<button data-insert-symbol="9" data-target-input="set-input"></button>
141+
</div>
142+
<button class="icon" data-modal-view="symbols">
143+
<i class="bi bi-three-dots"></i>
144+
</button>
145+
</div>
146+
<div class="input-group" id="matrix">
147+
<div class="row" data-matrix-row="1">
148+
<input type="text" autocomplete="off" id="matrix-column" data-matrix-column="1" />
149+
<input type="text" autocomplete="off" id="matrix-column" data-matrix-column="2" />
150+
</div>
151+
<div class="row" data-matrix-row="2">
152+
<input type="text" autocomplete="off" id="matrix-column" data-matrix-column="1" />
153+
<input type="text" autocomplete="off" id="matrix-column" data-matrix-column="2" />
154+
</div>
155+
</div>
156+
<div class="button-grid">
157+
<button square data-add-matrix-column><i class="bi bi-arrow-90deg-left rotate-right"></i></button>
158+
<button square data-remove-matrix-column><i class="bi bi-x"></i></button>
159+
</div>
160+
<div class="button-grid">
161+
<button square data-add-matrix-row><i class="bi bi-arrow-return-left"></i></button>
162+
<button square data-remove-matrix-row><i class="bi bi-x"></i></button>
163+
</div>
164+
</div>
127165
<div data-answer-mode="frq">
128166
<div class="row">
129167
<div class="button-grid" id="insert-row">

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "virtual-clicker",
33
"private": true,
4-
"version": "4.4.3",
4+
"version": "4.5.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite --host",

‎src/clicker/clicker.js‎

Lines changed: 145 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-inner-declarations */
12
import * as ui from "/src/modules/ui.js";
23
import storage from "/src/modules/storage.js";
34

@@ -134,6 +135,23 @@ try {
134135
break;
135136
};
136137
return values;
138+
} else if (mode === "matrix") {
139+
var matrix = [];
140+
var matrixRows = document.querySelectorAll('#matrix [data-matrix-row]');
141+
matrixRows.forEach(row => {
142+
var matrixRow = [];
143+
row.querySelectorAll('[data-matrix-column]').forEach(input => {
144+
var value = input.value?.trim();
145+
if (value.length > 0) {
146+
matrixRow.push(value);
147+
} else {
148+
matrixRow.push("");
149+
}
150+
});
151+
matrix.push(matrixRow);
152+
});
153+
var matrixString = JSON.stringify(matrix).replaceAll('["', '[').replaceAll('","', ', ').replaceAll('"]', ']');
154+
return matrixString;
137155
} else if (mode === "frq") {
138156
if (part && document.querySelector(`[data-frq-part="${part}"]`)) {
139157
return document.querySelector(`[data-frq-part="${part}"]`).value?.trim();
@@ -211,6 +229,12 @@ try {
211229
} else if (mode === "set") {
212230
setInput.classList.add("attention");
213231
setInput.focus();
232+
} else if (mode === "matrix") {
233+
document.querySelector('#matrix [data-matrix-row]:first-child [data-matrix-column]').classList.add("attention");
234+
document.querySelector('#matrix [data-matrix-row]:first-child [data-matrix-column]').focus();
235+
setTimeout(() => {
236+
document.getElementById("submit-button").disabled = false;
237+
}, 3000);
214238
} else if (mode === "frq") {
215239
if (part) {
216240
if (document.querySelector(`[data-frq-part="${part}"]`).parentElement.nextElementSibling && (document.querySelector(`[data-frq-part="${part}"]`).parentElement.nextElementSibling.classList.contains('part'))) {
@@ -239,6 +263,8 @@ try {
239263
storeClick(storage.get("code"), question, mf.value, "latex");
240264
} else if (mode === "set" && !multipleChoice) {
241265
storeClick(storage.get("code"), question, answer, "array");
266+
} else if (mode === "matrix" && !multipleChoice) {
267+
storeClick(storage.get("code"), question, answer, "matrix");
242268
} else if (mode === "frq" && !multipleChoice) {
243269
storeClick(storage.get("code"), question, answer, "frq");
244270
} else {
@@ -306,6 +332,7 @@ try {
306332
});
307333
}
308334
document.querySelectorAll('[data-answer-mode="set"] .button-grid')[1].style.flexWrap = 'nowrap';
335+
resetMatrix();
309336
frqInput.value = 4;
310337
// Switch input mode (exit multiple choice)
311338
answerMode(mode);
@@ -574,13 +601,18 @@ try {
574601
const button = document.createElement("button");
575602
const latex = item.type === "latex";
576603
const array = item.type === "array";
604+
const matrix = item.type === "matrix";
577605
const frq = item.type === "frq";
578606
if (!latex) {
579607
if (!array) {
580-
if (!frq) {
581-
button.innerHTML = `<p><b>${item.question}.</b> ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}</p>\n<p>${item.answer}</p>`;
608+
if (!matrix) {
609+
if (!frq) {
610+
button.innerHTML = `<p><b>${item.question}.</b> ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}</p>\n<p>${item.answer}</p>`;
611+
} else {
612+
button.innerHTML = `<p><b>${item.question}.</b> ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}</p>\n<p>${item.answer}${(item.question === '1') ? '/9' : ''}</p>`;
613+
}
582614
} else {
583-
button.innerHTML = `<p><b>${item.question}.</b> ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}</p>\n<p>${item.answer}${(item.question === '1') ? '/9' : ''}</p>`;
615+
button.innerHTML = `<p><b>${item.question}.</b> ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}</p>\n<p>${JSON.stringify(JSON.parse(item.answer).map(innerArray => innerArray.map(numString => String(numString)))).replaceAll('["', '[').replaceAll('","', ', ').replaceAll('"]', ']')}</p>`;
584616
}
585617
} else {
586618
button.innerHTML = `<p><b>${item.question}.</b> ${unixToTimeString(item.timestamp)} (${item.code})${item.makeup ? ` (Makeup for ${item.makeup.split(' ')[0]})` : ''}</p>\n<p>${item.answer.slice(1, -1)}</p>`;
@@ -627,6 +659,37 @@ try {
627659
i++;
628660
if (i < item.answer.slice(1, -1).split(', ').length) addSet();
629661
});
662+
} else if (matrix) {
663+
answerMode("matrix");
664+
ui.setButtonSelectValue(document.getElementById("answer-mode-selector"), "matrix");
665+
resetMatrix();
666+
var rows = JSON.parse(item.answer);
667+
if (rows.length != 2) {
668+
if (rows.length === 1) {
669+
removeRow();
670+
} else {
671+
for (let i = 0; i < rows.length - 2; i++) {
672+
addRow();
673+
}
674+
}
675+
}
676+
var columns = rows[0].length;
677+
if (columns != 2) {
678+
if (columns === 1) {
679+
removeColumn();
680+
} else {
681+
for (let i = 0; i < columns - 2; i++) {
682+
addColumn();
683+
}
684+
}
685+
}
686+
var matrixRows = document.querySelectorAll('#matrix [data-matrix-row]');
687+
for (let i = 0; i < rows.length; i++) {
688+
for (let j = 0; j < rows[i].length; j++) {
689+
matrixRows[i].querySelectorAll('[data-matrix-column]')[j].value = rows[i][j];
690+
}
691+
}
692+
matrixRows[matrixRows.length - 1].lastChild.focus();
630693
} else if (frq) {
631694
answerMode("frq");
632695
ui.setButtonSelectValue(document.getElementById("answer-mode-selector"), "frq");
@@ -752,6 +815,8 @@ try {
752815
answerLabel.setAttribute("for", "math-input");
753816
} else if (mode === "set") {
754817
answerLabel.setAttribute("for", "set-input");
818+
} else if (mode === "matrix") {
819+
answerLabel.setAttribute("for", "matrix");
755820
} else if (mode === "frq") {
756821
answerLabel.setAttribute("for", "frq-input");
757822
}
@@ -865,6 +930,83 @@ try {
865930
if (frqParts.length > 4) frqParts[frqParts.length - 1].remove();
866931
if (frqParts.length === 5) document.querySelector("[data-remove-frq-part]").disabled = true;
867932
}
933+
934+
// Add matrix column
935+
if (document.querySelector("[data-add-matrix-column]")) document.querySelector("[data-add-matrix-column]").addEventListener("click", addColumn);
936+
937+
function addColumn() {
938+
var rows = [...document.getElementById('matrix').children];
939+
rows.forEach(row => {
940+
var newColumn = document.createElement('input');
941+
newColumn.setAttribute('type', 'text');
942+
newColumn.setAttribute('autocomplete', 'off');
943+
newColumn.setAttribute('data-matrix-column', row.children.length + 1);
944+
row.appendChild(newColumn);
945+
});
946+
rows[0].lastElementChild.focus();
947+
var columns = document.querySelectorAll('#matrix [data-matrix-row]:first-child [data-matrix-column]');
948+
if (columns.length === 10) document.querySelector("[data-add-matrix-column]").disabled = true;
949+
document.querySelector("[data-remove-matrix-column]").disabled = false;
950+
}
951+
952+
// Remove matrix column
953+
if (document.querySelector("[data-remove-matrix-column]")) document.querySelector("[data-remove-matrix-column]").addEventListener("click", removeColumn);
954+
955+
function removeColumn() {
956+
var rows = [...document.getElementById('matrix').children];
957+
rows.forEach(row => {
958+
var lastColumn = row.lastElementChild;
959+
if (lastColumn) lastColumn.remove();
960+
});
961+
if (rows[0].children.length < 10) document.querySelector("[data-add-matrix-column]").disabled = false;
962+
if (rows[0].children.length === 1) document.querySelector("[data-remove-matrix-column]").disabled = true;
963+
}
964+
965+
// Add matrix row
966+
if (document.querySelector("[data-add-matrix-row]")) document.querySelector("[data-add-matrix-row]").addEventListener("click", addRow);
967+
968+
function addRow() {
969+
var newRow = document.createElement('div');
970+
newRow.classList.add('row');
971+
newRow.setAttribute('data-matrix-row', document.querySelectorAll('[data-matrix-row]').length + 1);
972+
var columns = document.querySelectorAll('[data-matrix-row]:first-child [data-matrix-column]');
973+
columns.forEach(column => {
974+
var newColumn = document.createElement('input');
975+
newColumn.setAttribute('type', 'text');
976+
newColumn.setAttribute('autocomplete', 'off');
977+
newColumn.setAttribute('data-matrix-column', column.getAttribute('data-matrix-column'));
978+
newRow.appendChild(newColumn);
979+
});
980+
document.getElementById('matrix').appendChild(newRow);
981+
newRow.firstElementChild.focus();
982+
var rows = document.querySelectorAll('[data-matrix-row]');
983+
if (rows.length === 10) document.querySelector("[data-add-matrix-row]").disabled = true;
984+
document.querySelector("[data-remove-matrix-row]").disabled = false;
985+
}
986+
987+
// Remove matrix row
988+
if (document.querySelector("[data-remove-matrix-row]")) document.querySelector("[data-remove-matrix-row]").addEventListener("click", removeRow);
989+
990+
function removeRow() {
991+
var rows = document.querySelectorAll('[data-matrix-row]');
992+
if (rows.length > 1) {
993+
var lastRow = rows[rows.length - 1];
994+
lastRow.remove();
995+
if (rows.length < 10) document.querySelector("[data-add-matrix-row]").disabled = false;
996+
if (rows.length === 2) document.querySelector("[data-remove-matrix-row]").disabled = true;
997+
}
998+
}
999+
1000+
function resetMatrix() {
1001+
var matrix = document.getElementById('matrix');
1002+
matrix.innerHTML = '<div class="row" data-matrix-row="1"><input type="text" autocomplete="off" id="matrix-column" data-matrix-column="1" /><input type="text" autocomplete="off" id="matrix-column" data-matrix-column="2" /></div><div class="row" data-matrix-row="2"><input type="text" autocomplete="off" id="matrix-column" data-matrix-column="1" /><input type="text" autocomplete="off" id="matrix-column" data-matrix-column="2" /></div>';
1003+
document.querySelectorAll('[data-answer-mode="matrix"] .button-grid')[1].innerHTML = '<button square data-add-matrix-column tooltip="Add Matrix Column"><i class="bi bi-arrow-90deg-left rotate-right"></i></button><button square data-remove-matrix-column tooltip="Remove Matrix Column"><i class="bi bi-x"></i></button>';
1004+
document.querySelectorAll('[data-answer-mode="matrix"] .button-grid')[2].innerHTML = '<button square data-add-matrix-row tooltip="Add Matrix Row"><i class="bi bi-arrow-return-left"></i></button><button square data-remove-matrix-row tooltip="Remove Matrix Row"><i class="bi bi-x"></i></button>';
1005+
if (document.querySelector("[data-add-matrix-column]")) document.querySelector("[data-add-matrix-column]").addEventListener("click", addColumn);
1006+
if (document.querySelector("[data-remove-matrix-column]")) document.querySelector("[data-remove-matrix-column]").addEventListener("click", removeColumn);
1007+
if (document.querySelector("[data-add-matrix-row]")) document.querySelector("[data-add-matrix-row]").addEventListener("click", addRow);
1008+
if (document.querySelector("[data-remove-matrix-row]")) document.querySelector("[data-remove-matrix-row]").addEventListener("click", removeRow);
1009+
}
8681010
} catch (error) {
8691011
if (storage.get("developer")) {
8701012
alert(`Error @ clicker.js: ${error.message}`);

‎src/design.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -360,6 +360,14 @@ div.ML__keyboard {
360360
transition: box-shadow 100ms ease;
361361
}
362362

363+
.input-group {
364+
display: flex;
365+
flex-direction: column;
366+
justify-content: center;
367+
gap: 0.25rem;
368+
width: -webkit-fill-available;
369+
}
370+
363371
[square] {
364372
width: 2.25em !important;
365373
min-width: 36px;
@@ -463,4 +471,8 @@ div.ML__keyboard {
463471

464472
.fit {
465473
width: fit-content;
474+
}
475+
476+
.rotate-right {
477+
transform: rotate(90deg);
466478
}

‎src/layout.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,11 @@ label {
299299
background-color: transparent;
300300
}
301301

302+
label:has(i) {
303+
flex-direction: row;
304+
gap: 5px;
305+
}
306+
302307
#theme-editor {
303308
display: grid;
304309
grid-template-columns: 1fr 1fr;

‎src/modules/time.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function unixToString(timestamp) {
1616
if (hours == 0) {
1717
hours = 12;
1818
}
19-
return `${month}/${day}${(year != new Date().getFullYear()) ? `/${year}` : ''} ${hours}:${minutes} ${period}`;
19+
return `${hours}:${minutes} ${period} ${month}/${day}${(year != new Date().getFullYear()) ? `/${year}` : ''}`;
2020
}
2121
}
2222

0 commit comments

Comments
 (0)