Commit e24b879a0a2f10cd2e8ef21d4b3c914132154cd5

Anon Ray
Mon Jan 20 18:14:43 IST 2014

Tree SHA1: 3bad627
Parent SHA1: 9fa0b56 (Add Header and Footer config in the editor)
raw diff | raw patch

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

mouchak/static/js/mouchak.js 37 -------------++++++++++++++++++++++++
mouchak/templates/editor.html 40 --------------------++++++++++++++++++++

Diff rendering mode:
inline
side by side

mouchak/static/js/mouchak.js

       //console.log('rendering custom menu..');
       this.$el.append(this.model.get('html'));
     }
     this.$links = $('.nav li');
+    this.$links = $('.nav > li');
     if(!this.$links) {
       throw new Error('Ill-formed menu! Please check you have <ul> element' +
           'inside your menu with class nav and <li> elements inside it');
-…
       }));*/
     }, this);
   },
+  //FIXIT: sometimes clicking on nav link, this function does not handle the
+  //event directly. it is passed to showPage function of router, which calls
+  //this function. so this function is without an event object is some cases.
+  //Fix it always receive the click event.
   navClicked: function(event) {
     this.$links.removeClass('active');
     if(!event) {
       var fragment = location.hash.split('/')[1];
       //var pos = _.indexOf(M.pages.models, M.pages.where({'name': fragment})[0]);
       //console.log(fragment);
       var pos = _.indexOf(this.model.get('menuOrder'), fragment);
       //console.log(pos);
       if(!fragment) {
         pos = 0;
+    if(this.model.get('customMenu') === false) {
+      if(!event) {
+        var fragment = location.hash.split('/')[1];
+        //var pos = _.indexOf(M.pages.models, M.pages.where({'name': fragment})[0]);
+        var pos = _.indexOf(this.model.get('menuOrder'), fragment);
+        if(!fragment) {
+          pos = 0;
+        }
+        $(this.$links[pos]).addClass('active');
       }
       $(this.$links[pos]).addClass('active');
+      else {
+        $(event.currentTarget).parent().addClass('active');
+      }
     }
     else {
       //console.log();
       $(event.currentTarget).parent().addClass('active');
+    else if(this.model.get('customMenu') === true) {
+      // get the URL fragment
+      var fragment = location.hash.split('/')[1];
+      // find out where it is in the nav menu
+      var link = $('.nav').find('a[href="#/'+ fragment +'"]')[0];
+      // find its <li> parent all the way up in the main ul.nav
+      $(link).closest('ul.nav > li').addClass('active');
     }
   }
 });

mouchak/templates/editor.html

   <script type="text/template" id="menu-config-template">
     <div class="page">
       <div class="menu-config">
         <h4> Menu Config </h4>
+        <h4> Configure Navigation Menu </h4>
         <div class="row">
           <div class="form-group col-lg-12" id="menu-order-wrap">
+          <div class="form-group col-lg-6">
             <div class="input-group">
               <span class="input-group-addon"> <strong> Menu Order</strong></span>
               <input class="form-control" id="menu-order" type="text"
               placeholder="list,page,slugs,for,menu,order" value="<%= menu_order %>">
+              <span class="input-group-addon">
+                <input id="custom-menu" type="checkbox">
+              </span>
+              <span class="input-group-addon"><strong>Custom Menu
+              </strong></span>
             </div>
             <span class="help-block">
               <small>csv list of page slugs to come up in the navigation menu
                 in that order
+              <small>
+                activate to write your own custom menu
               </small>
             </span>
           </div>
         </div>
         <div class="row">
           <div class="form-group col-lg-6">
+          <div class="form-group col-lg-12" id="menu-order-wrap">
             <div class="input-group">
               <span class="input-group-addon">
                 <input id="custom-menu" type="checkbox">
               </span>
               <span class="input-group-addon"><strong>Custom Menu
               </strong></span>
+              <span class="input-group-addon"> <strong> Menu Order</strong></span>
+              <input class="form-control" id="menu-order" type="text"
+              placeholder="list,page,slugs,for,menu,order" value="<%= menu_order %>">
             </div>
             <span class="help-block">
               <small>
                 activate to write your own custom menu
+              <small>csv list of page slugs to come up in the navigation menu
+                in that order
               </small>
             </span>
           </div>
-…
   <script type="text/template" id="header-config-template">
     <div class="page">
       <h4> Configure your header here </h4>
+      <div><h4> Write HTML for your header here </h4></div>
       <div id="header-input" class="ace-mouchak">
         <%= M.escapeHtml(header) %>
       </div>
-…
   <script type="text/template" id="footer-config-template">
     <div class="page">
       <h4> Configure your footer here </h4>
+      <div><h4> Write HTML for your footer here </h4></div>
       <div id="footer-input" class="ace-mouchak">
         <%= M.escapeHtml(footer) %>
       </div>
-…
       <div id="pagelist"></div>
       <button class="btn btn-primary" id="addPage">Add Page</button>
       <hr>
       <p> <a href="#" id="menu-config"> Site Menu </a> </p>
       <p> <a href="#" id="header-config"> Header Config </a> </p>
       <p> <a href="#" id="footer-config"> Footer Config </a> </p>
+      <p> <a href="#" id="header-config"> Header </a> </p>
+      <p> <a href="#" id="footer-config"> Footer </a> </p>
+      <p> <a href="#" id="menu-config"> Navigation Menu </a> </p>
       <p><a href="{{ url_for('index') }}"> Go to site </a></p>
     </div>
   </script>

Commit e24b879a0a2f10cd2e8ef21d4b3c914132154cd5

mouchak/static/js/mouchak.js

mouchak/templates/editor.html

Gitorious