From 32750c51216d6ce2a443e5ffcae94e054e6169d7 Mon Sep 17 00:00:00 2001
From: Arpad Csanyi <csarpad@gmail.com>
Date: Thu, 17 Mar 2016 00:29:35 +0100
Subject: [PATCH] Add basic sliding functionality. Resolves #6.

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.
---
 app.js | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/app.js b/app.js
index 7a88220e..2bbe85ce 100644
--- a/app.js
+++ b/app.js
@@ -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) {