Commit 529a151564647cef24d5bf3dd5ebd210b3f53ebe

Autohide notifications

  - Added a separate Notification View to handle notifications, which is much
    cleaner than hardcoding bunch of template calls here and there.
  - Notification View now autohides notifs after a certain delay
mouchak/static/css/editor.css
(1 / 0)
  
7272 position: absolute;
7373 left: 33%;
7474 top: 0px;
75 text-align: center;
7576}
7677.ace-mouchak {
7778 position: relative;
mouchak/static/js/editor.js
(59 / 39)
  
6060 return false;
6161 }
6262 var id = $(event.target).parent('.remove').attr('for');
63 var success_template = _.template($('#success-notif').html());
64 var fail_template = _.template($('#fail-notif').html());
6563 //console.log('remove', id);
6664 M.pages.get(id).destroy({
6765 success: function(model, response) {
……
7070 if(M.editor.pageview) {
7171 M.editor.pageview.remove();
7272 }
73 $('#notifications').html(success_template({
74 title: 'Deleted',
75 msg: ''
76 }));
73 M.editor.notifs.show('success', 'Deleted', '');
7774 },
7875 error: function(model, xhr) {
7976 M.editor.hideOverlay();
8077 console.log('failed', model, xhr);
81 $('#notifications').html(fail_template({
82 title: 'Error',
83 msg: 'Failed to delete. Please try again.'
84 }));
78 var msg = 'Failed to delete. Please try again.';
79 M.editor.notifs.show('fail', 'Error!', msg);
8580 }
8681 });
8782 M.editor.showOverlay();
……
232232 return false;
233233 },
234234 updatePage: function() {
235 var success_template = _.template($('#success-notif').html());
236 var fail_template = _.template($('#fail-notif').html());
237
238235 var name = $('#name').val();
239236 var title = $('#title').val();
240237 var children = $('#children').val();
……
261261 //model.id = response.page.id;
262262 //console.log(model);
263263 M.pagelistview.render();
264 $('#notifications').html(success_template({
265 title: 'Saved',
266 msg: ''
267 }));
264 M.editor.notifs.show('success', 'Saved', '');
268265 },
269266 error: function(model, xhr) {
270267 M.editor.hideOverlay();
271268 model.set(response.page);
272269 console.log('failed', model, xhr);
273 $('#notifications').html(fail_template({
274 title: 'Error!',
275 msg: 'Something went wrong, and the page could not be updated'
276 }));
270 var msg = 'Something went wrong, and the page could not be updated';
271 M.editor.notifs.show('fail', 'Error!', msg);
277272 }
278273 });
279274 M.editor.showOverlay();
……
348348 }));
349349 if(this.model.get('src')) {
350350 var plugin_type = this.model.get('plugin_type');
351 plugin_type = (plugin_type === 'js') ? 'javascript': 'css';
351 plugin_type = (plugin_type === 'js') ? 'javascript' : 'css';
352352 this.model.getCode(function(data) {
353353 $('#plugin-edit').html(escapeHtml(data));
354354 M.editor.code.init('plugin-edit', plugin_type);
……
513513 },
514514 saveMenu: function() {
515515 //console.log('saving menu..');
516 var success_template = _.template($('#success-notif').html());
517 var fail_template = _.template($('#fail-notif').html());
518
519516 if($('#custom-menu').is(':checked')) {
520517 var html = $('#menu').val().trim() || '';
521518 this.model.set({'customMenu': true, 'html': html});
……
526526 success: function(model, response) {
527527 //console.log(model, response);
528528 M.editor.hideOverlay();
529 $('#notifications').html(success_template({
530 title: 'Saved',
531 msg: ''
532 }));
529 M.editor.notifs.show('success', 'Saved', '');
533530
534531 },
535532 error: function(xhr, response) {
536533 M.editor.hideOverlay();
537 $('#notifications').html(fail_template({
538 title: 'Error!',
539 msg: 'Something went wrong, and the page could not be updated'
540 }));
534 var msg = 'Something went wrong, and the page could not be updated';
535 M.editor.notifs.show('fail', 'Error!', msg);
541536 }
542537 });
543538 //alert('end of save menu');
……
540540 }
541541 });
542542
543 /* Notification view */
544 var NotificationView = Backbone.View.extend({
545 initialize: function(opts) {
546 try {
547 this.el = opts.el;
548 }
549 catch(e) {
550 throw new Error(this.usage());
551 return;
552 }
553 this.template = _.template($('#notif-template').html());
554 this.el = opts.el;
555 this.delayTime = opts.delay || 3000; // a default delay value
556 },
557 render: function(type, title, msg) {
558 $(this.el).html(this.template({
559 type: (type === 'fail') ? 'danger' : 'success',
560 title: title,
561 msg: msg
562 //autohide the notif after a delay
563 })).show(200).delay(this.delayTime).hide(500);
564 },
565 usage: function() {
566 return 'Missing or invalid parameters.\n Valid Params: '+
567 '\n@el: (required) a JQuery HTML element, inside which the notifaction'+
568 ' will be rendered'+
569 '\n@delay: (optional) a delay time, after which the notification'+
570 ' will be hidden';
571 }
572 });
543573
574 /* The global editor object.
575 * All high-level editor operations are defined here.
576 */
544577 M.editor = {
545578 init: function() {
546579 M.pages = new Pages(M.site_content.content);
547 var pagelistview = new PageListView();
548 pagelistview.render();
549 /*M.pages.on('add', function(page) {
550 pagelistview.render();
551 });*/
552 M.pagelistview = pagelistview;
580 M.pagelistview = new PageListView();
581 M.pagelistview.render();
582 // initialize the notfications for the editor
583 this.notifs.notifview = new NotificationView({
584 el: $('#notifications'),
585 });
553586 },
587 // the wysiwig editor sub-object
554588 wysiwyg: {
555589 init: function($selector) {
556590 tinymce.init({
……
613613 cleanUp: function($selector) {
614614 }
615615 },
616 // the code editor
616617 code: {
617618 _editor: false,
618619 init: function(id, mode) {
……
632632 return data;
633633 },
634634 cleanUp: function(id) {
635 }
636 },
637 //editor notifications
638 notifs: {
639 // init the notif view when the DOM is ready, in editor.init
640 notifview: null,
641 show: function(type, title, msg) {
642 this.notifview.render(type, title, msg);
635643 }
636644 },
637645 showOverlay: function() {
mouchak/templates/editor.html
(2 / 9)
  
367367 </script>
368368
369369 <!-- notification templates -->
370 <script type="text/template" id="success-notif">
371 <div class="alert alert-success">
370 <script type="text/template" id="notif-template">
371 <div class="alert alert-<%= type %>">
372372 <button type="button" class="close" data-dismiss="alert">&times;</button>
373373 <h4> <%= title %> </h4>
374374 <%= msg %>
375375 </div>
376376 </script>
377377
378 <script type="text/template" id="fail-notif">
379 <div class="alert alert-danger">
380 <button type="button" class="close" data-dismiss="alert">&times;</button>
381 <h4> <%= title %> </h4>
382 <%= msg %>
383 </div>
384 </script>
385378{% endblock %}