/*
|
Baum-Demo
|
von Ulrich Hilger, https://uhilger.de
|
8. Juli 2021
|
*/
|
|
var vorlage = 'baum-inhalt.mustache';
|
|
/**
|
* Den Baum initial befuellen
|
*/
|
function baum_init() {
|
http_get('liste.json', function(antwort) {
|
html_erzeugen(vorlage, JSON.parse(antwort), function(html) {
|
var baumdiv = document.querySelector('.baum');
|
baumdiv.appendChild(html_to_element(html));
|
addEvtListener('.baum-elem', 'click', baum_klick);
|
});
|
});
|
}
|
|
/**
|
* Einen Klick auf ein Baum-Element verarbeiten
|
*/
|
function baum_klick(event) {
|
var t = event.target;
|
var bereich = t.nodeName;
|
if(bereich.toLowerCase() === 'i') {
|
info_zeigen('Piktogramm von ' + text_zu_bild(t) + ' geklickt');
|
baum_pikto_klick(t);
|
} else if(bereich.toLowerCase() === 'span') {
|
info_zeigen(t.textContent + ' gewaehlt');
|
baum_text_klick(t);
|
} else {
|
// tue nichts
|
}
|
}
|
|
/**
|
* Klick auf Piktogramm
|
*
|
* Wenn Ordner:
|
*
|
* Wenn geoeffnet: Ordner schliessen
|
* Inhalt verbergen oder entfernen (je nach Modus)
|
*
|
* Wenn geschlossen: Ordner oeffnen
|
* wenn leer, ggf. Inhalt laden
|
* wenn nicht leer: Inhalt darstellen
|
*
|
* Wenn Datei:
|
* tue nichts
|
*/
|
function baum_pikto_klick(iElem) {
|
var typ = baum_element_typ(iElem);
|
switch(typ) {
|
case 1:
|
// Klick auf geschlossenen Ordner
|
info_anfuegen(', geschlossen, wurde geoffnet');
|
baum_pikto_wechseln(iElem, 'icon-folder', 'icon-folder-open');
|
var c = iElem.parentNode.querySelector('.baum-zweig');
|
if(c === undefined || c === null) {
|
var neue = baum_elemente();
|
html_erzeugen(vorlage, neue, function(html) {
|
iElem.parentNode.appendChild(html_to_element(html));
|
});
|
} else {
|
baum_toggle_children(iElem.parentNode, 'block');
|
}
|
break;
|
case 2:
|
// Klick auf geoeffneten Ordner
|
info_anfuegen(', geoeffnet, wurde geschlossen');
|
baum_pikto_wechseln(iElem, 'icon-folder-open', 'icon-folder');
|
baum_toggle_children(iElem.parentNode, 'none');
|
break;
|
case 3:
|
// Klick auf Datei
|
break;
|
}
|
}
|
|
/**
|
* Den Text zu einem Piktogramm ermitteln
|
*/
|
function text_zu_bild(iElem) {
|
return iElem.parentNode.querySelector('.baum-text').textContent;
|
}
|
|
/**
|
* Klick auf Text
|
*
|
* Wenn Datei:
|
* a) noch nicht gewaehlt: Auswahl der Datei
|
* b) gewaehlt: Aktion ausloesen, z.B. Datei oeffnen
|
*
|
* Wenn Ordner:
|
* a) noch nicht gewaehlt: Auswahl des Ordners
|
* b) gewaehlt: -
|
*/
|
function baum_text_klick(tElem) {
|
var gewaehlt = document.querySelector('.gewaehlt');
|
if(gewaehlt !== undefined && gewaehlt !== null) {
|
if(tElem !== gewaehlt) {
|
gewaehlt.classList.remove('gewaehlt');
|
} else {
|
info_zeigen('zweiter Klick auf ' + tElem.textContent);
|
}
|
}
|
if(tElem.classList.contains('gewaehlt')) {
|
tElem.classList.remove('gewaehlt');
|
} else {
|
tElem.classList.add('gewaehlt');
|
}
|
}
|
|
/**
|
* Kind-Elemente eines Baum-Elements umschalten
|
*/
|
function baum_toggle_children(elem, visibility) {
|
var c = elem.querySelector('.baum-zweig');
|
var anz = c.children.length;
|
for(var i = 0; i < anz; i++) {
|
c.children[i].style.display = visibility;
|
}
|
}
|
|
/**
|
* Piktogramm eines Baum-Elements wechseln
|
*/
|
function baum_pikto_wechseln(iElem, weg, neu) {
|
iElem.classList.remove(weg);
|
iElem.classList.add(neu);
|
}
|
|
/**
|
* Anhand der Typklasse den Typ des Baumelements ermitteln
|
*
|
* elem: Das Element, das die Typklasse des Baumelements enthaelt
|
* return: 1 (ordner geschlossen), 2 (ordner geoeffnet), 3 (datei)
|
*/
|
function baum_element_typ(elem) {
|
if(elem.classList.contains('icon-folder')) {
|
return 1;
|
} else if(elem.classList.contains('icon-folder-open')) {
|
return 2;
|
} else if(elem.classList.contains('icon-doc-inv')) {
|
return 3;
|
}
|
}
|
|
/**
|
* Baum-Elemente aus Datenobjekten erzeugen
|
*/
|
function baum_elemente() {
|
var dateien = new Array();
|
dateien.push(new Datei('datei.txt', 'datei', 'icon-doc-inv'));
|
dateien.push(new Datei('Ordner', 'ordner', 'icon-folder'));
|
dateien.push(new Datei('index.html', 'datei', 'icon-doc-inv'));
|
dateien.push(new Datei('stile.css', 'datei', 'icon-doc-inv'));
|
var elem = new BaumElem('/meine-app/cms/test', dateien);
|
return elem;
|
}
|
|
/**
|
* Eine Info-Nachricht anzeigen
|
*/
|
function info_zeigen(text) {
|
document.querySelector('.msg').textContent = text;
|
}
|
|
/**
|
* Einen Text zur Infonachricht hinzufuegen
|
*/
|
function info_anfuegen(text) {
|
var vorhanden = document.querySelector('.msg').textContent;
|
document.querySelector('.msg').textContent = vorhanden + text;
|
}
|
|
/* ---- Objekte ---- */
|
|
function BaumElem(p, d) {
|
this.pfad = p;
|
this.dateien = d;
|
}
|
|
function Datei(n, t, k) {
|
this.name = n;
|
this.typ = t;
|
this.typKlasse = k;
|
}
|
|
|
|
/* ========= HELFERLEIN =========== */
|
|
|
|
/* ---- JS ---- */
|
|
function addEvtListener(selector, eventName, func) {
|
document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
|
};
|
|
/* ---- DOM ---- */
|
|
function html_to_element(html) {
|
let temp = document.createElement('template');
|
html = html.trim(); // Never return a space text node as a result
|
temp.innerHTML = html;
|
return temp.content.firstChild;
|
};
|
|
/* ---- Vorlagen ---- */
|
|
var cache = new Array();
|
|
function html_erzeugen(vurl, inhalt, cb) {
|
var vorlage = cache[vurl];
|
if (vorlage === undefined) {
|
vorlage_laden_und_fuellen(vurl, inhalt, cb);
|
} else {
|
vorlage_fuellen(vurl, inhalt, cb);
|
}
|
}
|
|
function vorlage_fuellen(vurl, inhalt, cb) {
|
cb(Mustache.render(cache[vurl], inhalt));
|
}
|
|
function vorlage_laden_und_fuellen(vurl, inhalt, cb) {
|
http_get(vurl, function(antwort, status) {
|
cache[vurl] = antwort;
|
vorlage_fuellen(vurl, inhalt, cb);
|
});
|
}
|
|
/* ---- HTTP ----- */
|
|
function http_get(callurl, cb) {
|
//http_call('GET', u, null, cb);
|
var xhr = new XMLHttpRequest();
|
xhr.onreadystatechange = function () {
|
if (this.readyState === 4 && this.status === 200) {
|
cb(this.responseText);
|
}
|
};
|
xhr.open('GET', callurl);
|
xhr.setRequestHeader('Content-type', 'application/text');
|
xhr.send();
|
}
|
