Added styles and js for disablling next and prev buttons
--HG-- branch : kf-sequence-nav
This commit is contained in:
Kyle Fiedler
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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 } );
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user