Start of a slideable side nav

resources/assets/scripts/app/controllers/application.coffee

@@ -21,7 +21,6 @@ module.exports = angular.module('ponyfm').controller "application", [
         $scope.$state = $state
         $scope.$stateParams = $stateParams
         $scope.isPinnedPlaylistSelected = false
-        $scope.menuActive = false
         $scope.notifActive = false
         $loadingElement = null
         loadingStateName = null
@@ -34,7 +33,7 @@ module.exports = angular.module('ponyfm').controller "application", [
                 console.log 'SW register failed', err
 
         $scope.menuToggle = () ->
-            $scope.menuActive = !$scope.menuActive
+            $rootScope.$broadcast('sidebarToggled')
             $scope.notifActive = false
         
         $scope.notifPulloutToggle = () ->
@@ -76,7 +75,7 @@ module.exports = angular.module('ponyfm').controller "application", [
 
         statesPreloaded = {}
         $scope.$on '$stateChangeStart', (e, newState, newParams, oldState, oldParams) ->
-            $scope.menuActive = false
+            $rootScope.$broadcast('sidebarHide')
             $scope.notifActive = false
             $scope.isPinnedPlaylistSelected = false
 

resources/assets/scripts/app/controllers/sidebar.coffee

@@ -15,9 +15,23 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 module.exports = angular.module('ponyfm').controller "sidebar", [
-    '$scope', '$modal', 'playlists'
-    ($scope, $modal, playlists) ->
+    '$scope', '$modal', 'playlists', '$rootScope'
+    ($scope, $modal, playlists, $rootScope) ->
         $scope.playlists = playlists.pinnedPlaylists
+        $scope.menuVisible = false
+        $scope.menuActive = false
+        $scope.menuAnimated = true
+        $scope.navStyle = {}
+
+        $rootScope.$on('sidebarToggled', () ->
+            $scope.menuVisible = !$scope.menuVisible
+            $scope.menuActive = $scope.menuVisible
+        )
+
+        $rootScope.$on('sidebarHide', () ->
+            $scope.menuVisible = false
+            $scope.menuActive = false
+        )
 
         $scope.createPlaylist = () ->
             $modal
@@ -58,4 +72,63 @@ module.exports = angular.module('ponyfm').controller "sidebar", [
                 controller: 'credits',
                 show: true
 
+        # Swipable side nav code
+        startX = 0
+        currentX = 0
+        touchingNav = false
+
+        onStart = (e) ->
+            if !$scope.menuVisible
+                return
+
+            startX = e.touches[0].pageX
+            currentX = startX
+            touchingNav = true
+            $scope.menuAnimated = false
+            requestAnimationFrame(update)
+
+        onMove = (e) ->
+            if !touchingNav
+                return
+
+            currentX = e.touches[0].pageX
+            translateX = Math.min(0, currentX - startX)
+
+            if translateX < 0
+                e.preventDefault()
+
+        onEnd = (e) ->
+            if !touchingNav
+                return
+
+            touchingNav = false
+            translateX = Math.min(0, currentX - startX)
+            $scope.menuAnimated = true
+
+            if translateX < 0
+                hideNav()
+
+        hideNav = () ->
+            $scope.navStyle.transform = ''
+            $scope.menuAnimated = true
+            $scope.menuVisible = false
+            $scope.menuActive = false
+            $scope.$apply()
+
+        update = () ->
+            if !touchingNav
+                return
+
+            requestAnimationFrame(update)
+
+            translateX = 170 + Math.min(0, currentX - startX)
+            $scope.navStyle.transform = 'translateX(' + translateX + 'px)'
+            $scope.$apply()
+
+        addEventListeners = () ->
+            document.addEventListener('touchstart', onStart)
+            document.addEventListener('touchmove', onMove)
+            document.addEventListener('touchend', onEnd)
+
+        addEventListeners()
 ]

resources/views/shared/_app_layout.blade.php

@@ -75,7 +75,7 @@
     </header>
 
     <div class="site-body">
-        <ul class="sidebar animated" ng-controller="sidebar" ng-class="{'active': menuActive}">
+        <ul class="sidebar" ng-controller="sidebar" ng-class="{'active': menuActive, 'animated': menuAnimated}" ng-style="navStyle">
             <a href="/">
               <img src="/images/ponyfm-logo-white.svg" class="logo">
             </a>