From 8ba358fc936b9d3721aa1fea64a4c00eaaa347a4 Mon Sep 17 00:00:00 2001 From: ulrich Date: Tue, 12 Jan 2021 23:18:10 +0000 Subject: [PATCH] Uebertragung Breadcrumb angefangen, noch in Arbeit --- web/ui2/js/app.js | 289 +++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 268 insertions(+), 21 deletions(-) diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js index 480b26e..fa1d44d 100644 --- a/web/ui2/js/app.js +++ b/web/ui2/js/app.js @@ -1,18 +1,19 @@ function AppVorlage() { var self = this; - var appMenu; - var vorlagen; - var api; - var userid; - var pfad = ''; - var loc; - var modus = 'kacheln'; - var PERS_DIR = "Persoenlich"; - var PUB_DIR = "Oeffentlich"; - var DAV_DIR = "Austausch"; - var BASE_DIR = "$basis"; - var DATA_DIR = "$daten"; - var WWW_DIR = "www"; + this.appMenu; + this.vorlagen; + this.api; + this.userid; + this.pfad = ''; + this.loc; + this.modus = 'kacheln'; + this.PERS_DIR = "Persoenlich"; + this.PUB_DIR = "Oeffentlich"; + this.DAV_DIR = "Austausch"; + this.BASE_DIR = "$basis"; + this.DATA_DIR = "$daten"; + this.WWW_DIR = "www"; + this.cache = {}; // mustache template cache this.datei_neuer_text = function () { self.meldung_mit_timeout("Neuer Text", 1500); @@ -21,7 +22,7 @@ /* Funktionen aus App-Vorlage */ this.init = function () { - self.vorlagen = new Vorlagen(); + //self.vorlagen = new Vorlagen(); self.appMenu = new AppMenu(); self.appMenu.init( "data/menu/", @@ -33,8 +34,21 @@ self.menue_umschalten(); }); self.fm_get_login(); - self.fm_get_list(''); + + var parsedUrl = new URL(window.location.href); + var wunschPfad = parsedUrl.searchParams.get("pfad"); + + if(wunschPfad !== null && wunschPfad.length > 0) { + self.pfad = wunschPfad; + self.fm_get_list(wunschPfad); + } else { + self.fm_get_list(''); + } + //fm_init_uploader(); self.loc = window.location.protocol + '//' + window.location.host; + + //self.fm_get_list(''); + //self.loc = window.location.protocol + '//' + window.location.host; }; this.login_zeigen = function() { @@ -136,11 +150,100 @@ dlg.innerHTML = ''; }; + /* + this.html_zeigen = function(html) { + // was mit dem html getan werden soll.. + var elem = document.querySelector('#dateien'); + elem.innerHTML = html; + $('.figure').click(fm_dateiwahl); + }; + */ + + this.fm_dateiwahl = function(ev) { + var elem = ev.target; + //console.log(elem.nodeName); + //var elem = this; + //console.log('dateiwahl nach click, event shift: ' + ev.shiftKey + ", event ctrl: " + ev.ctrlKey); + if(self.modus == 'kacheln') { + // Kacheln + if(elem.classList.contains("icon-folder")) { + //console.log('contains icon-folder'); + if(/*ev.shiftKey || */ ev.ctrlKey) { + //$(elem).find('.dateiname').addClass('datei-gewaehlt'); + elem.querySelector('.dateiname').classList.add('datei-gewaehlt'); + } else { + var ordner = elem.parentElement.querySelector('.dateiname').textContent.trim(); + //console.log('ordner ' + ordner); + if(self.pfad.length > 0) { + self.pfad = self.pfad + '/' + ordner; + } else { + self.pfad = ordner; + } + self.fm_get_list(self.pfad); + } + } else if(elem.classList.contains('datei')) { + //console.log('contains datei'); + if(/*ev.shiftKey || */ ev.ctrlKey) { + // mehrere Dateien sollen gewaehlt werden + } else { + var gew = document.querySelector('.datei-gewaehlt'); + if(gew != undefined) { + gew.classList.remove('datei-gewaehlt'); + } + } + //$(elem).find('.dateiname').addClass('datei-gewaehlt'); + var par = elem.parentElement; + //console.log(par.nodeName); + par.querySelector('.dateiname').classList.add('datei-gewaehlt'); + } else { + //console.log('kein folder oder file...'); + } + } else { + // Liste NOCH NEU MACHEN OHNE jQuery, wenn Liste implementiert ist + if(elem.querySelector('.datei-elem').children(0).hasClass('icon-doc-text-inv')) { + // Datei + if(/*ev.shiftKey || */ ev.ctrlKey) { + // mehrere Dateien sollen gewaehlt werden + } else { + document.querySelector('.table-info').classList.remove('table-info'); + document.querySelector('.datei-gewaehlt').classList.remove('datei-gewaehlt'); + } + elem.classList.add('table-info'); + elem.querySelector('.dateiname').classList.add('datei-gewaehlt'); + } else { + // Ordner + if(/*ev.shiftKey || */ ev.ctrlKey) { + elem.children[0].classList.add('datei-gewaehlt'); + } else { + var ordner = elem.querySelector('.dateiname').textContent; + if(self.pfad.length > 0) { + self.pfad = self.pfad + '/' + ordner; + } else { + self.pfad = ordner; + } + self.fm_get_list(pfad); + } + } + } + }; + + this.fm_render_list = function (fl) { if (self.modus == 'kacheln') { // Kachelansicht // neu bauen + + //html_erzeugen = function(vurl, inhalt, cb) + + self.html_erzeugen("data/tpl/kacheln.tpl", fl, function(html) { + var elem = document.querySelector('#dateien'); + elem.innerHTML = html; + //$('.figure').click(fm_dateiwahl); + self.addEvtListener('.figure', 'click', self.fm_dateiwahl); + + + }); /* var template = $('#tpl-kacheln').html(); @@ -186,7 +289,7 @@ restdir = restdir.replace(self.WWW_DIR, 'data'); } } - var pdir = fm_get_base(uid); + var pdir = self.fm_get_base(uid); // console.log('fm_get_path path: ' + pdir + "/" + restdir); if (restdir.length > 1) { return pdir + "/" + restdir; @@ -232,14 +335,109 @@ } var fl = new FileList(files); self.fm_render_list(fl); + //self.fm_render_list(resp); } else { // #dateien leeren - var elems = document.querySelector("#dateien"); - var count = elems[0].childElementCount; - for(var i = count-1; i > -1; i--) { - elems[0].removeChild(i); - } + var elem = document.querySelector("#dateien"); + elem.innerHTML = ''; } + + // Breadcrumb + + // Breadcrumb-Ansicht + //$('.breadcrumb-item').attr('onclick','').unbind('click'); + //$('#bcnav').empty(); + var dirList = new Array(); + var rp = ''; + //console.log("'" + relPfad + "'"); + var dirs = relPfad.split('/'); + //console.log(dirs.length); + dirList.push(new BcrFile(rp, 'Home')); + if(relPfad.length > 0) { + for(var i = 0; i < dirs.length - 1; i++) { + if(rp.length > 0 ) { + dirList.push(new BcrFile(rp + '/' + dirs[i], dirs[i])); + rp = rp + '/' + dirs[i]; + } else { + dirList.push(new BcrFile(dirs[i], dirs[i])); + rp = dirs[i]; + } + } + var bl = new BcrFiles(dirList); + + if(dirList.length > 0) { + //template = $('#tpl-bcr').html(); + //Mustache.parse(template); // optional, speeds up future uses + //$('#bcnav').html(Mustache.render(template, bl)); + + self.html_erzeugen("data/tpl/bcr.tpl", bl, function(html) { + var elem = document.querySelector('.breadcrumb'); + elem.innerHTML = html; + //self.addEvtListener('.figure', 'click', self.fm_dateiwahl); + }); + + } + + if(dirs.length > 0) { + dirList.push(new BcrFile(rp + '/' + dirs[dirs.length-1], dirs[dirs.length-1])); + //template = $('#tpl-bcr2').html(); + //Mustache.parse(template); // optional, speeds up future uses + //$('#bcnav').append(Mustache.render(template, dirList[dirList.length-1])); + self.html_erzeugen("data/tpl/bcr2.tpl", dirList[dirList.length-1], function(html) { + var elem = document.querySelector('.breadcrumb'); + elem.innerHTML += html; + //self.addEvtListener('.figure', 'click', self.fm_dateiwahl); + }); + } else { + //template = $('#tpl-bcr2').html(); + //Mustache.parse(template); // optional, speeds up future uses + //$('#bcnav').append(Mustache.render(template, dirList[0])); + self.html_erzeugen("data/tpl/bcr2.tpl", dirList[0], function(html) { + var elem = document.querySelector('.breadcrumb'); + elem.innerHTML += html; + //self.addEvtListener('.figure', 'click', self.fm_dateiwahl); + }); + } + + //$('#bcnav').append($('#tpl-bcr3').html()); + self.html_erzeugen("data/tpl/bcr3.tpl", bl, function(html) { + var elem = document.querySelector('.breadcrumb'); + elem.innerHTML += html; + //self.addEvtListener('.figure', 'click', self.fm_dateiwahl); + }); + } else { + //self.pfad = ''; + //template = $('#tpl-bcr2').html(); + //Mustache.parse(template); // optional, speeds up future uses + //$('#bcnav').append(Mustache.render(template, dirList[0])); + //$('#bcnav').append($('#tpl-bcr3').html()); + self.html_erzeugen("data/tpl/bcr2.tpl", dirList[0], function(html) { + var elem = document.querySelector('.breadcrumb'); + elem.innerHTML += html; + //self.addEvtListener('.figure', 'click', self.fm_dateiwahl); + }); + self.html_erzeugen("data/tpl/bcr3.tpl", dirList[0], function(html) { + var elem = document.querySelector('.breadcrumb'); + elem.innerHTML += html; + //self.addEvtListener('.figure', 'click', self.fm_dateiwahl); + }); + } + + /* + $('.breadcrumb-item').click(fm_bc_click); + $('#ansicht').click(fm_ansicht_umschalten); + fm_set_modus(); + + if(fm_slideshow) { + $("[data-fancybox]").fancybox({ + loop: true, + idleTime: 2 + }); + } + */ + + // Breadcrumb + }); }; @@ -263,6 +461,55 @@ window.location.href = '../logout.html'; }); }; + + /* ----- Hilfsfunktionen ----- */ + + this.serialisieren = function(obj) { + return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}'; + }; + + this.addEvtListener = function(selector, eventName, func) { + + document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); }); + + /* + var elems = document.querySelectorAll(selector); + var index; + for (index = 0; index < elems.length; index++) { + elems[index].addEventListener(eventName, func); + } + */ + }; + + this.removeAllListeners = function(id) { + var el = document.getElementById(id); + elClone = el.cloneNode(true); + el.parentNode.replaceChild(elClone, el); + }; // https://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type + + /* ---- Vorlagen ---- */ + + 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)); + }; + + this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) { + self.fm_get(vurl, "text", function(antwort) { + self.cache[vurl] = antwort; + self.vorlage_fuellen(vurl, inhalt, cb); + }); + }; + + /* -------- ajax helper functions ----------- */ -- Gitblit v1.9.3