Fixed title and loading phase
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index b75e713..97624dc 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -104,7 +104,6 @@
cb(null);
// Get info (may be cached)
- // TODO: Async
KorAP.API.getMatchInfo(
this._match,
{ 'spans' : false, 'layer' : focus },
@@ -195,9 +194,15 @@
}
);
+ tree.classList.add('loading');
+
// Get tree data async
this.getTree(foundry, layer, function (treeObj) {
+
+ tree.classList.remove('loading');
+
// Something went wrong - probably log!!!
+
if (treeObj === null) {
tree.appendChild(document.createTextNode('No data available.'));
}
@@ -208,10 +213,11 @@
// to move the root into the center or the actual
// match)
treeObj.center();
- }
+ };
if (cb !== undefined)
cb(treeObj);
+
});
},
@@ -229,12 +235,13 @@
// Append default table
var matchtable = document.createElement('div');
- matchtable.classList.add('matchtable');
+ matchtable.classList.add('matchtable', 'loading');
info.appendChild(matchtable);
// Create the table asynchronous
this.getTable(undefined, function (table) {
if (table !== null) {
+ matchtable.classList.remove('loading');
matchtable.appendChild(table.element());
};
});
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index a0be411..8327a9b 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -77,6 +77,7 @@
overflow-x: auto;
overflow-y: visible;
width: auto;
+
table {
display: table;
border-collapse: separate;
@@ -205,6 +206,14 @@
}
}
+div.loading {
+ height: 16px !important;
+ width: 16px !important;
+ margin: 0 auto !important;
+ background-image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
+}
+
+
/**
* SVG tree
*/