Improved tabbing
diff --git a/dev/demo/all.html b/dev/demo/all.html
index be720b8..a18b287 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -15,10 +15,10 @@
<body>
<div id="kalamar-bg"></div>
<header>
- <a href="/" class="logo"><h1><span>KorAP - Corpus Analysis Platform</span></h1></a>
+ <a href="/" class="logo" tabindex="-1"><h1><span>KorAP - Corpus Analysis Platform</span></h1></a>
<div class="button top">
- <a href="#" class="login"><span>Login</span></a>
+ <a href="#" class="login" tabindex="-1"><span>Login</span></a>
</div>
<form autocomplete="off" action="/kalamar" id="searchform">
@@ -56,7 +56,7 @@
<label for="q-cutoff-field"><span></span>Glimpse</label>
<!-- Todo: open tutorial - like openTutorial() -->
- <a href="doc/faq" class="question"><span>Question</span></a>
+ <a href="doc/faq" tabindex="-1" class="question"><span>Question</span></a>
<a href="tutorial.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
</div>
</form>
@@ -76,11 +76,11 @@
<div id="pagination">
<a rel="prev"><span><span><</span></span></a>
<a rel="self"><span>1</span></a>
- <a href="#2"><span>2</span></a>
- <a href="#3"><span>3</span></a>
+ <a href="#2" tabindex="4"><span>2</span></a>
+ <a href="#3" tabindex="4"><span>3</span></a>
<a class="ellipsis"><span><span>...</span></span></a>
- <a href="#52230"><span>52230</span></a>
- <a rel="next" href="#2"><span><span>></span></span></a>
+ <a href="#52230" tabindex="4"><span>52230</span></a>
+ <a rel="next" href="#2" tabindex="4"><span><span>></span></span></a>
</div>
<p class="found">Found <span id="total-results">unknown amount of matches</span> in 59.93ms</p>
</div>
@@ -90,14 +90,15 @@
</script>
<div id="search">
- <ol class="align-left">
+ <ol class="align-left" tabindex="-8">
<li data-corpus-id="WPD"
data-doc-id="WWW"
data-text-id="03313"
data-match-id="p102-103"
data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
id="WPD-WWW.03313-p102-103"
- class="marked">
+ class="marked"
+ tabindex="6">
<div>
<div class="flag"></div>
<div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><mark><mark class="class-2 level-1">Dies </mark><mark class="class-1 level-0"><mark class="class-2 level-1"><mark class="class-3 level-2">ist</mark> ein</mark> Test</mark></mark><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
@@ -111,7 +112,8 @@
data-text-id="01460"
data-match-id="p119-120"
data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
- id="WPD-FFF.01460-p119-120">
+ id="WPD-FFF.01460-p119-120"
+ tabindex="6">
<div>
<div class="snippet startMore endMore"><span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple </span><span class="match">test</span><span class="context-right"> problem.</span></div>
<div class="tokenInfo"></div>
@@ -125,7 +127,8 @@
data-match-id="p2564-2565"
data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
id="WPD-HHH.06056-p2564-2565"
- class="marked">
+ class="marked"
+ tabindex="6">
<div>
<div class="flag"></div>
<div class="snippet startMore endMore"><span class="context-left">HDTV Samples from European (and other) broadcasters and </span><span class="match">test</span><span class="context-right"> transmissions in Europe</span></div>
diff --git a/dev/js/src/hint.js b/dev/js/src/hint.js
index e07785b..f2f3149 100644
--- a/dev/js/src/hint.js
+++ b/dev/js/src/hint.js
@@ -30,11 +30,6 @@
/**
* Return keycode based on event
*/
- function _codeFromEvent (e) {
- if ((e.charCode) && (e.keyCode==0))
- return e.charCode
- return e.keyCode;
- };
// Initialize hint array
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 3f6d3a5..9aa410d 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -94,6 +94,7 @@
'#search > ol > li:not(.active)'
);
var i = 0;
+
for (i = 0; i < inactiveLi.length; i++) {
inactiveLi[i].addEventListener('click', function (e) {
if (this._match !== undefined)
@@ -103,6 +104,20 @@
};
e.halt();
});
+ inactiveLi[i].addEventListener('keydown', function (e) {
+ var code = _codeFromEvent(e);
+
+ switch (code) {
+ case 32:
+ if (this._match !== undefined)
+ this._match.toggle();
+ else {
+ matchClass.create(this).open();
+ };
+ e.halt();
+ break;
+ };
+ });
};
var result = document.getElementById('resultinfo');
@@ -292,4 +307,3 @@
};
return vc;
};
-
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index f6fbd41..88c87fb 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -190,6 +190,14 @@
return true;
},
+ // Todo: Test toggle
+ toggle : function () {
+ if (this._element.classList.contains('active'))
+ this.close();
+ else
+ this.open();
+ },
+
/**
* Close info view
diff --git a/dev/js/src/util.js b/dev/js/src/util.js
index f17ec2a..00a2bd5 100644
--- a/dev/js/src/util.js
+++ b/dev/js/src/util.js
@@ -35,6 +35,14 @@
node.removeChild(node.firstChild);
};
+// Utility to get either the charCode
+// or the keyCode of an event
+function _codeFromEvent (e) {
+ if ((e.charCode) && (e.keyCode==0))
+ return e.charCode
+ return e.keyCode;
+};
+
define(function () {
// Todo: That's double now!
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index 0685242..0bc7284 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -55,7 +55,7 @@
"use strict";
// ???
- KorAP._validStringMatchRE = new RegExp("^(?:eq|ne|contains|excludes)$");
+ KorAP._validStringMatchRE = new RegExp("^(?:eq|ne|contains(?:not)?|excludes)$");
KorAP._validDateMatchRE = new RegExp("^[lg]?eq$");
KorAP._validDateRE = new RegExp("^(?:\\d{4})(?:-\\d\\d(?:-\\d\\d)?)?$");
KorAP._overrideStyles = false;
@@ -112,7 +112,7 @@
['eq', null],
['ne', null],
['contains', null],
- ['excludes', null]
+ ['containsnot', null]
]),
'date' : menuClass.create([
['eq', null],
@@ -123,7 +123,7 @@
['eq', null],
['ne', null],
['contains', null],
- ['excludes', null]
+ ['containsnot', null]
])
};
};
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 66dfc6e..07943f0 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -557,6 +557,9 @@
case "excludes":
string += '!~';
break;
+ case "containsnot":
+ string += '!~';
+ break;
case "geq":
string += 'since';
break;
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index d383e73..4fee390 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -48,9 +48,12 @@
style: solid;
color: $nearly-white;
}
- &:hover {
+ &:hover, &:focus {
@include choose-hover;
}
+ &::-moz-focus-inner {
+ border: none;
+ }
&:active {
@include choose-active;
}
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index 7ad9ab4..4883423 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -3,6 +3,12 @@
$border-size: 2px;
+/*
+*:focus {
+ background-color: red !important;
+}
+*/
+
#search {
position: relative;
margin-bottom: 30px;
@@ -23,6 +29,19 @@
border: 1px solid $kwic-border;
font-size: 10pt;
> li {
+ &:focus:not(.active) {
+ background-color: $dark-orange !important;
+ &:not(:target) div.flag {
+ border-right-color: $nearly-white;
+ }
+ > div > div.snippet {
+ color: $nearly-white;
+ text-shadow: none !important;
+ .class-3 {
+ border-color: $nearly-white;
+ }
+ }
+ }
position: relative;
border: {
style: solid;
@@ -60,13 +79,13 @@
> span {
white-space: no-wrap !important;
}
- color: #666;
+ // color: #666;
}
> mark,
> span.match {
font-weight: bold;
/* text-shadow: $kwic-match-shadow; */
- color: $kwic-match-color;
+ // color: $kwic-match-color;
padding-left: 4pt;
padding-right: 2pt;
}
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
index 4fa189c..bc7e54e 100644
--- a/dev/scss/main/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -110,8 +110,12 @@
line-height: 1em;
}
}
- &:link:hover span {
- @include choose-hover;
+ &:link:hover,
+ &:link:focus {
+ outline: none;
+ span {
+ @include choose-hover;
+ }
}
}
}
\ No newline at end of file