Merge branch 'public-corpus' of gitlab.ub.uni-bielefeld.de:sfb1288inf/nopaque into public-corpus

app/static/js/CorpusAnalysis/CorpusAnalysisReader.js

@@ -106,41 +106,102 @@ class CorpusAnalysisReader {
   renderCorpusPagination() {
     this.clearCorpusPagination();
     if (this.data.corpus.p.pages === 0) {return;}
-    this.elements.corpusPagination.innerHTML += `
+    let pageElement;
-      <li class="${this.data.corpus.p.page === 1 ? 'disabled' : 'waves-effect'}">
+    // First page button. Disables first page button if on first page
-        <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.page === 1 ? '' : 'data-target="1"'}>
+    pageElement = Utils.HTMLToElement(
-          <i class="material-icons">first_page</i>
+      `
-        </a>
+        <li class="${this.data.corpus.p.page === 1 ? 'disabled' : 'waves-effect'}">
-      </li>
+          <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.page === 1 ? '' : 'data-target="1"'}>
-    `.trim();
+            <i class="material-icons">first_page</i>
-    this.elements.corpusPagination.innerHTML += `
+          </a>
-      <li class="${this.data.corpus.p.has_prev ? 'waves-effect' : 'disabled'}">
-        <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.has_prev ? 'data-target="' + this.data.corpus.p.prev_num + '"' : ''}>
-          <i class="material-icons">chevron_left</i>
-        </a>
-      </li>
-    `.trim();
-    for (let i = 1; i <= this.data.corpus.p.pages; i++) {
-      this.elements.corpusPagination.innerHTML += `
-        <li class="${i === this.data.corpus.p.page ? 'active' : 'waves-effect'}">
-          <a class="corpus-analysis-action pagination-trigger" ${i === this.data.corpus.p.page ? '' : 'data-target="' + i + '"'}>${i}</a>
         </li>
-      `.trim();
+      `
+    );
+    this.elements.corpusPagination.appendChild(pageElement);
+    // Previous page button. Disables previous page button if on first page
+    pageElement = Utils.HTMLToElement(
+      `
+        <li class="${this.data.corpus.p.has_prev ? 'waves-effect' : 'disabled'}">
+          <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.has_prev ? 'data-target="' + this.data.corpus.p.prev_num + '"' : ''}>
+            <i class="material-icons">chevron_left</i>
+          </a>
+        </li>
+      `
+    );
+    this.elements.corpusPagination.appendChild(pageElement);
+    // First page as number. Hides first page button if on first page
+    if (this.data.corpus.p.page > 6) {
+      pageElement = Utils.HTMLToElement(
+        `
+          <li class="waves-effect">
+            <a class="corpus-analysis-action pagination-trigger" data-target="1">1</a>
+          </li>
+        `
+      );
+      this.elements.corpusPagination.appendChild(pageElement);
+      pageElement = Utils.HTMLToElement("<li style='margin-top: 5px;'>&hellip;</li>");
+      this.elements.corpusPagination.appendChild(pageElement);
     }
-    this.elements.corpusPagination.innerHTML += `
+
-      <li class="${this.data.corpus.p.has_next ? 'waves-effect' : 'disabled'}">
+    // render page buttons (5 before and 5 after current page)
-        <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.has_next ? 'data-target="' + this.data.corpus.p.next_num + '"' : ''}>
+    for (let i = this.data.corpus.p.page -5; i <= this.data.corpus.p.page; i++) {
-          <i class="material-icons">chevron_right</i>
+      if (i <= 0) {continue;}
-        </a>
+      pageElement = Utils.HTMLToElement(
-      </li>
+        `
-    `.trim();
+          <li class="${i === this.data.corpus.p.page ? 'active' : 'waves-effect'}">
-    this.elements.corpusPagination.innerHTML += `
+          <a class="corpus-analysis-action pagination-trigger" ${i === this.data.corpus.p.page ? '' : 'data-target="' + i + '"'}>${i}</a>
-      <li class="${this.data.corpus.p.page === this.data.corpus.p.pages ? 'disabled' : 'waves-effect'}">
+          </li>
-        <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.page === this.data.corpus.p.pages ? '' : 'data-target="' + this.data.corpus.p.pages + '"'}>
+        `
-          <i class="material-icons">last_page</i>
+      );
-        </a>
+      this.elements.corpusPagination.appendChild(pageElement);
-      </li>
+    };
-    `.trim();
+    for (let i = this.data.corpus.p.page +1; i <= this.data.corpus.p.page +5; i++) {
+      if (i > this.data.corpus.p.pages) {break;}
+      pageElement = Utils.HTMLToElement(
+        `
+          <li class="${i === this.data.corpus.p.page ? 'active' : 'waves-effect'}">
+          <a class="corpus-analysis-action pagination-trigger" ${i === this.data.corpus.p.page ? '' : 'data-target="' + i + '"'}>${i}</a>
+          </li>
+        `
+      );
+      this.elements.corpusPagination.appendChild(pageElement);
+    };
+    // Last page as number. Hides last page button if on last page
+    if (this.data.corpus.p.page < this.data.corpus.p.pages - 6) {
+      pageElement = Utils.HTMLToElement("<li style='margin-top: 5px;'>&hellip;</li>");
+      this.elements.corpusPagination.appendChild(pageElement);
+      pageElement = Utils.HTMLToElement(
+        `
+          <li class="waves-effect">
+            <a class="corpus-analysis-action pagination-trigger" data-target="${this.data.corpus.p.pages}">${this.data.corpus.p.pages}</a>
+          </li>
+        `
+      );
+      this.elements.corpusPagination.appendChild(pageElement);
+    }
+    // Next page button. Disables next page button if on last page
+    pageElement = Utils.HTMLToElement(
+      `
+        <li class="${this.data.corpus.p.has_next ? 'waves-effect' : 'disabled'}">
+          <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.has_next ? 'data-target="' + this.data.corpus.p.next_num + '"' : ''}>
+            <i class="material-icons">chevron_right</i>
+          </a>
+        </li>
+      `
+    );
+    this.elements.corpusPagination.appendChild(pageElement);
+    // Last page button. Disables last page button if on last page
+    pageElement = Utils.HTMLToElement(
+      `
+        <li class="${this.data.corpus.p.page === this.data.corpus.p.pages ? 'disabled' : 'waves-effect'}">
+          <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.page === this.data.corpus.p.pages ? '' : 'data-target="' + this.data.corpus.p.pages + '"'}>
+            <i class="material-icons">last_page</i>
+          </a>
+        </li>
+      `
+    );
+    this.elements.corpusPagination.appendChild(pageElement);
+    
     for (let paginateTriggerElement of this.elements.corpusPagination.querySelectorAll('.pagination-trigger[data-target]')) {
       paginateTriggerElement.addEventListener('click', event => {
         event.preventDefault();
@@ -182,6 +243,7 @@ class CorpusAnalysisReader {
       return;
     }
     this.app.disableActionElements();
+    window.scrollTo(top);
     this.elements.progress.classList.remove('hide');
     this.data.corpus.o.paginate(pageNum, this.settings.perPage)
       .then(

app/templates/corpora/analyse_corpus.html.j2

@@ -247,7 +247,29 @@
 
 <div class="modal" id="example-modal">
   <div class="modal-content">
-    <h4>Examples</h4>
+    <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>