- /**
- * Image block resides inside a scene or timeline
- * @class BlockSVG
- * @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) {
-
- var BlockSVG = Block.extend({
-
- /**
- Constructor
- @method initialize
- **/
- constructor: function (options) {
- var self = this;
- self.m_blockType = 3140;
- _.extend(options, {blockType: self.m_blockType})
- Block.prototype.constructor.call(this, options);
- self._initSubPanel(Elements.BLOCK_SVG_COMMON_PROPERTIES);
- self._listenInputChange();
- self._initResourcesData();
- },
-
- /**
- Set the instance resource data from msdb which includes resource_id (handle of a resource)
- as well as the description of the resource and icon.
- @method _initResourcesData
- **/
- _initResourcesData: function () {
- var self = this;
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('Resource');
- self.m_resourceID = $(xSnippet).attr('hResource');
- self.m_nativeID = pepper.getResourceNativeID(self.m_resourceID);
- if (_.isNull(self.m_nativeID)){
- self._selfDestruct();
- return;
- }
- self.m_blockName = pepper.getResourceRecord(self.m_resourceID).resource_name;
- self.m_blockDescription = pepper.getResourceName(self.m_resourceID);
- self.m_fileFormat = pepper.getResourceType(self.m_resourceID);
- self.m_blockFontAwesome = BB.PepperHelper.getFontAwesome(self.m_fileFormat);
- },
-
- /**
- 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_SVG_COMMON_PROPERTIES);
- },
-
- /**
- Update common property title element
- @method _updateTitle override
- @return none
- **/
- _updateTitle: function () {
- var self = this;
- $(Elements.SELECTED_CHANNEL_RESOURCE_NAME).text(self.m_blockDescription);
- },
-
- /**
- When user changes a URL link for the feed, update the msdb
- @method _listenInputChange
- @return none
- **/
- _listenInputChange: function () {
- var self = this;
- self.m_inputChangeHandler = function () {
- if (!self.m_selected)
- return;
- var aspectRatio = $(Elements.IMAGE_ASPECT_RATIO + ' option:selected').val() == "on" ? 1 : 0;
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('AspectRatio');
- $(xSnippet).attr('maintain', aspectRatio);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- };
- $(Elements.IMAGE_ASPECT_RATIO).on('change', self.m_inputChangeHandler);
- },
-
- /**
- Load up property values in the common panel
- @method _populate
- @return none
- **/
- _populate: function () {
- var self = this;
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('AspectRatio');
- var aspectRatio = xSnippet.attr('maintain') == '1' ? 'on' : 'off';
- $(Elements.IMAGE_ASPECT_RATIO + ' option[value="' + aspectRatio + '"]').prop("selected", "selected");
- },
-
- // /var/www/sites/dynasite/htdocs/_msportal/_js/_node/public/assets/14.svg
- /**
- Convert the block into a fabric js compatible object, called externally on creation of block
- @Override
- @method fabricateBlock
- **/
- fabricateBlock: function (i_canvasScale, i_callback) {
- var self = this;
-
- var domPlayerData = self._getBlockPlayerData();
- var layout = $(domPlayerData).find('Layout');
-
- var w = parseInt(layout.attr('width'));
- var h = parseInt(layout.attr('height'));
- var rec = self._fabricRect(w, h, domPlayerData);
-
- var svgPath = window.g_protocol + pepper.getUserData().domain + '/Resources/business' + pepper.getUserData().businessID + '/resources/' + self.m_nativeID + '.' + self.m_fileFormat;
- var urlPath = $.base64.encode(svgPath);
- var srvPath = 'https://secure.digitalsignage.com/proxyRequest/' + urlPath;
-
- //svgPath = 'https://secure.digitalsignage.com/_public/assets/15.svg';
- //svgPath = 'https://ida.signage.me/Test/14.svg';
- //svgPath = 'https://ida.signage.me/code/14.svg';
- //svgPath = "https://s3-us-west-2.amazonaws.com/oregon-signage-resources/business372844/resources/14.svg";
- //svgPath = 'https://ida2.signage.me/14.svg';
-
- $.get(srvPath, function(svg){
- var hh,ww,svgHeight,svgWidth,re;
-
- // set new height in SVG per current selection box height
- hh = layout.attr('height');
-
- // catch load errors
- svgHeight = svg.match(/(height=")([^\"]*)/)
- if (_.isNull(svgHeight)){
- i_callback();
- return;
- }
- svgHeight = svgHeight[2];
- re = new RegExp('height="' + svgHeight + '"', "ig");
- svg = svg.replace(re, 'height="' + hh + '"');
-
- // set new width in SVG per current selection box width
- ww = layout.attr('width');
- svgWidth = svg.match(/(width=")([^\"]*)/)[2];
- re = new RegExp('width="' + svgWidth + '"', "ig");
- svg = svg.replace(re, 'width="' + ww + '"');
-
- fabric.loadSVGFromString(svg, function (objects, options) {
- objects[0].heightAttr = hh;
- objects[0].widthAttr = ww;
- objects[0].height = hh;
- objects[0].width = ww;
-
- var groupSvg = fabric.util.groupSVGElements(objects, options);
-
- rec.originX = 'center';
- rec.originY = 'center';
- groupSvg.originX = 'center';
- groupSvg.originY = 'center';
- var o = {
- left: parseInt(layout.attr('x')),
- top: parseInt(layout.attr('y')),
- width: parseInt(layout.attr('width')),
- height: parseInt(layout.attr('height')),
- angle: parseInt(layout.attr('rotation')),
- hasRotatingPoint: false,
- stroke: 'transparent',
- cornerColor: 'black',
- cornerSize: 5,
- lockRotation: true,
- transparentCorners: false
- };
- _.extend(self, o);
- self.add(rec);
- self.add(groupSvg);
- self._fabricAlpha(domPlayerData);
- self._fabricLock();
- self['canvasScale'] = i_canvasScale;
- i_callback();
- });
-
- }, 'text');
-
-
-
- },
-
-
- /**
- Convert the block into a fabric js compatible object
- @Override
- @method fabricateBlock
-
- fabricateBlock: function (i_canvasScale, i_callback) {
- var self = this;
-
- var domPlayerData = self._getBlockPlayerData();
- var layout = $(domPlayerData).find('Layout');
- var businessID = pepper.getUserData().businessID;
- var elemID = _.uniqueId('imgElemrand')
- var imgPath;
-
- if (self.m_fileFormat == 'swf' || self.m_fileFormat == 'ssvg') {
- imgPath = './_assets/flash.png';
- } else {
- imgPath = window.g_protocol + pepper.getUserData().domain + '/Resources/business' + pepper.getUserData().businessID + '/resources/' + self.m_nativeID + '.' + self.m_fileFormat;
- }
-
- $('<img src="' + imgPath + '" style="display: none" >').load(function () {
- $(this).width(1000).height(800).appendTo('body');
- var options = self._fabricateOptions(parseInt(layout.attr('y')), parseInt(layout.attr('x')), parseInt(layout.attr('width')), parseInt(layout.attr('height')), parseInt(layout.attr('rotation')));
- var img = new fabric.Image(this, options);
- _.extend(self, img);
- self._fabricAlpha(domPlayerData);
- self._fabricLock();
- self['canvasScale'] = i_canvasScale;
- i_callback();
- })
- },
- **/
- /**
- Get the resource id of the embedded resource
- @method getResourceID
- @return {Number} resource_id;
- **/
- getResourceID: function () {
- var self = this;
- return self.m_resourceID;
- },
-
- /**
- 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;
- $(Elements.IMAGE_ASPECT_RATIO).off('change', self.m_inputChangeHandler);
- self._deleteBlock(i_memoryOnly);
- }
- });
-
- return BlockSVG;
- });
-