You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
2.0 KiB
112 lines
2.0 KiB
// namespace
|
|
var shape = {
|
|
handler: {}
|
|
};
|
|
|
|
// ready event
|
|
shape.ready = function() {
|
|
|
|
// selector cache
|
|
var
|
|
$ui = $('.ui'),
|
|
$swap = $('.swap'),
|
|
$menu = $('.menu.button'),
|
|
$demo = $('.demo'),
|
|
$waypoints = $('h2'),
|
|
|
|
$peek = $('.peek'),
|
|
$peekMenu = $peek.find('li'),
|
|
// alias
|
|
handler
|
|
;
|
|
|
|
// event handlers
|
|
handler = {
|
|
|
|
peek: function() {
|
|
$('html, body')
|
|
.stop()
|
|
.animate({
|
|
scrollTop: $waypoints.eq( $peekMenu.index( $(this) ) ).offset().top - 90
|
|
}, 500, function(){
|
|
$(this).addClass('active').siblings().removeClass('active');
|
|
})
|
|
;
|
|
$('html')
|
|
.one('scroll', function() {
|
|
$('html,body').stop();
|
|
})
|
|
;
|
|
},
|
|
swapStyle: function() {
|
|
$('head link.ui')
|
|
.each(function() {
|
|
var
|
|
href = $(this).attr('href')
|
|
;
|
|
if( href.search('flat') > -1 ) {
|
|
$(this).attr('href', href.replace('flat', 'shaded'));
|
|
}
|
|
else {
|
|
$(this).attr('href', href.replace('shaded', 'flat'));
|
|
}
|
|
})
|
|
;
|
|
}
|
|
};
|
|
|
|
// attach events
|
|
$ui
|
|
.state()
|
|
;
|
|
|
|
$waypoints
|
|
.waypoint({
|
|
continuous : false,
|
|
offset : 220,
|
|
handler : function(direction) {
|
|
var
|
|
index = (direction == 'down')
|
|
? $waypoints.index(this)
|
|
: ($waypoints.index(this) - 1 >= 0)
|
|
? ($waypoints.index(this) - 1)
|
|
: 0
|
|
;
|
|
console.log(index, $waypoints.index(this));
|
|
$peekMenu
|
|
.removeClass('active')
|
|
.eq( index )
|
|
.addClass('active')
|
|
;
|
|
}
|
|
})
|
|
;
|
|
|
|
$swap
|
|
.on('click', handler.swapStyle)
|
|
;
|
|
|
|
$menu
|
|
.sidr({
|
|
name: 'menu'
|
|
})
|
|
;
|
|
|
|
$peek
|
|
.waypoint('sticky', {
|
|
offset: 80,
|
|
stuckClass: 'stuck'
|
|
})
|
|
;
|
|
$peekMenu
|
|
.state()
|
|
.on('click', handler.peek)
|
|
;
|
|
|
|
};
|
|
|
|
|
|
// attach ready event
|
|
$(document)
|
|
.ready(shape.ready)
|
|
;
|