Added close button to meta data
Change-Id: I5f94e275d40fe90271a7dfea25a3d81b313bb450
diff --git a/dev/demo/relationsdemo.js b/dev/demo/relationsdemo.js
index 7519ffe..7ad00a4 100644
--- a/dev/demo/relationsdemo.js
+++ b/dev/demo/relationsdemo.js
@@ -314,7 +314,7 @@
}
});
-require(['match/relations', 'match/tree'], function (relClass, treeClass) {
+require(['match/treearc', 'match/treehierarchy'], function (relClass, treeClass) {
var rel = relClass.create();
/*
diff --git a/dev/js/spec/matchSpec.js b/dev/js/spec/matchSpec.js
index ccf32de..80f1de8 100644
--- a/dev/js/spec/matchSpec.js
+++ b/dev/js/spec/matchSpec.js
@@ -596,7 +596,7 @@
describe('KorAP.MatchRelation', function () {
- var relClass = require('match/relations')
+ var relClass = require('match/treearc')
var relExample = "<span class=\"context-left\"></span>" +
"<span class=\"match\">" +
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 43319e2..6019e40 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -4,16 +4,16 @@
define([
'match/infolayer',
'match/table',
- 'match/tree',
+ 'match/treehierarchy',
+ 'match/treearc',
'match/meta',
- 'match/relations',
'match/querycreator',
'util'
], function (infoLayerClass,
matchTableClass,
- matchTreeClass,
+ matchTreeHierarchyClass,
+ matchTreeArcClass,
matchMetaClass,
- matchRelClass,
matchQueryCreator) {
// Override
@@ -165,10 +165,10 @@
// Todo: This should be cached somehow
if (type === "spans") {
- cb(matchTreeClass.create(matchResponse["snippet"]));
+ cb(matchTreeHierarchyClass.create(matchResponse["snippet"]));
}
else if (type === "rels") {
- cb(matchRelClass.create(matchResponse["snippet"]));
+ cb(matchTreeArcClass.create(matchResponse["snippet"]));
}
// Unknown tree type
@@ -281,6 +281,7 @@
// Add meta information to match
showMeta : function () {
var matchmeta = d.createElement('div');
+ matchmeta.classList.add('matchmeta', 'loading');
// TODO: This is part of the getMeta!
var metaInfo = this._match.element().getAttribute('data-info');
@@ -293,25 +294,27 @@
// Add metainfo to matchview
var metaElem = matchMetaClass.create(this._match).element(metaInfo);
- var elem = this.element();
-
+ this.element().appendChild(metaElem);
+ /*
elem.insertBefore(
metaElem,
elem.firstChild
);
+ */
};
+
+ // Load data
+ matchmeta.classList.remove('loading');
},
// Add table
showTable : function () {
- var info = this.element();
-
// Append default table
var matchtable = d.createElement('div');
matchtable.classList.add('matchtable', 'loading');
- info.appendChild(matchtable);
+ this.element().appendChild(matchtable);
// Create the table asynchronous
this.getTableData(undefined, function (table) {
@@ -328,7 +331,6 @@
});
},
-
/**
* Create match information view.
*/
diff --git a/dev/js/src/match/meta.js b/dev/js/src/match/meta.js
index 33d5461..02da3dc 100644
--- a/dev/js/src/match/meta.js
+++ b/dev/js/src/match/meta.js
@@ -102,7 +102,30 @@
};
};
+ this.addButton('close', function (e) {
+ var el = this.element();
+ el.parentNode.removeChild(el);
+ e.halt();
+ });
+
return this._element;
- }
+ },
+
+ // TODO: This should be a method by all matchinfo objects
+ addButton : function (buttonType, cb) {
+ // TODO: Unless existent
+ var actions = document.createElement('ul');
+ actions.classList.add('action', 'image');
+ var button = actions.addE('li');
+ button.className = buttonType;
+ button.addE('span').addT(buttonType);
+ button.addEventListener(
+ 'click', cb.bind(this)
+ );
+
+ this.element().appendChild(actions);
+ return actions;
+ },
+
};
});
diff --git a/dev/js/src/match/relations.js b/dev/js/src/match/treearc.js
similarity index 100%
rename from dev/js/src/match/relations.js
rename to dev/js/src/match/treearc.js
diff --git a/dev/js/src/match/tree.js b/dev/js/src/match/treehierarchy.js
similarity index 100%
rename from dev/js/src/match/tree.js
rename to dev/js/src/match/treehierarchy.js
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index c4acbd4..3709b59 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -278,6 +278,10 @@
}
+div.metatable {
+ position: relative;
+}
+
/**
* Label
*/
@@ -328,48 +332,50 @@
margin-right: $right-match-distance;
background-color: $light-orange; // $nearly-white; // $light-orange;
- > ul.action.image {
- display: block;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 20;
- margin: 0;
- padding: 0;
- // margin-right: -1 * $right-match-distance;
- width: $right-match-distance;
- li {
- cursor: pointer;
- color: $nearly-white;
- text-decoration: none;
- > span {
- @include blind;
- }
- border-width: 0;
- // z-index: 8;
- text-decoration:none;
- text-align: center;
- font-style: normal;
+ }
+}
- &.download::after {
- font-family: 'FontAwesome';
- content: $fa-download;
- }
-
- &.close::after {
- font-family: 'FontAwesome';
- content: $fa-close;
- }
- }
+div.matchinfo ul.action.image {
+ display: block;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 20;
+ margin: 0;
+ padding: 0;
+ // margin-right: -1 * $right-match-distance;
+ width: $right-match-distance;
+ li {
+ cursor: pointer;
+ color: $nearly-white;
+ text-decoration: none;
+ > span {
+ @include blind;
+ }
+ border-width: 0;
+ // z-index: 8;
+ text-decoration:none;
+ text-align: center;
+ font-style: normal;
+
+ &.download::after {
+ font-family: 'FontAwesome';
+ content: $fa-download;
+ }
+
+ &.close::after {
+ font-family: 'FontAwesome';
+ content: $fa-close;
}
}
}
-div.metatable + div.matchtable {
+
+div.metatable + div.matchtable,
+div.metatable + div.matchtree {
margin-top: 4 * $border-size !important;
}
-
div.metatable > dl {
display: flex;
flex-direction: row;