APIs

Show:
  1. ///<reference path="../../typings/lite/app_references.d.ts" />
  2. var __extends = (this && this.__extends) || function (d, b) {
  3. for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  4. function __() { this.constructor = d; }
  5. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  6. };
  7. //GULP_ABSTRACT_END
  8. define(['jquery', 'Block'], function ($, Block) {
  9. TSLiteModules.Block = Block;
  10. /**
  11. * BlockJsonItem block resides inside a scene or timeline
  12. * @class BlockJsonItem
  13. * @extends Block
  14. * @constructor
  15. * @param {string} i_placement location where objects resides which can be scene or timeline
  16. * @param {string} i_campaign_timeline_chanel_player_id required and set as block id when block is inserted onto timeline_channel
  17. * @return {Object} Block instance
  18. * @example
  19. * path: http://www.digitalsignage.com/videoTutorials/_data/videos.json
  20. * json player: children[0].children
  21. * json item: text
  22. *
  23. *
  24. * https://secure.digitalsignage.com/GoogleSheetsValues/6e2919a1-47f0-4a4f-bd94-de7ecfbe604d/1-DBPXrRzvB68kM7-ALH4DapNPOr1pDf7MHoQZSKVhKE/0/R1C1:R3C21
  25. * 6e2919a1-47f0-4a4f-bd94-de7ecfbe604d
  26. */
  27. var BlockJsonItem = (function (_super) {
  28. __extends(BlockJsonItem, _super);
  29. function BlockJsonItem(options) {
  30. if (options) {
  31. this.m_options = options;
  32. }
  33. this.m_blockType = 4310;
  34. _.extend(this.m_options, { blockType: this.m_blockType });
  35. _super.call(this);
  36. }
  37. BlockJsonItem.prototype.initialize = function () {
  38. var self = this;
  39. _super.prototype.initialize.call(this, self.m_options);
  40. self._initSubPanel(Elements.BLOCK_JSON_ITEM_COMMON_PROPERTIES);
  41. self.m_labelFontSelector = self.m_blockProperty.getLabelJsonItemFontSelector();
  42. self._listenInputFieldPathChange();
  43. self._listenFontSelectionChange();
  44. self._listenMouseEntersSceneCanvas();
  45. self._listenFieldSelected();
  46. self._listenDateFormatSelected();
  47. self._listenMaintainAspectChanged();
  48. self._listenDualNumericChanged();
  49. self.m_sceneMime = BB.Pepper.getSceneMime(self.m_sceneID);
  50. self.m_config = {
  51. 'Json.instagram.feed': {
  52. title: 'Instagram',
  53. tabTitle: 'Posts',
  54. fields: {
  55. 1: {
  56. name: "title",
  57. type: "text",
  58. label: "title"
  59. },
  60. 2: {
  61. name: "urlImage",
  62. type: "resource",
  63. label: "image"
  64. },
  65. 3: {
  66. name: "video",
  67. type: "resource",
  68. label: "video"
  69. }
  70. }
  71. },
  72. 'Json.twitter': {
  73. title: 'Twitter',
  74. tabTitle: 'Tweets',
  75. fields: {
  76. 1: {
  77. name: "name",
  78. type: "text",
  79. label: "name"
  80. },
  81. 2: {
  82. name: "text",
  83. type: "text",
  84. label: "text"
  85. },
  86. 3: {
  87. name: "screen_name",
  88. type: "text",
  89. label: "screen name"
  90. },
  91. 4: {
  92. name: "created_at",
  93. type: "text",
  94. label: "created at"
  95. },
  96. 5: {
  97. name: "profile_background_image_url",
  98. type: "resource",
  99. label: "Background image"
  100. },
  101. 6: {
  102. name: "profile_image_url",
  103. type: "resource",
  104. label: "Image"
  105. }
  106. }
  107. },
  108. 'Json.digg': {
  109. title: 'Digg',
  110. tabTitle: 'Posts',
  111. fields: {
  112. 1: {
  113. name: "title",
  114. type: "text",
  115. label: "title"
  116. },
  117. 2: {
  118. name: "link",
  119. type: "resource",
  120. label: "image"
  121. }
  122. }
  123. },
  124. 'Json.spreadsheet': {
  125. title: 'Spreadsheet',
  126. tabTitle: 'Cells',
  127. fields: {
  128. 1: {
  129. name: "$cells.1.1.value",
  130. type: "dual_numeric",
  131. label: "Sheet cell"
  132. }
  133. }
  134. },
  135. 'Json.calendar': {
  136. title: 'Calendar',
  137. tabTitle: 'Date',
  138. fields: {
  139. 1: {
  140. name: "summary",
  141. type: "text",
  142. label: "summary"
  143. },
  144. 2: {
  145. name: "description",
  146. type: "text",
  147. label: "description"
  148. },
  149. 3: {
  150. name: "organizer",
  151. type: "text",
  152. label: "organizer"
  153. },
  154. 4: {
  155. name: "organizerEmail",
  156. type: "text",
  157. label: "organizer email"
  158. },
  159. 5: {
  160. name: "created",
  161. type: "text",
  162. label: "created"
  163. },
  164. 6: {
  165. name: "startDateTime_time",
  166. type: "date",
  167. label: "start date time"
  168. },
  169. 7: {
  170. name: "endDateTime_time",
  171. type: "date",
  172. label: "end date time"
  173. },
  174. 8: {
  175. name: "updated",
  176. type: "text",
  177. label: "updated"
  178. }
  179. }
  180. },
  181. 'Json.weather': {
  182. title: 'World weather',
  183. tabTitle: 'Conditions',
  184. fields: {
  185. 1: {
  186. name: "$[0].data.current_condition[0].iconPath",
  187. type: "resource",
  188. label: "current icon"
  189. },
  190. 2: {
  191. name: "$[0].data.current_condition[0].temp_@",
  192. type: "text",
  193. label: "current temp"
  194. },
  195. 3: {
  196. name: "$[0].data.current_condition[0].humidity",
  197. type: "text",
  198. label: "current humidity"
  199. },
  200. 4: {
  201. name: "$[0].data.weather[0].iconPath",
  202. type: "resource",
  203. label: "today icon"
  204. },
  205. 5: {
  206. name: "$[0].data.weather[0].mintemp@",
  207. type: "text",
  208. label: "today min temp"
  209. },
  210. 6: {
  211. name: "$[0].data.weather[0].maxtemp@",
  212. type: "text",
  213. label: "today max temp"
  214. },
  215. 7: {
  216. name: "$[0].data.weather[0].day",
  217. type: "text",
  218. label: "today label"
  219. },
  220. 8: {
  221. name: "$[0].data.weather[1].iconPath",
  222. type: "resource",
  223. label: "today+1 icon"
  224. },
  225. 9: {
  226. name: "$[0].data.weather[1].mintemp@",
  227. type: "text",
  228. label: "today+1 min temp"
  229. },
  230. 10: {
  231. name: "$[0].data.weather[1].maxtemp@",
  232. type: "text",
  233. label: "today+1 max temp"
  234. },
  235. 11: {
  236. name: "$[0].data.weather[1].day",
  237. type: "text",
  238. label: "today+1 label"
  239. },
  240. 12: {
  241. name: "$[0].data.weather[2].iconPath",
  242. type: "resource",
  243. label: "today+2 icon"
  244. },
  245. 13: {
  246. name: "$[0].data.weather[2].mintemp@",
  247. type: "text",
  248. label: "today+2 min temp"
  249. },
  250. 14: {
  251. name: "$[0].data.weather[2].maxtemp@",
  252. type: "text",
  253. label: "today+2 max temp"
  254. },
  255. 15: {
  256. name: "$[0].data.weather[2].day",
  257. type: "text",
  258. label: "today+2 label"
  259. },
  260. 16: {
  261. name: "$[0].data.weather[3].iconPath",
  262. type: "resource",
  263. label: "today+3 icon"
  264. },
  265. 17: {
  266. name: "$[0].data.weather[3].mintemp@",
  267. type: "text",
  268. label: "today+3 min temp"
  269. },
  270. 18: {
  271. name: "$[0].data.weather[3].maxtemp@",
  272. type: "text",
  273. label: "today+3 max temp"
  274. },
  275. 19: {
  276. name: "$[0].data.weather[3].day",
  277. type: "text",
  278. label: "today+3 label"
  279. },
  280. 20: {
  281. name: "$[0].data.weather[4].iconPath",
  282. type: "resource",
  283. label: "today+4 icon"
  284. },
  285. 21: {
  286. name: "$[0].data.weather[4].mintemp@",
  287. type: "text",
  288. label: "today+4 min temp"
  289. },
  290. 22: {
  291. name: "$[0].data.weather[4].maxtemp@",
  292. type: "text",
  293. label: "today+4 max temp"
  294. },
  295. 23: {
  296. name: "$[0].data.weather[4].day",
  297. type: "text",
  298. label: "today+4 label"
  299. },
  300. 24: {
  301. name: "$[0].data.weather[5].iconPath",
  302. type: "resource",
  303. label: "today+5 icon"
  304. },
  305. 25: {
  306. name: "$[0].data.weather[5].mintemp@",
  307. type: "text",
  308. label: "today+5 min temp"
  309. },
  310. 26: {
  311. name: "$[0].data.weather[5].maxtemp@",
  312. type: "text",
  313. label: "today+5 max temp"
  314. },
  315. 27: {
  316. name: "$[0].data.weather[5].day",
  317. type: "text",
  318. label: "today+5 label"
  319. },
  320. 28: {
  321. name: "$[0].data.weather[6].iconPath",
  322. type: "resource",
  323. label: "today+6 icon"
  324. },
  325. 29: {
  326. name: "$[0].data.weather[6].mintemp@",
  327. type: "text",
  328. label: "today+6 min temp"
  329. },
  330. 30: {
  331. name: "$[0].data.weather[6].maxtemp@",
  332. type: "text",
  333. label: "today+6 max temp"
  334. },
  335. 31: {
  336. name: "$[0].data.weather[6].day",
  337. type: "text",
  338. label: "today+6 label"
  339. }
  340. }
  341. }
  342. };
  343. };
  344. /**
  345. Populate the dual numeric steppers that are used in components like the google sheets
  346. @method _populateDualNumeric
  347. **/
  348. BlockJsonItem.prototype._populateDualNumeric = function () {
  349. var self = this;
  350. var row = '1';
  351. var column = '1';
  352. var domPlayerData = self._getBlockPlayerData();
  353. var xSnippet = $(domPlayerData).find('XmlItem');
  354. var fieldName = $(xSnippet).attr('fieldName');
  355. var re = /cells.([0-9]+).([0-9]+).value/i;
  356. var match = fieldName.match(re);
  357. if (!_.isNull(match)) {
  358. row = String(match[1]);
  359. column = String(match[2]);
  360. }
  361. var spinners = $('.spinner', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS);
  362. $(spinners[0]).spinner('value', row);
  363. $(spinners[2]).spinner('value', column);
  364. };
  365. /**
  366. Listen when the dual numeric stepper changed
  367. @method _listenDualNumericChanged
  368. **/
  369. BlockJsonItem.prototype._listenDualNumericChanged = function () {
  370. var self = this;
  371. $('.spinner', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).spinner({ value: 1, min: 1, max: 1000, step: 1 });
  372. $('.spinner-input', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).prop('disabled', true).css({ backgroundColor: 'transparent' });
  373. self.m_dualNumericHandler = _.debounce(function (e) {
  374. if (!self.m_selected)
  375. return;
  376. if ($(e.target).prop("tagName") == 'INPUT')
  377. return;
  378. var inputs = $('input', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS);
  379. var row = inputs.eq(0).val();
  380. var column = inputs.eq(1).val();
  381. var fieldName = "$cells." + row + "." + column + ".value";
  382. var domPlayerData = self._getBlockPlayerData();
  383. var xSnippet = $(domPlayerData).find('XmlItem');
  384. $(xSnippet).attr('fieldName', fieldName);
  385. self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
  386. }, 500, false);
  387. $('.spinner', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).on('mouseup', self.m_dualNumericHandler);
  388. };
  389. /**
  390. Listen date format selected
  391. @method _listenDateFormatSelected
  392. **/
  393. BlockJsonItem.prototype._listenDateFormatSelected = function () {
  394. var self = this;
  395. self.m_dateFormatChangeHandler = function (e) {
  396. if (!self.m_selected)
  397. return;
  398. var $selected = $(e.target).find(':selected');
  399. var value = $selected.val();
  400. var domPlayerData = self._getBlockPlayerData();
  401. var xSnippet = $(domPlayerData).find('XmlItem');
  402. $(xSnippet).attr('dateFormat', value);
  403. self._setBlockPlayerData(domPlayerData);
  404. };
  405. $(Elements.JSON_ITEM_DATE_FORMAT, self.$el).on('change', self.m_dateFormatChangeHandler);
  406. };
  407. /**
  408. Listen to json field selection and update msdb
  409. @method _listenFieldSelected
  410. **/
  411. BlockJsonItem.prototype._listenFieldSelected = function () {
  412. var self = this;
  413. self.m_fieldChangeHandler = function (e) {
  414. if (!self.m_selected)
  415. return;
  416. var $selected = $(e.target).find(':selected');
  417. var fieldName = $selected.val();
  418. var fieldType = $selected.data('type');
  419. var domPlayerData = self._getBlockPlayerData();
  420. var xSnippet = $(domPlayerData).find('XmlItem');
  421. $(xSnippet).attr('fieldType', fieldType);
  422. $(xSnippet).attr('fieldName', fieldName);
  423. self._setBlockPlayerData(domPlayerData);
  424. };
  425. $(Elements.JSON_ITEM_TEXT_FIELDS, self.$el).on('change', self.m_fieldChangeHandler);
  426. };
  427. /**
  428. Listen to changes in font UI selection from Block property and take action on changes
  429. @method _listenFontSelectionChange
  430. **/
  431. BlockJsonItem.prototype._listenMouseEntersSceneCanvas = function () {
  432. var self = this;
  433. BB.comBroker.listenWithNamespace(BB.EVENTS.MOUSE_ENTERS_CANVAS, self, function (e) {
  434. if (!self.m_selected)
  435. return;
  436. $(Elements.LABEL_TEXT).blur();
  437. });
  438. };
  439. /**
  440. Listen to changes in font UI selection from Block property and take action on changes
  441. @method _listenFontSelectionChange
  442. **/
  443. BlockJsonItem.prototype._listenFontSelectionChange = function () {
  444. var self = this;
  445. BB.comBroker.listenWithNamespace(BB.EVENTS.FONT_SELECTION_CHANGED, self, function (e) {
  446. if (!self.m_selected || e.caller !== self.m_labelFontSelector) {
  447. return;
  448. }
  449. var config = e.edata;
  450. var domPlayerData = self._getBlockPlayerData();
  451. var xSnippet = $(domPlayerData).find('XmlItem');
  452. var xSnippetFont = $(xSnippet).find('Font');
  453. config.bold === true ? xSnippetFont.attr('fontWeight', 'bold') : xSnippetFont.attr('fontWeight', 'normal');
  454. config.italic === true ? xSnippetFont.attr('fontStyle', 'italic') : xSnippetFont.attr('fontStyle', 'normal');
  455. config.underline === true ? xSnippetFont.attr('textDecoration', 'underline') : xSnippetFont.attr('textDecoration', 'none');
  456. xSnippetFont.attr('fontColor', BB.lib.colorToDecimal(config.color));
  457. xSnippetFont.attr('fontSize', config.size);
  458. xSnippetFont.attr('fontFamily', config.font);
  459. xSnippetFont.attr('textAlign', config.alignment);
  460. self._setBlockPlayerData(domPlayerData);
  461. });
  462. };
  463. /**
  464. Listen Maintain Aspect ratio slider changed position
  465. @method _listenMaintainAspectChanged
  466. **/
  467. BlockJsonItem.prototype._listenMaintainAspectChanged = function () {
  468. var self = this;
  469. self.m_maintainAspectHandler = function (e) {
  470. if (!self.m_selected)
  471. return;
  472. var mode = $(e.target).prop('checked') == true ? 1 : 0;
  473. var domPlayerData = self._getBlockPlayerData();
  474. var xSnippet = $(domPlayerData).find('XmlItem');
  475. $(xSnippet).attr('maintainAspectRatio', mode);
  476. self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
  477. };
  478. $(Elements.JSON_ITEM_MAINTAIN_ASPECT_RATIO).on("change", self.m_maintainAspectHandler);
  479. };
  480. /**
  481. Listen json input path change
  482. @method _listenInputFieldPathChange
  483. @param {Number} i_playerData
  484. @return {Number} Unique clientId.
  485. **/
  486. BlockJsonItem.prototype._listenInputFieldPathChange = function () {
  487. var self = this;
  488. self.m_inputPathChangeHandler = _.debounce(function (e) {
  489. if (!self.m_selected) {
  490. return;
  491. }
  492. var newText = $(e.target).val();
  493. newText = BB.lib.cleanProbCharacters(newText, 1);
  494. var domPlayerData = self._getBlockPlayerData();
  495. var xSnippet = $(domPlayerData).find('XmlItem');
  496. var oldText = $(xSnippet).attr('fieldName');
  497. if (newText === oldText) {
  498. return;
  499. }
  500. $(xSnippet).attr('fieldName', newText);
  501. self._setBlockPlayerData(domPlayerData);
  502. }, 333, false);
  503. $(Elements.JSON_ITEM_FIELD).on('input blur mousemove', self.m_inputPathChangeHandler);
  504. };
  505. /**
  506. Load up property values in the common panel
  507. @method _populate
  508. @return none
  509. **/
  510. BlockJsonItem.prototype._populate = function () {
  511. var self = this;
  512. // JSON item (no mime)
  513. if (_.isUndefined(self.m_sceneMime)) {
  514. var domPlayerData = self._getBlockPlayerData();
  515. var xSnippet = $(domPlayerData).find('XmlItem');
  516. var fieldName = $(xSnippet).attr('fieldName');
  517. $(Elements.JSON_ITEM_FIELD_CONTAINER).show();
  518. $(Elements.JSON_ITEM_TEXT_FIELDS_CONTAINER).hide();
  519. $(Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).hide();
  520. $(Elements.JSON_ITEM_ICON_SETTINGS).hide();
  521. $(Elements.JSON_ITEM_DATE_SETTINGS).hide();
  522. $(Elements.JSON_ITEM_FIELD).val(fieldName);
  523. return;
  524. }
  525. // Json mime subclass
  526. self._populateMimeType();
  527. };
  528. /**
  529. Populate date format for common types of date styles on dropdown selection
  530. @method _populateDateFormat
  531. @param {string} i_selectedFormat
  532. **/
  533. BlockJsonItem.prototype._populateDateFormat = function (i_selectedFormat) {
  534. var self = this;
  535. var formats = [
  536. 'D/M/Y',
  537. 'DD/MM/YY',
  538. 'DD/MM/YYYY',
  539. 'DD/MMM/YY',
  540. 'MM/DD/YY',
  541. 'MM/DD/YYYY',
  542. 'MMM/DD/YYYY ',
  543. 'D/M/Y J:NN:SS',
  544. 'DD/MM/YY J:NN:SS',
  545. 'DD/MM/YYYY J:NN:SS',
  546. 'DD/MMM/YY J:NN:SS',
  547. 'MM/DD/YY J:NN:SS',
  548. 'MM/DD/YYYY J:NN:SS',
  549. 'MMM/DD/YYYY J:NN:SS',
  550. 'J:NN:SS',
  551. 'J:NN:SS A',
  552. 'J:NN:SS A',
  553. 'J:NN'
  554. ];
  555. var snippet = "<option selected data-type=\"\" value=\"select format\">select format</option>";
  556. for (var i = 0; i < formats.length; i++) {
  557. snippet += "<option value=\"" + formats[i] + "\">" + formats[i] + "</option>";
  558. }
  559. $(Elements.JSON_ITEM_DATE_FORMAT).empty().append(snippet);
  560. var elem = $(Elements.JSON_ITEM_DATE_FORMAT).find('option[value="' + i_selectedFormat + '"]');
  561. elem.prop('selected', 'selected');
  562. };
  563. /**
  564. The component is a subclass of JSON item (i.e.: it has a mimetype) so we need to populate it according
  565. to its mimetype config options
  566. @method _populate
  567. @return none
  568. **/
  569. BlockJsonItem.prototype._populateMimeType = function () {
  570. var self = this;
  571. var domPlayerData = self._getBlockPlayerData();
  572. var xSnippet = $(domPlayerData).find('XmlItem');
  573. var xSnippetFont = $(xSnippet).find('Font');
  574. var fieldType = $(xSnippet).attr('fieldType');
  575. var fieldName = $(xSnippet).attr('fieldName');
  576. var maintainAspectRatio = $(xSnippet).attr('maintainAspectRatio');
  577. var dateFormat = $(xSnippet).attr('dateFormat');
  578. $(Elements.JSON_ITEM_FIELD_CONTAINER).hide();
  579. $(Elements.JSON_ITEM_TEXT_FIELDS_CONTAINER).show();
  580. var snippet = "<option selected data-type=\"\" value=\"no field selected\">select field</option>";
  581. var fields = self.m_config[self.m_sceneMime].fields;
  582. _.each(fields, function (k) {
  583. snippet += "<option data-type=\"" + k.type + "\" value=\"" + k.name + "\">" + k.label + "</option>";
  584. });
  585. $(Elements.JSON_ITEM_TEXT_FIELDS).empty().append(snippet);
  586. var elem = $(Elements.JSON_ITEM_TEXT_FIELDS).find('option[value="' + fieldName + '"]');
  587. elem.prop('selected', 'selected');
  588. // populate according to filed type (text/resource)
  589. switch (fieldType) {
  590. case 'resource':
  591. {
  592. $(Elements.JSON_ITEM_FONT_SETTINGS).hide();
  593. $(Elements.JSON_ITEM_DATE_SETTINGS).hide();
  594. $(Elements.JSON_ITEM_ICON_SETTINGS).show();
  595. self._populateAspectRatio(maintainAspectRatio);
  596. break;
  597. }
  598. case 'date':
  599. {
  600. self._populateDateFormat(dateFormat);
  601. setTimeout(function () {
  602. $(Elements.JSON_ITEM_DATE_SETTINGS).show();
  603. }, 10);
  604. }
  605. case 'text':
  606. {
  607. $(Elements.JSON_ITEM_ICON_SETTINGS).hide();
  608. $(Elements.JSON_ITEM_DATE_SETTINGS).hide();
  609. $(Elements.JSON_ITEM_FONT_SETTINGS).show();
  610. self.m_labelFontSelector.setConfig({
  611. bold: xSnippetFont.attr('fontWeight') === 'bold' ? true : false,
  612. italic: xSnippetFont.attr('fontStyle') === 'italic' ? true : false,
  613. underline: xSnippetFont.attr('textDecoration') === 'underline' ? true : false,
  614. alignment: xSnippetFont.attr('textAlign'),
  615. font: xSnippetFont.attr('fontFamily'),
  616. color: BB.lib.colorToHex(BB.lib.decimalToHex(xSnippetFont.attr('fontColor'))),
  617. size: xSnippetFont.attr('fontSize')
  618. });
  619. break;
  620. }
  621. }
  622. // populate according to mimetype exception or default behavior
  623. switch (self.m_sceneMime) {
  624. case 'Json.spreadsheet':
  625. {
  626. $(Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).show();
  627. self._populateDualNumeric();
  628. break;
  629. }
  630. default:
  631. {
  632. $(Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).hide();
  633. }
  634. }
  635. };
  636. /**
  637. Populate aspect ratio switch button
  638. @method _populateAspectRatio
  639. @params {Boolean} i_aspectRatio
  640. **/
  641. BlockJsonItem.prototype._populateAspectRatio = function (i_aspectRatio) {
  642. var self = this;
  643. if (i_aspectRatio == '1') {
  644. $(Elements.JSON_ITEM_MAINTAIN_ASPECT_RATIO).prop('checked', true);
  645. }
  646. else {
  647. $(Elements.JSON_ITEM_MAINTAIN_ASPECT_RATIO).prop('checked', false);
  648. }
  649. };
  650. /**
  651. Populate the common block properties panel, called from base class if exists
  652. @method _loadBlockSpecificProps
  653. @return none
  654. **/
  655. BlockJsonItem.prototype._loadBlockSpecificProps = function () {
  656. var self = this;
  657. self._populate();
  658. this._viewSubPanel(Elements.BLOCK_JSON_ITEM_COMMON_PROPERTIES);
  659. };
  660. /**
  661. translate a json item path such as $[0].data.weather... to it's label
  662. @method _translateToLabel
  663. @param {Number} i_playerData
  664. @return {Number} Unique clientId.
  665. **/
  666. BlockJsonItem.prototype._translateToLabel = function (i_jsonPath) {
  667. var self = this;
  668. // no mime configured in scnene so return same label
  669. if (_.isUndefined(self.m_sceneMime))
  670. return i_jsonPath;
  671. switch (self.m_sceneMime) {
  672. case 'Json.spreadsheet':
  673. {
  674. // lookup up label in m_config for spreadsheet
  675. return self.m_config['Json.spreadsheet'].fields['1'].label;
  676. }
  677. default:
  678. {
  679. // look up label in m_config db for everything else
  680. var fields = self.m_config[self.m_sceneMime].fields;
  681. for (var item in fields) {
  682. if (fields[item].name == i_jsonPath)
  683. return fields[item].label;
  684. }
  685. }
  686. }
  687. return i_jsonPath;
  688. };
  689. /**
  690. Update the title of the block inside the assigned element.
  691. @method _updateTitle
  692. @return none
  693. **/
  694. BlockJsonItem.prototype._updateTitle = function () {
  695. var self = this;
  696. _super.prototype._updateTitle.call(this);
  697. if (_.isUndefined(self.m_sceneMime))
  698. return;
  699. $(Elements.SELECTED_CHANNEL_RESOURCE_NAME).text(self.m_config[self.m_sceneMime].title);
  700. };
  701. /**
  702. Update the title of the selected tab properties element
  703. @method m_blockAcronym
  704. **/
  705. BlockJsonItem.prototype._updateTitleTab = function () {
  706. var self = this;
  707. _super.prototype._updateTitleTab.call(this);
  708. if (_.isUndefined(self.m_sceneMime))
  709. return;
  710. $(Elements.BLOCK_SUBPROPERTIES_TITLE).text(self.m_config[self.m_sceneMime].tabTitle);
  711. };
  712. /**
  713. Some json item field names need to be muated into something else.
  714. For example, the default fieldName of text needs to be changed into '$cells.1.1.value' when
  715. used in a scene of mimeType
  716. @method _mutateCustomFieldName
  717. **/
  718. BlockJsonItem.prototype._mutateCustomFieldName = function () {
  719. var self = this;
  720. switch (self.m_sceneMime) {
  721. case 'Json.spreadsheet':
  722. {
  723. var domPlayerData = self._getBlockPlayerData();
  724. var xSnippet = $(domPlayerData).find('XmlItem');
  725. var fieldName = $(xSnippet).attr('fieldName');
  726. if (fieldName == 'text') {
  727. var value = self.m_config['Json.spreadsheet'].fields['1'].name;
  728. $(xSnippet).attr('fieldName', value);
  729. self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
  730. }
  731. break;
  732. }
  733. default:
  734. {
  735. }
  736. }
  737. };
  738. /**
  739. Convert the block into a fabric js compatible object
  740. @Override
  741. @method fabricateBlock
  742. @param {number} i_canvasScale
  743. @param {function} i_callback
  744. **/
  745. BlockJsonItem.prototype.fabricateBlock = function (i_canvasScale, i_callback) {
  746. var self = this; //any to fake it
  747. self._mutateCustomFieldName();
  748. var domPlayerData = self._getBlockPlayerData();
  749. var layout = $(domPlayerData).find('Layout');
  750. var xSnippet = $(domPlayerData).find('XmlItem');
  751. var fieldName = $(xSnippet).attr('fieldName');
  752. var text = self._translateToLabel(fieldName);
  753. var font = $(xSnippet).find('Font');
  754. var link = '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  755. var url = ('https:' === document.location.protocol ? 'https' : 'http') + link;
  756. //$.getScript(src, function (data) {
  757. // console.log(data);
  758. //});
  759. var t = new fabric.IText(text, {
  760. fontSize: $(font).attr('fontSize'),
  761. fontFamily: $(font).attr('fontFamily'),
  762. fill: '#' + BB.lib.decimalToHex($(font).attr('fontColor')),
  763. textDecoration: $(font).attr('textDecoration'),
  764. fontWeight: $(font).attr('fontWeight'),
  765. fontStyle: $(font).attr('fontStyle'),
  766. textAlign: $(font).attr('textAlign'),
  767. top: 5,
  768. left: 5
  769. });
  770. // calculate block so it can always contain the text it holds and doesn't bleed
  771. //self.m_minSize.w = t.width < 50 ? 50 : t.width * 1.2;
  772. //self.m_minSize.h = t.height < 50 ? 50 : t.height * 1.2;
  773. //var w = parseInt(layout.attr('width')) < self.m_minSize.w ? self.m_minSize.w : parseInt(layout.attr('width'));
  774. //var h = parseInt(layout.attr('height')) < self.m_minSize.h ? self.m_minSize.h : parseInt(layout.attr('height'));
  775. var w = parseInt(layout.attr('width'));
  776. var textWidth = t.width * 1.2;
  777. if (textWidth > w) {
  778. t.setText('...');
  779. }
  780. var h = parseInt(layout.attr('height'));
  781. var textHeight = t.height * 1.2;
  782. if (textHeight > h) {
  783. t.setText('...');
  784. }
  785. var rec = self._fabricRect(w, h, domPlayerData);
  786. var o = self._fabricateOptions(parseInt(layout.attr('y')), parseInt(layout.attr('x')), w, h, parseInt(layout.attr('rotation')));
  787. rec.originX = 'center';
  788. rec.originY = 'center';
  789. t.top = 0 - (rec.height / 2);
  790. t.left = 0 - (rec.width / 2);
  791. _.extend(self, o);
  792. self.add(rec);
  793. self.add(t);
  794. self._fabricAlpha(domPlayerData);
  795. self._fabricLock();
  796. self['canvasScale'] = i_canvasScale;
  797. //$.ajax({
  798. // url: url,
  799. // async: false,
  800. // dataType: 'script',
  801. // complete: function (e) {
  802. // setTimeout(i_callback, 1);
  803. // }
  804. //});
  805. setTimeout(i_callback, 1);
  806. var direction = $(font).attr('textAlign');
  807. switch (direction) {
  808. case 'left':
  809. {
  810. break;
  811. }
  812. case 'center':
  813. {
  814. t.set({
  815. textAlign: direction,
  816. originX: direction,
  817. left: 0
  818. });
  819. break;
  820. }
  821. case 'right':
  822. {
  823. t.set({
  824. textAlign: direction,
  825. originX: direction,
  826. left: rec.width / 2
  827. });
  828. break;
  829. }
  830. }
  831. };
  832. /**
  833. Delete this block
  834. @method deleteBlock
  835. @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb
  836. **/
  837. BlockJsonItem.prototype.deleteBlock = function (i_memoryOnly) {
  838. var self = this;
  839. $(Elements.JSON_ITEM_FIELD).off('input blur mousemove', self.m_inputPathChangeHandler);
  840. $(Elements.JSON_ITEM_MAINTAIN_ASPECT_RATIO).off("change", self.m_maintainAspectHandler);
  841. $(Elements.JSON_ITEM_TEXT_FIELDS, self.$el).off('change', self.m_fieldChangeHandler);
  842. $(Elements.JSON_ITEM_DATE_FORMAT, self.$el).off('change', self.m_dateFormatChangeHandler);
  843. $('.spinner', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).off('mouseup', self.m_dualNumericHandler);
  844. BB.comBroker.stopListenWithNamespace(BB.EVENTS.FONT_SELECTION_CHANGED, self);
  845. BB.comBroker.stopListenWithNamespace(BB.EVENTS.MOUSE_ENTERS_CANVAS, self);
  846. self._deleteBlock(i_memoryOnly);
  847. };
  848. return BlockJsonItem;
  849. })(TSLiteModules.Block);
  850. return BlockJsonItem;
  851. });
  852. //# sourceMappingURL=BlockJsonItem.js.map