Extract Javascript HTML into new Template and Javascript Module

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
 .git/
-/amd/Makefile
-/lang/de
+/amd/HowToGrunt.md
+/lang/de
+Changelog.md

amd/src/display.js

@@ -0,0 +1,82 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Block core and UI
+ *
+ * @module     block_booksearch/display
+ * @copyright  2024 University of Stuttgart <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+import {
+    render
+} from 'core/templates';
+
+/**
+ * Processes and Displays the search results inside the given element.
+ * @param {HTMLElement} element The elemtent to display the results inside.
+ * @param {Object} searchResults The search results to display as [filename[chapter{bookurl, context}]].
+ * @param {String} chapterLabel The label meaning "Chapter" in the active language.
+ */
+export function displayResults(element, searchResults, chapterLabel) {
+    const data = preprocessSearchResults(searchResults, chapterLabel);
+    render('block_booksearch/display', data).then((html) => {
+        element.innerHTML = html;
+        return undefined;
+    }).catch(ex => {
+        window.console.error('Template rendering failed: ', ex);
+    });
+}
+
+
+/**
+ * This function processes the searchResults, so they are usable for the template.
+ * @param {Object} searchResults The search results to display as [filename[chapter{bookurl, context}]].
+ * @param {String} chapterLabel The label meaning "Chapter" in the active language.
+ * @returns Array of search results processed to be perfectly used by the template.
+ */
+function preprocessSearchResults(searchResults, chapterLabel) {
+    const data = [];
+
+    for (const pdfName in searchResults) {
+        if (!searchResults.hasOwnProperty(pdfName)) {
+            continue;
+        }
+        const chapters = [];
+
+        for (const chapter in searchResults[pdfName]) {
+            if (!searchResults[pdfName].hasOwnProperty(chapter)) {
+                continue;
+            }
+            chapters.push({
+                chapter: chapter,
+                bookurl: searchResults[pdfName][chapter].bookurl,
+                context: searchResults[pdfName][chapter].context,
+                chapterLabel: chapterLabel
+            });
+
+        }
+
+        data.push({
+            filename: pdfName,
+            chapters: chapters
+        });
+
+    }
+
+    return {
+        data: data
+    };
+}

amd/src/search_and_display.js → amd/src/search.js

@@ -16,10 +16,13 @@
 /**
  * Block core and UI
  *
- * @module     block_booksearch/search_and_display
+ * @module     block_booksearch/search
  * @copyright  2024 University of Stuttgart <[email protected]>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
+import {
+    displayResults
+} from 'block_booksearch/display';
 
 /**
  * String label 'Chapter' in the current language.
@@ -56,39 +59,7 @@ function handleSearchInputChange(event) {
     document.getElementById("bs-search-term").innerHTML = searchTermLabel + searchTerm;
 
     // Update the inner HTML of the element with ID 'bs-content' to display the results.
-    document.getElementById("bs-content").innerHTML = getResultsUI(searchResults);
-}
-
-
-/**
- * Generates an HTML string to display search results for PDFs and their chapters.
- * @param {Object} searchResults - An object where keys are PDF names and values are objects of chapters.
- * @returns {string} An HTML string with headings for each PDF name and an unordered list of chapters, each with link and context.
- */
-function getResultsUI(searchResults) {
-    // Initialize an empty string to build the HTML display
-    let display = '';
-
-    // Iterate over each PDF name in the search results
-    for (var pdfName in searchResults) {
-        // Add the PDF name as a heading
-        display += '<h4>' + pdfName + '</h4>';
-        // Start an unordered list for the chapters
-        display += '<ul class="bs-content-element">';
-        // Iterate over each chapter in the current PDF
-        for (var chapter in searchResults[pdfName]) {
-            // Add each chapter as a list item with a link and context
-            display += '<li>' +
-                '<a href="' + searchResults[pdfName][chapter].bookurl + '">' +
-                chapterLabel + '-' + chapter +
-                '</a>: ' + searchResults[pdfName][chapter].context +
-                '</li>';
-        }
-        // Close the unordered list
-        display += '</ul>';
-    }
-
-    return display;
+    displayResults(document.getElementById("bs-content"), searchResults, chapterLabel);
 }
 
 
@@ -124,9 +95,7 @@ function getSearchResults(courseContent, searchTerm, contextLength) {
         // Set chapter entry as section or add section context to existing chapter entry.
         if (!results[section.filename].hasOwnProperty(section.page)) {
             results[section.filename][section.page] = {
-                filename: section.filename,
-                url: section.url,
-                bookUrl: section.bookUrl,
+                bookurl: section.bookurl,
                 context: section.context
             };
         } else {

block_booksearch.php

@@ -162,7 +162,7 @@ private function add_search_and_results_ui(string $text, string $footer): array
         }
 
         // Display the search input and results.
-        $text .= $OUTPUT->render_from_template('block_booksearch/search_and_display', [
+        $text .= $OUTPUT->render_from_template('block_booksearch/search', [
             'search_term_placeholder' => get_string('search', get_class($this)),
             'search_term_label' => get_string('search_term', get_class($this)),
             'chapter_label' => get_string('chapter', get_class($this)),