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 | 1140 +++++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 1,015 insertions(+), 125 deletions(-) diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js index c618b1d..d9e4050 100644 --- a/web/ui2/js/app.js +++ b/web/ui2/js/app.js @@ -1,28 +1,42 @@ function AppVorlage() { var self = this; this.appMenu; - this.vorlagen; + //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.meldung_mit_timeout("Neuer Text", 1500); + //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/", @@ -33,6 +47,9 @@ 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); @@ -44,16 +61,80 @@ } else { self.fm_get_list(''); } - //fm_init_uploader(); - self.loc = window.location.protocol + '//' + window.location.host; - //self.fm_get_list(''); - //self.loc = window.location.protocol + '//' + window.location.host; + 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"); @@ -63,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 () { @@ -75,7 +156,7 @@ ostDiv.classList.add('ost-open'); ostDiv.style.flexBasis = '6em'; } - self.menue_umschalten(); + //self.menue_umschalten(); }; this.fusszeile_umschalten = function () { @@ -93,6 +174,8 @@ 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 () { @@ -104,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 */ @@ -113,31 +264,35 @@ 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(); + } }); }; @@ -148,80 +303,168 @@ //dlg.style.display = "none"; dlg.style.height = '0'; dlg.innerHTML = ''; + self.removeAllListeners('#cancel-btn'); + self.removeAllListeners('#speichern-btn'); }; - /* - 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_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; - //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 + //var par = elem.parentElement; + var par = elem.closest('.datei-figure'); + var dElem = par.querySelector('.dateiname'); 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; + // 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 { - self.pfad = ordner; + // 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); } - 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')) { - //console.log('contains datei'); - if(/*ev.shiftKey || */ ev.ctrlKey) { - // mehrere Dateien sollen gewaehlt werden + // 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 { - var gew = document.querySelector('.datei-gewaehlt'); - if(gew != undefined) { - gew.classList.remove('datei-gewaehlt'); - } + if(/*ev.shiftKey || */ ev.ctrlKey) { + // mehrere Dateien sollen gewaehlt werden + } else { + self.fm_auswahl_marke_entfernen(); + } + dElem.classList.add('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')) { + // 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(/*ev.shiftKey || */ ev.ctrlKey) { - // mehrere Dateien sollen gewaehlt werden + 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 { - document.querySelector('.table-info').classList.remove('table-info'); - document.querySelector('.datei-gewaehlt').classList.remove('datei-gewaehlt'); + 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'); } - 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; + if(istGewaehlt) { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // ein gewaehlter Ordner ist mit [Strg] geklickt, Auswahl entfernen + dnElem.classList.remove('datei-gewaehlt'); } else { - self.pfad = ordner; + // 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); } - self.fm_get_list(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'); } } } @@ -229,48 +472,24 @@ this.fm_render_list = function (fl) { - if (self.modus == 'kacheln') { + if (self.modus === 'kacheln') { // Kachelansicht - - // neu bauen - - //html_erzeugen = function(vurl, inhalt, cb) - 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(); - 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 - - // neu bauen - - /* - 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); - */ + 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) { - //console.log('pfad: ' + pfad); var restdir; if (self.pfad.indexOf(self.PUB_DIR) > -1) { restdir = self.pfad.substr(self.PUB_DIR.length); @@ -290,7 +509,6 @@ } } var pdir = self.fm_get_base(uid); - // console.log('fm_get_path path: ' + pdir + "/" + restdir); if (restdir.length > 1) { return pdir + "/" + restdir; } else { @@ -299,7 +517,6 @@ }; this.fm_get_base = function (uid) { - //console.log('pfad: ' + pfad); var pdir; if (self.pfad.indexOf(self.PUB_DIR) > -1) { pdir = '/data/' + uid; @@ -310,16 +527,272 @@ } else if (self.pfad.indexOf(self.DATA_DIR) > -1) { pdir = ''; } - //console.log('fm_get_base base: ' + pdir + uid); 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 (respText) { @@ -335,16 +808,377 @@ } var fl = new FileList(files); self.fm_render_list(fl); - //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 + + 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 ------------- */ @@ -375,23 +1209,40 @@ }; 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); + 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 ---- */ @@ -415,20 +1266,59 @@ }); }; - - /* -------- ajax helper functions ----------- */ this.fm_get = function (u, dtype, scallback) { var xmlhttp = new XMLHttpRequest(); var url = u; xmlhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { + 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.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