Change close to minimize
Change-Id: I9eeb858b6d03a54114f332486ae0f60782912acf
diff --git a/dev/js/spec/matchSpec.js b/dev/js/spec/matchSpec.js
index b72cd9a..8df6e86 100644
--- a/dev/js/spec/matchSpec.js
+++ b/dev/js/spec/matchSpec.js
@@ -391,7 +391,7 @@
expect(actions[2].getAttribute("class")).toEqual("tree");
// Close the match
- m.close();
+ m.minimize();
expect(e.classList.contains('active')).toBe(false);
expect(e["_match"]).not.toBe(undefined);
});
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index d992c3f..8e42b4e 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -103,9 +103,7 @@
};
vcchoose = vcname.addE('span');
- vcchoose.addT(
- vc.getName()
- );
+ vcchoose.addT(vc.getName());
if (vc.wasRewritten()) {
vcchoose.classList.add('rewritten');
@@ -252,22 +250,52 @@
* Toggle the Virtual Collection builder
*/
if (vcname) {
- var vcclick = function () {
- var view = d.getElementById('vc-view');
+ vc.onMinimize = function () {
+ vcname.classList.remove('active');
+ delete show['collection'];
+ };
+ vc.onOpen = function () {
+ vcname.classList.add('active');
+ show['collection'] = true;
+ };
+
+ var vcclick = function () {
+
+ if (vc.isOpen()) {
+ vc.minimize()
+ }
+ else {
+ var view = d.getElementById('vc-view');
+ if (!view.firstChild)
+ view.appendChild(vc.element());
+
+ vc.open();
+ }
+
+ /*
// The vc is visible
if (vcname.classList.contains('active')) {
- view.removeChild(vc.element());
+
+ // view.removeChild(vc.element());
+ vc.minimize();
vcname.classList.remove('active');
delete show['collection'];
}
- // The vc is not visible
+ // The vc is not visible yet
else {
- view.appendChild(vc.element());
+
+ // Spawn the element for the first time
+ var view = d.getElementById('vc-view');
+ if (!view.firstChild)
+ view.appendChild(vc.element());
+
+ vc.open();
vcname.classList.add('active');
show['collection'] = true;
};
+ */
};
vcname.onclick = vcclick;
diff --git a/dev/js/src/loc/de.js b/dev/js/src/loc/de.js
index 325e402..8192df3 100644
--- a/dev/js/src/loc/de.js
+++ b/dev/js/src/loc/de.js
@@ -29,8 +29,8 @@
loc.SHOWANNO = 'Token';
loc.SHOWINFO = 'Informationen';
loc.CLOSE = 'Schließen';
+ loc.MINIMIZE = 'Zuklappen';
loc.DOWNLOAD = 'Herunterladen';
-
loc.TOGGLE_ALIGN = 'tausche Textausrichtung';
loc.SHOW_KQ = 'zeige KoralQuery';
loc.SHOW_META = 'Metadaten';
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index d5b365e..3c44656 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -17,11 +17,7 @@
// Localization values
const loc = KorAP.Locale;
- // loc.SHOWINFO = loc.SHOWINFO || 'Show information';
- // loc.ADDTREE = loc.ADDTREE || 'Relations';
- // loc.SHOWANNO = loc.SHOWANNO || 'Tokens';
- loc.CLOSE = loc.CLOSE || 'Close';
- // loc.SHOW_META = loc.SHOW_META || 'Metadata';
+ loc.MINIMIZE = loc.MINIMIZE || 'Minimize';
// 'corpusID', 'docID', 'textID'
const _matchTerms = ['textSigle', 'matchID', 'available'];
@@ -174,8 +170,8 @@
);
var that = this;
- btn.add(loc.CLOSE, ['button-icon','close'], function () {
- that.close();
+ btn.add(loc.MINIMIZE, ['button-icon','minimize'], function () {
+ that.minimize();
});
element.appendChild(btn.element());
@@ -209,16 +205,16 @@
// Todo: Test toggle
toggle : function () {
if (this._element.classList.contains('active'))
- this.close();
+ this.minimize();
else
this.open();
},
/**
- * Close info view
+ * Minimize info view
*/
- close : function () {
+ minimize : function () {
this._element.classList.remove('active');
},
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index 35734ad..bed434f 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -55,6 +55,7 @@
'buttongroup',
'panel',
'view/corpstatv',
+ 'buttongroup',
'util'
], function(
unspecDocClass,
@@ -66,7 +67,8 @@
dpClass,
buttonGrClass,
panelClass,
- corpStatVClass) {
+ corpStatVClass,
+ buttonGroupClass) {
"use strict";
KorAP._validUnspecMatchRE = new RegExp(
@@ -79,10 +81,11 @@
// KorAP._validDateMatchRE is defined in datepicker.js!
const loc = KorAP.Locale;
- loc.SHOW_STAT = loc.SHOW_STAT || 'Statistics';
- loc.VERB_SHOWSTAT = loc.VERB_SHOWSTAT || 'Corpus Statistics';
+ loc.SHOW_STAT = loc.SHOW_STAT || 'Statistics';
+ loc.VERB_SHOWSTAT = loc.VERB_SHOWSTAT || 'Corpus Statistics';
loc.VC_allCorpora = loc.VC_allCorpora || 'all corpora';
loc.VC_oneCollection = loc.VC_oneCollection || 'a virtual corpus';
+ loc.MINIMIZE = loc.MINIMIZE || 'Minimize';
KorAP._vcKeyMenu = undefined;
KorAP._vcDatePicker = dpClass.create();
@@ -301,11 +304,23 @@
};
this._element = document.createElement('div');
- this._element.setAttribute('class', 'vc');
+ this._element.classList.add('vc');
+
this._builder = this._element.addE('div');
this._builder.setAttribute('class', 'builder');
+ var btn = buttonGroupClass.create(
+ ['action','button-view']
+ );
+ var that = this;
+ btn.add(loc.MINIMIZE, ['button-icon','minimize'], function () {
+ that.minimize();
+ });
+ this._element.appendChild(btn.element());
+
+
+
// Initialize root
this._builder.appendChild(this._root.element());
@@ -315,6 +330,36 @@
return this._element;
},
+
+ /**
+ * Check, if the VC is open
+ */
+ isOpen : function () {
+ if (!this._element)
+ return false;
+ return this._element.classList.contains('active');
+ },
+
+ /**
+ * Open the VC view
+ */
+ open : function () {
+ this.element().classList.add('active');
+ if (this.onOpen)
+ this.onOpen();
+ },
+
+
+ /**
+ * Minimize the VC view
+ */
+ minimize : function () {
+ this.element().classList.remove('active');
+ if (this.onMinimize)
+ this.onMinimize();
+ },
+
+
/**
* Update the whole object based on the underlying data structure
*/
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index eeea883..d880e55 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -307,10 +307,11 @@
border-radius: $standard-border-radius;
}
+/*
header #vc-view > div {
margin: 1.3em 0 .5em 0;
}
-
+*/
#vc-choose > span.rewritten {
&::after {
@@ -327,15 +328,26 @@
}
}
-div#vc-view > div.vc {
- border: 2px solid $dark-green;
- background-color: $nearly-white;
- > div:first-child {
- margin: 1.3em;
+div#vc-view {
+ position:relative;
+ > div.vc {
+ display: none;
+ &.active {
+ display: block;
+ }
+ margin: 1.3em 0 .5em 0;
+ border: 2px solid $dark-green;
+ background-color: $nearly-white;
+ > div:first-child {
+ margin: 1.3em;
+ }
}
}
div.panel.vcinfo {
padding: 3pt 0pt 3pt 3pt;
background-color: $dark-green;
+ div.button-group > span {
+ box-shadow: none;
+ }
}
diff --git a/dev/scss/main/buttongroup.scss b/dev/scss/main/buttongroup.scss
index 6a1ad38..8c3d620 100644
--- a/dev/scss/main/buttongroup.scss
+++ b/dev/scss/main/buttongroup.scss
@@ -71,6 +71,10 @@
content: $fa-close;
}
+ &.minimize::after {
+ content: $fa-minimize;
+ }
+
&.plugin::after {
content: $fa-plugin;
}
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 26d985d..077ba10 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -238,6 +238,7 @@
$fa-extlink: "\f08e";
$fa-up: "\f0d8";
$fa-down: "\f0d7";
+$fa-minimize: "\f0d8";
$fa-close: "\f00d";
$fa-download: "\f019";
$fa-info: "\f05a";