Added styles and js for disablling next and prev buttons

--HG--
branch : kf-sequence-nav

sass/courseware/_sequence-nav.scss

@@ -5,7 +5,7 @@ nav.sequence-nav {
   ol {
     display: table-row;
     float: left;
-    width: flex-grid(7.5,9) + flex-gutter();
+    width: flex-grid(8,9) + flex-gutter();
     position: relative;
 
     a {
@@ -157,12 +157,15 @@ nav.sequence-nav {
   ul {
     float: right;
     margin-right: 1px;
-    width: flex-grid(1.5, 9);
+    width: flex-grid(1, 9);
     display: table-row;
 
     li {
+      display: table-cell;
 
       &.prev, &.next {
+
+        a {
           // color: darken(#F6EFD4, 80%);
           // letter-spacing: 1px;
           // text-transform: uppercase;
@@ -172,10 +175,10 @@ nav.sequence-nav {
           background-repeat: no-repeat;
           border-left: 1px solid darken(#f6efd4, 20%);
           cursor: pointer;
-        display: table-cell;
           padding: 0 4px;
           text-indent: -9999px;
-        width: 82px;
+          width: 38px;
+          display: block;
 
           &:hover {
             text-decoration: none;
@@ -183,17 +186,94 @@ nav.sequence-nav {
             text-decoration: none;
             background-color: none;
           }
+
+          &.disabled {
+            cursor: normal;
+            opacity: .4;
+          }
+        }
+      }
+
+      &.prev {
+        a {
+          background-image: url('/static/images/sequence-nav/previous-icon.png');
+
+          &:hover {
+            background-color: none;
+          }
+        }
+      }
+
+      &.next {
+        a {
+          background-image: url('/static/images/sequence-nav/next-icon.png');
+
+          &:hover {
+            background-color: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+section.course-content {
+  nav.sequence-bottom {
+    margin-bottom: -(lh());
+
+    ul {
+      @extend .clearfix;
+      border: 1px solid darken(#f6efd4, 20%);
+      border-bottom: 0;
+      @include border-radius(3px 3px 0 0);
+      margin: lh() auto 0;
+      overflow: hidden;
+      width: 106px;
+      background-color: darken(#F6EFD4, 5%);
+      @include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
+
+      li {
+        float: left;
+
+        &.prev, &.next {
+          margin-bottom: 0;
+
+          a {
+            background-position: center center;
+            background-repeat: no-repeat;
+            padding: lh(.75) 4px;
+            text-indent: -9999px;
+            width: 45px;
+            display: block;
+
+            &:hover {
+              text-decoration: none;
+              color: darken(#F6EFD4, 60%);
+              text-decoration: none;
+              opacity: .5;
+              background-color: darken(#F6EFD4, 10%);
+            }
+
+            &.disabled {
+              opacity: .4;
+              background-color: lighten(#F6EFD4, 10%);
+            }
+          }
         }
 
         &.prev {
+          a {
             background-image: url('/static/images/sequence-nav/previous-icon.png');
 
             &:hover {
               background-color: none;
             }
           }
+        }
 
         &.next {
+          a {
             background-image: url('/static/images/sequence-nav/next-icon.png');
 
             &:hover {
@@ -202,4 +282,6 @@ nav.sequence-nav {
           }
         }
       }
+    }
+  }
 }

seq_module.html

@@ -6,10 +6,17 @@
   </ol>
 
   <ul>
-    <li id="${ id }prev" class="prev">Previous</li>
-    <li id="${ id }next" class="next">Next</li>
+    <li class="${ id }prev prev"><a href="#">Previous</a></li>
+    <li class="${ id }next next"><a href="#">Next</a></li>
   </ul>
 </nav>
 
 <div id="seq_content"></div>
 
+<nav class="sequence-bottom">
+<ul>
+  <li class="${ id }prev prev"><a href="#">Previous</a></li>
+  <li class="${ id }next next"><a href="#">Next</a></li>
+</ul>
+</nav>
+

seq_module.js

@@ -29,6 +29,26 @@ var ${ id }destroy_functions=["",
 	       ""];
 
 var ${ id }loc = -1;
+function disablePrev() { 
+    var i=${ id }loc-1;
+    log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
+    if (i < 1 ) {
+      $('.${ id }prev a').addClass('disabled');
+    } else {
+      $('.${ id }prev a').removeClass('disabled');
+    };
+  }
+
+  function disableNext() { 
+    var i=${ id }loc+1;
+    log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
+
+    if(i > ${ len(items) } ) {
+      $('.${ id }next a').addClass('disabled');
+    } else {
+      $('.${ id }next a').removeClass('disabled');
+    };
+}
 
 function ${ id }goto(i) {
   log_event("seq_goto", {'old':${id}loc, 'new':i,'id':'${id}'});
@@ -49,6 +69,9 @@ function ${ id }goto(i) {
   $('#tt_'+i).addClass("seq_"+${ id }types[${ id }loc]+"_active");
 
   MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+
+  disableNext();
+  disablePrev();
 }
 
 function ${ id }setup_click(i) {
@@ -61,23 +84,35 @@ function ${ id }setup_click(i) {
 function ${ id }next() { 
     var i=${ id }loc+1;
     log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
-    if(i > ${ len(items) } ) i = ${ len(items) };
+    if(i > ${ len(items) } ) {
+      i = ${ len(items) };
+  } else {
     ${ id }goto(i);
+  };
 }
 
+
 function ${ id }prev() { 
     var i=${ id }loc-1;
     log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
-    if (i < 1 ) i = 1;
+    if (i < 1 ) {
+      i = 1;
+    } else {
     ${ id }goto(i);
+  };
 }
 
+
+
 $(function() {
   var i; 
   for(i=1; i<${ len(items)+1 }; i++) {
     ${ id }setup_click(i);
   }
-        $('#${ id }next').click(function(eo) { ${ id }next();});
-        $('#${ id }prev').click(function(eo) { ${ id }prev();});
+
+
+  $('.${ id }next a').click(function(eo) { ${ id }next(); return false;});
+  $('.${ id }prev a').click(function(eo) { ${ id }prev(); return false;});
   ${ id }goto( ${ position } );
-    });
+
+});