394 lines
13 KiB
HTML
394 lines
13 KiB
HTML
<!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>
|
|
</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();
|
|
}
|
|
});
|
|
|
|
//-----------------------------------------------------------------------------------
|
|
|
|
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();
|
|
}
|
|
});
|
|
}
|
|
|
|
</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> |