Bildbetrachtung fuer oeffentliche Ordner hinzugefuegt

ulrich

2018-03-03 e4fec9e56c5cc32b38dc471a57e8844d32ec0b4f

Bildbetrachtung fuer oeffentliche Ordner hinzugefuegt

 web/WEB-INF/web.xml

@@ -7,7 +7,7 @@
          Bleibt der Eintrag leer oder wird er ganz weggelassen, wird ein hart 
          kodierter Pfad fuer die WebBox verwendet.</description>
        <param-name>datenAblage</param-name>
        <param-value>/tc-daten</param-value>
        <param-value> </param-value>
    </context-param>
    <listener>
        <description>Der Initialiser setzt globale Variable fuer die Dateiverwaltung</description>

 web/fotos/data.js

New file
@@ -0,0 +1,139 @@
/*
    Dateiverwaltung - File management in your browser
    Copyright (C) 2017 Ulrich Hilger, http://uhilger.de

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/



/*
 * In data.js finden sich die Objekte vom Browser-Client 
 * der Dateiverwaltung
 */



/* ----- Objekte ----- */

function IssueList(il) {
  this.issues = il;
}

function CompilerIssue(sn, ms, ki, ln) {
  var self = this;
  this.sourceName = sn;
  this.message = ms;
  this.kind = ki;
  this.lineNumber = ln;
}

function FileList(fl) {
  this.files = fl;
}

function FileRef(obj) {
  var self = this;
  this.fr = obj;
  this.fnx;
  this.fext = '';
  
  this.typeClass = function() {
    if(modus == 'kacheln') {
      if(self.fr.isDirectory) {
        return 'fa-folder ordner';
      } else {
        return 'fa-file datei';
      }
    } else {
      if(self.fr.isDirectory) {
        return 'fa-folder ordner';
      } else {
        return 'fa-file-o datei';
      }
    }
  };
  
  this.mini = function() {
    var miniatur = false;
    var namen = self.fr.absolutePath.split('/');
    if(namen.length > 0) {
      self.fnx = decodeURIComponent(namen[namen.length - 1]);
    } else {
      self.fnx = decodeURIComponent(self.fr.absolutePath);
    }
    if(self.fnx.indexOf('.jpg') > -1 || self.fnx.indexOf('.png') > -1 || self.fnx.indexOf('.gif') > -1 || self.fnx.indexOf('.jpeg') > -1) {
      miniatur = true;
    }
    return miniatur;
  };
  
  this.dia = function() {
    return fm_slideshow;
  };
  
  this.miniurl = function() {
      var userid = $('#userMenu').text();
      if(self.fext === '') {
        //self.fext = '';
        var dotpos = self.fnx.indexOf('.');
        if(dotpos > -1) {
          var fny = self.fnx;
          self.fnx = self.fnx.substring(0, dotpos);
          self.fext = fny.substr(dotpos);
        }
      }
      var path = fm_get_path(userid);
      var imgurl = loc + path + '/' + self.fnx + '_tn' + self.fext;
      return imgurl;
    
  };
  
  this.bildurl = function() {
      var userid = $('#userMenu').text();
      if(self.fext === '') {
        //self.fext = '';
        var dotpos = self.fnx.indexOf('.');
        if(dotpos > -1) {
          var fny = self.fnx;
          self.fnx = self.fnx.substring(0, dotpos);
          self.fext = fny.substr(dotpos);
        }
      }
      var path = fm_get_path(userid);
      var imgurl = loc + path + '/' + self.fnx + self.fext;
      return imgurl;
  };
  
  this.fileName = function() {
    
    var namen = self.fr.absolutePath.split('/');
    if(namen.length > 0) {
      return decodeURIComponent(namen[namen.length - 1]);
    } else {
      return decodeURIComponent(self.fr.absolutePath);
    }
    
  };
}

function BcrFiles(fl) {
  this.files = fl;
}

function BcrFile(rp, n) {
  this.relPath = rp;
  this.fName = n;
}


 web/fotos/foto-ui.js

New file
@@ -0,0 +1,130 @@

var modus = 'kacheln';
var fm_slideshow = true;
var PERS_DIR = "Persoenlich";
var PUB_DIR = "Oeffentlich";
var BASE_DIR = "$basis";
var DATA_DIR = "$daten";
var WWW_DIR = "www";
var loc;
var pfad = PUB_DIR;
var ordner;


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

function getURLParameter(name) {
  return decodeURI(
    (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
  );
}

// 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');
  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) {
    
    if(resp.List[0].FileRef !== undefined) {
      var files = new Array();
      if(resp.List[0].FileRef instanceof Array) {
        for(var i = 0; i < resp.List[0].FileRef.length; i++) {
          files.push(new FileRef(resp.List[0].FileRef[i]));
        }
      } else {
        files.push(new FileRef(resp.List[0].FileRef));
      }
      var fl = new FileList(files);
      fo_render_list(fl);
    } else {
      $('#dateien').empty();
    }
  });
}

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


function fo_get(u, dtype, scallback) {
  $.ajax({
    url: u,
    type: "GET",
    dataType: dtype,
    success: scallback,
    error: function (xhr, status, errorThrown) {
      alert("Error: " + errorThrown + " Status: " + status + " URL: " + u);
    },
    complete: function (xhr, status) {
      //console.log( "The request is complete!" );
    }

  });
}

function fm_get_path(uid) {
  //console.log('pfad: ' + pfad);
  var restdir;
  if(pfad.indexOf(PUB_DIR) > -1) {
    restdir = pfad.substr(PUB_DIR.length);
  } else if(pfad.indexOf(PERS_DIR) > -1) {
    restdir = pfad.substr(PERS_DIR.length);
  } else if(pfad.indexOf(BASE_DIR) > -1) {
    restdir = pfad.substr(BASE_DIR.length);
  } else if(pfad.indexOf(DATA_DIR) > -1) {
    restdir = pfad.substr(DATA_DIR.length);
  }
  if(restdir !== undefined && restdir.startsWith('/')) {
    restdir = restdir.substr(1);
    if(restdir.indexOf(WWW_DIR) > -1) {
      restdir = restdir.replace(WWW_DIR, 'data');
    }
  }
  var pdir = fm_get_base(uid);
  // console.log('fm_get_path path: ' + pdir + "/" + restdir);
  if(restdir.length > 1) {
    return pdir + "/" + restdir + "/" + ordner;
  } else {
    return pdir + "/" + ordner;
  }
}

function fm_get_base(uid) {
  //console.log('pfad: ' + pfad);
  var pdir;
  if(pfad.indexOf(PUB_DIR) > -1) {
    pdir = '/data/' + uid;
  } else if(pfad.indexOf(PERS_DIR) > -1) {
    pdir = '/home/' + uid;
  } else if(pfad.indexOf(BASE_DIR) > -1) {
    pdir = '';
  } else if(pfad.indexOf(DATA_DIR) > -1) {
    pdir = '';
  }
  //console.log('fm_get_base base: ' + pdir + uid);
  return pdir;
}

 web/fotos/index.html

New file
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
  <head>
    <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/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">
    <script id="tpl-kacheln" type="x-tmpl-mustache">
      {{#files}}          
        <figure class="figure datei-figure text-center text-warning align-top datei-elem">
          {{#mini}}
            {{#dia}}
              <a href="{{bildurl}}" data-fancybox="group" data-caption="">
                <img class="datei" src="{{miniurl}}"  width="60" height="40" />
              </a>
            {{/dia}}
            {{^dia}}
              <img class="datei" src="{{miniurl}}"  width="60" height="40" />
            {{/dia}}
          {{/mini}}
          {{^mini}}
            <i class="fa {{ typeClass }} fa-3x"></i>
          {{/mini}}        
          <figcaption class="figure-caption dateiname">{{ fileName }}</figcaption>
        </figure>   
      {{/files}}          
    </script>
  </head>
  <body>
    <!-- Kopfzeile -->
    <div class="nord">
    </div>
    <div class="inhalt">
      <!-- westliche Seitenleiste -->
      <div class="west hidden-xs-down">
      </div>
      <!-- zentraler Inhaltsbereich -->
      <div class="zentrum">
        
        <!-- Dateikacheln/-liste Start -->
        <div class="zentrum-liste pl-3 pr-3" id="dateien"></div>
        <!-- Dateikacheln Ende -->
        
      </div>
      <!-- oestliche Seitenleiste -->
      <div class="ost"></div>
      
    </div>
    <!-- Fusszeile -->
    <div class="sued">
      <button id="fusszeile-schliessen" type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="system-out">
        
      </div>
    </div>
    <!-- Skripte -->
    <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/mustache/mustache.min.js"></script>
    <script src="/jslib/fancybox/jquery.fancybox.min.js"></script>
    <script src="/jslib/lightbox/lightbox.min.js"></script>
    <script src="data.js"></script>
    <script src="foto-ui.js"></script>
    <script type="text/javascript" charset="utf-8">
      //var ui;
      $(document).ready(function() {
        fo_init();
      });
    </script>
  </body>
</html>

 web/fotos/stile.css

New file
@@ -0,0 +1,132 @@
/*
    Dateiverwaltung - File management in your browser
    Copyright (C) 2017 Ulrich Hilger, http://uhilger.de

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/


/* Stile Code-Editor */

.code-editor-container {
  height: 100%;
}

.codeeditor {
  height: 100%;
}

.codeeditor-space {
  width: 100%;
  height: 100%;
  border: 1px solid lightgrey;
}

.CodeMirror {
  height: 100%;
}

/* Stile MCE-Editor */

.mce-editor {
  width: 100%;
  height: 100%;  
}
.text-editor {
  width: 100%;
  height: 100%;
}

/* Stile Listenansicht */

html {
  margin: 0;
  padding: 0;
  height: 100%; /* Anmerkung 2 */
}
body {
  margin: 0;
  padding: 0;
  height: 100%; /* Anmerkung 2 */
  min-height: 0; /* Anmerkung 1 */
  display: flex;
  flex-flow: column;
}
.inhalt {
  display: flex;
  flex-flow: row;
  height: 100%; /* Anmerkung 2 */
  min-height: 0; /* Anmerkung 1 */
}
.nord {

}
.sued {
  background-color: #eee;
}
.system-out {
  height: 8em;
  overflow-y: auto;
}
.west {
  flex-grow: 0;
  flex-shrink: 0;
  /*
    voruebergehend ausgeblendet, zum einblenden 
    diesen Wert wieder auf 10em setzen
  */
  flex-basis: 0em;
}
.ost {
  flex-grow: 0;
  flex-shrink: 0;
  /*flex-basis: 10em;*/
  background-color: antiquewhite;
  transition: all 0.3s ease-in;
}
.zentrum {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  /* background-color: antiquewhite; */
}
.zentrum-bc {
}
.zentrum-liste {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.datei-figure {
  width: 6em;
  cursor: pointer;
}

.datei-gewaehlt {
  background-color: lightblue;
}

.ordner {
  color: navajowhite;
}

.datei {
  color: lightgray;
}

#ansicht {
  cursor: pointer;
}