瀏覽代碼

workspace elements placed roughly

bmallred 9 年之前
父節點
當前提交
c1e4f6d8a3
共有 4 個文件被更改,包括 251 次插入10 次删除
  1. 2 1
      .gitignore
  2. 2 0
      handlers/content.go
  3. 2 2
      html/loop.html
  4. 245 7
      html/workspace.html

+ 2 - 1
.gitignore

@ -19,4 +19,5 @@ _cgo_export.*
19 19
20 20
_testmain.go
21 21
22
*.exe
22
*.exe
23
loop

+ 2 - 0
handlers/content.go

@ -2,6 +2,7 @@ package handlers
2 2
3 3
import (
4 4
	"html/template"
5
	"log"
5 6
	"net/http"
6 7
)
7 8
@ -13,6 +14,7 @@ var (
13 14
)
14 15
15 16
func ContentHandler(w http.ResponseWriter, r *http.Request) {
17
	log.Println("Serving template for the content handler")
16 18
	if err := templateWorkspace.Execute(w, nil); err != nil {
17 19
		http.Error(w, err.Error(), http.StatusInternalServerError)
18 20
	}

+ 2 - 2
html/loop.html

@ -9,14 +9,14 @@
9 9
    <title>{{ template "title" . }}</title>
10 10
11 11
    <link rel="shortcut icon" type="image/png" href="">
12
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css">
12
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
13 13
    {{ template "styles" . }}
14 14
</head>
15 15
<body>
16 16
    {{ template "content" . }}
17 17
18 18
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
19
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
19
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
20 20
    {{ template "scripts" . }}
21 21
</body>
22 22
</html>

+ 245 - 7
html/workspace.html

@ -1,18 +1,142 @@
1 1
{{ define "title" }}Loop Workspace{{ end }}
2
{{ define "styles" }}{{ end }}
2
{{ define "styles" }}
3
    <style>
4
        pre#editor {
5
            height: 100vh;
6
        }
7
8
        div#holder {
9
            border: 2px dashed #ccc;
10
            /*width: 300px;*/
11
            min-height: 110px;
12
            margin: 20px auto;
13
        }
14
        div#holder.hover {
15
            border: 2px dashed #0c0;
16
        }
17
        div#holder p {
18
            margin: 10px;
19
            font-size: 14px;
20
        }
21
        progress {
22
            width: 100%;
23
        }
24
        progress:after {
25
            content: '%';
26
        }
27
        .fail {
28
            background: #c00;
29
            padding: 2px;
30
            color: #fff;
31
        }
32
        .hidden {
33
            display: none !important;
34
        }
35
    </style>
36
{{ end }}
3 37
{{ define "content" }}
4
    <div class="row">
5
        <div class="col-sm-12">
38
    <div id="toolbar" class="row">
39
        <div class="col s12 center">
6 40
            <!-- Toolbar of stuffs -->
41
            <button id="fullscreen" class="btn waves-effect waves-light">
42
                <i class="mdi-navigation-fullscreen left hide-on-med-and-down"></i>
43
                <i class="mdi-navigation-fullscreen hide-on-large-only"></i>
44
                <span class="hide-on-med-and-down">Focus Mode</span>
45
            </button>
46
            <button id="save" class="btn waves-effect waves-light">
47
                <i class="mdi-content-save left hide-on-med-and-down"></i>
48
                <i class="mdi-content-save hide-on-large-only"></i>
49
                <span class="hide-on-med-and-down">Save</span>
50
            </button>
51
            <button id="create" class="btn waves-effect waves-light">
52
                <i class="mdi-content-create left hide-on-med-and-down"></i>
53
                <i class="mdi-content-create hide-on-large-only"></i>
54
                <span class="hide-on-med-and-down">Create</span>
55
            </button>
56
            <button id="publish" class="btn waves-effect waves-light">
57
                <i class="mdi-editor-publish left hide-on-med-and-down"></i>
58
                <i class="mdi-editor-publish hide-on-large-only"></i>
59
                <span class="hide-on-med-and-down">Publish</span>
60
            </button>
61
            <a id="upload" class="btn waves-effect waves-light modal-trigger" href="#upload-area">
62
                <i class="mdi-file-file-upload left hide-on-med-and-down"></i>
63
                <i class="mdi-file-file-upload hide-on-large-only"></i>
64
                <span class="hide-on-med-and-down">Upload</span>
65
            </a>
7 66
        </div>
8 67
    </div>
9 68
    <div class="row">
10
        <div class="col-sm-4">
69
        <div id="left-pane" class="col s4 m4 l2">
11 70
            <!-- Directory of stuffs -->
71
            <div class="row">
72
                <div class="col s12">
73
                    <label>Workspace</label>
74
                    <select>
75
                        <option value="" disabled>Select a directory</option>
76
                        <option value="Persona" selected>Personal</option>
77
                        <option value="Blog">Blog</option>
78
                    </select>
79
                </div>
80
            </div>
81
            <div class="row">
82
                <div class="col s12">
83
                    <ul class="collection">
84
                        <li class="collection-item avatar dismissable">
85
                            <i class="mdi-file-folder circle"></i>
86
                            <span class="title">Title</span>
87
                            <p>(3 files)</p>
88
                            <a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
89
                        </li>
90
                        <li class="collection-item avatar dismissable">
91
                            <i class="mdi-file-folder circle"></i>
92
                            <span class="title">Title</span>
93
                            <p></p>
94
                            <a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
95
                        </li>
96
                        <li class="collection-item avatar dismissable">
97
                            <i class="mdi-file-folder circle"></i>
98
                            <span class="title">Title</span>
99
                            <p></p>
100
                            <a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
101
                        </li>
102
                        <li class="collection-item avatar dismissable">
103
                            <i class="mdi-file-folder circle"></i>
104
                            <span class="title">Title</span>
105
                            <p>(7 files)</p>
106
                            <a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
107
                        </li>
108
                    </ul>
109
                </div>
110
            </div>
12 111
        </div>
13
        <div class="col-sm-8">
14
            <!-- Editor and main content -->
15
            <pre id="editor"></pre>
112
        <div id="workarea" class="col s8 m8 l10">
113
            <div class="row">
114
                <pre id="editor" class="col s12 m12 l12"></pre>
115
                <!--<div id="preview" class="col s12 m12 l6"></div>-->
116
            </div>
117
        </div>
118
    </div>
119
    <div class="row">
120
        <div class="col s12">
121
            <div id="upload-area" class="modal bottom-sheet">
122
                <div class="modal-content">
123
                    <h4>Upload</h4>
124
125
                    <div id="holder" class="valign-wrapper">
126
                        <p class="valign center" style="width: 100%;">Drag &amp; drop your files here!</p>
127
                    </div>
128
                    <p id="upload-not-available" class="hidden">
129
                        <label>
130
                            Drag &amp; drop is not supported, but you can still upload via:<br />
131
                            <input type="file" />
132
                        </label>
133
                    </p>
134
                    <p id="upload-no-filereader">Field API &amp; FileReader API not supported</p>
135
                    <p id="upload-no-formdata">XHR2's FormData is not supported</p>
136
                    <p id="upload-no-progress">XHR2's upload progress isn't supported</p>
137
                    <p>Upload progress: <progress id="upload-progress" min="0" max="100" value="0">0</progress></p>
138
                </div>
139
            </div>
16 140
        </div>
17 141
    </div>
18 142
{{ end }}
@ -26,5 +150,119 @@
26 150
            editor.setTheme('ace/theme/chrome');
27 151
            editor.getSession().setMode('ace/mode/markdown');
28 152
        })();
153
154
        (function () {
155
            var holder = document.getElementById('holder');
156
            var tests = {
157
                filereader: typeof FileReader != 'undefined',
158
                dnd: 'draggable' in document.createElement('span'),
159
                formdata: !!window.FormData,
160
                progress: "upload" in new XMLHttpRequest
161
            };
162
            var support = {
163
                filereader: document.getElementById('upload-no-filereader'),
164
                formdata: document.getElementById('upload-no-formdata'),
165
                progress: document.getElementById('upload-no-progress')
166
            };
167
            var acceptedTypes = {
168
                'image/png': true,
169
                'image/jpeg': true,
170
                'image/gif': true
171
            };
172
            var progress = document.getElementById('upload-progress');
173
            var fileupload = document.getElementById('upload');
174
175
            'filereader formdata progress'.split(' ').forEach(function (api) {
176
                if (tests[api] === false) {
177
                    support[api].className = 'fail';
178
                } else {
179
                    support[api].className = 'hidden';
180
                }
181
            });
182
183
            function readfiles(files) {
184
                var formData = tests.formdata ? new FormData() : null;
185
                for (var i = 0; i < files.length; i++) {
186
                    if (tests.formdata) {
187
                        formData.append('file', files[i]);
188
                    }
189
                }
190
191
                if (tests.formdata) {
192
                    var xhr = new XMLHttpRequest();
193
                    xhr.open('POST', '/');
194
                    xhr.onload = function () {
195
                        progress.value = progress.innerHTML = 100;
196
                    };
197
198
                    if (tests.progress) {
199
                        xhr.upload.onprogress = function (event) {
200
                            if (event.lengthComputable) {
201
                                var complete = (event.loaded / event.total * 100 | 0);
202
                                progress.value = progress.innerHTML = complete;
203
                            }
204
                        }
205
                    }
206
207
                    xhr.send(formData);
208
                }
209
210
                if (tests.dnd) {
211
                    holder.ondragover = function () {
212
                        this.className = 'hover';
213
                        return false;
214
                    };
215
                    holder.ondragend = function () {
216
                        this.className = '';
217
                        return false;
218
                    };
219
                    holder.ondrop = function (e) {
220
                        this.className = '';
221
                        e.preventDefault();
222
                        readfiles(e.dataTransfer.files);
223
                    };
224
                } else {
225
                    fileupload.className = 'hidden';
226
                    fileupload.querySelector('input').onchange = function () {
227
                        readfiles(this.files);
228
                    };
229
                }
230
            }
231
        })();
232
233
        $(function () {
234
            function toggleFullScreen() {
235
                var editorElement = document.getElementById('editor');
236
237
                if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullScreenElement && !document.msFullscreenElement) {
238
                    if (document.documentElement.requestFullscreen) {
239
                        editorElement.requestFullscreen();
240
                    } else if (document.documentElement.msRequestFullscreen) {
241
                        editorElement.msRequestFullscreen();
242
                    } else if (document.documentElement.mozRequestFullScreen) {
243
                        editorElement.mozRequestFullScreen();
244
                    } else if (document.documentElement.webkitRequestFullscreen) {
245
                        editorElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
246
                    }
247
                } else {
248
                    if (document.exitFullscreen) {
249
                        document.exitFullscreen();
250
                    } else if (document.msExitFullscreen) {
251
                        document.msExitFullscreen();
252
                    } else if (document.mozCancelFullScreen) {
253
                        document.mozCancelFullScreen();
254
                    } else if (document.webkitExitFullscreen) {
255
                        document.webkitExitFullscreen();
256
                    }
257
                }
258
            }
259
260
            $('select').material_select();
261
            $('.modal-trigger').leanModal();
262
            $('button#fullscreen').click(function (event) {
263
                event.preventDefault();
264
                toggleFullScreen();
265
            });
266
        });
29 267
    </script>
30 268
{{ end }}