Persoenliche Mediazentrale
view | history | commit | commitdiff
ulrich
2021-04-04 cfa85894465dbf2d286e083d962babdf14641582
commit | author | age
cfa858 1 function AppVorlage() {
U 2   var self = this;
3   var appMenu;
4   // var vorlagen;
5   var cache; // mustache templates
6
7
8   this.init = function() {
9     //self.vorlagen = new Vorlagen();
10     self.cache = new Array();
11     self.appMenu = new AppMenu();
12     self.appMenu.init(
13       "data/menu/",
14       "hauptmenue.json",
15       "data/tpl/app-menu.tpl",
16       ".west",
17       "8em");
18
19     document.querySelector('.hamburger').addEventListener('click', function(e) {
20       self.menue_umschalten();
21     });
22
23   };
24
25   this.menue_umschalten = function() {
26     var ham = document.querySelector(".hamburger");
27     ham.classList.toggle("is-active"); // hamburger-icon umschalten
28     self.appMenu.toggle(); // menue oeffnen/schliessen
29   };
30
31   this.info_dialog_zeigen = function() {
32     self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', '');
33     self.menue_umschalten();
34   };
35
36   this.seitenleiste_umschalten = function() {
37     var ostDiv = document.querySelector('.ost');
38     if(ostDiv.classList.contains('ost-open')) {
39       ostDiv.classList.remove('ost-open');
40         ostDiv.style.flexBasis = '0em';
41     } else {
42         ostDiv.classList.add('ost-open');
43         ostDiv.style.flexBasis = '6em';
44     }
45     self.menue_umschalten();
46   };
47
48   this.fusszeile_umschalten = function() {
49     var suedDiv = document.querySelector('.sued');
50     if(suedDiv.classList.contains('sued-open')) {
51       suedDiv.classList.remove('sued-open');
52         suedDiv.style.height = '0';
53     } else {
54       suedDiv.classList.add('sued-open');
55         suedDiv.style.height = '1.5em';
56     }
57     self.menue_umschalten();
58   };
59
60   this.menu_message = function(msg) {
61     self.meldung_mit_timeout(msg, 1500);
62     var suedDiv = document.querySelector('.sued');
63     if(suedDiv.classList.contains('sued-open')) {
64     } else {
65       suedDiv.classList.add('sued-open');
66         suedDiv.style.height = '1.5em';
67     }
68     self.menue_umschalten();
69   };
70
71   this.message_1 = function() {
72     self.menu_message('Eine Mitteilung.');
73   };
74
75   this.message_2 = function() {
76     self.menu_message('Was wir schon immer sagen wollten.');
77   };
78
79   this.message_3 = function(text) {
80     self.menu_message(text);
81   };
82
83   this.meldung_mit_timeout = function(meldung, timeout) {
84     var s = document.querySelector('.sued');
85     s.textContent = meldung;
86     setTimeout(function() {
87       s.textContent = 'Bereit.';
88       setTimeout(function() {
89         var suedDiv = document.querySelector('.sued');
90         if(suedDiv.classList.contains('sued-open')) {
91               suedDiv.classList.remove('sued-open');
92               suedDiv.style.height = '0';
93         }
94       }, 500);
95     }, timeout);
96   };
97
98   /* Dialog-Funktionen */
99
100   /*
101     Einen Dialog aus Vorlagen erzeugen
102
103     vurl - URL zur Dialogvorlage
104     msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
105   */
106   this.dialog_laden_und_zeigen = function(vurl, msgTpl) {
107     if(msgTpl !== '') {
108       fetch(msgTpl)
109         .then(data => {
110           // Handle data
111           self.dialog_zeigen(vurl, data);
112         }).catch(error => {
113           // Handle error
114         });
115     } else {
116       self.dialog_zeigen(vurl, '');
117     }
118   };
119
120   this.dialog_zeigen = function(vurl, inhalt) {
121     var dlg = document.querySelector(".dialog");
122     self.html_erzeugen(
123       vurl,
124       inhalt,
125       function(html) {
126         //dlg.html(html);
127         dlg.style.height = '5em';
128         dlg.innerHTML = html;
129         document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
130         //dlg.slideDown(300);
131     });
132   };
133
134   self.dialog_schliessen = function() {
135     document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
136     //$('.dialog').slideUp(300);
137     var dlg = document.querySelector('.dialog');
138     //dlg.style.display = "none";
139     dlg.style.height = '0';
140     dlg.innerHTML = '';
141   };
142
143   /* Vorlagen */
144
145   /*
146     Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt
147     gefüllt wird
148
149     Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem
150     Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten.
151     Das fertige HTML wird der Callback-Funktion übergeben
152     sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der
153     Programmlauf zu diesem Zeitpunkt mittlerweile ist.
154
155     vurl - URL zur Vorlagendatei
156     inhalt - die JSON-Struktur, deren Inhalt in die
157               Vorlage gefüllt werden soll
158     cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist.
159           Dieser Callback-Funktion wird das fertige HTML übergeben
160   */
161   this.html_erzeugen = function(vurl, inhalt, cb) {
162     var vorlage = self.cache[vurl];
163     if(vorlage === undefined) {
164       self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
165     } else {
166       self.vorlage_fuellen(vurl, inhalt, cb);
167     }
168   };
169
170   this.vorlage_fuellen = function(vurl, inhalt, cb) {
171     cb(Mustache.render(self.cache[vurl], inhalt));
172   };
173
174   /*
175     Eine Vorlage vom Server in den lokalen Speicher laden
176     vurl - der URL unter dem die Vorlage zu finden ist
177     inhalt - die JSON-Struktur, deren Inhalt in die
178               Vorlage gefüllt werden soll
179     cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem
180             Inhalt gefüllt ist
181   */
182   this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) {
183     /*
184     $.ajax({
185       url: vurl,
186       type: "GET",
187       dataType : "text"
188     }).done(function( vorlage ) {
189       self.cache[vurl] = vorlage;
190       self.vorlage_fuellen(vurl, inhalt, cb);
191     });
192     */
193     var xmlhttp = new XMLHttpRequest();
194     xmlhttp.onreadystatechange = function() {
195       if (this.readyState == 4 && this.status == 200) {
196         self.cache[vurl] = this.responseText;
197         self.vorlage_fuellen(vurl, inhalt, cb);
198       }
199     };
200     xmlhttp.open("GET", vurl, true);
201     xmlhttp.send();
202   };
203
204
205 }
206