|
{{ define "title" }}Loop Workspace{{ end }}
{{ define "styles" }}
<style>
pre#editor {
height: 100vh;
}
div#holder {
border: 2px dashed #ccc;
/*width: 300px;*/
min-height: 110px;
margin: 20px auto;
}
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;
}
</style>
{{ end }}
{{ define "content" }}
<div id="toolbar" class="row">
<div class="col s12 center">
<!-- Toolbar of stuffs -->
<button id="fullscreen" class="btn waves-effect waves-light">
<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>
</button>
<button id="save" class="btn waves-effect waves-light">
<i class="mdi-content-save left hide-on-med-and-down"></i>
<i class="mdi-content-save hide-on-large-only"></i>
<span class="hide-on-med-and-down">Save</span>
</button>
<button id="create" class="btn waves-effect waves-light">
<i class="mdi-content-create left hide-on-med-and-down"></i>
<i class="mdi-content-create hide-on-large-only"></i>
<span class="hide-on-med-and-down">Create</span>
</button>
<button id="publish" class="btn waves-effect waves-light">
<i class="mdi-editor-publish left hide-on-med-and-down"></i>
<i class="mdi-editor-publish hide-on-large-only"></i>
<span class="hide-on-med-and-down">Publish</span>
</button>
<a id="upload" class="btn waves-effect waves-light modal-trigger" href="#upload-area">
<i class="mdi-file-file-upload left hide-on-med-and-down"></i>
<i class="mdi-file-file-upload hide-on-large-only"></i>
<span class="hide-on-med-and-down">Upload</span>
</a>
</div>
</div>
<div class="row">
<div id="left-pane" class="col s4 m4 l2">
<!-- Directory of stuffs -->
<div class="row">
<div class="col s12">
<label>Workspace</label>
<select>
<option value="" disabled>Select a directory</option>
<option value="Persona" selected>Personal</option>
<option value="Blog">Blog</option>
</select>
</div>
</div>
<div class="row">
<div class="col s12">
<ul class="collection">
<li class="collection-item avatar dismissable">
<i class="mdi-file-folder circle"></i>
<span class="title">Title</span>
<p>(3 files)</p>
<a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
</li>
<li class="collection-item avatar dismissable">
<i class="mdi-file-folder circle"></i>
<span class="title">Title</span>
<p></p>
<a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
</li>
<li class="collection-item avatar dismissable">
<i class="mdi-file-folder circle"></i>
<span class="title">Title</span>
<p></p>
<a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
</li>
<li class="collection-item avatar dismissable">
<i class="mdi-file-folder circle"></i>
<span class="title">Title</span>
<p>(7 files)</p>
<a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div id="workarea" class="col s8 m8 l10">
<div class="row">
<pre id="editor" class="col s12 m12 l12"></pre>
<!--<div id="preview" class="col s12 m12 l6"></div>-->
</div>
</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>
{{ 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 () {
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 editorElement = document.getElementById('editor');
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullScreenElement && !document.msFullscreenElement) {
if (document.documentElement.requestFullscreen) {
editorElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
editorElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
editorElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
editorElement.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();
$('button#fullscreen').click(function (event) {
event.preventDefault();
toggleFullScreen();
});
});
</script>
{{ end }}
|
