mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-12-24 02:24:20 +00:00
First take on cleaning up the corpus analysis template code
This commit is contained in:
Patrick Jentsch
parent
078f88d4ec
commit
817a13dfff
@ -1,12 +1,19 @@
|
||||
{% extends "base.html.j2" %}
|
||||
{% import "materialize/wtf.html.j2" as wtf %}
|
||||
{% import 'corpora/analysis_extensions/concordance.html.j2' as concordance_extension %}
|
||||
{% import 'corpora/analysis_extensions/reader.html.j2' as reader_extension %}
|
||||
|
||||
{% set extensions = [concordance_extension, reader_extension] %}
|
||||
{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-container"{% endblock main_attribs %}
|
||||
|
||||
|
||||
|
||||
{% block page_content %}
|
||||
<ul class="row tabs no-autoinit" id="corpus-analysis-app-extension-tabs">
|
||||
<li class="tab col s3"><a class="active" href="#corpus-analysis-app-overview"><i class="nopaque-icons service-icons left" data-service="corpus-analysis"></i>Corpus analysis</a></li>
|
||||
<li class="tab col s3"><a href="#concordance-extension-container"><i class="material-icons left">list_alt</i>Concordance</a></li>
|
||||
<li class="tab col s3"><a href="#reader-extension-container"><i class="material-icons left">chrome_reader_mode</i>Reader</a></li>
|
||||
{% for extension in extensions %}
|
||||
<li class="tab col s3"><a href="#{{ extension.id_prefix }}-container">{{ extension.tab_content }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<div class="row" id="corpus-analysis-app-overview">
|
||||
@ -14,29 +21,23 @@
|
||||
<h1>{{ title }}</h1>
|
||||
</div>
|
||||
|
||||
{% for extension in extensions %}
|
||||
<div class="col s3">
|
||||
<div class="card extension-selector hoverable" data-target="concordance-extension-container">
|
||||
<div class="card extension-selector hoverable" data-target="{{ extension.id_prefix }}-container">
|
||||
<div class="card-content">
|
||||
<span class="card-title"><i class="material-icons left">list_alt</i>Concordance</span>
|
||||
<p>Query your corpus with the CQP query language utilizing a KWIC view.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s3">
|
||||
<div class="card extension-selector hoverable" data-target="reader-extension-container">
|
||||
<div class="card-content">
|
||||
<span class="card-title"><i class="material-icons left">chrome_reader_mode</i>Reader</span>
|
||||
<p>Inspect your corpus in detail with a full text view, including annotations.</p>
|
||||
<span class="card-title">{{ extension.name }}</span>
|
||||
<p>{{ extension.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# #}
|
||||
{% include "corpora/_analysis/reader.html.j2" %}
|
||||
|
||||
{% include "corpora/_analysis/concordance.html.j2" %}
|
||||
{% for extension in extensions %}
|
||||
<div id="{{ extension.id_prefix }}-container">
|
||||
{{ extension.container_content }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endblock page_content %}
|
||||
|
||||
{% block modals %}
|
||||
@ -54,33 +55,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="example-modal">
|
||||
<div class="modal-content">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<h4>Examples</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
||||
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
||||
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
||||
takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
<div class="col s8">
|
||||
<table>
|
||||
<tr>
|
||||
<th>You are looking for...</th>
|
||||
<th>Type in:</th>
|
||||
<th>Result:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>The word "begin" </td>
|
||||
<td>[word="begin"];</td>
|
||||
<td><a class="tooltipped" data-position="bottom" data-tooltip="List all examples of the word within a corpus that you searched for.">Concordance</a> of the word begin</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% for extension in extensions %}
|
||||
{{ extension.modals }}
|
||||
{% endfor %}
|
||||
|
||||
<div class="modal" id="concordance-query-builder">
|
||||
<div class="modal-content">
|
||||
@ -409,11 +386,14 @@
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
|
||||
const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
|
||||
const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
|
||||
const concordanceQueryBuilder = new ConcordanceQueryBuilder();
|
||||
const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
|
||||
</script>
|
||||
|
||||
corpusAnalysisApp.init();
|
||||
{% for extension in extensions %}
|
||||
{{ extension.scripts }}
|
||||
{% endfor %}
|
||||
|
||||
<script>
|
||||
corpusAnalysisApp.init();
|
||||
</script>
|
||||
{% endblock scripts %}
|
||||
|
||||
@ -1,24 +1,37 @@
|
||||
<div class="row" id="concordance-extension-container">
|
||||
{% set name = 'Concordance' %}
|
||||
|
||||
{% set description %}
|
||||
Query your corpus with the CQP query language utilizing a KWIC view.
|
||||
{% endset %}
|
||||
|
||||
{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
|
||||
|
||||
{% set tab_content %}
|
||||
<i class="material-icons left">list_alt</i>{{ name }}</a>
|
||||
{% endset %}
|
||||
|
||||
{% set container_content %}
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<form id="concordance-extension-form">
|
||||
<form id="{{ id_prefix }}-form">
|
||||
<div class="row">
|
||||
<div class="input-field col s12 m9">
|
||||
<i class="material-icons prefix">search</i>
|
||||
<input class="validate corpus-analysis-action" id="concordance-extension-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"</input>
|
||||
<label for="concordance-extension-form-query">Query</label>
|
||||
<span class="error-color-text helper-text hide" id="concordance-extension-error"></span>
|
||||
<input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"</input>
|
||||
<label for="{{ id_prefix }}-form-query">Query</label>
|
||||
<span class="error-color-text helper-text hide" id="{{ id_prefix }}-error"></span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal" style="margin-left: 40px;"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a>
|
||||
<span> | </span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
|
||||
<span> | </span>
|
||||
<a class="modal-trigger" href="#example-modal"><i class="material-icons" style="font-size: inherit;">info</i> Examples</a>
|
||||
<a class="modal-trigger" href="#{{ id_prefix }}-example-modal"><i class="material-icons" style="font-size: inherit;">info</i> Examples</a>
|
||||
</div>
|
||||
<div class="input-field col s12 m3">
|
||||
<i class="material-icons prefix">arrow_forward</i>
|
||||
<input class="validate corpus-analysis-action" id="concordance-extension-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
|
||||
<label for="concordance-extension-form-subcorpus-name">Subcorpus name</label>
|
||||
<input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
|
||||
<label for="{{ id_prefix }}-form-subcorpus-name">Subcorpus name</label>
|
||||
</div>
|
||||
<div class="col s12 m9 l9">
|
||||
<div class="row">
|
||||
@ -70,7 +83,7 @@
|
||||
<i class="material-icons left">build</i>
|
||||
Query builder (beta)
|
||||
</a>
|
||||
<button class="btn waves-effect waves-light corpus-analysis-action" id="concordance-extension-form-submit" type="submit" name="submit">
|
||||
<button class="btn waves-effect waves-light corpus-analysis-action" id="{{ id_prefix }}-form-submit" type="submit" name="submit">
|
||||
Send
|
||||
<i class="material-icons right">send</i>
|
||||
</button>
|
||||
@ -82,16 +95,16 @@
|
||||
</div>
|
||||
|
||||
<div class="col s12">
|
||||
<div id="concordance-extension-subcorpus-list"></div>
|
||||
<div id="{{ id_prefix }}-subcorpus-list"></div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="progress hide" id="concordance-extension-progress">
|
||||
<div class="progress hide" id="{{ id_prefix }}-progress">
|
||||
<div class="indeterminate"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s9"><p class="hide" id="concordance-extension-subcorpus-info"></p></div>
|
||||
<div class="col s3 right-align" id="concordance-extension-subcorpus-actions"></div>
|
||||
<div class="col s9"><p class="hide" id="{{ id_prefix }}-subcorpus-info"></p></div>
|
||||
<div class="col s3 right-align" id="{{ id_prefix }}-subcorpus-actions"></div>
|
||||
</div>
|
||||
<table class="highlight">
|
||||
<thead>
|
||||
@ -104,10 +117,48 @@
|
||||
<th class="left-align" style="width: 5%;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="concordance-extension-subcorpus-items"></tbody>
|
||||
<tbody id="{{ id_prefix }}-subcorpus-items"></tbody>
|
||||
</table>
|
||||
<ul class="pagination hide" id="concordance-extension-subcorpus-pagination"></ul>
|
||||
<ul class="pagination hide" id="{{ id_prefix }}-subcorpus-pagination"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endset %}
|
||||
|
||||
{% set modals %}
|
||||
<div class="modal" id="{{ id_prefix }}-example-modal">
|
||||
<div class="modal-content">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<h4>Examples</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
||||
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
||||
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
||||
takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
<div class="col s8">
|
||||
<table>
|
||||
<tr>
|
||||
<th>You are looking for...</th>
|
||||
<th>Type in:</th>
|
||||
<th>Result:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>The word "begin" </td>
|
||||
<td>[word="begin"];</td>
|
||||
<td><a class="tooltipped" data-position="bottom" data-tooltip="List all examples of the word within a corpus that you searched for.">Concordance</a> of the word begin</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endset %}
|
||||
|
||||
{% set scripts %}
|
||||
<script>
|
||||
const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
|
||||
const concordanceQueryBuilder = new ConcordanceQueryBuilder();
|
||||
</script>
|
||||
{% endset %}
|
||||
@ -1,4 +1,17 @@
|
||||
<div class="row" id="reader-extension-container">
|
||||
{% set name = 'Reader' %}
|
||||
|
||||
{% set description %}
|
||||
Inspect your corpus in detail with a full text view, including annotations.
|
||||
{% endset %}
|
||||
|
||||
{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
|
||||
|
||||
{% set tab_content %}
|
||||
<i class="material-icons left">chrome_reader_mode</i>{{ name }}</a>
|
||||
{% endset %}
|
||||
|
||||
{% set container_content %}
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
@ -65,3 +78,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endset %}
|
||||
|
||||
{% set modals = '' %}
|
||||
|
||||
{% set scripts %}
|
||||
<script>
|
||||
const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
|
||||
</script>
|
||||
{% endset %}
|
||||
26
app/templates/corpora/analysis_extensions/template.html.j2
Normal file
26
app/templates/corpora/analysis_extensions/template.html.j2
Normal file
@ -0,0 +1,26 @@
|
||||
|
||||
{# The extension name #}
|
||||
{% set name = '' %}
|
||||
|
||||
{# The extension description #}
|
||||
{% set description = '' %}
|
||||
|
||||
{#
|
||||
The extension id prefix, used for related HTML elements with an id.
|
||||
The prefix is used to avoid id conflicts with other extensions.
|
||||
Reserved ids (do not use):
|
||||
- <id_prefix>-extension-container
|
||||
#}
|
||||
{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
|
||||
|
||||
{# The extension tab content #}
|
||||
{% set tab_content = name %}
|
||||
|
||||
{# The extension container content #}
|
||||
{% set container_content = '' %}
|
||||
|
||||
{# The extension modals #}
|
||||
{% set modals = '' %}
|
||||
|
||||
{# The extension scripts #}
|
||||
{% set scripts = '' %}
|
||||
Loading…
Reference in New Issue
Block a user