Added KoralQuery and alignment to result buttons
diff --git a/dev/demo/all.html b/dev/demo/all.html
index f4adf40..473a653 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -4,6 +4,12 @@
<title>Complete Demo</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+ <script>//<![CDATA[
+
+ window.KorAP = window.KorAP || {};
+ KorAP.URL = '';
+
+ //]]></script>
<script data-main="alldemo.js" src="../js/lib/require.js" async="async"></script>
</head>
<body>
@@ -29,7 +35,8 @@
<!-- Search in the following virtual collection -->
<div id="vc-view"></div>
in
- <input id="vc-name" name="vc-name" type="hidden" value>
+ <input id="collection-show" name="cs" type="hidden">
+ <input id="collection-name" name="collection-name" type="hidden">
<input id="collection" name="collection" type="text" value="">
with <span class="select">
<!-- Change this to js-menu -->
@@ -65,7 +72,7 @@
</aside>
<main>
- <div class="resultinfo">
+ <div id="resultinfo">
<div id="pagination">
<a rel="prev"><span><span><</span></span></a>
<a rel="self"><span>1</span></a>
@@ -78,6 +85,10 @@
<p class="found">Found <span id="total-results">unknown amount of matches</span> in 59.93ms</p>
</div>
+ <script>
+ KorAP.koralQuery = {"matches":["..."],"query":{"wrap":{"layer":"orth","match":"match:eq","foundry":"opennlp","key":"Goethe","@type":"koral:term"},"@type":"koral:token"},"meta":{"serialQuery":"tokens:s:Goethe","startIndex":0,"version":"unknown","itemsPerPage":25,"context":"p","benchmark":"0.103553092 s","totalResults":-1}};
+ </script>
+
<div id="search">
<ol class="align-left">
<li data-corpus-id="WPD"
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 0e49091..1749e6d 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -27,6 +27,8 @@
var loc = KorAP.Locale;
loc.VC_allCorpora = loc.VC_allCorpora || 'all Corpora';
loc.VC_oneCollection = loc.VC_oneCollection || 'one Collection';
+ loc.TOGGLE_ALIGN = loc.TOGGLE_ALIGN || 'toggle Alignment';
+ loc.SHOW_KQ = loc.SHOW_KQ || 'show KoralQuery';
// Override KorAP.log
window.alertify = alertifyClass;
@@ -71,7 +73,7 @@
vcname.appendChild(
document.createTextNode(
- document.getElementById('vc-name').value || currentVC
+ document.getElementById('collection-name').value || currentVC
)
);
@@ -97,29 +99,68 @@
});
};
+ var result = document.getElementById('resultinfo');
+ var resultButton;
+ if (result != null) {
+ resultButton = result.appendChild(document.createElement('div'));
+ resultButton.classList.add('result', 'button');
+ };
+
+ // There is a koralQuery
+ if (KorAP.koralQuery !== undefined && resultButton !== null) {
+ var kq;
+
+ var toggle = document.createElement('a');
+ toggle.setAttribute('title', loc.SHOW_KQ)
+ toggle.classList.add('show-kq', 'button');
+ toggle.appendChild(document.createElement('span'))
+ .appendChild(document.createTextNode(loc.SHOW_KQ));
+ resultButton.appendChild(toggle);
+
+ if (toggle !== undefined) {
+
+ // Show koralquery
+ toggle.addEventListener(
+ 'click', function () {
+ if (kq === undefined) {
+ kq = document.createElement('div');
+ kq.setAttribute('id', 'koralquery');
+ kq.style.display = 'none';
+ var kqInner = document.createElement('div');
+ kq.appendChild(kqInner);
+ kqInner.innerHTML = JSON.stringify(KorAP.koralQuery, null, ' ');
+ hljs.highlightBlock(kqInner);
+ var sb = document.getElementById('search');
+ sb.insertBefore(kq, sb.firstChild);
+ };
+
+ kq.style.display = (kq.style.display === 'none') ? 'block' : 'none';
+ }
+ );
+ };
+ };
+
/**
* Toggle the alignment (left <=> right)
*/
- if (i > 0) {
- var br = document.querySelector('div.button.right');
- if (br !== null) {
- var toggle = document.createElement('a');
- toggle.setAttribute('title', 'toggle Alignment');
- // Todo: Reuse old alignment from cookie!
- var cl = toggle.classList;
- cl.add('align', 'right');
- toggle.addEventListener(
- 'click',
- function (e) {
- var ol = document.querySelector('#search > ol');
- ol.toggleClass("align-left", "align-right");
- this.toggleClass("left", "right");
- });
- toggle.appendChild(document.createElement('span'))
- .appendChild(document.createTextNode('Alignment'));
- br.appendChild(toggle);
- };
+ // querySelector('div.button.right');
+ if (i > 0 && resultButton !== null) {
+ var toggle = document.createElement('a');
+ toggle.setAttribute('title', loc.TOGGLE_ALIGN);
+ // Todo: Reuse old alignment from query
+ var cl = toggle.classList;
+ cl.add('align', 'right', 'button');
+ toggle.addEventListener(
+ 'click',
+ function (e) {
+ var ol = document.querySelector('#search > ol');
+ ol.toggleClass("align-left", "align-right");
+ this.toggleClass("left", "right");
+ });
+ toggle.appendChild(document.createElement('span'))
+ .appendChild(document.createTextNode(loc.TOGGLE_ALIGN));
+ resultButton.appendChild(toggle);
};
@@ -127,14 +168,16 @@
* Toggle the Virtual Collection builder
*/
if (vcname) {
+ var collectionShow = document.getElementById('collection-show');
var vc;
- vcname.onclick = function () {
+ var vcclick = function () {
var view = document.getElementById('vc-view');
// The vc is visible
if (this.classList.contains('active')) {
view.removeChild(vc.element());
this.classList.remove('active');
+ delete collectionShow['value'];
}
// The vc is not visible
@@ -143,8 +186,13 @@
vc = _getCurrentVC(vcClass, vcArray);
view.appendChild(vc.element());
this.classList.add('active');
+ collectionShow.value = 'true';
};
};
+ vcname.onclick = vcclick;
+ if (collectionShow.value === 'true') {
+ vcclick.apply();
+ };
};
@@ -170,21 +218,6 @@
// Initialize documentation links
obj.tutorial.initDocLinks(document);
- // There is a currentQuery
- /*
- if (KorAP.koralQuery !== undefined) {
- var kq = document.createElement('div');
- kq.setAttribute('id', 'koralquery');
-
- var kqInner = document.createElement('div');
- kq.appendChild(kqInner);
- kqInner.innerHTML = JSON.stringify(KorAP.koralQuery, null, ' ');
- hljs.highlightBlock(kqInner);
-
- var sb = document.getElementById('search');
- sb.insertBefore(kq, sb.firstChild);
- };
- */
/**
* Add VC creation on submission.
diff --git a/dev/js/src/loc/de.js b/dev/js/src/loc/de.js
index fce90a1..ab443f4 100644
--- a/dev/js/src/loc/de.js
+++ b/dev/js/src/loc/de.js
@@ -28,4 +28,7 @@
loc.ADDTREE = 'Baumansicht hinzufügen';
loc.SHOWINFO = 'Informationen';
loc.CLOSE = 'Schließen';
+
+ loc.TOGGLE_ALIGN = 'tausche Textausrichtung';
+ loc.SHOW_KQ = 'zeige KoralQuery';
});
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index 0685242..b607f2c 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -110,9 +110,12 @@
KorAP._vcMatchopMenu = {
'string' : menuClass.create([
['eq', null],
- ['ne', null],
+ ['ne', null]
+/*
+ ,
['contains', null],
['excludes', null]
+*/
]),
'date' : menuClass.create([
['eq', null],
@@ -121,9 +124,9 @@
]),
'regex' : menuClass.create([
['eq', null],
- ['ne', null],
+ ['ne', null]/*,
['contains', null],
- ['excludes', null]
+ ['excludes', null]*/
])
};
};
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 2fe143d..395613f 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -34,7 +34,7 @@
a {
- &:link {
+ &:link, &.button {
color: $dark-orange;
text-decoration: none;
&:hover {
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index c9d2c3d..e84d912 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -92,12 +92,6 @@
> a.tutorial::after {
content: $fa-tutorial;
}
- > a.align.left::after {
- content: $fa-left-align;
- }
- > a.align.right::after {
- content: $fa-right-align;
- }
> a.question::after {
content: $fa-question;
}
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index 93b1714..ba3c70a 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -1,15 +1,40 @@
@charset "utf-8";
@import "../util";
-div.resultinfo {
+#resultinfo {
clear: both;
+ text-align: right;
+ font-size: 10pt;
p.found {
- font-size: 10pt;
+ display: inline;
padding: 0;
margin: 0;
text-align: right;
}
+ div.result.button {
+ display: inline-block;
+ > a {
+ cursor:pointer;
+ position: relative;
+ margin: 0 2pt;
+ > span {
+ @include blind;
+ }
+ }
+ > a::after {
+ font-family: 'FontAwesome';
+ }
+ > a.align.left::after {
+ content: $fa-left-align;
+ }
+ > a.align.right::after {
+ content: $fa-right-align;
+ }
+ > a.show-kq::after {
+ content: $fa-code;
+ }
+ }
}
#total-results {
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index f3b296c..ef942cd 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -13,7 +13,7 @@
#search ol,
header,
header input,
- div.resultinfo p.found,
+ div#resultinfo,
#pagination > a {
font-size: 9pt;
}