1
{% extends "base.html" %}
2
3
{% block head %}
4
  <link rel="stylesheet" href="{{url_for('static', filename='css/editor.css')}}">
5
  <title> Editing.. | {{ title }} </title>
6
{% endblock %}
7
8
{% block body %}
9
  <div class="container" id="container">
10
    <div id="header">
11
      <div id="hud">
12
        <span class="pull-right">Howdy! | <a href="{{ url_for('logout') }}">Logout</a></span>
13
      </div>
14
      <div id="notifications"></div>
15
    </div>
16
    <div id="content-container"></div>
17
    <div id="footer"></div>
18
  </div>
19
  <div id="editor-overlay"></div>
20
21
  <script>
22
    // initialize editor
23
    window.M = window.M || {};
24
    M.MenuURL = function() { return "{{ url_for('insertMenu') }}"; };
25
    M.FooterURL = function() { return "{{ url_for('insertFooter') }}"; };
26
    M.HeaderURL = function() { return "{{ url_for('insertHeader') }}"; };
27
    M.PageURL = function() { return "{{ url_for('insertPage') }}"; };
28
    M.PluginUploadURL = function() { return "{{ url_for('uploadPlugin') }}"; };
29
    M.UploadsURL = function() { return "{{ url_for('static', filename='uploads/') }}"; };
30
    M.site_content = {{ content|tojson|safe }};
31
    window.onload = function() {
32
      M.editor.init();
33
    };
34
  </script>
35
{% endblock %}
36
37
{% block scripts %}
38
  <script src="{{url_for('static', filename='js/lib/tinymce/tinymce.min.js')}}"></script>
39
  <script src="{{url_for('static', filename='js/lib/tinymce/jquery.tinymce.min.js')}}"></script>
40
  <script src="{{url_for('static', filename='js/lib/ace/ace.js')}}"></script>
41
  <script src="{{url_for('static', filename='js/mouchak.js')}}"></script>
42
  <script src="{{url_for('static', filename='js/models.js')}}"></script>
43
  <script src="{{url_for('static', filename='js/views.js')}}"></script>
44
  <script src="{{url_for('static', filename='js/editor.js')}}"></script>
45
{% endblock %}
46
47
{% block templates %}
48
49
  <!-- Underscore templates -->
50
  <script type="text/template" id="menu-config-template">
51
    <div class="page">
52
      <div class="menu-config">
53
        <h4> Configure Navigation Menu </h4>
54
55
        <div class="row">
56
          <div class="form-group col-lg-6">
57
            <div class="input-group">
58
              <span class="input-group-addon">
59
                <input id="custom-menu" type="checkbox">
60
              </span>
61
              <span class="input-group-addon"><strong>Custom Menu
62
              </strong></span>
63
            </div>
64
            <span class="help-block">
65
              <small>
66
                activate to write your own custom menu
67
              </small>
68
            </span>
69
          </div>
70
        </div>
71
72
        <div class="row">
73
          <div class="form-group col-lg-12" id="menu-order-wrap">
74
            <div class="input-group">
75
              <span class="input-group-addon"> <strong> Menu Order</strong></span>
76
              <input class="form-control" id="menu-order" type="text"
77
              placeholder="list,page,slugs,for,menu,order" value="<%= menu_order %>">
78
            </div>
79
            <span class="help-block">
80
              <small>csv list of page slugs to come up in the navigation menu
81
                in that order
82
              </small>
83
            </span>
84
          </div>
85
        </div>
86
87
        <div class="menu-options" style="display: none;">
88
          <div class="row">
89
            <div class="form-group col-lg-6">
90
              <div class="input-group">
91
                <span class="input-group-addon"> <strong> Position </strong></span>
92
                <input class="form-control"  id="pos" type="text" placeholder="[left, top]"
93
                value="<%= pos %>">
94
              </div>
95
            </div>
96
          </div>
97
          <div class="row">
98
            <label><strong> HTML for menu: </strong></label>
99
            <div class="ace-mouchak" id="menu"><%= M.escapeHtml(menu) %></div>
100
          </div>
101
        </div>
102
103
      </div>
104
      <div class="clearfix"></div>
105
      <div class="row">
106
        <button id="updateMenu" class="btn btn-primary pull-right update-btn"> Update </button>
107
      </div>
108
      <div class="clearfix"></div>
109
    </div>
110
  </script>
111
112
  <script type="text/template" id="header-config-template">
113
    <div class="page">
114
      <div><h4> Write HTML for your header here </h4></div>
115
      <div id="header-input" class="ace-mouchak">
116
        <%= M.escapeHtml(header) %>
117
      </div>
118
      <div class="row">
119
        <button id="updateHeader" class="btn btn-primary pull-right update-btn"> Update </button>
120
      </div>
121
      <div class="clearfix"></div>
122
    </div>
123
  </script>
124
125
  <script type="text/template" id="footer-config-template">
126
    <div class="page">
127
      <div><h4> Write HTML for your footer here </h4></div>
128
      <div id="footer-input" class="ace-mouchak">
129
        <%= M.escapeHtml(footer) %>
130
      </div>
131
      <div class="row">
132
        <button id="updateFooter" class="btn btn-primary pull-right update-btn"> Update </button>
133
      </div>
134
      <div class="clearfix"></div>
135
    </div>
136
  </script>
137
138
  <script type="text/template" id="page-list-template">
139
    <div id="pagelistview">
140
      <h4> List of Pages </h4>
141
      <div id="pagelist"></div>
142
      <button class="btn btn-primary" id="addPage">Add Page</button>
143
      <hr>
144
      <p> <a href="#" id="header-config"> Header </a> </p>
145
      <p> <a href="#" id="footer-config"> Footer </a> </p>
146
      <p> <a href="#" id="menu-config"> Navigation Menu </a> </p>
147
      <p> <a href="#" id="uploads"> Uploads </a> </p>
148
      <p><a href="{{ url_for('index') }}"> Go to site </a></p>
149
    </div>
150
  </script>
151
152
  <script type="text/template" id="page-list-item-template">
153
    <div class="pagename">
154
      <a class="disp" id="<%= id %>" href="javascript:void(0);"><%= name %></a>
155
      <span class="pull-right">
156
        <a href="javascript:void(0);" class="remove" for="<%= id %>">
157
          <span class="glyphicon glyphicon-trash"></span>
158
        </a>
159
      </span>
160
      <span class="clearfix"></span>
161
    </div>
162
  </script>
163
164
  <script type="text/template" id="page-template">
165
    <div class="page">
166
      <div class="row">
167
        <h4> <strong><%= name %></strong> : Page Details </h4>
168
      </div>
169
      <hr/>
170
      <form class="form-horizontal">
171
        <div class="form-group">
172
          <div class="input-group">
173
            <span class="input-group-addon"> <strong> Slug </strong></span>
174
            <input class="form-control"  id="name" type="text"
175
            placeholder="slug of the page" value="<%= name %>">
176
          </div>
177
          <span class="help-block">
178
            <small>The URL part of the page, as it will appear in the URL</small>
179
          </span>
180
        </div>
181
        <div class="form-group">
182
          <strong> Content </strong>
183
          <div id="content" class="content well">
184
            <%= content %>
185
            <p></p>
186
            <button class="addContent btn btn-sm btn-primary">Add Content</button>
187
          </div>
188
        </div>
189
        <div class="form-group">
190
          <div class="input-group">
191
            <span class="input-group-addon"> <strong>Title</strong> </span>
192
            <input class="form-control"  id="title" type="text" placeholder="title of the page"
193
             value="<%= title %>">
194
          </div>
195
          <span class="help-block">
196
            <small>title of the page</small>
197
          </span>
198
        </div>
199
        <!--div class="form-group">
200
          <div class="input-group">
201
            <span class="input-group-addon"> <strong>Children</strong> </span>
202
            <input class="form-control"  id="children" type="text" placeholder="csv of child pages"
203
            value="<%= children %>">
204
          </div>
205
          <span class="help-block">
206
            <small> leave this blank for now</small>
207
          </span>
208
        </div-->
209
        <div class="form-group">
210
          <div class="input-group">
211
              <span class="input-group-addon">
212
                <input id="showNav" type="checkbox" <%= checked %> >
213
              </span>
214
              <input class="form-control" type="text" value="Show Navigation" disabled>
215
          </div>
216
          <span class="help-block">
217
            <small>Show navigation menu in this page? </small>
218
          </span>
219
        </div>
220
        <button id="updatePage" type="submit" class="btn btn-primary pull-right"> Update </button>
221
        <div class="clearfix"></div>
222
      </form>
223
    </div>
224
  </script>
225
226
  <script type="text/template" id="content-list-template">
227
    <div class="content-item-wrapper">
228
      <span class="content-item" id="content-<%= no %>">
229
        <span class="label label-default"> <%= type %> </span>
230
        <span class="content-snippet">
231
          [ <small> <%= title %>  <%= more %> </small> ]
232
        </span>
233
      </span>
234
      <span class="pull-right">
235
        <a href="javascript:void(0);" class="remove" for="<%=no%>">
236
          <span class="glyphicon glyphicon-trash"></span>
237
        </a>
238
      </span>
239
      <span class="clearfix"></span>
240
    </div>
241
  </script>
242
243
  <script type="text/template" id="content-template">
244
    <div class="contentview">
245
      <form class="form-horizontal">
246
        <div class="row">
247
          <div class="form-group col-lg-6">
248
            <label><b>Type</b></label>
249
            <select class="form-control">
250
              <% _.each(M.contentTypes, function(type) { %>
251
                <option><%= type %></option>
252
                <%  }); %>
253
            </select>
254
          </div>
255
        </div>
256
        <div class="row">
257
          <div class="form-group col-lg-6">
258
            <div class="input-group">
259
              <span class="input-group-addon"> <b>Title</b> </span>
260
              <input class="form-control"  type="text" placeholder="title of the content" value="<%=
261
              title %>" m-data-target="title">
262
            </div>
263
          </div>
264
        </div>
265
        <div class="row">
266
          <div class="form-group col-lg-6">
267
            <div class="input-group">
268
              <span class="input-group-addon"> <strong>Tags</strong> </span>
269
              <input class="form-control"  type="text" placeholder="csv of tags for this content"
270
              value="<%= tags %>" m-data-target="tags">
271
            </div>
272
          </div>
273
        </div>
274
      </form>
275
      <div class="row">
276
        <div id="specific-content"></div>
277
      </div>
278
      <div class="row">
279
        <button class="btn btn-primary" id="done">Done</button>
280
        <button class="btn btn-default" id="back">Back</button>
281
        <!--button class="btn btn-primary" id="updateContent">Update</button-->
282
      </div>
283
    </div>
284
  </script>
285
286
  <script type="text/template" id="map-template">
287
    <div class="data">
288
      <div class="row">
289
        <div class="form-group col-lg-6">
290
          <div class="input-group">
291
            <span class="input-group-addon"><strong>Tile Provider URL</strong></span>
292
            <input class="form-control" type="text" placeholder="http://{s}.tile.cloudmade.com/<API_KEY>/997/256/{z}/{x}/{y}.png" value="<%= tileLayer %>"
293
            m-data-target="tileLayer">
294
          </div>
295
        </div>
296
      </div>
297
      <div class="row">
298
        <div class="form-group col-lg-6">
299
          <div class="input-group">
300
            <span class="input-group-addon"><strong>Shapefile</strong></span>
301
            <input class="form-control" type="text" placeholder="" value="<%= shp %>"
302
            m-data-target="shp">
303
          </div>
304
        </div>
305
      </div>
306
      <div class="preview"></div>
307
    </div>
308
  </script>
309
310
311
  <script type="text/template" id="media-template">
312
    <div class="data">
313
      <div class="form-group col-lg-6">
314
        <div class="input-group">
315
          <span class="input-group-addon"><strong>path to file</strong></span>
316
          <input class="form-control" type="text" placeholder="src" value="<%= src %>"
317
          m-data-target="src">
318
        </div>
319
      </div>
320
      <div class="preview"></div>
321
    </div>
322
  </script>
323
324
  <script type="text/template" id="plugin-template">
325
    <div class="data">
326
      <!--div class="row">
327
        <div class="form-group col-lg-6">
328
          <div class="input-group">
329
            <span class="input-group-addon"><strong>path to file</strong></span>
330
            <input class="form-control" type="text" placeholder="src" value="<%= src %>"
331
            m-data-target="src">
332
          </div>
333
        </div>
334
      </div-->
335
      <% if(!src) { %>
336
        <div class="row">
337
          <div class="form-group col-lg-6">
338
            <form id="plugin-upload-form" action="" method="post" enctype="multipart/form-data">
339
              <input type="file" name="plugin-file" id="select-plugin">
340
              <input type="button" id="upload-plugin" class="btn btn-info" value="Upload Plugin">
341
            </form>
342
          </div>
343
        </div>
344
        <div class="row">
345
          <div class="form-group col-lg-6">
346
            <button type="button" class="btn btn-info" id="create-plugin">Create a new plugin</button>
347
          </div>
348
        </div>
349
      <% } %>
350
      <div class="row">
351
        <div class="form-group col-lg-6">
352
          <div class="input-group">
353
            <span class="input-group-addon"><strong>callback</strong></span>
354
            <input class="form-control" type="text" placeholder=
355
            "callback function for js plugin" value="<%= callback %>"
356
            m-data-target="callback">
357
          </div>
358
        </div>
359
      </div>
360
      <% if(src) { %>
361
        <div class="ace-mouchak" id="plugin-edit"></div>
362
      <% } %>
363
      <div class="preview"></div>
364
    </div>
365
  </script>
366
367
  <script type="text/template" id="text-template">
368
    <div class="data">
369
      <div class="edit-type-wrap">
370
        <div class="row">
371
          <b> Content </b>
372
        </div>
373
        <div class="row">
374
          <div class="col-lg-4">
375
            <!-- code vs wysiwyg switch -->
376
            <div class="btn-group" id="edit-type">
377
              <button type="button" class="btn btn-default" value="wysiwyg">WYSIWYG</button>
378
              <button type="button" class="btn btn-default" value="code">Code</button>
379
            </div>
380
            <p class="help-block">
381
              <span class="label label-info">Heads Up!</span> 
382
              <span><small><b> Switch editing mode </b></small></span>
383
            </p>
384
          </div>
385
        </div>
386
      </div>
387
      <div class="row">
388
        <% if(wysiwyg === true) { %>
389
        <textarea id="edit" m-data-target="data">
390
          <%= data %>
391
        </textarea>
392
        <% } else { %>
393
        <div id="code-edit" class="ace-mouchak" m-data-target="data">
394
          <%= M.escapeHtml(data) %>
395
        </div>
396
        <% } %>
397
      </div>
398
    </div>
399
  </script>
400
401
  <!-- notification templates -->
402
  <script type="text/template" id="notif-template">
403
    <div class="alert alert-<%= type %>">
404
      <button type="button" class="close" data-dismiss="alert">&times;</button>
405
      <h4> <%= title %> </h4>
406
      <%= msg %>
407
    </div>
408
  </script>
409
410
  <script type="text/template" id="uploads-template">
411
    <div class="page">
412
      <div><h4> All your uploads </h4></div>
413
      <div id="uploads-list" class="well">
414
      </div>
415
      <hr>
416
      <div class="row">
417
        <div> <h4> New Upload </h4> </div>
418
        <form id="file-upload-form" action="" method="post" enctype="multipart/form-data">
419
          <input type="file" name="upload-file" id="select-file">
420
          <input type="button" id="upload-new-file" class="btn btn-sm btn-primary update-btn" value="Upload File">
421
        </form>
422
      </div>
423
      <div class="clearfix"></div>
424
    </div>
425
  </script>
426
427
  <script type="text/template" id="uploaded-item-template">
428
    <div class="uploaded-item row">
429
      <span> &lt;icon here&gt; </span>
430
      <!--span class="uploaded-item-name"> <%= filename %> </span-->
431
      <span class="uploaded-item-path">
432
        <a href="<%= M.UploadsURL() + filename %>">
433
          <%= M.UploadsURL() + filename %>
434
        </a>
435
      </span>
436
      <span class="pull-right">
437
        <a href="javascript:void(0);" class="remove" for="<%= filename %>">
438
          <span class="glyphicon glyphicon-trash"></span>
439
        </a>
440
      </span>
441
      <span class="clearfix"></span>
442
    </div>
443
  </script>
444
445
{% endblock %}