alex/yomichan
1
Fork 0
Code Releases Activity

show spinner when adding notes (resolves #25)

Browse Source
This commit is contained in:
Alex Yatskov 2017-01-04 19:44:50 -08:00
parent 8049c6083e
commit 8615d5f497
7 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ext/bg/js/templates.js
View File

@ -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))) + 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=\"" + "/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))) + 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}); },"useData":true});
templates['kanji.html'] = template({"1":function(container,depth0,helpers,partials,data) { 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; var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;

7
ext/fg/css/frame.css
View File

@ -90,6 +90,13 @@ body {
visibility: hidden; visibility: hidden;
} }
.spinner {
bottom: 5px;
position: fixed;
right: 5px;
visibility: hidden;
}
/* term styles */ /* term styles */
.term-expression { .term-expression {

BIN
ext/fg/img/spinner.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

2
ext/fg/js/driver.js
View File

@ -279,6 +279,8 @@ class Driver {
} else { } else {
alert('Note could not be added'); alert('Note could not be added');
} }
this.popup.invokeApi('addNoteComplete');
}).catch(error => { }).catch(error => {
alert('Error: ' + error); alert('Error: ' + error);
}); });

10
ext/fg/js/frame.js
View File

@ -21,6 +21,11 @@ function invokeApi(action, params, target) {
target.postMessage({action, params}, '*'); target.postMessage({action, params}, '*');
} }
function showSpinner(show) {
const spinner = document.querySelector('.spinner');
spinner.style.visibility = show ? 'visible' : 'hidden';
}
function registerKanjiLinks() { function registerKanjiLinks() {
for (const link of Array.from(document.getElementsByClassName('kanji-link'))) { for (const link of Array.from(document.getElementsByClassName('kanji-link'))) {
link.addEventListener('click', e => { link.addEventListener('click', e => {
@ -36,6 +41,7 @@ function registerAddNoteLinks() {
e.preventDefault(); e.preventDefault();
const ds = e.currentTarget.dataset; const ds = e.currentTarget.dataset;
invokeApi('addNote', {index: ds.index, mode: ds.mode}, window.parent); 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}) { function api_setActionState({index, state, sequence}) {
for (const mode in state) { for (const mode in state) {
const matches = document.querySelectorAll(`.action-bar[data-sequence="${sequence}"] .action-add-note[data-index="${index}"][data-mode="${mode}"]`); const matches = document.querySelectorAll(`.action-bar[data-sequence="${sequence}"] .action-add-note[data-index="${index}"][data-mode="${mode}"]`);

1
ext/manifest.json
View File

@ -38,6 +38,7 @@
"fg/img/add_term_kana.png", "fg/img/add_term_kana.png",
"fg/img/add_term_kanji.png", "fg/img/add_term_kanji.png",
"fg/img/play_audio.png", "fg/img/play_audio.png",
"fg/img/spinner.gif",
"fg/js/frame.js", "fg/js/frame.js",
"fg/ttf/kanji-stroke-orders.ttf", "fg/ttf/kanji-stroke-orders.ttf",
"fg/ttf/vl-gothic-regular.ttf" "fg/ttf/vl-gothic-regular.ttf"

4
tmpl/header.html
View File

@ -16,3 +16,7 @@
<link rel="stylesheet" href="{{root}}/css/frame.css"> <link rel="stylesheet" href="{{root}}/css/frame.css">
</head> </head>
<body> <body>
<div class="spinner">
<img src="{{root}}/img/spinner.gif">
</div>