/**
* BlockCollection block resides inside a scene or timeline and manages internal playback of scenes and resoucres
* @class BlockCollection
* @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', 'bootstrap-table-editable', 'bootstrap-table-sort-rows'], function ($, Backbone, Block, bootstraptableeditable, bootstraptablesortrows) {
var BlockCollection = Block.extend({
/**
Constructor
@method initialize
**/
constructor: function (options) {
var self = this;
self.m_blockType = 4100;
_.extend(options, {blockType: self.m_blockType});
Block.prototype.constructor.call(this, options);
self.m_collectionTable = $(Elements.COLLECTION_TABLE);
self.m_collectionEventTable = $(Elements.COLLECTION_EVENTS_TABLE);
self.m_selectRowIndex = -1;
self._initSubPanel(Elements.BLOCK_COLLECTION_COMMON_PROPERTIES);
self._listenCollectionRowDragged();
self._listenCollectionRowDropped();
self._listenAddResource();
self._listenAddEvent();
self._listenRemoveEvent();
self._listenRemoveResource();
self._listenModeChange();
self._listenCollectionRowChanged();
self._listenCollectionRowEventChanged();
self.m_blockProperty.collectionDatatableInit();
/* can set global mode if we wish */
//$.fn.editable.defaults.mode = 'inline';
self.m_actions = {
firstPage: 'beginning',
nextPage: 'next',
prevPage: 'previous',
lastPage: 'last',
selectPage: 'selected'
}
},
/**
Listen to changes in volume control
@method _listenVolumeChange
**/
_listenCollectionRowDragged: function () {
var self = this;
self.m_collectionRowDraggedHandler = function (e) {
if (!self.m_selected)
return;
self.m_selectRowIndex = e.edata;
};
BB.comBroker.listen(BB.EVENTS.COLLECTION_ROW_DRAG, self.m_collectionRowDraggedHandler);
},
/**
Listen to when collection row was edited
@method _listenCollectionRowChanged
**/
_listenCollectionRowChanged: function () {
var self = this;
self.m_collectionRowChangedHandler = function (e) {
if (!self.m_selected)
return;
var domPlayerData = self._getBlockPlayerData();
var rowIndex = e.edata.rowIndex;
var newName = e.edata.name;
var newDuration = parseInt(e.edata.duration);
if (_.isNaN(newDuration)) {
bootbox.alert($(Elements.MSG_BOOTBOX_ENTRY_IS_INVALID).text());
self._populateTableCollection(domPlayerData);
return;
}
var item = $(domPlayerData).find('Collection').children().get(rowIndex);
$(item).attr('page', newName).attr('duration', newDuration);
self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
self._populateTableCollection(domPlayerData);
self._populateTableEvents();
};
BB.comBroker.listen(BB.EVENTS.COLLECTION_ROW_CHANGED, self.m_collectionRowChangedHandler);
},
/**
Listen to when collection row was edited
@method _listenCollectionRowEventChanged
**/
_listenCollectionRowEventChanged: function () {
var self = this;
self.m_collectionRowEventChangedHandler = 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);
self._populateTableCollection(domPlayerData);
};
BB.comBroker.listen(BB.EVENTS.COLLECTION_EVENT_ROW_CHANGED, self.m_collectionRowEventChangedHandler);
},
/**
Listen in Event Action dropdown selections
@method _listenDropdownEvenActionSelection
**/
_listenDropdownEvenActionSelection: function () {
var self = this;
if (self.m_onDropDownEventActionHandler)
$(Elements.CLASS_COLLECTION_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_COLLECTION_EVENT_ACTION).on('change', self.m_onDropDownEventActionHandler);
},
/**
Listen in Event Action go to dropdown selections
@method _listenDropdownEvenActionGoToSelection
**/
_listenDropdownEvenActionGoToSelection: function () {
var self = this;
if (self.m_onDropDownEventActionGoToHandler)
$(Elements.CLASS_COLLECTION_EVENT_ACTION_GOTO).off('change', self.m_onDropDownEventActionGoToHandler);
self.m_onDropDownEventActionGoToHandler = function (e) {
if (!self.m_selected)
return;
var selected = $("option:selected", 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><Page name="' + selected + '"/></Params>');
self._setBlockPlayerData(pepper.xmlToStringIEfix(domPlayerData), BB.CONSTS.NO_NOTIFICATION, true);
self._populateTableEvents();
};
$(Elements.CLASS_COLLECTION_EVENT_ACTION_GOTO).on('change', self.m_onDropDownEventActionGoToHandler);
},
/**
Listen to changes in volume control
@method _listenVolumeChange
**/
_listenCollectionRowDropped: function () {
var self = this;
self.m_collectionRowDroppedHandler = function (e) {
if (!self.m_selected)
return;
var droppedRowIndex = e.edata;
var domPlayerData = self._getBlockPlayerData();
var target = $(domPlayerData).find('Collection').children().get(parseInt(droppedRowIndex));
var source = $(domPlayerData).find('Collection').children().get(self.m_selectRowIndex);
droppedRowIndex > self.m_selectRowIndex ? $(target).after(source) : $(target).before(source);
self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
self._populateTableCollection(domPlayerData);
};
BB.comBroker.listen(BB.EVENTS.COLLECTION_ROW_DROP, self.m_collectionRowDroppedHandler);
},
/**
Load up property values in the common panel
@method _populate
@return none
**/
_populate: function () {
var self = this;
self._setCollectionBlockGlobalValidationOwner(self);
var domPlayerData = self._getBlockPlayerData();
var xSnippetCollection = $(domPlayerData).find('Collection');
var mode = $(xSnippetCollection).attr('mode');
self._populateTableCollection(domPlayerData);
if (mode == "kiosk") {
self._populateModeSliderUI(true);
self._populateTableEvents();
} else {
self._populateModeSliderUI(false);
}
},
/**
Load event list to the UI
@method _populateTableCollection
@param {Object} i_domPlayerData
**/
_populateTableCollection: function (i_domPlayerData) {
var self = this;
self.m_collectionTable.bootstrapTable('removeAll');
var data = [], rowIndex = 0;
$(i_domPlayerData).find('Collection').children().each(function (k, page) {
var resource_hResource, scene_hDataSrc;
var type = $(page).attr('type');
if (type == 'resource') {
resource_hResource = $(page).find('Resource').attr('hResource');
} else {
scene_hDataSrc = $(page).find('Player').attr('hDataSrc');
}
log('populating ' + resource_hResource);
data.push({
rowIndex: rowIndex,
checkbox: true,
name: $(page).attr('page'),
duration: $(page).attr('duration'),
type: type,
resource_hResource: resource_hResource,
scene_hDataSrc: scene_hDataSrc
});
rowIndex++;
});
self.m_collectionTable.bootstrapTable('load', data);
},
/**
Load event list to block props UI
@method _populateTableEvents
**/
_populateTableEvents: function () {
var self = this;
var data = [], rowIndex = 0;
var domPlayerData = self._getBlockPlayerData();
self.m_collectionEventTable.bootstrapTable('removeAll');
$(domPlayerData).find('EventCommands').children().each(function (k, eventCommand) {
var pageName = '';
if ($(eventCommand).attr('command') == 'selectPage')
pageName = $(eventCommand).find('Page').attr('name');
data.push({
rowIndex: rowIndex,
checkbox: true,
event: $(eventCommand).attr('from'),
pageName: pageName,
action: self.m_actions[$(eventCommand).attr('command')]
});
rowIndex++;
});
self.m_collectionEventTable.bootstrapTable('load', data);
self._listenDropdownEvenActionSelection();
self._listenDropdownEvenActionGoToSelection();
// disable drag cursor due to bug in bootstrap-table lib (can't disable dragging, yach...)
setTimeout(function () {
$('tr', Elements.KIOSK_EVENTS_CONTAINER).css({
cursor: 'pointer'
});
}, 500);
},
/**
Listen to mode change between Kiosk and Slideshow modes
@method _listenModeChange
**/
_listenModeChange: function () {
var self = this;
self.sliderInput = function () {
if (!self.m_selected)
return;
var mode = $(Elements.COLLECTION_KIOSK_MODE).prop('checked');
self._populateModeSliderUI(mode);
var domPlayerData = self._getBlockPlayerData();
$(domPlayerData).find('Collection').attr('mode', mode ? 'kiosk' : 'slideshow');
self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
self._populateTableEvents();
};
$(Elements.COLLECTION_KIOSK_MODE).on('change', self.sliderInput);
},
/**
Render the checkbox slider according to current Kiosk mode for block
@method _populateModeSliderUI
@param {Boolean} i_status
**/
_populateModeSliderUI: function (i_status) {
var self = this;
if (i_status) {
$(Elements.COLLECTION_KIOSK_MODE).prop('checked', true);
$(Elements.KIOSK_EVENTS_CONTAINER).show();
$(Elements.COLLECTION_SLIDESHOW_DURATION_CONTAINER).hide();
} else {
$(Elements.COLLECTION_KIOSK_MODE).prop('checked', false);
$(Elements.KIOSK_EVENTS_CONTAINER).hide();
$(Elements.COLLECTION_SLIDESHOW_DURATION_CONTAINER).show();
}
},
/**
Listen to when AddBlockListView announced that a new resource or scene needs to be added
and if this collection block is selected, go ahead and create one in Bootstrap-table and msdb
@method _listenAddResource
**/
_listenAddResource: function () {
var self = this;
self.m_addNewCollectionListItem = function () {
BB.comBroker.stopListenWithNamespace(BB.EVENTS.ADD_NEW_BLOCK_LIST, self);
if (!self.m_selected)
return;
var addBlockView;
if (self.m_placement == BB.CONSTS.PLACEMENT_CHANNEL) {
addBlockView = BB.comBroker.getService(BB.SERVICES.ADD_BLOCK_VIEW);
} else if (self.m_placement = BB.CONSTS.PLACEMENT_SCENE) {
addBlockView = BB.comBroker.getService(BB.SERVICES.ADD_SCENE_BLOCK_VIEW);
}
addBlockView.setPlacement(BB.CONSTS.PLACEMENT_LISTS);
addBlockView.selectView();
BB.comBroker.listenWithNamespace(BB.EVENTS.ADD_NEW_BLOCK_LIST, self, function (e) {
if (!self.m_selected)
return;
e.stopImmediatePropagation();
e.preventDefault();
self._addCollectionNewListItem(e);
BB.comBroker.fire(BB.EVENTS.BLOCK_SELECTED, this, null, self.m_block_id);
});
};
$(Elements.ADD_RESOURCE_TO_COLLECTION).on('click', self.m_addNewCollectionListItem);
},
/**
Listen to when user wants to add new events (i.e. when in Kiosk mode)
@method _listenAddEvent
**/
_listenAddEvent: function () {
var self = this;
self.m_addNewCollectionEvent = 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(pepper.xmlToStringIEfix(domPlayerData), BB.CONSTS.NO_NOTIFICATION, true);
self._populateTableEvents();
};
$(Elements.ADD_COLLECTION_EVENTS).on('click', self.m_addNewCollectionEvent);
},
/**
Listen to when removing a resource from collection list
The algorithm will uses our bootstrap-table own inject rowIndex value
and counts up to match with the order of <Pages/> in msdb collection, once matched against same value
we delete the proper ordered collection item from msdb and refresh the entire table
@method _listenRemoveResource
**/
_listenRemoveEvent: function () {
var self = this;
self.m_removeCollectionEvent = function () {
if (!self.m_selected)
return;
if (self.m_collectionEventTable.bootstrapTable('getSelections').length == 0) {
bootbox.alert($(Elements.MSG_BOOTBOX_NO_ITEM_SELECTED).text());
return;
}
var rowIndex = $('input[name=btSelectItem]:checked', Elements.COLLECTION_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_COLLECTION_EVENTS).on('click', self.m_removeCollectionEvent);
},
/**
Listen to when removing a resource from collection list
The algorithm will uses our bootstrap-table own inject rowIndex value
and counts up to match with the order of <Pages/> in msdb collection, once matched against same value
we delete the proper ordered collection item from msdb and refresh the entire table
@method _listenRemoveResource
**/
_listenRemoveResource: function () {
var self = this;
self.m_removeCollectionListItem = function () {
if (!self.m_selected)
return;
if (self.m_collectionTable.bootstrapTable('getSelections').length == 0) {
bootbox.alert($(Elements.MSG_BOOTBOX_NO_ITEM_SELECTED).text());
return;
}
var rowIndex = $('input[name=btSelectItem]:checked', Elements.COLLECTION_TABLE).closest('tr').attr('data-index');
var domPlayerData = self._getBlockPlayerData();
$(domPlayerData).find('Collection').children().eq(rowIndex).remove();
self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
self._populateTableCollection(domPlayerData);
self._populateTableEvents();
};
$(Elements.REMOVE_RESOURCE_FOR_COLLECTION).on('click', self.m_removeCollectionListItem);
},
/**
Add a new collection item which can include a Scene or a resource (not a component)
@method _addCollectionNewListItem
@param {Event} e
**/
_addCollectionNewListItem: function (e) {
var self = this;
var domPlayerData = self._getBlockPlayerData();
var xSnippetCollection = $(domPlayerData).find('Collection');
var buff = '';
// log(e.edata.blockCode, e.edata.resourceID, e.edata.sceneID);
if (e.edata.blockCode == BB.CONSTS.BLOCKCODE_SCENE) {
// add scene to collection
// if block resides in scene don't allow cyclic reference to collection scene inside current scene
if (self.m_placement == BB.CONSTS.PLACEMENT_SCENE) {
var sceneEditView = BB.comBroker.getService(BB.SERVICES['SCENE_EDIT_VIEW']);
if (!_.isUndefined(sceneEditView)) {
var selectedSceneID = sceneEditView.getSelectedSceneID();
selectedSceneID = pepper.getSceneIdFromPseudoId(selectedSceneID);
if (selectedSceneID == e.edata.sceneID) {
bootbox.alert($(Elements.MSG_BOOTBOX_SCENE_REFER_ITSELF).text());
return;
}
}
}
var sceneRecord = pepper.getScenePlayerRecord(e.edata.sceneID);
var sceneName = $(sceneRecord.player_data_value).attr('label');
var nativeID = sceneRecord['native_id'];
buff = '<Page page="' + sceneName + '" type="scene" duration="5">' +
'<Player src="' + nativeID + '" hDataSrc="' + e.edata.sceneID + '" />' +
'</page>';
} else {
// Add resources to collection
var resourceName = pepper.getResourceRecord(e.edata.resourceID).resource_name;
log('updating hResource ' + e.edata.resourceID);
buff = '<Page page="' + resourceName + '" type="resource" duration="5">' +
'<Player player="' + e.edata.blockCode + '">' +
'<Data>' +
'<Resource hResource="' + e.edata.resourceID + '" />' +
'</Data>' +
'</Player>' +
'</page>';
}
$(xSnippetCollection).append($(buff));
self._setBlockPlayerData(pepper.xmlToStringIEfix(domPlayerData), BB.CONSTS.NO_NOTIFICATION, true);
self._populateTableEvents();
},
/**
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_COLLECTION_COMMON_PROPERTIES);
},
/**
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 BlockCollection instance
@method _setCollectionBlockGlobalValidationOwner
**/
_setCollectionBlockGlobalValidationOwner: 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
}
};
// build selection dropdown for even "action", if row.action == name, set it as selected in dropdown
BB.lib.collectionEventAction = function (value, row, index) {
var buffer = '<select class="' + BB.lib.unclass(Elements.CLASS_COLLECTION_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>';
};
// build selection dropdown for event "to item" and if row.action is selected un-hide the dropdown in "to item" events and select the proper <option>
BB.lib.collectionEventActionGoToItem = function (value, row, index) {
var buffer = '';
var collectionPageNames = i_this._getCollectionPageNames();
var visibilityClass = row.action == 'selected' ? '' : 'hidden';
buffer = '<select class="' + visibilityClass + ' ' + BB.lib.unclass(Elements.CLASS_COLLECTION_EVENT_ACTION_GOTO) + ' btn">';
collectionPageNames.forEach(function (k, v) {
var selected = row.pageName == k ? 'selected' : '';
buffer += '<option ' + selected + '>' + k + '</option>';
});
return buffer;
};
},
/**
Get all the collection pages names for current collection block
this is called against the last block instance that registered the global function of
setCollectionBlockGlobalValidationOwner
@method _getCollectionPageNames
**/
_getCollectionPageNames: function () {
var self = this;
var data = [];
var domPlayerData = self._getBlockPlayerData();
$(domPlayerData).find('Collection').children().each(function (k, page) {
data.push($(page).attr('page'));
});
return data;
},
/**
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.ADD_RESOURCE_TO_COLLECTION).off('click', self.m_addNewCollectionListItem);
$(Elements.ADD_COLLECTION_EVENTS).off('click', self.m_addNewCollectionEvent);
$(Elements.COLLECTION_KIOSK_MODE).off('change', self.sliderInput);
$(Elements.REMOVE_COLLECTION_EVENTS).off('click', self.m_removeCollectionEvent);
$(Elements.CLASS_COLLECTION_EVENT_ACTION).off('change', self.m_onDropDownEventActionHandler);
$(Elements.CLASS_COLLECTION_EVENT_ACTION_GOTO).off('change', self.m_onDropDownEventActionGoToHandler);
$(Elements.REMOVE_RESOURCE_FOR_COLLECTION).off('click', self.m_removeCollectionListItem);
BB.comBroker.stopListen(BB.EVENTS.ADD_NEW_BLOCK_LIST); // removing for everyone which is ok, since gets added in real time
BB.comBroker.stopListen(BB.EVENTS.COLLECTION_ROW_DROP, self.m_collectionRowDroppedHandler);
BB.comBroker.stopListen(BB.EVENTS.COLLECTION_ROW_DRAG, self.m_collectionRowDraggedHandler);
BB.comBroker.stopListen(BB.EVENTS.COLLECTION_ROW_CHANGED, self.m_collectionRowChangedHandler);
BB.comBroker.stopListen(BB.EVENTS.COLLECTION_EVENT_ROW_CHANGED, self.m_collectionRowEventChangedHandler);
self._deleteBlock(i_memoryOnly);
}
});
return BlockCollection;
}
);
digitalsignage.com - open source docs