<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel=stylesheet href="/misc/bootstrap.min.css"> <link rel="stylesheet" href="/misc/codemirror.css"> <style> html { position: relative; min-height: 100%; } body { margin-top: 60px; } /* * Global add-ons */ .sub-header { padding-bottom: 10px; border-bottom: 1px solid #eee; } /* * Top navigation * Hide default border to remove 1px line. */ .navbar-fixed-top { border: 0; } /* * Sidebar */ /* Hide for mobile, show later */ .sidebar { display: none; border-right: 1px solid #ccc; } @media (min-width: 768px) { .sidebar { position: fixed; top: 51px; bottom: 0; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ background-color: #f5f5f5; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; resize: horizontal; } } .container { width: auto; } .navbar { border-bottom: 1px solid #ccc; } /* Sidebar navigation */ .nav-sidebar { margin-right: -21px; /* 20px padding + 1px border */ margin-bottom: 20px; margin-left: -20px; } .nav-sidebar > li > a { padding-right: 20px; padding-left: 20px; } .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus { color: #fff; background-color: #428bca; } /* Main Content */ .main { padding-left: 40px; } .sidebar ul, li { margin-left: 2px; padding-left: 1px; list-style-type: square; } mark { background-color: lightblue; color: black; } </style> </head> <body> <!-- Fixed navbar --> <nav class="navbar navbar-fixed-top navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/start">GoWiki</a> <div id="breadcrumb" class="navbar-brand"></div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> </ul> <ul class="nav navbar-nav navbar-right"> <li id="btnEditpage"><a href="#" onclick="EditPage()">Edit</a></li> <li id="btnPreviewpage"><a href="#" onclick="PreviewPage()">Preview</a></li> <li id="btnSavepage"><a href="#" onclick="SavePage()">Save</a></li> <li id="btnPDFgen"><a href="#" onclick="PDFGen()">PDF</a></li> <li id="btnLogout"><a href="#" onclick="Logout()">Logout</a></li> </ul> <form class="navbar-form nav navbar-nav navbar-right" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> </div> </form> </div><!--/.nav-collapse --> </div> </nav> <div class="container-fluid"> <div class="d-flex flex-row"> <div id="sidebar" class="p-2 sidebar"> <div id="outputsidebar" style="display: none;">{{.SideBar}}</div> </div> <div id="main" class="p-2 main"> <div id="markdowndiv" style="display: none;">{{.MDText}}</div> <div id="outputdiv" style="display: none;">{{.MDText}}</div> <div id="editdiv" style="display: none;"> <form><textarea id="code" name="code"></textarea> </div> <div id="ModificationInfos" style="position:fixed;top:98%;right:1%"></div> </div> </div> </div> <script language=javascript src="/misc/jquery.min.js"></script> <script language=javascript src="/misc/bootstrap.min.js"></script> <script language=javascript src="/misc/showdown.min.js"></script> <script language=javascript src="/misc/codemirror.js"></script> <script language=javascript src="/misc/markdown.js"></script> <script type="text/javascript"> var html = "EMPTY"; var MD2HTMLConverter = new showdown.Converter({ tables: true, strikethrough: true, simplifiedAutoLink: true, excludeTrailingPunctuationFromURLs: true, tasklists: true, emoji: true }); $(document).ready(function() { $(btnEditpage).show(); $(btnSavepage).hide(); $(btnPreviewpage).hide(); //----------------------------------------------------------------------------------- // Breadcrump Navigation im Header var breadcrumbHTML = ""; var sPageURL = window.location.pathname.split('/'); for (i = 1; i < sPageURL.length; i++) { if(i==sPageURL.length-1) { breadcrumbHTML = breadcrumbHTML + '/'+sPageURL[i]+''; } else { breadcrumbHTML = breadcrumbHTML + '<a href="/'+sPageURL[i]+'/start">/'+sPageURL[i]+'</a> '; } } $("#breadcrumb").html(breadcrumbHTML); //----------------------------------------------------------------------------------- // Codemirror Editor window.myCodeMirror = CodeMirror.fromTextArea(document.getElementById("code"), { mode: 'markdown', lineNumbers: true, theme: "default", extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"} }); window.myCodeMirror.setSize("auto", "auto"); $(window.myCodeMirror.getWrapperElement()).slideDown('normal', function(){ window.myCodeMirror.refresh(); }); //----------------------------------------------------------------------------------- // Laden des Outputdiv (HTML Anzeige des MD-Textes) $.ajax({ method: "GET", contentType:'application/json; charset=utf-8', url: '/_api/md/'+window.location.pathname, dataType: "json", data: "", success: function(content){ $("#outputdiv").html(MD2HTMLConverter.makeHtml(content)); $("#outputdiv").show(); $('#outputdiv table').addClass('table table-sm table-bordered table-striped'); } }); //----------------------------------------------------------------------------------- // Laden der sidebar.md in die Sidebar $.ajax({ method: "GET", contentType:'application/json; charset=utf-8', url: '/_api/md/sidebar', dataType: "json", data: "", success: function(content){ html = MD2HTMLConverter.makeHtml(content+$("#outputsidebar").html()); $("#outputsidebar").html(html); $("#outputsidebar").show(); } }); //----------------------------------------------------------------------------------- // Laden der Config $.ajax({ method: "GET", contentType:'application/json; charset=utf-8', url: '/_api/config', dataType: "json", data: "", success: function(data){ if(!data.FTS) { $("#srch-term").hide(); } if(!data.Login) { $("#btnLogout").hide(); } } }); //----------------------------------------------------------------------------------- ajaxLoadModificationInfos(window.location.pathname); //----------------------------------------------------------------------------------- // Volltext-Suche $('#srch-term').keypress(function (e) { if (e.which == 13) { //alert($('#srch-term').val()); $.ajax({ method: "GET", contentType:'application/json; charset=utf-8', url: '/_api/fts/'+$('#srch-term').val(), dataType: "json", data: "", success: function(content){ html = "<h2> Suche</h2>Der Suchbegriff <b>\""+$('#srch-term').val()+"\"</b> wurde <b>"+content.length +"</b> mal in folgenden Seiten gefunden:<hr>" //html = MD2HTMLConverter.makeHtml(content+$("#outputsidebar").html()); //console.log(content); $("#outputdiv").html(html); $("#outputdiv").show(); content.forEach(function (item, index) { console.log(item.id); var page = item.id.replace(/.md/, ''); $("#outputdiv").append((index+1)+". Seite: <a href='/"+page+"'>/"+page+"</a><br>"); $("#outputdiv").append(item.fragments.Text+"<hr>"); }); } }); return false; } }); //----------------------------------------------------------------------------------- // Abschnitt für das dynamische Anpassend er Sidebar via ResizeObserver $("#sidebar").width(localStorage.getItem("sidebar_width")); $(main).css('margin-left',localStorage.getItem("sidebar_width")+'px'); var ro = new ResizeObserver( entries => { for (let entry of entries) { const cr = entry.contentRect; localStorage.setItem("sidebar_width",cr.width); $(main).css('margin-left',localStorage.getItem("sidebar_width")+'px'); } }); // Observe one or multiple elements ro.observe(document.querySelector('#outputsidebar')); //----------------------------------------------------------------------------------- }); function EditPage() { $(btnEditpage).hide(); $(btnSavepage).show(); $(btnPreviewpage).show(); $.ajax({ method: "GET", contentType:'application/json; charset=utf-8', url: '/_api/md/'+window.location.pathname, dataType: "json", data: "", success: function(content){ $("#outputdiv").hide(); //$("#code").html(content); $("#editdiv").show(); window.myCodeMirror.setValue(content); } }); } function PreviewPage() { var content = "###Vorschau\n ----- \n"+window.myCodeMirror.getValue()+"\n ----- \n"; $("#outputdiv").html(MD2HTMLConverter.makeHtml(content)); $("#outputdiv").show(); } function SavePage() { var obj = { MDText : window.myCodeMirror.getValue() }; $.ajax({ method: "POST", contentType:'application/json; charset=utf-8', url: window.location.pathname, dataType: "json", data: JSON.stringify(obj), success: function(data){ $("#outputdiv").html(MD2HTMLConverter.makeHtml(obj.MDText)); $("#outputdiv").show(); $("#editdiv").hide(); $(btnEditpage).show(); $(btnSavepage).hide(); $(btnPreviewpage).hide(); ajaxLoadModificationInfos(window.location.pathname); } }); } function PDFGen() { // Öffnet die PDF über die API einfach in einem neuen Fenster window.open('/_api/pdf'+window.location.pathname); } function ajaxLoadModificationInfos(page) { // Laden des ModificationInfos-Div (Anzeige der letzten Änderung an der Seite) $.ajax({ method: "GET", contentType:'application/json; charset=utf-8', url: '/_api/pinfo/'+page, dataType: "json", data: "", success: function(content){ //date = new Intl.DateTimeFormat('de-DE').format(new Date(content.ModTime)); date = new Date(content.ModTime).toLocaleString('de-DE'); $("#ModificationInfos").html("<p><small>Letzte änderung: "+date+"</small></p>"); $("#ModificationInfos").show(); } }); } function Logout(){ try { // Hack for Firefox/Chrome $.ajax({ url: "/", username: 'reset', password: 'reset', // If the return is 401, refresh the page to request new details. statusCode: { 401: function() { location.reload(); } } }); } catch (exception) { // Hack for IE only if (!document.execCommand("ClearAuthenticationCache")) { document.location = "http://reset:reset@" + document.location.hostname + document.location.pathname; location.reload(); } } } </script> <script> //-------------------------------------------------------------------------- // Hilfsfunktionen //-------------------------------------------------------------------------- function getUrlParameter(sParam) { var sPageURL = window.location.search.substring(1), sURLVariables = sPageURL.split('&'), sParameterName, i; for (i = 0; i < sURLVariables.length; i++) { sParameterName = sURLVariables[i].split('='); if (sParameterName[0] === sParam) { return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]); } } }; </script> </body></html>