Baum-Demo
view | history | commit | commitdiff
ulrich
2021-07-11 e662e029b0553be9cf78bb0f8b8f78ba41789239
commit | author | age
8077b8 1 /*
U 2 Baum-Demo
3 von Ulrich Hilger, https://uhilger.de
4 8. Juli 2021
5 */
6
7 var vorlage = 'baum-inhalt.mustache';
8
9 /**
10  * Den Baum initial befuellen
11  */
12 function baum_init() {
13   http_get('liste.json', function(antwort) {
14       html_erzeugen(vorlage, JSON.parse(antwort), function(html) {
15           var baumdiv = document.querySelector('.baum');
16           baumdiv.appendChild(html_to_element(html));
17           addEvtListener('.baum-elem', 'click', baum_klick);
18       });
19   });
20 }
21
22 /**
23  * Einen Klick auf ein Baum-Element verarbeiten
24  */
25 function baum_klick(event) {
26     var t = event.target;
27     var bereich = t.nodeName;
28     if(bereich.toLowerCase() === 'i') {
29         info_zeigen('Piktogramm von ' + text_zu_bild(t) + ' geklickt');
30         baum_pikto_klick(t);
31     } else if(bereich.toLowerCase() === 'span') {
32         info_zeigen(t.textContent + ' gewaehlt');
33         baum_text_klick(t);
34     } else {
35         // tue nichts
36     }
37 }
38
39 /**
40  * Klick auf Piktogramm
41  * 
42  * Wenn Ordner:
43  * 
44  *   Wenn geoeffnet: Ordner schliessen
45  *     Inhalt verbergen oder entfernen (je nach Modus)
46  * 
47  *   Wenn geschlossen: Ordner oeffnen
48  *     wenn leer, ggf. Inhalt laden
49  *     wenn nicht leer: Inhalt darstellen
50  * 
51  * Wenn Datei:
52  *   tue nichts
53  */
54 function baum_pikto_klick(iElem) {
55     var typ = baum_element_typ(iElem);
56     switch(typ) {
57         case 1:
58             // Klick auf geschlossenen Ordner
59             info_anfuegen(', geschlossen, wurde geoffnet');
60             baum_pikto_wechseln(iElem, 'icon-folder', 'icon-folder-open');
61             var c = iElem.parentNode.querySelector('.baum-zweig');
62             if(c === undefined || c === null) {
63                 var neue = baum_elemente();
64                 html_erzeugen(vorlage, neue, function(html) {
65                   iElem.parentNode.appendChild(html_to_element(html));
66                 });
67             } else {
68                 baum_toggle_children(iElem.parentNode, 'block');
69             }
70             break;
71         case 2:
72             // Klick auf geoeffneten Ordner
73             info_anfuegen(', geoeffnet, wurde geschlossen');
74             baum_pikto_wechseln(iElem, 'icon-folder-open', 'icon-folder');
75             baum_toggle_children(iElem.parentNode, 'none');
76             break;
77         case 3:
78             // Klick auf Datei
79             break;
80     }
81 }
82
83 /**
84  * Den Text zu einem Piktogramm ermitteln
85  */
86 function text_zu_bild(iElem) {
87     return iElem.parentNode.querySelector('.baum-text').textContent;
88 }
89
90 /**
91  * Klick auf Text
92  * 
93  * Wenn Datei:
94  * a) noch nicht gewaehlt: Auswahl der Datei
95  * b) gewaehlt: Aktion ausloesen, z.B. Datei oeffnen 
96  * 
97  * Wenn Ordner:
98  * a) noch nicht gewaehlt: Auswahl des Ordners
99  * b) gewaehlt: -
100  */ 
101 function baum_text_klick(tElem) {
102     var gewaehlt = document.querySelector('.gewaehlt');
103     if(gewaehlt !== undefined && gewaehlt !== null) {
104         if(tElem !== gewaehlt) {
105             gewaehlt.classList.remove('gewaehlt');
106         } else {
107             info_zeigen('zweiter Klick auf ' + tElem.textContent);
108         }
109     }
110     if(tElem.classList.contains('gewaehlt')) {
111         tElem.classList.remove('gewaehlt');
112     } else {
113         tElem.classList.add('gewaehlt');
114     }
115 }
116
117 /**
118  * Kind-Elemente eines Baum-Elements umschalten
119  */
120 function baum_toggle_children(elem, visibility) {
121     var c = elem.querySelector('.baum-zweig');
122     var anz = c.children.length;
123     for(var i = 0; i < anz; i++) {
124         c.children[i].style.display = visibility;
125     }
126 }
127
128 /**
129  * Piktogramm eines Baum-Elements wechseln
130  */
131 function baum_pikto_wechseln(iElem, weg, neu) {
132     iElem.classList.remove(weg);
133     iElem.classList.add(neu);
134 }
135
136 /**
137  * Anhand der Typklasse den Typ des Baumelements ermitteln
138  * 
139  * elem: Das Element, das die Typklasse des Baumelements enthaelt
140  * return: 1 (ordner geschlossen), 2 (ordner geoeffnet), 3 (datei)
141  */
142 function baum_element_typ(elem) {
143     if(elem.classList.contains('icon-folder')) {
144         return 1;
145     } else if(elem.classList.contains('icon-folder-open')) {
146         return 2;
147     } else if(elem.classList.contains('icon-doc-inv')) {
148         return 3;
149     }
150 }
151
152 /**
153  * Baum-Elemente aus Datenobjekten erzeugen
154  */
155 function baum_elemente() {
156   var dateien = new Array();
157   dateien.push(new Datei('datei.txt', 'datei', 'icon-doc-inv'));
158   dateien.push(new Datei('Ordner', 'ordner', 'icon-folder'));
159   dateien.push(new Datei('index.html', 'datei', 'icon-doc-inv'));
160   dateien.push(new Datei('stile.css', 'datei', 'icon-doc-inv'));
161   var elem = new BaumElem('/meine-app/cms/test', dateien);
162   return elem;
163 }
164
165 /**
166  * Eine Info-Nachricht anzeigen
167  */
168 function info_zeigen(text) {
169     document.querySelector('.msg').textContent = text;
170 }
171
172 /**
173  * Einen Text zur Infonachricht hinzufuegen
174  */
175 function info_anfuegen(text) {
176     var vorhanden = document.querySelector('.msg').textContent;
177     document.querySelector('.msg').textContent = vorhanden + text;
178 }
179
180 /* ---- Objekte ---- */
181
182 function BaumElem(p, d) {
183     this.pfad = p;
184     this.dateien = d;
185 }
186
187 function Datei(n, t, k) {
188     this.name = n;
189     this.typ = t;
190     this.typKlasse = k;
191 }
192
193
194
195 /* ========= HELFERLEIN =========== */
196
197
198
199 /* ---- JS ---- */
200
201 function addEvtListener(selector, eventName, func) {
202   document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
203 };
204
205 /* ---- DOM ---- */
206
207 function html_to_element(html) {
208     let temp = document.createElement('template');
209     html = html.trim(); // Never return a space text node as a result
210     temp.innerHTML = html;
211     return temp.content.firstChild;
212 };  
213
214 /* ---- Vorlagen ---- */
215
216 var cache = new Array();
217
218 function html_erzeugen(vurl, inhalt, cb) {
219     var vorlage = cache[vurl];
220     if (vorlage === undefined) {
221       vorlage_laden_und_fuellen(vurl, inhalt, cb);
222     } else {
223       vorlage_fuellen(vurl, inhalt, cb);
224     }
225 }
226
227 function vorlage_fuellen(vurl, inhalt, cb) {
228   cb(Mustache.render(cache[vurl], inhalt));
229 }
230
231 function vorlage_laden_und_fuellen(vurl, inhalt, cb) {
232     http_get(vurl, function(antwort, status) {
233         cache[vurl] = antwort;
234         vorlage_fuellen(vurl, inhalt, cb);
235     });
236 }
237
238 /* ---- HTTP ----- */
239
240 function http_get(callurl, cb) {
241   //http_call('GET', u, null, cb);
242   var xhr = new XMLHttpRequest();
243   xhr.onreadystatechange = function () {
244     if (this.readyState === 4 && this.status === 200) {
245       cb(this.responseText);
246     }
247   };
248   xhr.open('GET', callurl);
249   xhr.setRequestHeader('Content-type', 'application/text');
250   xhr.send();
251 }