digitalsignage.com - open source docs digitalsignage.com - open source docs

  • API Docs for Version: 1.5.118

    • APIs

    Show:

    _controllers\_blocks\BlockLabel.js File

    1. /**
    2.  * BlockLabel block resides inside a scene or timeline
    3.  * @class BlockLabel
    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 BlockLabel = Block.extend({
    13.  
    14.         /**
    15.          Constructor
    16.          @method initialize
    17.          **/
    18.         constructor: function (options) {
    19.             var self = this;
    20.             self.m_blockType = 3241;
    21.             _.extend(options, {blockType: self.m_blockType})
    22.             Block.prototype.constructor.call(this, options);
    23.             self._initSubPanel(Elements.BLOCK_LABEL_COMMON_PROPERTIES);
    24.             self.m_labelFontSelector = self.m_blockProperty.getLabelFontSelector();
    25.             self._listenInputChange();
    26.             self._listenFontSelectionChange();
    27.             self._listenMouseEntersSceneCanvas();
    28.         },
    29.  
    30.         /**
    31.          When user changes a URL link for the feed, update the msdb
    32.          @method _listenInputChange
    33.          @return none
    34.          **/
    35.         _listenInputChange: function () {
    36.             var self = this;
    37.             self.m_inputChangeHandler = function () {
    38.                 if (!self.m_selected)
    39.                     return;
    40.                 var text = $(Elements.LABEL_TEXT).val();
    41.                 text = BB.lib.cleanProbCharacters(text, 1);
    42.                 var domPlayerData = self._getBlockPlayerData();
    43.                 var xSnippet = $(domPlayerData).find('Label');
    44.                 var xSnippetText = $(xSnippet).find('Text');
    45.                 if (text == xSnippetText.text())
    46.                     return;
    47.                 $(xSnippetText).text(text);
    48.                 self._setBlockPlayerData(domPlayerData);
    49.             };
    50.             $(Elements.LABEL_TEXT).on("mousemove", self.m_inputChangeHandler);
    51.  
    52.             /*self._labelEnterKey = _.debounce(function (e) {
    53.                 if (!self.m_selected)
    54.                     return;
    55.                 //if (e.which == 13)
    56.                 self.m_inputChangeHandler(e);
    57.                 e.preventDefault();
    58.             }, 750);
    59.             $(Elements.LABEL_TEXT).on("keydown", self._labelEnterKey);*/
    60.         },
    61.  
    62.         /**
    63.          Load up property values in the common panel
    64.          @method _populate
    65.          @return none
    66.          **/
    67.         _populate: function () {
    68.             var self = this;
    69.             var domPlayerData = self._getBlockPlayerData();
    70.             var xSnippet = $(domPlayerData).find('Label');
    71.             var xSnippetText = $(xSnippet).find('Text');
    72.             var xSnippetFont = $(xSnippet).find('Font');
    73.             $(Elements.LABEL_TEXT).val(xSnippetText.text());
    74.  
    75.             self.m_labelFontSelector.setConfig({
    76.                 bold: xSnippetFont.attr('fontWeight') == 'bold' ? true : false,
    77.                 italic: xSnippetFont.attr('fontStyle') == 'italic' ? true : false,
    78.                 underline: xSnippetFont.attr('textDecoration') == 'underline' ? true : false,
    79.                 alignment: xSnippetFont.attr('textAlign'),
    80.                 font: xSnippetFont.attr('fontFamily'),
    81.                 color: BB.lib.colorToHex(BB.lib.decimalToHex(xSnippetFont.attr('fontColor'))),
    82.                 size: xSnippetFont.attr('fontSize')
    83.             });
    84.         },
    85.  
    86.         /**
    87.          Listen to changes in font UI selection from Block property and take action on changes
    88.          @method _listenFontSelectionChange
    89.          **/
    90.         _listenMouseEntersSceneCanvas: function () {
    91.             var self = this;
    92.             BB.comBroker.listenWithNamespace(BB.EVENTS.MOUSE_ENTERS_CANVAS, self, function (e) {
    93.                 if (!self.m_selected)
    94.                     return;
    95.                 $(Elements.LABEL_TEXT).blur();
    96.             });
    97.         },
    98.  
    99.         /**
    100.          Listen to changes in font UI selection from Block property and take action on changes
    101.          @method _listenFontSelectionChange
    102.          **/
    103.         _listenFontSelectionChange: function () {
    104.             var self = this;
    105.             BB.comBroker.listenWithNamespace(BB.EVENTS.FONT_SELECTION_CHANGED, self, function (e) {
    106.                 if (!self.m_selected || e.caller !== self.m_labelFontSelector)
    107.                     return;
    108.                 var config = e.edata;
    109.                 var domPlayerData = self._getBlockPlayerData();
    110.                 var xSnippet = $(domPlayerData).find('Label');
    111.                 var xSnippetFont = $(xSnippet).find('Font');
    112.  
    113.                 config.bold == true ? xSnippetFont.attr('fontWeight', 'bold') : xSnippetFont.attr('fontWeight', 'normal');
    114.                 config.italic == true ? xSnippetFont.attr('fontStyle', 'italic') : xSnippetFont.attr('fontStyle', 'normal');
    115.                 config.underline == true ? xSnippetFont.attr('textDecoration', 'underline') : xSnippetFont.attr('textDecoration', 'none');
    116.                 xSnippetFont.attr('fontColor', BB.lib.colorToDecimal(config.color));
    117.                 xSnippetFont.attr('fontSize', config.size);
    118.                 xSnippetFont.attr('fontFamily', config.font);
    119.                 xSnippetFont.attr('textAlign', config.alignment);
    120.                 self._setBlockPlayerData(domPlayerData);
    121.             });
    122.         },
    123.  
    124.         /**
    125.          Populate the common block properties panel, called from base class if exists
    126.          @method _loadBlockSpecificProps
    127.          @return none
    128.          **/
    129.         _loadBlockSpecificProps: function () {
    130.             var self = this;
    131.             self._populate();
    132.             this._viewSubPanel(Elements.BLOCK_LABEL_COMMON_PROPERTIES);
    133.         },
    134.  
    135.         /**
    136.          Convert the block into a fabric js compatible object
    137.          @Override
    138.          @method fabricateBlock
    139.          @param {number} i_canvasScale
    140.          @param {function} i_callback
    141.          **/
    142.         fabricateBlock: function (i_canvasScale, i_callback) {
    143.             var self = this;
    144.  
    145.             var domPlayerData = self._getBlockPlayerData();
    146.             var layout = $(domPlayerData).find('Layout');
    147.             var label = $(domPlayerData).find('Label');
    148.             var text = $(label).find('Text').text();
    149.             var font = $(label).find('Font');
    150.  
    151.             var url = ('https:' === document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    152.  
    153.             //$.getScript(src, function (data) {
    154.             //    console.log(data);
    155.             //});
    156.  
    157.             var t = new fabric.IText(text, {
    158.                 fontSize: $(font).attr('fontSize'),
    159.                 //fontFamily: 'Graduate',
    160.                 //fontFamily: 'Jolly Lodger',
    161.                 //fontFamily: 'Arial',
    162.                 fontFamily: $(font).attr('fontFamily'),
    163.                 fill: '#' + BB.lib.decimalToHex($(font).attr('fontColor')),
    164.                 textDecoration: $(font).attr('textDecoration'),
    165.                 fontWeight: $(font).attr('fontWeight'),
    166.                 fontStyle: $(font).attr('fontStyle'),
    167.                 textAlign: $(font).attr('textAlign'),
    168.                 top: 5,
    169.                 left: 5
    170.             });
    171.  
    172.             // calculate block so it can always contain the text it holds and doesn't bleed
    173.             self.m_minSize.w = t.width < 50 ? 50 : t.width * 1.2;
    174.             self.m_minSize.h = t.height < 50 ? 50 : t.height * 1.2;
    175.             var w = parseInt(layout.attr('width')) < self.m_minSize.w ? self.m_minSize.w : parseInt(layout.attr('width'));
    176.             var h = parseInt(layout.attr('height')) < self.m_minSize.h ? self.m_minSize.h : parseInt(layout.attr('height'));
    177.  
    178.             var rec = self._fabricRect(w, h, domPlayerData);
    179.             var o = self._fabricateOptions(parseInt(layout.attr('y')), parseInt(layout.attr('x')), w, h, parseInt(layout.attr('rotation')));
    180.             //var group = new fabric.Group([ rec, t ], o);
    181.             //_.extend(self, group);
    182.  
    183.             rec.originX = 'center';
    184.             rec.originY = 'center';
    185.             t.top = 0 - (rec.height / 2);
    186.             t.left = 0 - (rec.width / 2);
    187.             _.extend(self, o);
    188.             self.add(rec);
    189.             self.add(t);
    190.             self._fabricAlpha(domPlayerData);
    191.             self._fabricLock();
    192.             self['canvasScale'] = i_canvasScale;
    193.  
    194.             //$.ajax({
    195.             //    url: url,
    196.             //    async: false,
    197.             //    dataType: "script",
    198.             //    complete: function(e){
    199.             //        setTimeout(i_callback,1)
    200.             //    }
    201.             //});
    202.             setTimeout(i_callback,1);
    203.  
    204.             var direction = $(font).attr('textAlign');
    205.             switch (direction) {
    206.                 case 'left': {
    207.                     break;
    208.                 }
    209.                 case 'center': {
    210.                     t.set({
    211.                         textAlign: direction,
    212.                         originX: direction,
    213.                         left: 0
    214.                     });
    215.                     break;
    216.                 }
    217.                 case 'right': {
    218.                     t.set({
    219.                         textAlign: direction,
    220.                         originX: direction,
    221.                         left: rec.width / 2
    222.                     });
    223.                     break;
    224.                 }
    225.             }
    226.  
    227.             // todo: add shadow
    228.             //http://jsfiddle.net/Kienz/fgWNL/
    229.             //http://jsfiddle.net/fabricjs/7gvJG/
    230.             //http://jsfiddle.net/5KKQ2/
    231.             //t.set('shadow', {
    232.             //    color: 'black',
    233.             //    blur: 1,
    234.             //    offsetX:3,
    235.             //    offsetY: 1
    236.             //});({ color: 'rgba(12,12,12,1)' });
    237.             //rec.set('shadow', {
    238.             //    color: 'black',
    239.             //    blur: 1,
    240.             //    offsetX:3,
    241.             //    offsetY: 1
    242.             //});
    243.         },
    244.  
    245.         /**
    246.          Delete this block
    247.          @method deleteBlock
    248.          @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb
    249.          **/
    250.         deleteBlock: function (i_memoryOnly) {
    251.             var self = this;
    252.             $(Elements.LABEL_TEXT).off("mousemove", self.m_inputChangeHandler);
    253.             //$(Elements.LABEL_TEXT).off("keydown", self.m_inputChangeHandler);
    254.             $(Elements.LABEL_TEXT).off("blur", self.m_inputChangeHandler);
    255.             BB.comBroker.stopListenWithNamespace(BB.EVENTS.FONT_SELECTION_CHANGED, self);
    256.             BB.comBroker.stopListenWithNamespace(BB.EVENTS.MOUSE_ENTERS_CANVAS, self);
    257.             self._deleteBlock(i_memoryOnly);
    258.         }
    259.     });
    260.  
    261.     return BlockLabel;
    262. });
    263.