added up and down key arrows shortcuts, #5

dnbard · Oct 14, 2014 · 6a9ab90 · 6a9ab90
1 parent 5b9c296
commit 6a9ab90
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 8 deletions.
diff --git a/styles/main.css b/styles/main.css
@@ -35,24 +35,24 @@
     transition: 0.25s all;
 }
 
-.projects_modal .project:hover{
+.projects_modal .project.hover{
     background: #016DC4;
     color: white;
 }
 
-.projects_modal .project:hover .muted{
+.projects_modal .project.hover .muted{
     color: lightgray;
 }
 
-.projects_modal .project:hover .project-icon{
+.projects_modal .project.hover .project-icon{
     opacity: 1;
 }
 
-.projects_modal .project:hover .project-holder{
+.projects_modal .project.hover .project-holder{
     margin-left: 118px;
 }
 
-.projects_modal .project:hover .brproj{
+.projects_modal .project.hover .brproj{
     display: inline-block;
 }
 

diff --git a/templates/projects.html b/templates/projects.html
@@ -1,4 +1,4 @@
-<div class="projects_modal modal">
+<div class="projects_modal modal" data-bind="event:{keydown: keypress}">
     <div class="modal-header">
         <h1 class="dialog-title brproj-file-submodule">
             <span>Projects</span>
@@ -13,7 +13,7 @@ <h1 class="dialog-title brproj-file-submodule">
         </div>
         <div class="border" data-bind="visible: isFavoritesSelected() && favoriteProjects().length > 0">FAVORITE PROJECTS</div>
         <div class="projects favorite" data-bind="foreach: favoriteProjects, visible: favoriteProjects().length > 0 && isFavoritesSelected()">
-            <div class="project" data-bind="click: $parent.open">
+            <div class="project" data-bind="css:{hover: $data === $parent.hoverProject() },click: $parent.open, event:{mouseover:$parent.mouseover, mouseout:$parent.mouseout}">
                 <span title="Make this project a favorite" class="brproj brproj-heart" data-bind="click: $parent.favorite, css:{favorite: $parent.isFavorite($data)}"></span>
                 <span title="Options" class="brproj brproj-gear" data-bind="click: $parent.options"></span>
                 <span title="Close this project" class="brproj brproj-x" data-bind="click: $parent.remove"></span>
@@ -44,7 +44,7 @@ <h1 class="dialog-title brproj-file-submodule">
         </div>
         <div class="border" data-bind="visible: isRegularSelected() && projects().length > 0">PROJECTS</div>
         <div class="projects" data-bind="foreach: projects, visible: isRegularSelected()">
-            <div class="project" data-bind="click: $parent.open">
+            <div class="project" data-bind="css:{hover: $data === $parent.hoverProject() },click: $parent.open, event:{mouseover:$parent.mouseover, mouseout:$parent.mouseout}">
                 <span title="Make this project a favorite" class="brproj brproj-heart" data-bind="click: $parent.favorite, css:{favorite: $parent.isFavorite($data)}"></span>
                 <span title="Options" class="brproj brproj-gear" data-bind="click: $parent.options"></span>
                 <span title="Close this project" class="brproj brproj-x" data-bind="click: $parent.remove"></span>

diff --git a/viewmodels/projects.js b/viewmodels/projects.js
@@ -188,6 +188,16 @@ define(function(require, exports, module){
             }
         }
 
+        this.hoverProject = ko.observable(null);
+
+        this.mouseout = function(){
+            self.hoverProject(null);
+        }
+
+        this.mouseover = function(project){
+            self.hoverProject(project);
+        }
+
         this.init = function(){
             var projects = self.getProjectList(),
                 favoriteProjects;
@@ -204,6 +214,95 @@ define(function(require, exports, module){
             this.favoriteProjects(favoriteProjects);
         }
 
+        this.getPreviousProject = function(){
+            var cProject = this.hoverProject(),
+                projects,
+                selectNext = false,
+                selected = null;
+
+            if (!cProject){
+                if (this.isRegularSelected()){
+                    return _.last(this.projects());
+                }
+                else if (this.isFavoritesSelected()){
+                    return _.last(this.favoriteProjects());
+                }
+            } else {
+                projects = [];
+
+                if (this.isRegularSelected()){
+                    projects = _.clone(this.projects()).reverse();
+                }
+
+                if (this.isFavoritesSelected()){
+                    projects = _.union(projects, _.clone(this.favoriteProjects()).reverse());
+                }
+
+                _.each(projects, function(project){
+                    if (selectNext){
+                        selected = project;
+                        return false;
+                    }
+
+                    selectNext = project === cProject;
+                });
+
+                return selected;
+            }
+        }
+
+        this.getNextProject = function(){
+            var cProject = this.hoverProject(),
+                projects,
+                selectNext = false,
+                selected = null;
+
+            if (!cProject){
+                if (this.isFavoritesSelected()){
+                    return _.first(this.favoriteProjects());
+                } else if (this.isRegularSelected()){
+                    return _.first(this.projects());
+                }
+            } else {
+                projects = [];
+
+                if (this.isFavoritesSelected()){
+                    projects = this.favoriteProjects();
+                }
+
+                if (this.isRegularSelected()){
+                    projects = _.union(projects, this.projects());
+                }
+
+                _.each(projects, function(project){
+                    if (selectNext){
+                        selected = project;
+                        return false;
+                    }
+
+                    selectNext = project === cProject;
+                });
+
+                return selected;
+            }
+        }
+
+        this.keypress = function(model, event){
+            var keyCode = event.keyCode;
+
+            if (keyCode === 40){
+                //down
+                self.hoverProject(self.getNextProject());
+            } else if (keyCode === 38){
+                self.hoverProject(self.getPreviousProject());
+            }
+
+            console.log(keyCode);
+            console.log(event);
+
+            return true;
+        }
+
         this.init();
 
         setTimeout(function(){