From 62b95a656f5e55395893982822b0388a425f5a29 Mon Sep 17 00:00:00 2001 From: odehjoseph Date: Thu, 26 Sep 2019 21:33:33 -0700 Subject: Add option to enable Alt+B lookup --- ext/bg/js/options.js | 1 + ext/bg/js/settings.js | 2 ++ ext/bg/settings.html | 4 ++++ 3 files changed, 7 insertions(+) (limited to 'ext/bg') diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index e9e321df..2c9de1ec 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -281,6 +281,7 @@ function profileOptionsCreateDefaults() { modifier: 'shift', deepDomScan: false, popupNestingMaxDepth: 0, + enablePopupSearch: false, enableOnPopupExpressions: false, enableOnSearchPage: true }, diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index cb3ddd4e..a0fe7c70 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -50,6 +50,7 @@ async function formRead(options) { options.scanning.alphanumeric = $('#search-alphanumeric').prop('checked'); options.scanning.autoHideResults = $('#auto-hide-results').prop('checked'); options.scanning.deepDomScan = $('#deep-dom-scan').prop('checked'); + options.scanning.enablePopupSearch = $('#enable-search-within-first-popup').prop('checked'); options.scanning.enableOnPopupExpressions = $('#enable-scanning-of-popup-expressions').prop('checked'); options.scanning.enableOnSearchPage = $('#enable-scanning-on-search-page').prop('checked'); options.scanning.delay = parseInt($('#scan-delay').val(), 10); @@ -115,6 +116,7 @@ async function formWrite(options) { $('#search-alphanumeric').prop('checked', options.scanning.alphanumeric); $('#auto-hide-results').prop('checked', options.scanning.autoHideResults); $('#deep-dom-scan').prop('checked', options.scanning.deepDomScan); + $('#enable-search-within-first-popup').prop('checked', options.scanning.enablePopupSearch); $('#enable-scanning-of-popup-expressions').prop('checked', options.scanning.enableOnPopupExpressions); $('#enable-scanning-on-search-page').prop('checked', options.scanning.enableOnSearchPage); $('#scan-delay').val(options.scanning.delay); diff --git a/ext/bg/settings.html b/ext/bg/settings.html index d38aa090..6fdd54c4 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -413,6 +413,10 @@ This feature can be enabled if the Maximum number of additional popups option is set to a value greater than 0.

+
+ +
+
-- cgit v1.2.3 From 9a243630a55a6a99fa4dca415a3dfa534585c10c Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 12:04:21 -0400 Subject: Improve slide up animation --- ext/bg/js/search.js | 23 +++++++++++++++++++++-- ext/bg/search.html | 18 ++++++++---------- 2 files changed, 29 insertions(+), 12 deletions(-) (limited to 'ext/bg') diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 6ff710f0..45714a02 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -28,7 +28,8 @@ class DisplaySearch extends Display { this.search = $('#search').click(this.onSearch.bind(this)); this.query = $('#query').on('input', this.onSearchInput.bind(this)); - this.intro = $('#intro'); + this.intro = document.querySelector('#intro'); + this.introHidden = false; this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract}); @@ -50,13 +51,31 @@ class DisplaySearch extends Display { async onSearch(e) { try { e.preventDefault(); - this.intro.slideUp(); + this.hideIntro(); const {length, definitions} = await apiTermsFind(this.query.val(), this.optionsContext); super.termsShow(definitions, await apiOptionsGet(this.optionsContext)); } catch (e) { this.onError(e); } } + + hideIntro() { + if (this.introHidden) { + return; + } + + this.introHidden = true; + + if (this.intro === null) { + return; + } + + const size = this.intro.getBoundingClientRect(); + this.intro.style.height = `${size.height}px`; + this.intro.style.transition = 'height 0.4s ease-in-out 0s'; + window.getComputedStyle(this.intro).getPropertyValue('height'); // Commits height so next line can start animation + this.intro.style.height = '0'; + } } window.yomichan_search = new DisplaySearch(); diff --git a/ext/bg/search.html b/ext/bg/search.html index 38c5a4e9..3c78122d 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -10,21 +10,19 @@
-
+
-

Search your installed dictionaries by entering a Japanese expression into the field below.

+

Search your installed dictionaries by entering a Japanese expression into the field below.

-

-

- - - - -
-

+
+ + + + +
-- cgit v1.2.3 From b61fc810127ae3cf54e6f4ca84ea95301f9ba2a5 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 12:12:30 -0400 Subject: Remove jQuery usage from search.js --- ext/bg/js/search.js | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) (limited to 'ext/bg') diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 45714a02..693e7938 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -26,14 +26,20 @@ class DisplaySearch extends Display { url: window.location.href }; - this.search = $('#search').click(this.onSearch.bind(this)); - this.query = $('#query').on('input', this.onSearchInput.bind(this)); + this.search = document.querySelector('#search'); + this.query = document.querySelector('#query'); this.intro = document.querySelector('#intro'); this.introHidden = false; this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract}); - window.wanakana.bind(this.query.get(0)); + if (this.search !== null) { + this.search.addEventListener('click', (e) => this.onSearch(e), false); + } + if (this.query !== null) { + this.query.addEventListener('input', () => this.onSearchInput(), false); + window.wanakana.bind(this.query); + } } onError(error) { @@ -41,18 +47,27 @@ class DisplaySearch extends Display { } onSearchClear() { - this.query.focus().select(); + if (this.query === null) { + return; + } + + this.query.focus(); + this.query.select(); } onSearchInput() { - this.search.prop('disabled', this.query.val().length === 0); + this.search.disabled = (this.query === null || this.query.value.length === 0); } async onSearch(e) { + if (this.query === null) { + return; + } + try { e.preventDefault(); this.hideIntro(); - const {length, definitions} = await apiTermsFind(this.query.val(), this.optionsContext); + const {length, definitions} = await apiTermsFind(this.query.value, this.optionsContext); super.termsShow(definitions, await apiOptionsGet(this.optionsContext)); } catch (e) { this.onError(e); -- cgit v1.2.3 From 95a7fd81f5ff3773618ad697dc4385d40ba6fb54 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 14:16:23 -0400 Subject: Use raw element references for container and spinner --- ext/bg/js/search.js | 2 +- ext/fg/js/float.js | 2 +- ext/mixed/js/display.js | 18 +++++++++++------- 3 files changed, 13 insertions(+), 9 deletions(-) (limited to 'ext/bg') diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 693e7938..13ed1e08 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -19,7 +19,7 @@ class DisplaySearch extends Display { constructor() { - super($('#spinner'), $('#content')); + super(document.querySelector('#spinner'), document.querySelector('#content')); this.optionsContext = { depth: 0, diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index f75b35b8..2e952efb 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -19,7 +19,7 @@ class DisplayFloat extends Display { constructor() { - super($('#spinner'), $('#definitions')); + super(document.querySelector('#spinner'), document.querySelector('#definitions')); this.autoPlayAudioTimer = null; this.styleNode = null; diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 1ce997a1..e0f80b51 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -310,7 +310,7 @@ class Display { } const content = await apiTemplateRender('terms.html', params); - this.container.html(content); + this.container.innerHTML = content; const {index, scroll} = context || {}; this.entryScrollIntoView(index || 0, scroll); @@ -362,7 +362,7 @@ class Display { } const content = await apiTemplateRender('kanji.html', params); - this.container.html(content); + this.container.innerHTML = content; const {index, scroll} = context || {}; this.entryScrollIntoView(index || 0, scroll); @@ -446,7 +446,7 @@ class Display { async noteAdd(definition, mode) { try { - this.spinner.show(); + this.setSpinnerVisible(true); const context = {}; if (this.noteUsesScreenshot()) { @@ -467,13 +467,13 @@ class Display { } catch (e) { this.onError(e); } finally { - this.spinner.hide(); + this.setSpinnerVisible(false); } } async audioPlay(definition, expressionIndex) { try { - this.spinner.show(); + this.setSpinnerVisible(true); const expression = expressionIndex === -1 ? definition : definition.expressions[expressionIndex]; let url = await apiAudioGetUrl(expression, this.options.general.audioSource); @@ -505,7 +505,7 @@ class Display { } catch (e) { this.onError(e); } finally { - this.spinner.hide(); + this.setSpinnerVisible(false); } } @@ -542,6 +542,10 @@ class Display { return apiForward('popupSetVisible', {visible}); } + setSpinnerVisible(visible) { + this.spinner.style.display = visible ? 'block' : ''; + } + static clozeBuild(sentence, source) { const result = { sentence: sentence.text.trim() @@ -558,7 +562,7 @@ class Display { entryIndexFind(element) { const entry = element.closest('.entry'); - return entry !== null ? Display.indexOf(this.container.get(0).querySelectorAll('.entry'), entry) : -1; + return entry !== null ? Display.indexOf(this.container.querySelectorAll('.entry'), entry) : -1; } static adderButtonFind(index, mode) { -- cgit v1.2.3 From 946e577e42db9df43169d8547d4536fe8edd6748 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 17:52:30 -0400 Subject: Implement custom window scroll --- ext/bg/search.html | 1 + ext/fg/float.html | 1 + ext/mixed/js/display.js | 14 ++++--- ext/mixed/js/scroll.js | 100 ++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 111 insertions(+), 5 deletions(-) create mode 100644 ext/mixed/js/scroll.js (limited to 'ext/bg') diff --git a/ext/bg/search.html b/ext/bg/search.html index 3c78122d..ab208c26 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -47,6 +47,7 @@ + diff --git a/ext/fg/float.html b/ext/fg/float.html index 465db589..e86c2caa 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -41,6 +41,7 @@ + diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index a3d618e5..e3c44507 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -31,6 +31,8 @@ class Display { this.dependencies = {}; + this.windowScroll = new WindowScroll(); + document.addEventListener('keydown', this.onKeyDown.bind(this)); document.addEventListener('wheel', this.onWheel.bind(this), {passive: false}); } @@ -53,11 +55,12 @@ class Display { e.preventDefault(); const link = e.target; + this.windowScroll.toY(0); const context = { source: { definitions: this.definitions, index: this.entryIndexFind(link), - scroll: $('html,body').scrollTop() + scroll: this.windowScroll.y } }; @@ -102,11 +105,12 @@ class Display { textSource.cleanup(); } + this.windowScroll.toY(0); const context = { source: { definitions: this.definitions, index: this.entryIndexFind(clickedElement), - scroll: $('html,body').scrollTop() + scroll: this.windowScroll.y } }; @@ -410,7 +414,7 @@ class Display { $('.current').hide().eq(index).show(); - const container = $('html,body').stop(); + this.windowScroll.stop(); const entry = $('.entry').eq(index); let target; @@ -421,9 +425,9 @@ class Display { } if (smooth) { - container.animate({scrollTop: target}, 200); + this.windowScroll.animate(this.windowScroll.x, target, 200); } else { - container.scrollTop(target); + this.windowScroll.toY(target); } this.index = index; diff --git a/ext/mixed/js/scroll.js b/ext/mixed/js/scroll.js new file mode 100644 index 00000000..824fd92b --- /dev/null +++ b/ext/mixed/js/scroll.js @@ -0,0 +1,100 @@ +/* + * Copyright (C) 2019 Alex Yatskov + * Author: Alex Yatskov + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + + +class WindowScroll { + constructor() { + this.animationRequestId = null; + this.animationStartTime = 0; + this.animationStartX = 0; + this.animationStartY = 0; + this.animationEndTime = 0; + this.animationEndX = 0; + this.animationEndY = 0; + this.requestAnimationFrameCallback = (t) => this.onAnimationFrame(t); + } + + toY(y) { + this.to(this.x, y); + } + + toX(x) { + this.to(x, this.y); + } + + to(x, y) { + this.stop(); + window.scroll(x, y); + } + + animate(x, y, time) { + this.animationStartX = this.x; + this.animationStartY = this.y; + this.animationStartTime = window.performance.now(); + this.animationEndX = x; + this.animationEndY = y; + this.animationEndTime = this.animationStartTime + time; + this.animationRequestId = window.requestAnimationFrame(this.requestAnimationFrameCallback); + } + + stop() { + if (this.animationRequestId === null) { + return; + } + + window.cancelAnimationFrame(this.animationRequestId); + this.animationRequestId = null; + } + + onAnimationFrame(time) { + if (time >= this.animationEndTime) { + window.scroll(this.animationEndX, this.animationEndY); + this.animationRequestId = null; + return; + } + + const t = WindowScroll.easeInOutCubic((time - this.animationStartTime) / (this.animationEndTime - this.animationStartTime)); + window.scroll( + WindowScroll.lerp(this.animationStartX, this.animationEndX, t), + WindowScroll.lerp(this.animationStartY, this.animationEndY, t) + ); + + this.animationRequestId = window.requestAnimationFrame(this.requestAnimationFrameCallback); + } + + get x() { + return window.scrollX || window.pageXOffset; + } + + get y() { + return window.scrollY || window.pageYOffset; + } + + static easeInOutCubic(t) { + if (t < 0.5) { + return (4.0 * t * t * t); + } else { + t = 1.0 - t; + return 1.0 - (4.0 * t * t * t); + } + } + + static lerp(start, end, percent) { + return (end - start) * percent + start; + } +} -- cgit v1.2.3 From 1a7ad3011109dfb9cb51b5b89740fae1cb8a7035 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 18:46:48 -0400 Subject: Remove jQuery dependency from float.html and search.html --- ext/bg/search.html | 1 - ext/fg/float.html | 1 - 2 files changed, 2 deletions(-) (limited to 'ext/bg') diff --git a/ext/bg/search.html b/ext/bg/search.html index ab208c26..121b477c 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -32,7 +32,6 @@
- diff --git a/ext/fg/float.html b/ext/fg/float.html index e86c2caa..52c7faa3 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -31,7 +31,6 @@
- -- cgit v1.2.3 From e5f24b8f12760d17bf663e45a415ca4205e153fd Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 28 Sep 2019 12:36:34 -0400 Subject: Fix paragraph tags --- ext/bg/context.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'ext/bg') diff --git a/ext/bg/context.html b/ext/bg/context.html index 198ccd42..a42faa7a 100644 --- a/ext/bg/context.html +++ b/ext/bg/context.html @@ -14,20 +14,20 @@ .btn-group { display: flex; + margin-top: 10px; + white-space: nowrap; } -

+

-

-

-

- - - -
-

+
+
+ + + +
-- cgit v1.2.3 From 597f658b26de3676f1fae0e39f1804bffe7b2b1a Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 28 Sep 2019 15:38:09 -0400 Subject: Move glyphicons into span element --- ext/bg/context.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ext/bg') diff --git a/ext/bg/context.html b/ext/bg/context.html index a42faa7a..51346838 100644 --- a/ext/bg/context.html +++ b/ext/bg/context.html @@ -24,9 +24,9 @@
- - - + + +
-- cgit v1.2.3 From 9217b5c79b56d77136653c613815b2447cebed9d Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 28 Sep 2019 12:41:24 -0400 Subject: Move settings style to separate CSS file --- ext/bg/css/settings.css | 124 ++++++++++++++++++++++++++++++++++++++++++++++++ ext/bg/settings.html | 108 +---------------------------------------- 2 files changed, 125 insertions(+), 107 deletions(-) create mode 100644 ext/bg/css/settings.css (limited to 'ext/bg') diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css new file mode 100644 index 00000000..150209e3 --- /dev/null +++ b/ext/bg/css/settings.css @@ -0,0 +1,124 @@ +/* + * Copyright (C) 2019 Alex Yatskov + * Author: Alex Yatskov + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + + +#anki-spinner, #anki-general, #anki-error, +#dict-spinner, #dict-error, #dict-warning, #dict-purge, #dict-import-progress, +#debug, .options-advanced, .storage-hidden, #storage-spinner { + display: none; +} + +.tab-content { + border-bottom: 1px #ddd solid; + border-left: 1px #ddd solid; + border-right: 1px #ddd solid; + padding: 10px; +} + +#field-templates { + font-family: monospace; + overflow-x: hidden; + white-space: pre; +} + +.bottom-links { + padding-bottom: 1em; +} + +.label-light { + font-weight: normal; +} + +.form-control.is-invalid { + border-color: #f00000; +} + +.condition>.condition-prefix:after { + content: "IF"; +} +.condition:nth-child(n+2)>.condition-prefix:after { + content: "AND"; +} + +.input-group .condition-prefix, +.input-group .condition-group-separator-label { + width: 60px; + text-align: center; +} +.input-group .condition-group-separator-label { + padding: 6px 12px; + font-weight: bold; + display: inline-block; +} +.input-group .condition-type, +.input-group .condition-operator { + width: auto; + text-align: center; + text-align-last: center; +} + +.condition-group>.condition>div:first-child { + border-bottom-left-radius: 0; +} +.condition-group>.condition:nth-child(n+2)>div:first-child { + border-top-left-radius: 0; +} +.condition-group>.condition:nth-child(n+2)>div:last-child>button { + border-top-right-radius: 0; +} +.condition-group>.condition:nth-last-child(n+2)>div:last-child>button { + border-bottom-right-radius: 0; +} +.condition-group-options>.condition-add { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.condition-groups>*:last-of-type { + display: none; +} + +#custom-popup-css { + width: 100%; + min-height: 34px; + height: 96px; + resize: vertical; + font-family: 'Courier New', Courier, monospace; + white-space: pre; +} + +[data-show-for-browser] { + display: none; +} + +[data-browser=edge] [data-show-for-browser~=edge], +[data-browser=chrome] [data-show-for-browser~=chrome], +[data-browser=firefox] [data-show-for-browser~=firefox], +[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; + } +} diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 6fdd54c4..02780f38 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -6,113 +6,7 @@ Yomichan Options - +
-- cgit v1.2.3 From 4e0fe1d5fb53bdd2e6c1c061127bca4053dec922 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 28 Sep 2019 12:48:46 -0400 Subject: Limit width of the HTML pages --- ext/bg/legal.html | 2 +- ext/bg/search.html | 2 +- ext/bg/settings.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'ext/bg') diff --git a/ext/bg/legal.html b/ext/bg/legal.html index 28c7fb21..9750d1d6 100644 --- a/ext/bg/legal.html +++ b/ext/bg/legal.html @@ -8,7 +8,7 @@ -
+

Yomichan License

 Copyright (C) 2016-2017  Alex Yatskov
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 121b477c..668b2436 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -9,7 +9,7 @@
         
     
     
-        
+