From d9cdb1ac342ae2c867489ad4220bb2c81043f353 Mon Sep 17 00:00:00 2001 From: ulrich Date: Sun, 17 Jan 2021 16:21:45 +0000 Subject: [PATCH] Startseite, Anmeldung und Abmeldung umgestellt auf neue Bedienoberflaeche und neue Stile, Verweis auf Font bei Google entfernt --- web/ui2/js/app.js | 502 ++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 415 insertions(+), 87 deletions(-) diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js index f9ad751..99141bf 100644 --- a/web/ui2/js/app.js +++ b/web/ui2/js/app.js @@ -1,14 +1,17 @@ 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.tinymce; + this.ed; + this.tmo; + this.tmo2; this.PERS_DIR = "Persoenlich"; this.PUB_DIR = "Oeffentlich"; this.DAV_DIR = "Austausch"; @@ -17,6 +20,9 @@ this.WWW_DIR = "www"; this.openEditor; this.openFileName; + this.cutCopyOperation; + this.cutCopySrcDir; + this.cutCopyFiles; this.cache = {}; // mustache template cache this.datei_neuer_text = function () { @@ -26,15 +32,9 @@ /* Funktionen aus App-Vorlage */ - this.init = function () { - - // Hide and show an element by changing "display" to block and none + this.init = function () { document.querySelector(".codeeditor-space").style.display = "none"; - //document.querySelector(".code-editor-container").style.display = "none"; document.querySelector("#mce-editor").style.display = "none"; - //document.querySelector(".box").style.display = "block"; - - //self.vorlagen = new Vorlagen(); self.appMenu = new AppMenu(); self.appMenu.init( "data/menu/", @@ -45,6 +45,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); @@ -60,13 +63,14 @@ self.seitenleiste_umschalten(); //fm_init_uploader(); self.loc = window.location.protocol + '//' + window.location.host; - - //self.fm_get_list(''); - //self.loc = window.location.protocol + '//' + window.location.host; }; 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.menue_umschalten = function () { @@ -107,6 +111,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 () { @@ -127,7 +133,7 @@ self.fm_do_close(); } } else { - if(self.tinymce.activeEditor.undoManager.hasUndo()) { + if(tinymce.activeEditor.undoManager.hasUndo()) { self.fm_ask_for_save(); } else { self.fm_do_close(); @@ -171,11 +177,17 @@ //self.fm_menu_datei_speichern(function() { //console.log(document.querySelector('#datei-name-in').value); self.fm_save_file(document.querySelector('#datei-name-in').value, 'saveTextFileAs', callback); - self.fm_do_close(); - self.dialog_schliessen(); + if(typeof(callback) !== 'function') { + self.fm_do_close(); + self.dialog_schliessen(); + } //}); }); }); + }; + + this.fm_menu_neues_dokument = function() { + self.fm_dok_edit(''); }; /* Dialog-Funktionen */ @@ -228,35 +240,108 @@ 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')) { + + } 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 dElem = par.querySelector('.dateiname'); if(elem.classList.contains("icon-folder")) { - if(/*ev.shiftKey || */ ev.ctrlKey) { - var par = elem.parentElement; - par.querySelector('.dateiname').classList.add('datei-gewaehlt'); - } else { - var ordner = elem.parentElement.querySelector('.dateiname').textContent.trim(); - 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')) { - 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'); } - var par = elem.parentElement; - par.querySelector('.dateiname').classList.add('datei-gewaehlt'); } else { //console.log('kein folder oder file...'); } @@ -264,35 +349,55 @@ // 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 { - var ti = document.querySelector('.table-info'); - if(ti !== null) { - ti.classList.remove('table-info'); + 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(); } - var dg = document.querySelector('.datei-gewaehlt'); - if(dg !== null) { - dg.classList.remove('datei-gewaehlt'); - } + pElem.classList.add('table-info'); + dnElem.classList.add('datei-gewaehlt'); } - pElem.classList.add('table-info'); - pElem.querySelector('.dateiname').classList.add('datei-gewaehlt'); } else { // Ordner - if(/*ev.shiftKey || */ ev.ctrlKey) { - //elem.children[0].classList.add('datei-gewaehlt'); - pElem.querySelector('.dateiname').classList.add('datei-gewaehlt'); - } else { - var ordner = pElem.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(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'); } } } @@ -483,6 +588,138 @@ } }; + /* ------- 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(); + //}); + }); + }); + /* + $('#confirmOk').click(function() { + $('#confirmOk').attr('onclick','').unbind('click'); + fm_del_files(); + }); + $('#confirmOk').text("Loeschen"); + $('#confirmOk').removeClass('btn-primary'); + $('#confirmOk').addClass('btn-danger'); + $('#confirmClose').hide(); + $('#confirmModalTitle').text("Löschen"); + $('#confirmModalBody').text("Wirklich löschen?"); + $('#confirmModal').modal({ + keyboard: false, + show: true + }); + */ + }; + + /* + * 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'; + }; + + /* + * 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'; + }; + + + + /* + * 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 = $('.datei-gewaehlt'); + var gewaehlte = document.querySelectorAll('.datei-gewaehlt'); + /* + //console.log('anzahl: ' + gewaehlte.length); + var fnames = new Array(); + var i = 0; + while(i < gewaehlte.length) { + var str = { "java.lang.String": $(gewaehlte[i]).text()}; + 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 + return liste; + */ + 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_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= @@ -529,44 +766,31 @@ self.dialog_schliessen(); self.fm_get_list(self.pfad); }); - /* - self.fm_save_file(document.querySelector('#datei-name-in').value, 'saveTextFileAs', callback); - self.fm_do_close(); - self.dialog_schliessen(); - */ }); }); - - - /* - $('#modal_ok').click(function() { - // hier speichern - var m = '?c=de.uhilger.filecms.api.FileMgr&m=newFolder&p=' + pfad + '&p=' + $('#dateiname').val(); - var u = '../svc' + m; - fm_get(u, "json", function(resp) { - fm_get_list(pfad); - }); - }); - $('#saveModalTitle').text('Neuer Ordner'); - $('#dialogfrage').text("Name?"); - $('#dateiname').val(''); - $('#dateiname').attr('placeholder', 'Ordnername'); - $('#saveModal').modal({ - keyboard: false, - show: true - }); - */ }; this.fm_edit_as_text = function() { - self.fm_get_file_content('text'); + self.fm_get_sel_for_file_content('text'); }; - this.fm_get_file_content = function(typ) { + this.fm_edit_as_doc = function() { + self.fm_get_sel_for_file_content('doc'); + }; + + this.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; @@ -596,7 +820,7 @@ content = self.cm.getValue(); self.cm.getDoc().markClean(); } else { - content = ed.getContent(); + content = self.ed.getContent(); tinymce.activeEditor.undoManager.clear(); } var m = '?c=de.uhilger.filecms.api.FileMgr&m=' + method; @@ -613,7 +837,36 @@ } }; + /* + * 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); + }); + }; /* ---- codemirror editor handling -------- */ @@ -686,6 +939,76 @@ 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 --------- */ @@ -701,14 +1024,17 @@ this.fm_dok_edit = function(content) { //fm_filectls_hide(); - fm_dok_editor_init(userid); - $("#mce-editor").show(); + 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(tmo2); - tmo2 = window.setTimeout(function () { + window.clearTimeout(self.tmo2); + self.tmo2 = window.setTimeout(function () { try { - ed.setContent(content); - openEditor = 'dok'; + self.ed.setContent(content); + self.openEditor = 'dok'; } catch (err) { } }, 200); @@ -716,6 +1042,8 @@ 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"; -- Gitblit v1.9.3