Commit 77b14a4d32a9498fa61f7ede8196b03e8971c7df

Add white overlay while saving

  Fix UI issues like displaying a overlay while saving etc.
  • Diff rendering mode:
  • inline
  • side by side

mouchak/static/css/editor.css

57 width: 500px;57 width: 500px;
58 z-index: 100;58 z-index: 100;
59 margin: 5px auto;59 margin: 5px auto;
60 position: absolute;
61 left: 33%;
62 top: 0px;
60}63}
61#code-edit {64#code-edit {
62 position: absolute;65 position: absolute;
……
68 bottom: 0 ;68 bottom: 0 ;
69 left: 125px;69 left: 125px;
70 width: 70%;70 width: 70%;
71}
72#editor-overlay {
73 position: absolute;
74 width: 100%;
75 height: 100%;
76 background-color: #FFFFFF;
77 opacity: 0.7;
78 display: none;
71}79}

mouchak/static/js/editor.js

59 //console.log('remove', id);59 //console.log('remove', id);
60 M.pages.get(id).destroy({60 M.pages.get(id).destroy({
61 success: function(model, response) {61 success: function(model, response) {
62 M.editor.hideOverlay();
62 //console.log('deleted', model, response);63 //console.log('deleted', model, response);
63 M.pages.remove(id);64 M.pages.remove(id);
64 M.pagelistview.render();65 M.pagelistview.render();
……
72 }));72 }));
73 },73 },
74 error: function(model, xhr) {74 error: function(model, xhr) {
75 M.editor.hideOverlay();
75 console.log('failed', model, xhr);76 console.log('failed', model, xhr);
76 $('#notifications').html(fail_template({77 $('#notifications').html(fail_template({
77 title: 'Error',78 title: 'Error',
……
80 }));80 }));
81 }81 }
82 });82 });
83 M.editor.showOverlay();
83 },84 },
84 showMenu: function(event) {85 showMenu: function(event) {
85 this.menuconfigview.render();86 this.menuconfigview.render();
……
243 this.model.save({}, {243 this.model.save({}, {
244 success: function(model, response) {244 success: function(model, response) {
245 //console.log('saved', model, response);245 //console.log('saved', model, response);
246 M.editor.hideOverlay();
246 model.set(response.page);247 model.set(response.page);
247 model.id = response.page.id;248 model.id = response.page.id;
248 M.pagelistview.render();249 M.pagelistview.render();
……
253 }));253 }));
254 },254 },
255 error: function(model, xhr) {255 error: function(model, xhr) {
256 M.editor.hideOverlay();
257 model.set(response.page);
256 console.log('failed', model, xhr);258 console.log('failed', model, xhr);
257 $('#notifications').html(fail_template({259 $('#notifications').html(fail_template({
258 title: 'Error!',260 title: 'Error!',
……
262 }));262 }));
263 }263 }
264 });264 });
265 M.editor.showOverlay();
265 return false;266 return false;
266 }267 }
267 });268 });
……
462 this.model.save({}, {462 this.model.save({}, {
463 success: function(model, response) {463 success: function(model, response) {
464 //console.log(model, response);464 //console.log(model, response);
465 M.editor.hideOverlay();
465 $('#notifications').html(success_template({466 $('#notifications').html(success_template({
466 title: 'Saved',467 title: 'Saved',
467 msg: ''468 msg: ''
……
470470
471 },471 },
472 error: function(xhr, response) {472 error: function(xhr, response) {
473 M.editor.hideOverlay();
473 $('#notifications').html(fail_template({474 $('#notifications').html(fail_template({
474 title: 'Error!',475 title: 'Error!',
475 msg: 'Something went wrong, and the page could not be updated'476 msg: 'Something went wrong, and the page could not be updated'
……
478 }478 }
479 });479 });
480 //alert('end of save menu');480 //alert('end of save menu');
481 M.editor.showOverlay();
481 }482 }
482 });483 });
483484
485
484 M.editor = {486 M.editor = {
485 init: function() {487 init: function() {
486 M.pages = new Pages(M.site_content.content);488 M.pages = new Pages(M.site_content.content);
……
540 },540 },
541 cleanUp: function(id) {541 cleanUp: function(id) {
542 }542 }
543 },
544 showOverlay: function() {
545 $('#editor-overlay').show();
546 },
547 hideOverlay: function() {
548 $('#editor-overlay').hide();
543 }549 }
544 };550 };
545551

mouchak/templates/editor.html

13 </div>13 </div>
14 <div id="notifications"></div>14 <div id="notifications"></div>
15 </div>15 </div>
16 <div id="content-container">
17 </div>
18 <div id="footer">
19 </div>
16 <div id="content-container"></div>
17 <div id="footer"></div>
20 </div>18 </div>
19 <div id="editor-overlay"></div>
2120
22 <script>21 <script>
23 // initialize editor22 // initialize editor