304 lines
8.6 KiB
HTML
304 lines
8.6 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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</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>
|
||
|
|
</ul>
|
||
|
|
</div><!--/.nav-collapse -->
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-2 col-md-1 sidebar">
|
||
|
|
<div id="outputsidebar" style="display: none;">{{.SideBar}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-1 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>
|
||
|
|
</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();
|
||
|
|
|
||
|
|
|
||
|
|
//html = converter.makeHtml($("#outputdiv").html());
|
||
|
|
//$("#outputdiv").html(html);
|
||
|
|
|
||
|
|
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);
|
||
|
|
|
||
|
|
|
||
|
|
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();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
method: "GET",
|
||
|
|
contentType:'application/json; charset=utf-8',
|
||
|
|
url: '/p/'+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');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
method: "GET",
|
||
|
|
contentType:'application/json; charset=utf-8',
|
||
|
|
url: '/p/sidebar',
|
||
|
|
dataType: "json",
|
||
|
|
data: "",
|
||
|
|
success: function(content){
|
||
|
|
html = MD2HTMLConverter.makeHtml(content+$("#outputsidebar").html());
|
||
|
|
$("#outputsidebar").html(html);
|
||
|
|
$("#outputsidebar").show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
function EditPage() {
|
||
|
|
|
||
|
|
$(btnEditpage).hide();
|
||
|
|
$(btnSavepage).show();
|
||
|
|
$(btnPreviewpage).show();
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
method: "GET",
|
||
|
|
contentType:'application/json; charset=utf-8',
|
||
|
|
url: '/p/'+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();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</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>
|