APIs

Show:
  1. /**
  2. * BlockScene represents the Scene which resided inside a channel
  3. * @class BlockScene
  4. * @extends Block
  5. * @constructor
  6. * @param {string} i_placement location where objects resides which can be scene or timeline
  7. * @param {string} i_campaign_timeline_chanel_player_id required and set as block id when block is inserted onto timeline_channel
  8. * @return {Object} Block instance
  9. */
  10. define(['jquery', 'backbone', 'Block'], function ($, Backbone, Block) {
  11.  
  12. /**
  13. Custom event fired when a new scene background color changed
  14. @event SCENE_BG_COLOR_CHANGED
  15. @param {This} caller
  16. @param {Self} context caller
  17. @param {Event} color
  18. @static
  19. @final
  20. **/
  21. BB.EVENTS.SCENE_BG_COLOR_CHANGED = 'SCENE_BG_COLOR_CHANGED';
  22.  
  23. /**
  24. event fires when scene the scene width or height modified by user
  25. @event Block.SCENE_BLOCK_DIMENSIONS_CHANGE
  26. @param {this} caller
  27. @param {String} selected block_id
  28. **/
  29. BB.EVENTS.SCENE_BLOCK_DIMENSIONS_CHANGE = 'SCENE_BLOCK_DIMENSIONS_CHANGE';
  30.  
  31. var BlockScene = Block.extend({
  32.  
  33. /**
  34. Constructor
  35. @method initialize
  36. **/
  37. constructor: function (options) {
  38. var self = this;
  39. self.m_blockType = 3510;
  40. _.extend(options, {blockType: self.m_blockType})
  41. Block.prototype.constructor.call(this, options);
  42. self._initSubPanel(Elements.BLOCK_SCENE_COMMON_PROPERTIES);
  43. self._listenInputChanges();
  44. self._listenBgColorChanges();
  45. self.m_canvas = undefined;
  46. self.m_gridMagneticMode = 0;
  47. },
  48.  
  49. /**
  50. Override Update the title of the scene block inside the assigned element.
  51. @override _updateTitle
  52. @return none
  53. **/
  54. _updateTitle: function () {
  55. var self = this;
  56. var sceneMime = BB.Pepper.getSceneMime(self.m_block_id);
  57. if (_.isUndefined(sceneMime) || sceneMime == '') {
  58. $(Elements.SELECTED_CHANNEL_RESOURCE_NAME).text(self.m_blockName);
  59. return;
  60. }
  61. $(Elements.SELECTED_CHANNEL_RESOURCE_NAME).text('Scene type: ' + sceneMime.split('.')[1]);
  62. },
  63.  
  64.  
  65. /**
  66. set player data for a scene
  67. @Override
  68. @method getPlayerData
  69. @param {Number} i_playerData
  70. @return {Number} Unique clientId.
  71. **/
  72. getBlockData: function () {
  73. var self = this;
  74. var data = Block.prototype.getBlockData.call(this);
  75. var domPlayerData = self._getBlockPlayerData();
  76. data.blockName = $(domPlayerData).find('Player').eq(0).attr('label');
  77. return data;
  78. },
  79.  
  80. /**
  81. Enable gradient background UI
  82. @method _enableBgSelection
  83. **/
  84. _enableBgSelection: function () {
  85. var self = this;
  86. $(Elements.SHOW_BACKGROUND).prop('checked', true);
  87. $(Elements.BG_COLOR_SOLID_SELECTOR).show();
  88. $(Elements.BG_COLOR_GRADIENT_SELECTOR).hide();
  89. self._populateSceneBgPropColorPicker();
  90. },
  91.  
  92. /**
  93. Set the color picker color of scene background
  94. @method setbgSceneSetPropColorPicker
  95. @param {Number} i_color
  96. **/
  97. _populateSceneBgPropColorPicker: function () {
  98. var self = this;
  99. var domPlayerData = self._getBlockPlayerData();
  100. var xPoints = self._findGradientPoints(domPlayerData);
  101. var color = $(xPoints).find('Point').attr('color');
  102. if (_.isUndefined(color))
  103. color = '16777215';
  104. color = '#' + BB.lib.decimalToHex(color);
  105. self.m_blockProperty.setBgScenePropColorPicker(color);
  106. },
  107.  
  108. /**
  109. Listen to changes in scene background color selection
  110. @method _listenBgColorChanges
  111. **/
  112. _listenBgColorChanges: function () {
  113. var self = this;
  114. BB.comBroker.listenWithNamespace(BB.EVENTS.SCENE_BG_COLOR_CHANGED, self, function (e) {
  115. if (!self.m_selected)
  116. return;
  117. var color = e.edata;
  118. var domPlayerData = self._getBlockPlayerData();
  119. var xPoints = self._findGradientPoints(domPlayerData);
  120. $(xPoints).find('Point').attr('color', BB.lib.hexToDecimal(color));
  121. self._setBlockPlayerData(domPlayerData);
  122.  
  123. if (self.m_placement == BB.CONSTS.PLACEMENT_IS_SCENE)
  124. self._populateSceneBg();
  125. });
  126. },
  127.  
  128. /**
  129. When user changes a URL link for the feed, update the msdb
  130. @method _listenInputChange
  131. @return none
  132. **/
  133. _listenInputChanges: function () {
  134. var self = this;
  135. // Scene name
  136. self.m_inputNameChangeHandler = _.debounce(function (e) {
  137. if (!self.m_selected)
  138. return;
  139. var text = $(e.target).val();
  140. text = BB.lib.cleanProbCharacters(text, 1);
  141. var domPlayerData = self._getBlockPlayerData();
  142. $(domPlayerData).find('Player').eq(0).attr('label', text);
  143. self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
  144. BB.comBroker.fire(BB.EVENTS.SCENE_LIST_UPDATED, this);
  145. }, 200);
  146. $(Elements.SCENE_NAME_INPUT).on("input", self.m_inputNameChangeHandler);
  147.  
  148. self.m_inputChangeHandler = _.debounce(function (e) {
  149. if (!self.m_selected)
  150. return;
  151. var domPlayerData = self._getBlockPlayerData();
  152. var w1 = parseFloat($(Elements.SCENE_WIDTH_INPUT).val());
  153. var h1 = parseFloat($(Elements.SCENE_HEIGHT_INPUT).val());
  154. var w2 = parseFloat($(domPlayerData).find('Layout').eq(0).attr('width'));
  155. var h2 = parseFloat($(domPlayerData).find('Layout').eq(0).attr('height'));
  156. if (w1 < 100 || h1 < 100 || _.isNaN(w1) || _.isNaN(h1))
  157. return;
  158. if (w1 == w2 && h1 == h2)
  159. return;
  160. $(domPlayerData).find('Layout').eq(0).attr('width', w1);
  161. $(domPlayerData).find('Layout').eq(0).attr('height', h1);
  162. self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
  163. BB.comBroker.fire(BB.EVENTS['SCENE_BLOCK_DIMENSIONS_CHANGE'], self, null, self.m_block_id);
  164. }, 333);
  165. $(Elements.DIMENSION_APPLY_SCENE).on('click', self.m_inputChangeHandler);
  166. },
  167.  
  168. /**
  169. Update the msdb for the block with new values inside its player_data
  170. @method _setBlockPlayerData
  171. @param {Object} i_xmlDoc
  172. **/
  173. _setBlockPlayerData: function (i_xmlDoc, i_noNotify) {
  174. var self = this;
  175. var player_data = (new XMLSerializer()).serializeToString(i_xmlDoc);
  176. switch (self.m_placement) {
  177. case BB.CONSTS.PLACEMENT_CHANNEL:
  178. {
  179. var recBlock = pepper.getCampaignTimelineChannelPlayerRecord(self.m_block_id);
  180. var domPlayerData = $.parseXML(recBlock['player_data']);
  181. var scene_id = $(domPlayerData).find('Player').attr('hDataSrc');
  182. var player_data = (new XMLSerializer()).serializeToString(i_xmlDoc);
  183. pepper.setScenePlayerData(scene_id, player_data);
  184. break;
  185. }
  186.  
  187. case BB.CONSTS.PLACEMENT_IS_SCENE:
  188. {
  189. pepper.setScenePlayerData(self.m_block_id, player_data);
  190. //if (!i_noNotify)
  191. // self._announceBlockChanged();
  192. break;
  193. }
  194. }
  195. },
  196.  
  197. /**
  198. Override the base method so we never announce any changes on Scene block
  199. @method _announceBlockChanged
  200. **/
  201. _announceBlockChanged: function () {
  202. },
  203.  
  204. /**
  205. Get the XML player data of a block, depending where its placed
  206. @Override
  207. @method _getBlockPlayerData
  208. @return {Object} player data of block (aka player) parsed as DOM
  209. **/
  210. _getBlockPlayerData: function () {
  211. var self = this;
  212. var recBlock = undefined;
  213.  
  214. switch (self.m_placement) {
  215.  
  216. case BB.CONSTS.PLACEMENT_CHANNEL:
  217. {
  218. recBlock = pepper.getCampaignTimelineChannelPlayerRecord(self.m_block_id);
  219. var domPlayerData = $.parseXML(recBlock['player_data']);
  220. var sceneHandle = $(domPlayerData).find('Player').attr('hDataSrc');
  221. return pepper.getScenePlayerdataDom(sceneHandle);
  222. break;
  223. }
  224.  
  225. case BB.CONSTS.PLACEMENT_IS_SCENE:
  226. {
  227. var blockID = pepper.getSceneIdFromPseudoId(self.m_block_id);
  228. var recPlayerData = BB.Pepper.getScenePlayerRecord(blockID);
  229. var xPlayerdata = recPlayerData['player_data_value'];
  230. return $.parseXML(xPlayerdata);
  231. break;
  232. }
  233. }
  234. },
  235.  
  236. /**
  237. Find the border section in player_data for selected block
  238. @method
  239. @method _findBorder
  240. @param {object} i_domPlayerData
  241. @return {Xml} xSnippet
  242. **/
  243. _findBorder: function (i_domPlayerData) {
  244. var self = this;
  245. var xSnippet = $(i_domPlayerData).find('Layout').eq(0).siblings().filter('Border');
  246. return xSnippet;
  247. },
  248.  
  249. /**
  250. Find the background section in player_data for selected block
  251. @Override
  252. @method _findBackground
  253. @param {object} i_domPlayerData
  254. @return {Xml} xSnippet
  255. **/
  256. _findBackground: function (i_domPlayerData) {
  257. var self = this;
  258. var xSnippet = $(i_domPlayerData).find('Layout').eq(0).siblings().filter('Background');
  259. return xSnippet;
  260. },
  261.  
  262. /**
  263. Find the gradient blocks in player_data for selected scene block
  264. @Override
  265. @method _findGradientPoints
  266. @param {object} i_domPlayerData
  267. @return {Xml} xSnippet
  268. **/
  269. _findGradientPoints: function (i_domPlayerData) {
  270. var self = this;
  271. var xBackground = $(i_domPlayerData).find('Layout').eq(0).siblings().filter('Background');
  272. var xSnippet = $(xBackground).find('GradientPoints').eq(0);
  273. return xSnippet;
  274. },
  275.  
  276. /**
  277. Load up property values in the common panel
  278. @method _populate
  279. @return none
  280. **/
  281. _populate: function () {
  282. var self = this;
  283.  
  284. switch (self.m_placement) {
  285. case BB.CONSTS.PLACEMENT_CHANNEL:
  286. {
  287. $(Elements.SCENE_WIDTH_INPUT).hide();
  288. $(Elements.SCENE_HEIGHT_INPUT).hide();
  289. $(Elements.DIMENSION_APPLY_SCENE).hide();
  290. var domPlayerData = self._getBlockPlayerData();
  291. var domPlayer = $(domPlayerData).find('Player').eq(0);
  292. var domPlayerLayout = $(domPlayerData).find('Player').eq(0).find('Layout');
  293. $(Elements.SCENE_NAME_INPUT).val($(domPlayer).attr('label'));
  294. break;
  295. }
  296.  
  297. case BB.CONSTS.PLACEMENT_IS_SCENE:
  298. {
  299. $(Elements.SCENE_WIDTH_INPUT).show();
  300. $(Elements.SCENE_HEIGHT_INPUT).show();
  301. $(Elements.DIMENSION_APPLY_SCENE).show();
  302. $(Elements.SCENE_WIDTH_INPUT).val($(domPlayerLayout).attr('width'));
  303. $(Elements.SCENE_HEIGHT_INPUT).val($(domPlayerLayout).attr('height'));
  304. var domPlayerData = self._getBlockPlayerData();
  305. var domPlayer = $(domPlayerData).find('Player').eq(0);
  306. var domPlayerLayout = $(domPlayerData).find('Player').eq(0).find('Layout');
  307. $(Elements.SCENE_NAME_INPUT).val($(domPlayer).attr('label'));
  308. $(Elements.SCENE_WIDTH_INPUT).val($(domPlayerLayout).attr('width'));
  309. $(Elements.SCENE_HEIGHT_INPUT).val($(domPlayerLayout).attr('height'));
  310. self._populateSceneBg();
  311. break;
  312. }
  313. }
  314. },
  315.  
  316. /**
  317. Populate the common block properties panel, called from base class if exists
  318. @method _loadBlockSpecificProps
  319. @return none
  320. **/
  321. _loadBlockSpecificProps: function () {
  322. var self = this;
  323. self._populate();
  324. this._viewSubPanel(Elements.BLOCK_SCENE_COMMON_PROPERTIES);
  325. },
  326.  
  327. /**
  328. Add the checkers background to a scene
  329. @method _applySceneBgImage
  330. @param {String} i_image
  331. **/
  332. _applySceneBgImage: function (i_image) {
  333. var self = this;
  334. self.m_canvas.setBackgroundColor('', self.m_canvas.renderAll.bind(self.m_canvas));
  335. $(Elements.SCENE_CANVAS_CONTAINER).find('.canvas-container').removeClass('checkers').removeClass('grid25').removeClass('grid50').addClass(i_image);
  336. self.m_canvas.renderAll();
  337. },
  338.  
  339. /**
  340. Set a scene's background color or image
  341. @method _populateSceneBg
  342. **/
  343. _populateSceneBg: function () {
  344. var self = this;
  345. var domPlayerData = self._getBlockPlayerData();
  346. var colorPoints = self._findGradientPoints(domPlayerData)
  347. var color = $(colorPoints).find('Point').attr('color');
  348.  
  349. switch (self.m_gridMagneticMode) {
  350. case 0:
  351. {
  352. if (_.isUndefined(color)) {
  353. self._applySceneBgImage('checkers');
  354. return;
  355. }
  356. color = '#' + BB.lib.decimalToHex(color);
  357. if (self.m_canvas.backgroundColor == color)
  358. return;
  359. self.m_canvas.setBackgroundColor(color, function () {
  360. });
  361. self.m_canvas.renderAll();
  362. break;
  363. }
  364. case 1:
  365. {
  366. self._applySceneBgImage('grid25');
  367. break;
  368. }
  369. case 2:
  370. {
  371. self._applySceneBgImage('grid50');
  372. break;
  373. }
  374. }
  375. },
  376.  
  377. /**
  378. Toggle block background on UI checkbox selection
  379. @Override
  380. @method _toggleBackgroundColorHandler
  381. @param {event} e
  382. **/
  383. _toggleBackgroundColorHandler: function (e) {
  384. var self = this;
  385. $(Elements.SCENE_CANVAS_CONTAINER).find('.canvas-container').removeClass('checkers');
  386. Block.prototype._toggleBackgroundColorHandler.call(this, e);
  387. if (self.m_placement == BB.CONSTS.PLACEMENT_IS_SCENE)
  388. self._populateSceneBg();
  389. },
  390.  
  391. /**
  392. Set reference to managed canvas
  393. @method setCanvas
  394. @param {Object} i_canvas
  395. @param {Number} i_magneticGridMode
  396. **/
  397. setCanvas: function (i_canvas, i_magneticGridMode) {
  398. var self = this;
  399. self.m_canvas = i_canvas;
  400. self.m_gridMagneticMode = i_magneticGridMode;
  401. self._populateSceneBg();
  402. },
  403.  
  404. /**
  405. Get the scene id that's associated with this block given that it resides in a timeline > channel
  406. @method getChannelBlockSceneID
  407. @return {Number} scene_id;
  408. **/
  409. getChannelBlockSceneID: function () {
  410. var self = this;
  411. var recBlock = pepper.getCampaignTimelineChannelPlayerRecord(self.m_block_id);
  412. var domPlayerData = $.parseXML(recBlock['player_data']);
  413. var scene_id = $(domPlayerData).find('Player').attr('hDataSrc');
  414. return scene_id;
  415. },
  416.  
  417. /**
  418. Delete this block
  419. @method deleteBlock
  420. @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb
  421. **/
  422. deleteBlock: function (i_memoryOnly) {
  423. var self = this;
  424. BB.comBroker.stopListenWithNamespace(BB.EVENTS.SCENE_BG_COLOR_CHANGED, self);
  425. $(Elements.SCENE_NAME_INPUT).off("input", self.m_inputNameChangeHandler);
  426. $(Elements.SCENE_WIDTH_INPUT).off("input", self.m_inputWidthChangeHandler);
  427. $(Elements.SCENE_WIDTH_INPUT).off("blur", self.m_inputWidthChangeHandler);
  428. $(Elements.SCENE_HEIGHT_INPUT).off("blur", self.m_inputWidthChangeHandler);
  429. $(Elements.SCENE_HEIGHT_INPUT).off("input", self.m_inputHeightChangeHandler);
  430. self._deleteBlock(i_memoryOnly);
  431. }
  432. });
  433.  
  434. return BlockScene;
  435. });