Merge branch 'demo' of https://github.com/fluid-project/videoPlayer i…

…nto FLUID-4744
michelled · Sep 4, 2012 · fbd9544 · fbd9544
2 parents 590afb7 + da3a7d4
commit fbd9544
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 46 deletions.
diff --git a/js/MenuButton.js b/js/MenuButton.js
@@ -40,6 +40,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         events: {
             onReady: null,
             activated: null,
+            hiddenByKeyboard: null
         },
         selectors: {
             menuItem: ".flc-videoPlayer-menuItem",
@@ -100,45 +101,29 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             },
             rememberSelectionState: false,
             autoSelectFirstItem: false,
-            noWrap: true
+            noWrap: false
         });
 
-        // When a menu item is activated using the keyboard, in addition to hiding the menu,
-        // focus must be return to the button
         that.locate("language").fluid("activatable", function (evt) {
             that.activate(that.locate("language").index(evt.currentTarget));
+            that.events.hiddenByKeyboard.fire();
             return false;
         });
-        var noneButton = that.locate("showHide");
-        noneButton.fluid("activatable", function (evt) {
-            that.writeIndirect("showHidePath", !that.readIndirect("showHidePath"), "menuButton"); 
-            that.hide();
+        that.locate("showHide").fluid("activatable", function (evt) {
+            that.showHide();
+            that.events.hiddenByKeyboard.fire();
             return false;
         });
-
-        // when the DOWN arrow is used on the bottom item of the menu, the menu should hide
-        // and focus should return to the button
-        noneButton.keydown(function (evt) {
-            if (evt.which === $.ui.keyCode.DOWN) {
-                that.hide();
-                return false;
-            }
-            return true;
-        });
     };
 
     fluid.videoPlayer.languageMenu.bindEventListeners = function (that) {
-        // any click on the container must have the effect of hiding it, since its action 
-        // always completes
-        that.container.click(that.hide);
-
         var langList = that.locate("language");
         langList.click(function (evt) {
             that.activate(langList.index(evt.currentTarget));
         });
 
         that.locate("showHide").click(function (evt) {
-            that.writeIndirect("showHidePath", !that.readIndirect("showHidePath"), "menuButton"); 
+            that.showHide()
         });
 
         that.applier.modelChanged.addListener(that.options.showHidePath, that.updateShowHide);
@@ -163,22 +148,27 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         that.toggleView = function () {
             that.container.toggle();
         };
-        that.hide = function () {
-            that.container.hide();
-        };
     };
 
     fluid.videoPlayer.languageMenu.postInit = function (that) {
         that.show = function () {
             that.container.show();
         };
+        that.hide = function () {
+            that.container.hide();
+        };
         that.showAndSelect = function () {
             that.show();
             that.container.fluid("selectable.select", that.locate("menuItem").last());
         };
         that.activate = function (index) {
             that.writeIndirect("currentLanguagePath", [index]);
             that.writeIndirect("showHidePath", true);
+            that.hide();
+        };
+        that.showHide = function () {
+            that.writeIndirect("showHidePath", !that.readIndirect("showHidePath"), "menuButton"); 
+            that.hide();
         };
     };
 
@@ -258,7 +248,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
 
     fluid.videoPlayer.languageControls.setUpKeyboardA11y = function (that) {
         fluid.tabindex(that.locate("menu"), -1);
-        that.locate("button").fluid("activatable", [fluid.identity, {
+        var button = that.locate("button");
+        button.fluid("activatable", [fluid.identity, {
             additionalBindings: [{
                 // in addition to space and enter, we want the UP arrow key to show the menu
                 // but we also want it to automatically select the first item above the button,
@@ -270,6 +261,18 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                 }
             }]
         }]);
+        that.container.fluid("activatable", [fluid.identity, {
+            additionalBindings: [{
+                key: $.ui.keyCode.ESCAPE,
+                activateHandler: function () {
+                    that.menu.hide();
+                    button.focus();
+                }
+            }]
+        }]);
+        that.menu.events.hiddenByKeyboard.addListener(function () {
+            button.focus();
+        });
         fluid.deadMansBlur(that.container, {
             exclusions: [that.menu.options.selectors.menuItem, that.options.selectors.button],
             handler: function () {

diff --git a/js/VideoPlayer.js b/js/VideoPlayer.js
@@ -77,19 +77,15 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             key: 70
         },
         volumePlus: {
-            modifier: $.ui.keyCode.SHIFT,
             key: $.ui.keyCode.UP
         },
         volumeMinus: {
-            modifier: $.ui.keyCode.SHIFT,
             key: $.ui.keyCode.DOWN
         },
         forward: {
-            modifier: $.ui.keyCode.SHIFT,
             key: $.ui.keyCode.RIGHT
         },
         rewind: {
-            modifier: $.ui.keyCode.SHIFT,
             key: $.ui.keyCode.LEFT
         },
         escape: {
@@ -330,7 +326,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                     that.applier.fireChangeRequest( {
                         path: "volume",
                         value: that.model.volume + 10
-                    })
+                    });
+                    return false;
                 }
             }, {
                 modifier: that.options.keyBindings.volumeMinus.modifier,
@@ -339,7 +336,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
                     that.applier.fireChangeRequest( {
                         path: "volume",
                         value: that.model.volume - 10
-                    })
+                    });
+                    return false;
                 }
             }, {
                 modifier: that.options.keyBindings.forward.modifier,

diff --git a/js/VideoPlayer_controllers.js b/js/VideoPlayer_controllers.js
@@ -459,20 +459,20 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
 
         fluid.activatable(that.container, function (evt) {
             that.muteButton.press();
-        });
-        // TODO: This will be converted to use the activatable plugin
-        // as part of FLUID-4552
-        that.container.keydown(function (evt) {
-            var volumeControl = that.locate("volumeControl");
-            var code = evt.which ? evt.which : evt.keyCode;
-            if ((code === $.ui.keyCode.UP)  || (code === $.ui.keyCode.RIGHT)) {
-                volumeControl.slider("value", volumeControl.slider("value") + 1);
-            } else if ((code === $.ui.keyCode.DOWN)  || (code === $.ui.keyCode.LEFT)) {
-                volumeControl.slider("value", volumeControl.slider("value") - 1);
-            } else {
-                return true;
-            }
-            return false;
+        }, {
+            additionalBindings: [{
+                key: $.ui.keyCode.UP,
+                activateHandler: function () {
+                    volumeControl.slider("value", volumeControl.slider("value") + 1);
+                    return false;
+                }
+            },{
+                key: $.ui.keyCode.DOWN,
+                activateHandler: function () {
+                    volumeControl.slider("value", volumeControl.slider("value") - 1);
+                    return false;
+                }
+            }]
         });
     };