From e4fec9e56c5cc32b38dc471a57e8844d32ec0b4f Mon Sep 17 00:00:00 2001
From: ulrich <undisclosed>
Date: Sat, 03 Mar 2018 09:59:19 +0000
Subject: [PATCH] Bildbetrachtung fuer oeffentliche Ordner hinzugefuegt
---
web/WEB-INF/web.xml | 2
web/fotos/stile.css | 132 ++++++++++++++
web/fotos/data.js | 139 +++++++++++++++
web/fotos/index.html | 79 ++++++++
web/fotos/foto-ui.js | 130 ++++++++++++++
5 files changed, 481 insertions(+), 1 deletions(-)
diff --git a/web/WEB-INF/web.xml b/web/WEB-INF/web.xml
index 4ced0d1..eb03881 100644
--- a/web/WEB-INF/web.xml
+++ b/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>
diff --git a/web/fotos/data.js b/web/fotos/data.js
new file mode 100644
index 0000000..7e9193d
--- /dev/null
+++ b/web/fotos/data.js
@@ -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;
+}
+
diff --git a/web/fotos/foto-ui.js b/web/fotos/foto-ui.js
new file mode 100644
index 0000000..4d01a1a
--- /dev/null
+++ b/web/fotos/foto-ui.js
@@ -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;
+}
diff --git a/web/fotos/index.html b/web/fotos/index.html
new file mode 100644
index 0000000..576f506
--- /dev/null
+++ b/web/fotos/index.html
@@ -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">×</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>
diff --git a/web/fotos/stile.css b/web/fotos/stile.css
new file mode 100644
index 0000000..b636ae2
--- /dev/null
+++ b/web/fotos/stile.css
@@ -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;
+}
\ No newline at end of file
--
Gitblit v1.9.3