Skip to content

Commit

Permalink
Merge branch 'demo' into FLUID-4701
Browse files Browse the repository at this point in the history 
Conflicts:
	js/VideoPlayer.js
	js/VideoPlayer_html5Captionator.js
  • Loading branch information
@michelled
michelled committed Oct 10, 2012
2 parents 684bb8b + 3d8969b commit 4635625
Show file tree
Hide file tree
Showing 15 changed files with 527 additions and 119 deletions.
7 changes: 4 additions & 3 deletions css/VideoPlayer.css
View file
Expand Up @@ -41,6 +41,7 @@
.fl-videoPlayer-tooltip {
position : absolute;
padding : 3px 5px;
z-index : 1000; /* Tooltips should be always shown above any other videoPlayer html element */
}
.fl-theme-uio-yb .fl-videoPlayer-tooltip,
.fl-theme-uio-by .fl-videoPlayer-tooltip,
Expand Down Expand Up @@ -90,7 +91,7 @@
}

.fl-videoPlayer-controller-buttons * {
display: inline;
display: inline-block;
}

.fl-videoPlayer-optional {
Expand Down Expand Up @@ -265,8 +266,8 @@ a.fl-videoPlayer-button-wrapper {
border-style: solid;
border-color: #c2c2c2;
position: absolute;
bottom: 19px; /* 20px is right on FF */
right: 1px; /* 5px is right on FF */
bottom: 30px;
right: 0px;
width: 25%;
background-color: #F2F2F2;
}
Expand Down
2 changes: 1 addition & 1 deletion html/videoPlayer_template.html
View file
Expand Up @@ -14,7 +14,7 @@
<div class="fl-videoPlayer-controller-buttons-main">
<button type="button" class="flc-videoPlayer-play fl-videoPlayer-button"></button>

<div class="flc-videoPlayer-volumeContainer fl-videoPlayer-volumeContainer">
<div class="flc-videoPlayer-volumeContainer fl-videoPlayer-volumeContainer" title="Volume controls. Use up and down arrows to adjust volume, space or enter to mute">
<button type="button" class="flc-videoPlayer-mute fl-videoPlayer-button"></button>
<div class="flc-videoPlayer-volumeControl"></div>
</div>
Expand Down
100 changes: 74 additions & 26 deletions js/MenuButton.js
View file
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);

36 changes: 24 additions & 12 deletions js/ToggleButton.js
View file
Expand Up @@ -40,6 +40,23 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
strings: { // Integrators will likely override these strings
press: "Press",
release: "Release"
},
invokers: {
tooltipContentFunction: {
funcName: "fluid.toggleButton.tooltipContentFunction",
args: "{toggleButton}"
}
},
components: {
tooltip: {
type: "fluid.tooltip",
container: "{toggleButton}.dom.button",
options: {
styles: {
tooltip: "{toggleButton}.options.styles.tooltip"
}
}
}
}
});

Expand All @@ -62,6 +79,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
button.toggleClass(styles.pressed, pressed);
}
button.prop("aria-pressed", pressed);

that.tooltip.updateContent(that.tooltipContentFunction(that));
};

that.press = function () {
Expand All @@ -71,19 +90,12 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
};
};

fluid.toggleButton.setUpToggleButton = function (that) {
var toggleButton = that.locate("button");
toggleButton.attr("role", "button");

that.tooltip = fluid.tooltip(toggleButton, {
styles: {
tooltip: that.options.styles.tooltip
},
content: function () {
return that.options.strings[that.readIndirect("modelPath")? "release": "press"];
}
});
fluid.toggleButton.tooltipContentFunction = function (that) {
return that.options.strings[that.readIndirect("modelPath")? "release": "press"];
};

fluid.toggleButton.setUpToggleButton = function (that) {
that.locate("button").attr("role", "button");
that.refreshView();
};

Expand Down

0 comments on commit 4635625

Please sign in to comment.