From f278ba971e8a814cd0d9ceb1e4ebf77117f48565 Mon Sep 17 00:00:00 2001 From: ulrich <undisclosed> Date: Mon, 08 Mar 2021 15:02:22 +0000 Subject: [PATCH] vorlage.js nach app.js uebertragen, eine einzelne js.-Datei lohnt nicht. --- /dev/null | 66 ---------------------- index.html | 13 ++-- js/app.js | 71 ++++++++++++++++++++++- 3 files changed, 75 insertions(+), 75 deletions(-) diff --git a/index.html b/index.html index a75d0e0..d206386 100644 --- a/index.html +++ b/index.html @@ -40,22 +40,22 @@ </p> <p> Wenn dessen Darstellung mehr - Platz benötigt als das Anzeigegerät bietet wird ein + Platz benötigt als das Anzeigegerät bietet wird ein Rollbalken eingeblendet. Beim Rollen zu anfangs nicht sichtbaren Teilen des Inhalts bleiben die den Inhaltsbereich - umschließenden Elemente sichtbar. + umschließenden Elemente sichtbar. </p> <p> Ein Klick auf das Hamburger-Piktogramm oben links bzw. dessen - Antippen blendet ein Menü ein von dem aus weitere Funktionen - ausgelöst werden können. + Antippen blendet ein Menü ein von dem aus weitere Funktionen + ausgelöst werden können. </p> </div> </div> </div> <!-- oestliche Seitenleiste --> <div class="ost ost-open"> - östliche Seitenleiste + östliche Seitenleiste </div> </div> <!-- Fusszeile --> @@ -65,7 +65,7 @@ <!-- Skripte --> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script> <script src="js/app-menu.js"></script> - <script src="js/vorlagen.js"></script> + <!-- <script src="js/vorlagen.js"></script> --> <script src="js/app.js"></script> <script> var app; @@ -76,3 +76,4 @@ </script> </body> </html> + diff --git a/js/app.js b/js/app.js index 8280ca7..4eaffef 100644 --- a/js/app.js +++ b/js/app.js @@ -1,10 +1,13 @@ function AppVorlage() { var self = this; var appMenu; - var vorlagen; + // var vorlagen; + var cache; // mustache templates + this.init = function() { - self.vorlagen = new Vorlagen(); + //self.vorlagen = new Vorlagen(); + self.cache = new Array(); self.appMenu = new AppMenu(); self.appMenu.init( "data/menu/", @@ -116,7 +119,7 @@ this.dialog_zeigen = function(vurl, inhalt) { var dlg = document.querySelector(".dialog"); - self.vorlagen.html_erzeugen( + self.html_erzeugen( vurl, inhalt, function(html) { @@ -137,5 +140,67 @@ dlg.innerHTML = ''; }; + /* Vorlagen */ + + /* + Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt + gefüllt wird + + Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem + Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten. + Das fertige HTML wird der Callback-Funktion übergeben + sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der + Programmlauf zu diesem Zeitpunkt mittlerweile ist. + + vurl - URL zur Vorlagendatei + inhalt - die JSON-Struktur, deren Inhalt in die + Vorlage gefüllt werden soll + cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist. + Dieser Callback-Funktion wird das fertige HTML übergeben + */ + this.html_erzeugen = function(vurl, inhalt, cb) { + var vorlage = self.cache[vurl]; + if(vorlage === undefined) { + self.vorlage_laden_und_fuellen(vurl, inhalt, cb); + } else { + self.vorlage_fuellen(vurl, inhalt, cb); + } + }; + + this.vorlage_fuellen = function(vurl, inhalt, cb) { + cb(Mustache.render(self.cache[vurl], inhalt)); + }; + + /* + Eine Vorlage vom Server in den lokalen Speicher laden + vurl - der URL unter dem die Vorlage zu finden ist + inhalt - die JSON-Struktur, deren Inhalt in die + Vorlage gefüllt werden soll + cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem + Inhalt gefüllt ist + */ + this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) { + /* + $.ajax({ + url: vurl, + type: "GET", + dataType : "text" + }).done(function( vorlage ) { + self.cache[vurl] = vorlage; + self.vorlage_fuellen(vurl, inhalt, cb); + }); + */ + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + self.cache[vurl] = this.responseText; + self.vorlage_fuellen(vurl, inhalt, cb); + } + }; + xmlhttp.open("GET", vurl, true); + xmlhttp.send(); + }; + } + diff --git a/js/vorlagen.js b/js/vorlagen.js deleted file mode 100644 index d76cd94..0000000 --- a/js/vorlagen.js +++ /dev/null @@ -1,66 +0,0 @@ - - -function Vorlagen() { - var self = this; - this.cache = {}; // mustache templates - - /* - Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt - gefüllt wird - - Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem - Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten. - Das fertige HTML wird der Callback-Funktion übergeben - sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der - Programmlauf zu diesem Zeitpunkt mittlerweile ist. - - vurl - URL zur Vorlagendatei - inhalt - die JSON-Struktur, deren Inhalt in die - Vorlage gefüllt werden soll - cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist. - Dieser Callback-Funktion wird das fertige HTML übergeben - */ - this.html_erzeugen = function(vurl, inhalt, cb) { - var vorlage = self.cache[vurl]; - if(vorlage === undefined) { - self.vorlage_laden_und_fuellen(vurl, inhalt, cb); - } else { - self.vorlage_fuellen(vurl, inhalt, cb); - } - }; - - this.vorlage_fuellen = function(vurl, inhalt, cb) { - cb(Mustache.render(self.cache[vurl], inhalt)); - }; - - /* - Eine Vorlage vom Server in den lokalen Speicher laden - vurl - der URL unter dem die Vorlage zu finden ist - inhalt - die JSON-Struktur, deren Inhalt in die - Vorlage gefüllt werden soll - cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem - Inhalt gefüllt ist - */ - this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) { - /* - $.ajax({ - url: vurl, - type: "GET", - dataType : "text" - }).done(function( vorlage ) { - self.cache[vurl] = vorlage; - self.vorlage_fuellen(vurl, inhalt, cb); - }); - */ - var xmlhttp = new XMLHttpRequest(); - xmlhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - self.cache[vurl] = this.responseText; - self.vorlage_fuellen(vurl, inhalt, cb); - } - }; - xmlhttp.open("GET", vurl, true); - xmlhttp.send(); - }; - -} -- Gitblit v1.9.3