Uebertragung Breadcrumb angefangen, noch in Arbeit

ulrich

2021-01-12 8ba358fc936b9d3721aa1fea64a4c00eaaa347a4

 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 ----------- */