File:CaptionsPlugin.js

/**
 * @module Container
 * @namespace springroll
 */
(function()
{
	var SavedData = include('springroll.SavedData');

	/**
	 * @class Container
	 */
	var plugin = new springroll.ContainerPlugin(70);

	/**
	 * The name of the saved property for the captions styles
	 * @property {string} CAPTIONS_STYLES
	 * @static
	 * @private
	 * @final
	 */
	var CAPTIONS_STYLES = 'captionsStyles';

	/**
	 * The map of the default caption style settings
	 * @property {object} DEFAULT_CAPTIONS_STYLES
	 * @static
	 * @private
	 * @final
	 */
	var DEFAULT_CAPTIONS_STYLES = {
		size: "md",
		background: "black-semi",
		color: "white",
		edge: "none",
		font: "arial",
		align: "top"
	};

	/**
	 * The name of the saved property if the captions are muted or not
	 * @property {string} CAPTIONS_MUTED
	 * @static
	 * @private
	 * @final
	 */
	var CAPTIONS_MUTED = 'captionsMuted';

	plugin.setup = function()
	{
		/**
		 * The collection of captions styles
		 * @property {string} _captionsStyles
		 * @private
		 */
		this._captionsStyles = Object.merge(
			{},
			DEFAULT_CAPTIONS_STYLES,
			SavedData.read(CAPTIONS_STYLES) ||
			{}
		);

		/**
		 * Reference to the captions button
		 * @property {jquery} captionsButton
		 */
		this.captionsButton = $(this.options.captionsButton)
			.click(function()
				{
					this.captionsMuted = !this.captionsMuted;
				}
				.bind(this));

		/**
		 * Set the captions are enabled or not
		 * @property {boolean} captionsMuted
		 * @default true
		 */
		Object.defineProperty(this, CAPTIONS_MUTED,
		{
			set: function(muted)
			{
				this._captionsMuted = muted;
				this._setMuteProp(CAPTIONS_MUTED, this.captionsButton, muted);
			},
			get: function()
			{
				return this._captionsMuted;
			}
		});

		/**
		 * Set the captions styles
		 * @method setCaptionsStyles
		 * @param {object|String} [styles] The style options or the name of the
		 * property (e.g., "color", "edge", "font", "background", "size")
		 * @param {string} [styles.color='white'] The text color, the default is white
		 * @param {string} [styles.edge='none'] The edge style, default is none
		 * @param {string} [styles.font='arial'] The font style, default is arial
		 * @param {string} [styles.background='black-semi'] The background style, black semi-transparent
		 * @param {string} [styles.size='md'] The font style default is medium
		 * @param {string} [styles.align='top'] The align style default is top of the window
		 * @param {string} [value] If setting styles parameter as a string, this is the value of the property.
		 */
		this.setCaptionsStyles = function(styles, value)
		{
			if (typeof styles === "object")
			{
				Object.merge(
					this._captionsStyles,
					styles ||
					{}
				);
			}
			else if (typeof styles === "string")
			{
				this._captionsStyles[styles] = value;
			}

			styles = this._captionsStyles;

			// Do some validation on the style settings
			if (DEBUG)
			{
				if (!styles.color || !/^(black|white|red|yellow|pink|blue)(-semi)?$/.test(styles.color))
				{
					throw "Setting captions color style is invalid value : " + styles.color;
				}
				if (!styles.background || !/^none|((black|white|red|yellow|pink|blue)(-semi)?)$/.test(styles.background))
				{
					throw "Setting captions background style is invalid value : " + styles.background;
				}
				if (!styles.size || !/^(xs|sm|md|lg|xl)$/.test(styles.size))
				{
					throw "Setting captions size style is invalid value : " + styles.size;
				}
				if (!styles.edge || !/^(raise|depress|uniform|drop|none)$/.test(styles.edge))
				{
					throw "Setting captions edge style is invalid value : " + styles.edge;
				}
				if (!styles.font || !/^(georgia|palatino|times|arial|arial-black|comic-sans|impact|lucida|tahoma|trebuchet|verdana|courier|console)$/.test(styles.font))
				{
					throw "Setting captions font style is invalid value : " + styles.font;
				}
				if (!styles.align || !/^(top|bottom)$/.test(styles.align))
				{
					throw "Setting captions align style is invalid value : " + styles.align;
				}
			}

			SavedData.write(CAPTIONS_STYLES, styles);
			if (this.client)
			{
				this.client.send(CAPTIONS_STYLES, styles);
			}
		};

		/**
		 * Get the captions styles
		 * @method getCaptionsStyles
		 * @param {string} [prop] The optional property, values are "size", "edge", "font", "background", "color"
		 * @return {object} The collection of styles, see setCaptionsStyles for more info.
		 */
		this.getCaptionsStyles = function(prop)
		{
			var styles = this._captionsStyles;
			return prop ? styles[prop] : styles;
		};

		/**
		 * Reset the captions styles
		 * @method clearCaptionsStyles
		 */
		this.clearCaptionsStyles = function()
		{
			this._captionsStyles = Object.merge(
			{}, DEFAULT_CAPTIONS_STYLES);
			this.setCaptionsStyles();
		};

		// Handle the features request
		this.on('features', function(features)
		{
			this.captionsButton.hide();
			if (features.captions) this.captionsButton.show();
		});

		//Set the defaults if we have none for the controls
		if (SavedData.read(CAPTIONS_MUTED) === null)
		{
			this.captionsMuted = true;
		}
	};

	plugin.opened = function()
	{
		this.captionsButton.removeClass('disabled');
		this.captionsMuted = !!SavedData.read(CAPTIONS_MUTED);
		this.setCaptionsStyles(SavedData.read(CAPTIONS_STYLES));
	};

	plugin.close = function()
	{
		this._disableButton(this.captionsButton);
	};

	plugin.teardown = function()
	{
		this.captionsButton.off('click');
		delete this.captionsButton;
		delete this._captionsStyles;
		delete this.getCaptionsStyles;
		delete this.setCaptionsStyles;
		delete this.clearCaptionsStyles;
		delete this._captionsMuted;
	};

}());