- ///<reference path="../../typings/lite/app_references.d.ts" />
- var __extends = (this && this.__extends) || function (d, b) {
- for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
- //GULP_ABSTRACT_END
- define(['jquery', 'Block'], function ($, Block) {
- TSLiteModules.Block = Block;
- /**
- BlockJsonBase is a Player block that is used as the base class for all JSON based components
- it allows for parsing of JSON data and is supported with the JSON Item inside scenes
- @class BlockJsonBase
- @constructor
- @return {Object} instantiated BlockJsonBase
- @example
- path: http://www.digitalsignage.com/videoTutorials/_data/videos.json
- json player: children[0].children
- json item: text
- **/
- var BlockJsonBase = (function (_super) {
- __extends(BlockJsonBase, _super);
- function BlockJsonBase(options) {
- //BB.lib.log('c base');
- if (options)
- this.m_options = options;
- _super.call(this);
- }
- BlockJsonBase.prototype.initialize = function () {
- //BB.lib.log('i base');
- var self = this;
- _super.prototype.initialize.call(this, self.m_options);
- self._initSubPanel(Elements.BLOCK_JSON_COMMON_PROPERTIES);
- self._listenSceneListChange();
- self._listenUrlChange();
- self._listenVideoPlayToCompletion();
- self._listenRandomPlayback();
- self._listenObjectPathChange();
- self._listenSceneDropdownChange();
- self._listenIntervalChange();
- self._listenSlideShowMode();
- self._listenAddEvent();
- self._listenRemoveEvent();
- self.m_jsonEventTable = $(Elements.JSON_EVENTS_TABLE);
- self._listenJsonRowEventChanged();
- self.m_blockProperty.jsonEventDatatableInit();
- self.m_mimeType = '';
- self.m_actions = {
- firstPage: 'beginning',
- nextPage: 'next',
- prevPage: 'previous',
- lastPage: 'last',
- loadUrl: 'loadURL'
- };
- };
- /**
- Listen to when json row was edited
- @method _listenJsonRowEventChanged
- **/
- BlockJsonBase.prototype._listenJsonRowEventChanged = function () {
- var self = this;
- self.m_jsonRowEventChangedHandler = function (e) {
- if (!self.m_selected)
- return;
- var domPlayerData = self._getBlockPlayerData();
- var rowIndex = e.edata.rowIndex;
- var event = e.edata.event;
- var action = e.edata.action;
- var item = $(domPlayerData).find('EventCommands').children().get(rowIndex);
- $(item).attr('from', event);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- };
- BB.comBroker.listen(BB.EVENTS.JSON_EVENT_ROW_CHANGED, self.m_jsonRowEventChangedHandler);
- };
- /**
- Listen to when user wants to add new events
- @method _listenAddEvent
- **/
- BlockJsonBase.prototype._listenAddEvent = function () {
- var self = this;
- this.m_addNewEvent = function () {
- if (!self.m_selected)
- return;
- var domPlayerData = self._getBlockPlayerData();
- var buff = '<EventCommand from="event" condition="" command="firstPage" />';
- $(domPlayerData).find('EventCommands').append($(buff));
- self._setBlockPlayerData(BB.Pepper.xmlToStringIEfix(domPlayerData), BB.CONSTS.NO_NOTIFICATION, true);
- self._populateTableEvents();
- };
- $(Elements.ADD_JSON_EVENTS).on('click', self.m_addNewEvent);
- };
- /**
- Listen to when removing a resource from list
- The algorithm will uses our bootstrap-table own inject rowIndex value
- and counts up to match with the order of <EventCommand/> in msdb json, once matched against same value
- we delete the proper ordered json item from msdb and refresh the entire table
- @method _listenRemoveResource
- **/
- BlockJsonBase.prototype._listenRemoveEvent = function () {
- var self = this;
- self.m_removeEvent = function () {
- if (!self.m_selected)
- return;
- if (self.m_jsonEventTable.bootstrapTable('getSelections').length == 0) {
- bootbox.alert($(Elements.MSG_BOOTBOX_NO_ITEM_SELECTED).text());
- return;
- }
- var rowIndex = $('input[name=btSelectItem]:checked', Elements.JSON_EVENTS_TABLE).closest('tr').attr('data-index');
- var domPlayerData = self._getBlockPlayerData();
- $(domPlayerData).find('EventCommands').children().eq(rowIndex).remove();
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- self._populateTableEvents();
- };
- $(Elements.REMOVE_JSON_EVENTS).on('click', self.m_removeEvent);
- };
- /**
- Load event list to block props UI
- @method _populateTableEvents
- **/
- BlockJsonBase.prototype._populateTableEvents = function () {
- var self = this;
- var data = [], rowIndex = 0;
- var domPlayerData = self._getBlockPlayerData();
- self.m_jsonEventTable.bootstrapTable('removeAll');
- $(domPlayerData).find('EventCommands').children().each(function (k, eventCommand) {
- var url = '';
- if ($(eventCommand).attr('command') == 'loadUrl')
- url = $(eventCommand).find('Url').attr('name');
- if (_.isUndefined(url))
- url = '';
- data.push({
- rowIndex: rowIndex,
- checkbox: true,
- event: $(eventCommand).attr('from'),
- url: url,
- action: self.m_actions[$(eventCommand).attr('command')]
- });
- rowIndex++;
- });
- self.m_jsonEventTable.bootstrapTable('load', data);
- self._listenDropdownEvenActionSelection();
- self._listenActionURLChange();
- // disable drag cursor due to bug in bootstrap-table lib (can't disable dragging, yach...)
- setTimeout(function () {
- $('tr', Elements.JSON_EVENTS_CONTAINER).css({
- cursor: 'pointer'
- });
- }, 500);
- };
- /**
- Update the title of the selected tab properties element and also show the sub tab
- for Settings of Json sub components (world weather, Calendar etc...)
- @override
- @method _updateTitleTab
- */
- BlockJsonBase.prototype._updateTitleTab = function () {
- var self = this;
- //super._updateTitleTab();
- $(Elements.BLOCK_COMMON_SETTINGS_TAB).show();
- $(Elements.BLOCK_SUBPROPERTIES_TITLE).text(self.m_blockAcronym);
- };
- /**
- re-take ownership for a caller block instance and register global Validators for bootstrap-table to format data
- This function has to run everytime we populate the UI since it is a shared global function
- and we have to override it so 'this' refers to correct BlockJsonBase instance
- @method _setJsonBlockGlobalValidationOwner
- **/
- BlockJsonBase.prototype._setJsonBlockGlobalValidationOwner = function (i_this) {
- // add draggable icons
- //BB.lib.collectionDragIcons = function () {
- // return '<div class="dragIconTable"><i class="fa fa-arrows-v"></i></div>';
- //};
- // register a global shared function to validate checkbox state
- //BB.lib.collectionChecks = function (value, row, index) {
- // return {
- // checked: false,
- // disabled: false
- // }
- //};
- BB.lib.jsonEventAction = function (value, row, index) {
- var buffer = '<select class="' + BB.lib.unclass(Elements.CLASS_JSON_EVENT_ACTION) + ' btn">';
- _.forEach(i_this.m_actions, function (name, value) {
- if (row.action == name) {
- buffer += '<option selected>' + name + '</option>';
- }
- else {
- buffer += '<option>' + name + '</option>';
- }
- });
- return buffer + '</select>';
- };
- BB.lib.jsonEventActionGoToItem = function (value, row, index) {
- var visibilityClass = row.action == 'loadURL' ? '' : 'hidden';
- var buffer = '<input class="' + visibilityClass + ' ' + BB.lib.unclass(Elements.CLASS_JSON_EVENT_ACTION_GOTO) + ' " value="' + row.url + '" >';
- return buffer;
- };
- };
- /**
- Listen in Event Action go to dropdown selections
- @method _listenActionURLChange
- **/
- BlockJsonBase.prototype._listenActionURLChange = function () {
- var self = this;
- if (self.m_onDropDownEventActionGoToHandler)
- $(Elements.CLASS_JSON_EVENT_ACTION_GOTO).off('change', self.m_onDropDownEventActionGoToHandler);
- self.m_onDropDownEventActionGoToHandler = function (e) {
- if (!self.m_selected)
- return;
- var url = $(this).val();
- var index = $(this).closest('[data-index]').attr('data-index');
- var domPlayerData = self._getBlockPlayerData();
- var target = $(domPlayerData).find('EventCommands').children().get(parseInt(index));
- $(target).find('Params').remove();
- $(target).append('<Params> <Url name="' + url + '" /></Params>');
- self._setBlockPlayerData(BB.Pepper.xmlToStringIEfix(domPlayerData), BB.CONSTS.NO_NOTIFICATION, true);
- self._populateTableEvents();
- };
- $(Elements.CLASS_JSON_EVENT_ACTION_GOTO).on('change', self.m_onDropDownEventActionGoToHandler);
- };
- /**
- Listen in Event Action dropdown selections
- @method _listenDropdownEvenActionSelection
- **/
- BlockJsonBase.prototype._listenDropdownEvenActionSelection = function () {
- var self = this;
- if (self.m_onDropDownEventActionHandler)
- $(Elements.CLASS_JSON_EVENT_ACTION).off('change', self.m_onDropDownEventActionHandler);
- self.m_onDropDownEventActionHandler = function (e) {
- if (!self.m_selected)
- return;
- var selected = $("option:selected", this).val();
- var actions = _.invert(self.m_actions);
- var action = actions[selected];
- var index = $(this).closest('[data-index]').attr('data-index');
- var domPlayerData = self._getBlockPlayerData();
- var target = $(domPlayerData).find('EventCommands').children().get(parseInt(index));
- $(target).attr('command', action);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- self._populateTableEvents();
- };
- $(Elements.CLASS_JSON_EVENT_ACTION).on('change', self.m_onDropDownEventActionHandler);
- };
- /**
- Populate the LI with all available scenes from msdb
- if the mimetype is empty (used for this class) we show all scenes in dropdown, but if mimetype exists
- (used by subclasses of this class) we filter dropdown list by matching mimetypes
- @method _populateSceneDropdown
- **/
- BlockJsonBase.prototype._populateSceneDropdown = function () {
- var self = this;
- var selected = '';
- var snippet = ['<option selected">Select scene to use'];
- $(Elements.JSON_DROPDOWN).empty();
- var scenenames = BB.Pepper.getSceneNames();
- if (_.size(scenenames) == 0)
- return;
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('Json');
- var xSnippetPlayer = $(xSnippet).find('Player');
- var selectedSceneID = $(xSnippetPlayer).attr('hDataSrc');
- for (var sceneID in scenenames) {
- var mimeType = scenenames[sceneID].mimeType;
- var label = scenenames[sceneID].label;
- if (self.m_mimeType != '' && self.m_mimeType != mimeType)
- continue;
- if (sceneID == selectedSceneID) {
- selected = 'selected';
- snippet.shift();
- }
- else {
- selected = '';
- }
- snippet.push("<option " + selected + " data-scene_id=\"" + sceneID + "\">" + label + "</option>");
- }
- $(Elements.JSON_DROPDOWN).append($(snippet.join(' ')));
- };
- /**
- Populate the UI of the scene interval selector
- @method _populateInterval
- @param {Number} i_interval
- **/
- BlockJsonBase.prototype._populateInterval = function (i_interval) {
- var self = this;
- var interval = Number(i_interval);
- $('.spinner', Elements.BLOCK_JSON_COMMON_PROPERTIES).spinner('value', interval);
- };
- /**
- Populate Url input field
- @method _populateUrlInput
- @param {String} i_url
- **/
- BlockJsonBase.prototype._populateUrlInput = function (i_url) {
- var self = this;
- $(Elements.JSON_URL_INPUT).val(i_url);
- };
- /**
- Load up property values in the common panel
- @method _populate
- @return none
- **/
- BlockJsonBase.prototype._populate = function () {
- var self = this;
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('Json');
- var url = $(xSnippet).attr('url');
- var xSnippetPlayer = $(xSnippet).find('Player');
- var sceneID = $(xSnippetPlayer).attr('hDataSrc');
- var interval = $(xSnippet).attr('itemInterval');
- var itemsPath = $(xSnippet).attr('itemsPath');
- var playVideoInFull = $(xSnippet).attr('playVideoInFull');
- var randomOrder = $(xSnippet).attr('randomOrder');
- var slideShow = $(xSnippet).attr('slideShow');
- self._populateEventVisibility(slideShow);
- self._populateSceneDropdown();
- self._populateUrlInput(url);
- self._populateInterval(interval);
- self._populateObjectPlayToCompletion(playVideoInFull);
- self._populateSlideShow(slideShow);
- self._populateRandomPlayback(randomOrder);
- self._populateObjectPath(itemsPath);
- self._setJsonBlockGlobalValidationOwner(self);
- self._populateTableEvents();
- self._updateJsonPaths();
- };
- /**
- By default hide the JSON URL and JSON Object paths inputs
- @method _showJsonPaths
- **/
- BlockJsonBase.prototype._updateJsonPaths = function () {
- $(Elements.JSON_PATHS_CONTAINER).slideUp();
- };
- /**
- Show or hide the events UI depending on slideshow mode
- @method _populateEventVisibility
- @param {Number} i_slideShow
- **/
- BlockJsonBase.prototype._populateEventVisibility = function (i_slideShow) {
- if (i_slideShow == "1") {
- $(Elements.JSON_EVENTS_CONTAINER).hide();
- }
- else {
- $(Elements.JSON_EVENTS_CONTAINER).show();
- }
- };
- /**
- Populate Object json path using dot notation
- @method _populateObjectPath
- @params {String} i_objectPath
- **/
- BlockJsonBase.prototype._populateObjectPath = function (i_objectPath) {
- var self = this;
- $(Elements.JSON_PATH_INPUT).val(i_objectPath);
- };
- /**
- Populate json object play to completion if we are pulling videos from the json path
- @method _populateObjectPlayToCompletion
- @params {Boolean} i_playToCompletion
- **/
- BlockJsonBase.prototype._populateObjectPlayToCompletion = function (i_playToCompletion) {
- var self = this;
- if (i_playToCompletion == '1') {
- $(Elements.JSON_PLAY_VIDEO_COMPLETION).prop('checked', true);
- }
- else {
- $(Elements.JSON_PLAY_VIDEO_COMPLETION).prop('checked', false);
- }
- };
- /**
- Populate json slideshow mode
- @method _populateSlideShow
- @params {Boolean} i_slideshow
- **/
- BlockJsonBase.prototype._populateSlideShow = function (i_slideshow) {
- var self = this;
- if (i_slideshow == '1') {
- $(Elements.JSON_SLIDESHOW).prop('checked', true);
- }
- else {
- $(Elements.JSON_SLIDESHOW).prop('checked', false);
- }
- };
- /**
- Populate json object random playback
- @method _populateRandomPlayback
- @params {Boolean} i_randomPlayback
- **/
- BlockJsonBase.prototype._populateRandomPlayback = function (i_randomPlayback) {
- var self = this;
- if (i_randomPlayback == '1') {
- $(Elements.JSON_RANDOM_PLAYBACK).prop('checked', true);
- }
- else {
- $(Elements.JSON_RANDOM_PLAYBACK).prop('checked', false);
- }
- };
- /**
- Listen to changes in the scene interval control
- @method _listenIntervalChange
- **/
- BlockJsonBase.prototype._listenIntervalChange = function () {
- var self = this;
- $('.spinner', Elements.BLOCK_JSON_COMMON_PROPERTIES).spinner({ value: 4, min: 1, max: 9999, step: 1 });
- $(Elements.JSON_INTERVAL_INPUT).prop('disabled', true).css({ backgroundColor: 'transparent' });
- self.m_intervalInput = _.debounce(function (e) {
- if (!self.m_selected)
- return;
- if ($(e.target).prop("tagName") == 'INPUT')
- return;
- var interval = $(Elements.JSON_INTERVAL_INPUT).val();
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('Json');
- $(xSnippet).attr('itemInterval', interval);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- }, 250, false);
- $('.spinner', Elements.BLOCK_JSON_COMMON_PROPERTIES).on('mouseup', self.m_intervalInput);
- };
- /**
- Wire changing of campaign name through scene properties
- @method _listenObjectPathChange
- @return none
- **/
- BlockJsonBase.prototype._listenObjectPathChange = function () {
- var self = this;
- self.m_pathChange = _.debounce(function (e) {
- if (!self.m_selected)
- return;
- var itemsPath = $(e.target).val();
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('Json');
- $(xSnippet).attr('itemsPath', itemsPath);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- }, 333, false);
- $(Elements.JSON_PATH_INPUT).on("input", self.m_pathChange);
- };
- /**
- Listen to Video Play to completion change mode
- @method _listenVideoPlayToCompletion
- @return none
- **/
- BlockJsonBase.prototype._listenVideoPlayToCompletion = function () {
- var self = this;
- self.m_playVideoCompletion = function (e) {
- if (!self.m_selected)
- return;
- var mode = $(e.target).prop('checked') == true ? 1 : 0;
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('Json');
- $(xSnippet).attr('playVideoInFull', mode);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- };
- $(Elements.JSON_PLAY_VIDEO_COMPLETION).on("change", self.m_playVideoCompletion);
- };
- /**
- Listen to Video Play to completion change mode
- @method _listenVideoPlayToCompletion
- @return none
- **/
- BlockJsonBase.prototype._listenRandomPlayback = function () {
- var self = this;
- self.m_randomPlayback = function (e) {
- if (!self.m_selected)
- return;
- var mode = $(e.target).prop('checked') == true ? 1 : 0;
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('Json');
- $(xSnippet).attr('randomOrder', mode);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- };
- $(Elements.JSON_RANDOM_PLAYBACK).on("change", self.m_randomPlayback);
- };
- /**
- Listen to slideshow change mode
- @method _listenSlideShowMode
- @return none
- **/
- BlockJsonBase.prototype._listenSlideShowMode = function () {
- var self = this;
- self.m_slideShow = function (e) {
- if (!self.m_selected)
- return;
- var mode = $(e.target).prop('checked') == true ? 1 : 0;
- self._populateEventVisibility(mode);
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('Json');
- $(xSnippet).attr('slideShow', mode);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- };
- $(Elements.JSON_SLIDESHOW).on("change", self.m_slideShow);
- };
- /**
- Wire changing of campaign name through scene properties
- @method _listenUrlChange
- @return none
- **/
- BlockJsonBase.prototype._listenUrlChange = function () {
- var self = this;
- self.m_urlChange = _.debounce(function (e) {
- if (!self.m_selected)
- return;
- var url = $(e.target).val();
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('Json');
- $(xSnippet).attr('url', url);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- }, 333, false);
- $(Elements.JSON_URL_INPUT).on("input", self.m_urlChange);
- };
- /**
- Listen to the global scene list changes event so we can update the list of available scenes
- @method _listenSceneListChange
- **/
- BlockJsonBase.prototype._listenSceneListChange = function () {
- var self = this;
- BB.comBroker.listenWithNamespace(BB.EVENTS.SCENE_LIST_UPDATED, self, function (e) {
- if (!self.m_selected)
- return;
- self._populateSceneDropdown();
- });
- };
- /**
- Listen to playlist changes dropdown
- @method _listenSceneDropdownChange
- **/
- BlockJsonBase.prototype._listenSceneDropdownChange = function () {
- var self = this;
- self.m_bindScene = function (e) {
- if (!self.m_selected)
- return;
- //var listType = $(e.target).attr('name');
- //if (_.isUndefined(listType))
- // return;
- var $selected = $(e.target).find(':selected');
- //var sceneName = $(e.target).text();
- var sceneID = $selected.attr('data-scene_id');
- var domPlayerData = self._getBlockPlayerData();
- var xSnippet = $(domPlayerData).find('Json');
- var xSnippetPlayer = $(xSnippet).find('Player');
- $(xSnippetPlayer).attr('hDataSrc', sceneID);
- BB.lib.log('assigning to scene ' + sceneID);
- self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
- };
- $(Elements.JSON_DROPDOWN).on('change', self.m_bindScene);
- };
- /**
- Populate the common block properties panel, called from base class if exists
- @method _loadBlockSpecificProps
- @return none
- **/
- BlockJsonBase.prototype._loadBlockSpecificProps = function () {
- var self = this;
- self._populate();
- this._viewSubPanel(Elements.BLOCK_JSON_COMMON_PROPERTIES);
- };
- /**
- Delete this block
- @method deleteBlock
- @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb
- **/
- BlockJsonBase.prototype.deleteBlock = function (i_memoryOnly) {
- var self = this;
- $('.spinner', Elements.BLOCK_JSON_COMMON_PROPERTIES).off('mouseup', self.m_intervalInput);
- $(Elements.CLASS_JSON_EVENT_ACTION).off('change', self.m_onDropDownEventActionHandler);
- $(Elements.CLASS_JSON_EVENT_ACTION_GOTO).off('change', self.m_onDropDownEventActionGoToHandler);
- $(Elements.ADD_JSON_EVENTS).off('click', self.m_addNewEvent);
- $(Elements.REMOVE_JSON_EVENTS).off('click', self.m_removeEvent);
- $(Elements.JSON_DROPDOWN).off('change', self.m_bindScene);
- $(Elements.JSON_URL_INPUT).off("input", self.m_urlChange);
- $(Elements.JSON_PATH_INPUT).off("input", self.m_pathChange);
- $(Elements.JSON_PLAY_VIDEO_COMPLETION).off("change", self.m_playVideoCompletion);
- $(Elements.JSON_RANDOM_PLAYBACK).off("change", self.m_randomPlayback);
- $(Elements.JSON_SLIDESHOW).off("change", self.m_slideShow);
- BB.comBroker.stopListenWithNamespace(BB.EVENTS.SCENE_LIST_UPDATED, self);
- BB.comBroker.stopListen(BB.EVENTS.JSON_EVENT_ROW_CHANGED, self.m_jsonRowEventChangedHandler);
- self._deleteBlock(i_memoryOnly);
- };
- return BlockJsonBase;
- })(TSLiteModules.Block);
- return BlockJsonBase;
- });
- //# sourceMappingURL=BlockJsonBase.js.map
-