Initial commit
This commit is contained in:
Sven Schmalle
304
web/index.html
Normal file
304
web/index.html
Normal file
@ -0,0 +1,304 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user