Skip to content
Snippets Groups Projects
Commit 817a13df authored by Patrick Jentsch's avatar Patrick Jentsch
Browse files

First take on cleaning up the corpus analysis template code

parent 078f88d4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/templates/corpora/analysis.html.j2
+ 30
− 50
View file @ 817a13df
{% extends "base.html.j2" %} {% extends "base.html.j2" %}
{% import "materialize/wtf.html.j2" as wtf %} {% 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 main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-container"{% endblock main_attribs %}
{% block page_content %} {% block page_content %}
<ul class="row tabs no-autoinit" id="corpus-analysis-app-extension-tabs"> <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 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> {% for extension in extensions %}
<li class="tab col s3"><a href="#reader-extension-container"><i class="material-icons left">chrome_reader_mode</i>Reader</a></li> <li class="tab col s3"><a href="#{{ extension.id_prefix }}-container">{{ extension.tab_content }}</a></li>
{% endfor %}
</ul> </ul>
<div class="row" id="corpus-analysis-app-overview"> <div class="row" id="corpus-analysis-app-overview">
...@@ -14,29 +21,23 @@ ...@@ -14,29 +21,23 @@
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
</div> </div>
{% for extension in extensions %}
<div class="col s3"> <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"> <div class="card-content">
<span class="card-title"><i class="material-icons left">chrome_reader_mode</i>Reader</span> <span class="card-title">{{ extension.name }}</span>
<p>Inspect your corpus in detail with a full text view, including annotations.</p> <p>{{ extension.description }}</p>
</div> </div>
</div> </div>
</div> </div>
{% endfor %}
</div> </div>
{# #} {% for extension in extensions %}
{% include "corpora/_analysis/reader.html.j2" %} <div id="{{ extension.id_prefix }}-container">
{{ extension.container_content }}
{% include "corpora/_analysis/concordance.html.j2" %} </div>
{% endfor %}
{% endblock page_content %} {% endblock page_content %}
{% block modals %} {% block modals %}
...@@ -54,33 +55,9 @@ ...@@ -54,33 +55,9 @@
</div> </div>
</div> </div>
<div class="modal" id="example-modal"> {% for extension in extensions %}
<div class="modal-content"> {{ extension.modals }}
<div class="row"> {% endfor %}
<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>
<div class="modal" id="concordance-query-builder"> <div class="modal" id="concordance-query-builder">
<div class="modal-content"> <div class="modal-content">
...@@ -409,11 +386,14 @@ ...@@ -409,11 +386,14 @@
{% block scripts %} {% block scripts %}
{{ super() }} {{ super() }}
<script> <script>
const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }}); const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp); </script>
const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
const concordanceQueryBuilder = new ConcordanceQueryBuilder();
corpusAnalysisApp.init(); {% for extension in extensions %}
{{ extension.scripts }}
{% endfor %}
<script>
corpusAnalysisApp.init();
</script> </script>
{% endblock scripts %} {% endblock scripts %}
app/templates/corpora/_analysis/concordance.html.j2 → app/templates/corpora/analysis_extensions/concordance.html.j2
+ 66
− 15
View file @ 817a13df
<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="col s12">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<form id="concordance-extension-form"> <form id="{{ id_prefix }}-form">
<div class="row"> <div class="row">
<div class="input-field col s12 m9"> <div class="input-field col s12 m9">
<i class="material-icons prefix">search</i> <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> <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="concordance-extension-form-query">Query</label> <label for="{{ id_prefix }}-form-query">Query</label>
<span class="error-color-text helper-text hide" id="concordance-extension-error"></span> <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> <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> <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> <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> <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>
<div class="input-field col s12 m3"> <div class="input-field col s12 m3">
<i class="material-icons prefix">arrow_forward</i> <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> <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="concordance-extension-form-subcorpus-name">Subcorpus name</label> <label for="{{ id_prefix }}-form-subcorpus-name">Subcorpus name</label>
</div> </div>
<div class="col s12 m9 l9"> <div class="col s12 m9 l9">
<div class="row"> <div class="row">
...@@ -70,7 +83,7 @@ ...@@ -70,7 +83,7 @@
<i class="material-icons left">build</i> <i class="material-icons left">build</i>
Query builder (beta) Query builder (beta)
</a> </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 Send
<i class="material-icons right">send</i> <i class="material-icons right">send</i>
</button> </button>
...@@ -82,16 +95,16 @@ ...@@ -82,16 +95,16 @@
</div> </div>
<div class="col s12"> <div class="col s12">
<div id="concordance-extension-subcorpus-list"></div> <div id="{{ id_prefix }}-subcorpus-list"></div>
<div class="card"> <div class="card">
<div class="card-content"> <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 class="indeterminate"></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col s9"><p class="hide" id="concordance-extension-subcorpus-info"></p></div> <div class="col s9"><p class="hide" id="{{ id_prefix }}-subcorpus-info"></p></div>
<div class="col s3 right-align" id="concordance-extension-subcorpus-actions"></div> <div class="col s3 right-align" id="{{ id_prefix }}-subcorpus-actions"></div>
</div> </div>
<table class="highlight"> <table class="highlight">
<thead> <thead>
...@@ -104,10 +117,48 @@ ...@@ -104,10 +117,48 @@
<th class="left-align" style="width: 5%;"></th> <th class="left-align" style="width: 5%;"></th>
</tr> </tr>
</thead> </thead>
<tbody id="concordance-extension-subcorpus-items"></tbody> <tbody id="{{ id_prefix }}-subcorpus-items"></tbody>
</table>
<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> </table>
<ul class="pagination hide" id="concordance-extension-subcorpus-pagination"></ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% endset %}
{% set scripts %}
<script>
const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
const concordanceQueryBuilder = new ConcordanceQueryBuilder();
</script>
{% endset %}
app/templates/corpora/_analysis/reader.html.j2 → app/templates/corpora/analysis_extensions/reader.html.j2
+ 23
− 1
View file @ 817a13df
<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="col s12">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
...@@ -65,3 +78,12 @@ ...@@ -65,3 +78,12 @@
</div> </div>
</div> </div>
</div> </div>
{% endset %}
{% set modals = '' %}
{% set scripts %}
<script>
const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
</script>
{% endset %}
app/templates/corpora/analysis_extensions/template.html.j2 0 → 100644
+ 26
− 0
View file @ 817a13df
{# 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 = '' %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment