diff options
| author | Alex Yatskov <alex@foosoft.net> | 2017-01-04 19:44:50 -0800 |
|---|---|---|
| committer | Alex Yatskov <alex@foosoft.net> | 2017-01-04 19:44:50 -0800 |
| commit | 8615d5f497ab595b72e1e1d666c4a373eb5a5940 (patch) | |
| tree | f1fd4b1e308bcf7673e1bac00044222d0d1a9357 | |
| parent | 8049c6083ef6e709e92ea5f230cd8a764931b875 (diff) | |
show spinner when adding notes (resolves #25)
| -rw-r--r-- | ext/bg/js/templates.js | 4 | ||||
| -rw-r--r-- | ext/fg/css/frame.css | 7 | ||||
| -rw-r--r-- | ext/fg/img/spinner.gif | bin | 0 -> 7358 bytes | |||
| -rw-r--r-- | ext/fg/js/driver.js | 2 | ||||
| -rw-r--r-- | ext/fg/js/frame.js | 10 | ||||
| -rw-r--r-- | ext/manifest.json | 1 | ||||
| -rw-r--r-- | tmpl/header.html | 4 |
7 files changed, 27 insertions, 1 deletions
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 </style>\n <link rel=\"stylesheet\" href=\"" + 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))) - + "/css/frame.css\">\n </head>\n <body>\n"; + + "/css/frame.css\">\n </head>\n <body>\n\n <div class=\"spinner\">\n <img src=\"" + + 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))) + + "/img/spinner.gif\">\n </div>\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 Binary files differnew file mode 100644 index 00000000..8ed30cb6 --- /dev/null +++ b/ext/fg/img/spinner.gif 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 @@ <link rel="stylesheet" href="{{root}}/css/frame.css"> </head> <body> + + <div class="spinner"> + <img src="{{root}}/img/spinner.gif"> + </div> |
