Introduced info menu to reference line
Change-Id: Ib5e0c4226e60bdcdbada3ebf71a07c27e14fad90
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index 81bc697..230c275 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -11,9 +11,9 @@
*/
define([
'match/info', // rename to anno
- // 'match/reference', // rename to meta
- 'util'
-], function (infoClass) { //, refClass) {
+ 'match/treemenu',
+ 'util'
+], function (infoClass,matchTreeMenuClass) { //, refClass) {
// Localization values
var loc = KorAP.Locale;
@@ -179,11 +179,13 @@
close.setAttribute('title', loc.CLOSE);
// Add info button
+ /*
var info = document.createElement('li');
info.appendChild(document.createElement('span'))
.appendChild(document.createTextNode(loc.SHOWINFO));
info.classList.add('info');
info.setAttribute('title', loc.SHOWINFO);
+ */
var that = this;
@@ -192,7 +194,35 @@
// There is a reference line
if (refLine) {
+
+ // Temporary
+ var ops = document.createElement('div');
+ ops.classList.add('action', 'bottom', 'hui');
+
+ var meta = document.createElement('span');
+ ops.appendChild(meta);
+ meta.appendChild(document.createTextNode('+ Meta'));
+ meta.setAttribute('title', loc.SHOW_META);
+ meta.classList.add('meta');
+
+ var info = document.createElement('span');
+ ops.appendChild(info);
+ info.appendChild(document.createTextNode('+ Anno'));
+ info.setAttribute('title', loc.SHOWINFO);
+ info.classList.add('info');
+
+ var tree = document.createElement('span');
+ ops.appendChild(tree);
+ tree.appendChild(document.createTextNode('+ Tree'));
+ tree.setAttribute('title', loc.ADDTREE);
+ tree.classList.add('tree');
+ refLine.insertBefore(
+ ops,
+ refLine.firstChild
+ );
+
+ /*
var meta = document.createElement('span');
meta.appendChild(
document.createElement('span')
@@ -205,6 +235,7 @@
meta,
refLine.firstChild
);
+ */
meta.addEventListener(
'click', function (e) {
@@ -212,6 +243,34 @@
that.info().addMeta();
}
);
+
+ // Add information, unless it already exists
+ info.addEventListener(
+ 'click', function (e) {
+ e.halt();
+ that.info().addTable();
+ }
+ );
+
+ tree.addEventListener(
+ 'click', function (e) {
+ e.halt();
+
+ // Not yet initialized
+ if (that._treemenu === undefined) {
+ that._treemenu = that.initTreeMenu();
+
+ // TODO:
+ // Do not add the tree menu to the button!
+ // Only reposition a global treemenu element there,
+ // that is positioned below the annotation helper!
+ this.appendChild(that._treemenu.element());
+ };
+ var tm = that._treemenu;
+ tm.show();
+ tm.focus();
+ }
+ );
};
// Close match
@@ -221,13 +280,15 @@
});
// Add information, unless it already exists
+ /*
info.addEventListener('click', function (e) {
e.halt();
that.info().addTable();
});
+ */
ul.appendChild(close);
- ul.appendChild(info);
+ // ul.appendChild(info);
return true;
},
@@ -286,6 +347,84 @@
return this._info;
},
+
+ initTreeMenu : function () {
+
+ // Join spans and relations
+ var treeLayers = []
+ var spans = this.getSpans();
+ var rels = this.getRels();
+ var i;
+ for (i in spans) {
+ treeLayers.push(spans[i]);
+ };
+ for (i in rels) {
+ treeLayers.push(rels[i]);
+ };
+
+ // Get spans
+ treeLayers = treeLayers.sort(
+ function (a, b) {
+ if (a.foundry < b.foundry) {
+ return -1;
+ }
+ else if (a.foundry > b.foundry) {
+ return 1;
+ }
+ else if (a.layer < b.layer) {
+ return -1;
+ }
+ else if (a.layer > b.layer) {
+ return 1;
+ };
+ return 0;
+ });
+
+ var menuList = [];
+
+ // Show tree views
+ for (var i = 0; i < treeLayers.length; i++) {
+ var span = treeLayers[i];
+
+ // Add foundry/layer to menu list
+ menuList.push([
+ span.foundry + '/' + span.layer,
+ span.foundry,
+ span.layer,
+ span.type
+ ]);
+ };
+
+ // Create tree menu
+ return matchTreeMenuClass.create(this.info(), menuList);
+ /*
+ var span = document.createElement('p');
+ span.classList.add('addtree');
+ span.appendChild(document.createTextNode(loc.ADDTREE));
+ var treeElement = treemenu.element();
+ span.appendChild(treeElement);
+
+ span.addEventListener('click', function (e) {
+ treemenu.show();
+ treemenu.focus();
+ });
+ */
+ },
+
+
+ /**
+ * Get tree menu.
+ * There is only one menu rendered
+ * - no matter how many trees exist
+ */
+ /*
+ treeMenu : function (list) {
+ if (this._treeMenu !== undefined)
+ return this._treeMenu;
+
+ return this._treeMenu = matchTreeMenuClass.create(this, list);
+ },
+ */
/**
* Get match element.
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index d207867..a0b7424 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -7,7 +7,6 @@
'match/tree',
'match/reference', // rename to meta
'match/relations',
- 'match/treemenu',
'match/querycreator',
'util'
], function (infoLayerClass,
@@ -15,7 +14,6 @@
matchTreeClass,
matchRefClass,
matchRelClass,
- matchTreeMenuClass,
matchQueryCreator) {
// Override
@@ -188,11 +186,13 @@
destroy : function () {
// Remove circular reference
+ /*
if (this._treeMenu !== undefined)
delete this._treeMenu["info"];
this._treeMenu.destroy();
this._treeMenu = undefined;
+ */
this._match = undefined;
this._matchCreator = undefined;
// Element destroy
@@ -304,8 +304,6 @@
metaElem,
elem.firstChild
);
-
- console.log(elem);
};
},
@@ -331,73 +329,7 @@
this._matchCreator = matchQueryCreator.create(info);
});
-
- info.appendChild(this.addTreeMenu());
- },
-
-
- addTreeMenu : function () {
-
- // Join spans and relations
- var treeLayers = []
- var spans = this._match.getSpans();
- var rels = this._match.getRels();
- var i;
- for (i in spans) {
- treeLayers.push(spans[i]);
- };
- for (i in rels) {
- treeLayers.push(rels[i]);
- };
-
- // Get spans
- treeLayers = treeLayers.sort(
- function (a, b) {
- if (a.foundry < b.foundry) {
- return -1;
- }
- else if (a.foundry > b.foundry) {
- return 1;
- }
- else if (a.layer < b.layer) {
- return -1;
- }
- else if (a.layer > b.layer) {
- return 1;
- };
- return 0;
- });
-
- var menuList = [];
-
- // Show tree views
- for (var i = 0; i < treeLayers.length; i++) {
- var span = treeLayers[i];
-
- // Add foundry/layer to menu list
- menuList.push([
- span.foundry + '/' + span.layer,
- span.foundry,
- span.layer,
- span.type
- ]);
- };
-
- // Create tree menu
- var treemenu = this.treeMenu(menuList);
- var span = document.createElement('p');
- span.classList.add('addtree');
- span.appendChild(document.createTextNode(loc.ADDTREE));
-
- var treeElement = treemenu.element();
- span.appendChild(treeElement);
-
- span.addEventListener('click', function (e) {
- treemenu.show();
- treemenu.focus();
- });
-
- return span;
+ // info.appendChild(this.addTreeMenu());
},
/**
@@ -415,19 +347,6 @@
this._element = info;
return this._element;
- },
-
-
- /**
- * Get tree menu.
- * There is only one menu rendered
- * - no matter how many trees exist
- */
- treeMenu : function (list) {
- if (this._treeMenu !== undefined)
- return this._treeMenu;
-
- return this._treeMenu = matchTreeMenuClass.create(this, list);
}
};
});
diff --git a/dev/js/src/match/reference.js b/dev/js/src/match/reference.js
index 9462874..41d40af 100644
--- a/dev/js/src/match/reference.js
+++ b/dev/js/src/match/reference.js
@@ -63,6 +63,7 @@
var metaTable = document.createElement('div');
metaTable.classList.add('metatable');
+ /*
var header = metaTable.appendChild(
document.createElement('h6')
);
@@ -72,6 +73,7 @@
).appendChild(
document.createTextNode(loc.METADATA)
);
+ */
var metaDL = metaTable.appendChild(
document.createElement('dl')
@@ -87,8 +89,10 @@
k !== "corpusID" &&
k !== "docID" &&
k !== "textID" &&
+ /*
k !== "corpusSigle" &&
k !== "docSigle" &&
+ */
k !== "layerInfos") {
var metaL = document.createElement('div');
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index c773d53..2afea29 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -86,10 +86,10 @@
vertical-align: middle;
left: 3px;
> span:first-child {
- border: {
- top-left-radius: 0;
- bottom-left-radius: 0;
- }
+ border: {
+ top-left-radius: 0;
+ bottom-left-radius: 0;
+ }
}
margin-left: 100%;
padding: 0;
@@ -128,8 +128,8 @@
> span.key {
position: relative;
> ul {
- margin: 0;
- margin-left: 3.3em;
+ margin: 0;
+ margin-left: 3.3em;
}
}
}
@@ -171,35 +171,6 @@
font-size: 0;
line-height: 0;
text-align: center;
-
- > span {
- box-shadow: $choose-box-shadow;
- cursor: pointer;
- font-size: 9pt;
- line-height: 1.5em;
- padding: 0 4px;
- display: inline-block;
- @include choose-item;
- border-style: solid;
- border-width: $border-size 0;
- &:hover {
- @include choose-hover;
- }
- &:first-child {
- border: {
- left-width: $border-size;
- top-left-radius: $standard-border-radius;
- bottom-left-radius: $standard-border-radius;
- }
- }
- &:last-child {
- border: {
- right-width: $border-size;
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
- }
- }
- }
}
> .docGroup {
@@ -263,6 +234,38 @@
}
}
+.vc .operators,
+div.action.bottom {
+ > span {
+ cursor: pointer;
+ box-shadow: $choose-box-shadow;
+ font-size: 9pt;
+ line-height: 1.5em;
+ padding: 0 4px;
+ display: inline-block;
+ @include choose-item;
+ border-style: solid;
+ border-width: $border-size 0;
+ &:hover {
+ @include choose-hover;
+ }
+ &:first-child {
+ border: {
+ left-width: $border-size;
+ top-left-radius: $standard-border-radius;
+ bottom-left-radius: $standard-border-radius;
+ }
+ }
+ &:last-child {
+ border: {
+ right-width: $border-size;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
+ }
+ }
+}
+
/**
* The z-index cascade for groups.
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index f561b93..b99057d 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -168,19 +168,38 @@
/**
* References
*/
+
#search > ol > li p.ref {
display: none;
+ // TEMP! Remove
> span.meta {
cursor: pointer;
- color: $nearly-white;
+ @include choose-item;
+ margin: $border-size $border-size 0 $border-size !important;
+ text-align: center;
text-decoration: none;
padding: 0pt 3pt;
+ border: {
+ width: $border-size;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+ &:hover {
+ cursor:pointer;
+ @include choose-hover;
+ }
+ /*
+ color: $nearly-white;
+ */
&::after {
+ /*
font-size: 12pt;
- font-family: "FontAwesome";
+font-family: "FontAwesome";
content: $fa-metadata;
+ */
+ content: "+Meta";
}
> span {
@@ -189,6 +208,14 @@
}
}
+div.action.bottom {
+ display: inline-block;
+ margin-right: .5em;
+ > span {
+ position: relative;
+ }
+}
+
/**
* Active
*/
@@ -246,6 +273,7 @@
}
overflow: hidden;
+
div.meta {
display: none;
// visibility: hidden;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index f6ce9e0..6043386 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -30,11 +30,14 @@
position: relative;
width: 100%;
padding-top: $border-size;
-// background-color: $dark-orange;
+ // background-color: $dark-orange;
height: auto;
font-size: 10pt;
text-align: left;
+ // TODO: This may not be necessary anymore
+ // REMOVE!
+ /*
> p.addtree {
position: relative;
@include choose-item;
@@ -45,8 +48,8 @@
}
font-size: inherit;
- margin: $border-size $border-size 0 $border-size !important;
width: $left-width;
+ margin: $border-size $border-size 0 $border-size !important;
text-align: center;
cursor: pointer;
padding: 0 !important;
@@ -55,7 +58,8 @@
cursor:pointer;
@include choose-hover;
}
-
+ */
+ /*
*.menu {
border-top-right-radius: 8px;
position: absolute;
@@ -69,7 +73,8 @@
border-top-right-radius: 5px;
}
}
- }
+}
+*/
p.queryfragment {
position:relative;
@@ -113,6 +118,22 @@
}
}
+div.action.bottom span.tree .menu {
+ border-top-right-radius: 8px;
+ z-index: 200;
+ position: absolute;
+ width: $left-width;
+ left: 0;
+ bottom: 0;
+ text-align: left;
+ margin: -1* $border-size;
+ margin-top: 0;
+ > li:first-of-type {
+ border-top-right-radius: 5px;
+ }
+}
+
+
div.matchtable {
z-index: 20;
margin-left: $left-distance - ($border-size / 2);
@@ -252,10 +273,11 @@
}
- /**
- * Label
- */
-div.matchtree, div.metatable {
+/**
+ * Label
+ */
+// The metatable branch was experimental
+div.matchtree { //, div.metatable {
h6 {
display: inline;
font-size: inherit;
@@ -263,7 +285,7 @@
margin: 0;
padding: 0 !important;
float: left;
- > span, > div {
+ > span { // , > div {
@include matchinfo-head;
@include cell-info;
display: inline-block !important;
@@ -272,11 +294,13 @@
margin-left: $border-size;
}
}
+ /*
> div {
// Override half width !
width: $left-width;
}
+ */
}
}
@@ -337,11 +361,7 @@
}
div.metatable + div.matchtable {
- /*
- padding-top: 5 * $border-size;
- border-top: $border-size solid $middle-orange;
- */
- margin-top: 5 * $border-size;
+ margin-top: 4 * $border-size !important;
}
@@ -353,7 +373,7 @@
align-items: stretch;
width: auto;
padding-bottom: 0;
- margin-left: $left-distance;
+ // margin-left: $left-distance;
margin-right: $right-match-distance;
margin-top: $border-size;
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index bc985ed..ac5fc5f 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -91,12 +91,12 @@
padding: 1pt 3pt;
}
- div.matchtree, div.metatable {
+ div.matchtree { //, div.metatable {
h6 {
display: block;
float: none;
}
- > div, > dl {
+ > div { // , > dl {
margin-left: 2px;
}
}