aboutsummaryrefslogtreecommitdiff
path: root/ext/fg
diff options
context:
space:
mode:
authorAlex Yatskov <alex@foosoft.net>2017-01-04 19:44:50 -0800
committerAlex Yatskov <alex@foosoft.net>2017-01-04 19:44:50 -0800
commit8615d5f497ab595b72e1e1d666c4a373eb5a5940 (patch)
treef1fd4b1e308bcf7673e1bac00044222d0d1a9357 /ext/fg
parent8049c6083ef6e709e92ea5f230cd8a764931b875 (diff)
show spinner when adding notes (resolves #25)
Diffstat (limited to 'ext/fg')
-rw-r--r--ext/fg/css/frame.css7
-rw-r--r--ext/fg/img/spinner.gifbin0 -> 7358 bytes
-rw-r--r--ext/fg/js/driver.js2
-rw-r--r--ext/fg/js/frame.js10
4 files changed, 19 insertions, 0 deletions
diff --git a/ext/fg/css/frame.css b/ext/fg/css/frame.css
index dc04184d..01b8776c 100644
--- a/ext/fg/css/frame.css
+++ b/ext/fg/css/frame.css
@@ -90,6 +90,13 @@ body {
visibility: hidden;
}
+.spinner {
+ bottom: 5px;
+ position: fixed;
+ right: 5px;
+ visibility: hidden;
+}
+
/* term styles */
.term-expression {
diff --git a/ext/fg/img/spinner.gif b/ext/fg/img/spinner.gif
new file mode 100644
index 00000000..8ed30cb6
--- /dev/null
+++ b/ext/fg/img/spinner.gif
Binary files differ
diff --git a/ext/fg/js/driver.js b/ext/fg/js/driver.js
index 9aab7950..0c785d31 100644
--- a/ext/fg/js/driver.js
+++ b/ext/fg/js/driver.js
@@ -279,6 +279,8 @@ class Driver {
} else {
alert('Note could not be added');
}
+
+ this.popup.invokeApi('addNoteComplete');
}).catch(error => {
alert('Error: ' + error);
});
diff --git a/ext/fg/js/frame.js b/ext/fg/js/frame.js
index f25ae8da..5878bb43 100644
--- a/ext/fg/js/frame.js
+++ b/ext/fg/js/frame.js
@@ -21,6 +21,11 @@ function invokeApi(action, params, target) {
target.postMessage({action, params}, '*');
}
+function showSpinner(show) {
+ const spinner = document.querySelector('.spinner');
+ spinner.style.visibility = show ? 'visible' : 'hidden';
+}
+
function registerKanjiLinks() {
for (const link of Array.from(document.getElementsByClassName('kanji-link'))) {
link.addEventListener('click', e => {
@@ -36,6 +41,7 @@ function registerAddNoteLinks() {
e.preventDefault();
const ds = e.currentTarget.dataset;
invokeApi('addNote', {index: ds.index, mode: ds.mode}, window.parent);
+ showSpinner(true);
});
}
}
@@ -50,6 +56,10 @@ function registerAudioLinks() {
}
}
+function api_addNoteComplete() {
+ showSpinner(false);
+}
+
function api_setActionState({index, state, sequence}) {
for (const mode in state) {
const matches = document.querySelectorAll(`.action-bar[data-sequence="${sequence}"] .action-add-note[data-index="${index}"][data-mode="${mode}"]`);