Skip to content

Commit

Permalink
FLUID-4589: Separate the 'none' option from the list of languages
Browse files Browse the repository at this point in the history
  • Loading branch information
@acheetham
acheetham committed Feb 15, 2012
1 parent 7096574 commit 0a7af1f
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 50 deletions.
3 changes: 2 additions & 1 deletion html/videoPlayer_template.html
View file
Expand Up @@ -22,7 +22,8 @@
<div class="flc-videoPlayer-captionControls-container">
<button type="button" class="flc-videoPlayer-captions-button fl-videoPlayer-button fl-videoPlayer-captions-button"></button>
<ul class="flc-videoPlayer-captions-languageMenu fl-videoPlayer-languageMenu">
<li class="flc-videoPlayer-language fl-videoPlayer-menuItem"></li>
<li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
<li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
</ul>
</div>

Expand Down
4 changes: 2 additions & 2 deletions js/VideoPlayer_captionLoader.js
View file
Expand Up @@ -109,7 +109,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt

//Creates an ajax query and uses or not a convertor for the captions
that.loadCaptions = function () {
if (that.model.captions.currentTrack == that.model.captions.list.length - 1) {
if (that.model.captions.currentTrack == -1) {
that.applier.requestChange("states.displayCaptions", false);
return;
}
Expand Down Expand Up @@ -141,7 +141,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
bindCaptionLoaderModel(that);

//if we provided default captions when we created the component we load it
if (that.model.captions.list && (that.model.captions.currentTrack < that.model.captions.list.length - 1)) {
if (that.model.captions.list && (that.model.captions.currentTrack >= 0)) {
that.loadCaptions();
} else {
that.applier.fireChangeRequest({
Expand Down
74 changes: 48 additions & 26 deletions js/VideoPlayer_controllers.js
View file
Expand Up @@ -552,18 +552,25 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
events: {
onReady: null,
showHide: null,
selectLastItem: null,
unFocusMenu: null,
trackChanged: null
},
listeners: {
showHide: "{languageMenu}.toggleView",
selectLastItem: {
listener: "fluid.videoPlayer.controllers.languageMenu.selectLastItem",
args: ["{languageMenu}"]
},
trackChanged: {
listener: "fluid.videoPlayer.controllers.languageMenu.updateTracks",
args: ["{languageMenu}", "{arguments}.0"]
}
},
selectors: {
language: ".flc-videoPlayer-language"
menuItem: ".flc-videoPlayer-menuItem",
language: ".flc-videoPlayer-language",
none: ".flc-videoPlayer-languageNone"
},
repeatingSelectors: ["language"],
strings: {
Expand All @@ -587,16 +594,23 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
tree: {
value: "${{lang}.label}"
}
},
none: {
value: that.options.strings.languageIsOff
}
};
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.language,
selectableSelector: that.options.selectors.menuItem,
onSelect: function (el) {
that.show();
$(el).addClass(that.options.styles.selected);
Expand All @@ -608,12 +622,19 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
autoSelectFirstItem: false,
noWrap: true
});
that.locate("language").fluid("activatable", function (evt) {
that.activate(that.locate("language").index(evt.currentTarget));
var activateThroughKeyboard = function (that, index) {
that.activate(index);
that.events.unFocusMenu.fire();
return false;
};
that.locate("language").fluid("activatable", function (evt) {
return activateThroughKeyboard(that, that.locate("language").index(evt.currentTarget));
});
var noneButton = that.locate("none");
noneButton.fluid("activatable", function (evt) {
return activateThroughKeyboard(that, -1);
});
that.locate("language").last().keydown(function (evt) {
noneButton.keydown(function (evt) {
if (evt.which === $.ui.keyCode.DOWN) {
that.events.unFocusMenu.fire();
that.hide();
Expand All @@ -628,33 +649,32 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
that.events.trackChanged.fire(model.captions.currentTrack);
});

that.locate("language").click(function (evt) {
that.activate(that.locate("language").index(evt.currentTarget));
var langList = that.locate("language");
langList.click(function (evt) {
that.activate(langList.index(evt.currentTarget));
});
that.locate("none").click(function (evt) {
that.activate(-1);
});
};

fluid.videoPlayer.controllers.languageMenu.updateTracks = function (that, currentTrack) {
var list = that.locate("language");
var lastEntry = list.length - 1;
list.removeClass(that.options.styles.selected).removeClass(that.options.styles.active);
$(list[currentTrack]).addClass(that.options.styles.active);
fluid.videoPlayer.controllers.languageMenu.updateTracks = function (that, activeTrack) {
var menuItems = that.locate("menuItem");
menuItems.removeClass(that.options.styles.selected).removeClass(that.options.styles.active);

if (currentTrack === lastEntry) {
$(list[lastEntry]).text(that.options.strings.languageIsOff);
if (activeTrack === -1) {
that.locate("none").text(that.options.strings.languageIsOff).addClass(that.options.styles.active);
} else {
$(list[lastEntry]).text(that.options.strings.turnLanguageOff);
that.locate("none").text(that.options.strings.turnLanguageOff);
$(menuItems[activeTrack]).addClass(that.options.styles.active);
}
that.hide();
};

fluid.videoPlayer.controllers.languageMenu.preInit = function (that) {
if (that.options.model.captions.list) {
that.options.model.captions.list.push({
language: "none",
label: that.options.strings.languageIsOff
});
if (that.options.model.captions.currentTrack === undefined) {
that.options.model.captions.currentTrack = that.options.model.captions.list.length - 1;
that.options.model.captions.currentTrack = -1;
}
}

Expand All @@ -679,10 +699,9 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
fluid.videoPlayer.controllers.languageMenu.finalInit = function (that) {
fluid.videoPlayer.controllers.languageMenu.bindEventListeners(that);
fluid.videoPlayer.controllers.languageMenu.setUpKeyboardA11y(that);
fluid.videoPlayer.controllers.languageMenu.updateTracks(that, that.model.captions.currentTrack);

that.hide();
$(that.locate("language")[that.model.captions.currentTrack]).addClass(that.options.styles.active);

that.events.onReady.fire(that);
};

Expand All @@ -701,7 +720,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
events: {
onReady: null,
showHideMenu: null,
focusButton: null
focusButton: null,
moveSelectionToMenu: null
},
components: {
button: {
Expand All @@ -723,6 +743,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
applier: "{languageControls}.applier",
events: {
showHide: "{languageControls}.events.showHideMenu",
selectLastItem: "{languageControls}.events.moveSelectionToMenu",
unFocusMenu: "{languageControls}.events.focusButton"
},
strings: "{languageControls}.options.strings"
Expand All @@ -737,17 +758,18 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
key: $.ui.keyCode.UP,
activateHandler: function () {
that.events.showHideMenu.fire();
that.menu.container.fluid("selectable.select", $(".flc-videoPlayer-language:last"));
that.events.moveSelectionToMenu.fire();
return false;
}
}]
}]);
};

fluid.videoPlayer.controllers.languageControls.bindEventListeners = function (that) {
that.locate("button").click(that.events.showHideMenu.fire);
var button = that.locate("button");
button.click(that.events.showHideMenu.fire);
that.events.focusButton.addListener(function () {
that.locate("button").focus();
button.focus();
});
};

Expand Down
6 changes: 4 additions & 2 deletions tests/html/VideoPlayerControls-test.html
View file
Expand Up @@ -44,7 +44,8 @@ <h2 id="qunit-userAgent"></h2>
</div>

<ul id="basic-menu-test" class="fl-videoPlayer-menu">
<li class="flc-videoPlayer-language fl-videoPlayer-menuItem"></li>
<li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
<li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
</ul>

<div id="videoPlayer" class="fl-videoPlayer">
Expand All @@ -53,7 +54,8 @@ <h2 id="qunit-userAgent"></h2>
<div id="basic-languageControls-test">
<button type="button" class="flc-videoPlayer-languageButton"></button>
<ul id="basic-menu-test" class="flc-videoPlayer-languageMenu">
<li class="flc-videoPlayer-language fl-videoPlayer-menuItem"></li>
<li class="flc-videoPlayer-language flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
<li class="flc-videoPlayer-languageNone flc-videoPlayer-menuItem fl-videoPlayer-menuItem"></li>
</ul>
</div>

Expand Down
43 changes: 24 additions & 19 deletions tests/js/VideoPlayerControlsTests.js
View file
Expand Up @@ -448,54 +448,59 @@ fluid.registerNamespace("fluid.tests");

var verifyActivation = function (actionString, that, activatedIndex) {
// expect(5)
var langList = that.locate("language");
var menuItems = that.locate("menuItem");
jqUnit.assertEquals(actionString + " updates the active value", activatedIndex, that.model.captions.currentTrack);
jqUnit.assertTrue(actionString + " adds the 'active' style to the item", $(langList[activatedIndex]).hasClass(that.options.styles.active));
jqUnit.assertEquals("Only one item is active at a time", 1, $(that.options.selectors.language + "." + that.options.styles.active).length);
jqUnit.assertFalse(actionString + " removes 'selected' style from all items", langList.hasClass(that.options.styles.selected));
if (activatedIndex == -1) {
jqUnit.assertTrue(actionString + " adds the 'active' style to the item", that.locate("none").hasClass(that.options.styles.active));
} else {
jqUnit.assertTrue(actionString + " adds the 'active' style to the item", $(menuItems[activatedIndex]).hasClass(that.options.styles.active));
}
jqUnit.assertEquals("Only one item is active at a time", 1, $(that.options.selectors.menuItem + "." + that.options.styles.active).length);
jqUnit.assertFalse(actionString + " removes 'selected' style from all items", menuItems.hasClass(that.options.styles.selected));
jqUnit.notVisible(actionString + " hides the menu", that.container);
};

var verifySelection = function (actionString, that, selectedIndex, activeIndex) {
// expect(3)
var langList = that.locate("language");
var langList = that.locate("menuItem");
jqUnit.isVisible(actionString + " shows menu", that.container);
jqUnit.assertTrue(actionString + " adds 'selected' style to the language", $(langList[selectedIndex]).hasClass(that.options.styles.selected));
jqUnit.assertEquals(actionString + " does not update active value", activeIndex, that.model.captions.currentTrack);
};

videoPlayerControlsTests.asyncTest("Language Menu: Default configuration", function () {
var numLangs = baseMenuOpts.model.captions.list.length;
expect(31);
expect(32);
var testMenu = fluid.tests.initMenu({
listeners: {
onReady: function (that) {
var langList = that.locate("language");
jqUnit.assertEquals("Menu should have correct number of items (num languages+1)", numLangs + 1, langList.length);
jqUnit.assertEquals("Menu should have correct number of languages listed", numLangs, langList.length);
jqUnit.exists("Menu should have also have the 'none option'", that.locate("none"));
jqUnit.assertFalse("Initially, nothing should have 'selected' style", langList.hasClass(that.options.styles.selected));
jqUnit.assertEquals("Initially, 'no language' should be the active value", numLangs, that.model.captions.currentTrack);
jqUnit.assertTrue("Initially, 'none' option should have the 'active' style", $(langList[numLangs]).hasClass(that.options.styles.active));
jqUnit.assertEquals("Initially, 'none' option should have the correct text", that.options.strings.languageIsOff, $(langList[numLangs]).text());
jqUnit.assertEquals("Initially, nothing should be the 'currentTrack'", -1, that.model.captions.currentTrack);
jqUnit.assertTrue("Initially, 'none' option should have the 'active' style", that.locate("none").hasClass(that.options.styles.active));
jqUnit.assertEquals("Initially, 'none' option should have the correct text", that.options.strings.languageIsOff, that.locate("none").text());

jqUnit.notVisible("The menu should be hidden initially", that.container);
that.show();
jqUnit.isVisible("show() shows the menu", that.container);
that.hide();
jqUnit.notVisible("hide() hides the menu", that.container);

that.container.fluid("selectable.select", langList[numLangs]);
verifySelection("Selecting the 'none' options", that, numLangs, numLangs);
that.container.fluid("selectable.select", that.locate("none"));
verifySelection("Selecting the 'none' options", that, numLangs, -1);

that.container.fluid("selectable.select", langList[numLangs - 1]);
verifySelection("Selecting a language", that, numLangs - 1, numLangs);
verifySelection("Selecting a language", that, numLangs - 1, -1);

that.activate(0);
verifyActivation("Activating a language", that, 0);
jqUnit.assertEquals("Activating a language changes the 'none' option text", that.options.strings.turnLanguageOff, $(langList[numLangs]).text());
jqUnit.assertEquals("Activating a language changes the 'none' option text", that.options.strings.turnLanguageOff, that.locate("none").text());

that.activate(numLangs);
verifyActivation("Activating the 'none' option", that, numLangs);
jqUnit.assertEquals("Activating the 'none' option updates its text", that.options.strings.languageIsOff, $(langList[numLangs]).text());
that.activate(-1);
verifyActivation("Activating the 'none' option", that, -1);
jqUnit.assertEquals("Activating the 'none' option updates its text", that.options.strings.languageIsOff, that.locate("none").text());

that.show();
$(that.locate("language")[1]).click();
Expand All @@ -520,9 +525,9 @@ fluid.registerNamespace("fluid.tests");
listeners: {
onReady: function (that) {
var langList = that.locate("language");
jqUnit.assertEquals("Initially, 'none' option should have the correct custom text", testStrings.languageIsOff, $(langList[numLangs]).text());
jqUnit.assertEquals("Initially, 'none' option should have the correct custom text", testStrings.languageIsOff, that.locate("none").text());
that.activate(0);
jqUnit.assertEquals("Activating an item changes the 'none' option text to the custom text", testStrings.turnLanguageOff, $(langList[numLangs]).text());
jqUnit.assertEquals("Activating an item changes the 'none' option text to the custom text", testStrings.turnLanguageOff, that.locate("none").text());

start();
}
Expand Down

0 comments on commit 0a7af1f

Please sign in to comment.