Fixed tutorial view and reimplemented API for new frontend
diff --git a/Gruntfile.js b/Gruntfile.js
index 3cf82bb..d949a90 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -90,6 +90,15 @@
dest: 'public/',
nonull:true,
timestamp:true
+ },
+ // Needs to overwrite the prepared svg as it corrupts the embedded js
+ {
+ expand: true,
+ cwd: 'dev/img/',
+ src: 'korap-overview.svg',
+ dest: 'public/img/',
+ nonull:true,
+ timestamp:true
}
]
}
@@ -123,6 +132,6 @@
grunt.registerTask('css', ['sass']);
grunt.registerTask(
'default',
- ['copy', 'requirejs', 'imagemin', 'sass']
+ ['requirejs', 'imagemin', 'copy', 'sass']
);
};
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 85d4d2e..ff21908 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -47,7 +47,7 @@
<!-- Todo: open tutorial - like openTutorial() -->
<a href="doc/faq" class="question"><span>Question</span></a>
- <a href="about.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
+ <a href="tutorial.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
</div>
</form>
</header>
diff --git a/dev/demo/tutorial.html b/dev/demo/tutorial.html
index c7aea38..7c4a87f 100644
--- a/dev/demo/tutorial.html
+++ b/dev/demo/tutorial.html
@@ -3,7 +3,7 @@
<head>
<title>Tutorial demo</title>
<link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
- <script data-main="all.js" src="../js/lib/require.js" async="async"></script>
+ <script data-main="alldemo.js" src="../js/lib/require.js" async="async"></script>
</head>
<body class="embedded">
<aside tabindex="0" class="active">
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index cd0adfc..cd99df1 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -108,11 +108,21 @@
/**
* Init Tutorial view
*/
- obj.tutorial = tutClass.create(
- document.getElementById('view-tutorial')
- );
+ if (document.getElementById('view-tutorial')) {
+ window.tutorial = tutClass.create(
+ document.getElementById('view-tutorial')
+ );
+ obj.tutorial = window.tutorial;
+ }
-
+ // Tutorial is in parent
+ else if (window.parent) {
+ obj.tutorial = window.parent.tutorial;
+ };
+
+ // Initialize queries for document
+ obj.tutorial.initQueries(document);
+
/**
* Init hint helper
* has to be final because of
diff --git a/dev/js/src/tutorial.js b/dev/js/src/tutorial.js
index 4f00ee1..cacbe21 100644
--- a/dev/js/src/tutorial.js
+++ b/dev/js/src/tutorial.js
@@ -27,25 +27,64 @@
_init : function (obj) {
this._session = sessionClass.create();
- this._show = obj;
- this.start = obj.getAttribute('href');
- obj.removeAttribute('href');
- var that = this;
- obj.onclick = function () {
- that.show();
+
+ if (obj) {
+ this._show = obj;
+ this.start = obj.getAttribute('href');
+ obj.removeAttribute('href');
+ var that = this;
+ obj.onclick = function () {
+ that.show();
+ };
+
+ // Injects a tutorial div to the body
+ var div = document.createElement('div');
+ div.setAttribute('id', 'tutorial');
+ div.style.display = 'none';
+ document.getElementsByTagName('body')[0].appendChild(div);
+ this._iframe = null;
+ this._element = div;
+
+ // Some fields
+ this._ql = document.getElementById("ql-field");
+ this._q = document.getElementById("q-field")
+ this._cutoff = document.getElementById("q-cutoff-field");
};
- // Injects a tutorial div to the body
- var div = document.createElement('div');
- div.setAttribute('id', 'tutorial');
- div.style.display = 'none';
- document.getElementsByTagName('body')[0].appendChild(div);
- this._iframe = null;
-
- this._element = div;
return this;
},
+ useQuery : function (e) {
+ var q = e.getAttribute("data-query");
+ var ql = e.getAttribute("data-query-language");
+ var qc = e.getAttribute("data-query-cutoff");
+ if (qc !== 0 && qc !== "0" && qc !== "off" && qc !== null) {
+ this._cutoff.checked = true;
+ };
+
+ var qlf = this._ql.options;
+ for (var i in qlf) {
+ if (qlf[i].value == ql) {
+ qlf[i].selected = true;
+ };
+ };
+
+ this._q.value = q;
+ this.setPage(e);
+ this.hide();
+ },
+
+ initQueries : function (d) {
+ var qs = d.querySelectorAll('pre.query.tutorial');
+ var that = this;
+ for (var i = 0; i < qs.length; i++) {
+ qs[i].onclick = function (e) {
+ that.useQuery(this,e);
+ };
+ };
+ },
+
+
show : function () {
var element = this._element;
if (element.style.display === 'block')
@@ -94,7 +133,7 @@
* Close tutorial window.
*/
hide : function () {
- this._element.display.style = 'none';
+ this._element.style.display = 'none';
},
/**
@@ -105,7 +144,7 @@
var page = obj;
if (typeof page != 'string') {
page = window.location.pathname + window.location.search;
- for (i = 1; i < 5; i++) {
+ for (var i = 1; i < 5; i++) {
if (obj.nodeName === 'SECTION') {
if (obj.hasAttribute('id'))
page += '#' + obj.getAttribute('id');
@@ -128,6 +167,7 @@
*/
getPage : function () {
this._session.get('tutpage');
- },
+ }
};
});
+
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 1d3d26a..ca1029e 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -37,7 +37,7 @@
color: $dark-orange;
text-decoration: none;
&:hover {
- color: $light-green; // $darkest-orange;
+ color: $darkest-orange;
@include color-transition;
}
&:active, &:visited {
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index e63283a..8b4e0a5 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -105,6 +105,10 @@
content: $fa-login;
}
}
+
+ #vc-view > div {
+ margin: 1.3em 0 .5em 0;
+ }
}
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 883f003..6411d87 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -97,13 +97,13 @@
*/
&::after {
font-family: "FontAwesome";
- content: '\f096';
+ content: $fa-check;
}
}
}
&:checked + label span {
&:after {
- content:"\f046";
+ content: $fa-checked;
}
}
-}
+}
\ No newline at end of file
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index d6650a4..12071db 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -249,3 +249,17 @@
}
}
}
+
+
+#vc-choose {
+ &::after {
+ content: $fa-down;
+ padding: {
+ left: 2pt;
+ right: 4pt;
+ }
+ }
+ &.active::after {
+ content: $fa-up;
+ }
+}
\ No newline at end of file
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index f0e10de..8b91f22 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -181,4 +181,6 @@
$fa-tutorial: "\f19d";
$fa-left-align: "\f036";
$fa-right-align: "\f038";
-$fa-question: "\f128"; // "\f059";
\ No newline at end of file
+$fa-question: "\f128"; // "\f059";
+$fa-checked: "\f046";
+$fa-check: "\f096";
\ No newline at end of file
diff --git a/kalamar.conf b/kalamar.conf
index 92c2c5b..22ce0dd 100644
--- a/kalamar.conf
+++ b/kalamar.conf
@@ -48,10 +48,13 @@
searchplaceholder => 'Finde ...',
go => 'Suche!',
in => 'in',
+ by => 'von',
with => 'mit',
glimpse => 'Stichprobe',
faq => 'Häufige Fragen',
tutorial => 'Einführung',
+ pubOn => 'veröffentlicht am',
+ matchCount => 'Treffer',
korap => {
-short => 'KorAP',
long => 'KorAP - Korpusanalyseplattform der nächsten Generation',
@@ -64,7 +67,10 @@
go => 'Go!',
searchplaceholder => 'Find ...',
in => 'in',
+ by => 'by',
with => 'with',
+ pubOn => 'published on',
+ matchCount => '<%= num($found, "match", "matches") %>',
glimpse => 'Sample',
faq => 'F.A.Q.',
tutorial => 'Tutorial',
diff --git a/lib/Kalamar.pm b/lib/Kalamar.pm
index abd4d5e..f465802 100644
--- a/lib/Kalamar.pm
+++ b/lib/Kalamar.pm
@@ -13,37 +13,42 @@
my $pkg = b($self->home . '/package.json')->slurp;
$Kalamar::VERSION = decode_json($pkg)->{version};
- # Load documentation navigation
- my $navi = b($self->home . '/templates/doc/_nav.json')->slurp;
-
# Add additional plugin path
push(@{$self->plugins->namespaces}, __PACKAGE__ . '::Plugin');
+ # Set secrets for signed cookies
+ $self->secrets([
+ b($self->home . '/kalamar.secret')->slurp->split("\n")
+ ]);
+
# Load plugins
- foreach (qw/Config
- Localize
- Notifications
- DocNavi
- KalamarTagHelpers/) {
+ foreach (
+ 'Config', # Configuration framework
+ 'Localize', # Localization framework
+ 'Notifications', # Client notifications
+ 'Search', # Abstract Search framework
+ 'CHI', # Global caching mechanism
+ 'TagHelpers::Pagination', # Pagination widget
+ 'DocNavi', # Navigation for documentation
+ 'KalamarHelpers', # Specific Helpers for Kalamar
+ 'KalamarTagHelpers' # Specific Taghelpers for Kalamar
+ ) {
$self->plugin($_);
};
- $self->config(navi => decode_json($navi));
-
+ # Configure mail exception
$self->plugin('MailException' => $self->config('MailException'));
+ # Configure documentation navigation
+ my $navi = b($self->home . '/templates/doc/_nav.json')->slurp;
+ $self->config(navi => decode_json($navi));
+
# Establish routes
my $r = $self->routes;
- $r->get('/')->to(
- cb => sub {
- return shift->render(template => 'intro');
- });
-
# Base query page
$r->get('/')->to('search#query')->name('index');
-
# Documentation
$r->get('/doc')->to('documentation#page', page => 'korap');
$r->get('/doc/:page')->to('documentation#page', scope => undef);
@@ -63,10 +68,6 @@
# title => 'KorAP - Corpus Analysis Platform'
# );
- # Set secret for signed cookies
- $self->secrets([
- b($self->home . '/kalamar.secret')->slurp->split("\n")
- ]);
$self->hook(
before_dispatch => sub {
@@ -77,22 +78,11 @@
};
}) if $self->mode eq 'production';
- $self->hook(before_dispatch => sub {
- my $c = shift;
- my $h = $c->res->headers;
- $h->header( 'Access-Control-Allow-Origin' => '*' );
- $h->header( 'Access-Control-Allow-Methods' => 'GET, PUT, POST, DELETE, OPTIONS' );
- $h->header( 'Access-Control-Max-Age' => 3600 );
- $h->header( 'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With' );
- });
# Load plugins
- foreach (qw/CHI
- TagHelpers::Pagination
+ foreach (qw/
Number::Commify
- Search
- KalamarHelpers
/) {
$self->plugin($_);
};
diff --git a/lib/Kalamar/Controller/Search.pm b/lib/Kalamar/Controller/Search.pm
index 25954d4..4e18e28 100644
--- a/lib/Kalamar/Controller/Search.pm
+++ b/lib/Kalamar/Controller/Search.pm
@@ -1,8 +1,8 @@
package Kalamar::Controller::Search;
use Mojo::Base 'Mojolicious::Controller';
-# Add X-Forwarded-For to user agent call everywhere
+# Query the KorAP backends and render a template
sub query {
my $c = shift;
@@ -10,18 +10,8 @@
# No query
unless ($query) {
- return $c->render(template => 'index');
- }
-};
-
-
-1;
-
-
-__END__
-
-# Query the KorAP backends and render a template
-sub query {
+ return $c->render(template => 'intro');
+ };
# Base parameters for remote access
my %param = (
@@ -29,6 +19,7 @@
query => $query,
);
+ # May be not relevant
my $inspect = (scalar $c->param('action') // '') eq 'inspect' ? 1 : 0;
# Just check the serialization non-blocking
@@ -41,32 +32,52 @@
return;
};
+ # Choose the snippet based on the parameter
my $template = scalar $c->param('snippet') ? 'snippet' : 'search';
# Search non-blocking
$c->delay(
sub {
my $delay = shift;
+
+ # Search with a callback (async)
$c->search(
- cutoff => scalar $c->param('cutoff'),
- count => scalar $c->param('count'),
+ cutoff => scalar $c->param('cutoff'),
+ count => scalar $c->param('count'),
start_page => scalar $c->param('p'),
- cb => $delay->begin,
+ cb => $delay->begin,
%param
) if $query;
+ # Search resource (async)
$c->search->resource(
type => 'collection',
$delay->begin
);
},
+
+ # Collected search
sub {
+
+
+
+ # Render to the template
return $c->render(template => $template);
}
);
};
+1;
+
+
+__END__
+
+
+
+
+
+
# Get informations about a match
sub match_info {
my $c = shift;
@@ -121,3 +132,14 @@
__END__
+
+
+# Todo: Add X-Forwarded-For to user agent call everywhere
+ $self->hook(before_dispatch => sub {
+ my $c = shift;
+ my $h = $c->res->headers;
+ $h->header( 'Access-Control-Allow-Origin' => '*' );
+ $h->header( 'Access-Control-Allow-Methods' => 'GET, PUT, POST, DELETE, OPTIONS' );
+ $h->header( 'Access-Control-Max-Age' => 3600 );
+ $h->header( 'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With' );
+ });
diff --git a/lib/Kalamar/Plugin/KalamarHelpers.pm b/lib/Kalamar/Plugin/KalamarHelpers.pm
index 08ff41f..d514ceb 100644
--- a/lib/Kalamar/Plugin/KalamarHelpers.pm
+++ b/lib/Kalamar/Plugin/KalamarHelpers.pm
@@ -1,22 +1,29 @@
package Kalamar::Plugin::KalamarHelpers;
use Mojo::Base 'Mojolicious::Plugin';
+
+# Helpers for Kalamar
sub register {
my ($plugin, $mojo) = @_;
+ # Check for test port
$mojo->helper(
kalamar_test_port => sub {
my $c = shift;
+
+ # Test port is defined in the stash
if (defined $c->stash('kalamar.test_port')) {
return $c->stash('kalamar.test_port');
};
+ # Check the port
if ($c->req->url->to_abs->port == 6666 ||
$c->app->mode =~ m/^development|test$/) {
$c->stash('kalamar.test_port' => 1);
return 1;
};
+ # No test port
$c->stash('kalamar.test_port' => 0);
return 0;
});
diff --git a/lib/Kalamar/Plugin/KalamarTagHelpers.pm b/lib/Kalamar/Plugin/KalamarTagHelpers.pm
index 7a51d7b..d039604 100644
--- a/lib/Kalamar/Plugin/KalamarTagHelpers.pm
+++ b/lib/Kalamar/Plugin/KalamarTagHelpers.pm
@@ -8,15 +8,21 @@
sub register {
my ($plugin, $mojo) = @_;
-
+ # Embed the korap architecture image
$mojo->helper(
korap_overview => sub {
my $c = shift;
my $scope = shift;
- my $base = $c->stash('doc_base') ? '?' . $c->stash('doc_base') : '';
+
+ my $url = $c->url_with('/img/korap-overview.svg');
+
+ # If there is a different base - append this as a base
+ $url->query([base => $c->stash('doc_base') // '/']);
+
+ $url->fragment($scope);
return $c->tag('object',
- data => $c->url_for('/img/korap-overview.svg' . $base . '#' . $scope),
+ data => $url,
type => 'image/svg+xml',
alt => $c->loc('korap_overview'),
id => 'overview'
@@ -26,6 +32,78 @@
+ $mojo->helper(
+ doc_link_to => sub {
+ my $c = shift;
+ my $title = shift;
+ my $page = pop;
+ my $scope = shift;
+ return $c->link_to($title, $c->url_with('doc', scope => $scope, page => $page));
+ }
+ );
+
+ $mojo->helper(
+ doc_uc => sub {
+ return shift->tag('p', 'Under Construction!')
+ }
+ );
+
+
+ # Create helper for queries in the tutorial
+ $mojo->helper(
+ kalamar_tut_query => sub {
+ my ($c, $ql, $q, %param) = @_;
+
+ # Escape query for html embedding
+ $q = xml_escape $q;
+
+ # Return tag
+ b('<pre class="query tutorial" ' .
+ qq!data-query="$q" data-query-cutoff="! .
+ ($param{cutoff} ? 1 : 0) .
+ '"' .
+ qq! data-query-language="$ql">! .
+ '<code>' . $q . '</code>' .
+ '</pre>'
+ );
+ }
+ );
+
+
+ # Create links in the tutorial that make sure the current position is preserved,
+ # in case the tutorial was opened embedded
+ $mojo->helper(
+ kalamar_tut_link_to => sub {
+ my $c = shift;
+ my $title = shift;
+ my $link = shift;
+ my $host = $c->req->headers->header('X-Forwarded-Host');
+ my $url = $c->url_for($link);
+
+ # Link is part of the embedded tutorial
+ if ($c->param('embedded')) {
+ $url->query({ embedded => 1 });
+ return $c->link_to(
+ $title,
+ $url,
+ onclick => qq!setTutorialPage("$url")!
+ );
+ };
+
+ # Build link
+ return $c->link_to($title, $url);
+ }
+ );
+};
+
+1;
+
+
+__END__
+
+
+
+
# Create helper for queries in the tutorial
$mojo->helper(
kalamar_tut_query => sub {
@@ -155,48 +233,3 @@
'</code></pre>' . $msg);
}
);
-
- $mojo->helper(
- doc_link_to => sub {
- my $c = shift;
- my $title = shift;
- my $page = pop;
- my $scope = shift;
- return $c->link_to($title, $c->url_with('doc', scope => $scope, page => $page));
- }
- );
-
- $mojo->helper(
- doc_uc => sub {
- return shift->tag('p', 'Under Construction!')
- }
- );
-
-
- # Create links in the tutorial that make sure the current position is preserved,
- # in case the tutorial was opened embedded
- $mojo->helper(
- kalamar_tut_link_to => sub {
- my $c = shift;
- my $title = shift;
- my $link = shift;
- my $host = $c->req->headers->header('X-Forwarded-Host');
- my $url = $c->url_for($link);
-
- # Link is part of the embedded tutorial
- if ($c->param('embedded')) {
- $url->query({ embedded => 1 });
- return $c->link_to(
- $title,
- $url,
- onclick => qq!setTutorialPage("$url")!
- );
- };
-
- # Build link
- return $c->link_to($title, $url);
- }
- );
-};
-
-1;
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>
+% }