Commit f4147dfad51ecacca61467564f6b4790114abd10

Few editor changes

  - Site Menu configuration now has a HTML code editor, instead of a dummy
    textbox like before.
  - Page list overflowing is fixed by adding a scroll to it.
  • Diff rendering mode:
  • inline
  • side by side

mouchak/static/css/editor.css

33}33}
34#pagelist {34#pagelist {
35 padding: 10px;35 padding: 10px;
36 height: 300px;
37 overflow-y: auto;
36}38}
37#content {39#content {
38 padding: 10px;40 padding: 10px;
……
81 top: 0;81 top: 0;
82 left: 0;82 left: 0;
83 width: 100%;83 width: 100%;
84 height: 500px;
84 height: 300px;
85}
86#updateMenu {
87 margin-top: 10px;
85}88}
86#editor-overlay {89#editor-overlay {
87 position: absolute;90 position: absolute;

mouchak/static/js/editor.js

10 'click #addPage': 'addPage',10 'click #addPage': 'addPage',
11 'click .pagename .remove': 'removePage',11 'click .pagename .remove': 'removePage',
12 'click #menu-config': 'showMenu',12 'click #menu-config': 'showMenu',
13 'click #footer-config': 'showFooterConfig'
13 },14 },
14 initialize: function() {15 initialize: function() {
15 _.bindAll.apply(_, [this].concat(_.functions(this)));16 _.bindAll.apply(_, [this].concat(_.functions(this)));
……
83 M.editor.showOverlay();83 M.editor.showOverlay();
84 },84 },
85 showMenu: function(event) {85 showMenu: function(event) {
86 event.preventDefault();
86 this.menuconfigview.render();87 this.menuconfigview.render();
88 return false;
87 },89 },
90 showFooterConfig: function(event) {
91 event.preventDefault();
92 //this.footerconfigview.render();
93 return false;
94 },
88 // validate the page list with menu order list95 // validate the page list with menu order list
89 validate: function() {96 validate: function() {
90 //TODO: validate if the menu order list matches with the list of pages97 //TODO: validate if the menu order list matches with the list of pages
……
493 this.$menuOrder.hide();493 this.$menuOrder.hide();
494 $('#custom-menu').attr('checked', true);494 $('#custom-menu').attr('checked', true);
495 this.$menuOptions.show({complete: function() {495 this.$menuOptions.show({complete: function() {
496 //M.editor.wysiwig('#menu');
496 M.editor.code.init('menu', 'html');
497 }});497 }});
498 }498 }
499 },499 },
……
501 if(bool === true) {501 if(bool === true) {
502 this.$menuOrder.hide();502 this.$menuOrder.hide();
503 this.$menuOptions.show({complete: function() {503 this.$menuOptions.show({complete: function() {
504 //M.editor.wysiwig('#menu');
504 M.editor.code.init('menu', 'html');
505 }});505 }});
506 }506 }
507 else {507 else {
……
522 saveMenu: function() {522 saveMenu: function() {
523 //console.log('saving menu..');523 //console.log('saving menu..');
524 if($('#custom-menu').is(':checked')) {524 if($('#custom-menu').is(':checked')) {
525 var html = $('#menu').val().trim() || '';
525 //var html = $('#menu').val().trim() || '';
526 var html = M.editor.code.save('menu');
526 this.model.set({'customMenu': true, 'html': html});527 this.model.set({'customMenu': true, 'html': html});
527 }528 }
528 else {529 else {
……
547 //alert('end of save menu');547 //alert('end of save menu');
548 M.editor.showOverlay();548 M.editor.showOverlay();
549 }549 }
550 });
551
552 /* Footer Config View */
553 var FooterConfigView = Backbone.View.extend({
550 });554 });
551555
552 /* Notification view */556 /* Notification view */

mouchak/templates/editor.html

93 </div>93 </div>
94 <div class="row">94 <div class="row">
95 <label><strong> HTML for menu: </strong></label>95 <label><strong> HTML for menu: </strong></label>
96 <textarea class="form-control" cols="25" rows="8" id="menu"><%= menu %></textarea>
96 <div class="ace-mouchak" id="menu"><%= M.escapeHtml(menu) %></div>
97 </div>97 </div>
98 </div>98 </div>
9999
……
112 <div id="pagelist"></div>112 <div id="pagelist"></div>
113 <button class="btn btn-primary" id="addPage">Add Page</button>113 <button class="btn btn-primary" id="addPage">Add Page</button>
114 <hr>114 <hr>
115 <p> <a href="javascript:void(0);" id="menu-config"> Site Menu </a> </p>
115 <p> <a href="#" id="menu-config"> Site Menu </a> </p>
116 <p> <a href="#" id="footer-config"> Footer Config </a> </p>
116 <p><a href="{{ url_for('index') }}"> Go to site </a></p>117 <p><a href="{{ url_for('index') }}"> Go to site </a></p>
117 </div>118 </div>
118 </script>119 </script>