Skip to content

Commit

Permalink
Render all mod types
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesmaa
jamesmaa committed Oct 16, 2024
1 parent 4c10eab commit a0ac41b
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 18 deletions.
19 changes: 19 additions & 0 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -694,6 +694,25 @@
}
}]
}
},
{
"files": [
"ext/data/recommended-settings.json"
],
"rules": {
"jsonc/sort-keys": ["error", {
"pathPattern": ".*",
"order": [
"modification",
"description"
]
}, {
"pathPattern": ".*",
"order": {
"type": "asc"
}
}]
}
}
]
}
26 changes: 22 additions & 4 deletions ext/data/recommended-settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
"path": "scanning.scanResolution",
"value": "word"
},
"description": "English uses spaces to separate words so scanning by word (instead of character) is recommended."
"description": "Scan text one word at a time (as opposed to one character)."
},
{
"modification": {
"action": "set",
"path": "translation.searchResolution",
"value": "word"
},
"description": "English uses spaces to separate words so looking up whole words in the dictionary is recommended."
"description": "Lookup whole words in the dictionary."
}
],
"es": [
Expand All @@ -24,15 +24,33 @@
"path": "scanning.scanResolution",
"value": "word"
},
"description": "Spanish uses spaces to separate words so scanning by word (instead of character) is recommended."
"description": "Scan text one word at a time (as opposed to one character)."
},
{
"modification": {
"action": "set",
"path": "translation.searchResolution",
"value": "word"
},
"description": "Spanish uses spaces to separate words so looking up whole words in the dictionary is recommended."
"description": "Lookup whole words in the dictionary."
}
],
"fr": [
{
"modification": {
"action": "set",
"path": "scanning.scanResolution",
"value": "word"
},
"description": "Scan text one word at a time (as opposed to one character)."
},
{
"modification": {
"action": "set",
"path": "translation.searchResolution",
"value": "word"
},
"description": "Lookup whole words in the dictionary."
}
]
}
98 changes: 84 additions & 14 deletions ext/js/pages/settings/recommended-settings-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/

import {log} from '../../core/log.js';
import {querySelectorNotNull} from '../../dom/query-selector.js';

export class RecommendedSettingsController {
Expand All @@ -30,6 +31,8 @@ export class RecommendedSettingsController {
this._languageSelect = querySelectorNotNull(document, '#language-select');
/** @type {HTMLInputElement} */
this._applyButton = querySelectorNotNull(document, '#recommended-settings-apply-button');
/** @type {Map<string, import('settings-controller').RecommendedSetting>} */
this._recommendedSettings = new Map();
}

/** */
Expand All @@ -49,18 +52,16 @@ export class RecommendedSettingsController {
if (typeof recommendedSettings !== 'undefined') {
const settingsList = querySelectorNotNull(document, '#recommended-settings-list');
settingsList.innerHTML = '';
for (const {path, value, description} of recommendedSettings) {
this._recommendedSettings = new Map();

for (const [index, setting] of recommendedSettings.entries()) {
this._recommendedSettings.set(index.toString(), setting);

const {description} = setting;
const template = this._settingsController.instantiateTemplate('recommended-settings-list-item');

// Render label
const label = querySelectorNotNull(template, '.settings-item-label');
const pathCodeElement = document.createElement('code');
pathCodeElement.textContent = path;
const valueCodeElement = document.createElement('code');
valueCodeElement.textContent = value;
label.appendChild(pathCodeElement);
label.appendChild(document.createTextNode(' -> '));
label.appendChild(valueCodeElement);
this._renderLabel(template, setting);

// Render description
const descriptionElement = querySelectorNotNull(template, '.settings-item-description');
Expand All @@ -70,7 +71,7 @@ export class RecommendedSettingsController {

// Render checkbox
const checkbox = /** @type {HTMLInputElement} */ (querySelectorNotNull(template, 'input[type="checkbox"]'));
checkbox.value = path;
checkbox.value = index.toString();

settingsList.append(template);
}
Expand All @@ -86,16 +87,85 @@ export class RecommendedSettingsController {
/** @type {NodeListOf<HTMLInputElement>} */
const enabledCheckboxes = querySelectorNotNull(document, '#recommended-settings-list').querySelectorAll('input[type="checkbox"]:checked');
if (enabledCheckboxes.length > 0) {
const recommendedSettings = this._settingsController.getRecommendedSettings(this._languageSelect.value);
const modifications = [];
for (const checkbox of enabledCheckboxes) {
const path = checkbox.value;
const {action, value} = recommendedSettings.find((setting) => setting.path === path);
modifications.push({action, path, value});
const index = checkbox.value;
const setting = this._recommendedSettings.get(index);
if (typeof setting === 'undefined') { continue; }
modifications.push(setting.modification);
}
void this._settingsController.modifyProfileSettings(modifications);
void this._settingsController.refresh();
}
this._recommendedSettingsModal.hidden = true;
}

/**
* @param {Element} template
* @param {import('settings-controller').RecommendedSetting} setting
*/
_renderLabel(template, setting) {
const label = querySelectorNotNull(template, '.settings-item-label');

const {modification} = setting;
switch (modification.action) {
case 'set': {
const {path, value} = modification;
const pathCodeElement = document.createElement('code');
pathCodeElement.textContent = path;
const valueCodeElement = document.createElement('code');
valueCodeElement.textContent = String(value);

label.appendChild(document.createTextNode('Setting '));
label.appendChild(pathCodeElement);
label.appendChild(document.createTextNode(' = '));
label.appendChild(valueCodeElement);
break;
}
case 'delete': {
const {path} = modification;
const pathCodeElement = document.createElement('code');
pathCodeElement.textContent = path;

label.appendChild(document.createTextNode('Deleting '));
label.appendChild(pathCodeElement);
break;
}
case 'swap': {
const {path1, path2} = modification;
const path1CodeElement = document.createElement('code');
path1CodeElement.textContent = path1;
const path2CodeElement = document.createElement('code');
path2CodeElement.textContent = path2;

label.appendChild(document.createTextNode('Swapping '));
label.appendChild(path1CodeElement);
label.appendChild(document.createTextNode(' and '));
label.appendChild(path2CodeElement);
break;
}
case 'splice': {
const {path, start, deleteCount, items} = modification;
const pathCodeElement = document.createElement('code');
pathCodeElement.textContent = path;

label.appendChild(document.createTextNode('Splicing '));
label.appendChild(pathCodeElement);
label.appendChild(document.createTextNode(` at ${start} deleting ${deleteCount} items and inserting ${items.length} items`));
break;
}
case 'push': {
const {path, items} = modification;
const pathCodeElement = document.createElement('code');
pathCodeElement.textContent = path;

label.appendChild(document.createTextNode(`Pushing ${items.length} items to `));
label.appendChild(pathCodeElement);
break;
}
default: {
log.error(new Error(`Unknown modification: ${modification}`));
}
}
}
}
19 changes: 19 additions & 0 deletions ext/templates-settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -477,4 +477,23 @@
<button type="button" class="popup-menu-item" data-menu-action="remove">Remove</button>
</div></div></div></template>

<!-- Recommended Settings -->
<template id="recommended-settings-list-item-template">
<div class="settings-item">
<div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label"></div>
<div class="settings-item-description"></div>
</div>
<div class="settings-item-right">
<label class="recommended-settings-checkbox-item flex-row-nowrap flex-label">
<label class="checkbox">
<input type="checkbox" class="recommended-settings-checkbox" checked><span class="checkbox-body"><span class="checkbox-fill"></span><span class="checkbox-border"></span><span class="checkbox-check"></span></span>
</label>
</label>
</div>
</div>
</div>
</template>

</body></html>

0 comments on commit a0ac41b

Please sign in to comment.