Skip to content

Commit

Permalink
move edit alias to kebab menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@khaitruong922
khaitruong922 committed Jul 30, 2024
1 parent ec1c1c3 commit f457ff3
Show file tree
Hide file tree
Showing 7 changed files with 100 additions and 64 deletions.
4 changes: 4 additions & 0 deletions ext/css/settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2404,6 +2404,10 @@ input[type=number].dictionary-priority {
overflow: auto;
}

#dictionary-alias-input {
width: 100%;
}

#dictionary-move-up>span.icon-button-inner,
#dictionary-move-down>span.icon-button-inner {
width: 26px;
Expand Down
39 changes: 4 additions & 35 deletions ext/js/dom/dom-data-binder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ export class DOMDataBinder {
const metadata = this._createElementMetadata(element);
if (typeof metadata === 'undefined') { return void 0; }
const type = this._getNormalizedElementType(element);
const eventType = this._getElementEventType(element);
const eventType = 'change';
/** @type {import('dom-data-binder').ElementObserver<T>} */
const observer = {
element,
Expand Down Expand Up @@ -212,13 +212,6 @@ export class DOMDataBinder {
if (!observer.hasValue) {
return;
}
// When contenteditable is made empty or inputted from empty,
// the value is reset back to original state
// because there is a removal / addition of text node.
// This is a workaround to prevent the value from being reset back when typing.
if (this._isElementContentEditable(element)) {
return;
}
this._setElementValue(element, observer.value);
}

Expand Down Expand Up @@ -249,7 +242,7 @@ export class DOMDataBinder {
case 'select':
/** @type {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} */ (element).value = typeof value === 'string' ? value : `${value}`;
break;
case 'contenteditable':
case 'element':
element.textContent = typeof value === 'string' ? value : `${value}`;
break;
}
Expand Down Expand Up @@ -287,32 +280,16 @@ export class DOMDataBinder {
return /** @type {HTMLTextAreaElement} */ (element).value;
case 'select':
return /** @type {HTMLSelectElement} */ (element).value;
case 'contenteditable':
case 'element':
return element.textContent;
}
return null;
}


/**
* @param {Element} element
* @returns {import('dom-data-binder').EventType}
*/
_getElementEventType(element) {
if (this._isElementContentEditable(element)) {
return 'blur';
}
return 'change';
}

/**
* @param {Element} element
* @returns {import('dom-data-binder').NormalizedElementType}
*/
_getNormalizedElementType(element) {
if (this._isElementContentEditable(element)) {
return 'contenteditable';
}
switch (element.nodeName.toUpperCase()) {
case 'INPUT':
{
Expand All @@ -332,14 +309,6 @@ export class DOMDataBinder {
case 'SELECT':
return 'select';
}
return null;
}

/**
* @param {Element} element
* @returns {boolean}
*/
_isElementContentEditable(element) {
return element instanceof HTMLElement && element.isContentEditable;
return 'element';
}
}
82 changes: 57 additions & 25 deletions ext/js/pages/settings/dictionary-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,6 @@ class DictionaryEntry {
this._outdatedButton.hidden = (version >= 3);
this._priorityInput.dataset.setting = `dictionaries[${index}].priority`;
this._enabledCheckbox.dataset.setting = `dictionaries[${index}].enabled`;
this._eventListeners.addEventListener(this._aliasNode, 'blur', this._onAliasBlur.bind(this), false);
this._eventListeners.addEventListener(this._aliasNode, 'keydown', this._onAliasKeyDown.bind(this), false);
this._eventListeners.addEventListener(this._enabledCheckbox, 'settingChanged', this._onEnabledChanged.bind(this), false);
this._eventListeners.addEventListener(this._menuButton, 'menuOpen', this._onMenuOpen.bind(this), false);
this._eventListeners.addEventListener(this._menuButton, 'menuClose', this._onMenuClose.bind(this), false);
Expand Down Expand Up @@ -179,29 +177,9 @@ class DictionaryEntry {
case 'moveTo':
this._showMoveToModal();
break;
}
}

/**
*
*/
_onAliasBlur() {
let newAlias = (this._aliasNode.textContent ?? '').trim()
if (!newAlias) {
newAlias = this.dictionaryTitle;
}
this._aliasNode.textContent = newAlias;
}

/**
* @param {KeyboardEvent} e
*/
_onAliasKeyDown(e) {
// if enter then blur
const {code, key} = e;
if (code === 'Enter' || key === 'Enter' || code === 'NumpadEnter') {
e.preventDefault();
this._aliasNode.blur();
case 'setAlias':
this._showSetAliasModal();
break;
}
}

Expand Down Expand Up @@ -369,6 +347,23 @@ class DictionaryEntry {

modal.setVisible(true);
}

/** */
_showSetAliasModal() {
const {title} = this._dictionaryInfo;
const modal = this._dictionaryController.modalController.getModal('dictionary-set-alias');
if (modal === null) { return; }
/** @type {HTMLInputElement} */
const input = querySelectorNotNull(modal.node, '#dictionary-alias-input');
/** @type {HTMLElement} */
const titleNode = querySelectorNotNull(modal.node, '.dictionary-title');

modal.node.dataset.index = `${this._index}`;
titleNode.textContent = title;
input.value = this._aliasNode.textContent || title;

modal.setVisible(true);
}
}

class DictionaryExtraInfo {
Expand Down Expand Up @@ -528,13 +523,22 @@ export class DictionaryController {
/** @type {HTMLButtonElement} */
const dictionaryMoveButton = querySelectorNotNull(document, '#dictionary-move-button');

/** @type {HTMLButtonElement} */
const dictiontaryResetAliasButton = querySelectorNotNull(document, '#dictionary-reset-alias-button');
/** @type {HTMLButtonElement} */
const dictionarySetAliasButton = querySelectorNotNull(document, '#dictionary-set-alias-button');

this._settingsController.application.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
this._allCheckbox.addEventListener('change', this._onAllCheckboxChange.bind(this), false);
dictionaryDeleteButton.addEventListener('click', this._onDictionaryConfirmDelete.bind(this), false);
dictionaryUpdateButton.addEventListener('click', this._onDictionaryConfirmUpdate.bind(this), false);

dictionaryMoveButton.addEventListener('click', this._onDictionaryMoveButtonClick.bind(this), false);

dictionarySetAliasButton.addEventListener('click', this._onDictionarySetAliasButtonClick.bind(this), false);
dictiontaryResetAliasButton.addEventListener('click', this._onDictionaryResetAliasButtonClick.bind(this), false);

if (this._checkUpdatesButton !== null) {
this._checkUpdatesButton.addEventListener('click', this._onCheckUpdatesButtonClick.bind(this), false);
}
Expand Down Expand Up @@ -890,6 +894,34 @@ export class DictionaryController {
void this.moveDictionaryOptions(indexNumber, target);
}

/** */
_onDictionaryResetAliasButtonClick() {
const modal = /** @type {import('./modal.js').Modal} */ (this._modalController.getModal('dictionary-set-alias'));
const index = modal.node.dataset.index ?? '';
const indexNumber = Number.parseInt(index, 10);
if (Number.isNaN(indexNumber)) { return; }

/** @type {HTMLInputElement} */
const input = querySelectorNotNull(modal.node, '#dictionary-alias-input');
input.value = this._dictionaryEntries[indexNumber].dictionaryTitle;
}

/** */
_onDictionarySetAliasButtonClick() {
const modal = /** @type {import('./modal.js').Modal} */ (this._modalController.getModal('dictionary-set-alias'));
const index = modal.node.dataset.index ?? '';
const indexNumber = Number.parseInt(index, 10);
if (Number.isNaN(indexNumber)) { return; }

/** @type {HTMLInputElement} */
const input = querySelectorNotNull(modal.node, '#dictionary-alias-input');
const inputValue = input.value.trim();
if (!inputValue) return;

Check failure on line 919 in ext/js/pages/settings/dictionary-controller.js

View workflow job for this annotation

GitHub Actions / Static Analysis 

Expected { after 'if' condition
const aliasNode = this._dictionaryEntries[indexNumber]._aliasNode;

Check failure on line 920 in ext/js/pages/settings/dictionary-controller.js

View workflow job for this annotation

GitHub Actions / Static Analysis 

Unexpected dangling '_' in '_aliasNode'
aliasNode.textContent = inputValue;
aliasNode.dispatchEvent(new Event('change', {bubbles: true}));
}

/**
* @param {import('dictionary-importer').Summary[]} dictionaries
*/
Expand Down
15 changes: 15 additions & 0 deletions ext/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2820,6 +2820,21 @@ <h5>or click here to upload</h5>
</div>
</div></div>

<div id="dictionary-set-alias-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Set Alias</div></div>
<div class="modal-body">
<p>Input the alias for <strong class="dictionary-title"></strong> dictionary:</p>
<div class="margin-above">
<input type="text" id="dictionary-alias-input">
</div>
</div>
<div class="modal-footer">
<button type="button" class="low-emphasis" id="dictionary-reset-alias-button">Reset</button>
<button type="button" class="low-emphasis" data-modal-action="hide">Cancel</button>
<button type="button" data-modal-action="hide" id="dictionary-set-alias-button">Save</button>
</div>
</div></div>


<!-- Custom CSS modal -->
<div id="custom-css-modal" class="modal modal-left" tabindex="-1" role="dialog" hidden>
Expand Down
3 changes: 2 additions & 1 deletion ext/templates-settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
<label class="toggle dictionary-item-enabled-toggle-container"><input type="checkbox" class="dictionary-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
<div class="dictionary-item-title-container">
<span>
<strong contenteditable="true" spellcheck="false" class="dictionary-title dictionary-alias"></strong> <span class="light dictionary-revision"></span>
<strong class="dictionary-title dictionary-alias"></strong> <span class="light dictionary-revision"></span>
</span>
<button type="button" class="dictionary-outdated-button" hidden>
<div class="badge warning-badge"><span class="icon" data-icon="exclamation-point-short"></span></div>
Expand Down Expand Up @@ -97,6 +97,7 @@
</template>
<template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
<button type="button" class="popup-menu-item" data-menu-action="showDetails">Details&hellip;</button>
<button type="button" class="popup-menu-item" data-menu-action="setAlias">Set alias&hellip;</button>
<button type="button" class="popup-menu-item" data-menu-action="moveTo">Move to&hellip;</button>
<button type="button" class="popup-menu-item" data-menu-action="delete">Delete</button>
</div></div></div></template>
Expand Down
15 changes: 15 additions & 0 deletions ext/welcome.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -470,6 +470,21 @@ <h5>or click here to upload</h5>
</div>
</div></div>

<div id="dictionary-set-alias-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
<div class="modal-header"><div class="modal-title">Set Alias</div></div>
<div class="modal-body">
<p>Input the alias for <strong class="dictionary-title"></strong> dictionary:</p>
<div class="margin-above">
<input type="text" id="dictionary-alias-input">
</div>
</div>
<div class="modal-footer">
<button type="button" class="low-emphasis" id="dictionary-reset-alias-button">Reset</button>
<button type="button" class="low-emphasis" data-modal-action="hide">Cancel</button>
<button type="button" data-modal-action="hide" id="dictionary-set-alias-button">Save</button>
</div>
</div></div>

<!-- Recommended dictionary modals -->
<div id="recommended-dictionaries-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
<div class="modal-header">
Expand Down
6 changes: 3 additions & 3 deletions types/ext/dom-data-binder.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export type ElementObserver<T = unknown> = {
type: NormalizedElementType;
value: unknown;
hasValue: boolean;
eventType: string;
eventType: EventType;
onChange: null | (() => void);
metadata: T;
};
Expand All @@ -54,9 +54,9 @@ export type SettingChangedEventData = {

export type SettingChangedEvent = CustomEvent<SettingChangedEventData>;

export type NormalizedElementType = 'textarea' | 'select' | 'text' | 'checkbox' | 'number' | 'contenteditable' | null;
export type NormalizedElementType = 'textarea' | 'select' | 'text' | 'checkbox' | 'number' | 'element';

export type EventType = 'change' | 'blur';
export type EventType = 'change';

export type UpdateTaskValue = {all: boolean};

Expand Down

0 comments on commit f457ff3

Please sign in to comment.