Fixed tutorial view and reimplemented API for new frontend
diff --git a/templates/doc/ql/poliqarp-plus.html.ep b/templates/doc/ql/poliqarp-plus.html.ep
index 7d0ede1..51fbd29 100644
--- a/templates/doc/ql/poliqarp-plus.html.ep
+++ b/templates/doc/ql/poliqarp-plus.html.ep
@@ -4,7 +4,7 @@
<p>The following tutorial introduces all features provided by our version of the Poliqarp Query Language and some KorAP specific extensions.</p>
-<section id="tut-segments">
+<section id="segments">
<h3>Simple Segments</h3>
<p>The atomic elements of Poliqarp queries are segments. Most of the time segments represent words and can be simply queried:</p>
@@ -22,7 +22,7 @@
<p>The query above will find all occurrences of <code>laufen</code> irrespective of the capitalization of letters, so <code>wir laufen</code> will be find as well as <code>das Laufen</code> and even <code>"GEH LAUFEN!"</code>.
- <h4 id="tut-regexp">Regular Expressions</h4>
+ <h4 id="regexp">Regular Expressions</h4>
<p>Segments can also be queried using <%= kalamar_tut_link_to 'regular expressions', '/tutorial/regular-expressions' %> - by surrounding the segment with double quotes.</p>
@@ -51,7 +51,7 @@
%= kalamar_tut_query poliqarp => '"l(au|ie)fen"/xi', cutoff => 1
</section>
-<section id="tut-complex">
+<section id="complex">
<h3>Complex Segments</h3>
<p>Complex segments are expressed in square brackets and contain additional information on the resource of the term under scrutiny by providing key/value pairs, separated by an equal-sign.</p>
@@ -109,7 +109,7 @@
</blockquote>
</section>
-<section id="tut-spans">
+<section id="spans">
<h3>Span Segments</h3>
<p>Not all segments are bound to words - some are bound to concepts spanning multiple words, for example noun phrases, sentences, or paragraphs.
@@ -120,7 +120,7 @@
<p>Otherwise they can be treated in exactly the same way as simple or complex segments.</p>
</section>
-<section id="tut-paradigmatic-operators">
+<section id="paradigmatic-operators">
<h3>Paradigmatic Operators</h3>
<p>A complex segment can have multiple properties a token has to fulfill. For example to search for all words with the surface form <code>laufe</code> (no matter if capitalized or not) that have the lemma <code>lauf</code> (and not, for example, <code>laufen</code>, which would indicate a verb or a gerund), you can search for:</p>
@@ -145,10 +145,10 @@
%= kalamar_tut_query poliqarp => '[(base=laufen | base=gehen) & tt/pos=VVFIN]'
</section>
-<section id="tut-syntagmatic-operators">
+<section id="syntagmatic-operators">
<h3>Syntagmatic Operators</h3>
- <h4 id="tut-syntagmatic-operators-sequence">Sequences</h4>
+ <h4 id="syntagmatic-operators-sequence">Sequences</h4>
<p>Sequences can be used to search for segments in order. For example to search for the word "alte" preceded by "der" and followed by "Mann", you can simple search for the sequence of simple expressions separated by whitespaces.</p>
@@ -184,7 +184,7 @@
%= kalamar_tut_query poliqarp => 'der (junge | alte) Mann'
- <h4 id="tut-syntagmatic-operators-repetitions">Repetition</h4>
+ <h4 id="syntagmatic-operators-repetitions">Repetition</h4>
<p>Repetitions in Poliqarp are realized as in <%= kalamar_tut_link_to 'regular expressions', '/tutorial/regular-expressions' %>, by giving quantifieres in curly brackets.</p>
<p>To search for a sequence of three occurrences of <code>der</code>, you can formulate your query in any of the following ways - they will have the same results:</p>
@@ -277,7 +277,7 @@
</section>
-<section id="tut-class-operators">
+<section id="class-operators">
<h3>Class Operators</h3>
<p>Classes are used to group sub matches by surrounding curly brackets and a class number <code>{1:...}</code>. Classes can be used to refer to sub matches in a query, similar to captures in regular expressions. In Poliqarp+ classes have multiple purposes, with highlighting being the most intuitive one:</p>
diff --git a/templates/match.html.ep b/templates/match.html.ep
index 43f172d..8693511 100644
--- a/templates/match.html.ep
+++ b/templates/match.html.ep
@@ -1,38 +1,23 @@
-%# ID, title, corpusID, author, pubDate, textClass
% my $match = stash('match') || {};
-<li data-corpus-id="<%= $match->{corpusID} %>" \
-data-doc-id="<%= $match->{docID} %>" \
-data-match-id="<%= $match->{ID} %>" \
-id="<%= $match->{corpusID} %>-<%= $match->{docID} %>-<%= $match->{ID} %>"\
-<% if (current_route eq 'match') { %> class="active"<% } =%>
->
-%#
-%# -- Match information (snippet, morph table, tree information etc.)
+% my $id = $match->{corpusID} . '-' . $match->{docID} . '-' . $match->{ID};
+<li data-corpus-id="<%= $match->{corpusID} %>"
+ data-doc-id="<%= $match->{docID} %>"
+ data-text-id="hmmm"
+ data-match-id="<%= $match->{ID} %>"
+ %# TODO: This needs to be retrieved per match
+ 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="<%= $id %>"\
+<% if (current_route eq 'match') { %> class="active"<% } =%>>
<div>
+%# --- Snippet
<div class="snippet<%= $match->{startMore} ? ' startMore' : '' %><%= $match->{endMore} ? ' endMore' : '' %>"><%== $match->{snippet} %></div>
- <div class="tokenInfo"></div>
-%# <div class="treeInfo"></div>
</div>
-%#
%# -- Reference string
- <p>\
-% if ($match->{title}) {
-<strong><%= $match->{title} %></strong>\
-% };
-<%= $match->{author} ? ' by ' . $match->{author} : '' %><% if ($match->{title} || $match->{author}) { %>;<% } =%>
- published on <%= date_format $match->{pubDate} %>\
- as <%= $match->{docID} %> (<%= $match->{corpusID} %>)\
+ <p class="ref">\
+<% if ($match->{title}) { %><strong><%= $match->{title} %></strong><% }; %>\
+<%= $match->{author} ? ' ' . loc('by') . ' ' . $match->{author} : '' %>\
+<% if ($match->{title} || $match->{author}) { %>;<% } =%> \
+<%= loc('pubOn') %> <%= $match->{pubDate} %> \
+(<%= $id %>)\
</p>
-%#
-%# -- Action buttons
- <ul class="action right">
-% if (current_route ne 'match') {
- <li class="close" title="Close"><a href="#"><i class="fa fa-toggle-up"></i></a></li>
-%# <li class="open" title="Open in new tab"><%= link_to 'match', { corpus_id => $match->{corpusID}, doc_id => $match->{docID}, match_id => $match->{ID} }, target => '_blank', begin %><i class="fa fa-external-link-square"></i><% end %></li>
- <li class="open" title="Open in new tab"><a href="#<%= $match->{corpusID} %>-<%= $match->{docID} %>-<%= $match->{ID} %>" target="_blank"><i class="fa fa-external-link-square"></i></a></li>
-% };
- <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
-%# <li onclick="showTree(this, 'xip', 'c')" title="Tree Visualizations"><i class="fa fa-sitemap"></i></li>
-%# <li title="Remember"><i class="fa fa-star-o"></i></li>
- </ul>
</li>
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 02e660e..2bd2c12 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -1,34 +1,41 @@
<header>
- <a href="/" class="logo" title="<%= title %>"><h1><span><%= title %></span></h1></a>
+ <a href="/"
+ class="logo"
+ title="<%= title %>"><h1><span><%= title %></span></h1></a>
+<!--
<div class="button top">
- <a href="#" class="login" title="<%= loc 'login' %>"><span><%= loc 'login' %></span></a>
+ <a href="#"
+ class="login"
+ title="<%= loc 'login' %>"><span><%= loc 'login' %></span></a>
</div>
- <form autocomplete="off" action="/kalamar">
+-->
+ <form autocomplete="off" action="<%= url_for 'index' %>">
<div id="searchbar">
- <input placeholder="<%= loc 'searchplaceholder' %>" name="q" id="q-field" autofocus="autofocus" type="search" />
+ %= search_field 'q', id => 'q-field', autofocus => 'autofocus', placeholder => loc('searchplaceholder')
<button type="submit" title="<%= loc 'go' %>"><span><%= loc 'go' %></span></button>
</div>
+ <!-- Search in the following virtual collection -->
+ <!--
<div id="vc-view"></div>
<%= loc 'in' %> <input type="hidden" id="vc-name" name="vc-name" value="Wikipedia" />
<input type="text" name="vc" id="vc" value="corpusID = Wikipedia" />
- <%= loc 'with' %> <span class="select">
- <select name="ql" id="ql-field">
- <option value="poliqarp">Poliqarp</option>
- <option value="cosmas2">Cosmas II</option>
- <option value="annis">Annis</option>
- <option value="cql">CQL v1.2</option>
- </select>
+ -->
+ <%= loc 'with' %>
+ <span class="select">
+ %= select_field 'ql', [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2'], ['Annis' => 'annis'], ['CQL v1.2' => 'cql']], id => 'ql-field'
</span>
<div class="button right">
% param(cutoff => 1) unless param 'q';
%= check_box cutoff => 1, id => 'q-cutoff-field', class => 'checkbox'
<label for="q-cutoff-field"><span></span><%= loc('glimpse') %></label>
+<!--
% unless (current_route 'tutorial') {
<a href="/doc/faq"
title="<%= loc 'faq' %>"
class="question"
id="view-faq"><span><%= loc 'faq' %></span></a>
% };
+-->
<a href="/doc"
title="<%= loc 'tutorial' %>"
class="tutorial"
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 242a8d9..fbe3895 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -1,55 +1,27 @@
-% if (param 'q') {
-% content 'main' => begin
-% unless (param 'snippet') {
-<div style="clear: both">
-% my $url = url_with->query(['p' => '{page}']);
-% my $pages = search->total_pages;
- <div id="pagination"><%= pagination(search->start_page, $pages, $url) =%></div>
- <p class="found">Found
+% layout 'main';
+
+<div class="resultinfo">
+%# <div id="pagination"><%= pagination(search->start_page, $pages, $url) =%></div>
+
% my $found = search->total_results;
-% if ($found == -1) {
-% $found = 'unknown amount of';
-% } elsif (search->time_exceeded) {
-% $found = 'more than ' . $found;
-% };
- <span id="total-results"><%= $found %> matches</span>
- <% if (search->benchmark) { %> in <%= search->benchmark %><% } %>
- </p>
+% if ($found != -1) {
+% my $found_text = $found;
+% if (search->time_exceeded) {
+% $found_text = '> ' . $found;
+% };
+ <p class="found"><span id="total-results"><%= $found_text %></span> <%= loc('matchCount', found => $found) %></p>
+% } else {
+ <p></p>
+% };
+%# <% if (search->benchmark) { %> in <%= search->benchmark %><% } %>
</div>
-%= include 'query'
-%= include 'api-communication'
-% };
% if (search->total_results != 0 && search->results->size) {
<div id="search">
-<ol class="align-left">
-%= search_results begin
-%= include 'match', match => $_
-% end
-</ol>
-</div>
-% };
-% end
-
-% content 'javascript' => begin
-%= javascript begin
-
-var openLi = function (e) {
- this.classList.add("active");
- e.stopPropagation();
-};
-
-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);
-};
-
+ <ol class="align-left">
+%= search_results begin
+%= include 'match', match => $_
% end
-% end
-% };
+ </ol>
+</div>
+% }