Get rid of jQuery
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>