暂无描述

workspace.html 14KB

    {{ 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 &amp; drop your files here!</p> </div> <p id="upload-not-available" class="hidden"> <label> Drag &amp; drop is not supported, but you can still upload via:<br /> <input type="file" /> </label> </p> <p id="upload-no-filereader">Field API &amp; 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 }}