assets/ableplayer/scripts/preference.js in wai-website-theme-1.3.1 vs assets/ableplayer/scripts/preference.js in wai-website-theme-1.4
- old
+ new
@@ -1,909 +1,909 @@
(function ($) {
- AblePlayer.prototype.setCookie = function(cookieValue) {
- Cookies.set('Able-Player', cookieValue, { expires:90 });
- // set the cookie lifetime for 90 days
- };
+ AblePlayer.prototype.setCookie = function(cookieValue) {
+ Cookies.set('Able-Player', cookieValue, { expires:90 });
+ // set the cookie lifetime for 90 days
+ };
- AblePlayer.prototype.getCookie = function() {
+ AblePlayer.prototype.getCookie = function() {
- var defaultCookie = {
- preferences: {},
- sign: {},
- transcript: {}
- };
+ var defaultCookie = {
+ preferences: {},
+ sign: {},
+ transcript: {}
+ };
- var cookie;
- try {
- cookie = Cookies.getJSON('Able-Player');
- }
- catch (err) {
- // Original cookie can't be parsed; update to default
- Cookies.getJSON(defaultCookie);
- cookie = defaultCookie;
- }
- if (cookie) {
- return cookie;
- }
- else {
- return defaultCookie;
- }
- };
+ var cookie;
+ try {
+ cookie = Cookies.getJSON('Able-Player');
+ }
+ catch (err) {
+ // Original cookie can't be parsed; update to default
+ Cookies.getJSON(defaultCookie);
+ cookie = defaultCookie;
+ }
+ if (cookie) {
+ return cookie;
+ }
+ else {
+ return defaultCookie;
+ }
+ };
- AblePlayer.prototype.updateCookie = function( setting ) {
+ AblePlayer.prototype.updateCookie = function( setting ) {
- // called when a particular setting had been updated
- // useful for settings updated indpedently of Preferences dialog
- // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle()
- // setting is any supported preference name (e.g., "prefCaptions")
- // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows)
- var cookie, $window, windowPos, available, i, prefName;
- cookie = this.getCookie();
+ // called when a particular setting had been updated
+ // useful for settings updated indpedently of Preferences dialog
+ // e.g., prefAutoScrollTranscript, which is updated in control.js > handleTranscriptLockToggle()
+ // setting is any supported preference name (e.g., "prefCaptions")
+ // OR 'transcript' or 'sign' (not user-defined preferences, used to save position of draggable windows)
+ var cookie, $window, windowPos, available, i, prefName;
+ cookie = this.getCookie();
- if (setting === 'transcript' || setting === 'sign') {
- if (setting === 'transcript') {
- $window = this.$transcriptArea;
- windowPos = $window.position();
- if (typeof cookie.transcript === 'undefined') {
- cookie.transcript = {};
- }
- cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute'
- cookie.transcript['zindex'] = $window.css('z-index');
- cookie.transcript['top'] = windowPos.top;
- cookie.transcript['left'] = windowPos.left;
- cookie.transcript['width'] = $window.width();
- cookie.transcript['height'] = $window.height();
- }
- else if (setting === 'sign') {
- $window = this.$signWindow;
- windowPos = $window.position();
- if (typeof cookie.sign === 'undefined') {
- cookie.sign = {};
- }
- cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute'
- cookie.sign['zindex'] = $window.css('z-index');
- cookie.sign['top'] = windowPos.top;
- cookie.sign['left'] = windowPos.left;
- cookie.sign['width'] = $window.width();
- cookie.sign['height'] = $window.height();
- }
- }
- else {
- available = this.getAvailablePreferences();
- // Rebuild cookie with current cookie values,
- // replacing the one value that's been changed
- for (i = 0; i < available.length; i++) {
- prefName = available[i]['name'];
- if (prefName == setting) {
- // this is the one that requires an update
- cookie.preferences[prefName] = this[prefName];
- }
- }
- }
- // Save updated cookie
- this.setCookie(cookie);
- };
+ if (setting === 'transcript' || setting === 'sign') {
+ if (setting === 'transcript') {
+ $window = this.$transcriptArea;
+ windowPos = $window.position();
+ if (typeof cookie.transcript === 'undefined') {
+ cookie.transcript = {};
+ }
+ cookie.transcript['position'] = $window.css('position'); // either 'relative' or 'absolute'
+ cookie.transcript['zindex'] = $window.css('z-index');
+ cookie.transcript['top'] = windowPos.top;
+ cookie.transcript['left'] = windowPos.left;
+ cookie.transcript['width'] = $window.width();
+ cookie.transcript['height'] = $window.height();
+ }
+ else if (setting === 'sign') {
+ $window = this.$signWindow;
+ windowPos = $window.position();
+ if (typeof cookie.sign === 'undefined') {
+ cookie.sign = {};
+ }
+ cookie.sign['position'] = $window.css('position'); // either 'relative' or 'absolute'
+ cookie.sign['zindex'] = $window.css('z-index');
+ cookie.sign['top'] = windowPos.top;
+ cookie.sign['left'] = windowPos.left;
+ cookie.sign['width'] = $window.width();
+ cookie.sign['height'] = $window.height();
+ }
+ }
+ else {
+ available = this.getAvailablePreferences();
+ // Rebuild cookie with current cookie values,
+ // replacing the one value that's been changed
+ for (i = 0; i < available.length; i++) {
+ prefName = available[i]['name'];
+ if (prefName == setting) {
+ // this is the one that requires an update
+ cookie.preferences[prefName] = this[prefName];
+ }
+ }
+ }
+ // Save updated cookie
+ this.setCookie(cookie);
+ };
- AblePlayer.prototype.getPreferencesGroups = function() {
+ AblePlayer.prototype.getPreferencesGroups = function() {
- // return array of groups in the order in which they will appear
- // in the Preferences popup menu
- // Human-readable label for each group is defined in translation table
- if (this.mediaType === 'video') {
- return ['captions','descriptions','keyboard','transcript'];
- }
- else if (this.mediaType === 'audio') {
- var groups = [];
- groups.push('keyboard');
- if (this.lyricsMode) {
- groups.push('transcript');
- }
- return groups;
- }
- }
+ // return array of groups in the order in which they will appear
+ // in the Preferences popup menu
+ // Human-readable label for each group is defined in translation table
+ if (this.mediaType === 'video') {
+ return ['captions','descriptions','keyboard','transcript'];
+ }
+ else if (this.mediaType === 'audio') {
+ var groups = [];
+ groups.push('keyboard');
+ if (this.lyricsMode) {
+ groups.push('transcript');
+ }
+ return groups;
+ }
+ }
- AblePlayer.prototype.getAvailablePreferences = function() {
+ AblePlayer.prototype.getAvailablePreferences = function() {
- // Return the list of currently available preferences.
- // Preferences with no 'label' are set within player, not shown in Prefs dialog
- var prefs = [];
+ // Return the list of currently available preferences.
+ // Preferences with no 'label' are set within player, not shown in Prefs dialog
+ var prefs = [];
- // Modifier keys preferences
- prefs.push({
- 'name': 'prefAltKey', // use alt key with shortcuts
- 'label': this.tt.prefAltKey,
- 'group': 'keyboard',
- 'default': 1
- });
- prefs.push({
- 'name': 'prefCtrlKey', // use ctrl key with shortcuts
- 'label': this.tt.prefCtrlKey,
- 'group': 'keyboard',
- 'default': 1
- });
- prefs.push({
- 'name': 'prefShiftKey',
- 'label': this.tt.prefShiftKey,
- 'group': 'keyboard',
- 'default': 0
- });
+ // Modifier keys preferences
+ prefs.push({
+ 'name': 'prefAltKey', // use alt key with shortcuts
+ 'label': this.tt.prefAltKey,
+ 'group': 'keyboard',
+ 'default': 1
+ });
+ prefs.push({
+ 'name': 'prefCtrlKey', // use ctrl key with shortcuts
+ 'label': this.tt.prefCtrlKey,
+ 'group': 'keyboard',
+ 'default': 1
+ });
+ prefs.push({
+ 'name': 'prefShiftKey',
+ 'label': this.tt.prefShiftKey,
+ 'group': 'keyboard',
+ 'default': 0
+ });
- // Transcript preferences
- prefs.push({
- 'name': 'prefTranscript', // transcript default state
- 'label': null,
- 'group': 'transcript',
- 'default': 0 // off because turning it on has a certain WOW factor
- });
- prefs.push({
- 'name': 'prefHighlight', // highlight transcript as media plays
- 'label': this.tt.prefHighlight,
- 'group': 'transcript',
- 'default': 1 // on because many users can benefit
- });
- prefs.push({
- 'name': 'prefAutoScrollTranscript',
- 'label': null,
- 'group': 'transcript',
- 'default': 1
- });
- prefs.push({
- 'name': 'prefTabbable', // tab-enable transcript
- 'label': this.tt.prefTabbable,
- 'group': 'transcript',
- 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page
- });
+ // Transcript preferences
+ prefs.push({
+ 'name': 'prefTranscript', // transcript default state
+ 'label': null,
+ 'group': 'transcript',
+ 'default': 0 // off because turning it on has a certain WOW factor
+ });
+ prefs.push({
+ 'name': 'prefHighlight', // highlight transcript as media plays
+ 'label': this.tt.prefHighlight,
+ 'group': 'transcript',
+ 'default': 1 // on because many users can benefit
+ });
+ prefs.push({
+ 'name': 'prefAutoScrollTranscript',
+ 'label': null,
+ 'group': 'transcript',
+ 'default': 1
+ });
+ prefs.push({
+ 'name': 'prefTabbable', // tab-enable transcript
+ 'label': this.tt.prefTabbable,
+ 'group': 'transcript',
+ 'default': 0 // off because if users don't need it, it impedes tabbing elsewhere on the page
+ });
- if (this.mediaType === 'video') {
+ if (this.mediaType === 'video') {
- // Caption preferences
- prefs.push({
- 'name': 'prefCaptions', // closed captions default state
- 'label': null,
- 'group': 'captions',
- 'default': 1
- });
+ // Caption preferences
+ prefs.push({
+ 'name': 'prefCaptions', // closed captions default state
+ 'label': null,
+ 'group': 'captions',
+ 'default': 1
+ });
/* // not supported yet
- prefs.push({
- 'name': 'prefCaptionsStyle',
- 'label': this.tt.prefCaptionsStyle,
- 'group': 'captions',
- 'default': this.tt.captionsStylePopOn
- });
+ prefs.push({
+ 'name': 'prefCaptionsStyle',
+ 'label': this.tt.prefCaptionsStyle,
+ 'group': 'captions',
+ 'default': this.tt.captionsStylePopOn
+ });
*/
- prefs.push({
- 'name': 'prefCaptionsPosition',
- 'label': this.tt.prefCaptionsPosition,
- 'group': 'captions',
- 'default': this.defaultCaptionsPosition
- });
- prefs.push({
- 'name': 'prefCaptionsFont',
- 'label': this.tt.prefCaptionsFont,
- 'group': 'captions',
- 'default': this.tt.sans
- });
- prefs.push({
- 'name': 'prefCaptionsSize',
- 'label': this.tt.prefCaptionsSize,
- 'group': 'captions',
- 'default': '100%'
- });
- prefs.push({
- 'name': 'prefCaptionsColor',
- 'label': this.tt.prefCaptionsColor,
- 'group': 'captions',
- 'default': 'white'
- });
- prefs.push({
- 'name': 'prefCaptionsBGColor',
- 'label': this.tt.prefCaptionsBGColor,
- 'group': 'captions',
- 'default': 'black'
- });
- prefs.push({
- 'name': 'prefCaptionsOpacity',
- 'label': this.tt.prefCaptionsOpacity,
- 'group': 'captions',
- 'default': '100%'
- });
+ prefs.push({
+ 'name': 'prefCaptionsPosition',
+ 'label': this.tt.prefCaptionsPosition,
+ 'group': 'captions',
+ 'default': this.defaultCaptionsPosition
+ });
+ prefs.push({
+ 'name': 'prefCaptionsFont',
+ 'label': this.tt.prefCaptionsFont,
+ 'group': 'captions',
+ 'default': this.tt.sans
+ });
+ prefs.push({
+ 'name': 'prefCaptionsSize',
+ 'label': this.tt.prefCaptionsSize,
+ 'group': 'captions',
+ 'default': '100%'
+ });
+ prefs.push({
+ 'name': 'prefCaptionsColor',
+ 'label': this.tt.prefCaptionsColor,
+ 'group': 'captions',
+ 'default': 'white'
+ });
+ prefs.push({
+ 'name': 'prefCaptionsBGColor',
+ 'label': this.tt.prefCaptionsBGColor,
+ 'group': 'captions',
+ 'default': 'black'
+ });
+ prefs.push({
+ 'name': 'prefCaptionsOpacity',
+ 'label': this.tt.prefCaptionsOpacity,
+ 'group': 'captions',
+ 'default': '100%'
+ });
- // Description preferences
- prefs.push({
- 'name': 'prefDesc', // audio description default state
- 'label': null,
- 'group': 'descriptions',
- 'default': 0 // off because users who don't need it might find it distracting
- });
- prefs.push({
- 'name': 'prefDescFormat', // audio description default state
- 'label': this.tt.prefDescFormat,
- 'group': 'descriptions',
- 'default': 'video'
- });
- prefs.push({
- 'name': 'prefDescPause', // automatically pause when closed description starts
- 'label': this.tt.prefDescPause,
- 'group': 'descriptions',
- 'default': 0 // off because it burdens user with restarting after every pause
- });
- prefs.push({
- 'name': 'prefVisibleDesc', // visibly show closed description (if avilable and used)
- 'label': this.tt.prefVisibleDesc,
- 'group': 'descriptions',
- 'default': 1 // on because sighted users probably want to see this cool feature in action
- });
+ // Description preferences
+ prefs.push({
+ 'name': 'prefDesc', // audio description default state
+ 'label': null,
+ 'group': 'descriptions',
+ 'default': 0 // off because users who don't need it might find it distracting
+ });
+ prefs.push({
+ 'name': 'prefDescFormat', // audio description default state
+ 'label': this.tt.prefDescFormat,
+ 'group': 'descriptions',
+ 'default': 'video'
+ });
+ prefs.push({
+ 'name': 'prefDescPause', // automatically pause when closed description starts
+ 'label': this.tt.prefDescPause,
+ 'group': 'descriptions',
+ 'default': 0 // off because it burdens user with restarting after every pause
+ });
+ prefs.push({
+ 'name': 'prefVisibleDesc', // visibly show closed description (if avilable and used)
+ 'label': this.tt.prefVisibleDesc,
+ 'group': 'descriptions',
+ 'default': 1 // on because sighted users probably want to see this cool feature in action
+ });
- // Video preferences without a category (not shown in Preferences dialogs)
- prefs.push({
- 'name': 'prefSign', // open sign language window by default if avilable
- 'label': null,
- 'group': null,
- 'default': 0 // off because clicking an icon to see the sign window has a powerful impact
- });
+ // Video preferences without a category (not shown in Preferences dialogs)
+ prefs.push({
+ 'name': 'prefSign', // open sign language window by default if avilable
+ 'label': null,
+ 'group': null,
+ 'default': 0 // off because clicking an icon to see the sign window has a powerful impact
+ });
- }
- return prefs;
- };
+ }
+ return prefs;
+ };
- // Loads current/default preferences from cookie into the AblePlayer object.
- AblePlayer.prototype.loadCurrentPreferences = function () {
- var available = this.getAvailablePreferences();
- var cookie = this.getCookie();
+ // Loads current/default preferences from cookie into the AblePlayer object.
+ AblePlayer.prototype.loadCurrentPreferences = function () {
+ var available = this.getAvailablePreferences();
+ var cookie = this.getCookie();
- // Copy current cookie values into this object, and fill in any default values.
- for (var ii = 0; ii < available.length; ii++) {
- var prefName = available[ii]['name'];
- var defaultValue = available[ii]['default'];
- if (cookie.preferences[prefName] !== undefined) {
- this[prefName] = cookie.preferences[prefName];
- }
- else {
- cookie.preferences[prefName] = defaultValue;
- this[prefName] = defaultValue;
- }
- }
+ // Copy current cookie values into this object, and fill in any default values.
+ for (var ii = 0; ii < available.length; ii++) {
+ var prefName = available[ii]['name'];
+ var defaultValue = available[ii]['default'];
+ if (cookie.preferences[prefName] !== undefined) {
+ this[prefName] = cookie.preferences[prefName];
+ }
+ else {
+ cookie.preferences[prefName] = defaultValue;
+ this[prefName] = defaultValue;
+ }
+ }
- // Save since we may have added default values.
- this.setCookie(cookie);
- };
+ // Save since we may have added default values.
+ this.setCookie(cookie);
+ };
- AblePlayer.prototype.injectPrefsForm = function (form) {
+ AblePlayer.prototype.injectPrefsForm = function (form) {
- // Creates a preferences form and injects it.
- // form is one of the supported forms (groups) defined in getPreferencesGroups()
+ // Creates a preferences form and injects it.
+ // form is one of the supported forms (groups) defined in getPreferencesGroups()
- var available, thisObj, $prefsDiv, formTitle, introText,
- $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j,
- $fieldset, fieldsetClass, fieldsetId,
- $descFieldset1, $descLegend1, $descFieldset2, $descLegend2, $legend,
- thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField,
- $div1,id1,$radio1,$label1,
- $div2,id2,$radio2,$label2,
- options,$thisOption,optionValue,optionText,sampleCapsDiv,
- changedPref,changedSpan,changedText,
- currentDescState,
- $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem,
- dialog,saveButton,cancelButton;
+ var available, thisObj, $prefsDiv, formTitle, introText,
+ $prefsIntro,$prefsIntroP2,p3Text,$prefsIntroP3,i, j,
+ $fieldset, fieldsetClass, fieldsetId,
+ $descFieldset1, $descLegend1, $descFieldset2, $descLegend2, $legend,
+ thisPref, $thisDiv, thisClass, thisId, $thisLabel, $thisField,
+ $div1,id1,$radio1,$label1,
+ $div2,id2,$radio2,$label2,
+ options,$thisOption,optionValue,optionText,sampleCapsDiv,
+ changedPref,changedSpan,changedText,
+ currentDescState,
+ $kbHeading,$kbList,kbLabels,keys,kbListText,$kbListItem,
+ dialog,saveButton,cancelButton;
- thisObj = this;
- available = this.getAvailablePreferences();
+ thisObj = this;
+ available = this.getAvailablePreferences();
- // outer container, will be assigned role="dialog"
- $prefsDiv = $('<div>',{
- 'class': 'able-prefs-form '
- });
- var customClass = 'able-prefs-form-' + form;
- $prefsDiv.addClass(customClass);
+ // outer container, will be assigned role="dialog"
+ $prefsDiv = $('<div>',{
+ 'class': 'able-prefs-form '
+ });
+ var customClass = 'able-prefs-form-' + form;
+ $prefsDiv.addClass(customClass);
- // add intro
- if (form == 'captions') {
- formTitle = this.tt.prefTitleCaptions;
- introText = this.tt.prefIntroCaptions;
- // Uncomment the following line to include a cookie warning
- // Not included for now in order to cut down on unnecessary verbiage
- // introText += ' ' + this.tt.prefCookieWarning;
- $prefsIntro = $('<p>',{
- text: introText
- });
- $prefsDiv.append($prefsIntro);
- }
- else if (form == 'descriptions') {
- formTitle = this.tt.prefTitleDescriptions;
- var $prefsIntro = $('<p>',{
- text: this.tt.prefIntroDescription1
- });
- var $prefsIntroUL = $('<ul>');
- var $prefsIntroLI1 = $('<li>',{
- text: this.tt.prefDescFormatOption1
- });
- var $prefsIntroLI2 = $('<li>',{
- text: this.tt.prefDescFormatOption2
- });
+ // add intro
+ if (form == 'captions') {
+ formTitle = this.tt.prefTitleCaptions;
+ introText = this.tt.prefIntroCaptions;
+ // Uncomment the following line to include a cookie warning
+ // Not included for now in order to cut down on unnecessary verbiage
+ // introText += ' ' + this.tt.prefCookieWarning;
+ $prefsIntro = $('<p>',{
+ text: introText
+ });
+ $prefsDiv.append($prefsIntro);
+ }
+ else if (form == 'descriptions') {
+ formTitle = this.tt.prefTitleDescriptions;
+ var $prefsIntro = $('<p>',{
+ text: this.tt.prefIntroDescription1
+ });
+ var $prefsIntroUL = $('<ul>');
+ var $prefsIntroLI1 = $('<li>',{
+ text: this.tt.prefDescFormatOption1
+ });
+ var $prefsIntroLI2 = $('<li>',{
+ text: this.tt.prefDescFormatOption2
+ });
- $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2);
- if (this.hasOpenDesc && this.hasClosedDesc) {
- currentDescState = this.tt.prefIntroDescription2 + ' ';
- currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>';
- currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.';
- }
- else if (this.hasOpenDesc) {
- currentDescState = this.tt.prefIntroDescription2;
- currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.';
- }
- else if (this.hasClosedDesc) {
- currentDescState = this.tt.prefIntroDescription2;
- currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.';
- }
- else {
- currentDescState = this.tt.prefIntroDescriptionNone;
- }
- $prefsIntroP2 = $('<p>',{
- html: currentDescState
- });
+ $prefsIntroUL.append($prefsIntroLI1,$prefsIntroLI2);
+ if (this.hasOpenDesc && this.hasClosedDesc) {
+ currentDescState = this.tt.prefIntroDescription2 + ' ';
+ currentDescState += '<strong>' + this.tt.prefDescFormatOption1b + '</strong>';
+ currentDescState += ' <em>' + this.tt.and + '</em> <strong>' + this.tt.prefDescFormatOption2b + '</strong>.';
+ }
+ else if (this.hasOpenDesc) {
+ currentDescState = this.tt.prefIntroDescription2;
+ currentDescState += ' <strong>' + this.tt.prefDescFormatOption1b + '</strong>.';
+ }
+ else if (this.hasClosedDesc) {
+ currentDescState = this.tt.prefIntroDescription2;
+ currentDescState += ' <strong>' + this.tt.prefDescFormatOption2b + '</strong>.';
+ }
+ else {
+ currentDescState = this.tt.prefIntroDescriptionNone;
+ }
+ $prefsIntroP2 = $('<p>',{
+ html: currentDescState
+ });
- p3Text = this.tt.prefIntroDescription3;
- if (this.hasOpenDesc || this.hasClosedDesc) {
- p3Text += ' ' + this.tt.prefIntroDescription4;
- }
- $prefsIntroP3 = $('<p>',{
- text: p3Text
- });
+ p3Text = this.tt.prefIntroDescription3;
+ if (this.hasOpenDesc || this.hasClosedDesc) {
+ p3Text += ' ' + this.tt.prefIntroDescription4;
+ }
+ $prefsIntroP3 = $('<p>',{
+ text: p3Text
+ });
- $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3);
- }
- else if (form == 'keyboard') {
- formTitle = this.tt.prefTitleKeyboard;
- introText = this.tt.prefIntroKeyboard1;
- introText += ' ' + this.tt.prefIntroKeyboard2;
- introText += ' ' + this.tt.prefIntroKeyboard3;
- $prefsIntro = $('<p>',{
- text: introText
- });
- $prefsDiv.append($prefsIntro);
- }
- else if (form == 'transcript') {
- formTitle = this.tt.prefTitleTranscript;
- introText = this.tt.prefIntroTranscript;
- // Uncomment the following line to include a cookie warning
- // Not included for now in order to cut down on unnecessary verbiage
- // introText += ' ' + this.tt.prefCookieWarning;
- $prefsIntro = $('<p>',{
- text: introText
- });
- $prefsDiv.append($prefsIntro);
- }
+ $prefsDiv.append($prefsIntro,$prefsIntroUL,$prefsIntroP2,$prefsIntroP3);
+ }
+ else if (form == 'keyboard') {
+ formTitle = this.tt.prefTitleKeyboard;
+ introText = this.tt.prefIntroKeyboard1;
+ introText += ' ' + this.tt.prefIntroKeyboard2;
+ introText += ' ' + this.tt.prefIntroKeyboard3;
+ $prefsIntro = $('<p>',{
+ text: introText
+ });
+ $prefsDiv.append($prefsIntro);
+ }
+ else if (form == 'transcript') {
+ formTitle = this.tt.prefTitleTranscript;
+ introText = this.tt.prefIntroTranscript;
+ // Uncomment the following line to include a cookie warning
+ // Not included for now in order to cut down on unnecessary verbiage
+ // introText += ' ' + this.tt.prefCookieWarning;
+ $prefsIntro = $('<p>',{
+ text: introText
+ });
+ $prefsDiv.append($prefsIntro);
+ }
- if (form === 'descriptions') {
- // descriptions form has two field sets
+ if (form === 'descriptions') {
+ // descriptions form has two field sets
- // Fieldset 1
- $descFieldset1 = $('<fieldset>');
- fieldsetClass = 'able-prefs-' + form + '1';
- fieldsetId = this.mediaId + '-prefs-' + form + '1';
- $descFieldset1.addClass(fieldsetClass).attr('id',fieldsetId);
- $descLegend1 = $('<legend>' + this.tt.prefDescFormat + '</legend>');
- $descFieldset1.append($descLegend1);
+ // Fieldset 1
+ $descFieldset1 = $('<fieldset>');
+ fieldsetClass = 'able-prefs-' + form + '1';
+ fieldsetId = this.mediaId + '-prefs-' + form + '1';
+ $descFieldset1.addClass(fieldsetClass).attr('id',fieldsetId);
+ $descLegend1 = $('<legend>' + this.tt.prefDescFormat + '</legend>');
+ $descFieldset1.append($descLegend1);
- // Fieldset 2
- $descFieldset2 = $('<fieldset>');
- fieldsetClass = 'able-prefs-' + form + '2';
- fieldsetId = this.mediaId + '-prefs-' + form + '2';
- $descFieldset2.addClass(fieldsetClass).attr('id',fieldsetId);
- $descLegend2 = $('<legend>' + this.tt.prefHeadingTextDescription + '</legend>');
- $descFieldset2.append($descLegend2);
- }
- else {
- // all other forms just have one fieldset
- $fieldset = $('<fieldset>');
- fieldsetClass = 'able-prefs-' + form;
- fieldsetId = this.mediaId + '-prefs-' + form;
- $fieldset.addClass(fieldsetClass).attr('id',fieldsetId);
- if (form === 'keyboard') {
- $legend = $('<legend>' + this.tt.prefHeadingKeyboard1 + '</legend>');
- $fieldset.append($legend);
- }
- }
- for (i=0; i<available.length; i++) {
+ // Fieldset 2
+ $descFieldset2 = $('<fieldset>');
+ fieldsetClass = 'able-prefs-' + form + '2';
+ fieldsetId = this.mediaId + '-prefs-' + form + '2';
+ $descFieldset2.addClass(fieldsetClass).attr('id',fieldsetId);
+ $descLegend2 = $('<legend>' + this.tt.prefHeadingTextDescription + '</legend>');
+ $descFieldset2.append($descLegend2);
+ }
+ else {
+ // all other forms just have one fieldset
+ $fieldset = $('<fieldset>');
+ fieldsetClass = 'able-prefs-' + form;
+ fieldsetId = this.mediaId + '-prefs-' + form;
+ $fieldset.addClass(fieldsetClass).attr('id',fieldsetId);
+ if (form === 'keyboard') {
+ $legend = $('<legend>' + this.tt.prefHeadingKeyboard1 + '</legend>');
+ $fieldset.append($legend);
+ }
+ }
+ for (i=0; i<available.length; i++) {
- // only include prefs on the current form if they have a label
- if ((available[i]['group'] == form) && available[i]['label']) {
+ // only include prefs on the current form if they have a label
+ if ((available[i]['group'] == form) && available[i]['label']) {
- thisPref = available[i]['name'];
- thisClass = 'able-' + thisPref;
- thisId = this.mediaId + '_' + thisPref;
- if (thisPref !== 'prefDescFormat') {
- $thisDiv = $('<div>').addClass(thisClass);
- }
+ thisPref = available[i]['name'];
+ thisClass = 'able-' + thisPref;
+ thisId = this.mediaId + '_' + thisPref;
+ if (thisPref !== 'prefDescFormat') {
+ $thisDiv = $('<div>').addClass(thisClass);
+ }
- // Audio Description preferred format radio buttons
- if (thisPref == 'prefDescFormat') {
+ // Audio Description preferred format radio buttons
+ if (thisPref == 'prefDescFormat') {
- // option 1 radio button
- $div1 = $('<div>');
- id1 = thisId + '_1';
- $label1 = $('<label>')
- .attr('for',id1)
- .text(this.capitalizeFirstLetter(this.tt.prefDescFormatOption1))
- $radio1 = $('<input>',{
- type: 'radio',
- name: thisPref,
- id: id1,
- value: 'video'
- });
- if (this.prefDescFormat === 'video') {
- $radio1.prop('checked',true);
- };
- $div1.append($radio1,$label1);
+ // option 1 radio button
+ $div1 = $('<div>');
+ id1 = thisId + '_1';
+ $label1 = $('<label>')
+ .attr('for',id1)
+ .text(this.capitalizeFirstLetter(this.tt.prefDescFormatOption1))
+ $radio1 = $('<input>',{
+ type: 'radio',
+ name: thisPref,
+ id: id1,
+ value: 'video'
+ });
+ if (this.prefDescFormat === 'video') {
+ $radio1.prop('checked',true);
+ };
+ $div1.append($radio1,$label1);
- // option 2 radio button
- $div2 = $('<div>');
- id2 = thisId + '_2';
- $label2 = $('<label>')
- .attr('for',id2)
- .text(this.capitalizeFirstLetter(this.tt.prefDescFormatOption2));
- $radio2 = $('<input>',{
- type: 'radio',
- name: thisPref,
- id: id2,
- value: 'text'
- });
- if (this.prefDescFormat === 'text') {
- $radio2.prop('checked',true);
- };
- $div2.append($radio2,$label2);
- }
- else if (form === 'captions') {
- $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>');
- $thisField = $('<select>',{
- name: thisPref,
- id: thisId,
- });
- if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') {
- // add a change handler that updates the style of the sample caption text
- $thisField.change(function() {
- changedPref = $(this).attr('name');
- thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref);
- });
- }
- options = this.getCaptionsOptions(thisPref);
- for (j=0; j < options.length; j++) {
- if (thisPref === 'prefCaptionsPosition') {
- optionValue = options[j];
- if (optionValue === 'overlay') {
- optionText = this.tt.captionsPositionOverlay;
- }
- else if (optionValue === 'below') {
- optionValue = options[j];
- optionText = this.tt.captionsPositionBelow;
- }
- }
- else if (thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') {
- optionValue = options[j][0];
- optionText = options[j][1];
- }
- else if (thisPref === 'prefCaptionsOpacity') {
- optionValue = options[j];
- optionText = options[j];
- if (optionValue === '0%') {
- optionText += ' (' + this.tt.transparent + ')';
- }
- else if (optionValue === '100%') {
- optionText += ' (' + this.tt.solid + ')';
- }
- }
- else {
- optionValue = options[j];
- optionText = options[j];
- }
- $thisOption = $('<option>',{
- value: optionValue,
- text: optionText
- });
- if (this[thisPref] === optionValue) {
- $thisOption.prop('selected',true);
- }
- $thisField.append($thisOption);
- }
- $thisDiv.append($thisLabel,$thisField);
- }
- else { // all other fields are checkboxes
- $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>');
- $thisField = $('<input>',{
- type: 'checkbox',
- name: thisPref,
- id: thisId,
- value: 'true'
- });
- // check current active value for this preference
- if (this[thisPref] === 1) {
- $thisField.prop('checked',true);
- }
- if (form === 'keyboard') {
- // add a change handler that updates the list of current keyboard shortcuts
- $thisField.change(function() {
- changedPref = $(this).attr('name');
- if (changedPref === 'prefAltKey') {
- changedSpan = '.able-modkey-alt';
- changedText = thisObj.tt.prefAltKey + ' + ';
- }
- else if (changedPref === 'prefCtrlKey') {
- changedSpan = '.able-modkey-ctrl';
- changedText = thisObj.tt.prefCtrlKey + ' + ';
- }
- else if (changedPref === 'prefShiftKey') {
- changedSpan = '.able-modkey-shift';
- changedText = thisObj.tt.prefShiftKey + ' + ';
- }
- if ($(this).is(':checked')) {
- $(changedSpan).text(changedText);
- }
- else {
- $(changedSpan).text('');
- }
- });
- }
- $thisDiv.append($thisField,$thisLabel);
- }
- if (form === 'descriptions') {
- if (thisPref === 'prefDescFormat') {
- $descFieldset1.append($div1,$div2);
- }
- else {
- $descFieldset2.append($thisDiv);
- }
- }
- else {
- $fieldset.append($thisDiv);
- }
- }
- }
- if (form === 'descriptions') {
- $prefsDiv.append($descFieldset1,$descFieldset2);
- }
- else {
- $prefsDiv.append($fieldset);
- }
- if (form === 'captions') {
- // add a sample closed caption div to prefs dialog
- if (this.mediaType === 'video') {
- this.$sampleCapsDiv = $('<div>',{
- 'class': 'able-captions-sample'
- }).text(this.tt.sampleCaptionText);
- $prefsDiv.append(this.$sampleCapsDiv);
- this.stylizeCaptions(this.$sampleCapsDiv);
- }
- }
- else if (form === 'keyboard') {
- // add a current list of keyboard shortcuts
- $kbHeading = $('<h2>',{
- text: this.tt.prefHeadingKeyboard2
- });
- $kbList = $('<ul>');
- // create arrays of kbLabels and keys
- kbLabels = [];
- keys = [];
- for (i=0; i<this.controls.length; i++) {
- if (this.controls[i] === 'play') {
- kbLabels.push(this.tt.play + '/' + this.tt.pause);
- keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar);
- }
- else if (this.controls[i] === 'restart') {
- kbLabels.push(this.tt.restart);
- keys.push('s');
- }
- else if (this.controls[i] === 'rewind') {
- kbLabels.push(this.tt.rewind);
- keys.push('r');
- }
- else if (this.controls[i] === 'forward') {
- kbLabels.push(this.tt.forward);
- keys.push('f');
- }
- else if (this.controls[i] === 'volume') {
- kbLabels.push(this.tt.volume);
- keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9');
- // mute toggle
- kbLabels.push(this.tt.mute + '/' + this.tt.unmute);
- keys.push('m');
- }
- else if (this.controls[i] === 'captions') {
- if (this.captions.length > 1) {
- // caption button launches a Captions popup menu
- kbLabels.push(this.tt.captions);
- }
- else {
- // there is only one caption track
- // therefore caption button is a toggle
- if (this.captionsOn) {
- kbLabels.push(this.tt.hideCaptions);
- }
- else {
- kbLabels.push(this.tt.showCaptions);
- }
- }
- keys.push('c');
- }
- else if (this.controls[i] === 'descriptions') {
- if (this.descOn) {
- kbLabels.push(this.tt.turnOffDescriptions);
- }
- else {
- kbLabels.push(this.tt.turnOnDescriptions);
- }
- keys.push('d');
- }
- else if (this.controls[i] === 'prefs') {
- kbLabels.push(this.tt.preferences);
- keys.push('e');
- }
- else if (this.controls[i] === 'help') {
- kbLabels.push(this.tt.help);
- keys.push('h');
- }
- }
- for (i=0; i<keys.length; i++) {
- // alt
- kbListText = '<span class="able-modkey-alt">';
- if (this.prefAltKey === 1) {
- kbListText += this.tt.prefAltKey + ' + ';
- }
- kbListText += '</span>';
- // ctrl
- kbListText += '<span class="able-modkey-ctrl">';
- if (this.prefCtrlKey === 1) {
- kbListText += this.tt.prefCtrlKey + ' + ';
- }
- kbListText += '</span>';
- // shift
- kbListText += '<span class="able-modkey-shift">';
- if (this.prefShiftKey === 1) {
- kbListText += this.tt.prefShiftKey + ' + ';
- }
- kbListText += '</span>';
- kbListText += '<span class="able-modkey">' + keys[i] + '</span>';
- kbListText += ' = ' + kbLabels[i];
- $kbListItem = $('<li>',{
- html: kbListText
- });
- $kbList.append($kbListItem);
- }
- // add Escape key
- kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>';
- kbListText += ' = ' + this.tt.escapeKeyFunction;
- $kbListItem = $('<li>',{
- html: kbListText
- });
- $kbList.append($kbListItem);
- // put it all together
- $prefsDiv.append($kbHeading,$kbList);
- }
+ // option 2 radio button
+ $div2 = $('<div>');
+ id2 = thisId + '_2';
+ $label2 = $('<label>')
+ .attr('for',id2)
+ .text(this.capitalizeFirstLetter(this.tt.prefDescFormatOption2));
+ $radio2 = $('<input>',{
+ type: 'radio',
+ name: thisPref,
+ id: id2,
+ value: 'text'
+ });
+ if (this.prefDescFormat === 'text') {
+ $radio2.prop('checked',true);
+ };
+ $div2.append($radio2,$label2);
+ }
+ else if (form === 'captions') {
+ $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>');
+ $thisField = $('<select>',{
+ name: thisPref,
+ id: thisId,
+ });
+ if (thisPref !== 'prefCaptions' && thisPref !== 'prefCaptionsStyle') {
+ // add a change handler that updates the style of the sample caption text
+ $thisField.change(function() {
+ changedPref = $(this).attr('name');
+ thisObj.stylizeCaptions(thisObj.$sampleCapsDiv,changedPref);
+ });
+ }
+ options = this.getCaptionsOptions(thisPref);
+ for (j=0; j < options.length; j++) {
+ if (thisPref === 'prefCaptionsPosition') {
+ optionValue = options[j];
+ if (optionValue === 'overlay') {
+ optionText = this.tt.captionsPositionOverlay;
+ }
+ else if (optionValue === 'below') {
+ optionValue = options[j];
+ optionText = this.tt.captionsPositionBelow;
+ }
+ }
+ else if (thisPref === 'prefCaptionsColor' || thisPref === 'prefCaptionsBGColor') {
+ optionValue = options[j][0];
+ optionText = options[j][1];
+ }
+ else if (thisPref === 'prefCaptionsOpacity') {
+ optionValue = options[j];
+ optionText = options[j];
+ if (optionValue === '0%') {
+ optionText += ' (' + this.tt.transparent + ')';
+ }
+ else if (optionValue === '100%') {
+ optionText += ' (' + this.tt.solid + ')';
+ }
+ }
+ else {
+ optionValue = options[j];
+ optionText = options[j];
+ }
+ $thisOption = $('<option>',{
+ value: optionValue,
+ text: optionText
+ });
+ if (this[thisPref] === optionValue) {
+ $thisOption.prop('selected',true);
+ }
+ $thisField.append($thisOption);
+ }
+ $thisDiv.append($thisLabel,$thisField);
+ }
+ else { // all other fields are checkboxes
+ $thisLabel = $('<label for="' + thisId + '"> ' + available[i]['label'] + '</label>');
+ $thisField = $('<input>',{
+ type: 'checkbox',
+ name: thisPref,
+ id: thisId,
+ value: 'true'
+ });
+ // check current active value for this preference
+ if (this[thisPref] === 1) {
+ $thisField.prop('checked',true);
+ }
+ if (form === 'keyboard') {
+ // add a change handler that updates the list of current keyboard shortcuts
+ $thisField.change(function() {
+ changedPref = $(this).attr('name');
+ if (changedPref === 'prefAltKey') {
+ changedSpan = '.able-modkey-alt';
+ changedText = thisObj.tt.prefAltKey + ' + ';
+ }
+ else if (changedPref === 'prefCtrlKey') {
+ changedSpan = '.able-modkey-ctrl';
+ changedText = thisObj.tt.prefCtrlKey + ' + ';
+ }
+ else if (changedPref === 'prefShiftKey') {
+ changedSpan = '.able-modkey-shift';
+ changedText = thisObj.tt.prefShiftKey + ' + ';
+ }
+ if ($(this).is(':checked')) {
+ $(changedSpan).text(changedText);
+ }
+ else {
+ $(changedSpan).text('');
+ }
+ });
+ }
+ $thisDiv.append($thisField,$thisLabel);
+ }
+ if (form === 'descriptions') {
+ if (thisPref === 'prefDescFormat') {
+ $descFieldset1.append($div1,$div2);
+ }
+ else {
+ $descFieldset2.append($thisDiv);
+ }
+ }
+ else {
+ $fieldset.append($thisDiv);
+ }
+ }
+ }
+ if (form === 'descriptions') {
+ $prefsDiv.append($descFieldset1,$descFieldset2);
+ }
+ else {
+ $prefsDiv.append($fieldset);
+ }
+ if (form === 'captions') {
+ // add a sample closed caption div to prefs dialog
+ if (this.mediaType === 'video') {
+ this.$sampleCapsDiv = $('<div>',{
+ 'class': 'able-captions-sample'
+ }).text(this.tt.sampleCaptionText);
+ $prefsDiv.append(this.$sampleCapsDiv);
+ this.stylizeCaptions(this.$sampleCapsDiv);
+ }
+ }
+ else if (form === 'keyboard') {
+ // add a current list of keyboard shortcuts
+ $kbHeading = $('<h2>',{
+ text: this.tt.prefHeadingKeyboard2
+ });
+ $kbList = $('<ul>');
+ // create arrays of kbLabels and keys
+ kbLabels = [];
+ keys = [];
+ for (i=0; i<this.controls.length; i++) {
+ if (this.controls[i] === 'play') {
+ kbLabels.push(this.tt.play + '/' + this.tt.pause);
+ keys.push('p</span> <em>' + this.tt.or + '</em> <span class="able-help-modifiers"> ' + this.tt.spacebar);
+ }
+ else if (this.controls[i] === 'restart') {
+ kbLabels.push(this.tt.restart);
+ keys.push('s');
+ }
+ else if (this.controls[i] === 'rewind') {
+ kbLabels.push(this.tt.rewind);
+ keys.push('r');
+ }
+ else if (this.controls[i] === 'forward') {
+ kbLabels.push(this.tt.forward);
+ keys.push('f');
+ }
+ else if (this.controls[i] === 'volume') {
+ kbLabels.push(this.tt.volume);
+ keys.push('v</span> <em>' + this.tt.or + '</em> <span class="able-modkey">1-9');
+ // mute toggle
+ kbLabels.push(this.tt.mute + '/' + this.tt.unmute);
+ keys.push('m');
+ }
+ else if (this.controls[i] === 'captions') {
+ if (this.captions.length > 1) {
+ // caption button launches a Captions popup menu
+ kbLabels.push(this.tt.captions);
+ }
+ else {
+ // there is only one caption track
+ // therefore caption button is a toggle
+ if (this.captionsOn) {
+ kbLabels.push(this.tt.hideCaptions);
+ }
+ else {
+ kbLabels.push(this.tt.showCaptions);
+ }
+ }
+ keys.push('c');
+ }
+ else if (this.controls[i] === 'descriptions') {
+ if (this.descOn) {
+ kbLabels.push(this.tt.turnOffDescriptions);
+ }
+ else {
+ kbLabels.push(this.tt.turnOnDescriptions);
+ }
+ keys.push('d');
+ }
+ else if (this.controls[i] === 'prefs') {
+ kbLabels.push(this.tt.preferences);
+ keys.push('e');
+ }
+ else if (this.controls[i] === 'help') {
+ kbLabels.push(this.tt.help);
+ keys.push('h');
+ }
+ }
+ for (i=0; i<keys.length; i++) {
+ // alt
+ kbListText = '<span class="able-modkey-alt">';
+ if (this.prefAltKey === 1) {
+ kbListText += this.tt.prefAltKey + ' + ';
+ }
+ kbListText += '</span>';
+ // ctrl
+ kbListText += '<span class="able-modkey-ctrl">';
+ if (this.prefCtrlKey === 1) {
+ kbListText += this.tt.prefCtrlKey + ' + ';
+ }
+ kbListText += '</span>';
+ // shift
+ kbListText += '<span class="able-modkey-shift">';
+ if (this.prefShiftKey === 1) {
+ kbListText += this.tt.prefShiftKey + ' + ';
+ }
+ kbListText += '</span>';
+ kbListText += '<span class="able-modkey">' + keys[i] + '</span>';
+ kbListText += ' = ' + kbLabels[i];
+ $kbListItem = $('<li>',{
+ html: kbListText
+ });
+ $kbList.append($kbListItem);
+ }
+ // add Escape key
+ kbListText = '<span class="able-modkey">' + this.tt.escapeKey + '</span>';
+ kbListText += ' = ' + this.tt.escapeKeyFunction;
+ $kbListItem = $('<li>',{
+ html: kbListText
+ });
+ $kbList.append($kbListItem);
+ // put it all together
+ $prefsDiv.append($kbHeading,$kbList);
+ }
- // $prefsDiv (dialog) must be appended to the BODY!
- // otherwise when aria-hidden="true" is applied to all background content
- // that will include an ancestor of the dialog,
- // which will render the dialog unreadable by screen readers
- $('body').append($prefsDiv);
- dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em');
+ // $prefsDiv (dialog) must be appended to the BODY!
+ // otherwise when aria-hidden="true" is applied to all background content
+ // that will include an ancestor of the dialog,
+ // which will render the dialog unreadable by screen readers
+ $('body').append($prefsDiv);
+ dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, '32em');
- // Add save and cancel buttons.
- $prefsDiv.append('<hr>');
- saveButton = $('<button class="modal-button">' + this.tt.save + '</button>');
- cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>');
- saveButton.click(function () {
- dialog.hide();
- thisObj.savePrefsFromForm();
- });
- cancelButton.click(function () {
- dialog.hide();
- thisObj.resetPrefsForm();
- });
+ // Add save and cancel buttons.
+ $prefsDiv.append('<hr>');
+ saveButton = $('<button class="modal-button">' + this.tt.save + '</button>');
+ cancelButton = $('<button class="modal-button">' + this.tt.cancel + '</button>');
+ saveButton.click(function () {
+ dialog.hide();
+ thisObj.savePrefsFromForm();
+ });
+ cancelButton.click(function () {
+ dialog.hide();
+ thisObj.resetPrefsForm();
+ });
- $prefsDiv.append(saveButton);
- $prefsDiv.append(cancelButton);
+ $prefsDiv.append(saveButton);
+ $prefsDiv.append(cancelButton);
- // add global reference for future control
- if (form === 'captions') {
- this.captionPrefsDialog = dialog;
- }
- else if (form === 'descriptions') {
- this.descPrefsDialog = dialog;
- }
- else if (form === 'keyboard') {
- this.keyboardPrefsDialog = dialog;
- }
- else if (form === 'transcript') {
- this.transcriptPrefsDialog = dialog;
- }
+ // add global reference for future control
+ if (form === 'captions') {
+ this.captionPrefsDialog = dialog;
+ }
+ else if (form === 'descriptions') {
+ this.descPrefsDialog = dialog;
+ }
+ else if (form === 'keyboard') {
+ this.keyboardPrefsDialog = dialog;
+ }
+ else if (form === 'transcript') {
+ this.transcriptPrefsDialog = dialog;
+ }
- // Add click handler for dialog close button
- // (button is added in dialog.js)
- $('div.able-prefs-form button.modalCloseButton').click(function() {
- thisObj.resetPrefsForm();
- })
- // Add handler for escape key
- $('div.able-prefs-form').keydown(function(e) {
- if (e.which === 27) { // escape
- thisObj.resetPrefsForm();
- }
- });
- };
+ // Add click handler for dialog close button
+ // (button is added in dialog.js)
+ $('div.able-prefs-form button.modalCloseButton').click(function() {
+ thisObj.resetPrefsForm();
+ })
+ // Add handler for escape key
+ $('div.able-prefs-form').keydown(function(e) {
+ if (e.which === 27) { // escape
+ thisObj.resetPrefsForm();
+ }
+ });
+ };
- // Reset preferences form with default values from cookie
- // Called when user clicks cancel or close button in Prefs Dialog
- // also called when user presses Escape
+ // Reset preferences form with default values from cookie
+ // Called when user clicks cancel or close button in Prefs Dialog
+ // also called when user presses Escape
- AblePlayer.prototype.resetPrefsForm = function () {
+ AblePlayer.prototype.resetPrefsForm = function () {
- var thisObj, cookie, available, i, prefName, thisDiv, thisId;
+ var thisObj, cookie, available, i, prefName, thisDiv, thisId;
- thisObj = this;
- cookie = this.getCookie();
- available = this.getAvailablePreferences();
- for (i=0; i<available.length; i++) {
- prefName = available[i]['name'];
- if (prefName === 'prefDescFormat') {
- if (this[prefName] === 'text') {
- $('input[value="text"]').prop('checked',true);
- }
- else {
- $('input[value="video"]').prop('checked',true);
- }
- }
- else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) {
- // this is a caption-related select box
- $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]);
- }
- else { // all others are checkboxes
- if (this[prefName] === 1) {
- $('input[name="' + prefName + '"]').prop('checked',true);
- }
- else {
- $('input[name="' + prefName + '"]').prop('checked',false);
- }
- }
- }
- // also restore style of sample caption div
- this.stylizeCaptions(this.$sampleCapsDiv);
- };
+ thisObj = this;
+ cookie = this.getCookie();
+ available = this.getAvailablePreferences();
+ for (i=0; i<available.length; i++) {
+ prefName = available[i]['name'];
+ if (prefName === 'prefDescFormat') {
+ if (this[prefName] === 'text') {
+ $('input[value="text"]').prop('checked',true);
+ }
+ else {
+ $('input[value="video"]').prop('checked',true);
+ }
+ }
+ else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) {
+ // this is a caption-related select box
+ $('select[name="' + prefName + '"]').val(cookie.preferences[prefName]);
+ }
+ else { // all others are checkboxes
+ if (this[prefName] === 1) {
+ $('input[name="' + prefName + '"]').prop('checked',true);
+ }
+ else {
+ $('input[name="' + prefName + '"]').prop('checked',false);
+ }
+ }
+ }
+ // also restore style of sample caption div
+ this.stylizeCaptions(this.$sampleCapsDiv);
+ };
- // Return a prefs object constructed from the form.
- AblePlayer.prototype.savePrefsFromForm = function () {
- // called when user saves the Preferences form
- // update cookie with new value
- var numChanges, numCapChanges, capSizeChanged, capSizeValue, newValue;
+ // Return a prefs object constructed from the form.
+ AblePlayer.prototype.savePrefsFromForm = function () {
+ // called when user saves the Preferences form
+ // update cookie with new value
+ var numChanges, numCapChanges, capSizeChanged, capSizeValue, newValue;
- numChanges = 0;
- numCapChanges = 0; // changes to caption-style-related preferences
- capSizeChanged = false;
- var cookie = this.getCookie();
- var available = this.getAvailablePreferences();
- for (var i=0; i < available.length; i++) {
- // only prefs with labels are used in the Prefs form
- if (available[i]['label']) {
- var prefName = available[i]['name'];
- if (prefName == 'prefDescFormat') {
- this.prefDescFormat = $('input[name="' + prefName + '"]:checked').val();
- if (this.prefDescFormat !== cookie.preferences['prefDescFormat']) { // user changed setting
- cookie.preferences['prefDescFormat'] = this.prefDescFormat;
- numChanges++;
- }
- }
- else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) {
- // this is one of the caption-related select fields
- newValue = $('select[name="' + prefName + '"]').val();
- if (cookie.preferences[prefName] !== newValue) { // user changed setting
- cookie.preferences[prefName] = newValue;
- // also update global var for this pref (for caption fields, not done elsewhere)
- this[prefName] = newValue;
- numChanges++;
- numCapChanges++;
- }
- if (prefName === 'prefCaptionsSize') {
- capSizeChanged = true;
- capSizeValue = newValue;
- }
- }
- else { // all other fields are checkboxes
- if ($('input[name="' + prefName + '"]').is(':checked')) {
- cookie.preferences[prefName] = 1;
- if (this[prefName] === 1) {
- // nothing has changed
- }
- else {
- // user has just turned this pref on
- this[prefName] = 1;
- numChanges++;
- }
- }
- else { // thisPref is not checked
- cookie.preferences[prefName] = 0;
- if (this[prefName] === 1) {
- // user has just turned this pref off
- this[prefName] = 0;
- numChanges++;
- }
- else {
- // nothing has chaged
- }
- }
- }
- }
- }
- if (numChanges > 0) {
- this.setCookie(cookie);
- this.showAlert(this.tt.prefSuccess);
- }
- else {
- this.showAlert(this.tt.prefNoChange);
- }
- if (this.player === 'youtube' &&
- (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) &&
- capSizeChanged) {
- // update font size of YouTube captions
- this.youTubePlayer.setOption(this.ytCaptionModule,'fontSize',this.translatePrefs('size',capSizeValue,'youtube'));
- }
- this.updatePrefs();
- if (numCapChanges > 0) {
- this.stylizeCaptions(this.$captionsDiv);
- // also apply same changes to descriptions, if present
- if (typeof this.$descDiv !== 'undefined') {
- this.stylizeCaptions(this.$descDiv);
- }
- }
- }
+ numChanges = 0;
+ numCapChanges = 0; // changes to caption-style-related preferences
+ capSizeChanged = false;
+ var cookie = this.getCookie();
+ var available = this.getAvailablePreferences();
+ for (var i=0; i < available.length; i++) {
+ // only prefs with labels are used in the Prefs form
+ if (available[i]['label']) {
+ var prefName = available[i]['name'];
+ if (prefName == 'prefDescFormat') {
+ this.prefDescFormat = $('input[name="' + prefName + '"]:checked').val();
+ if (this.prefDescFormat !== cookie.preferences['prefDescFormat']) { // user changed setting
+ cookie.preferences['prefDescFormat'] = this.prefDescFormat;
+ numChanges++;
+ }
+ }
+ else if ((prefName.indexOf('Captions') !== -1) && (prefName !== 'prefCaptions')) {
+ // this is one of the caption-related select fields
+ newValue = $('select[name="' + prefName + '"]').val();
+ if (cookie.preferences[prefName] !== newValue) { // user changed setting
+ cookie.preferences[prefName] = newValue;
+ // also update global var for this pref (for caption fields, not done elsewhere)
+ this[prefName] = newValue;
+ numChanges++;
+ numCapChanges++;
+ }
+ if (prefName === 'prefCaptionsSize') {
+ capSizeChanged = true;
+ capSizeValue = newValue;
+ }
+ }
+ else { // all other fields are checkboxes
+ if ($('input[name="' + prefName + '"]').is(':checked')) {
+ cookie.preferences[prefName] = 1;
+ if (this[prefName] === 1) {
+ // nothing has changed
+ }
+ else {
+ // user has just turned this pref on
+ this[prefName] = 1;
+ numChanges++;
+ }
+ }
+ else { // thisPref is not checked
+ cookie.preferences[prefName] = 0;
+ if (this[prefName] === 1) {
+ // user has just turned this pref off
+ this[prefName] = 0;
+ numChanges++;
+ }
+ else {
+ // nothing has chaged
+ }
+ }
+ }
+ }
+ }
+ if (numChanges > 0) {
+ this.setCookie(cookie);
+ this.showAlert(this.tt.prefSuccess);
+ }
+ else {
+ this.showAlert(this.tt.prefNoChange);
+ }
+ if (this.player === 'youtube' &&
+ (typeof this.usingYouTubeCaptions !== 'undefined' && this.usingYouTubeCaptions) &&
+ capSizeChanged) {
+ // update font size of YouTube captions
+ this.youTubePlayer.setOption(this.ytCaptionModule,'fontSize',this.translatePrefs('size',capSizeValue,'youtube'));
+ }
+ this.updatePrefs();
+ if (numCapChanges > 0) {
+ this.stylizeCaptions(this.$captionsDiv);
+ // also apply same changes to descriptions, if present
+ if (typeof this.$descDiv !== 'undefined') {
+ this.stylizeCaptions(this.$descDiv);
+ }
+ }
+ }
- // Updates player based on current prefs. Safe to call multiple times.
- AblePlayer.prototype.updatePrefs = function () {
+ // Updates player based on current prefs. Safe to call multiple times.
+ AblePlayer.prototype.updatePrefs = function () {
- var modHelp;
+ var modHelp;
- // modifier keys (update help text)
- if (this.prefAltKey === 1) {
- modHelp = 'Alt + ';
- }
- else {
- modHelp = '';
- }
- if (this.prefCtrlKey === 1) {
- modHelp += 'Control + ';
- }
- if (this.prefShiftKey === 1) {
- modHelp += 'Shift + ';
- }
- $('.able-help-modifiers').text(modHelp);
+ // modifier keys (update help text)
+ if (this.prefAltKey === 1) {
+ modHelp = 'Alt + ';
+ }
+ else {
+ modHelp = '';
+ }
+ if (this.prefCtrlKey === 1) {
+ modHelp += 'Control + ';
+ }
+ if (this.prefShiftKey === 1) {
+ modHelp += 'Shift + ';
+ }
+ $('.able-help-modifiers').text(modHelp);
- // tabbable transcript
- if (this.prefTabbable === 1) {
- $('.able-transcript span.able-transcript-seekpoint').attr('tabindex','0');
- }
- else {
- $('.able-transcript span.able-transcript-seekpoint').removeAttr('tabindex');
- }
+ // tabbable transcript
+ if (this.prefTabbable === 1) {
+ $('.able-transcript span.able-transcript-seekpoint').attr('tabindex','0');
+ }
+ else {
+ $('.able-transcript span.able-transcript-seekpoint').removeAttr('tabindex');
+ }
- // transcript highlights
- if (this.prefHighlight === 0) {
- // user doesn't want highlights; remove any existing highlights
- $('.able-transcript span').removeClass('able-highlight');
- }
+ // transcript highlights
+ if (this.prefHighlight === 0) {
+ // user doesn't want highlights; remove any existing highlights
+ $('.able-transcript span').removeClass('able-highlight');
+ }
- // Re-initialize caption and description in case relevant settings have changed
- this.updateCaption();
- this.refreshingDesc = true;
- this.initDescription();
- };
+ // Re-initialize caption and description in case relevant settings have changed
+ this.updateCaption();
+ this.refreshingDesc = true;
+ this.initDescription();
+ };
- AblePlayer.prototype.usingModifierKeys = function(e) {
- // return true if user is holding down required modifier keys
- if ((this.prefAltKey === 1) && !e.altKey) {
- return false;
- }
- if ((this.prefCtrlKey === 1) && !e.ctrlKey) {
- return false;
- }
- if ((this.prefShiftKey === 1) && !e.shiftKey) {
- return false;
- }
- return true;
- };
+ AblePlayer.prototype.usingModifierKeys = function(e) {
+ // return true if user is holding down required modifier keys
+ if ((this.prefAltKey === 1) && !e.altKey) {
+ return false;
+ }
+ if ((this.prefCtrlKey === 1) && !e.ctrlKey) {
+ return false;
+ }
+ if ((this.prefShiftKey === 1) && !e.shiftKey) {
+ return false;
+ }
+ return true;
+ };
})(jQuery);