Skip to content

Commit

Permalink
Merge remote-tracking branch 'michelled/demo' into FLUID-4596
Browse files Browse the repository at this point in the history 
* michelled/demo:
  FLUID-4621: Added toggle button and language menu files to the Mammals demo.
  FLUID-4610: Fixed the typo of "langaugeDropdown".
  FLUID-4621: Adds Anastasia's version of the ToggleButton from her FLUID-4556 branch. https://github.com/acheetham/videoPlayer/blob/b6f72ef9a7bff4c4500f32787bf3092473cb58e5/js/VideoPlayer_controllers.js
  FLUID-4607: Adding in the media panel CSS file.
  FLUD-4621: Splits toggle button, language menu, and language button into two separate files.
  FLUID-4607: Changing the fat panel frame html to link in MyInfusion instead of the individual javascript files.
  FLUID-4610: Fixed the interval event queuing-up issue when the scrubber bar is slid back and forth quickly.
  FLUID-4607: Upgrading Infusion to the version that has the media panel.
  FLUID-4570: Fixed maximize button in Chrome, Firefox and Safari. Commented on the code which must be moved away from the fullscreen function.
  FLUID-4570: An attempt to make a full screen video using webkit.
  • Loading branch information
@colinbdclark
colinbdclark committed Feb 27, 2012
2 parents 9073207 + 35b9996 commit e0e0d45
Show file tree
Hide file tree
Showing 78 changed files with 43,534 additions and 4,939 deletions.
2 changes: 2 additions & 0 deletions demos/Mammals.html
View file
Expand Up @@ -34,6 +34,8 @@
<!-- VideoPlayer dependencies -->
<script type="text/javascript" src="../js/VideoPlayer.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_controllers.js"></script>
<script type="text/javascript" src="../js/ToggleButton.js"></script>
<script type="text/javascript" src="../js/MenuButton.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_media.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_transcript.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_intervalEventsConductor.js"></script>
Expand Down
2 changes: 2 additions & 0 deletions demos/VideoPlayer.html
View file
Expand Up @@ -32,6 +32,8 @@
<script type="text/javascript" src="../js/VideoPlayer.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_html5Captionator.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_controllers.js"></script>
<script type="text/javascript" src="../js/ToggleButton.js"></script>
<script type="text/javascript" src="../js/MenuButton.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_media.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_transcript.js"></script>
<script type="text/javascript" src="../js/VideoPlayer_intervalEventsConductor.js"></script>
Expand Down
365 changes: 365 additions & 0 deletions js/MenuButton.js
View file
@@ -0,0 +1,365 @@
/*
Copyright 2012 OCAD University
Licensed under the Educational Community License (ECL), Version 2.0 or the New
BSD license. You may not use this file except in compliance with one these
Licenses.
You may obtain a copy of the ECL 2.0 License and BSD License at
https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
*/

/*global jQuery, window, fluid*/

// JSLint options
/*jslint white: true, funcinvoke: true, undef: true, newcap: true, nomen: true, regexp: true, bitwise: true, browser: true, forin: true, maxerr: 100, indent: 4 */


(function ($) {

/*****************************************************************************
Language Menu subcomponent
Used for Captions, Transcripts, Audio Descriptions.
Starts with a list of languages and adds the "none, please" options.
Eventually, we'll add the "Make new" and "Request new" buttons.
Note that the language menu cannot share the model of the controls: it
needs the list of captions (or transcripts, etc) as its model for rendering.
*****************************************************************************/
fluid.defaults("fluid.videoPlayer.controllers.languageMenu", {
gradeNames: ["fluid.rendererComponent", "autoInit"],
renderOnInit: true,
preInitFunction: "fluid.videoPlayer.controllers.languageMenu.preInit",
postInitFunction: "fluid.videoPlayer.controllers.languageMenu.postInit",
finalInitFunction: "fluid.videoPlayer.controllers.languageMenu.finalInit",
produceTree: "fluid.videoPlayer.controllers.languageMenu.produceTree",
languages: {},
model: {},
events: {
onReady: null,
activated: null,
hiddenByKeyboard: null,
languageOnOff: null,
trackChanged: "preventable"
},
listeners: {
trackChanged: {
listener: "fluid.videoPlayer.controllers.languageMenu.updateTracks",
priority: "last"
}
},
selectors: {
menuItem: ".flc-videoPlayer-menuItem",
language: ".flc-videoPlayer-language",
showHide: ".flc-videoPlayer-languageNone"
},
repeatingSelectors: ["language"],
strings: {
showLanguage: "Show Language",
hideLanguage: "Hide Language"
},
styles: {
selected: "fl-videoPlayer-menuItem-selected",
active: "fl-videoPlayer-menuItem-active"
},
hideOnInit: true
});

// TODO: Could this be specified declaratively, in a "protoTree" option?
fluid.videoPlayer.controllers.languageMenu.produceTree = function (that) {
var tree = {
// create a menu item for each language in the model
expander: {
type: "fluid.renderer.repeat",
repeatID: "language",
controlledBy: "languages",
pathAs: "lang",
tree: {
value: "${{lang}.label}"
}
},
// add the 'turn off' option
showHide: {
value: that.model.showLanguage ? that.options.strings.hideLanguage : that.options.strings.showLanguage
}
};
return tree;
};

fluid.videoPlayer.controllers.languageMenu.selectLastItem = function (that) {
that.container.fluid("selectable.select", that.locate("menuItem").last());
};

fluid.videoPlayer.controllers.languageMenu.setUpKeyboardA11y = function (that) {
that.container.fluid("tabbable");
that.container.fluid("selectable", {
direction: fluid.a11y.orientation.VERTICAL,
selectableSelector: that.options.selectors.menuItem,
onSelect: function (el) {
that.show();
$(el).addClass(that.options.styles.selected);
},
onUnselect: function (el) {
$(el).removeClass(that.options.styles.selected);
},
rememberSelectionState: false,
autoSelectFirstItem: false,
noWrap: true
});

// 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.activatedByKeyboard.fire();
return false;
});
var noneButton = that.locate("showHide");
noneButton.fluid("activatable", function (evt) {
that.applier.requestChange("showLanguage", !that.model.showLanguage);
that.hide();
if (that.model.showLanguage) {
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();
that.events.hiddenByKeyboard.fire();
return false;
}
return true;
});
};

fluid.videoPlayer.controllers.languageMenu.bindEventListeners = function (that) {
var langList = that.locate("language");
langList.click(function (evt) {
that.activate(langList.index(evt.currentTarget));
return false;
});

that.locate("showHide").click(function (evt) {
that.applier.requestChange("showLanguage", !that.model.showLanguage);
that.hide();
return false;
});

// TODO: We currently only support one active language. Indexing into the array will change
// when we support more
that.applier.modelChanged.addListener("activeLanguages.0", function (model, oldModel, changeRequest) {
var newTrack = model.activeLanguages;
var oldTrack = oldModel.activeLanguages;
if (newTrack[0] === oldTrack[0]) {
return;
}
that.applier.requestChange("showLanguage", true);
that.events.trackChanged.fire(that, newTrack, oldTrack);
});

that.applier.modelChanged.addListener("showLanguage", function (model, oldModel, changeRequest) {
// Prevent the mutual triggering between the "menu" and "transcript" components from being trapped into infinite loop
if (model.showLanguage === oldModel.showLanguage) {
return;
}
that.locate("showHide").text(that.model.showLanguage ? that.options.strings.hideLanguage : that.options.strings.showLanguage);
that.events.languageOnOff.fire(that.model.showLanguage);
});

};

fluid.videoPlayer.controllers.languageMenu.updateTracks = function (that, activeTrack) {
var menuItems = that.locate("menuItem");
menuItems.removeClass(that.options.styles.selected).removeClass(that.options.styles.active);
$(menuItems[that.model.activeLanguages[0]]).addClass(that.options.styles.active);
that.hide();
};

fluid.videoPlayer.controllers.languageMenu.preInit = function (that) {
if (that.options.model.languages) {
if (that.options.model.activeLanguages[0] === undefined) {
that.options.model.activeLanguages[0] = 0;
}
}

that.toggleView = function () {
that.container.toggle();
return false;
};
that.hide = function () {
that.locate("language").removeClass(that.options.styles.selected);
that.container.hide();
};
};

fluid.videoPlayer.controllers.languageMenu.postInit = function (that) {
that.show = function () {
that.container.show();
};
that.showAndSelect = function () {
that.show();
that.container.fluid("selectable.select", that.locate("menuItem").last());
};
that.activate = function (index) {
that.applier.requestChange("activeLanguages.0", index);
};
that.requestShowHide = function (showHide) {
that.applier.requestChange("showLanguage", showHide);
};
};

fluid.videoPlayer.controllers.languageMenu.finalInit = function (that) {
fluid.videoPlayer.controllers.languageMenu.bindEventListeners(that);
fluid.videoPlayer.controllers.languageMenu.setUpKeyboardA11y(that);
if (that.model.languages) {
$(that.locate("menuItem")[that.model.activeLanguages[0]]).addClass(that.options.styles.active);
}
that.hide();
that.events.onReady.fire(that);
};


/*****************************************************************************
Language Controls subcomponent: a button and its associated languageMenu
Used for Captions, Transcripts, Audio Descriptions.
Note that the "pressed/released" state of the button reflects the show/hide
state of the captions, and so does not become "pressed" when activated;
activation only shows the menu
*****************************************************************************/
fluid.defaults("fluid.videoPlayer.controllers.languageControls", {
gradeNames: ["fluid.viewComponent", "autoInit"],
preInitFunction: "fluid.videoPlayer.controllers.languageControls.preInit",
finalInitFunction: "fluid.videoPlayer.controllers.languageControls.finalInit",
selectors: {
button: ".flc-videoPlayer-languageButton",
menu: ".flc-videoPlayer-languageMenu"
},
events: {
onReady: null,
onRenderingComplete: null,
activatedByKeyboard: null
},
languages: [],
currentLanguagePath: "",
showHidePath: "",
strings: {
showLanguage: "Show Language",
hideLanguage: "Hide Language"
},
components: {
button: {
type: "fluid.toggleButton",
container: "{languageControls}.container",
options: {
selectors: {
button: "{languageControls}.options.selectors.button"
},
// TODO: Strings should be moved out into a single top-level bundle (FLUID-4590)
strings: "{languageControls}.options.strings",
events: {
activatedByKeyboard: "{languageControls}.events.activatedByKeyboard"
},
model: "{languageControls}.model",
modelPath: "{languageControls}.options.showHidePath",
applier: "{languageControls}.applier"
}
},
menu: {
type: "fluid.videoPlayer.controllers.languageMenu",
container: "{languageControls}.dom.menu",
options: {
model: {
languages: "{languageControls}.options.languages"
},
modelPath: "{languageControls}.options.modelPath",
showHidePath: "{languageControls}.options.showHidePath",
strings: "{languageControls}.options.strings"
}
},
eventBinder: {
type: "fluid.videoPlayer.controllers.languageControls.eventBinder",
createOnEvent: "onRenderingComplete"
}
}
});

fluid.videoPlayer.controllers.languageControls.preInit = function (that) {
that.options.components.menu.options.model.activeLanguages = fluid.get(that.model, that.options.currentLanguagePath);
that.options.components.menu.options.model.showLanguage = fluid.get(that.model, that.options.showHidePath);

that.updateLanguage = function (newIndex) {
that.applier.requestChange(that.options.currentLanguagePath, newIndex);
};

that.updateShowHide = function (show) {
that.applier.requestChange(that.options.showHidePath, show);
};
};

fluid.videoPlayer.controllers.languageControls.setUpKeyboardA11y = function (that) {
fluid.tabindex(that.locate("menu"), -1);
that.locate("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,
// i.e. the bottom item in the menu
key: $.ui.keyCode.UP,
activateHandler: function () {
that.events.activatedByKeyboard.fire();
return false;
}
}]
}]);
fluid.deadMansBlur(that.container, {
exclusions: [that.menu.options.selectors.menuItem, that.options.selectors.button],
handler: function () {
that.menu.hide();
}
});

// TODO: This is a workaround for around FLUID-4606 (there's a button tag inside the anchor;
// it's for styling only, and we don't want it in the tab order)
$("button", that.locate("button")).fluid("tabindex", -1);
};

fluid.videoPlayer.controllers.languageControls.finalInit = function (that) {
fluid.videoPlayer.controllers.languageControls.setUpKeyboardA11y(that);
that.events.onRenderingComplete.fire(that);

that.applier.modelChanged.addListener(that.options.showHidePath, function (model, oldModel, changeRequest) {
// TODO: This assumes an API for the button subcomponent: Should this be accomplished though and event?
that.button.updatePressedState();
});
that.events.onReady.fire(that);

};

/**************************************************************************************
* LanguageControls Event Binder: Binds events between components "button" and "menu" *
**************************************************************************************/

fluid.defaults("fluid.videoPlayer.controllers.languageControls.eventBinder", {
gradeNames: ["fluid.eventedComponent", "autoInit"],
events: {
onReady: null
},
listeners: {
"{button}.events.onPress": "{menu}.toggleView",
"{button}.events.activatedByKeyboard": "{menu}.showAndSelect",

"{menu}.events.trackChanged": {
listener: "{languageControls}.updateLanguage",
args: ["{arguments}.1"]
},
"{menu}.events.languageOnOff": "{languageControls}.updateShowHide"
},
finalInitFunction: "fluid.videoPlayer.controllers.languageControls.eventBinder.finalInit"
});
fluid.videoPlayer.controllers.languageControls.eventBinder.finalInit = function (that) {
that.events.onReady.fire();
};
})(jQuery);

0 comments on commit e0e0d45

Please sign in to comment.