- /**
- * BlockScene represents the Scene which resided inside a channel
- * @class BlockScene
- * @extends Block
- * @constructor
- * @param {string} i_placement location where objects resides which can be scene or timeline
- * @param {string} i_campaign_timeline_chanel_player_id required and set as block id when block is inserted onto timeline_channel
- * @return {Object} Block instance
- */
- define(['jquery', 'backbone', 'Block'], function ($, Backbone, Block) {
-
- /**
- Custom event fired when a new scene background color changed
- @event SCENE_BG_COLOR_CHANGED
- @param {This} caller
- @param {Self} context caller
- @param {Event} color
- @static
- @final
- **/
- BB.EVENTS.SCENE_BG_COLOR_CHANGED = 'SCENE_BG_COLOR_CHANGED';
-
- /**
- event fires when scene the scene width or height modified by user
- @event Block.SCENE_BLOCK_DIMENSIONS_CHANGE
- @param {this} caller
- @param {String} selected block_id
- **/
- BB.EVENTS.SCENE_BLOCK_DIMENSIONS_CHANGE = 'SCENE_BLOCK_DIMENSIONS_CHANGE';
-
- var BlockScene = Block.extend({
-
- /**
- Constructor
- @method initialize
- **/
- constructor: function (options) {
- var self = this;
- self.m_blockType = 3510;
- _.extend(options, {blockType: self.m_blockType})
- Block.prototype.constructor.call(this, options);
- self._initSubPanel(Elements.BLOCK_SCENE_COMMON_PROPERTIES);
- self._listenInputChanges();
- self._listenBgColorChanges();
- self.m_canvas = undefined;
- self.m_gridMagneticMode = 0;
- },
-
- /**
- Override Update the title of the scene block inside the assigned element.
- @override _updateTitle
- @return none
- **/
- _updateTitle: function () {
- var self = this;
- var sceneMime = BB.Pepper.getSceneMime(self.m_block_id);
- if (_.isUndefined(sceneMime) || sceneMime == '') {
- $(Elements.SELECTED_CHANNEL_RESOURCE_NAME).text(self.m_blockName);
- return;
- }
- $(Elements.SELECTED_CHANNEL_RESOURCE_NAME).text('Scene type: ' + sceneMime.split('.')[1]);
- },
-
-
- /**
- set player data for a scene
- @Override
- @method getPlayerData
- @param {Number} i_playerData
- @return {Number} Unique clientId.
- **/
- getBlockData: function () {
- var self = this;
- var data = Block.prototype.getBlockData.call(this);
- var domPlayerData = self._getBlockPlayerData();
- data.blockName = $(domPlayerData).find('Player').eq(0).attr('label');
- return data;
- },
-
- /**
- Enable gradient background UI
- @method _enableBgSelection
- **/
- _enableBgSelection: function () {
- var self = this;
- $(Elements.SHOW_BACKGROUND).prop('checked', true);
- $(Elements.BG_COLOR_SOLID_SELECTOR).show();
- $(Elements.BG_COLOR_GRADIENT_SELECTOR).hide();
- self._populateSceneBgPropColorPicker();
- },
-
- /**
- Set the color picker color of scene background
- @method setbgSceneSetPropColorPicker
- @param {Number} i_color
- **/
- _populateSceneBgPropColorPicker: function () {
- var self = this;
- var domPlayerData = self._getBlockPlayerData();
- var xPoints = self._findGradientPoints(domPlayerData);
- var color = $(xPoints).find('Point').attr('color');
- if (_.isUndefined(color))
- color = '16777215';
- color = '#' + BB.lib.decimalToHex(color);
- self.m_blockProperty.setBgScenePropColorPicker(color);
- },
-
- /**
- Listen to changes in scene background color selection
- @method _listenBgColorChanges
- **/
- _listenBgColorChanges: function () {
- var self = this;
- BB.comBroker.listenWithNamespace(BB.EVENTS.SCENE_BG_COLOR_CHANGED, self, function (e) {
- if (!self.m_selected)
- return;
- var color = e.edata;
- var domPlayerData = self._getBlockPlayerData();
- var xPoints = self._findGradientPoints(domPlayerData);
- $(xPoints).find('Point').attr('color', BB.lib.hexToDecimal(color));
- self._setBlockPlayerData(domPlayerData);
-
- if (self.m_placement == BB.CONSTS.PLACEMENT_IS_SCENE)
- self._populateSceneBg();
- });
- },
-
- /**
- When user changes a URL link for the feed, update the msdb
- @method _listenInputChange
- @return none
- **/
- _listenInputChanges: function () {
- var self = this;
- // Scene name
- self.m_inputNameChangeHandler = _.debounce(function (e) {
- if (!self.m_selected)
- return;
- var text = $(e.target).val();
- text = BB.lib.cleanProbCharacters(text, 1);
- var domPlayerData = self._getBlockPlayerData();
- $(domPlayerData).find('Player').eq(0).attr('label', text);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- BB.comBroker.fire(BB.EVENTS.SCENE_LIST_UPDATED, this);
- }, 200);
- $(Elements.SCENE_NAME_INPUT).on("input", self.m_inputNameChangeHandler);
-
- self.m_inputChangeHandler = _.debounce(function (e) {
- if (!self.m_selected)
- return;
- var domPlayerData = self._getBlockPlayerData();
- var w1 = parseFloat($(Elements.SCENE_WIDTH_INPUT).val());
- var h1 = parseFloat($(Elements.SCENE_HEIGHT_INPUT).val());
- var w2 = parseFloat($(domPlayerData).find('Layout').eq(0).attr('width'));
- var h2 = parseFloat($(domPlayerData).find('Layout').eq(0).attr('height'));
- if (w1 < 100 || h1 < 100 || _.isNaN(w1) || _.isNaN(h1))
- return;
- if (w1 == w2 && h1 == h2)
- return;
- $(domPlayerData).find('Layout').eq(0).attr('width', w1);
- $(domPlayerData).find('Layout').eq(0).attr('height', h1);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- BB.comBroker.fire(BB.EVENTS['SCENE_BLOCK_DIMENSIONS_CHANGE'], self, null, self.m_block_id);
- }, 333);
- $(Elements.DIMENSION_APPLY_SCENE).on('click', self.m_inputChangeHandler);
- },
-
- /**
- Update the msdb for the block with new values inside its player_data
- @method _setBlockPlayerData
- @param {Object} i_xmlDoc
- **/
- _setBlockPlayerData: function (i_xmlDoc, i_noNotify) {
- var self = this;
- var player_data = (new XMLSerializer()).serializeToString(i_xmlDoc);
- switch (self.m_placement) {
- case BB.CONSTS.PLACEMENT_CHANNEL:
- {
- var recBlock = pepper.getCampaignTimelineChannelPlayerRecord(self.m_block_id);
- var domPlayerData = $.parseXML(recBlock['player_data']);
- var scene_id = $(domPlayerData).find('Player').attr('hDataSrc');
- var player_data = (new XMLSerializer()).serializeToString(i_xmlDoc);
- pepper.setScenePlayerData(scene_id, player_data);
- break;
- }
-
- case BB.CONSTS.PLACEMENT_IS_SCENE:
- {
- pepper.setScenePlayerData(self.m_block_id, player_data);
- //if (!i_noNotify)
- // self._announceBlockChanged();
- break;
- }
- }
- },
-
- /**
- Override the base method so we never announce any changes on Scene block
- @method _announceBlockChanged
- **/
- _announceBlockChanged: function () {
- },
-
- /**
- Get the XML player data of a block, depending where its placed
- @Override
- @method _getBlockPlayerData
- @return {Object} player data of block (aka player) parsed as DOM
- **/
- _getBlockPlayerData: function () {
- var self = this;
- var recBlock = undefined;
-
- switch (self.m_placement) {
-
- case BB.CONSTS.PLACEMENT_CHANNEL:
- {
- recBlock = pepper.getCampaignTimelineChannelPlayerRecord(self.m_block_id);
- var domPlayerData = $.parseXML(recBlock['player_data']);
- var sceneHandle = $(domPlayerData).find('Player').attr('hDataSrc');
- return pepper.getScenePlayerdataDom(sceneHandle);
- break;
- }
-
- case BB.CONSTS.PLACEMENT_IS_SCENE:
- {
- var blockID = pepper.getSceneIdFromPseudoId(self.m_block_id);
- var recPlayerData = BB.Pepper.getScenePlayerRecord(blockID);
- var xPlayerdata = recPlayerData['player_data_value'];
- return $.parseXML(xPlayerdata);
- break;
- }
- }
- },
-
- /**
- Find the border section in player_data for selected block
- @method
- @method _findBorder
- @param {object} i_domPlayerData
- @return {Xml} xSnippet
- **/
- _findBorder: function (i_domPlayerData) {
- var self = this;
- var xSnippet = $(i_domPlayerData).find('Layout').eq(0).siblings().filter('Border');
- return xSnippet;
- },
-
- /**
- Find the background section in player_data for selected block
- @Override
- @method _findBackground
- @param {object} i_domPlayerData
- @return {Xml} xSnippet
- **/
- _findBackground: function (i_domPlayerData) {
- var self = this;
- var xSnippet = $(i_domPlayerData).find('Layout').eq(0).siblings().filter('Background');
- return xSnippet;
- },
-
- /**
- Find the gradient blocks in player_data for selected scene block
- @Override
- @method _findGradientPoints
- @param {object} i_domPlayerData
- @return {Xml} xSnippet
- **/
- _findGradientPoints: function (i_domPlayerData) {
- var self = this;
- var xBackground = $(i_domPlayerData).find('Layout').eq(0).siblings().filter('Background');
- var xSnippet = $(xBackground).find('GradientPoints').eq(0);
- return xSnippet;
- },
-
- /**
- Load up property values in the common panel
- @method _populate
- @return none
- **/
- _populate: function () {
- var self = this;
-
- switch (self.m_placement) {
- case BB.CONSTS.PLACEMENT_CHANNEL:
- {
- $(Elements.SCENE_WIDTH_INPUT).hide();
- $(Elements.SCENE_HEIGHT_INPUT).hide();
- $(Elements.DIMENSION_APPLY_SCENE).hide();
- var domPlayerData = self._getBlockPlayerData();
- var domPlayer = $(domPlayerData).find('Player').eq(0);
- var domPlayerLayout = $(domPlayerData).find('Player').eq(0).find('Layout');
- $(Elements.SCENE_NAME_INPUT).val($(domPlayer).attr('label'));
- break;
- }
-
- case BB.CONSTS.PLACEMENT_IS_SCENE:
- {
- $(Elements.SCENE_WIDTH_INPUT).show();
- $(Elements.SCENE_HEIGHT_INPUT).show();
- $(Elements.DIMENSION_APPLY_SCENE).show();
- $(Elements.SCENE_WIDTH_INPUT).val($(domPlayerLayout).attr('width'));
- $(Elements.SCENE_HEIGHT_INPUT).val($(domPlayerLayout).attr('height'));
- var domPlayerData = self._getBlockPlayerData();
- var domPlayer = $(domPlayerData).find('Player').eq(0);
- var domPlayerLayout = $(domPlayerData).find('Player').eq(0).find('Layout');
- $(Elements.SCENE_NAME_INPUT).val($(domPlayer).attr('label'));
- $(Elements.SCENE_WIDTH_INPUT).val($(domPlayerLayout).attr('width'));
- $(Elements.SCENE_HEIGHT_INPUT).val($(domPlayerLayout).attr('height'));
- self._populateSceneBg();
- break;
- }
- }
- },
-
- /**
- Populate the common block properties panel, called from base class if exists
- @method _loadBlockSpecificProps
- @return none
- **/
- _loadBlockSpecificProps: function () {
- var self = this;
- self._populate();
- this._viewSubPanel(Elements.BLOCK_SCENE_COMMON_PROPERTIES);
- },
-
- /**
- Add the checkers background to a scene
- @method _applySceneBgImage
- @param {String} i_image
- **/
- _applySceneBgImage: function (i_image) {
- var self = this;
- self.m_canvas.setBackgroundColor('', self.m_canvas.renderAll.bind(self.m_canvas));
- $(Elements.SCENE_CANVAS_CONTAINER).find('.canvas-container').removeClass('checkers').removeClass('grid25').removeClass('grid50').addClass(i_image);
- self.m_canvas.renderAll();
- },
-
- /**
- Set a scene's background color or image
- @method _populateSceneBg
- **/
- _populateSceneBg: function () {
- var self = this;
- var domPlayerData = self._getBlockPlayerData();
- var colorPoints = self._findGradientPoints(domPlayerData)
- var color = $(colorPoints).find('Point').attr('color');
-
- switch (self.m_gridMagneticMode) {
- case 0:
- {
- if (_.isUndefined(color)) {
- self._applySceneBgImage('checkers');
- return;
- }
- color = '#' + BB.lib.decimalToHex(color);
- if (self.m_canvas.backgroundColor == color)
- return;
- self.m_canvas.setBackgroundColor(color, function () {
- });
- self.m_canvas.renderAll();
- break;
- }
- case 1:
- {
- self._applySceneBgImage('grid25');
- break;
- }
- case 2:
- {
- self._applySceneBgImage('grid50');
- break;
- }
- }
- },
-
- /**
- Toggle block background on UI checkbox selection
- @Override
- @method _toggleBackgroundColorHandler
- @param {event} e
- **/
- _toggleBackgroundColorHandler: function (e) {
- var self = this;
- $(Elements.SCENE_CANVAS_CONTAINER).find('.canvas-container').removeClass('checkers');
- Block.prototype._toggleBackgroundColorHandler.call(this, e);
- if (self.m_placement == BB.CONSTS.PLACEMENT_IS_SCENE)
- self._populateSceneBg();
- },
-
- /**
- Set reference to managed canvas
- @method setCanvas
- @param {Object} i_canvas
- @param {Number} i_magneticGridMode
- **/
- setCanvas: function (i_canvas, i_magneticGridMode) {
- var self = this;
- self.m_canvas = i_canvas;
- self.m_gridMagneticMode = i_magneticGridMode;
- self._populateSceneBg();
- },
-
- /**
- Get the scene id that's associated with this block given that it resides in a timeline > channel
- @method getChannelBlockSceneID
- @return {Number} scene_id;
- **/
- getChannelBlockSceneID: function () {
- var self = this;
- var recBlock = pepper.getCampaignTimelineChannelPlayerRecord(self.m_block_id);
- var domPlayerData = $.parseXML(recBlock['player_data']);
- var scene_id = $(domPlayerData).find('Player').attr('hDataSrc');
- return scene_id;
- },
-
- /**
- Delete this block
- @method deleteBlock
- @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb
- **/
- deleteBlock: function (i_memoryOnly) {
- var self = this;
- BB.comBroker.stopListenWithNamespace(BB.EVENTS.SCENE_BG_COLOR_CHANGED, self);
- $(Elements.SCENE_NAME_INPUT).off("input", self.m_inputNameChangeHandler);
- $(Elements.SCENE_WIDTH_INPUT).off("input", self.m_inputWidthChangeHandler);
- $(Elements.SCENE_WIDTH_INPUT).off("blur", self.m_inputWidthChangeHandler);
- $(Elements.SCENE_HEIGHT_INPUT).off("blur", self.m_inputWidthChangeHandler);
- $(Elements.SCENE_HEIGHT_INPUT).off("input", self.m_inputHeightChangeHandler);
- self._deleteBlock(i_memoryOnly);
- }
- });
-
- return BlockScene;
- });
-