From 4f01b813c127607a7025faff4ac693e049ea4101 Mon Sep 17 00:00:00 2001 From: ulrich Date: Wed, 13 Jan 2021 17:26:37 +0000 Subject: [PATCH] Listenansicht und Umschaltung fertig --- web/ui2/js/app.js | 126 +++++++++++++++++++++++++++--------------- 1 files changed, 81 insertions(+), 45 deletions(-) diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js index 4627bed..b9d1d80 100644 --- a/web/ui2/js/app.js +++ b/web/ui2/js/app.js @@ -152,19 +152,14 @@ 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'); + var par = elem.parentElement; + par.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 { @@ -173,7 +168,6 @@ 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 { @@ -182,37 +176,44 @@ 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')) { + // Liste + var pElem = elem.closest('.datei-zeile'); + var dElem = pElem.querySelector('.datei-elem'); + if(dElem.getElementsByTagName("i")[0].classList.contains('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'); + var ti = document.querySelector('.table-info'); + if(ti !== null) { + ti.classList.remove('table-info'); + } + var dg = document.querySelector('.datei-gewaehlt'); + if(dg !== null) { + dg.classList.remove('datei-gewaehlt'); + } } - elem.classList.add('table-info'); - elem.querySelector('.dateiname').classList.add('datei-gewaehlt'); + pElem.classList.add('table-info'); + pElem.querySelector('.dateiname').classList.add('datei-gewaehlt'); } else { // Ordner if(/*ev.shiftKey || */ ev.ctrlKey) { - elem.children[0].classList.add('datei-gewaehlt'); + //elem.children[0].classList.add('datei-gewaehlt'); + pElem.querySelector('.dateiname').classList.add('datei-gewaehlt'); } else { - var ordner = elem.querySelector('.dateiname').textContent; + var ordner = pElem.querySelector('.dateiname').textContent; if(self.pfad.length > 0) { self.pfad = self.pfad + '/' + ordner; } else { self.pfad = ordner; } - self.fm_get_list(pfad); + self.fm_get_list(self.pfad); } } } @@ -220,7 +221,7 @@ this.fm_render_list = function (fl) { - if (self.modus == 'kacheln') { + if (self.modus === 'kacheln') { // Kachelansicht self.html_erzeugen("data/tpl/kacheln.tpl", fl, function(html) { var elem = document.querySelector('#dateien'); @@ -229,22 +230,15 @@ }); } else { // Listenansicht - - // neu bauen - - /* - var template = $('#tpl-liste').html(); - Mustache.parse(template); // optional, speeds up future uses - $('.figure').attr('onclick', '').unbind('click'); - $('#dateien').empty(); - $('#dateien').html(Mustache.render(template, fl)); - $('.datei-zeile').click(fm_dateiwahl); - */ + self.html_erzeugen("data/tpl/liste.tpl", fl, function(html) { + var elem = document.querySelector('#dateien'); + elem.innerHTML = html; + self.addEvtListener('.datei-zeile', 'click', self.fm_dateiwahl); + }); } }; this.fm_get_path = function (uid) { - //console.log('pfad: ' + pfad); var restdir; if (self.pfad.indexOf(self.PUB_DIR) > -1) { restdir = self.pfad.substr(self.PUB_DIR.length); @@ -264,7 +258,6 @@ } } var pdir = self.fm_get_base(uid); - // console.log('fm_get_path path: ' + pdir + "/" + restdir); if (restdir.length > 1) { return pdir + "/" + restdir; } else { @@ -273,7 +266,6 @@ }; this.fm_get_base = function (uid) { - //console.log('pfad: ' + pfad); var pdir; if (self.pfad.indexOf(self.PUB_DIR) > -1) { pdir = '/data/' + uid; @@ -284,7 +276,6 @@ } else if (self.pfad.indexOf(self.DATA_DIR) > -1) { pdir = ''; } - //console.log('fm_get_base base: ' + pdir + uid); return pdir; }; @@ -316,6 +307,39 @@ return dirList; }; + /* + * icon-th-large + * icon-th-list + * @returns {undefined} + */ + this.fm_ansicht_umschalten = function() { + var elem = document.querySelector('#ansicht'); + var iElem = elem.getElementsByTagName("i")[0]; + if(iElem.classList.contains('icon-th-list')) { + iElem.classList.add('icon-th-large'); + iElem.classList.remove('icon-th-list'); + self.modus = 'liste'; + } else { + iElem.classList.add('icon-th-list'); + iElem.classList.remove('icon-th-large'); + self.modus = 'kacheln'; + } + self.fm_get_list(self.pfad); + }; + + this.fm_set_modus = function() { + var elem = document.querySelector('#ansicht'); + var iElem = elem.getElementsByTagName("i")[0]; + if(self.modus === 'kacheln') { + iElem.classList.add('icon-th-list'); + iElem.classList.remove('icon-th-large'); + } else { + iElem.classList.add('icon-th-large'); + iElem.classList.remove('icon-th-list'); + } + }; + + /** * Der letzte Eintrag in dirs ist der aktuelle Ordner und * deshalb ausgegraut. @@ -331,18 +355,34 @@ if(dirList.length > 1) { var last = dirList.pop(); var bcList = new BcrFiles(dirList); + self.html_erzeugen("data/tpl/bcr.tpl", bcList, function(html) { - elem.innerHTML = html; + var htmlGesamt = html; self.html_erzeugen("data/tpl/bcr2.tpl", last, function(html) { - elem.innerHTML += html; - self.addEvtListener('.bc-link', 'click', self.fm_bc_click); + htmlGesamt += html; + self.html_erzeugen("data/tpl/bcr3.tpl", dirList[0], function(html) { + htmlGesamt += html; + elem.innerHTML = htmlGesamt; + self.addEvtListener('.bc-link', 'click', self.fm_bc_click); + self.addEvtListener('#ansicht', 'click', self.fm_ansicht_umschalten); + self.fm_set_modus(); + }); + }); }); } else { // oberste Ebene + var htmla; + var htmlb; self.html_erzeugen("data/tpl/bcr2.tpl", dirList[0], function(html) { - elem.innerHTML = html; - self.addEvtListener('.bc-link', 'click', self.fm_bc_click); + htmla = html; + self.html_erzeugen("data/tpl/bcr3.tpl", dirList[0], function(html) { + htmlb = html; + elem.innerHTML = htmla + htmlb; + self.addEvtListener('.bc-link', 'click', self.fm_bc_click); + self.addEvtListener('#ansicht', 'click', self.fm_ansicht_umschalten); + self.fm_set_modus(); + }); }); } }; @@ -364,13 +404,10 @@ } }; - - /* API functions */ // http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p= this.fm_get_list = function (relPfad) { - //$('#ansicht').attr('onclick', '').unbind('click'); var m = '?c=de.uhilger.filecms.api.FileMgr&m=list&p=' + relPfad; var u = '../svc' + m; self.fm_get(u, "json", function (respText) { @@ -386,7 +423,6 @@ } var fl = new FileList(files); self.fm_render_list(fl); - //self.fm_render_list(resp); } else { // #dateien leeren var elem = document.querySelector("#dateien"); @@ -396,7 +432,7 @@ // Breadcrumb var dirList = self.fm_buildBreadcrumb(relPfad); - self.fm_renderBreadcrumb(dirList); + self.fm_renderBreadcrumb(dirList); }); }; -- Gitblit v1.9.3