Ausbau jquery aus foto-ui und umstellung des foto ui auf flex-box, noch in ...

ulrich

2021-01-21 bf56be31ddaaee5333625e2f5a2e733f7651c7ef

Ausbau jquery aus foto-ui und umstellung des foto ui auf flex-box, noch in arbeit

 web/fotos/data.js

@@ -84,7 +84,7 @@
  };
  
  this.miniurl = function() {
      var userid = $('#userMenu').text();
      //var userid = $('#userMenu').text();
      if(self.fext === '') {
        //self.fext = '';
        var dotpos = self.fnx.indexOf('.');
@@ -101,7 +101,7 @@
  };
  
  this.bildurl = function() {
      var userid = $('#userMenu').text();
      //var userid = $('#userMenu').text();
      if(self.fext === '') {
        //self.fext = '';
        var dotpos = self.fnx.indexOf('.');

 web/fotos/foto-ui.js

@@ -9,13 +9,16 @@
var loc;
var pfad = PUB_DIR;
var ordner;
var userid;


function fo_init() {
  $('.sued').hide();
  //$('.sued').hide();
  document.querySelector('.sued').style.display = 'none';
  loc = window.location.protocol + '//' + window.location.host;
  ordner = getURLParameter('o');
  fo_get_list(ordner);
  fo_get_login();
}

function getURLParameter(name) {
@@ -27,11 +30,11 @@
// http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p=
// https://uhilger.de/file-cms/pub?c=de.uhilger.filecms.pub.Catalog&m=listOrdered&p=ulrich/bilder/alben/farbe&p=date&p=asc
function fo_get_list(relPfad) {
  $('#ansicht').attr('onclick','').unbind('click');
  //$('#ansicht').attr('onclick','').unbind('click');
  var m = '?c=de.uhilger.filecms.pub.Catalog&m=listOrdered&p=' + relPfad + '&p=date&p=asc';
  var u = '../pub' + m;
  fo_get(u, "json", function(resp) {
    
  fo_get(u, "json", function(respText) {
    var resp = JSON.parse(respText);
    if(resp.List[0].FileRef !== undefined) {
      var files = new Array();
      if(resp.List[0].FileRef instanceof Array) {
@@ -44,33 +47,52 @@
      var fl = new FileList(files);
      fo_render_list(fl);
    } else {
      $('#dateien').empty();
      //$('#dateien').empty();
      document.querySelector('#dateien').innerHTML = '';
    }
  });
}

function fo_render_list(fl) {
  if(modus == 'kacheln') {
  if(modus === 'kacheln') {
    // Kachelansicht
    var template = $('#tpl-kacheln').html();
    var template = document.querySelector('#tpl-kacheln').innerHTML; //$('#tpl-kacheln').html();
    console.log(template);
    Mustache.parse(template);   // optional, speeds up future uses
    $('.datei-zeile').attr('onclick','').unbind('click');
    $('#dateien').empty();
    $('#dateien').html(Mustache.render(template, fl));
    //$('.datei-zeile').attr('onclick','').unbind('click');
    //$('#dateien').empty();
    var elem = document.querySelector('#dateien');
    elem.innerHTML = Mustache.render(template, fl);
    //$('#dateien').html(Mustache.render(template, fl));
    //$('.figure').click(fm_dateiwahl);
  } else {
    // Listenansicht
    var template = $('#tpl-liste').html();
    var template = document.querySelector('#tpl-liste').innerHTML; //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));
    //$('.figure').attr('onclick','').unbind('click');
    var elem = document.querySelector('#dateien');
    elem.innerHTML = Mustache.render(template, fl);
    //$('#dateien').empty();
    //$('#dateien').html(Mustache.render(template, fl));
    //$('.datei-zeile').click(fm_dateiwahl);
  }
}


function fo_get(u, dtype, scallback) {
  var xmlhttp = new XMLHttpRequest();
  var url = u;
  xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      scallback(this.responseText);
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
  
  
  
  /*
  $.ajax({
    url: u,
    type: "GET",
@@ -84,7 +106,18 @@
    }

  });
   */
}
  function fo_get_login() {
    var m = '?c=de.uhilger.filecms.pub.SessionManager&m=getSessionUser';
    var u = '../pub' + m;
    fo_get(u, "text", function (resp) {
      userid = resp;
      //self.login_zeigen();
      //document.querySelector("#userMenu").textContent = resp;
    });
  }


function fm_get_path(uid) {
  //console.log('pfad: ' + pfad);
@@ -104,11 +137,16 @@
      restdir = restdir.replace(WWW_DIR, 'data');
    }
  }
  console.log('restdir ' + restdir);
  var pdir = fm_get_base(uid);
  console.log('pdir ' + pdir);
  console.log('ordner ' + ordner);
  // console.log('fm_get_path path: ' + pdir + "/" + restdir);
  if(restdir.length > 1) {
  if(restdir !== undefined && restdir.length > 1) {
    console.log('fm_get_path ' + pdir + "/" + restdir + "/" + ordner);
    return pdir + "/" + restdir + "/" + ordner;
  } else {
    console.log('fm_get_path ' + pdir + "/" + ordner);
    return pdir + "/" + ordner;
  }
}
@@ -117,9 +155,9 @@
  //console.log('pfad: ' + pfad);
  var pdir;
  if(pfad.indexOf(PUB_DIR) > -1) {
    pdir = '/data/' + uid;
    pdir = '/data/'; //+ uid;
  } else if(pfad.indexOf(PERS_DIR) > -1) {
    pdir = '/home/' + uid;
    pdir = '/home/'; // + uid;
  } else if(pfad.indexOf(BASE_DIR) > -1) {
    pdir = '';
  } else if(pfad.indexOf(DATA_DIR) > -1) {

 web/fotos/index.html

@@ -4,8 +4,8 @@
    <title>Fotos</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
    <!-- <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css"> -->
    <!-- <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">-->
    <link rel="stylesheet" type="text/css" href="/jslib/fancybox/jquery.fancybox.min.css">
    <link rel="stylesheet" type="text/css" href="/jslib/lightbox/lightbox.css">
    <link rel="stylesheet" type="text/css" href="stile.css">
@@ -63,7 +63,7 @@
    <script src="/jslib/jquery/jquery.min.js"></script>
    
    <script src="/jslib/tether/tether.min.js"></script>
    <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
    <!--<script src="/jslib/bootstrap/js/bootstrap.min.js"></script>-->
    <script src="/jslib/mustache/mustache.min.js"></script>
    <script src="/jslib/fancybox/jquery.fancybox.min.js"></script>
    <script src="/jslib/lightbox/lightbox.min.js"></script>