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,49 +157,131 @@ 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 {
-        // color: darken(#F6EFD4, 80%);
-        // letter-spacing: 1px;
-        // text-transform: uppercase;
-        @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
-        background-color: darken(#F6EFD4, 5%);
-        background-position: center center;
-        background-repeat: no-repeat;
-        border-left: 1px solid darken(#f6efd4, 20%);
-        cursor: pointer;
-        display: table-cell;
-        padding: 0 4px;
-        text-indent: -9999px;
-        width: 82px;
 
-        &:hover {
-          text-decoration: none;
-          color: darken(#F6EFD4, 60%);
-          text-decoration: none;
-          background-color: none;
+        a {
+          // color: darken(#F6EFD4, 80%);
+          // letter-spacing: 1px;
+          // text-transform: uppercase;
+          @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
+          background-color: darken(#F6EFD4, 5%);
+          background-position: center center;
+          background-repeat: no-repeat;
+          border-left: 1px solid darken(#f6efd4, 20%);
+          cursor: pointer;
+          padding: 0 4px;
+          text-indent: -9999px;
+          width: 38px;
+          display: block;
+
+          &:hover {
+            text-decoration: none;
+            color: darken(#F6EFD4, 60%);
+            text-decoration: none;
+            background-color: none;
+          }
+
+          &.disabled {
+            cursor: normal;
+            opacity: .4;
+          }
         }
       }
 
-        &.prev {
+      &.prev {
+        a {
           background-image: url('/static/images/sequence-nav/previous-icon.png');
 
           &:hover {
             background-color: none;
           }
         }
+      }
 
-        &.next {
+      &.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 {
+              background-color: none;
+            }
+          }
+        }
+      }
     }
   }
 }

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,26 +29,49 @@ 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}'});
-
-    postJSON('/modx/sequential/${ id }/goto_position',
-	     {'position' : i });
-
-    if (${ id }loc!=-1)
-	${ id }destroy_functions[ ${ id }loc ]();
-    $('#seq_content').html(${ id }contents[i]);
-    ${ id }init_functions[i]()
-	       //$('#tt_'+${ id }loc).attr("style", "background-color:gray");
-	       $('#tt_'+${ id }loc).removeClass();
-	       $('#tt_'+${ id }loc).addClass("seq_"+${ id }types[${ id }loc]+"_visited");
-    ${ id }loc=i;
-    //$('#tt_'+i).attr("style", "background-color:red");
-    $('#tt_'+i).removeClass();
-    $('#tt_'+i).addClass("seq_"+${ id }types[${ id }loc]+"_active");
-
-    MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+  log_event("seq_goto", {'old':${id}loc, 'new':i,'id':'${id}'});
+
+  postJSON('/modx/sequential/${ id }/goto_position',
+  {'position' : i });
+
+  if (${ id }loc!=-1)
+  ${ id }destroy_functions[ ${ id }loc ]();
+  $('#seq_content').html(${ id }contents[i]);
+  ${ id }init_functions[i]()
+  //$('#tt_'+${ id }loc).attr("style", "background-color:gray");
+  $('#tt_'+${ id }loc).removeClass();
+  $('#tt_'+${ id }loc).addClass("seq_"+${ id }types[${ id }loc]+"_visited");
+  ${ id }loc=i;
+  //$('#tt_'+i).attr("style", "background-color:red");
+  $('#tt_'+i).removeClass();
+  $('#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 }goto( ${ position } );
-    });
+  var i; 
+  for(i=1; i<${ len(items)+1 }; i++) {
+    ${ id }setup_click(i);
+  }
+
+
+  $('.${ id }next a').click(function(eo) { ${ id }next(); return false;});
+  $('.${ id }prev a').click(function(eo) { ${ id }prev(); return false;});
+  ${ id }goto( ${ position } );
+
+});