Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@StefanVukovic99
StefanVukovic99 committed Aug 21, 2024
1 parent 9091d74 commit 06f9b5e
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 70 deletions.
47 changes: 17 additions & 30 deletions ext/css/settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2299,29 +2299,31 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] {
/* Dictionary settings */
.dictionary-list {
width: 100%;
display: flex;
flex-direction: column;
margin-top: 0.5em;
}

.dictionary-item {
display: grid;
grid-template-columns: auto auto 1fr auto auto auto auto;
grid-template-rows: auto;
place-items: center start;
margin-top: 0.5em;
--dictionary-item-index-margin: 0.5em;
--dictionary-item-index-width: 1.2em;
}
:root:not([data-advanced=true]) .dictionary-list {
grid-template-columns: auto auto 1fr auto auto auto;
.dictionary-item.dragging {
opacity: 0.5;
}
.dictionary-list-index {
margin-right: 0.5em;
}
.dictionary-list[data-count='0']>.dictionary-item-top {
display: none;
margin-right: var(--dictionary-item-index-margin);
}
.dictionary-item-button-height {
height: var(--icon-button-size);
}
.dictionary-item {
display: flex;
flex-flow: row nowrap;
align-items: center;
border-top: var(--thin-border-size) solid var(--separator-color2);
.dictionary-item .generic-list-index-prefix::after {
display: block;
width: var(--dictionary-item-index-width);
}
.dictionary-item-enabled-toggle-container {
margin-right: 0.5em;
Expand All @@ -2338,13 +2340,10 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] {
color: inherit;
transition: color var(--animation-duration) ease-in-out;
}
.dictionary-item[data-enabled=false] .dictionary-title {
color: var(--text-color-light2);
}
input[type=number].dictionary-priority {
margin-top: 0;
margin-right: 0.5em;
.dictionary-item.top {
padding-left: calc(var(--dictionary-item-index-width) + var(--dictionary-item-index-margin));
}

.dictionary-outdated-button,
.dictionary-update-available,
.dictionary-integrity-button {
Expand Down Expand Up @@ -2408,10 +2407,6 @@ input[type=number].dictionary-priority {
width: 100%;
}

#dictionary-move-up>span.icon-button-inner,
#dictionary-move-down>span.icon-button-inner {
width: 26px;
}

/* Secondary search dictionary settings */
.secondary-search-dictionary-list {
Expand Down Expand Up @@ -2663,14 +2658,6 @@ input[type=number].dictionary-priority {

/* Mobile overrides */

/* Treat devices that can't hover as mobile devices */
@media (hover: none) {
#dictionary-move-up>span.icon-button-inner,
#dictionary-move-down>span.icon-button-inner {
width: 36px;
}
}

/* Dark mode before themes are applied
DO NOT use this for normal theming */
@media (prefers-color-scheme: dark) {
Expand Down
90 changes: 81 additions & 9 deletions ext/js/pages/settings/dictionary-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,24 @@ import {querySelectorNotNull} from '../../dom/query-selector.js';

const ajvSchemas = /** @type {import('dictionary-importer').CompiledSchemaValidators} */ (/** @type {unknown} */ (ajvSchemas0));

/**
* Throttles a function to be called at most once per `wait` milliseconds.
* @param {Function} func The function to be throttled.
* @param {number} wait The minimum time (in milliseconds) to wait between function calls.
* @param {unknown} self The value to be passed as the `this` parameter to the throttled function.
* @returns {(this: unknown, ...args: any[]) => void} The throttled function.
*/
function throttle(func, wait, self) {
let lastCall = 0;
return (...args) => {
const now = Date.now();
if (now - lastCall >= wait) {
lastCall = now;
return func.apply(self, args);
}
};
}

class DictionaryEntry {
/**
* @param {DictionaryController} dictionaryController
Expand All @@ -46,14 +64,10 @@ class DictionaryEntry {
this._counts = null;
/** @type {ChildNode[]} */
this._nodes = [...fragment.childNodes];
/** @type {HTMLElement} */
this._dictionaryItem = querySelectorNotNull(fragment, '.dictionary-item');
/** @type {HTMLInputElement} */
this._enabledCheckbox = querySelectorNotNull(fragment, '.dictionary-enabled');
/** @type {HTMLInputElement} */
this._priorityInput = querySelectorNotNull(fragment, '.dictionary-priority');
/** @type {HTMLButtonElement} */
this._upButton = querySelectorNotNull(fragment, '#dictionary-move-up');
/** @type {HTMLButtonElement} */
this._downButton = querySelectorNotNull(fragment, '#dictionary-move-down');
/** @type {HTMLButtonElement} */
this._menuButton = querySelectorNotNull(fragment, '.dictionary-menu-button');
/** @type {HTMLButtonElement} */
Expand All @@ -75,6 +89,11 @@ class DictionaryEntry {
return this._dictionaryInfo.title;
}

/** @type {HTMLElement} */
get dictionaryItem() {
return this._dictionaryItem;
}

/** */
prepare() {
//
Expand All @@ -84,16 +103,15 @@ class DictionaryEntry {
this._aliasNode.dataset.setting = `dictionaries[${index}].alias`;
this._versionNode.textContent = `rev.${revision}`;
this._outdatedButton.hidden = (version >= 3);
this._priorityInput.dataset.setting = `dictionaries[${index}].priority`;
this._enabledCheckbox.dataset.setting = `dictionaries[${index}].enabled`;
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);
this._eventListeners.addEventListener(this._upButton, 'click', (() => { this._move(-1); }).bind(this), false);
this._eventListeners.addEventListener(this._downButton, 'click', (() => { this._move(1); }).bind(this), false);
this._eventListeners.addEventListener(this._outdatedButton, 'click', this._onOutdatedButtonClick.bind(this), false);
this._eventListeners.addEventListener(this._integrityButton, 'click', this._onIntegrityButtonClick.bind(this), false);
this._eventListeners.addEventListener(this._updatesAvailable, 'click', this._onUpdateButtonClick.bind(this), false);
this._eventListeners.addEventListener(this._dictionaryItem, 'dragstart', this._onDragStart.bind(this), false);
this._eventListeners.addEventListener(this._dictionaryItem, 'dragend', this._onDragEnd.bind(this), false);
}

/** */
Expand Down Expand Up @@ -211,6 +229,16 @@ class DictionaryEntry {
this._dictionaryController.updateDictionary(this.dictionaryTitle, downloadUrl);
}

/** */
_onDragStart() {
this._dictionaryItem.classList.add('dragging');
}

/** */
_onDragEnd() {
this._dictionaryItem.classList.remove('dragging');
}

/** */
_onIntegrityButtonClick() {
this._showDetails();
Expand Down Expand Up @@ -547,6 +575,10 @@ export class DictionaryController {
dictionarySetAliasButton.addEventListener('click', this._onDictionarySetAliasButtonClick.bind(this), false);
dictiontaryResetAliasButton.addEventListener('click', this._onDictionaryResetAliasButtonClick.bind(this), false);

this._onDragOverThrottled = throttle(this._onDragOver.bind(this), 100, this);

this._dictionaryEntryContainer.addEventListener('dragover', this._onDragOver.bind(this), false);

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

/**
* @param {DragEvent} e
*/
_onDragOver(e) {
const draggingIndex = this._dictionaryEntries.findIndex((entry) => entry.dictionaryItem.classList.contains('dragging'));
if (draggingIndex === -1) { return; }
const draggingItem = this._dictionaryEntries[draggingIndex].dictionaryItem;
const nextDictionaryIndex = this._getDragOverDictionaryItem(draggingIndex, e.clientY);
if (nextDictionaryIndex === draggingIndex) { return; }
if (nextDictionaryIndex === null) {
this._dictionaryEntryContainer.appendChild(draggingItem);
return;
}
const nextDictionaryItem = this._dictionaryEntries[nextDictionaryIndex].dictionaryItem;
this._dictionaryEntryContainer.insertBefore(draggingItem, nextDictionaryItem);
}

/**
* @param {number} draggingIndex
* @param {number} y
* @returns {number|null}
*/
_getDragOverDictionaryItem(draggingIndex, y) {
const neighbors = [draggingIndex - 1, draggingIndex + 1]
.filter((index) => index >= 0 && index < this._dictionaryEntries.length);

/** @type {{index: number|null, offset: number}} */
const currentBest = {index: null, offset: Number.NEGATIVE_INFINITY};
for (const index of neighbors) {
const item = this._dictionaryEntries[index].dictionaryItem;
const {top, height} = item.getBoundingClientRect();
const offset = y - (top + height / 2);
if (offset < 0 && offset > currentBest.offset) {
currentBest.index = index;
currentBest.offset = offset;
}
}
return currentBest.index;
}

/** */
_onDictionaryResetAliasButtonClick() {
const modal = /** @type {import('./modal.js').Modal} */ (this._modalController.getModal('dictionary-set-alias'));
Expand Down
15 changes: 6 additions & 9 deletions ext/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2500,16 +2500,13 @@ <h1>Yomitan Settings</h1>
</div>
<div id="dictionary-error" class="danger-text margin-above" hidden></div>
<div id="dictionary-list" class="dictionary-list generic-list" data-count="0">
<div class="dictionary-item-top"></div>
<label class="dictionary-item-top toggle dictionary-item-enabled-toggle-container"><input type="checkbox" id="all-dictionaries-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
<div class="dictionary-item-top dictionary-item-title-container">All</div>
<div class="dictionary-item-top advanced-only">Priority</div>
<div class="dictionary-item-top dictionary-item-button-height"></div>
<div class="dictionary-item-top dictionary-item-button-height"></div>
<div class="dictionary-item-top dictionary-item-button-height"></div>
<div class="dictionary-item top">
<label class="toggle dictionary-item-enabled-toggle-container"><input type="checkbox" id="all-dictionaries-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
<div class="dictionary-item-title-container">All</div>
<div class="dictionary-item-button-height"></div>
</div>
</div>

<div hidden><input type="file" id="dictionary-import-file-input" accept=".zip,application/zip" multiple></div>
<div hidden><input type="file" id="dictionary-import-file-input" accept=".zip,application/zip" multiple></div>
</div>
<div class="modal-body-addon dictionary-delete-progress" hidden>
<div class="progress-labels"><div class="progress-info"></div><div class="progress-status"></div></div>
Expand Down
37 changes: 18 additions & 19 deletions ext/templates-settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,26 +48,25 @@

<!-- Dictionary -->
<template id="dictionary-template">
<div class="dictionary-list-index generic-list-index-prefix"></div>
<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 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>
</button>
<button type="button" class="dictionary-integrity-button" hidden>
<div class="badge info-badge badge-small-icon"><span class="icon" data-icon="checkmark"></span></div>
</button>
<button type="button" class="dictionary-update-available" hidden>
<div class="badge info-badge badge-small-icon"><span class="icon" data-icon="exclamation-point-short" title="Update available"></span></div>
</button>
<div class="dictionary-item" draggable="true">
<div class="dictionary-list-index generic-list-index-prefix"></div>
<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 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>
</button>
<button type="button" class="dictionary-integrity-button" hidden>
<div class="badge info-badge badge-small-icon"><span class="icon" data-icon="checkmark"></span></div>
</button>
<button type="button" class="dictionary-update-available" hidden>
<div class="badge info-badge badge-small-icon"><span class="icon" data-icon="exclamation-point-short" title="Update available"></span></div>
</button>
</div>
<button type="button" class="icon-button dictionary-menu-button" data-menu="dictionary-menu" data-menu-position="below left"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button>
</div>
<input type="number" step="1" class="short-height dictionary-priority advanced-only">
<button type="button" class="icon-button" id="dictionary-move-up" data-menu-action="moveUp"><span class="icon-button-inner"><span class="icon" data-icon="up-chevron"></span></span></button>
<button type="button" class="icon-button" id="dictionary-move-down" data-menu-action="moveDown"><span class="icon-button-inner"><span class="icon" data-icon="down-chevron"></span></span></button>
<button type="button" class="icon-button dictionary-menu-button" data-menu="dictionary-menu" data-menu-position="below left"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button>
</template>
<template id="dictionary-details-entry-template"><div class="dictionary-details-entry">
<span class="dictionary-details-entry-label"></span>
Expand Down
3 changes: 0 additions & 3 deletions ext/welcome.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,9 +248,6 @@ <h2>Basic customization</h2>
<div class="dictionary-item-top"></div>
<label class="dictionary-item-top toggle dictionary-item-enabled-toggle-container"><input type="checkbox" id="all-dictionaries-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
<div class="dictionary-item-top dictionary-item-title-container">All</div>
<div class="dictionary-item-top advanced-only">Priority</div>
<div class="dictionary-item-top dictionary-item-button-height"></div>
<div class="dictionary-item-top dictionary-item-button-height"></div>
<div class="dictionary-item-top dictionary-item-button-height"></div>
</div>

Expand Down

0 comments on commit 06f9b5e

Please sign in to comment.