diff --git a/sass/courseware/_sequence-nav.scss b/sass/courseware/_sequence-nav.scss index 99e29a39d2..155c3962b0 100644 --- a/sass/courseware/_sequence-nav.scss +++ b/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; + } + } + } + } } } } diff --git a/seq_module.html b/seq_module.html index 3df90fc343..f71a371e22 100644 --- a/seq_module.html +++ b/seq_module.html @@ -6,10 +6,17 @@
+ + diff --git a/seq_module.js b/seq_module.js index c7b9fabab9..b4f92db8a1 100644 --- a/seq_module.js +++ b/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}'}); + log_event("seq_goto", {'old':${id}loc, 'new':i,'id':'${id}'}); - postJSON('/modx/sequential/${ id }/goto_position', - {'position' : i }); + 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"); + 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]); + 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 } ); + +});