From 8615d5f497ab595b72e1e1d666c4a373eb5a5940 Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Wed, 4 Jan 2017 19:44:50 -0800
Subject: show spinner when adding notes (resolves #25)

---
 ext/fg/css/frame.css   |   7 +++++++
 ext/fg/img/spinner.gif | Bin 0 -> 7358 bytes
 ext/fg/js/driver.js    |   2 ++
 ext/fg/js/frame.js     |  10 ++++++++++
 4 files changed, 19 insertions(+)
 create mode 100644 ext/fg/img/spinner.gif

(limited to 'ext/fg')

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
Binary files /dev/null and b/ext/fg/img/spinner.gif 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}"]`);
-- 
cgit v1.2.3