| <!DOCTYPE html> |
| <html> |
| <head> |
| <title><%= title %></title> |
| %= stylesheet '/style.css' |
| %= stylesheet '/table.css' |
| %= stylesheet '/kwic-4.0.css' |
| %= stylesheet '/fontawesome/font-awesome.min.css' |
| %= javascript '/jquery-2.0.0.min.js' |
| %= javascript '/translateTable.js' |
| <meta charset="utf-8" /> |
| </head> |
| <body> |
| |
| % unless (current_route 'tutorial') { |
| <div id="tutorial" style="display: none"> |
| % 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> |
| <i onclick="closeTutorial()" title="close" class="fa fa-toggle-up"></i> |
| <iframe src="about:blank" data-src="<%= $tut_page->query([snippet => 1]) %>"></iframe> |
| </div> |
| % }; |
| |
| <div id="top"> |
| <a href="<%= url_for 'index' %>"><h1><span>KorAP- Korpusanalyseplattform der nächsten Generation</span></h1></a> |
| %= form_for url_for() => begin |
| %= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2']], id => 'ql-field' |
| <br /> |
| %= search_field 'q', id => 'q-field' |
| <button type="submit" name="action" value="ok"><i class="fa fa-search"></i></button> |
| <button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button> |
| % end |
| |
| <div id="button-right"> |
| % if (param('q')) { |
| <button type="button" 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> |
| % } |
| % unless (current_route 'tutorial') { |
| <button type="button" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button> |
| % }; |
| </div> |
| |
| </div> |
| |
| <div id="sidebar" style="padding-top: 90px"> |
| %= include 'collections' |
| </div> |
| |
| <div id="search"> |
| %= content |
| </div> |
| |
| %= javascript begin |
| |
| $("ol > li:not(.active)").on("click", function () { |
| $(this).addClass('active'); |
| }); |
| |
| function closeSnippet (o) { |
| $(o.parentNode.parentNode).removeClass('active'); |
| }; |
| |
| function showTable (o) { |
| var match = o.parentNode.parentNode; |
| var table = $(match).children("div").children("div.tokenInfo").first(); |
| |
| if (table.hasClass("active")) { |
| table.removeClass("active"); |
| return; |
| } |
| else if (table.children("table").length > 0) { |
| table.addClass("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) { |
| var snippet = new SnippetTable(res['snippet']); |
| table.addClass("active"); |
| table.append(snippet.toTable()); |
| }); |
| }; |
| |
| function openTutorial (o) { |
| var tut = $("#tutorial"); |
| tut.slideDown(); |
| var iframe = tut.children("iframe"); |
| var src = iframe.attr("data-src"); |
| iframe.attr("src", src); |
| }; |
| |
| function closeTutorial (o) { |
| $("#tutorial").slideUp(); |
| }; |
| |
| function useQuery (o) { |
| var q = o.getAttribute("data-query"); |
| var ql = o.getAttribute("data-query-language"); |
| $("#ql-field").val(ql); |
| $("#q-field").val(q); |
| closeTutorial(); |
| }; |
| |
| $("code.query.serial,#sidebar").on("click", function () { |
| $(this).toggleClass('active'); |
| }); |
| |
| |
| % end |
| |
| |
| %= notifications 'Alertify' |
| </body> |
| </html> |