Commit e24b879a0a2f10cd2e8ef21d4b3c914132154cd5

FIX: Navigation Menu highlight issue

  - Fix the highlighting issue in navigation menu when navigating to different
    pages.
  - Fix some small UI issues in the editor
  
5454 //console.log('rendering custom menu..');
5555 this.$el.append(this.model.get('html'));
5656 }
57 this.$links = $('.nav li');
57 this.$links = $('.nav > li');
5858 if(!this.$links) {
5959 throw new Error('Ill-formed menu! Please check you have <ul> element' +
6060 'inside your menu with class nav and <li> elements inside it');
8181 }));*/
8282 }, this);
8383 },
84 //FIXIT: sometimes clicking on nav link, this function does not handle the
85 //event directly. it is passed to showPage function of router, which calls
86 //this function. so this function is without an event object is some cases.
87 //Fix it always receive the click event.
8488 navClicked: function(event) {
8589 this.$links.removeClass('active');
86 if(!event) {
87 var fragment = location.hash.split('/')[1];
88 //var pos = _.indexOf(M.pages.models, M.pages.where({'name': fragment})[0]);
89 //console.log(fragment);
90 var pos = _.indexOf(this.model.get('menuOrder'), fragment);
91 //console.log(pos);
92 if(!fragment) {
93 pos = 0;
90 if(this.model.get('customMenu') === false) {
91 if(!event) {
92 var fragment = location.hash.split('/')[1];
93 //var pos = _.indexOf(M.pages.models, M.pages.where({'name': fragment})[0]);
94 var pos = _.indexOf(this.model.get('menuOrder'), fragment);
95 if(!fragment) {
96 pos = 0;
97 }
98 $(this.$links[pos]).addClass('active');
9499 }
95 $(this.$links[pos]).addClass('active');
100 else {
101 $(event.currentTarget).parent().addClass('active');
102 }
96103 }
97 else {
98 //console.log();
99 $(event.currentTarget).parent().addClass('active');
104 else if(this.model.get('customMenu') === true) {
105 // get the URL fragment
106 var fragment = location.hash.split('/')[1];
107 // find out where it is in the nav menu
108 var link = $('.nav').find('a[href="#/'+ fragment +'"]')[0];
109 // find its <li> parent all the way up in the main ul.nav
110 $(link).closest('ul.nav > li').addClass('active');
100111 }
101112 }
102113});
  
4949 <script type="text/template" id="menu-config-template">
5050 <div class="page">
5151 <div class="menu-config">
52 <h4> Menu Config </h4>
52 <h4> Configure Navigation Menu </h4>
5353
5454 <div class="row">
55 <div class="form-group col-lg-12" id="menu-order-wrap">
55 <div class="form-group col-lg-6">
5656 <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 %>">
57 <span class="input-group-addon">
58 <input id="custom-menu" type="checkbox">
59 </span>
60 <span class="input-group-addon"><strong>Custom Menu
61 </strong></span>
6062 </div>
6163 <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 activate to write your own custom menu
6466 </small>
6567 </span>
6668 </div>
6769 </div>
6870
6971 <div class="row">
70 <div class="form-group col-lg-6">
72 <div class="form-group col-lg-12" id="menu-order-wrap">
7173 <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>
74 <span class="input-group-addon"> <strong> Menu Order</strong></span>
75 <input class="form-control" id="menu-order" type="text"
76 placeholder="list,page,slugs,for,menu,order" value="<%= menu_order %>">
7777 </div>
7878 <span class="help-block">
79 <small>
80 activate to write your own custom menu
79 <small>csv list of page slugs to come up in the navigation menu
80 in that order
8181 </small>
8282 </span>
8383 </div>
110110
111111 <script type="text/template" id="header-config-template">
112112 <div class="page">
113 <h4> Configure your header here </h4>
113 <div><h4> Write HTML for your header here </h4></div>
114114 <div id="header-input" class="ace-mouchak">
115115 <%= M.escapeHtml(header) %>
116116 </div>
123123
124124 <script type="text/template" id="footer-config-template">
125125 <div class="page">
126 <h4> Configure your footer here </h4>
126 <div><h4> Write HTML for your footer here </h4></div>
127127 <div id="footer-input" class="ace-mouchak">
128128 <%= M.escapeHtml(footer) %>
129129 </div>
140140 <div id="pagelist"></div>
141141 <button class="btn btn-primary" id="addPage">Add Page</button>
142142 <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>
143 <p> <a href="#" id="header-config"> Header </a> </p>
144 <p> <a href="#" id="footer-config"> Footer </a> </p>
145 <p> <a href="#" id="menu-config"> Navigation Menu </a> </p>
146146 <p><a href="{{ url_for('index') }}"> Go to site </a></p>
147147 </div>
148148 </script>