show spinner when adding notes (resolves #25)
This commit is contained in:
parent
8049c6083e
commit
8615d5f497
@ -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;
|
||||
|
@ -90,6 +90,13 @@ body {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
bottom: 5px;
|
||||
position: fixed;
|
||||
right: 5px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* term styles */
|
||||
|
||||
.term-expression {
|
||||
|
BIN
ext/fg/img/spinner.gif
Normal file
BIN
ext/fg/img/spinner.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 7.2 KiB |
@ -279,6 +279,8 @@ class Driver {
|
||||
} else {
|
||||
alert('Note could not be added');
|
||||
}
|
||||
|
||||
this.popup.invokeApi('addNoteComplete');
|
||||
}).catch(error => {
|
||||
alert('Error: ' + error);
|
||||
});
|
||||
|
@ -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}"]`);
|
||||
|
@ -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"
|
||||
|
@ -16,3 +16,7 @@
|
||||
<link rel="stylesheet" href="{{root}}/css/frame.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="spinner">
|
||||
<img src="{{root}}/img/spinner.gif">
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user