From fb74c71ba6efa5efbf563582e57abf0a6976b1cd Mon Sep 17 00:00:00 2001 From: Pat O'Neill Date: Fri, 4 Nov 2016 13:45:51 -0400 Subject: [PATCH] refactor(texttracksettings): DRYer code and remove massive HTML blob (#3679) * DRYer code while keeping tests passing * Replace massive HTML blob with DOM methods * Create obj util and implement it --- src/js/tracks/text-track-settings.js | 692 ++++++++++++------- src/js/utils/dom.js | 13 +- src/js/utils/obj.js | 32 + test/unit/tracks/text-track-settings.test.js | 112 +-- test/unit/utils/dom.test.js | 41 +- test/unit/utils/obj.test.js | 58 ++ 6 files changed, 634 insertions(+), 314 deletions(-) create mode 100644 src/js/utils/obj.js create mode 100644 test/unit/utils/obj.test.js diff --git a/src/js/tracks/text-track-settings.js b/src/js/tracks/text-track-settings.js index 4e8e21ab87..8f7fc0c810 100644 --- a/src/js/tracks/text-track-settings.js +++ b/src/js/tracks/text-track-settings.js @@ -1,168 +1,220 @@ /** * @file text-track-settings.js */ -import Component from '../component'; -import * as Events from '../utils/events.js'; -import * as Fn from '../utils/fn.js'; -import log from '../utils/log.js'; -import safeParseTuple from 'safe-json-parse/tuple'; import window from 'global/window'; +import Component from '../component'; +import {createEl} from '../utils/dom'; +import * as Fn from '../utils/fn'; +import * as Obj from '../utils/obj'; +import log from '../utils/log'; + +const LOCAL_STORAGE_KEY = 'vjs-text-track-settings'; + +const COLOR_BLACK = ['#000', 'Black']; +const COLOR_BLUE = ['#00F', 'Blue']; +const COLOR_CYAN = ['#0FF', 'Cyan']; +const COLOR_GREEN = ['#0F0', 'Green']; +const COLOR_MAGENTA = ['#F0F', 'Magenta']; +const COLOR_RED = ['#F00', 'Red']; +const COLOR_WHITE = ['#FFF', 'White']; +const COLOR_YELLOW = ['#FF0', 'Yellow']; + +const OPACITY_OPAQUE = ['1', 'Opaque']; +const OPACITY_SEMI = ['0.5', 'Semi-Transparent']; +const OPACITY_TRANS = ['0', 'Transparent']; + +// Configuration for the various element. +const selectConfigs = { + backgroundColor: { + selector: '.vjs-bg-color > select', + id: 'captions-background-color-%s', + label: 'Color', + options: [ + COLOR_BLACK, + COLOR_WHITE, + COLOR_RED, + COLOR_GREEN, + COLOR_BLUE, + COLOR_YELLOW, + COLOR_MAGENTA, + COLOR_CYAN + ] + }, + + backgroundOpacity: { + selector: '.vjs-bg-opacity > select', + id: 'captions-background-opacity-%s', + label: 'Transparency', + options: [ + OPACITY_OPAQUE, + OPACITY_SEMI, + OPACITY_TRANS + ] + }, + + color: { + selector: '.vjs-fg-color > select', + id: 'captions-foreground-color-%s', + label: 'Color', + options: [ + COLOR_WHITE, + COLOR_BLACK, + COLOR_RED, + COLOR_GREEN, + COLOR_BLUE, + COLOR_YELLOW, + COLOR_MAGENTA, + COLOR_CYAN + ] + }, + + edgeStyle: { + selector: '.vjs-edge-style > select', + id: '%s', + label: 'Text Edge Style', + options: [ + ['none', 'None'], + ['raised', 'Raised'], + ['depressed', 'Depressed'], + ['uniform', 'Uniform'], + ['dropshadow', 'Dropshadow'] + ] + }, + + fontFamily: { + selector: '.vjs-font-family > select', + id: 'captions-font-family-%s', + label: 'Font Family', + options: [ + ['proportionalSansSerif', 'Proportional Sans-Serif'], + ['monospaceSansSerif', 'Monospace Sans-Serif'], + ['proportionalSerif', 'Proportional Serif'], + ['monospaceSerif', 'Monospace Serif'], + ['casual', 'Casual'], + ['script', 'Script'], + ['small-caps', 'Small Caps'] + ] + }, + + fontPercent: { + selector: '.vjs-font-percent > select', + id: 'captions-font-size-%s', + label: 'Font Size', + options: [ + ['0.50', '50%'], + ['0.75', '75%'], + ['1.00', '100%'], + ['1.25', '125%'], + ['1.50', '150%'], + ['1.75', '175%'], + ['2.00', '200%'], + ['3.00', '300%'], + ['4.00', '400%'] + ], + default: 2, + parser: (v) => v === '1.00' ? null : Number(v) + }, + + textOpacity: { + selector: '.vjs-text-opacity > select', + id: 'captions-foreground-opacity-%s', + label: 'Transparency', + options: [ + OPACITY_OPAQUE, + OPACITY_SEMI + ] + }, + + // Options for this object are defined below. + windowColor: { + selector: '.vjs-window-color > select', + id: 'captions-window-color-%s', + label: 'Color' + }, + + // Options for this object are defined below. + windowOpacity: { + selector: '.vjs-window-opacity > select', + id: 'captions-window-opacity-%s', + label: 'Transparency', + options: [ + OPACITY_TRANS, + OPACITY_SEMI, + OPACITY_OPAQUE + ] + } +}; -function captionOptionsMenuTemplate(uniqueId, dialogLabelId, dialogDescriptionId) { - const template = ` -
-
Captions Settings Dialog
-
Beginning of dialog window. Escape will cancel and close the window.
-
-
-
- Text - - - - - - -
-
- Background - - - - - - -
-
- Window - - - - - - -
-
-
-
- - -
-
- - -
-
- - -
-
-
- - -
-
-
- `; - - return template; -} +selectConfigs.windowColor.options = selectConfigs.backgroundColor.options; -function getSelectedOptionValue(target) { - let selectedOption; +/** + * Parses out option values. + * + * @private + * @param {String} value + * @param {Function} [parser] + * Optional function to adjust the value. + * @return {Mixed} + * Will be `undefined` if no value exists (or if given value is "none"). + */ +function parseOptionValue(value, parser) { + if (parser) { + value = parser(value); + } - // not all browsers support selectedOptions, so, fallback to options - if (target.selectedOptions) { - selectedOption = target.selectedOptions[0]; - } else if (target.options) { - selectedOption = target.options[target.options.selectedIndex]; + if (value && value !== 'none') { + return value; } +} + +/** + * Gets the value of the selected