aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--ext/bg/js/templates.js4
-rw-r--r--ext/fg/css/frame.css7
-rw-r--r--ext/fg/img/spinner.gifbin0 -> 7358 bytes
-rw-r--r--ext/fg/js/driver.js2
-rw-r--r--ext/fg/js/frame.js10
-rw-r--r--ext/manifest.json1
-rw-r--r--tmpl/header.html4
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
new file mode 100644
index 00000000..8ed30cb6
--- /dev/null
+++ b/ext/fg/img/spinner.gif
Binary files 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}"]`);
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>