From a4d3b5898ebecf3e413ce45feb6a4e1cfdba9ddc Mon Sep 17 00:00:00 2001 From: ulrich <ulrich@uhilger.de> Date: Thu, 16 Feb 2017 20:52:53 +0000 Subject: [PATCH] Codemirror eingebaut --- web/ui/index.html | 123 +++++++++++++++++++++--------- web/ui/stile.css | 20 +++++ web/ui/ui.js | 85 ++++++++++++++++++++ 3 files changed, 189 insertions(+), 39 deletions(-) diff --git a/web/ui/index.html b/web/ui/index.html index b50c62d..02cbd66 100644 --- a/web/ui/index.html +++ b/web/ui/index.html @@ -4,6 +4,8 @@ <title>Dateiverwaltung</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="/jslib/codemirror/lib/codemirror.css"> + <link rel="stylesheet" href="/jslib/codemirror/addon/display/fullscreen.css"> <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="stile.css"> @@ -17,7 +19,7 @@ <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Datei</a> <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Neue Text-Datei..</a> + <a id="newTextFile" class="dropdown-item" href="#">Neue Text-Datei..</a> <a class="dropdown-item" href="#">Neues Dokument..</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Ansehen als Code</a> @@ -25,6 +27,10 @@ <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Bearbeiten als Code</a> <a class="dropdown-item" href="#">Bearbeiten als Dokument</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Speichern</a> + <div class="dropdown-divider"></div> + <a id="closeFile" class="dropdown-item" href="#">Schliessen</a> </div> </li> <li class="nav-item dropdown"> @@ -55,42 +61,78 @@ </div> <!-- zentraler Inhaltsbereich --> <div class="zentrum"> - <div class="zentrum-bc"> - <nav class="breadcrumb"> - <a class="breadcrumb-item" href="#">Home</a> - <a class="breadcrumb-item" href="#">Library</a> - <a class="breadcrumb-item" href="#">Data</a> - <span class="breadcrumb-item active">Bootstrap</span> - <div class="pull-right align-middle"> - <i class="fa fa-th-large"></i> - </div> - </nav> + + <div class="code-editor-container pr-3 pb-3"> + <div class="codeeditor-space pr-3"> + <textarea class="codeeditor" id="editspace"></textarea> </div> - <div class="zentrum-liste"> - <figure class="figure datei-figure text-center text-warning align-top"> - <i class="fa fa-folder fa-3x"></i> - <figcaption class="figure-caption">Kurzer Text</figcaption> - </figure> - <figure class="figure datei-figure text-center text-warning align-top"> - <i class="fa fa-folder fa-3x"></i> - <figcaption class="figure-caption">A caption for the above image.</figcaption> - </figure> - <figure class="figure datei-figure text-center text-warning align-top"> - <i class="fa fa-folder fa-3x"></i> - <figcaption class="figure-caption">Ein ganz langer Text, der dieses Element benennt.</figcaption> - </figure> - <figure class="figure datei-figure text-center text-warning align-top"> - <i class="fa fa-folder fa-3x"></i> - <figcaption class="figure-caption">Wort</figcaption> - </figure> - <figure class="figure datei-figure text-center text-warning align-top"> - <i class="fa fa-folder fa-3x"></i> - <figcaption class="figure-caption">Wort2</figcaption> - </figure> - <figure class="figure datei-figure text-center text-warning align-top"> - <i class="fa fa-folder fa-3x"></i> - <figcaption class="figure-caption">Wort3</figcaption> - </figure> + </div> + + <!-- <div id="code-editor-container" class="pr-2"> --> + + <!-- + <div id="edit-tabs"> + <ul class="nav nav-tabs"> + <li class="nav-item"> + <a class="nav-link active" href="#">Active</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + </ul> + </div> + --> + + <!-- </div> --> + + <div id="dateiansicht"> + <!-- Breadcrumb Start --> + <div class="zentrum-bc"> + <nav class="breadcrumb"> + <a class="breadcrumb-item" href="#">Home</a> + <a class="breadcrumb-item" href="#">Library</a> + <a class="breadcrumb-item" href="#">Data</a> + <span class="breadcrumb-item active">Bootstrap</span> + <div class="pull-right align-middle"> + <i class="fa fa-th-large"></i> + </div> + </nav> + </div> + <!-- Breadcrumb Ende --> + <!-- Dateikacheln Start --> + <div class="zentrum-liste"> + <figure class="figure datei-figure text-center text-warning align-top"> + <i class="fa fa-folder fa-3x"></i> + <figcaption class="figure-caption">Kurzer Text</figcaption> + </figure> + <figure class="figure datei-figure text-center text-warning align-top"> + <i class="fa fa-folder fa-3x"></i> + <figcaption class="figure-caption">A caption for the above image.</figcaption> + </figure> + <figure class="figure datei-figure text-center text-warning align-top"> + <i class="fa fa-folder fa-3x"></i> + <figcaption class="figure-caption">Ein ganz langer Text, der dieses Element benennt.</figcaption> + </figure> + <figure class="figure datei-figure text-center text-warning align-top"> + <i class="fa fa-folder fa-3x"></i> + <figcaption class="figure-caption">Wort</figcaption> + </figure> + <figure class="figure datei-figure text-center text-warning align-top"> + <i class="fa fa-folder fa-3x"></i> + <figcaption class="figure-caption">Wort2</figcaption> + </figure> + <figure class="figure datei-figure text-center text-warning align-top"> + <i class="fa fa-folder fa-3x"></i> + <figcaption class="figure-caption">Wort3</figcaption> + </figure> + </div> + <!-- Dateikacheln Ende --> </div> </div> <!-- oestliche Seitenleiste --> @@ -108,13 +150,20 @@ --> <!-- Skripte --> <script src="/jslib/jquery/jquery.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/addon/display/fullscreen.js"></script> + <script src="/jslib/bootstrap/js/bootstrap.min.js"></script> <script src="/jslib/mustache/mustache.min.js"></script> <script src="ui.js"></script> <script type="text/javascript" charset="utf-8"> //var ui; $(document).ready(function() { - // init + fm_init(); }); </script> </body> diff --git a/web/ui/stile.css b/web/ui/stile.css index aedae23..d49e4cc 100644 --- a/web/ui/stile.css +++ b/web/ui/stile.css @@ -1,4 +1,23 @@ +/* Stile Code-Editor */ + +.code-editor-container { + height: 100%; +} + +.codeeditor { + height: 100%; +} + +.codeeditor-space { + width: 100%; + height: 100%; + border: 1px solid lightgrey; +} + +.CodeMirror { + height: 100%; +} /* Stile Listenansicht */ @@ -44,6 +63,7 @@ height: 100%; display: flex; flex-flow: column; + /* background-color: antiquewhite; */ } .zentrum-bc { } diff --git a/web/ui/ui.js b/web/ui/ui.js index 31f3e6d..3e80f3c 100644 --- a/web/ui/ui.js +++ b/web/ui/ui.js @@ -1,5 +1,86 @@ - +var cm; function fm_init() { + $('.codeeditor-space').hide(); + $('.code-editor-container').hide(); + $('#newTextFile').on('click', fm_menu_neue_textdatei); + $('#closeFile').on('click', fm_menu_datei_schliessen); +} + +function fm_menu_neue_textdatei() { + $('#dateiansicht').hide(); + $('.codeeditor-space').show(); + $('.code-editor-container').show(); + fm_code_edit('Test'); +} + +function fm_menu_datei_schliessen() { + $('.codeeditor-space').hide(); + $('.code-editor-container').hide(); + cm.toTextArea(); + $('#dateiansicht').show(); +} + +/* ---- codemirror editor handling -------- */ + +function fm_code_edit(content) { + var windowHeight = $(window).height(); + + //$("editspace").empty(); + //self.cm.toTextArea(); + + cm = CodeMirror.fromTextArea(document.getElementById("editspace"), { + lineNumbers: true, + mode: "xml", + viewportMargin : Infinity, + extraKeys: { + "F9": function(cm) { + cm.setOption("fullScreen", !cm.getOption("fullScreen")); + }, + "Esc": function(cm) { + if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); + } + } + }); -} \ No newline at end of file + // cm.setSize("100%", windowHeight - 100); // w, h + cm.setValue(content); + +}; + + + +/* -------- helper functions ----------- */ + +function fm_get(u, scallback) { + $.ajax({ + url: u, + type: "GET", + dataType: "json", + success: scallback, + error: function (xhr, status, errorThrown) { + alert("Error: " + errorThrown + " Status: " + status + " URL: " + u); + }, + complete: function (xhr, status) { + //console.log( "The request is complete!" ); + } + + }); +}; + +function fm_post(u, d, scallback) { + $.ajax({ + url: u, + data: d, + type: "POST", + dataType: "json", + success: scallback, + error: function (xhr, status, errorThrown) { + $('#fehler').html("Error: " + errorThrown + " Status: " + status); + }, + complete: function (xhr, status) { + //alert( "The request is complete!" ); + } + }); +}; + -- Gitblit v1.9.3