<!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>