Uebertragung Breadcrumb angefangen, noch in Arbeit

ulrich

2021-01-12 8ba358fc936b9d3721aa1fea64a4c00eaaa347a4

 web/ui2/js/app.js

@@ -150,11 +150,83 @@
    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') {
@@ -164,7 +236,14 @@
      
      //html_erzeugen = function(vurl, inhalt, cb)       
      
      self.html_erzeugen("data/tpl/kacheln.tpl", fl, self.html_zeigen);
      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();
@@ -259,12 +338,106 @@
        //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
      
    });
  };

@@ -289,6 +462,31 @@
    });
  };
  
  /* ----- 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) {