|
{{ define "title" }}Loop: Workspace{{ end }}
{{ define "styles" }}
<style>
pre#editor {
height: 100vh;
}
iframe#view {
height: 100vh;
borders: none;
}
div#welcome {
height: 100vh;
}
div#welcome h5 {
width: 100%;
}
div#holder {
border: 2px dashed #ccc;
/*width: 300px;*/
min-height: 110px;
margin: 20px auto;
}
.select-wrapper {
z-index: 2;
}
div#holder.hover {
border: 2px dashed #0c0;
}
div#holder p {
margin: 10px;
font-size: 14px;
}
progress {
width: 100%;
}
progress:after {
content: '%';
}
.fail {
background: #c00;
padding: 2px;
color: #fff;
}
.hidden {
display: none !important;
}
#editor-actions a.btn-flat {
padding: 0 0.5rem;
}
.fixed-action-btn ul button.btn-floating {
opacity: 0;
}
.fullscreen {
width: 100%;
height: 100vh;
}
</style>
{{ end }}
{{ define "content" }}
<div class="row">
<div id="left-pane" class="col s4 m4 l2">
<div class="row">
<div class="col s12">
<label>Workspace</label>
<select>
<option value="" disabled>Select a directory</option>
<option value="Personal" selected>Personal</option>
</select>
</div>
<div class="col s12 center">
<a class="waves-effect waves-light btn modal-trigger" href="#modal-new-directory">New Content</a>
</div>
</div>
<div class="row">
<div class="col s12" style="overflow-y: auto;">
<ul class="collection">
{{ range $d := .Directories }}
<li class="collection-item avatar dismissable">
<i class="mdi-file-folder circle"></i>
<span class="title"><a href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a></span>
<p><!--(3 files)--></p>
<a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
</li>
{{ end }}
</ul>
</div>
</div>
</div>
<div id="workarea" class="col s8 m8 l10">
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a id="create" class="btn-floating btn-large red" title="Edit">
<i class="large mdi-editor-mode-edit"></i>
</a>
<ul>
<li><a id="delete" class="btn-floating red" title="Delete"><i class="large mdi-action-delete"></i></a></li>
<li><a id="save" class="btn-floating amber" title="Save"><i class="large mdi-content-save"></i></a></li>
<li><a id="publish" class="btn-floating green" title="Publish"><i class="large mdi-editor-publish"></i></a></li>
<li><a id="upload" class="btn-floating blue modal-trigger" href="#upload-area" title="Attach file"><i class="large mdi-editor-attach-file"></i></a></li>
</ul>
</div>
{{ if .Title }}
<div id="zoom" class="row">
<div id="editor-actions" class="col s12 m12 l12">
<a id="fullscreen" class="waves-effect waves-teal btn-flat right" title="Fullscreen">
<i class="mdi-navigation-fullscreen left hide-on-med-and-down"></i>
<i class="mdi-navigation-fullscreen hide-on-large-only"></i>
<span class="hide-on-med-and-down">Focus Mode</span>
</a>
<a id="preview" class="waves-effect waves-teal btn-flat right" title="Toggle Mode">
<i class="mdi-action-cached left hide-on-med-and-down"></i>
<i class="mdi-action-cached hide-on-large-only"></i>
<span class="hide-on-med-and-down">Preview</span>
</a>
</div>
<div class="col s12 m12 l12"><h4>{{ .Title }}</h4></div>
<pre id="editor" class="col s12 m12 l12">{{ .Content }}</pre>
<iframe id="view" class="col s12 m12 l12" style="display: none;" frameBorder="0" seamless="seamless" src="/{{ .Username }}/edit/{{ .Title | urlquery }}/preview"></iframe>
</div>
{{ else }}
<div class="row">
<div id="welcome" class="col s12 m12 l12 valign-wrapper">
<h5 class="valign center">Welcome!</h5>
</div>
</div>
{{ end }}
</div>
</div>
<div class="row">
<div class="col s12">
<div id="upload-area" class="modal bottom-sheet">
<div class="modal-content">
<h4>Upload</h4>
<div id="holder" class="valign-wrapper">
<p class="valign center" style="width: 100%;">Drag & drop your files here!</p>
</div>
<p id="upload-not-available" class="hidden">
<label>
Drag & drop is not supported, but you can still upload via:<br />
<input type="file" />
</label>
</p>
<p id="upload-no-filereader">Field API & FileReader API not supported</p>
<p id="upload-no-formdata">XHR2's FormData is not supported</p>
<p id="upload-no-progress">XHR2's upload progress isn't supported</p>
<p>Upload progress: <progress id="upload-progress" min="0" max="100" value="0">0</progress></p>
</div>
</div>
</div>
</div>
<div id="modal-new-directory" class="modal">
<div class="modal-content">
<h4>New Content</h4>
<form id="new-directory" class="col s12" method="post" action="/{{ .Username }}/edit/">
<div class="row">
<div class="input-field col s12">
<input id="title" name="title" type="text" class="validate">
<label for="title">Document Title</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<a id="new" href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Create</a>
<a href="#" class="modal-action modal-close waves-effect waves-red btn-flat">Cancel</a>
</div>
</div>
{{ end }}
{{ define "scripts" }}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.8/ace.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.8/theme-chrome.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.8/mode-markdown.js"></script>
<script type="text/javascript">
(function () {
if (document.getElementById('editor')) {
var editor = ace.edit('editor');
editor.setTheme('ace/theme/chrome');
editor.getSession().setMode('ace/mode/markdown');
}
})();
(function () {
var holder = document.getElementById('holder');
var tests = {
filereader: typeof FileReader != 'undefined',
dnd: 'draggable' in document.createElement('span'),
formdata: !!window.FormData,
progress: "upload" in new XMLHttpRequest
};
var support = {
filereader: document.getElementById('upload-no-filereader'),
formdata: document.getElementById('upload-no-formdata'),
progress: document.getElementById('upload-no-progress')
};
var acceptedTypes = {
'image/png': true,
'image/jpeg': true,
'image/gif': true
};
var progress = document.getElementById('upload-progress');
var fileupload = document.getElementById('upload');
'filereader formdata progress'.split(' ').forEach(function (api) {
if (tests[api] === false) {
support[api].className = 'fail';
} else {
support[api].className = 'hidden';
}
});
function readfiles(files) {
var formData = tests.formdata ? new FormData() : null;
for (var i = 0; i < files.length; i++) {
if (tests.formdata) {
formData.append('file', files[i]);
}
}
if (tests.formdata) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/');
xhr.onload = function () {
progress.value = progress.innerHTML = 100;
};
if (tests.progress) {
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var complete = (event.loaded / event.total * 100 | 0);
progress.value = progress.innerHTML = complete;
}
}
}
xhr.send(formData);
}
if (tests.dnd) {
holder.ondragover = function () {
this.className = 'hover';
return false;
};
holder.ondragend = function () {
this.className = '';
return false;
};
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
readfiles(e.dataTransfer.files);
};
} else {
fileupload.className = 'hidden';
fileupload.querySelector('input').onchange = function () {
readfiles(this.files);
};
}
}
})();
$(function () {
function toggleFullScreen() {
var zoom = document.getElementById('zoom');
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (document.documentElement.requestFullscreen) {
zoom.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
zoom.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
zoom.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
zoom.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
$('select').material_select();
$('.modal-trigger').leanModal();
$('#fullscreen').click(function (event) {
event.preventDefault();
$('#zoom').toggleClass('fullscreen');
toggleFullScreen();
});
$('#preview').click(function (event) {
event.preventDefault();
var editor = ace.edit('editor');
if (!$('#view').is(':visible')) {
$.ajax({
url: window.location.href,
method: 'put',
data: {
'contents': editor.getValue()
}
})
.done(function () {
$('#view').attr('src', $('#view').attr('src'));
$('#editor, #view').toggle();
});
} else {
$('#editor, #view').toggle();
}
});
$('a#delete').click(function (event) {
event.preventDefault();
var title = $('input#title').val();
$.ajax({
url: window.location.href,
method: 'delete'
})
.done(function () {
window.location.href = '/{{ .Username }}';
});
});
$('form#new-directory').submit(function (event) {
var title = $('input#title').val();
var action = $(this).attr('action');
$(this).attr('action', action + encodeURIComponent(title));
return true;
});
$('a#new').click(function (event) {
event.preventDefault();
$('form#new-directory').submit();
return false;
});
$('a#save').click(function (event) {
event.preventDefault();
var editor = ace.edit('editor');
$.ajax({
url: window.location.href,
method: 'put',
data: {
'contents': editor.getValue()
}
});
});
});
</script>
{{ end }}
|
