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