From 8615d5f497ab595b72e1e1d666c4a373eb5a5940 Mon Sep 17 00:00:00 2001 From: Alex Yatskov Date: Wed, 4 Jan 2017 19:44:50 -0800 Subject: [PATCH] show spinner when adding notes (resolves #25) --- ext/bg/js/templates.js | 4 +++- 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 ++++++++++ ext/manifest.json | 1 + tmpl/header.html | 4 ++++ 7 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 ext/fg/img/spinner.gif diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js index 63a8d928..339ea31b 100644 --- a/ext/bg/js/templates.js +++ b/ext/bg/js/templates.js @@ -47,7 +47,9 @@ templates['header.html'] = template({"compiler":[7,">= 4.0.0"],"main":function(c + alias4(((helper = (helper = helpers.root || (depth0 != null ? depth0.root : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"root","hash":{},"data":data}) : helper))) + "/ttf/vl-gothic-regular.ttf');\n }\n \n \n \n \n"; + + "/css/frame.css\">\n \n \n\n
\n \n
\n"; },"useData":true}); templates['kanji.html'] = template({"1":function(container,depth0,helpers,partials,data) { var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression; 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 0000000000000000000000000000000000000000..8ed30cb6362966f7f8210cf5317a178707578ff1 GIT binary patch literal 7358 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 Pbju^cui5_rK{oeaxY@}K literal 0 HcmV?d00001 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}"]`); diff --git a/ext/manifest.json b/ext/manifest.json index c7c1ffa9..905ce2a9 100644 --- a/ext/manifest.json +++ b/ext/manifest.json @@ -38,6 +38,7 @@ "fg/img/add_term_kana.png", "fg/img/add_term_kanji.png", "fg/img/play_audio.png", + "fg/img/spinner.gif", "fg/js/frame.js", "fg/ttf/kanji-stroke-orders.ttf", "fg/ttf/vl-gothic-regular.ttf" diff --git a/tmpl/header.html b/tmpl/header.html index b7fad070..476c3403 100644 --- a/tmpl/header.html +++ b/tmpl/header.html @@ -16,3 +16,7 @@ + +