uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add basic sliding functionality. Resolves #6.

Browse Source 
At least for the mockups I've chosen to use jQuery's animate function
for this functionality instead of css3 transitions. The reason is that I
have to compute widths with js, and the whole click event and class
addition/removal is handled there.
This commit is contained in:
Arpad Csanyi
2016-03-17 00:29:35 +01:00
parent 335f7be207
commit 32750c5121
1 changed files with 43 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app.js
View File

@@ -59,6 +59,49 @@ $(function() {
$(this).find('.fa-chevron-down, .fa-chevron-up').toggleClass('fa-chevron-down fa-chevron-up')
});
$('button.uhk__layer-switcher').on('click', function(e) {
var button = $(this),
layerOrder = ['base', 'mod', 'fn', 'mouse'],
currentButton = $('button.uhk__layer-switcher.current'),
slideLayer = button.data('layer'),
slideNumber = layerOrder.indexOf(slideLayer),
currentSlideLayer = currentButton.data('layer'),
currentSlideNumber = layerOrder.indexOf(currentSlideLayer),
slide = $('.uhk__layer-wrapper--' + slideLayer),
currentSlide = $('.uhk__layer-wrapper.current'),
slideWidth = currentSlide.width() + 'px';
if (slideNumber < currentSlideNumber) {
// From left to right
currentSlide.css('left', 0);
slide.css('left', '-' + slideWidth);
currentSlide.animate({left: slideWidth}, function() {
$(this).removeClass('current');
});
slide.animate({left: 0}, function() {
$(this).addClass('current');
});
currentButton.removeClass('current btn-primary').addClass('btn-default');
button.addClass('current btn-primary').removeClass('btn-default').blur();
} else if (slideNumber != currentSlideNumber) {
// From right to left
currentSlide.css({left: 0});
slide.css({left: slideWidth});
currentSlide.animate({left: '-' + slideWidth}, function() {
$(this).removeClass('current');
});
slide.animate({left: 0}, function() {
$(this).addClass('current');
});
currentButton.removeClass('current btn-primary').addClass('btn-default');
button.addClass('current btn-primary').addClass('btn-default').blur();
}
});
});
function _init(view) {