Merge pull request #29 from cdebost/master

Add keyboard navigation
montagejs · Nov 20, 2017 · 555386e · 555386e
2 parents 88ff2e5 + b6d9ae2
commit 555386e
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 1 deletion.
diff --git a/ui/moviestrip.reel/moviestrip.html b/ui/moviestrip.reel/moviestrip.html
@@ -247,6 +247,39 @@
             "bindings": {
                 "src": {"<-": "'http://image.tmdb.org/t/p/w300' + @movieFlow:iteration.object.poster_path"}
             }
+        },
+
+        "key_up": {
+            "prototype": "montage/composer/key-composer",
+            "properties": {
+                "keys": "up",
+                "identifier": "previous",
+                "component": {"@": "owner"}
+            }
+        },
+        "key_down": {
+            "prototype": "montage/composer/key-composer",
+            "properties": {
+                "keys": "down",
+                "identifier": "next",
+                "component": {"@": "owner"}
+            }
+        },
+        "key_left": {
+            "prototype": "montage/composer/key-composer",
+            "properties": {
+                "keys": "left",
+                "identifier": "previous",
+                "component": {"@": "owner"}
+            }
+        },
+        "key_right": {
+            "prototype": "montage/composer/key-composer",
+            "properties": {
+                "keys": "right",
+                "identifier": "next",
+                "component": {"@": "owner"}
+            }
         }
     }
     </script>

diff --git a/ui/moviestrip.reel/moviestrip.js b/ui/moviestrip.reel/moviestrip.js
@@ -1,5 +1,6 @@
 
-var Component   = require("montage/ui/component").Component;
+var Component   = require("montage/ui/component").Component,
+    KeyComposer = require("montage/composer/key-composer").KeyComposer;
 
 exports.Moviestrip = Component.specialize({
 
@@ -19,6 +20,36 @@ exports.Moviestrip = Component.specialize({
                         parameters: { self: this }
                     }
                 );
+
+                this.templateObjects.key_up.addEventListener("keyPress", this, false);
+                this.templateObjects.key_down.addEventListener("keyPress", this, false);
+                this.templateObjects.key_left.addEventListener("keyPress", this, false);
+                this.templateObjects.key_right.addEventListener("keyPress", this, false);
+            }
+        }
+    },
+
+    handleKeyPress: {
+        value: function(event) {
+            var contentController = this.categoryContentController;
+            var currentMovieIndex = contentController.content.indexOf(contentController.selection.one());
+
+            // Don't change the movie if the flow animation is too far behind
+            if (Math.abs(this.templateObjects.movieFlow.scroll - currentMovieIndex) > 1) {
+                return;
+            }
+
+            if (event.identifier === "next") {
+                if (currentMovieIndex >= contentController.content.length) {
+                    return;
+                }
+                contentController.select(contentController.content[currentMovieIndex + 1]);
+            }
+            if (event.identifier === "previous") {
+                if (currentMovieIndex < 1) {
+                    return;
+                }
+                contentController.select(contentController.content[currentMovieIndex - 1]);
             }
         }
     },