APIs

Show:
  1. /**
  2. * Image block resides inside a scene or timeline
  3. * @class BlockSVG
  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. var BlockSVG = Block.extend({
  13.  
  14. /**
  15. Constructor
  16. @method initialize
  17. **/
  18. constructor: function (options) {
  19. var self = this;
  20. self.m_blockType = 3140;
  21. _.extend(options, {blockType: self.m_blockType})
  22. Block.prototype.constructor.call(this, options);
  23. self._initSubPanel(Elements.BLOCK_SVG_COMMON_PROPERTIES);
  24. self._listenInputChange();
  25. self._initResourcesData();
  26. },
  27.  
  28. /**
  29. Set the instance resource data from msdb which includes resource_id (handle of a resource)
  30. as well as the description of the resource and icon.
  31. @method _initResourcesData
  32. **/
  33. _initResourcesData: function () {
  34. var self = this;
  35. var domPlayerData = self._getBlockPlayerData();
  36. var xSnippet = $(domPlayerData).find('Resource');
  37. self.m_resourceID = $(xSnippet).attr('hResource');
  38. self.m_nativeID = pepper.getResourceNativeID(self.m_resourceID);
  39. if (_.isNull(self.m_nativeID)){
  40. self._selfDestruct();
  41. return;
  42. }
  43. self.m_blockName = pepper.getResourceRecord(self.m_resourceID).resource_name;
  44. self.m_blockDescription = pepper.getResourceName(self.m_resourceID);
  45. self.m_fileFormat = pepper.getResourceType(self.m_resourceID);
  46. self.m_blockFontAwesome = BB.PepperHelper.getFontAwesome(self.m_fileFormat);
  47. },
  48.  
  49. /**
  50. Populate the common block properties panel, called from base class if exists
  51. @method _loadBlockSpecificProps
  52. @return none
  53. **/
  54. _loadBlockSpecificProps: function () {
  55. var self = this;
  56. self._populate();
  57. this._viewSubPanel(Elements.BLOCK_SVG_COMMON_PROPERTIES);
  58. },
  59.  
  60. /**
  61. Update common property title element
  62. @method _updateTitle override
  63. @return none
  64. **/
  65. _updateTitle: function () {
  66. var self = this;
  67. $(Elements.SELECTED_CHANNEL_RESOURCE_NAME).text(self.m_blockDescription);
  68. },
  69.  
  70. /**
  71. When user changes a URL link for the feed, update the msdb
  72. @method _listenInputChange
  73. @return none
  74. **/
  75. _listenInputChange: function () {
  76. var self = this;
  77. self.m_inputChangeHandler = function () {
  78. if (!self.m_selected)
  79. return;
  80. var aspectRatio = $(Elements.IMAGE_ASPECT_RATIO + ' option:selected').val() == "on" ? 1 : 0;
  81. var domPlayerData = self._getBlockPlayerData();
  82. var xSnippet = $(domPlayerData).find('AspectRatio');
  83. $(xSnippet).attr('maintain', aspectRatio);
  84. self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
  85. };
  86. $(Elements.IMAGE_ASPECT_RATIO).on('change', self.m_inputChangeHandler);
  87. },
  88.  
  89. /**
  90. Load up property values in the common panel
  91. @method _populate
  92. @return none
  93. **/
  94. _populate: function () {
  95. var self = this;
  96. var domPlayerData = self._getBlockPlayerData();
  97. var xSnippet = $(domPlayerData).find('AspectRatio');
  98. var aspectRatio = xSnippet.attr('maintain') == '1' ? 'on' : 'off';
  99. $(Elements.IMAGE_ASPECT_RATIO + ' option[value="' + aspectRatio + '"]').prop("selected", "selected");
  100. },
  101.  
  102. // /var/www/sites/dynasite/htdocs/_msportal/_js/_node/public/assets/14.svg
  103. /**
  104. Convert the block into a fabric js compatible object, called externally on creation of block
  105. @Override
  106. @method fabricateBlock
  107. **/
  108. fabricateBlock: function (i_canvasScale, i_callback) {
  109. var self = this;
  110.  
  111. var domPlayerData = self._getBlockPlayerData();
  112. var layout = $(domPlayerData).find('Layout');
  113.  
  114. var w = parseInt(layout.attr('width'));
  115. var h = parseInt(layout.attr('height'));
  116. var rec = self._fabricRect(w, h, domPlayerData);
  117.  
  118. var svgPath = window.g_protocol + pepper.getUserData().domain + '/Resources/business' + pepper.getUserData().businessID + '/resources/' + self.m_nativeID + '.' + self.m_fileFormat;
  119. var urlPath = $.base64.encode(svgPath);
  120. var srvPath = 'https://secure.digitalsignage.com/proxyRequest/' + urlPath;
  121.  
  122. //svgPath = 'https://secure.digitalsignage.com/_public/assets/15.svg';
  123. //svgPath = 'https://ida.signage.me/Test/14.svg';
  124. //svgPath = 'https://ida.signage.me/code/14.svg';
  125. //svgPath = "https://s3-us-west-2.amazonaws.com/oregon-signage-resources/business372844/resources/14.svg";
  126. //svgPath = 'https://ida2.signage.me/14.svg';
  127.  
  128. $.get(srvPath, function(svg){
  129. var hh,ww,svgHeight,svgWidth,re;
  130.  
  131. // set new height in SVG per current selection box height
  132. hh = layout.attr('height');
  133.  
  134. // catch load errors
  135. svgHeight = svg.match(/(height=")([^\"]*)/)
  136. if (_.isNull(svgHeight)){
  137. i_callback();
  138. return;
  139. }
  140. svgHeight = svgHeight[2];
  141. re = new RegExp('height="' + svgHeight + '"', "ig");
  142. svg = svg.replace(re, 'height="' + hh + '"');
  143.  
  144. // set new width in SVG per current selection box width
  145. ww = layout.attr('width');
  146. svgWidth = svg.match(/(width=")([^\"]*)/)[2];
  147. re = new RegExp('width="' + svgWidth + '"', "ig");
  148. svg = svg.replace(re, 'width="' + ww + '"');
  149.  
  150. fabric.loadSVGFromString(svg, function (objects, options) {
  151. objects[0].heightAttr = hh;
  152. objects[0].widthAttr = ww;
  153. objects[0].height = hh;
  154. objects[0].width = ww;
  155.  
  156. var groupSvg = fabric.util.groupSVGElements(objects, options);
  157.  
  158. rec.originX = 'center';
  159. rec.originY = 'center';
  160. groupSvg.originX = 'center';
  161. groupSvg.originY = 'center';
  162. var o = {
  163. left: parseInt(layout.attr('x')),
  164. top: parseInt(layout.attr('y')),
  165. width: parseInt(layout.attr('width')),
  166. height: parseInt(layout.attr('height')),
  167. angle: parseInt(layout.attr('rotation')),
  168. hasRotatingPoint: false,
  169. stroke: 'transparent',
  170. cornerColor: 'black',
  171. cornerSize: 5,
  172. lockRotation: true,
  173. transparentCorners: false
  174. };
  175. _.extend(self, o);
  176. self.add(rec);
  177. self.add(groupSvg);
  178. self._fabricAlpha(domPlayerData);
  179. self._fabricLock();
  180. self['canvasScale'] = i_canvasScale;
  181. i_callback();
  182. });
  183.  
  184. }, 'text');
  185.  
  186.  
  187.  
  188. },
  189.  
  190.  
  191. /**
  192. Convert the block into a fabric js compatible object
  193. @Override
  194. @method fabricateBlock
  195.  
  196. fabricateBlock: function (i_canvasScale, i_callback) {
  197. var self = this;
  198.  
  199. var domPlayerData = self._getBlockPlayerData();
  200. var layout = $(domPlayerData).find('Layout');
  201. var businessID = pepper.getUserData().businessID;
  202. var elemID = _.uniqueId('imgElemrand')
  203. var imgPath;
  204.  
  205. if (self.m_fileFormat == 'swf' || self.m_fileFormat == 'ssvg') {
  206. imgPath = './_assets/flash.png';
  207. } else {
  208. imgPath = window.g_protocol + pepper.getUserData().domain + '/Resources/business' + pepper.getUserData().businessID + '/resources/' + self.m_nativeID + '.' + self.m_fileFormat;
  209. }
  210.  
  211. $('<img src="' + imgPath + '" style="display: none" >').load(function () {
  212. $(this).width(1000).height(800).appendTo('body');
  213. var options = self._fabricateOptions(parseInt(layout.attr('y')), parseInt(layout.attr('x')), parseInt(layout.attr('width')), parseInt(layout.attr('height')), parseInt(layout.attr('rotation')));
  214. var img = new fabric.Image(this, options);
  215. _.extend(self, img);
  216. self._fabricAlpha(domPlayerData);
  217. self._fabricLock();
  218. self['canvasScale'] = i_canvasScale;
  219. i_callback();
  220. })
  221. },
  222. **/
  223. /**
  224. Get the resource id of the embedded resource
  225. @method getResourceID
  226. @return {Number} resource_id;
  227. **/
  228. getResourceID: function () {
  229. var self = this;
  230. return self.m_resourceID;
  231. },
  232.  
  233. /**
  234. Delete this block
  235. @method deleteBlock
  236. @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb
  237. **/
  238. deleteBlock: function (i_memoryOnly) {
  239. var self = this;
  240. $(Elements.IMAGE_ASPECT_RATIO).off('change', self.m_inputChangeHandler);
  241. self._deleteBlock(i_memoryOnly);
  242. }
  243. });
  244.  
  245. return BlockSVG;
  246. });