From 9350c960b07404690ed747ed7725e94313c629fb Mon Sep 17 00:00:00 2001 From: ulrich Date: Wed, 20 Jan 2021 22:48:25 +0000 Subject: [PATCH] Upload und Bildbetrachtung fertig uebertragen --- web/ui2/js/app.js | 1258 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 1,176 insertions(+), 82 deletions(-) diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js index 0cf9e04..d9e4050 100644 --- a/web/ui2/js/app.js +++ b/web/ui2/js/app.js @@ -1,18 +1,42 @@ function AppVorlage() { var self = this; - var appMenu; - var vorlagen; - var api; - var userid; + this.appMenu; + //this.vorlagen; + this.api; + this.userid; + this.pfad = ''; + this.loc; + this.modus = 'kacheln'; + this.cm; + //this.tinymce; + this.ed; + this.tmo; + this.tmo2; + 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.openEditor; + this.openFileName; + this.cutCopyOperation; + this.cutCopySrcDir; + this.cutCopyFiles; + this.fm_slideshow = false; + this.dateien; + this.cache = {}; // mustache template cache this.datei_neuer_text = function () { - self.menu_message("Neuer Text"); + //self.meldung_mit_timeout("Neuer Text", 1500); + self.fm_text_edit('Neue Datei'); }; - + /* Funktionen aus App-Vorlage */ - this.init = function () { - self.vorlagen = new Vorlagen(); + this.init = function () { + document.querySelector(".codeeditor-space").style.display = "none"; + document.querySelector("#mce-editor").style.display = "none"; self.appMenu = new AppMenu(); self.appMenu.init( "data/menu/", @@ -20,13 +44,98 @@ "data/tpl/app-menu.tpl", ".west", "8em"); - document.querySelector('.hamburger').addEventListener('click', function (e) { self.menue_umschalten(); }); + document.querySelector('#top-neuer-text-btn').addEventListener('click', self.datei_neuer_text); + document.querySelector('#top-neuer-ordner-btn').addEventListener('click', self.datei_neuer_ordner); + document.querySelector('#top-close-btn').addEventListener('click', self.fm_menu_datei_schliessen); + self.fm_get_login(); + + 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(''); + } + + self.seitenleiste_umschalten(); + self.fm_init_uploader(); + self.loc = window.location.protocol + '//' + window.location.host; + }; + + /* ----- Uploader Anfang ----------*/ + + this.fm_init_uploader = function() { + //console.log('init_uploader'); + self.dateien = new Array(); + var dropzone = document.getElementById("upload-target"); + dropzone.ondragover = dropzone.ondragenter = function(event) { + event.stopPropagation(); + event.preventDefault(); + }; + + dropzone.ondrop = function(event) { + //console.log('dateien ondrop'); + event.stopPropagation(); + event.preventDefault(); + var fileList = event.dataTransfer.files; + for (var i=0; i<fileList.length; i++) { + self.dateien.push(fileList[i]); + //console.log('upload ' + fileList[i]); + } + self.sendFile(self.dateien.pop()); + }; }; + /* ----- Uploader Ende --------------- */ + + this.login_zeigen = function() { + self.meldung_mit_timeout("Benutzer: " + self.userid, 1500); + }; + + this.fm_neuer_reiter = function() { + window.open('/file-cms/ui2/?pfad=' + self.pfad, '_blank'); + }; + + this.fm_hilfe = function() { + window.open('/data/dok/wbx-doku.html#wbx-bedienung', '_blank'); + }; + + this.fm_toggle_show_slideshow = function() { + if(self.fm_slideshow) { + //$('#m-toggle-slideshow').text('Diashow einschalten'); + self.fm_slideshow = false; + } else { + //$('#m-toggle-slideshow').text('Diashow ausschalten'); + self.fm_slideshow = true; + } + }; + + this.fm_view_slideshow = function() { + + // https://localhost:8443/file-cms/fotos/?o=ulrich/bilder/diashow/ordnername + + + var userid = self.userid; // $('#userMenu').text(); + //var gewaehlte = $('.datei-gewaehlt'); + //var gewaehlte = document.querySelector('.datei-gewaehlt'); + //var fname = gewaehlte.textContent; + + var path = self.fm_get_path(userid); + var restdir = path; + if(path.indexOf('/data/') > -1) { + restdir = path.substr('/data/'.length); + } + + //window.open('/file-cms/fotos/?o=' + userid + '/' + path + '/' + fname, '_blank'); + window.open('/file-cms/fotos/?o=' + restdir + '/' /*+ fname*/, '_blank'); + }; + + this.menue_umschalten = function () { var ham = document.querySelector(".hamburger"); ham.classList.toggle("is-active"); // hamburger-icon umschalten @@ -35,7 +144,7 @@ this.info_dialog_zeigen = function () { self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', ''); - self.menue_umschalten(); + //self.menue_umschalten(); }; this.seitenleiste_umschalten = function () { @@ -47,7 +156,7 @@ ostDiv.classList.add('ost-open'); ostDiv.style.flexBasis = '6em'; } - self.menue_umschalten(); + //self.menue_umschalten(); }; this.fusszeile_umschalten = function () { @@ -62,32 +171,11 @@ self.menue_umschalten(); }; - this.menu_message = function (msg) { - self.meldung_mit_timeout(msg, 1500); - var suedDiv = document.querySelector('.sued'); - if (suedDiv.classList.contains('sued-open')) { - } else { - suedDiv.classList.add('sued-open'); - suedDiv.style.height = '1.5em'; - } - self.menue_umschalten(); - }; - - this.message_1 = function () { - self.menu_message('Eine Mitteilung.'); - }; - - this.message_2 = function () { - self.menu_message('Was wir schon immer sagen wollten.'); - }; - - this.message_3 = function (text) { - self.menu_message(text); - }; - this.meldung_mit_timeout = function (meldung, timeout) { var s = document.querySelector('.sued'); s.textContent = meldung; + s.classList.add('sued-open'); + s.style.height = '1.5em'; setTimeout(function () { s.textContent = 'Bereit.'; setTimeout(function () { @@ -99,6 +187,74 @@ }, 500); }, timeout); }; + + this.fm_menu_datei_schliessen = function() { + if(self.openEditor === 'text') { + if(!self.cm.getDoc().isClean()) { + self.fm_ask_for_save(); + } else { + self.fm_do_close(); + } + } else { + if(tinymce.activeEditor.undoManager.hasUndo()) { + self.fm_ask_for_save(); + } else { + self.fm_do_close(); + } + } + }; + + this.fm_ask_for_save = function() { + self.dialog_laden_und_zeigen('data/tpl/dlg-ask-save.tpl', '', function() { + // wenn dialog da ist, hier events verknuepfen + document.querySelector('#cancel-btn').addEventListener('click', function() { + self.fm_do_close(); + self.dialog_schliessen(); + }); + document.querySelector('#speichern-btn').addEventListener('click', function() { + self.fm_menu_datei_speichern(function() { + self.fm_do_close(); + self.dialog_schliessen(); + }); + }); + }); + }; + + this.fm_menu_datei_speichern = function(callback) { + //var fname = $('.datei-gewaehlt').text(); + var fname = self.openFileName; + if(fname !== undefined && fname !== '') { + self.fm_save_file(fname, 'saveTextFile', callback); + self.meldung_mit_timeout(fname + ' gespeichert.', 1500); + } else { + self.fm_menu_datei_speichern_unter(callback); + } + }; + + this.fm_menu_datei_speichern_unter = function(callback) { + self.dialog_laden_und_zeigen('data/tpl/dlg-save-as.tpl', '', function() { + document.querySelector('#cancel-btn').addEventListener('click', function() { + //self.fm_do_close(); + self.dialog_schliessen(); + }); + document.querySelector('#speichern-btn').addEventListener('click', function() { + //self.fm_menu_datei_speichern(function() { + //console.log(document.querySelector('#datei-name-in').value); + var fname = document.querySelector('#datei-name-in').value; + self.fm_save_file(fname, 'saveTextFileAs', callback); + self.meldung_mit_timeout(fname + ' gespeichert.', 1500); + if(typeof(callback) !== 'function') { + //self.fm_do_close(); + self.dialog_schliessen(); + } + //}); + }); + }); + }; + + this.fm_menu_neues_dokument = function() { + self.fm_dok_edit(''); + }; /* Dialog-Funktionen */ @@ -108,52 +264,539 @@ vurl - URL zur Dialogvorlage msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional) */ - this.dialog_laden_und_zeigen = function (vurl, msgTpl) { - if (msgTpl !== '') { - fetch(msgTpl) - .then(data => { - // Handle data - self.dialog_zeigen(vurl, data); - }).catch(error => { - // Handle error + this.dialog_laden_und_zeigen = function (vurl, msgTpl, cb) { + var vorlage = self.cache[vurl]; + if(vorlage === undefined) { + self.fm_get(vurl, "text", function(antwort) { + self.cache[vurl] = antwort; + self.dialog_zeigen(vurl, antwort, cb); + //self.vorlage_fuellen(vurl, inhalt, cb); }); } else { - self.dialog_zeigen(vurl, ''); + self.dialog_zeigen(vurl, vorlage, cb); } }; - this.dialog_zeigen = function (vurl, inhalt) { + this.dialog_zeigen = function (vurl, inhalt, cb) { var dlg = document.querySelector(".dialog"); - self.vorlagen.html_erzeugen( + self.html_erzeugen( vurl, inhalt, function (html) { //dlg.html(html); - dlg.style.height = '5em'; + dlg.style.height = '7em'; dlg.innerHTML = html; document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen); //dlg.slideDown(300); + if(typeof(cb) !== 'function') { + // .. + } else { + cb(); + } }); }; - self.dialog_schliessen = function () { + this.dialog_schliessen = function () { document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen); //$('.dialog').slideUp(300); var dlg = document.querySelector('.dialog'); //dlg.style.display = "none"; dlg.style.height = '0'; dlg.innerHTML = ''; + self.removeAllListeners('#cancel-btn'); + self.removeAllListeners('#speichern-btn'); }; + + this.fm_auswahl_marke_entfernen = function() { + var gew = document.querySelector('.datei-gewaehlt'); + if(gew !== null) { + gew.classList.remove('datei-gewaehlt'); + } + }; + + this.fm_view_file = function() { + var fname = document.querySelector('.datei-gewaehlt').textContent; + var path = self.fm_get_path(self.userid); + window.open(path + '/' + fname, '_blank'); + }; + + this.datei_ansehen_oder_bearbeiten = function(dateiname) { + if(dateiname.endsWith('htmi')) { + self.fm_get_file_content('doc', dateiname); + } else if(dateiname.endsWith('jpg') || dateiname.endsWith('png') || + dateiname.endsWith('gif') || dateiname.endsWith('pdf') ) { + self.fm_view_file(); + } else { + self.fm_get_file_content('text', dateiname); + } + }; + + /** + * Hier werden die folgenden Faelle einer Datei- + * bzw. Ordnerauswahl ausgefuehrt: + * + * geklickt, nicht gewaehlt: + * auswaehlen, evtl. bestehende andere Auswahl entfernen + * + * geklickt, ausgewaehlt: + * Datei ansehen oder oeffnen bzw. Ordner oeffnen + * + * geklickt mit [Strg], nicht gewahlt: + * auswaehlen, bestehende Auswahl beibehalten (Mehrfachauswahl) + * + * geklickt mit [Strg], gewaehlt: + * Auswahl bei diesem Element entfernen + * + * Diese Fälle sind unterteilt in + * 1. Kachel-Modus + * 2. Listenmodus + * + * @param {type} ev Klick-Event + * @returns {undefined} nichts + */ + this.fm_dateiwahl = function(ev) { + var elem = ev.target; + if(self.modus == 'kacheln') { + // Kacheln + //var par = elem.parentElement; + var par = elem.closest('.datei-figure'); + var dElem = par.querySelector('.dateiname'); + if(elem.classList.contains("icon-folder")) { + // Ordner + //var par = elem.parentElement; + var istGewaehlt = dElem.classList.contains('datei-gewaehlt'); + if(istGewaehlt) { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // mehrere Ordner sind gewaehlt, diese eine wieder entfernen + dElem.classList.remove('datei-gewaehlt'); + } else { + // Ordner oeffnen + var ordner = dElem.textContent.trim(); + if(self.pfad.length > 0) { + self.pfad = self.pfad + '/' + ordner; + } else { + self.pfad = ordner; + } + self.fm_get_list(self.pfad); + } + } else { + // Ordner auswaehlen + if(/*ev.shiftKey || */ ev.ctrlKey) { + // Mehrfachauswahl + } else { + self.fm_auswahl_marke_entfernen(); + } + dElem.classList.add('datei-gewaehlt'); + } + } else if(elem.classList.contains('datei')) { + // Datei + //var par = elem.parentElement; + //var dElem = par.querySelector('.dateiname'); + var istGewaehlt = dElem.classList.contains('datei-gewaehlt'); + if(istGewaehlt) { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // mehrere Dateien sind gewaehlt, diese eine wieder entfernen + dElem.classList.remove('datei-gewaehlt'); + } else { + // Datei zum Bearbeiten oeffnen + self.datei_ansehen_oder_bearbeiten(dElem.textContent); + } + } else { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // mehrere Dateien sollen gewaehlt werden + } else { + self.fm_auswahl_marke_entfernen(); + } + dElem.classList.add('datei-gewaehlt'); + } + } else { + //console.log('kein folder oder file...'); + } + } else { + // Liste + var pElem = elem.closest('.datei-zeile'); + var dElem = pElem.querySelector('.datei-elem'); + var dnElem = pElem.querySelector('.dateiname'); + var istGewaehlt = dnElem.classList.contains('datei-gewaehlt'); + if(dElem.getElementsByTagName("i")[0].classList.contains('icon-doc-text-inv')) { + // Datei + if(istGewaehlt) { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // mehrere Dateien sind gewaehlt, diese eine wieder entfernen + dnElem.classList.remove('datei-gewaehlt'); + } else { + // gewaehlte Datei ohne [Strg] geklickt: ansehen oder oeffnen + self.datei_ansehen_oder_bearbeiten(dnElem.textContent); + } + } else { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // mehrere Dateien sollen gewaehlt werden, Auswahl ist weiter unten + } else { + var ti = document.querySelector('.table-info'); + if(ti !== null) { + ti.classList.remove('table-info'); + } + self.fm_auswahl_marke_entfernen(); + } + pElem.classList.add('table-info'); + dnElem.classList.add('datei-gewaehlt'); + } + } else { + // Ordner + if(istGewaehlt) { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // ein gewaehlter Ordner ist mit [Strg] geklickt, Auswahl entfernen + dnElem.classList.remove('datei-gewaehlt'); + } else { + // Ordner oeffnen + var ordner = dnElem.textContent; + if(self.pfad.length > 0) { + self.pfad = self.pfad + '/' + ordner; + } else { + self.pfad = ordner; + } + self.fm_get_list(self.pfad); + } + } else { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // nicht gewaehlter Ordner und [Strg]: zu Mehrfachauswahl hinzufuegen + } else { + // nicht gewaehlter Ordner ohne [Strg]: andere Auswhalen entfernen und weiter unten Ordner auswaehlen + self.fm_auswahl_marke_entfernen(); + } + dnElem.classList.add('datei-gewaehlt'); + } + } + } + }; + + + this.fm_render_list = function (fl) { + if (self.modus === 'kacheln') { + // Kachelansicht + self.html_erzeugen("data/tpl/kacheln.tpl", fl, function(html) { + var elem = document.querySelector('#dateien'); + elem.innerHTML = html; + self.addEvtListener('.figure', 'click', self.fm_dateiwahl); + }); + } else { + // Listenansicht + self.html_erzeugen("data/tpl/liste.tpl", fl, function(html) { + var elem = document.querySelector('#dateien'); + elem.innerHTML = html; + self.addEvtListener('.datei-zeile', 'click', self.fm_dateiwahl); + }); + } + }; + + this.fm_get_path = function (uid) { + var restdir; + if (self.pfad.indexOf(self.PUB_DIR) > -1) { + restdir = self.pfad.substr(self.PUB_DIR.length); + } else if (self.pfad.indexOf(self.PERS_DIR) > -1) { + restdir = self.pfad.substr(self.PERS_DIR.length); + } else if (self.pfad.indexOf(self.BASE_DIR) > -1) { + restdir = self.pfad.substr(self.BASE_DIR.length); + } else if (self.pfad.indexOf(self.DATA_DIR) > -1) { + restdir = self.pfad.substr(self.DATA_DIR.length); + } else if (self.pfad.indexOf(self.DAV_DIR) > -1) { + restdir = self.pfad.substr(self.DAV_DIR.length); + } + if (restdir !== undefined && restdir.startsWith('/')) { + restdir = restdir.substr(1); + if (restdir.indexOf(self.WWW_DIR) > -1) { + restdir = restdir.replace(self.WWW_DIR, 'data'); + } + } + var pdir = self.fm_get_base(uid); + if (restdir.length > 1) { + return pdir + "/" + restdir; + } else { + return pdir; + } + }; + + this.fm_get_base = function (uid) { + var pdir; + if (self.pfad.indexOf(self.PUB_DIR) > -1) { + pdir = '/data/' + uid; + } else if (self.pfad.indexOf(self.PERS_DIR) > -1) { + pdir = '/home/' + uid; + } else if (self.pfad.indexOf(self.BASE_DIR) > -1) { + pdir = ''; + } else if (self.pfad.indexOf(self.DATA_DIR) > -1) { + pdir = ''; + } + return pdir; + }; + + /** + * Aus einem relativen Pfad ein Array aus BcrFile Objekten + * machen + * + * @param {String} relPfad der relative Pfad + * @returns {Array} die BcrFile-Objekte zum Pfad als Array + */ + this.fm_buildBreadcrumb = function(relPfad) { + var rp = ''; + var dirList = new Array(); + dirList.push(new BcrFile(rp, 'Home')); + if(relPfad.length > 1) { + var dirs = relPfad.split('/'); + for(var i = 0; i < dirs.length; i++) { + if(rp.length > 0 ) { + // weitere Einträge + dirList.push(new BcrFile(rp + '/' + dirs[i], dirs[i])); + rp = rp + '/' + dirs[i]; + } else { + // erster Eintrag + dirList.push(new BcrFile(dirs[i], dirs[i])); + rp = dirs[i]; + } + } + } + return dirList; + }; + + /* + * icon-th-large + * icon-th-list + * @returns {undefined} + */ + this.fm_ansicht_umschalten = function() { + var elem = document.querySelector('#ansicht'); + var iElem = elem.getElementsByTagName("i")[0]; + if(iElem.classList.contains('icon-th-list')) { + iElem.classList.add('icon-th-large'); + iElem.classList.remove('icon-th-list'); + self.modus = 'liste'; + } else { + iElem.classList.add('icon-th-list'); + iElem.classList.remove('icon-th-large'); + self.modus = 'kacheln'; + } + self.fm_get_list(self.pfad); + }; + + this.fm_set_modus = function() { + var elem = document.querySelector('#ansicht'); + var iElem = elem.getElementsByTagName("i")[0]; + if(self.modus === 'kacheln') { + iElem.classList.add('icon-th-list'); + iElem.classList.remove('icon-th-large'); + } else { + iElem.classList.add('icon-th-large'); + iElem.classList.remove('icon-th-list'); + } + }; + + + /** + * Der letzte Eintrag in dirs ist der aktuelle Ordner und + * deshalb ausgegraut. + * + * Wenn nur ein Ordner in dirs enthalten ist, dann sind wir + * an der obersten Ebene (Home). + * + * @param {Array} dirList ein Array aus BcrFile-Objekten + * @returns nichts + */ + this.fm_renderBreadcrumb = function(dirList) { + var elem = document.querySelector('.breadcrumb'); + if(dirList.length > 1) { + var last = dirList.pop(); + var bcList = new BcrFiles(dirList); + + self.html_erzeugen("data/tpl/bcr.tpl", bcList, function(html) { + var htmlGesamt = html; + self.html_erzeugen("data/tpl/bcr2.tpl", last, function(html) { + htmlGesamt += html; + self.html_erzeugen("data/tpl/bcr3.tpl", dirList[0], function(html) { + htmlGesamt += html; + elem.innerHTML = htmlGesamt; + self.addEvtListener('.bc-link', 'click', self.fm_bc_click); + self.addEvtListener('#ansicht', 'click', self.fm_ansicht_umschalten); + self.fm_set_modus(); + }); + + }); + }); + } else { + // oberste Ebene + var htmla; + var htmlb; + self.html_erzeugen("data/tpl/bcr2.tpl", dirList[0], function(html) { + htmla = html; + self.html_erzeugen("data/tpl/bcr3.tpl", dirList[0], function(html) { + htmlb = html; + elem.innerHTML = htmla + htmlb; + self.addEvtListener('.bc-link', 'click', self.fm_bc_click); + self.addEvtListener('#ansicht', 'click', self.fm_ansicht_umschalten); + self.fm_set_modus(); + }); + }); + } + }; + + /** + * Auf den Klick auf ein Breadcrumb-Element reagieren: + * Den Ordner-Inhalt des geklickten Elements anzeigen + * @returns nichts + */ + this.fm_bc_click = function() { + var elem = this; + var bcPfad = elem.getAttribute("rpath"); + if(bcPfad !== undefined) { + self.pfad = bcPfad; + self.fm_get_list(bcPfad); + } else { + pfad = ''; + self.fm_get_list(''); + } + }; + + /* ------- Dateifunktionen Start ----------- */ + + this.fm_menu_cut = function() { + console.log('fm_menu_cut'); + self.fm_cut_files(); + }; + this.fm_menu_copy = function() { + //console.log('fm_menu_kopie'); + self.fm_copy_files(); + }; + this.fm_menu_paste = function() { + console.log('fm_menu_paste'); + self.fm_paste_files(); + }; + this.fm_menu_delete = function() { + self.dialog_laden_und_zeigen('data/tpl/dlg-ask-del.tpl', '', function() { + // wenn dialog da ist, hier events verknuepfen + document.querySelector('#cancel-btn').addEventListener('click', function() { + //self.fm_do_close(); + self.dialog_schliessen(); + }); + document.querySelector('#speichern-btn').addEventListener('click', function() { + //self.fm_menu_datei_speichern(function() { + self.fm_del_files(); + self.dialog_schliessen(); + //}); + }); + }); + }; + + /* + * Hier merkt sich die Dateiverwalting die markierten Dateien fuer + * eine Dateioperation. Bei cut wird in der 'paste' Operation auf dem Server + * fuer die 'gemerkten' Dateien ein Move gemacht. Die Dateien werden + * vom gewaehlten Ort zum Zielort verschoben. + * + * @returns {undefined} + */ + this.fm_cut_files = function() { + console.log('fm_cut_files'); + self.cutCopySrcDir = self.pfad; + self.cutCopyFiles = self.fm_gewaehlte_dateien(); + self.cutCopyOperation = 'cut'; + self.meldung_mit_timeout('zum Ausschneiden in Zwischenablage', 1500); + }; + + /* + * Hier merkt sich die Dateiverwalting die markierten Dateien fuer + * eine Dateioperation. Bei copy wird in der 'paste' Operation auf dem Server + * fuer die 'gemerkten' Dateien eine Kopie gemacht. Die Dateien werden + * am gewaehlten Ort behalten und am Zielort wird eine Kopier der + * gewaehlten DAteien erstellt + * + * @returns {undefined} + */ + this.fm_copy_files = function() { + //console.log('fm_copy_files'); + self.cutCopySrcDir = self.pfad; + self.cutCopyFiles = self.fm_gewaehlte_dateien(); + self.cutCopyOperation = 'copy'; + self.meldung_mit_timeout('in Zwischenablage kopiert', 1500); + }; + + + + /* + * Gewaehlte Dateien feststellen + * + * @returns {String} eine per JSON.stringify schon vorbereitete List zum + * Absenden als Parameter an den Server + */ + this.fm_gewaehlte_dateien = function() { + var gewaehlte = document.querySelectorAll('.datei-gewaehlt'); + return self.fm_dateiliste_bilden(gewaehlte); + }; + + this.fm_dateiliste_bilden = function(gewaehlte) { + var fnames = new Array(); + var i = 0; + while(i < gewaehlte.length) { + var str = { "java.lang.String": gewaehlte[i].innerText}; + fnames.push(str); + //console.log('loeschen ' + pfad + ' ' + $(gewaehlte[i]).text()); + //i += 2; + i++; + } + var liste = '{"List":' + JSON.stringify(fnames) + '}'; + // 'liste' enthaelt: + // {"List":[{"java.lang.String":"test3.txt"},{"java.lang.String":"Test1.txt"},{"java.lang.String":"Test2.txt"}]} + // und wird auf dem Server zu einer List[ArrayList<String>] bei der jede ArrayList<String> nur ein Element hat + console.log(liste); + return liste; + }; + + this.fm_menu_datei_umbenennen = function() { + //var gewaehlte = $('.datei-gewaehlt'); + var gewaehlte = document.querySelector('.datei-gewaehlt'); + var fname = gewaehlte.textContent; + + self.dialog_laden_und_zeigen('data/tpl/dlg-rename.tpl', '', function() { + document.querySelector('#cancel-btn').addEventListener('click', function() { + self.dialog_schliessen(); + }); + document.querySelector('#speichern-btn').addEventListener('click', function() { + self.fm_rename_file(fname, self.pfad, document.querySelector('#datei-name-in').value); + self.dialog_schliessen(); + }); + }); + + /* + $('#modal_ok').click(function() { + // hier umbenennen + fm_rename_file(fname, pfad, $('#dateiname').val()); + }); + $('#saveModalTitle').text('Datei umbenennen'); + $('#dialogfrage').text("Neuer Dateiname?"); + + if(fname !== undefined) { + $('#dateiname').val(fname); + $('#dateiname').attr('placeholder', 'Dateiname'); + $('#saveModal').modal({ + keyboard: false, + show: true + }); + } + */ + }; + + this.fm_menu_html_export = function() { + self.fm_export_html(); + }; + + /* --------- Dateifunktionen Ende ---------- */ /* API functions */ // http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p= this.fm_get_list = function (relPfad) { - $('#ansicht').attr('onclick', '').unbind('click'); var m = '?c=de.uhilger.filecms.api.FileMgr&m=list&p=' + relPfad; var u = '../svc' + m; - self.fm_get(u, "json", function (resp) { - + self.fm_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) { @@ -164,12 +807,378 @@ files.push(new FileRef(resp.List[0].FileRef)); } var fl = new FileList(files); - fm_render_list(fl); + self.fm_render_list(fl); } else { - $('#dateien').empty(); + // #dateien leeren + var elem = document.querySelector("#dateien"); + elem.innerHTML = ''; } - + + // Breadcrumb + + var dirList = self.fm_buildBreadcrumb(relPfad); + self.fm_renderBreadcrumb(dirList); }); + }; + + this.datei_neuer_ordner = function() { + self.dialog_laden_und_zeigen('data/tpl/dlg-ask-folder.tpl', '', function() { + document.querySelector('#cancel-btn').addEventListener('click', function() { + self.dialog_schliessen(); + }); + document.querySelector('#speichern-btn').addEventListener('click', function() { + var m = '?c=de.uhilger.filecms.api.FileMgr&m=newFolder&p=' + + self.pfad + + '&p=' + document.querySelector('#folder-name-in').value; + var u = '../svc' + m; + self.fm_get(u, "json", function(resp) { + self.dialog_schliessen(); + self.fm_get_list(self.pfad); + }); + }); + }); + }; + + this.fm_open_file = function() { + var gewaehlte = document.querySelector('.datei-gewaehlt'); + var fname = gewaehlte.textContent; + self.datei_ansehen_oder_bearbeiten(fname); + /* + if(fname.endsWith('htmi')) { + //self.fm_edit_as_doc(); + self.fm_get_file_content('doc', fname); + } else { + //self.fm_edit_as_text(); + self.fm_get_file_content('text', fname); + } + */ + }; + + /* + this.fm_edit_as_text = function() { + self.fm_get_sel_for_file_content('text'); + }; + + this.fm_edit_as_doc = function() { + self.fm_get_sel_for_file_content('doc'); + }; + + this.fm_get_sel_for_file_content = function(typ) { + var gewaehlte = document.querySelector('.datei-gewaehlt'); + //var fname = $(gewaehlte).find('.dateiname').text(); + + var fname = gewaehlte.textContent; + self.fm_get_file_content(typ, fname); + }; + */ + + this.fm_get_file_content = function(typ, fname) { + //var gewaehlte = document.querySelector('.datei-gewaehlt'); + //var fname = $(gewaehlte).find('.dateiname').text(); + + //var fname = gewaehlte.textContent; + //console.log('fname: ' + fname); + self.openFileName = fname; + var m = '?c=de.uhilger.filecms.api.FileMgr&m=getCode&p=' + self.pfad + '&p=' + fname; + var u = '../svc' + m; + self.fm_get(u, "text", function(resp) { + if(typ === 'text') { + var mode = "text/x-java"; + if(fname.endsWith('js')) { + mode = 'javascript'; + } else if(fname.endsWith('xml')) { + mode = 'xml'; + } else if(fname.endsWith('properties')) { + mode = 'xml'; + } else if(fname.endsWith('adoc')) { + mode = 'text/x-markdown'; + } + self.fm_text_edit(resp, mode); + } else { + self.fm_dok_edit(resp); + } + }); + }; + + this.fm_save_file = function(saveFileName, method, callback) { + var content; + if(self.openEditor === 'text') { + content = self.cm.getValue(); + self.cm.getDoc().markClean(); + } else { + content = self.ed.getContent(); + tinymce.activeEditor.undoManager.clear(); + } + var m = '?c=de.uhilger.filecms.api.FileMgr&m=' + method; + var u = '../svc' + m; + //var data = '&p=' + self.pfad + '&p=' + saveFileName + '&p=' + + // encodeURIComponent(content); + var data = '&p=' + self.pfad + '&p=' + saveFileName + '&p=' + + encodeURIComponent(content); + // '{"foo": "bar"}' + + //var data = '{"p1": "' + self.pfad + '", "p2": "' + saveFileName + + // '", "p3": "' + encodeURIComponent(self.escapeHtml(content)) + '"}'; + self.fm_post(u, data, "text", function(resp) { + // ... + }); + self.openFileName = saveFileName; + if(typeof (callback) !== 'function') { + + } else { + callback(); + } + }; + + /* + * Hier wird fuer eine zuvor markierte Liste von Dateien, fuer die + * Cut oder Copy gewaehlt wurde, die Operations ausgefuehrt (move oder copy) + * @returns {undefined} + */ + this.fm_paste_files = function() { + var m; + if(self.cutCopyOperation === 'cut') { + //m = '?c=de.uhilger.filecms.api.FileMgr&m=moveFiles'; //&p=' + cutCopySrcDir + '&p=' + pfad + '&p=' + encodeURIComponent(liste); + m = '?c=de.uhilger.filecms.api.FileMgr&m=moveFiles&p=' + self.cutCopySrcDir + '&p=' + self.pfad + '&p=' + encodeURIComponent(self.cutCopyFiles); + } else { + //m = '?c=de.uhilger.filecms.api.FileMgr&m=copyFiles'; //&p=' + cutCopySrcDir + '&p=' + pfad + '&p=' + encodeURIComponent(liste); + m = '?c=de.uhilger.filecms.api.FileMgr&m=copyFiles&p=' + self.cutCopySrcDir + '&p=' + self.pfad + '&p=' + encodeURIComponent(self.cutCopyFiles); + } + var u = '../svc' + m; + self.fm_get(u, "text", function(resp) { + // console.log('deleteFiles gab folgendes zurueck: ' + resp); + self.fm_get_list(self.pfad); + }); + }; + + this.fm_del_files = function() { + var liste = self.fm_gewaehlte_dateien(); + var m = '?c=de.uhilger.filecms.api.FileMgr&m=deleteFiles&p=' + self.pfad + '&p=' + encodeURIComponent(liste); + var u = '../svc' + m; + self.fm_get(u, "text", function(resp) { + // console.log('deleteFiles gab folgendes zurueck: ' + resp); + self.fm_get_list(self.pfad); + }); + }; + + this.fm_rename_file = function(fn, p, neuerName) { + var m = '?c=de.uhilger.filecms.api.FileMgr&m=renameFile'; + m = m + '&p=' + p; + m = m + '&p=' + fn; + m = m + '&p=' + neuerName; + var u = '../svc' + m; + self.fm_get(u, "text", function(resp) { + self.fm_get_list(self.pfad); + }); + }; + + /* -------- upload ----------- */ + + this.sendFile = function(datei) { + //console.log('sendFile ' + datei); + var uri = "../api/upload"; + var xhr = new XMLHttpRequest(); + var fd = new FormData(); + xhr.open("POST", uri, true); + xhr.onreadystatechange = function() { + if (xhr.readyState === 4 && xhr.status === 200) { + self.fm_get_list(self.pfad); + if(self.dateien.length > 0) { + self.sendFile(self.dateien.pop()); + } + } + }; + fd.append('dateiauswahlfeld', datei); + fd.append('pfad', self.pfad); + xhr.send(fd); + }; + + /* ---- codemirror editor handling -------- */ + + /* + function htmlDecode(value){ + return $('<div/>').html(value).text(); + } + */ + + this.fm_code_edit = function(content, m) { + //console.log('fm_code_edit content: ' + content.substring(0,30)); + self.cm = CodeMirror.fromTextArea(document.getElementById("editspace"), { + lineNumbers: true, + lineWrapping: true, + gutters: ["CodeMirror-linenumbers", "breakpoints"], + mode: m, + viewportMargin : Infinity, + tabSize: 2, + extraKeys: { + "F9": function(cm) { + cm.setOption("fullScreen", !cm.getOption("fullScreen")); + }, + "Esc": function(cm) { + if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); + }, + ".": function(cm) { + console.log('dot pressed: perhaps look up class or method name'); + /* + * Hier kann man eine Funktion ausloesen, die fuer das + * Wort vor dem Punkt (Name der Klasse) eine Liste mit + * Vorschlaegen fuer Methodennamen einblendet. + */ + + /* + * CodeMirror.Pass laesst das Zeichen zum Editorinhalt durch, + * verhindert aber das Ausloesen von 'keyHandled' + */ + return CodeMirror.Pass; + } + } + }); + //cm.setValue(htmlDecode(content)); + //self.cm.setValue(content); + self.cm.setValue(self.unescapeHtml(content)); + self.cm.getDoc().markClean(); + self.cm.on("gutterClick", function(theEditor, lineNumber) { + var info = theEditor.lineInfo(lineNumber); + //--lineNumber; + //console.log(info.gutterMarkers.breakpoints.message); + //var marker = info.gutterMarkers.breakpoints; + //$(marker).tooltip('toggle'); + }); + /* + cm.on("keyHandled", function(theEditor, keyName, event){ + console.log('cm.keyHandled keyName: ' + keyName + ', event.type: ' + event.type); + }); + */ + }; + + this.makeMarker = function(msg) { + var marker = document.createElement("div"); + marker.style.color = "#822"; + marker.innerHTML = "●"; + //marker.message = msg; + $(marker).tooltip({ + placement: 'right', + title: msg, + offset: '0 -30' + }); + return marker; + }; + + /* ---- TinyMCE editor handling -------- */ + + this.fm_dok_editor_init = function(uid) { + var base = self.fm_get_path(uid); + //var edCount = 0; + //console.log("fm_dok_editor_init calling tinymce.init with base: " + base + "/"); + + /* + * vgl. + * http://stackoverflow.com/questions/4651676/how-do-i-remove-tinymce-and-then-re-add-it + */ + //tinymce.EditorManager.execCommand('mceRemoveControl',true, 'textarea.text-editor'); + //tinymce.EditorManager.execCommand('mceAddControl',true, editor_id); + if(self.ed !== undefined) { + self.ed.destroy(); + } + if(tinymce !== undefined) { + tinymce.remove('textarea.text-editor'); + tinymce.EditorManager.editors = []; + } + + /* + * Konfiguration TinyMCE + */ + tinymce.init({ + content_css : "/file-cms/ui/mce.css", + //content_css: "/jslib/bootstrap/css/bootstrap.min.css", + selector: "textarea.text-editor", + statusbar: false, + menubar: false, + plugins: 'advlist charmap code image link lists media table print preview save table textcolor importcss', + toolbar: 'undo redo | styleselect | image table | link unlink | bullist numlist | outdent indent | code', + /* + menu: { + file: {title: 'File', items: 'savevers | exit'}, + edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'}, + view: {title: 'View', items: 'visualaid | code | link image media | template hr'}, + }, + */ + resize: 'both', + importcss_append: true, + width: "100%", + height: '100%', + relative_urls : true, + convert_urls : false, + document_base_url : base + "/", + setup: function (editor) { + self.ed = editor; + } + }); + + window.addEventListener('resize', self.fm_resize_editor); + //$(window).on('resize', self.fm_resize_editor); + self.fm_resize_editor(); + }; + + this.fm_resize_editor = function() { + window.clearTimeout(self.tmo); + self.tmo = window.setTimeout(function () { + try { + var myHeight = document.querySelector('.inhalt').offsetHeight - + document.querySelector('.nord').offsetHeight + 2; // - 4; + //console.log('myHeight: ' + myHeight); + self.ed.theme.resizeTo('100%', myHeight); // sets the dimensions of the editable area + } catch (err) { + } + }, 200); + }; + + + + /* -------- Editoren --------- */ + + this.fm_text_edit = function(content, mode) { + document.querySelector(".codeeditor-space").style.display = "block"; + //document.querySelector(".code-editor-container").style.display = "block"; + //document.querySelector(".zentrum-behaelter").style.display = "none"; + document.querySelector(".breadcrumb").style.display = "none"; + document.querySelector(".zentrum").style.display = "none"; + self.fm_code_edit(content, mode); + self.openEditor = 'text'; + }; + + this.fm_dok_edit = function(content) { + //fm_filectls_hide(); + self.fm_dok_editor_init(self.userid); + document.querySelector("#mce-editor").style.display = "block"; + //$("#mce-editor").show(); + document.querySelector(".breadcrumb").style.display = "none"; + document.querySelector(".zentrum").style.display = "none"; + + window.clearTimeout(self.tmo2); + self.tmo2 = window.setTimeout(function () { + try { + self.ed.setContent(content); + self.openEditor = 'dok'; + } catch (err) { + } + }, 200); + }; + + this.fm_do_close = function() { + document.querySelector(".codeeditor-space").style.display = "none"; + document.querySelector("#mce-editor").style.display = "none"; + // $("#mce-editor").hide(); + //document.querySelector(".code-editor-container").style.display = "none"; + //document.querySelector(".zentrum-behaelter").style.display = "block"; + document.querySelector(".breadcrumb").style.display = "block"; + document.querySelector(".zentrum").style.display = "block"; + if(self.cm !== undefined) { + self.cm.toTextArea(); + } + self.openFileName = ''; + self.openEditor = ''; + self.fm_get_list(self.pfad); }; /* -------- An- und Abmelden ------------- */ @@ -179,52 +1188,137 @@ var u = '../pub' + m; self.fm_get(u, "text", function (resp) { self.userid = resp; - document.querySelector("#userMenu").textContent = resp; + self.login_zeigen(); + //document.querySelector("#userMenu").textContent = resp; }); }; this.fm_logout = function() { var m = '?c=de.uhilger.filecms.pub.SessionManager&m=expireSession'; var u = '../pub' + m; - self.fm_get(u, "text", function (resp) { //$('#userMenu').text('nicht angemeldet'); 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); }); + }; + + this.removeAllListeners = function(id) { + var el = document.getElementById(id); + if(el !== null) { + elClone = el.cloneNode(true); + el.parentNode.replaceChild(elClone, el); + } + }; // https://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type + + this.escapeHtml = function(text) { + text = text.replace(/\u228/g,'ä'); + text = text.replace(/\u246/g,'ö'); + text = text.replace(/\u252/g,'ü'); + text = text.replace(/\u196/g,'Ä'); + text = text.replace(/\u214/g,'Ö'); + text = text.replace(/\u220/g,'Ü'); + text = text.replace(/\u223/g,'ß'); + text = text.replace(/\u26/g,'&'); + return text; + }; + + this.unescapeHtml = function(text) { + text = text.replace(/ä/g, String.fromCharCode(228)); + text = text.replace(/ö/g, String.fromCharCode(246)); + text = text.replace(/ü/g, String.fromCharCode(252)); + text = text.replace(/Ä/g, String.fromCharCode(196)); + text = text.replace(/Ö/g, String.fromCharCode(214)); + text = text.replace(/Ü/g, String.fromCharCode(220)); + text = text.replace(/ß/g, String.fromCharCode(223)); + text = text.replace(/&/g, String.fromCharCode(26)); + return text; + }; + + /* ---- 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 ----------- */ - this.fm_get = function (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!" ); + this.fm_get = function (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(); + }; + + self.fm_post = function(u, d, dtype, scallback) { + var xmlhttp = new XMLHttpRequest(); + var url = u; + xmlhttp.onreadystatechange = function() { + if (this.readyState === 4 && this.status === 200) { + scallback(this.responseText); + } + }; + xmlhttp.open("POST", url, true); + xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8'); + xmlhttp.send(d); }; - this.fm_post = function (u, d, dtype, scallback) { - $.ajax({ - url: u, - data: d, - type: "POST", - dataType: dtype, - success: scallback, - error: function (xhr, status, errorThrown) { - $('#fehler').html("Error: " + errorThrown + " Status: " + status); - }, - complete: function (xhr, status) { - //alert( "The request is complete!" ); - } - }); + /* + this.http_get = function(u, cb) { + self.http_call('GET', u, null, cb); }; + + this.http_post = function(u, data, cb) { + self.http_call('POST', u, data, cb); + }; + + this.http_call = function (method, u, data, scallback) { + var xhr = new XMLHttpRequest(); + var url = u; + xhr.onreadystatechange = function() { + if (this.readyState === 4 && this.status === 200) { + scallback(this.responseText); + } + }; + xhr.open(method, url, false); + if(method === 'GET') { + xhr.send(); + } else if(method === 'POST' || method === 'PUT') { + xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhr.send(data); + } + }; + */ + } -- Gitblit v1.9.3