caboose-cms 0.9.60 → 0.9.61

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,538 @@
1
+
2
+ var BlockModalController = ModalController.extend({
3
+
4
+ page_id: false,
5
+ post_id: false,
6
+ block_id: false,
7
+ block: false,
8
+ block_types: false,
9
+ authenticity_token: false,
10
+ new_block_on_init: false,
11
+ assets_path: false,
12
+ block_types: false,
13
+ trapFocus: false,
14
+ before_id: false,
15
+ after_id: false,
16
+ complex_field_types: ['block', 'richtext', 'image', 'file'],
17
+
18
+ init: function(params)
19
+ {
20
+ var that = this;
21
+ for (var i in params)
22
+ that[i] = params[i];
23
+ that.include_assets();
24
+ if (that.new_block_on_init == true)
25
+ that.refresh_block(function() { that.add_block(); });
26
+ else
27
+ that.print();
28
+ },
29
+
30
+ refresh: function(callback)
31
+ {
32
+ var that = this;
33
+ that.refresh_block(function() {
34
+ if (callback) callback();
35
+ });
36
+ },
37
+
38
+ refresh_block: function(callback)
39
+ {
40
+ var that = this;
41
+ $.ajax({
42
+ url: that.block_url() + '/tree',
43
+ type: 'get',
44
+ success: function(arr) {
45
+ that.block = arr[0];
46
+ if (callback) callback();
47
+ }
48
+ });
49
+ },
50
+
51
+ /*****************************************************************************
52
+ Printing
53
+ *****************************************************************************/
54
+
55
+ print: function()
56
+ {
57
+ var that = this;
58
+ if (!that.block)
59
+ {
60
+ var div = $('<div/>')
61
+ .append($('<div/>').attr('id', 'modal_crumbtrail' ))
62
+ .append($('<div/>').attr('id', 'modal_content' ))
63
+ .append($('<div/>').attr('id', 'modal_message' ))
64
+ .append($('<div/>').attr('id', 'modal_controls' ));
65
+ that.modal(div, 800);
66
+ that.refresh(function() { that.print(); });
67
+ return;
68
+ }
69
+
70
+ that.print_content();
71
+ that.print_crumbtrail();
72
+ that.print_controls();
73
+ that.autosize();
74
+ },
75
+
76
+ add_child_link_text: false,
77
+ child_block_header_text: false,
78
+
79
+ print_content: function()
80
+ {
81
+ var that = this;
82
+ var div = $('<div/>').attr('id', 'modal_content');
83
+ if (that.block.block_type.field_type != 'block')
84
+ div.append($('<p/>').append($('<div/>').attr('id', 'block_' + that.block.id + '_value')));
85
+ else
86
+ {
87
+ if (that.block.children.length > 0)
88
+ {
89
+ var separate_children = that.block.block_type.allow_child_blocks && that.block.block_type.default_child_block_type_id;
90
+ var separate_child_id = separate_children ? that.block.block_type.default_child_block_type_id : false;
91
+
92
+ $.each(that.block.children, function(i, b) {
93
+ if (separate_children && b.block_type.id == separate_child_id) return;
94
+ var div_id = 'block_' + b.id + (that.complex_field_types.indexOf(b.block_type.field_type) == -1 ? '_value' : '');
95
+ div.append($('<div/>').css('margin-bottom', '10px').append($('<div/>').attr('id', div_id)));
96
+ });
97
+ if (separate_children)
98
+ {
99
+ if (that.child_block_header_text) div.append($('<h2/>').append(that.child_block_header_text));
100
+ $.each(that.block.children, function(i, b) {
101
+ if (b.block_type.id == separate_child_id)
102
+ {
103
+ var div_id = 'block_' + b.id + (that.complex_field_types.indexOf(b.block_type.field_type) == -1 ? '_value' : '');
104
+ div.append($('<div/>').css('margin-bottom', '10px').append($('<div/>').attr('id', div_id)));
105
+ }
106
+ });
107
+ }
108
+ }
109
+ else
110
+ {
111
+ div.append($('<p/>').append("This block doesn't have any content yet."));
112
+ }
113
+ if (that.block.block_type.allow_child_blocks)
114
+ {
115
+ div.append($('<p/>').css('clear', 'both').append($('<a/>').attr('href', '#').html(that.add_child_link_text ? that.add_child_link_text : "Add a child block!").click(function(e) {
116
+ e.preventDefault();
117
+ that.add_block();
118
+ })));
119
+ }
120
+ }
121
+ $('#modal_content').replaceWith(div);
122
+ that.render_child_blocks();
123
+ that.autosize();
124
+ },
125
+
126
+ print_controls: function()
127
+ {
128
+ var that = this;
129
+ var p = $('<p/>').css('clear', 'both')
130
+ .append($('<input/>').attr('type', 'button').addClass('btn').val('Close').click(function() { that.close(); that.parent_controller.render_blocks(); })).append(' ');
131
+ if (!that.block.name)
132
+ {
133
+ p.append($('<input/>').attr('type', 'button').addClass('btn').val('Delete Block').click(function() { that.delete_block(); })).append(' ');
134
+ p.append($('<input/>').attr('type', 'button').addClass('btn').val('Duplicate Block').click(function() { that.duplicate_block(); })).append(' ');
135
+ }
136
+ p.append($('<input/>').attr('type', 'button').addClass('btn').val('Move Up' ).click(function() { that.move_up(); })).append(' ');
137
+ p.append($('<input/>').attr('type', 'button').addClass('btn').val('Move Down' ).click(function() { that.move_down(); })).append(' ');
138
+ p.append($('<input/>').attr('type', 'button').addClass('btn').val('Advanced' ).attr('id', 'btn_advanced').click(function() { that.print_advanced(); }));
139
+ $('#modal_controls').empty().append(p);
140
+ },
141
+
142
+ before_crumbtrail_click: false,
143
+ print_crumbtrail: function()
144
+ {
145
+ var that = this;
146
+ var crumbs = $('<h2/>').css('margin-top', '0').css('padding-top', '0');
147
+ $.each(that.block.crumbtrail, function(i, h) {
148
+ if (i > 0) crumbs.append(' > ');
149
+ crumbs.append($('<a/>').attr('href', '#').html(h['text']).data('block_id', h['block_id']).click(function(e) {
150
+ e.preventDefault();
151
+ if (that.before_crumbtrail_click) that.before_crumbtrail_click();
152
+ that.parent_controller.edit_block(parseInt($(this).data('block_id')));
153
+ }));
154
+ });
155
+ $('#modal_crumbtrail').empty().append(crumbs);
156
+ },
157
+
158
+ before_print_advanced: false,
159
+ print_advanced: function()
160
+ {
161
+ var that = this;
162
+ if (that.before_print_advanced) that.before_print_advanced();
163
+
164
+ var b = that.block;
165
+ $('#modal_content').empty()
166
+ .append($('<p/>').append($('<div/>').attr('id', 'block_' + b.id + '_block_type_id' )))
167
+ .append($('<p/>').append($('<div/>').attr('id', 'block_' + b.id + '_parent_id' )))
168
+ .append($('<p/>').append($('<div/>').attr('id', 'block_' + b.id + '_constrain' )))
169
+ .append($('<p/>').append($('<div/>').attr('id', 'block_' + b.id + '_full_width' )))
170
+ $('#modal_controls').empty()
171
+ .append($('<p/>')
172
+ .append($('<input/>').attr('type', 'button').addClass('btn').val('Close').click(function() {
173
+ that.close();
174
+ that.parent_controller.render_blocks();
175
+ })).append(' ')
176
+ .append($('<input/>').attr('type', 'button').addClass('btn').val('Back' ).click(function() {
177
+ that.print_content();
178
+ that.print_controls();
179
+ }))
180
+ );
181
+
182
+ var m = new ModelBinder({
183
+ name: 'Block',
184
+ id: b.id,
185
+ update_url: that.block_url(b),
186
+ authenticity_token: that.authenticity_token,
187
+ attributes: [
188
+ { name: 'block_type_id' , nice_name: 'Block type' , type: 'select' , value: b.block_type.id , text: b.block_type.name , width: 400, fixed_placeholder: true, after_update: function() { that.parent_controller.render_blocks(); that.block.block_type.id = this.value; }, after_cancel: function() { that.parent_controller.render_blocks(); }, on_load: function() { that.modal.autosize(); }, options_url: '/admin/block-types/options' },
189
+ { name: 'parent_id' , nice_name: 'Parent ID' , type: 'select' , value: b.parent_id , text: b.parent ? b.parent.title : '' , width: 400, fixed_placeholder: true, after_update: function() { that.parent_controller.render_blocks(); that.block.parent_id = this.value; }, after_cancel: function() { that.parent_controller.render_blocks(); }, on_load: function() { that.modal.autosize(); }, options_url: '/admin/' + (that.page_id ? 'pages/' + that.page_id : 'posts/' + that.post_id) + '/block-options' },
190
+ { name: 'constrain' , nice_name: 'Constrain' , type: 'checkbox' , value: b.constrain ? 1 : 0 , width: 400, fixed_placeholder: true, after_update: function() { that.parent_controller.render_blocks(); that.block.constrain = this.value; }, after_cancel: function() { that.parent_controller.render_blocks(); }, on_load: function() { that.modal.autosize(); }},
191
+ { name: 'full_width' , nice_name: 'Full Width' , type: 'checkbox' , value: b.full_width ? 1 : 0 , width: 400, fixed_placeholder: true, after_update: function() { that.parent_controller.render_blocks(); that.block.full_width = this.value; }, after_cancel: function() { that.parent_controller.render_blocks(); }, on_load: function() { that.modal.autosize(); }}
192
+ ]
193
+ });
194
+ that.autosize();
195
+ },
196
+
197
+ /*****************************************************************************
198
+ Block Rendering
199
+ *****************************************************************************/
200
+
201
+ render_child_blocks: function()
202
+ {
203
+ var that = this;
204
+ if (that.block.block_type.field_type != 'block' && that.block.children.length == 0)
205
+ return;
206
+
207
+ $.each(that.block.children, function(i, b) { that.render_child_block(b); });
208
+ },
209
+
210
+ render_child_block: function(b)
211
+ {
212
+ var that = this;
213
+ if (that.complex_field_types.indexOf(b.block_type.field_type) > -1)
214
+ {
215
+ if (!b.rendered_value)
216
+ {
217
+ $.ajax({
218
+ url: that.block_url(b) + '/render',
219
+ type: 'get',
220
+ success: function(html) {
221
+ $('#the_modal #block_' + b.id).replaceWith(html);
222
+
223
+ var b2 = that.block_with_id(b.id);
224
+ b2.rendered_value = html;
225
+ that.set_clickable(b2);
226
+ that.autosize();
227
+ },
228
+ });
229
+ }
230
+ else
231
+ $('#the_modal #block_' + b.id).replaceWith(b.rendered_value);
232
+ }
233
+ else
234
+ that.set_block_value_editable(b);
235
+ },
236
+
237
+ /****************************************************************************/
238
+
239
+ //set_editable: function()
240
+ //{
241
+ // var that = this;
242
+ // that.set_block_value_editable(that.block);
243
+ // $.each(that.block.children, function(i, b) {
244
+ // that.set_block_value_editable(b);
245
+ // });
246
+ //},
247
+
248
+ set_block_value_editable: function(b)
249
+ {
250
+ var that = this;
251
+ var bt = b.block_type;
252
+ if (bt.field_type == 'block' || bt.field_type == 'richtext')
253
+ return;
254
+ var h = {
255
+ name: 'value',
256
+ type: bt.field_type,
257
+ nice_name: bt.description ? bt.description : bt.name,
258
+ width: bt.width ? bt.width : 780,
259
+ after_update: function() { that.parent_controller.render_blocks(); },
260
+ after_cancel: function() { that.parent_controller.render_blocks(); }
261
+ };
262
+ h['value'] = b.value
263
+ if (bt.field_type == 'checkbox') h['value'] = b.value ? 'true' : 'false';
264
+ //if (bt.field_type == 'image') h['value'] = b.image.tiny_url;
265
+ //if (bt.field_type == 'file') h['value'] = b.file.url;
266
+ if (bt.field_type == 'select') h['text'] = b.value;
267
+ if (bt.height) h['height'] = bt.height;
268
+ if (bt.fixed_placeholder) h['fixed_placeholder'] = bt.fixed_placeholder;
269
+ if (bt.options || bt.options_function) h['options_url'] = '/admin/block-types/' + bt.id + '/options';
270
+ else if (bt.options_url) h['options_url'] = bt.options_url;
271
+ if (bt.field_type == 'file') h['update_url'] = that.block_url(b) + '/file';
272
+ if (bt.field_type == 'image')
273
+ {
274
+ h['update_url'] = that.block_url(b) + '/image'
275
+ h['image_refresh_delay'] = 100;
276
+ }
277
+
278
+ m = new ModelBinder({
279
+ name: 'Block',
280
+ id: b.id,
281
+ update_url: that.block_url(b),
282
+ authenticity_token: that.authenticity_token,
283
+ attributes: [h]
284
+ });
285
+ },
286
+
287
+ set_clickable: function(b)
288
+ {
289
+ var that = this;
290
+
291
+ if (!b)
292
+ {
293
+ $.each(that.block.children, function(i,b) {
294
+ that.set_clickable(b);
295
+ });
296
+ }
297
+
298
+ $('#the_modal #block_' + b.id).attr('onclick','').unbind('click');
299
+ $('#the_modal #block_' + b.id).click(function(e) {
300
+ e.stopPropagation();
301
+ that.parent_controller.edit_block(b.id);
302
+ });
303
+ // var show_mouseover = true;
304
+ // if (b.children && b.children.length > 0)
305
+ // {
306
+ // $.each(b.children, function(i, b2) {
307
+ // if (b2.block_type.id = 34)
308
+ // show_mouseover = false;
309
+ // that.set_clickable(b2);
310
+ // });
311
+ // }
312
+ // if (false && show_mouseover)
313
+ // {
314
+ // $('#the_modal #block_' + b.id).mouseover(function(el) { $('#the_modal #block_' + b.id).addClass( 'block_over'); });
315
+ // $('#the_modal #block_' + b.id).mouseout(function(el) { $('#the_modal #block_' + b.id).removeClass('block_over'); });
316
+ // }
317
+ },
318
+
319
+ /*****************************************************************************
320
+ CRUD
321
+ *****************************************************************************/
322
+
323
+ add_block: function(block_type_id)
324
+ {
325
+ var that = this;
326
+
327
+ that.include_inline_css(
328
+ "@font-face {\n" +
329
+ " font-family: 'icomoon';\n" +
330
+ " src: url('" + that.assets_path + "icomoon.eot?-tne7s4');\n" +
331
+ " src: url('" + that.assets_path + "icomoon.eot?#iefix-tne7s4') format('embedded-opentype'),\n" +
332
+ " url('" + that.assets_path + "icomoon.woff?-tne7s4') format('woff'),\n" +
333
+ " url('" + that.assets_path + "icomoon.ttf?-tne7s4') format('truetype'),\n" +
334
+ " url('" + that.assets_path + "icomoon.svg?-tne7s4#icomoon') format('svg');\n" +
335
+ " font-weight: normal;\n" +
336
+ " font-style: normal;\n" +
337
+ "}\n"
338
+ );
339
+ that.include_assets([
340
+ 'caboose/icomoon_fonts.css',
341
+ 'caboose/admin_new_block.css'
342
+ ]);
343
+
344
+ if (!block_type_id && that.block.block_type.default_child_block_type_id)
345
+ {
346
+ that.add_block(that.block.block_type.default_child_block_type_id);
347
+ return;
348
+ }
349
+ else if (!block_type_id)
350
+ {
351
+ that.new_block_types = false;
352
+ $.ajax({
353
+ url: '/admin/block-types/new-options',
354
+ type: 'get',
355
+ success: function(resp) { that.new_block_types = resp; },
356
+ async: false
357
+ });
358
+
359
+ var icons = $('<div/>').addClass('icons');
360
+ $.each(that.new_block_types, function(i, h) {
361
+ if (h.block_types && h.block_types.length > 0)
362
+ {
363
+ var cat = h.block_type_category;
364
+ icons.append($('<h2/>').click(function(e) { $('#cat_' + cat.id + '_container').slideToggle(); }).append(cat.name));
365
+ var cat_container = $('<div/>').attr('id', 'cat_' + cat.id + '_container');
366
+ $.each(h.block_types, function(j, bt) {
367
+ cat_container.append($('<a/>').attr('href', '#')
368
+ .data('block_type_id', bt.id)
369
+ .click(function(e) { e.preventDefault(); that.add_block($(this).data('block_type_id')); })
370
+ .append($('<span/>').addClass('icon icon-' + bt.icon))
371
+ .append($('<span/>').addClass('name').append(bt.description))
372
+ );
373
+ });
374
+ icons.append(cat_container);
375
+ }
376
+ });
377
+ var div = $('<div/>').append($('<form/>').attr('id', 'new_block_form')
378
+ .submit(function(e) { e.preventDefault(); return false; })
379
+ .append(icons)
380
+ );
381
+ that.modal(div, 780);
382
+ return;
383
+ }
384
+ that.autosize("<p class='loading'>Adding block...</p>");
385
+
386
+ bt = false;
387
+ $.ajax({
388
+ url: '/admin/block-types/' + block_type_id + '/json',
389
+ type: 'get',
390
+ success: function(resp) { bt = resp; },
391
+ async: false
392
+ });
393
+ if (bt.use_js_for_modal)
394
+ that.include_assets('caboose/block_modal_controllers/' + bt.name + '_modal_controller.js');
395
+
396
+ var h = {
397
+ authenticity_token: that.authenticity_token,
398
+ block_type_id: block_type_id
399
+ };
400
+ if (that.before_id ) h['before_id'] = that.before_id;
401
+ if (that.after_id ) h['after_id' ] = that.after_id;
402
+ $.ajax({
403
+ url: that.block_url(),
404
+ type: 'post',
405
+ data: h,
406
+ success: function(resp) {
407
+ if (resp.error) that.autosize("<p class='note error'>" + resp.error + "</p>");
408
+ if (resp.success)
409
+ {
410
+ that.parent_controller.edit_block(resp.new_id);
411
+ that.parent_controller.render_block(resp.parent_id);
412
+ }
413
+ }
414
+ });
415
+ },
416
+
417
+ delete_block: function(confirm)
418
+ {
419
+ var that = this;
420
+ if (!confirm)
421
+ {
422
+ var p = $('<p/>').addClass('caboose_note delete')
423
+ .append("Are you sure you want to delete the block? This can't be undone.<br />")
424
+ .append($('<input/>').attr('type','button').val('Yes').click(function() { that.delete_block(true); })).append(' ')
425
+ .append($('<input/>').attr('type','button').val('No').click(function() { $('#modal_message').empty(); that.autosize();
426
+ }));
427
+ that.autosize(p);
428
+ return;
429
+ }
430
+ that.autosize("<p class='loading'>Deleting block...</p>");
431
+ that.parent_controller.delete_block(that.block.id, true);
432
+ that.close();
433
+ },
434
+
435
+ duplicate_block: function()
436
+ {
437
+ var that = this;
438
+ that.autosize("<p class='loading'>Duplicating...</p>");
439
+ that.parent_controller.duplicate_block(that.block.id);
440
+ that.autosize("<p class='note success'>Duplicated block.</p>");
441
+ },
442
+
443
+ move_up: function()
444
+ {
445
+ var that = this;
446
+ that.autosize("<p class='loading'>Moving up...</p>");
447
+ $.ajax({
448
+ url: that.block_url(that.block) + '/move-up',
449
+ type: 'put',
450
+ success: function(resp) {
451
+ if (resp.error) that.autosize("<p class='note error'>" + resp.error + "</p>");
452
+ if (resp.success)
453
+ {
454
+ that.autosize("<p class='note success'>" + resp.success + "</p>");
455
+ that.parent_controller.render_block(that.block.parent_id);
456
+ }
457
+ }
458
+ });
459
+ },
460
+
461
+ move_down: function()
462
+ {
463
+ var that = this;
464
+ that.autosize("<p class='loading'>Moving down...</p>");
465
+ $.ajax({
466
+ url: that.block_url(that.block) + '/move-down',
467
+ type: 'put',
468
+ success: function(resp) {
469
+ if (resp.error) that.autosize("<p class='note error'>" + resp.error + "</p>");
470
+ if (resp.success)
471
+ {
472
+ that.autosize("<p class='note success'>" + resp.success + "</p>");
473
+ that.parent_controller.render_block(that.block.parent_id);
474
+ }
475
+ }
476
+ });
477
+ },
478
+
479
+ /*****************************************************************************
480
+ Helper methods
481
+ *****************************************************************************/
482
+
483
+ block_with_id: function(block_id, b)
484
+ {
485
+ var that = this;
486
+ if (!b) b = that.block;
487
+ if (b.id == block_id) return b;
488
+
489
+ var the_block = false;
490
+ $.each(b.children, function(i, b2) {
491
+ the_block = that.block_with_id(block_id, b2);
492
+ if (the_block)
493
+ return false;
494
+ });
495
+ return the_block;
496
+ },
497
+
498
+ base_url: function(b)
499
+ {
500
+ var that = this;
501
+ if (!b)
502
+ return '/admin/' + (that.page_id && that.page_id != null ? 'pages/' + that.page_id : 'posts/' + that.post_id) + '/blocks';
503
+ return '/admin/' + (b.page_id && b.page_id != null ? 'pages/' + b.page_id : 'posts/' + b.post_id) + '/blocks';
504
+ },
505
+
506
+ block_url: function(b)
507
+ {
508
+ var that = this;
509
+ if (!b) return that.base_url() + '/' + that.block_id;
510
+ return that.base_url(b) + '/' + b.id;
511
+ },
512
+
513
+ child_block: function(name, b)
514
+ {
515
+ var that = this;
516
+ if (!b) b = that.block;
517
+ var the_block = false;
518
+ $.each(b.children, function(i, b2) {
519
+ if (b2.name == name)
520
+ {
521
+ the_block = b2;
522
+ return false;
523
+ }
524
+ });
525
+ return the_block;
526
+ },
527
+
528
+ child_block_value: function(name, b)
529
+ {
530
+ var that = this;
531
+ var b2 = that.child_block(name, b);
532
+ if (!b2) return false;
533
+ return b2.value;
534
+ },
535
+
536
+ });
537
+
538
+ $(document).trigger('block_modal_controller_loaded');