Merge pull request #204 from toasted-nutbread/settings-improvements
Settings improvements
This commit is contained in:
Alex Yatskov
GitHub
commit
cc53510883
@ -17,16 +17,16 @@
|
||||
*/
|
||||
|
||||
|
||||
async function apiOptionsSet(options) {
|
||||
utilBackend().onOptionsUpdated(options);
|
||||
}
|
||||
|
||||
async function apiOptionsGet() {
|
||||
function apiOptionsGetSync() {
|
||||
return utilBackend().options;
|
||||
}
|
||||
|
||||
async function apiOptionsGet() {
|
||||
return apiOptionsGetSync();
|
||||
}
|
||||
|
||||
async function apiTermsFind(text) {
|
||||
const options = utilBackend().options;
|
||||
const options = apiOptionsGetSync();
|
||||
const translator = utilBackend().translator;
|
||||
|
||||
const searcher = {
|
||||
@ -48,13 +48,13 @@ async function apiTermsFind(text) {
|
||||
}
|
||||
|
||||
async function apiKanjiFind(text) {
|
||||
const options = utilBackend().options;
|
||||
const options = apiOptionsGetSync();
|
||||
const definitions = await utilBackend().translator.findKanji(text, dictEnabledSet(options));
|
||||
return definitions.slice(0, options.general.maxResults);
|
||||
}
|
||||
|
||||
async function apiDefinitionAdd(definition, mode, context) {
|
||||
const options = utilBackend().options;
|
||||
const options = apiOptionsGetSync();
|
||||
|
||||
if (mode !== 'kanji') {
|
||||
await audioInject(
|
||||
@ -83,7 +83,7 @@ async function apiDefinitionsAddable(definitions, modes) {
|
||||
const notes = [];
|
||||
for (const definition of definitions) {
|
||||
for (const mode of modes) {
|
||||
const note = await dictNoteFormat(definition, mode, utilBackend().options);
|
||||
const note = await dictNoteFormat(definition, mode, apiOptionsGetSync());
|
||||
notes.push(note);
|
||||
}
|
||||
}
|
||||
@ -131,10 +131,9 @@ async function apiCommandExec(command) {
|
||||
},
|
||||
|
||||
toggle: async () => {
|
||||
const options = utilBackend().options;
|
||||
const options = apiOptionsGetSync();
|
||||
options.general.enable = !options.general.enable;
|
||||
await optionsSave(options);
|
||||
await apiOptionsSet(options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ class Backend {
|
||||
|
||||
async prepare() {
|
||||
await this.translator.prepare();
|
||||
await apiOptionsSet(await optionsLoad());
|
||||
this.onOptionsUpdated(await optionsLoad());
|
||||
|
||||
if (chrome.commands !== null && typeof chrome.commands === 'object') {
|
||||
chrome.commands.onCommand.addListener(this.onCommand.bind(this));
|
||||
@ -41,7 +41,8 @@ class Backend {
|
||||
}
|
||||
|
||||
onOptionsUpdated(options) {
|
||||
this.options = utilIsolate(options);
|
||||
options = utilIsolate(options);
|
||||
this.options = options;
|
||||
|
||||
if (!options.general.enable) {
|
||||
this.setExtensionBadgeBackgroundColor('#555555');
|
||||
@ -53,16 +54,12 @@ class Backend {
|
||||
this.setExtensionBadgeText('');
|
||||
}
|
||||
|
||||
if (options.anki.enable) {
|
||||
this.anki = new AnkiConnect(options.anki.server);
|
||||
} else {
|
||||
this.anki = new AnkiNull();
|
||||
}
|
||||
this.anki = options.anki.enable ? new AnkiConnect(options.anki.server) : new AnkiNull();
|
||||
|
||||
const callback = () => this.checkLastError(chrome.runtime.lastError);
|
||||
chrome.tabs.query({}, tabs => {
|
||||
for (const tab of tabs) {
|
||||
chrome.tabs.sendMessage(tab.id, {action: 'optionsSet', params: options}, callback);
|
||||
chrome.tabs.sendMessage(tab.id, {action: 'optionsSet', params: {options}}, callback);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -85,10 +82,6 @@ class Backend {
|
||||
forward(apiOptionsGet(), callback);
|
||||
},
|
||||
|
||||
optionsSet: ({options, callback}) => {
|
||||
forward(apiOptionsSet(options), callback);
|
||||
},
|
||||
|
||||
kanjiFind: ({text, callback}) => {
|
||||
forward(apiKanjiFind(text), callback);
|
||||
},
|
||||
@ -148,7 +141,7 @@ class Backend {
|
||||
chrome.browserAction.setBadgeBackgroundColor({color});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
setExtensionBadgeText(text) {
|
||||
if (typeof chrome.browserAction.setBadgeText === 'function') {
|
||||
chrome.browserAction.setBadgeText({text});
|
||||
|
||||
@ -17,6 +17,57 @@
|
||||
*/
|
||||
|
||||
|
||||
function optionsApplyUpdates(options, updates) {
|
||||
const targetVersion = updates.length;
|
||||
const currentVersion = options.version;
|
||||
if (typeof currentVersion === 'number' && Number.isFinite(currentVersion)) {
|
||||
for (let i = Math.max(0, Math.floor(currentVersion)); i < targetVersion; ++i) {
|
||||
const update = updates[i];
|
||||
if (update !== null) {
|
||||
update(options);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
options.version = targetVersion;
|
||||
return options;
|
||||
}
|
||||
|
||||
const optionsVersionUpdates = [
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
(options) => {
|
||||
options.general.audioSource = options.general.audioPlayback ? 'jpod101' : 'disabled';
|
||||
},
|
||||
(options) => {
|
||||
options.general.showGuide = false;
|
||||
},
|
||||
(options) => {
|
||||
options.scanning.modifier = options.scanning.requireShift ? 'shift' : 'none';
|
||||
},
|
||||
(options) => {
|
||||
const fieldTemplatesDefault = profileCreateDefaultFieldTemplates();
|
||||
options.general.resultOutputMode = options.general.groupResults ? 'group' : 'split';
|
||||
options.anki.fieldTemplates = (
|
||||
(utilStringHashCode(options.anki.fieldTemplates) !== -805327496) ?
|
||||
`{{#if merge}}${fieldTemplatesDefault}{{else}}${options.anki.fieldTemplates}{{/if}}` :
|
||||
fieldTemplatesDefault
|
||||
);
|
||||
},
|
||||
(options) => {
|
||||
if (utilStringHashCode(options.anki.fieldTemplates) === 1285806040) {
|
||||
options.anki.fieldTemplates = profileCreateDefaultFieldTemplates();
|
||||
}
|
||||
},
|
||||
(options) => {
|
||||
if (utilStringHashCode(options.anki.fieldTemplates) === -250091611) {
|
||||
options.anki.fieldTemplates = profileCreateDefaultFieldTemplates();
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
function optionsFieldTemplates() {
|
||||
return `
|
||||
{{#*inline "glossary-single"}}
|
||||
@ -183,8 +234,8 @@ function optionsFieldTemplates() {
|
||||
`.trim();
|
||||
}
|
||||
|
||||
function optionsSetDefaults(options) {
|
||||
const defaults = {
|
||||
function optionsCreateDefaults() {
|
||||
return {
|
||||
general: {
|
||||
enable: true,
|
||||
audioSource: 'jpod101',
|
||||
@ -238,6 +289,10 @@ function optionsSetDefaults(options) {
|
||||
fieldTemplates: optionsFieldTemplates()
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function optionsSetDefaults(options) {
|
||||
const defaults = optionsCreateDefaults();
|
||||
|
||||
const combine = (target, source) => {
|
||||
for (const key in source) {
|
||||
@ -258,70 +313,29 @@ function optionsSetDefaults(options) {
|
||||
}
|
||||
|
||||
function optionsVersion(options) {
|
||||
const fixups = [
|
||||
() => {},
|
||||
() => {},
|
||||
() => {},
|
||||
() => {},
|
||||
() => {
|
||||
if (options.general.audioPlayback) {
|
||||
options.general.audioSource = 'jpod101';
|
||||
} else {
|
||||
options.general.audioSource = 'disabled';
|
||||
}
|
||||
},
|
||||
() => {
|
||||
options.general.showGuide = false;
|
||||
},
|
||||
() => {
|
||||
if (options.scanning.requireShift) {
|
||||
options.scanning.modifier = 'shift';
|
||||
} else {
|
||||
options.scanning.modifier = 'none';
|
||||
}
|
||||
},
|
||||
() => {
|
||||
if (options.general.groupResults) {
|
||||
options.general.resultOutputMode = 'group';
|
||||
} else {
|
||||
options.general.resultOutputMode = 'split';
|
||||
}
|
||||
if (utilStringHashCode(options.anki.fieldTemplates) !== -805327496) {
|
||||
options.anki.fieldTemplates = `{{#if merge}}${optionsFieldTemplates()}{{else}}${options.anki.fieldTemplates}{{/if}}`;
|
||||
} else {
|
||||
options.anki.fieldTemplates = optionsFieldTemplates();
|
||||
}
|
||||
},
|
||||
() => {
|
||||
if (utilStringHashCode(options.anki.fieldTemplates) === 1285806040) {
|
||||
options.anki.fieldTemplates = optionsFieldTemplates();
|
||||
}
|
||||
},
|
||||
() => {
|
||||
if (utilStringHashCode(options.anki.fieldTemplates) === -250091611) {
|
||||
options.anki.fieldTemplates = optionsFieldTemplates();
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
optionsSetDefaults(options);
|
||||
if (!options.hasOwnProperty('version')) {
|
||||
options.version = fixups.length;
|
||||
}
|
||||
|
||||
while (options.version < fixups.length) {
|
||||
fixups[options.version++]();
|
||||
}
|
||||
|
||||
return options;
|
||||
return optionsApplyUpdates(options, optionsVersionUpdates);
|
||||
}
|
||||
|
||||
function optionsLoad() {
|
||||
return new Promise((resolve, reject) => {
|
||||
chrome.storage.local.get(null, store => resolve(store.options));
|
||||
chrome.storage.local.get(['options'], store => {
|
||||
const error = chrome.runtime.lastError;
|
||||
if (error) {
|
||||
reject(error);
|
||||
} else {
|
||||
resolve(store.options);
|
||||
}
|
||||
});
|
||||
}).then(optionsStr => {
|
||||
return optionsStr ? JSON.parse(optionsStr) : {};
|
||||
}).catch(error => {
|
||||
if (typeof optionsStr === 'string') {
|
||||
const options = JSON.parse(optionsStr);
|
||||
if (typeof options === 'object' && options !== null && !Array.isArray(options)) {
|
||||
return options;
|
||||
}
|
||||
}
|
||||
return {};
|
||||
}).catch(() => {
|
||||
return {};
|
||||
}).then(options => {
|
||||
return optionsVersion(options);
|
||||
@ -329,9 +343,9 @@ function optionsLoad() {
|
||||
}
|
||||
|
||||
function optionsSave(options) {
|
||||
return new Promise((resolve, reject) => {
|
||||
return new Promise((resolve) => {
|
||||
chrome.storage.local.set({options: JSON.stringify(options)}, resolve);
|
||||
}).then(() => {
|
||||
apiOptionsSet(options);
|
||||
utilBackend().onOptionsUpdated(options);
|
||||
});
|
||||
}
|
||||
|
||||
@ -30,6 +30,10 @@
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.label-light {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#custom-popup-css {
|
||||
width: 100%;
|
||||
min-height: 34px;
|
||||
@ -49,6 +53,16 @@
|
||||
[data-browser=firefox-mobile] [data-show-for-browser~=firefox-mobile] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 740px) {
|
||||
.col-xs-6 {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.col-xs-6+.col-xs-6 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -107,6 +121,16 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group options-advanced">
|
||||
<label for="audio-playback-volume">Audio playback volume <span class="label-light">(percent)</span></label>
|
||||
<input type="number" min="0" max="100" id="audio-playback-volume" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group options-advanced">
|
||||
<label for="max-displayed-results">Maximum displayed results</label>
|
||||
<input type="number" min="1" id="max-displayed-results" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
@ -130,36 +154,41 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group options-advanced">
|
||||
<label for="audio-playback-volume">Audio playback volume (percent)</label>
|
||||
<input type="number" min="0" max="100" id="audio-playback-volume" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group options-advanced">
|
||||
<label for="max-displayed-results">Maximum displayed results</label>
|
||||
<input type="number" min="1" id="max-displayed-results" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group options-advanced">
|
||||
<label>Popup size (width × height, in pixels)</label>
|
||||
<div class="row">
|
||||
<div class="col-xs-6"><input type="number" min="1" id="popup-width" class="form-control"></div>
|
||||
<div class="col-xs-6"><input type="number" min="1" id="popup-height" class="form-control"></div>
|
||||
<div class="col-xs-6">
|
||||
<label for="popup-display-mode">Popup width <span class="label-light">(in pixels)</span></label>
|
||||
<input type="number" min="1" id="popup-width" class="form-control">
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label for="popup-display-mode">Popup height <span class="label-light">(in pixels)</span></label>
|
||||
<input type="number" min="1" id="popup-height" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group options-advanced">
|
||||
<label>Popup offset (horizontal, vertical; in pixels)</label>
|
||||
<div class="row">
|
||||
<div class="col-xs-6"><input type="number" min="0" id="popup-horizontal-offset" class="form-control"></div>
|
||||
<div class="col-xs-6"><input type="number" min="0" id="popup-vertical-offset" class="form-control"></div>
|
||||
<div class="col-xs-6">
|
||||
<label for="popup-display-mode">Horizontal popup offset <span class="label-light">(in pixels)</span></label>
|
||||
<input type="number" min="0" id="popup-horizontal-offset" class="form-control">
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label for="popup-display-mode">Vertical popup offset <span class="label-light">(in pixels)</span></label>
|
||||
<input type="number" min="0" id="popup-vertical-offset" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group options-advanced">
|
||||
<label>Popup offset for vertical text (horizontal, vertical; in pixels)</label>
|
||||
<div class="row">
|
||||
<div class="col-xs-6"><input type="number" min="0" id="popup-horizontal-offset2" class="form-control"></div>
|
||||
<div class="col-xs-6"><input type="number" min="0" id="popup-vertical-offset2" class="form-control"></div>
|
||||
<div class="col-xs-6">
|
||||
<label for="popup-display-mode">Horizontal popup offset for vertical text <span class="label-light">(in pixels)</span></label>
|
||||
<input type="number" min="0" id="popup-horizontal-offset2" class="form-control">
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label for="popup-display-mode">Vertical popup offset for vertical text <span class="label-light">(in pixels)</span></label>
|
||||
<input type="number" min="0" id="popup-vertical-offset2" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -205,12 +234,12 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group options-advanced">
|
||||
<label for="scan-delay">Scan delay (in milliseconds)</label>
|
||||
<label for="scan-delay">Scan delay <span class="label-light">(in milliseconds)</span></label>
|
||||
<input type="number" min="1" id="scan-delay" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group options-advanced">
|
||||
<label for="scan-length">Scan length (in characters)</label>
|
||||
<label for="scan-length">Scan length <span class="label-light">(in characters)</span></label>
|
||||
<input type="number" min="1" id="scan-length" class="form-control">
|
||||
</div>
|
||||
|
||||
@ -326,12 +355,12 @@
|
||||
|
||||
<div id="anki-general">
|
||||
<div class="form-group">
|
||||
<label for="card-tags">Card tags (comma or space separated)</label>
|
||||
<label for="card-tags">Card tags <span class="label-light">(comma or space separated)</span></label>
|
||||
<input type="text" id="card-tags" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group options-advanced">
|
||||
<label for="sentence-detection-extent">Sentence detection extent (in characters)</label>
|
||||
<label for="sentence-detection-extent">Sentence detection extent <span class="label-light">(in characters)</span></label>
|
||||
<input type="number" min="1" id="sentence-detection-extent" class="form-control">
|
||||
</div>
|
||||
|
||||
@ -349,7 +378,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group options-advanced">
|
||||
<label for="screenshot-quality">Screenshot quality (JPEG only)</label>
|
||||
<label for="screenshot-quality">Screenshot quality <span class="label-light">(JPEG only)</span></label>
|
||||
<input type="number" min="0" max="100" step="1" id="screenshot-quality" class="form-control">
|
||||
</div>
|
||||
|
||||
@ -413,7 +442,7 @@
|
||||
their Anki cards. If you encounter problems with your changes you can always <a href="#" id="field-templates-reset">reset to default</a>
|
||||
template settings.
|
||||
</p>
|
||||
<textarea class="form-control" rows="10" id="field-templates"></textarea>
|
||||
<textarea autocomplete="off" spellcheck="false" wrap="soft" class="form-control" rows="10" id="field-templates"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,10 +17,6 @@
|
||||
*/
|
||||
|
||||
|
||||
function apiOptionsSet(options) {
|
||||
return utilInvoke('optionsSet', {options});
|
||||
}
|
||||
|
||||
function apiOptionsGet() {
|
||||
return utilInvoke('optionsGet');
|
||||
}
|
||||
|
||||
@ -261,7 +261,7 @@ class Frontend {
|
||||
|
||||
onBgMessage({action, params}, sender, callback) {
|
||||
const handlers = {
|
||||
optionsSet: options => {
|
||||
optionsSet: ({options}) => {
|
||||
this.options = options;
|
||||
if (!this.options.enable) {
|
||||
this.searchClear();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user