Get rid of jQuery
diff --git a/lib/Korap.pm b/lib/Korap.pm
index c5073ef..49922b2 100644
--- a/lib/Korap.pm
+++ b/lib/Korap.pm
@@ -62,12 +62,13 @@
'korap.js' => (
# '/js/d3.v3.min.js',
# '/js/dagre-d3.min.js',
- '/js/jquery-2.0.0.min.js',
+# '/js/translateTree.js',
+# '/js/jquery-2.0.0.min.js',
'/js/tutorialCookie.js',
'/js/translateTable.js',
-# '/js/translateTree.js',
'/js/hint.js',
'/js/highlight.pack.js',
+ '/js/ajax.js',
$self->notifications->scripts
)
);
@@ -102,7 +103,6 @@
$collection->to('info#about_collection');
my $collection_id = $collection->bridge('/:collection_id');
# stats
- # $collection_id->;
$collection_id->search;
# Corpus data
@@ -116,9 +116,9 @@
# Match data
my $match = $doc->route('/:match_id');
$match->route->to('info#about_match')->name('match');
-# my $match_foundry = $match->route('/:foundry');
-# $match_foundry->route->to('info#about_match');
-# $match_foundry->route('/:layer')->to('info#about_match');
+ # my $match_foundry = $match->route('/:foundry');
+ # $match_foundry->route->to('info#about_match');
+ # $match_foundry->route('/:layer')->to('info#about_match');
# Utilities
# $r->get('/util/query')->to('search#query');
diff --git a/public/js/ajax.js b/public/js/ajax.js
new file mode 100644
index 0000000..2af0bc0
--- /dev/null
+++ b/public/js/ajax.js
@@ -0,0 +1,19 @@
+"use strict";
+
+// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
+// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
+// r.addEventListener("progress", updateProgress, false);
+var Ajax = {
+ getJSON : function (url, onload) {
+ var r = new XMLHttpRequest();
+ r.open('GET', url, true);
+ r.setRequestHeader("Accept", "application/json");
+ r.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+ r.onreadystatechange = function () {
+ if (this.readyState == 4)
+ onload(JSON.parse(this.responseText));
+ };
+ r.send();
+ }
+};
+
diff --git a/public/js/hint.js b/public/js/hint.js
index 1e5f6ec..5e14283 100644
--- a/public/js/hint.js
+++ b/public/js/hint.js
@@ -5,6 +5,7 @@
* - limit the view based on prefix matches
* - highlight matching substrings
* - http://www.cryer.co.uk/resources/javascript/script20_respond_to_keypress.htm
+ * - document.removeEventListener("click",arguments.callee,false);
*/
// Don't let events bubble up
@@ -761,15 +762,16 @@
};
function chooseHint (e) {
+/*
var element = e.target;
while (element.nodeName == "STRONG" || element.nodeName == "SPAN") {
element = element.parentNode;
};
-
if (element === undefined || element.nodeName != "LI")
return;
+*/
- var action = element.getAttribute('data-action');
+ var action = this.getAttribute('data-action');
hint.insertText(action);
var menu = hint.menu();
menu.hide();
diff --git a/public/js/translateTable.js b/public/js/translateTable.js
index 31be939..de3e075 100644
--- a/public/js/translateTable.js
+++ b/public/js/translateTable.js
@@ -193,29 +193,28 @@
function showTable (o) {
var match = o.parentNode.parentNode;
- var table = $(match).children("div").children("div.tokenInfo").first();
+ var table = match.getElementsByClassName("tokenInfo")[0];
-console.log(table);
-
- if (table.hasClass("active")) {
- table.removeClass("active");
+ if (table.classList.contains("active")) {
+ table.classList.remove("active");
return;
}
- else if (table.children("table").length > 0) {
- table.addClass("active");
+ else if (table.getElementsByTagName("table").length > 0) {
+ table.classList.add("active");
return;
};
+
var corpusID = match.getAttribute('data-corpus-id');
var docID = match.getAttribute('data-doc-id');
var matchID = match.getAttribute('data-match-id');
var url = '/corpus/' + corpusID + '/' + docID + '/' + matchID;
var snippet;
- jQuery.getJSON(url, function (res) {
+ Ajax.getJSON(url, function (res) {
var snippet = new SnippetTable(res['snippet']);
- table.addClass("active");
- table.append(snippet.toTable());
+ table.classList.add("active");
+ table.appendChild(snippet.toTable());
});
};
diff --git a/public/sass/kwic-4.0.scss b/public/sass/kwic-4.0.scss
index ee4c3af..a126526 100644
--- a/public/sass/kwic-4.0.scss
+++ b/public/sass/kwic-4.0.scss
@@ -66,13 +66,13 @@
}
}
-ol.free-aligned > li:not(.active):not(:target) > div > div.snippet > span.left {
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.left {
display: inline-block;
text-align: right;
width: 50.046%;
}
-ol.free-aligned > li:not(.active):not(:target) > div > div.snippet > span.separator {
+ol.align-free > li:not(.active):not(:target) > div > div.snippet > span.separator {
width: 0px;
height: 1em;
margin-bottom: -2px;
@@ -83,17 +83,17 @@
margin-right: 2px;
}
-ol.free-aligned > li > div > div.snippet > span.right {
+ol.align-free > li > div > div.snippet > span.right {
text-align: left;
}
-ol.left-aligned > li > div > div.snippet > span.context-left {
+ol.align-left > li > div > div.snippet > span.context-left {
display: inline-block;
text-align: right;
width: 50.01%;
}
-ol.right-aligned {
+ol.align-right {
text-align: right;
> li:not(.active):not(:target) > div > div.snippet > span.context-right {
display: inline-block;
diff --git a/templates/api-communication.html.ep b/templates/api-communication.html.ep
index 2daaa37..341a2da 100644
--- a/templates/api-communication.html.ep
+++ b/templates/api-communication.html.ep
@@ -1,7 +1,7 @@
% use JSON::XS;
% if (stash('test_port') && stash('search.apirequest')) {
-<pre class="query api">
+<pre class="query api" onclick="this.classList.toggle('active')">
<span>API Response for </span>
<span style="font-size: 70%"><%= stash('search.apirequest') %></span>
<code>
@@ -10,8 +10,5 @@
</pre>
%= javascript begin
hljs.initHighlightingOnLoad();
-$("pre.query.api").on("click", function () {
- $(this).toggleClass('active');
-});
% end
% };
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 0f55866..160b8e9 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -3,7 +3,7 @@
%= include 'partial/header'
<body>
-%# Background-image
+%# -- Background crab
% if (!param('q') && current_route eq 'index') {
<div id="crab-bg"></div>
% };
@@ -12,14 +12,6 @@
% my $search_route;
% unless (current_route 'tutorial') {
<div id="tutorial">
-%# my $tut_page = url_for(session('tutorial') || 'tutorial');
-%# <a href="<%= $tut_page %>"
-%# target="_blank"><i title="Open in new tab"
-%# class="fa fa-external-link-square"></i></a>
-%#
-%# <a href="javascript:window.open(getTutorialPage())"
-%# target="_blank"><i title="Open in new tab"
-%# class="fa fa-external-link-square"></i></a>
%= javascript begin
document.write('<a href="' + getTutorialPage().replace(/\?embedded=1/, '') + '" ');
document.write('target="_blank"><i title="Open in new tab" ');
@@ -29,7 +21,6 @@
title="close"
class="fa fa-toggle-up"></i>
<iframe src="about:blank"></iframe>
-%# data-src="<%= $tut_page->query([embedded => 1]) %>"></iframe>
</div>
% if (current_route eq 'match') {
% $search_route = url_for('search_corpus');
@@ -71,28 +62,39 @@
</div>
<div id="button-right">
+%#
+%# -- The cutoff checkbox
% unless (param('q')) { param(cutoff => 1) };
%= check_box cutoff => 1, id => 'q-cutoff-field'
<label for="q-cutoff-field"><span></span>Quick</label>
+%#
+%# -- The tutorial button
% unless (current_route 'tutorial') {
-<button type="button" title="Tutorial" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button>
+<button type="button" title="Tutorial" onclick="openTutorial()">\
+<i class="fa fa-graduation-cap"></i>\
+</button>
% };
-% if (param('q')) {
-<button type="button" title="Alignment" onclick="$('#search > ol').toggleClass('left-aligned right-aligned'); $(this).children('i').toggleClass('fa-align-right fa-align-left')"><i class="fa fa-align-right"></i></button>
+%#
+%# -- The Alignment button
+% if (param('q') && (stash('search.totalResults') // 0) != 0) {
+<button type="button" title="Alignment" onclick="toggleAlignment(this)">\
+<i class="fa fa-align-right"></i>\
+</button>
% }
</div>
-
+%#
% end
-
</div>
+
%= content 'sidebar' => begin
<div id="sidebar">
-%= include 'collections'
+ %= include 'collections'
<i class="fa fa-bars"></i>
</div>
% end
+
<main>
%= content main => begin
<p>This is the alternative KorAP Frontend.</p>
diff --git a/templates/partial/javascript.html.ep b/templates/partial/javascript.html.ep
index 3aa8eda..0ec515b 100644
--- a/templates/partial/javascript.html.ep
+++ b/templates/partial/javascript.html.ep
@@ -3,36 +3,60 @@
// Create new hint
var hint = Object.create(Hint).init();
+// Add toggleClass method similar to jquery
+HTMLElement.prototype.toggleClass = function (c1, c2) {
+ var cl = this.classList;
+ if (cl.contains(c1)) {
+ cl.add(c2);
+ cl.remove(c1);
+ }
+ else {
+ cl.remove(c2);
+ cl.add(c1);
+ };
+};
+
function openTutorial (o) {
- var tut = $("#tutorial");
- tut.addClass("active");
- var iframe = tut.children("iframe");
- iframe.attr("src", getTutorialPage());
+ var tut = document.getElementById("tutorial");
+ tut.classList.add("active")
+ var iframe = tut.getElementsByTagName("iframe")[0];
+ iframe.setAttribute("src", getTutorialPage());
};
function closeTutorial (o) {
- $("#tutorial").removeClass("active");
+ document.getElementById("tutorial").classList.remove("active");
};
function useQuery (o) {
var q = o.getAttribute("data-query");
var ql = o.getAttribute("data-query-language");
var qc = o.getAttribute("data-query-cutoff");
- if (qc !== 0 && qc !== "0" && qc !== "off" && qc !== null)
- $("#q-cutoff-field").prop('checked', true);
+ if (qc !== 0 && qc !== "0" && qc !== "off" && qc !== null) {
+ document.getElementById("q-cutoff-field").checked = true;
+ };
- $("#ql-field").val(ql);
- $("#q-field").val(q);
+ var qlf = document.getElementById("ql-field").options;
+ for (i in qlf)
+ if (qlf[i].value == ql) qlf[i].selected = true;
+ document.getElementById("q-field").value = q;
closeTutorial();
};
-$("#sidebar").on("click", function () {
- $(this).toggleClass('active');
-});
+document.getElementById("sidebar").addEventListener("click",function(){
+ this.classList.toggle("active");
+},false);
-$("span.location").on("click", function () {
- $("#sidebar").toggleClass('active');
-});
+%# document.getElementById("top")
+%# .querySelectorAll("span.location")
+%# .addEventListener("click",function() {
+%# document.getElementById("sidebar").classList.toggle("active");
+%# }, false);
+
+function toggleAlignment (o) {
+ var ol = document.querySelector("#search > ol");
+ ol.toggleClass("align-left", "align-right");
+ o.firstChild.toggleClass("fa-align-right", "fa-align-left");
+};
% end
diff --git a/templates/query.html.ep b/templates/query.html.ep
index c1d3153..9c077b8 100644
--- a/templates/query.html.ep
+++ b/templates/query.html.ep
@@ -7,7 +7,7 @@
% $action = ' active" style="cursor: default';
% };
% state $json = JSON::XS->new->allow_blessed->pretty->canonical(1);
-<pre class="query serial<%== $action // '' %>">
+<pre class="query serial<%== $action // '' %>" <% unless ($action) { %>onclick="this.classList.toggle('active')"<% } %>>
<span>JSON-LD Serialization for <%= param 'q' %> (<%= param 'ql' %>)</span>
<code>
%# Workaround to keep true, false, and null intact
@@ -16,10 +16,5 @@
</pre>
%= javascript begin
hljs.initHighlightingOnLoad();
-% unless ($action) {
-$("pre.query.serial").on("click", function () {
- $(this).toggleClass('active');
-});
-% };
% end
% };
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 3fe6302..4d5c2c3 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -24,7 +24,7 @@
% if (stash('search.totalResults') != 0 && scalar @{stash('search.hits')}) {
<div id="search">
-<ol class="left-aligned">
+<ol class="align-left">
%= search_hits begin
%= include 'match', match => $_
% end
@@ -37,15 +37,21 @@
% content 'javascript' => begin
%= javascript begin
-$("#search > ol > li:not(.active)").on("click", function (e) {
- $(this).addClass('active');
+var openLi = function (e) {
+ this.classList.add("active");
e.stopPropagation();
-});
+};
-$("#search > ol > li:not(.active) > ul > li.close").on("click", function (e) {
- $(this.parentNode.parentNode).removeClass('active');
+var closeLi = function (e) {
+ this.parentNode.parentNode.classList.remove("active");
e.stopPropagation();
-});
+};
+
+var inactiveLi = document.querySelectorAll("#search > ol > li:not(.active)");
+for (var i = 0; i < inactiveLi.length; i++) {
+ inactiveLi[i].addEventListener("click", openLi, false);
+ inactiveLi[i].getElementsByClassName("close")[0].addEventListener("click", closeLi, false);
+};
% end
% end
diff --git a/templates/tutorial/index.html.ep b/templates/tutorial/index.html.ep
index 26476ae..19fcb4e 100644
--- a/templates/tutorial/index.html.ep
+++ b/templates/tutorial/index.html.ep
@@ -1,3 +1,5 @@
+%# https://letsencrypt.org/howitworks/
+
% content main => begin
%# Store the id of an active section in the session, so the system is able to directly scroll to the relevant section
@@ -17,7 +19,7 @@
<p>Links to Blog, FAQ, About, Contact ...</p>
<ul>
<li>Introduction to KorAP</li>
- <li>How to use Poliqarp+ QL?</li>
+ <li>How to use Annis QL?</li>
<li>How to use Cosmas-II QL?</li>
<li>How to use CQL?</li>
<li>API</li>