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

  • API Docs for Version: 1.5.118

    • APIs

    Show:

    _views\ResourcesListView.js File

    1. ///<reference path="../typings/lite/app_references.d.ts" />
    2. ///<reference path="./_components/BSListView.ts" />
    3. var __extends = (this && this.__extends) || function (d, b) {
    4.     for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    5.     function __() { this.constructor = d; }
    6.     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    7. };
    8. //GULP_ABSTRACT_END
    9. define(['jquery', 'bootstrapfileinput', 'video', 'platform'], function ($, bootstrapfileinput, videojs, platform) {
    10.     /**
    11.      List all resources and allow for user to preview, manage and upload new resources
    12.      @class ResourcesListView
    13.      @constructor
    14.      @return {Object} instantiated ResourcesListView
    15.      **/
    16.     var ResourcesListView = (function (_super) {
    17.         __extends(ResourcesListView, _super);
    18.         /**
    19.          Class constructor
    20.          @method constructor
    21.          @param {Object} options
    22.          **/
    23.         function ResourcesListView(options) {
    24.             this.m_options = options;
    25.             _super.call(this);
    26.             // let bsListView:BSListView.IBSList = new BSListView();
    27.             //bsListView.isAcceptable('111');
    28.             //var comBroker:ComBroker;
    29.             //comBroker.setService('aaa',self);
    30.             //var aa: typeof BSListView = require('BSListView')
    31.             //var bar: typeof BSListView = new aa('111');
    32.             //bar.isAcceptable('ss');
    33.         }
    34.         /**
    35.          Resource list init
    36.          @method initialize
    37.          **/
    38.         ResourcesListView.prototype.initialize = function () {
    39.             var self = this;
    40.             this.id = self.m_options.el;
    41.             this.$el = $(this.id);
    42.             this.el = this.$el.get(0);
    43.             self.m_property = BB.comBroker.getService(BB.SERVICES['PROPERTIES_VIEW']);
    44.             self.m_property.initPanel(Elements.RESOURCE_LIST_PROPERTIES);
    45.             self.m_videoPlayer = undefined;
    46.             self._listenInputChange();
    47.             self._listenGridList();
    48.             self._listenFilterList();
    49.             self._initVideo();
    50.             $('input[type=file]').bootstrapFileInput();
    51.             self._listenRemoveResource();
    52.             $(Elements.FILE_SELECTION).change(function (e) {
    53.                 self._onFileSelected(e);
    54.             });
    55.             self.renderView();
    56.         };
    57.         /**
    58.          Listen to grid or list format selection
    59.          @method _listenGridList
    60.          **/
    61.         ResourcesListView.prototype._listenGridList = function () {
    62.             var self = this;
    63.             $('#list').click(function (event) {
    64.                 var query = $(self.id + ' ' + Elements.CLASS_RESOURCES_LIST_ITEMS);
    65.                 event.preventDefault();
    66.                 $(query).addClass('col-xs-12');
    67.                 $(query).removeClass('col-xs-3');
    68.             });
    69.             $('#grid').click(function (event) {
    70.                 var query = $(self.id + ' ' + Elements.CLASS_RESOURCES_LIST_ITEMS);
    71.                 event.preventDefault();
    72.                 $(query).addClass('col-xs-3');
    73.                 $(query).removeClass('col-xs-12');
    74.             });
    75.         };
    76.         /**
    77.          When user changes text update msdb, we use xSavePlayerData
    78.          as a json boilerplate that we append values to and save it in msdb as player_data
    79.          @method _listenInputChange
    80.          @return none
    81.          **/
    82.         ResourcesListView.prototype._listenInputChange = function () {
    83.             var self = this;
    84.             var onChange = _.debounce(function (e) {
    85.                 var text = $(e.target).val();
    86.                 if (BB.lib.isEmpty(text))
    87.                     return;
    88.                 text = BB.lib.cleanProbCharacters(text, 1);
    89.                 BB.Pepper.setResourceRecord(self.m_selected_resource_id, 'resource_name', text);
    90.                 var elem = self.$el.find('[data-resource_id="' + self.m_selected_resource_id + '"]');
    91.                 elem.find('span').text(text);
    92.             }, 333);
    93.             $(Elements.SELECTED_LIB_RESOURCE_NAME).on("input", onChange);
    94.         };
    95.         /**
    96.          Listen to remove resource event
    97.          @method _listenRemoveResource
    98.          @return none
    99.          **/
    100.         ResourcesListView.prototype._listenRemoveResource = function () {
    101.             var self = this;
    102.             $(Elements.FILE_REMOVE).on('click', function (e) {
    103.                 if (self.m_selected_resource_id == undefined)
    104.                     return;
    105.                 // notify before so channel instances can remove blocks & after so channelList refresh UI
    106.                 BB.comBroker.fire(BB.EVENTS.REMOVING_RESOURCE, this, null, self.m_selected_resource_id);
    107.                 BB.Pepper.removeResource(self.m_selected_resource_id);
    108.                 BB.Pepper.removeBlocksWithResourceID(self.m_selected_resource_id);
    109.                 BB.Pepper.removeResourceFromBlockCollectionInScenes(self.m_selected_resource_id);
    110.                 BB.Pepper.removeResourceFromBlockCollectionsInChannel(self.m_selected_resource_id);
    111.                 self.renderView();
    112.                 self._listenResourceSelected();
    113.                 $(Elements.RESOURCES_FILTER_LIST).val('');
    114.                 BB.comBroker.fire(BB.EVENTS.REMOVED_RESOURCE, this, null, self.m_selected_resource_id);
    115.             });
    116.         };
    117.         /**
    118.          Listen to resource selection, populate the properties panel and open it if needed.
    119.          @method _listenResourceSelected
    120.          **/
    121.         ResourcesListView.prototype._listenResourceSelected = function () {
    122.             var self = this;
    123.             $(Elements.CLASS_RESOURCES_LIST_ITEMS).off('click');
    124.             $(Elements.CLASS_RESOURCES_LIST_ITEMS).on('click', function (e) {
    125.                 var resourceElem = $(e.target).closest('li');
    126.                 self.m_selected_resource_id = $(resourceElem).data('resource_id');
    127.                 $(Elements.CLASS_RESOURCES_LIST_ITEMS).removeClass('activated').find('a').removeClass('whiteFont');
    128.                 $(resourceElem).addClass('activated').find('a').addClass('whiteFont');
    129.                 var recResource = BB.Pepper.getResourceRecord(self.m_selected_resource_id);
    130.                 $(Elements.SELECTED_LIB_RESOURCE_NAME).val(recResource['resource_name']);
    131.                 self.m_property.viewPanel(Elements.RESOURCE_LIST_PROPERTIES);
    132.                 if (platform.name == 'Chrome') {
    133.                     self._populateResourcePreviewLegacy(recResource);
    134.                 }
    135.                 else {
    136.                     self._populateResourcePreviewLegacy(recResource);
    137.                 }
    138.                 return false;
    139.             });
    140.         };
    141.         /**
    142.          Populate the resource preview with loaded resource file (none CDN)
    143.          @method _populateResourcePreviewLegacy
    144.          @param {Object} i_recResource
    145.          **/
    146.         ResourcesListView.prototype._populateResourcePreviewLegacy = function (i_recResource) {
    147.             var self = this;
    148.             var $img;
    149.             var path;
    150.             if (self.m_videoPlayer) {
    151.                 self.m_videoPlayer.pause();
    152.                 self.m_videoPlayer.load();
    153.             }
    154.             switch (i_recResource['resource_type']) {
    155.                 case 'jpg':
    156.                     {
    157.                         var ext = 'jpg';
    158.                     }
    159.                 case 'png':
    160.                     {
    161.                         if (!ext)
    162.                             ext = 'png';
    163.                         path = window['g_protocol'] + BB.Pepper.getUserData().domain + '/Resources/business' + BB.Pepper.getUserData().businessID + '/resources/' + BB.Pepper.getResourceNativeID(i_recResource['resource_id']) + '.' + ext;
    164.                         $(Elements.RESOURCE_PREVIEW_VIDEO).hide();
    165.                         $(Elements.RESOURCE_PREVIEW_IMAGE).fadeIn();
    166.                         $(Elements.RESOURCE_PREVIEW_SVG).hide();
    167.                         $img = $(Elements.RESOURCE_PREVIEW_IMAGE).find('img');
    168.                         $img.attr('src', path);
    169.                         break;
    170.                     }
    171.                 case 'mp4':
    172.                     {
    173.                         ext = 'mp4';
    174.                         $(Elements.RESOURCE_PREVIEW_IMAGE).hide();
    175.                         $(Elements.RESOURCE_PREVIEW_SVG).hide();
    176.                         $(Elements.RESOURCE_PREVIEW_VIDEO).fadeIn();
    177.                         path = window['g_protocol'] + BB.Pepper.getUserData().domain + '/Resources/business' + BB.Pepper.getUserData().businessID + '/resources/' + BB.Pepper.getResourceNativeID(i_recResource['resource_id']) + '.' + ext;
    178.                         $(Elements.VIDEO_PREVIEW).find('video:nth-child(1)').attr("src", path);
    179.                         break;
    180.                     }
    181.                 case 'flv':
    182.                     {
    183.                         if (!ext)
    184.                             ext = 'flv';
    185.                     }
    186.                 case 'swf':
    187.                     {
    188.                         path = './_assets/flash.png';
    189.                         $(Elements.RESOURCE_PREVIEW_VIDEO).hide();
    190.                         $(Elements.RESOURCE_PREVIEW_SVG).hide();
    191.                         $(Elements.RESOURCE_PREVIEW_IMAGE).fadeIn();
    192.                         $img = $(Elements.RESOURCE_PREVIEW_IMAGE).find('img');
    193.                         $img.attr('src', path);
    194.                         break;
    195.                     }
    196.                 case 'svg':
    197.                     {
    198.                         path = window['g_protocol'] + BB.Pepper.getUserData().domain + '/Resources/business' + BB.Pepper.getUserData().businessID + '/resources/' + BB.Pepper.getResourceNativeID(i_recResource['resource_id']) + '.' + 'svg';
    199.                         $(Elements.RESOURCE_PREVIEW_VIDEO).hide();
    200.                         $(Elements.RESOURCE_PREVIEW_IMAGE).hide();
    201.                         $(Elements.RESOURCE_PREVIEW_SVG).fadeIn();
    202.                         $img = $(Elements.RESOURCE_PREVIEW_SVG).find('object');
    203.                         var urlPath = $.base64.encode(path);
    204.                         var srvPath = 'https://secure.digitalsignage.com/proxyRequest/' + urlPath;
    205.                         // load svg and force w/h
    206.                         $.get(srvPath, function (svg) {
    207.                             var svgHeight, svgWidth, re;
    208.                             svgHeight = svg.match(/(height=")([^\"]*)/)[2];
    209.                             re = new RegExp('height="' + svgHeight + '"', "ig");
    210.                             svg = svg.replace(re, 'height="100"');
    211.                             svgWidth = svg.match(/(width=")([^\"]*)/)[2];
    212.                             re = new RegExp('width="' + svgWidth + '"', "ig");
    213.                             svg = svg.replace(re, 'width="100"');
    214.                             $('#resourcePreviewSVG').empty();
    215.                             var s = new String(svg);
    216.                             $('#resourcePreviewSVG').append(svg).wrap('<center>');
    217.                         });
    218.                         break;
    219.                     }
    220.             }
    221.         };
    222.         /**
    223.          Populate the resource preview with loaded resource file (CDN)
    224.          @method _populateResourcePreviewCDN
    225.          @param {Object} i_recResource
    226.          **/
    227.         ResourcesListView.prototype._populateResourcePreviewCDN = function (i_recResource) {
    228.             var self = this;
    229.             var ext;
    230.             if (self.m_videoPlayer) {
    231.                 self.m_videoPlayer.pause();
    232.                 self.m_videoPlayer.load();
    233.             }
    234.             var path = window['g_protocol'] + 's3.signage.me/business' + BB.Pepper.getUserData().businessID + '/resources/';
    235.             switch (i_recResource['resource_type']) {
    236.                 case 'jpg':
    237.                     {
    238.                         ext = 'jpg';
    239.                     }
    240.                 case 'png':
    241.                     {
    242.                         if (!ext)
    243.                             ext = 'png';
    244.                         path += BB.Pepper.getResourceNativeID(i_recResource['resource_id']) + '.' + ext;
    245.                         $(Elements.RESOURCE_PREVIEW_VIDEO).hide();
    246.                         $(Elements.RESOURCE_PREVIEW_IMAGE).fadeIn();
    247.                         $(Elements.RESOURCE_PREVIEW_SVG).hide();
    248.                         var $img = $(Elements.RESOURCE_PREVIEW_IMAGE).find('img');
    249.                         $img.attr('src', path);
    250.                         break;
    251.                     }
    252.                 case 'mp4':
    253.                     {
    254.                         ext = 'mp4';
    255.                     }
    256.                 case 'flv':
    257.                     {
    258.                         if (!ext)
    259.                             ext = 'flv';
    260.                         $(Elements.RESOURCE_PREVIEW_IMAGE).hide();
    261.                         $(Elements.RESOURCE_PREVIEW_SVG).hide();
    262.                         $(Elements.RESOURCE_PREVIEW_VIDEO).fadeIn();
    263.                         path += BB.Pepper.getResourceNativeID(i_recResource['resource_id']) + '.' + ext;
    264.                         // path = window['g_protocol'] + BB.Pepper.getUserData().domain + '/Resources/business' +  BB.Pepper.getUserData().businessID + '/resources/' + BB.Pepper.getResourceNativeID(i_recResource['resource_id']) + '.' + ext;
    265.                         $(Elements.VIDEO_PREVIEW).find('video:nth-child(1)').attr("src", path);
    266.                         break;
    267.                     }
    268.                 case 'swf':
    269.                     {
    270.                         path = './_assets/flash.png';
    271.                         $(Elements.RESOURCE_PREVIEW_VIDEO).hide();
    272.                         $(Elements.RESOURCE_PREVIEW_SVG).hide();
    273.                         $(Elements.RESOURCE_PREVIEW_IMAGE).fadeIn();
    274.                         $img = $(Elements.RESOURCE_PREVIEW_IMAGE).find('img');
    275.                         $img.attr('src', path);
    276.                         break;
    277.                     }
    278.                 case 'svg':
    279.                     {
    280.                         path = window['g_protocol'] + BB.Pepper.getUserData().domain + '/Resources/business' + BB.Pepper.getUserData().businessID + '/resources/' + BB.Pepper.getResourceNativeID(i_recResource['resource_id']) + '.' + 'svg';
    281.                         // path += BB.Pepper.getResourceNativeID(i_recResource['resource_id']) + '.' + 'svg';
    282.                         $(Elements.RESOURCE_PREVIEW_VIDEO).hide();
    283.                         $(Elements.RESOURCE_PREVIEW_IMAGE).hide();
    284.                         $(Elements.RESOURCE_PREVIEW_SVG).fadeIn();
    285.                         $img = $(Elements.RESOURCE_PREVIEW_SVG).find('object');
    286.                         var urlPath = $.base64.encode(path);
    287.                         var srvPath = 'https://secure.digitalsignage.com/proxyRequest/' + urlPath;
    288.                         // load svg and force w/h
    289.                         $.get(srvPath, function (svg) {
    290.                             var svgHeight, svgWidth, re;
    291.                             svgHeight = svg.match(/(height=")([^\"]*)/)[2];
    292.                             re = new RegExp('height="' + svgHeight + '"', "ig");
    293.                             svg = svg.replace(re, 'height="100"');
    294.                             svgWidth = svg.match(/(width=")([^\"]*)/)[2];
    295.                             re = new RegExp('width="' + svgWidth + '"', "ig");
    296.                             svg = svg.replace(re, 'width="100"');
    297.                             $('#resourcePreviewSVG').empty();
    298.                             var s = new String(svg);
    299.                             $('#resourcePreviewSVG').append(svg).wrap('<center>');
    300.                         });
    301.                         break;
    302.                     }
    303.             }
    304.             //log('Loading file from ' + path);
    305.         };
    306.         /**
    307.          init HTML5 video.js component
    308.          @method _listenAutoPopup
    309.          **/
    310.         ResourcesListView.prototype._initVideo = function () {
    311.             var self = this;
    312.             videojs(BB.lib.unhash(Elements.VIDEO_PREVIEW)).ready(function () {
    313.                 self.m_videoPlayer = this;
    314.             });
    315.         };
    316.         /**
    317.          On selecting new resources through multi-upload from local machine.
    318.          @method _onFileSelected
    319.          @return {number} -1 on fail or 1 on pass
    320.          **/
    321.         ResourcesListView.prototype._onFileSelected = function (e) {
    322.             var self = this;
    323.             var status = BB.Pepper.uploadResources('file');
    324.             if (status.length == 0) {
    325.                 bootbox.alert($(Elements.MSG_BOOTBOX_EXT_SUPP).text());
    326.                 return -1;
    327.             }
    328.             self.renderView();
    329.             self._listenResourceSelected();
    330.             self._listenRemoveResource();
    331.             var navigationView = BB.comBroker.getService(BB.SERVICES.NAVIGATION_VIEW);
    332.             bootbox.alert($(Elements.MSG_BOOTBOX_WAIT_UPLOAD_RESOURCE).text());
    333.             navigationView.save(function () { });
    334.             setTimeout(function () {
    335.                 bootbox.hideAll();
    336.             }, 3000);
    337.             return 1;
    338.         };
    339.         /**
    340.          Listen to keyup to filter resource list
    341.          @method _listenFilterList
    342.          **/
    343.         ResourcesListView.prototype._listenFilterList = function () {
    344.             var self = this;
    345.             $(Elements.RESOURCES_FILTER_LIST).on('keyup', function () {
    346.                 var rex = new RegExp($(this).val(), 'i');
    347.                 var query = $(self.id + ' ' + Elements.CLASS_RESOURCES_LIST_ITEMS);
    348.                 query.hide();
    349.                 query.filter(function () {
    350.                     return rex.test($(this).text());
    351.                 }).show();
    352.             });
    353.         };
    354.         /**
    355.          Populate the UI with all resources for the account (i.e.: videos, images, swfs).
    356.          @method renderView
    357.          @return none
    358.          **/
    359.         ResourcesListView.prototype.renderView = function () {
    360.             var self = this;
    361.             $(Elements.RESOURCE_LIB_LIST).empty();
    362.             var recResources = BB.Pepper.getResources();
    363.             $(recResources).each(function (i) {
    364.                 // dont process deleted resources
    365.                 if (recResources[i]['change_type'] == 3)
    366.                     return;
    367.                 var size = (parseInt(recResources[i]['resource_bytes_total']) / 1000).toFixed(2);
    368.                 var resourceDescription = 'size: ' + size + 'K dimenstion: ' + recResources[i]['resource_pixel_width'] + 'x' + recResources[i]['resource_pixel_height'];
    369.                 var resourceFontAwesome = BB.PepperHelper.getFontAwesome(recResources[i]['resource_type']);
    370.                 if (_.isUndefined(resourceFontAwesome)) {
    371.                     bootbox.alert($(Elements.MSG_BOOTBOX_FILE_FORMAT_INVALID).text());
    372.                 }
    373.                 else {
    374.                     var snippet = "<li style=\"white-space: nowrap\" class=\"" + BB.lib.unclass(Elements.CLASS_RESOURCES_LIST_ITEMS) + " list-group-item\" data-resource_id=\"" + recResources[i]['resource_id'] + "\">\n                                        <a href=\"#\">\n                                            <i class=\"fa " + resourceFontAwesome + "\"></i>\n                                            <span style=\"overflow-x: hidden\"> " + recResources[i]['resource_name'] + "</span>\n                                            <p></p>\n                                        </a>\n                                    </li>";
    375.                     $(Elements.RESOURCE_LIB_LIST).append($(snippet));
    376.                 }
    377.             });
    378.             self._listenResourceSelected();
    379.         };
    380.         /**
    381.          Unrender, future support
    382.          @method unrenderView
    383.          **/
    384.         ResourcesListView.prototype.unrenderView = function () {
    385.             var self = this;
    386.         };
    387.         return ResourcesListView;
    388.     })(Backbone.View);
    389.     return ResourcesListView;
    390. });
    391. //# sourceMappingURL=ResourcesListView.js.map
    392.