diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js index 55d9beb4298eeeb8b043282c50aff98aec6f3b8f..891e12f71909ff14f992920a4262255e03396811 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js @@ -32,7 +32,9 @@ class CorpusAnalysisConcordance { async submitForm() { this.app.disableActionElements(); - let query = this.elements.form.query.value.trim(); + // let query = this.elements.form.query.value.trim(); + let query = this.checkQueryInput(); + console.log(query); let subcorpusName = this.elements.form['subcorpus-name'].value; this.elements.error.innerText = ''; this.elements.error.classList.add('hide'); @@ -96,6 +98,14 @@ class CorpusAnalysisConcordance { }); } + checkQueryInput() { + if (document.querySelector('#corpus-analysis-concordance-expert-mode-display').classList.contains('hide')) { + return document.querySelector('#corpus-analysis-concordance-query-preview').innerHTML.trim(); + } else { + return this.elements.form.query.value.trim(); + } + } + clearSubcorpusList() { this.elements.subcorpusList.innerHTML = ''; this.elements.subcorpusList.classList.add('hide'); diff --git a/app/templates/corpora/_analysis/concordance.html.j2 b/app/templates/corpora/_analysis/concordance.html.j2 index 5d14cce7e475e5d267bc3a27765e0d9fc203f202..96c7ef8dce15ccd3d55cc8e6624f446e5f1e11d6 100644 --- a/app/templates/corpora/_analysis/concordance.html.j2 +++ b/app/templates/corpora/_analysis/concordance.html.j2 @@ -17,7 +17,7 @@ <div class="card"> <div class="card-content"> <div class="row"> - <div class="col s2"> + <div class="col s1"> <span class="card-title">Query <i class="material-icons left" style="font-size: inherit;">search</i></span> </div> <div class="col s2"> @@ -30,23 +30,12 @@ </div> </div> </div> - <form id="corpus-analysis-concordance-form"> - <div id="corpus-analysis-concordance-expert-mode-display" class="hide"> - {{ expert_mode.card_content() }} - </div> - <div id="corpus-analysis-concordance-query-builder-display"> - {{ query_builder.card_content() }} - </div> - <div class="row"> - <div class="col s12 right-align"> - <p class="hide-on-small-only"> </p> - <button class="btn waves-effect waves-light corpus-analysis-action" id="corpus-analysis-concordance-form-submit" type="submit" name="submit"> - Send - <i class="material-icons right">send</i> - </button> - </div> - </div> - </form> + <div id="corpus-analysis-concordance-expert-mode-display" class="hide"> + {{ expert_mode.card_content() }} + </div> + <div id="corpus-analysis-concordance-query-builder-display"> + {{ query_builder.card_content() }} + </div> </div> </div> diff --git a/app/templates/corpora/_analysis/query_builder/_expert_mode.html.j2 b/app/templates/corpora/_analysis/query_builder/_expert_mode.html.j2 index 34c84c6d102cc19646d2c8ae44c49cc094692e2e..d6b112eb6be8b68919a6d231f4a1c90554b7a65d 100644 --- a/app/templates/corpora/_analysis/query_builder/_expert_mode.html.j2 +++ b/app/templates/corpora/_analysis/query_builder/_expert_mode.html.j2 @@ -1,17 +1,26 @@ {% macro card_content(id_prefix) %} <div class="row"> - <div class="input-field col s12 m9"> - <i class="material-icons prefix">search</i> - <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"></input> - <span class="error-color-text helper-text hide" id="corpus-analysis-concordance-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> - </div> - <div class="input-field col s12 m3"> - <i class="material-icons prefix">arrow_forward</i> - <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input> - <label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label> - </div> + <form id="corpus-analysis-concordance-form"> + <div class="input-field col s12 m9"> + <i class="material-icons prefix">search</i> + <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"></input> + <span class="error-color-text helper-text hide" id="corpus-analysis-concordance-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> + </div> + <div class="input-field col s12 m3"> + <i class="material-icons prefix">arrow_forward</i> + <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input> + <label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label> + </div> + <div class="col s12 m3 l3 right-align"> + <p class="hide-on-small-only"> </p> + <button class="btn waves-effect waves-light corpus-analysis-action" id="corpus-analysis-concordance-form-submit" type="submit" name="submit"> + Send + <i class="material-icons right">send</i> + </button> + </div> + </form> </div> {% endmacro %} diff --git a/app/templates/corpora/_analysis/query_builder/_query_builder.html.j2 b/app/templates/corpora/_analysis/query_builder/_query_builder.html.j2 index b3e607336a6960452e560ce8d530ca22085ff5e9..21a13f0d654bf9b96d5d2009f8a96f6eab5249c5 100644 --- a/app/templates/corpora/_analysis/query_builder/_query_builder.html.j2 +++ b/app/templates/corpora/_analysis/query_builder/_query_builder.html.j2 @@ -1,36 +1,47 @@ {% macro card_content(id_prefix) %} -<div class="row"> - <div class="col s9"> - <div class="chips" id="corpus-analysis-concordance-form-query-builder"></div> +<form id="corpus-analysis-concordance-form"> + <div class="row"> + <div class="col s9"> + <div class="chips" id="corpus-analysis-concordance-form-query-builder"></div> + </div> + <div class="input-field col s3"> + <i class="material-icons prefix">arrow_forward</i> + <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input> + <label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label> + </div> </div> - <div class="input-field col s3"> - <i class="material-icons prefix">arrow_forward</i> - <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input> - <label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label> + <div class="row"> + <div class="col s12"> + <span class="error-color-text helper-text hide" id="corpus-analysis-concordance-error"></span> + <a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal"><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> + </div> </div> -</div> -<div class="row"> - <div class="col s12"> - <span class="error-color-text helper-text hide" id="corpus-analysis-concordance-error"></span> - <a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal"><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> + <div class="row"> + <div class="col s12 hide"> + <p><i> Preview:</i></p> + <p id="corpus-analysis-concordance-query-preview"></p> + <br> + </div> </div> -</div> -<div class="row"> - <div class="col s12 hide"> - <p><i> Preview:</i></p> - <p id="corpus-analysis-concordance-query-preview"></p> - <br> + <div class="row"> + <div class="col s12"> + <p></p> + <a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-positional-attr-modal" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a> + <a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-structural-attr-modal" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a> + </div> </div> -</div> -<div class="row"> - <div class="col s12"> - <p></p> - <a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-positional-attr-modal" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a> - <a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-structural-attr-modal" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a> + <div class="row"> + <div class="col s12 right-align"> + <p class="hide-on-small-only"> </p> + <button class="btn waves-effect waves-light corpus-analysis-action" type="submit" name="submit"> + Send + <i class="material-icons right">send</i> + </button> + </div> </div> -</div> +</form> {% endmacro %} {% macro structural_attribute_modal(id_prefix) %}