Skip to content

Commit

Permalink
Merge remote-tracking branch 'acheetham/FLUID-4786' into demo
Browse files Browse the repository at this point in the history 
* acheetham/FLUID-4786:
  FLUID-4786: A bit more code clean-up
  FLUID-4786: Add one MenuButton test
  FLUID-4786: Add aria-controls to captions menu using same method as transcripts menu.
  FLUID-4786: Code clean-up.
  FLUID-4786: Clean-up, de-linting.
  FLUID-4786: Clean up arguments to events
  FLUID-4786: Code clean-up; move boiled event args specification to a demands block
  FLUID-4786: Start cleaning up MenuButton.js; revert infusion to master
  FLUID-4786: Clean up tests for aria-controls
  FLUID-4786: Working on tests for aria-controls
  FLUID-4786: Get the ID of the transcript area to the aria-controls setup function
  FLUID-4786: More code clean-up
  FLUID-4786: Convey menu and transcrip to menu component, start cleaning up; need to move stuff into demands blocks
  FLUID-4786: Successfully convey controls and transcript to controls-level function
  FLUID-4786: temporary commit
  FLUID-4786: Temporary commit
  FLUID-4786: in-progress commit
  FLUID-4786: Back out the transcript menu 'aria-controls' work
  FLUID-4786: aria-controls on transcript area language drop-down
  FLUID-4786: Replace deferredCall with dom binder reference
  FLUID-4786: Add aria-controls to MenuButton button, referencing the menu
  FLUID-4786: Add comments noting problem with transcript subcomponent instantiation
  FLUID-4786: Fix bug where transcript subcomponent was being instantiated twice.
  FLUID-4786: First pass at setting up the 'aria-controls' attribute.
  FLUID-4786: Use decorators to add aria attributes; use menuitemcheckbox instead of menuitem
  FLUID-4786: Tests for ARIA
  FLUID-4786: Expaning ARIA on MenuButton.
  FLUID-4786: Add ARIA to the MenuButton components.
  • Loading branch information
@michelled
michelled committed Oct 9, 2012
2 parents 24d98fb + a90b08a commit 3d8969b
Show file tree
Hide file tree
Showing 10 changed files with 399 additions and 61 deletions.
100 changes: 74 additions & 26 deletions js/MenuButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,14 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
events: {
onReady: null,
activated: null,
hiddenByKeyboard: null
hiddenByKeyboard: null,
onControlledElementReady: null
},
listeners: {
onControlledElementReady: {
listener: "fluid.videoPlayer.languageMenu.setAriaControlsAttr",
args: ["{languageMenu}", "{arguments}.0"]
}
},
selectors: {
menuItem: ".flc-videoPlayer-menuItem",
Expand Down Expand Up @@ -76,12 +83,28 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
controlledBy: "languages",
pathAs: "lang",
tree: {
value: "${{lang}.label}"
value: "${{lang}.label}",
decorators: {
type: "attrs",
attributes: {
"role": "menuitemradio",
"aria-checked": "false",
"aria-selected": "false"
}
}
}
},
// add the 'turn off' option
showHide: {
value: that.options.strings[that.readIndirect("showHide")? "hideLanguage" : "showLanguage"]
value: that.options.strings[that.readIndirect("showHidePath") ? "hideLanguage" : "showLanguage"],
decorators: {
type: "attrs",
attributes: {
"role": "menuitemcheckbox",
"aria-checked": "false",
"aria-selected": "false"
}
}
}
};
return tree;
Expand Down Expand Up @@ -123,7 +146,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
});

that.locate("showHide").click(function (evt) {
that.showHide()
that.showHide();
});

that.applier.modelChanged.addListener(that.options.showHidePath, that.updateShowHide);
Expand All @@ -134,48 +157,60 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
fluid.videoPlayer.languageMenu.updateTracks = function (that) {
var menuItems = that.locate("menuItem");
menuItems.removeClass(that.options.styles.selected).removeClass(that.options.styles.active);
menuItems.attr("aria-checked", "false").attr("aria-selected", "false");
var langIndex = that.readIndirect("currentLanguagePath")[0];
$(menuItems[langIndex]).addClass(that.options.styles.active);
var selectedItem = $(menuItems[langIndex]);
selectedItem.addClass(that.options.styles.active);
selectedItem.attr("aria-checked", "true").attr("aria-selected", "true");
};

fluid.videoPlayer.languageMenu.updateShowHide = function(that) {
fluid.videoPlayer.languageMenu.updateShowHide = function (that) {
var showHide = that.readIndirect("showHidePath");
that.locate("showHide").text(that.options.strings[showHide? "hideLanguage": "showLanguage"]);
that.locate("showHide").text(that.options.strings[showHide ? "hideLanguage" : "showLanguage"]);
};

fluid.videoPlayer.languageMenu.preInit = function (that) {
fluid.videoPlayer.languageMenu.setAriaControlsAttr = function (that, controlledId) {
that.container.attr("aria-controls", controlledId);
that.locate("menuItem").attr("aria-controls", controlledId);
};

fluid.videoPlayer.languageMenu.preInit = function (that) {
that.toggleView = function () {
that.container.toggle();
that.container.attr("aria-hidden", !that.container.is(':visible'));
};
};

fluid.videoPlayer.languageMenu.postInit = function (that) {
that.show = function () {
that.showMenu = function () {
that.container.show();
that.container.attr("aria-hidden", "false");
};
that.hide = function () {
that.hideMenu = function () {
that.container.hide();
that.container.attr("aria-hidden", "true");
};
that.showAndSelect = function () {
that.show();
that.showMenu();
that.container.fluid("selectable.select", that.locate("menuItem").last());
};
that.activate = function (index) {
that.writeIndirect("currentLanguagePath", [index]);
that.writeIndirect("showHidePath", true);
that.hide();
that.hideMenu();
};
that.showHide = function () {
that.writeIndirect("showHidePath", !that.readIndirect("showHidePath"), "menuButton");
that.hide();
that.hideMenu();
};
};

fluid.videoPlayer.languageMenu.finalInit = function (that) {
fluid.videoPlayer.languageMenu.bindEventListeners(that);
fluid.videoPlayer.languageMenu.setUpKeyboardA11y(that);
that.hide();

that.container.attr("role", "menu");
that.hideMenu();
that.updateTracks();
that.updateShowHide();
that.events.onReady.fire(that);
Expand All @@ -198,7 +233,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
},
events: {
onReady: null,
onRenderingComplete: null
onRenderingComplete: null,
onControlledElementReady: null
},
languages: [],
currentLanguagePath: "",
Expand All @@ -224,7 +260,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
selectors: {
button: "{languageControls}.options.selectors.button"
},
strings: "{languageControls}.options.strings",
strings: "{languageControls}.options.strings"
}
},
menu: {
Expand All @@ -236,7 +272,10 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
applier: "{languageControls}.applier",
showHidePath: "{languageControls}.options.showHidePath",
currentLanguagePath: "{languageControls}.options.currentLanguagePath",
strings: "{languageControls}.options.strings"
strings: "{languageControls}.options.strings",
events: {
onControlledElementReady: "{languageControls}.events.onControlledElementReady"
}
}
},
eventBinder: {
Expand Down Expand Up @@ -265,7 +304,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
additionalBindings: [{
key: $.ui.keyCode.ESCAPE,
activateHandler: function () {
that.menu.hide();
that.menu.hideMenu();
button.focus();
}
}]
Expand All @@ -276,20 +315,30 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
fluid.deadMansBlur(that.container, {
exclusions: [that.menu.options.selectors.menuItem, that.options.selectors.button],
handler: function () {
that.menu.hide();
that.menu.hideMenu();
}
});
};

fluid.videoPlayer.languageControls.setUpAria = function (that) {
var containerID = fluid.allocateSimpleId(that.menu.container);
that.button.locate("button").attr({
"aria-owns": containerID,
"aria-controls": containerID,
"aria-haspopup": "true"
});
};

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


fluid.videoPlayer.languageControls.setUpKeyboardA11y(that);
fluid.videoPlayer.languageControls.setUpAria(that);

function refreshButtonClass() {
var showHide = that.readIndirect("showHidePath");
that.button.locate("button").toggleClass(that.options.styles.buttonWithShowing, showHide);
};

}
that.applier.modelChanged.addListener(that.options.showHidePath, refreshButtonClass);
refreshButtonClass();
that.events.onReady.fire(that);
Expand All @@ -302,8 +351,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
fluid.defaults("fluid.videoPlayer.languageControls.eventBinder", {
gradeNames: ["fluid.eventedComponent", "autoInit"],
listeners: {
"{button}.events.onPress": "{menu}.toggleView",
},
"{button}.events.onPress": "{menu}.toggleView"
}
});
})(jQuery);

52 changes: 38 additions & 14 deletions js/VideoPlayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
onControllersReady: "{videoPlayer}.events.onControllersReady",
onStartScrub: "{videoPlayer}.events.onStartScrub",
onScrub: "{videoPlayer}.events.onScrub",
afterScrub: "{videoPlayer}.events.afterScrub"
afterScrub: "{videoPlayer}.events.afterScrub",
onTranscriptsReady: "{videoPlayer}.events.canBindTranscriptMenu",
onCaptionsReady: "{videoPlayer}.events.canBindCaptionMenu"
}
}
},
Expand All @@ -155,7 +157,10 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
options: {
model: "{videoPlayer}.model",
applier: "{videoPlayer}.applier",
captions: "{videoPlayer}.options.video.captions"
captions: "{videoPlayer}.options.video.captions",
events: {
onReady: "{videoPlayer}.events.onCaptionsReady"
}
}
},
transcript: {
Expand Down Expand Up @@ -189,7 +194,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
onCurrentTranscriptChanged: "{videoPlayer}.events.onCurrentTranscriptChanged",
onTranscriptHide: "{videoPlayer}.events.onTranscriptHide",
onTranscriptShow: "{videoPlayer}.events.onTranscriptShow",
onTranscriptElementChange: "{videoPlayer}.events.onTranscriptElementChange"
onTranscriptElementChange: "{videoPlayer}.events.onTranscriptElementChange",
onTranscriptsLoaded: "{videoPlayer}.events.onTranscriptsLoaded"
}
}
},
Expand Down Expand Up @@ -242,7 +248,26 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
// The following events are private
onCreateControllersReady: null,
onCreateMediaReady: null,
onHTML5BrowserDetected: null
onHTML5BrowserDetected: null,

// private events used for associating menus with what they control via ARIA
onTranscriptsReady: null,
onTranscriptsLoaded: null,
onCaptionsReady: null,
canBindTranscriptMenu: {
events: {
controllers: "onControllersReady",
transcripts: "onTranscriptsLoaded"
},
args: ["{arguments}.transcripts.1"]
},
canBindCaptionMenu: {
events: {
controllers: "onControllersReady",
captions: "onCaptionsReady"
},
args: ["{arguments}.captions.1"]
}
},
invokers: {
resize: {
Expand Down Expand Up @@ -336,8 +361,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
}, {
modifier: that.options.keyBindings.volumePlus.modifier,
key: that.options.keyBindings.volumePlus.key,
activateHandler: function() {
that.applier.fireChangeRequest( {
activateHandler: function () {
that.applier.fireChangeRequest({
path: "volume",
value: that.model.volume + 10
});
Expand All @@ -346,8 +371,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
}, {
modifier: that.options.keyBindings.volumeMinus.modifier,
key: that.options.keyBindings.volumeMinus.key,
activateHandler: function() {
that.applier.fireChangeRequest( {
activateHandler: function () {
that.applier.fireChangeRequest({
path: "volume",
value: that.model.volume - 10
});
Expand Down Expand Up @@ -436,18 +461,18 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
};

fluid.videoPlayer.addDefaultKind = function (tracks, defaultKind) {
fluid.each(tracks, function(track) {
fluid.each(tracks, function (track) {
if (!track.kind) {
track.kind = defaultKind;
}
});
};

fluid.videoPlayer.preInit = function (that) {
fluid.each(that.options.defaultKinds, function(defaultKind, index) {
fluid.videoPlayer.addDefaultKind(fluid.get(that.options.video, index), defaultKind);
fluid.each(that.options.defaultKinds, function (defaultKind, index) {
fluid.videoPlayer.addDefaultKind(fluid.get(that.options.video, index), defaultKind);
});

that.fullscreen = function () {
if (that.model.fullscreen === true) {
fluid.browser.requestFullScreen.apply(that.locate("video")[0]);
Expand Down Expand Up @@ -566,7 +591,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
that.locate("controllers").hide();

// Ensure <object> element is not in tab order, for IE9
$("object", that.locate("video")).attr("tabindex", "-1")
$("object", that.locate("video")).attr("tabindex", "-1");

that.events.onReady.fire(that);
});
Expand Down Expand Up @@ -639,5 +664,4 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
}
}
});

})(jQuery);
12 changes: 11 additions & 1 deletion js/VideoPlayer_controllers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
hideLanguage: "Hide Captions",
press: "Captions",
release: "Captions"
},
events: {
onControlledElementReady: "{controllers}.events.onCaptionsReady"
}
}
},
Expand All @@ -107,6 +110,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
hideLanguage: "Hide Transcripts",
press: "Transcripts",
release: "Transcripts"
},
events: {
onControlledElementReady: "{controllers}.events.onTranscriptsReady"
}
}
},
Expand Down Expand Up @@ -161,7 +167,11 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
onStartTimeChange: null,
onTimeChange: null,
afterTimeChange: null,
onMarkupReady: null
onMarkupReady: null,

// private event used for associating transcript menu with transcript via ARIA
onTranscriptsReady: null,
onCaptionsReady: null
},

selectors: {
Expand Down
4 changes: 2 additions & 2 deletions js/VideoPlayer_html5Captionator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ https://source.fluidproject.org/svn/LICENSE.txt

var trackTag = $("<track />");
var attributes = fluid.filterKeys(fluid.copy(element), ["kind", "src", "type", "srclang", "label"], false);
if ($.inArray(key, that.readIndirect("elPaths.currentCaptions")) !== -1 && that.readIndirect("elPaths.displayCaption")) {
if ($.inArray(key, that.readIndirect("elPaths.currentCaptions")) !== -1 && that.readIndirect("elPaths.displayCaptions")) {
attributes["default"] = "true";
}

Expand All @@ -110,7 +110,7 @@ https://source.fluidproject.org/svn/LICENSE.txt
});

bindCaptionatorModel(that);
that.events.onReady.fire(that);
that.events.onReady.fire(that, fluid.allocateSimpleId(that.locate("caption")));
};

})(jQuery);
Loading

0 comments on commit 3d8969b

Please sign in to comment.