Uebertragung text edit nach ui2 begonnen

ulrich

2021-01-13 f002d95b1ed4e3db7de54762a6313002011b0fc3

Uebertragung text edit nach ui2 begonnen

 web/ui2/index.html

@@ -30,6 +30,18 @@
      <div class="zentrum-behaelter">
        <!-- Einblendbereich -->
        <div class="dialog"></div>
        <!-- Codemirror Start -->
        <div class="code-editor-container">
        <div class="codeeditor-space">
          <textarea class="codeeditor" id="editspace"></textarea>       
        </div>
        </div>
        <!-- Codemirror Ende -->
        <!-- TinyMCE Start -->
        <div id="mce-editor" class="pl-3 pr-3">
          <textarea class="text-editor" id="text-editspace"></textarea>
        </div>        
        <!-- TinyMCE Ende -->
        <!-- Breadcrumb -->
        <div class="breadcrumb">
          <a class="bc-link">Ordner 1</a> / 
@@ -60,6 +72,13 @@
    <script src="/jslib/mustache/mustache.min.js"></script>
    <script src="/jslib/moment/moment-with-locales.min.js"></script>
    <script src="/jslib/numeral/numeral.min.js"></script>    
    <script src="/jslib/codemirror/lib/codemirror.js"></script>
    <script src="/jslib/codemirror/mode/javascript/javascript.js"></script>
    <script src="/jslib/codemirror/mode/xml/xml.js"></script>
    <script src="/jslib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script src="/jslib/codemirror/mode/clike/clike.js"></script>
    <script src="/jslib/codemirror/addon/display/fullscreen.js"></script>
    <script src="/jslib/tinymce/tinymce.min.js"></script>
    <script src="js/app-menu.js"></script>
    <script src="js/data.js"></script>
    <script src="js/app.js"></script>

 web/ui2/js/app.js

@@ -13,6 +13,8 @@
  this.BASE_DIR = "$basis";
  this.DATA_DIR = "$daten";
  this.WWW_DIR = "www";
  this.openEditor;
  this.openFileName;
  this.cache = {}; // mustache template cache

  this.datei_neuer_text = function () {
@@ -22,6 +24,13 @@
  /* Funktionen aus App-Vorlage */

  this.init = function () {
    
    // Hide and show an element by changing "display" to block and none
    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(
@@ -435,6 +444,146 @@
      self.fm_renderBreadcrumb(dirList);     
    });
  };
  
  this.fm_get_file_content = function(typ) {
    var gewaehlte = document.querySelector('.datei-gewaehlt');
    //var fname = $(gewaehlte).find('.dateiname').text();

    var fname = gewaehlte.textContent;
    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);
      }
    });
  };


/* ---- codemirror editor handling -------- */

  /*
  function htmlDecode(value){ 
    return $('<div/>').html(value).text(); 
  }
  */

  this.fm_code_edit = function(content, m) {
    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));
    //cm.setValue(content);
    cm.setValue(unescapeHtml(content));
    cm.getDoc().markClean();
    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;
  };

  
  /* -------- Editoren --------- */
  
  this.fm_text_edit = function(content, mode) {
    //fm_filectls_hide();
    //$('.codeeditor-space').show();
    //$('.code-editor-container').show();
    document.querySelector(".codeeditor-space").style.display = "block";
    document.querySelector(".code-editor-container").style.display = "block";
    self.fm_code_edit(content, mode);  
    self.openEditor = 'text';
  };

  this.fm_dok_edit = function(content) {
    //fm_filectls_hide();
    fm_dok_editor_init(userid);
    $("#mce-editor").show();

    window.clearTimeout(tmo2);
    tmo2 = window.setTimeout(function () {
      try {
        ed.setContent(content);
        openEditor = 'dok';  
      } catch (err) {
      }
    }, 200);
  };

  /*
  function fm_filectls_hide() {
    $('#zentrum_bc').hide();
    $('#dateien').hide();
    $('#editMenu').addClass('disabled');
  }

  function fm_filectls_show() {
    $('#zentrum_bc').show();
    $('#dateien').show();  
    $('#editMenu').removeClass('disabled');
  }
  */

  /* -------- An- und Abmelden ------------- */