#84 - added drawer component, removed few files

src/app.js

@@ -14,6 +14,7 @@ import SearchPanel from './components/search-panel';
 import YoutubePlayer from './components/youtube-player';
 import NowPlaying from './components/now-playing';
 import UserProfile from './components/user-profile';
+import Drawer from './components/drawer';
 
 ngRoute(angular);
 
@@ -34,7 +35,8 @@ ngRoute(angular);
     	SearchPanel.name,
     	NowPlaying.name,
     	YoutubePlayer.name,
-    	UserProfile.name
+    	UserProfile.name,
+    	Drawer.name
 		// 'youtube.playlists',
 		// 'youtube.player',
 		// 'media.info',

src/components/drawer/drawer-closed.component.js

@@ -0,0 +1,28 @@
+/* @ngInject */
+export default function drawerClosed (DrawerSettings) {
+    // Usage:
+    //	<button drawer-closed="css-class-to-apply-when-closed"></button>
+    // Creates:
+    //	an action which will toggle the drawer
+    var directive = {
+        link: link,
+        restrict: 'A'
+    };
+    return directive;
+
+    function link(scope, element, attrs) {
+    	var cssClassToApply = attrs.drawerClosed;
+        scope.drawerOpened = DrawerSettings.opened;
+    	scope.$watch('drawerOpened()', function (nState, oldState) {
+            if (nState !== oldState) {
+                addStateAsClass();
+            }
+        });
+
+    	addStateAsClass();
+
+    	function addStateAsClass () {
+    		element.toggleClass(cssClassToApply, !DrawerSettings.opened());
+    	}
+    }
+}

src/components/drawer/drawer-settings.service.js

@@ -0,0 +1,19 @@
+/* @ngInject */
+export default function DrawerSettings () {
+    var isOpen = true;
+    var service = {
+        toggle: toggle,
+        opened: opened
+    };
+    return service;
+
+    ////////////////
+
+    function toggle() {
+        isOpen = !isOpen;
+    }
+
+    function opened () {
+        return isOpen;
+    }
+}

src/components/drawer/drawer-toggle.component.js

@@ -0,0 +1,30 @@
+/* @ngInject */
+export default function drawerToggle (DrawerSettings) {
+    // Usage:
+    //	<button drawer-toggle="css-class-to-apply"></button>
+    // Creates:
+    //	an action which will toggle the drawer
+    var directive = {
+        link: link,
+        restrict: 'A'
+    };
+    return directive;
+
+    function link(scope, element, attrs) {
+    	var cssClassToApply = attrs.drawerToggle;
+    	element.bind('click', function (ev) {
+    		ev.preventDefault();
+    		DrawerSettings.toggle();
+    		if (cssClassToApply && cssClassToApply.length) {
+    			addStateAsClass();
+    		}
+    		scope.$apply();
+    	});
+
+    	addStateAsClass();
+
+    	function addStateAsClass () {
+    		element.toggleClass(cssClassToApply, DrawerSettings.opened());
+    	}
+    }
+}

src/components/drawer/index.js

@@ -0,0 +1,12 @@
+import angular from 'angular';
+import DrawerSettings from './drawer-settings.service.js';
+import drawerToggle from './drawer-toggle.component';
+import drawerClosed from './drawer-closed.component';
+
+export default angular.module('drawer', [
+	    'app.core'
+    ])
+	.factory('DrawerSettings', DrawerSettings)
+	.directive('drawerToggle', drawerToggle)
+	.directive('drawerClosed', drawerClosed)
+;

src/components/now-playing/now-playlist/now-playlist.ctrl.js

@@ -2,7 +2,6 @@
 export default class NowPlaylistCtrl {
     /* @ngInject */
     constructor () {
-        /*jshint validthis: true */
         // injected with this.videos, this.onRemove, this.onSelect
         this.showPlaylistSaver = false;
     }