- /**
- The class generates the UI for a template (a.k.a Screen Division) that is
- a selectable widget including the drawing of each viewer (division) within
- the screen, as well as firing related click events on action.
- @class ScreenTemplateFactory
- @constructor
- @param {object} i_screenTemplateData hold data as instructions for factory creation component
- @param {String} i_type the type of widget that we will create. This includes
- VIEWER_SELECTABLE as well as ENTIRE_SELECTABLE with respect to the ability to select the components viewers individually
- or the entire screen division
- @param {object} i_owner the owner of this class (parent) that we can query at the listening end, to examine if the event is
- of any interest to the listener.
- **/
- define(['jquery', 'backbone'], function ($, Backbone) {
-
- /**
- This is a key event in the framework as many different instances subscribe to ON_VIEWER_SELECTED to reconfigure
- themselves. The event is fired when a viewer (i.e.: a screen division) is selected inside a Template (i.e. Screen).
- The key to remember is that the Factory instance (this) is always created with respect to it's owner (i_owner),
- so when ON_VIEWER_SELECTED is fired, the owner is carried with the event so listeners can act accordingly, and only if the owner
- is of interest to a subscribed listener.
- @event ON_VIEWER_SELECTED
- @param {this} caller
- @param {object} screenData event params
- @static
- @final
- @param {screenData} json encapsulated data of entire configuration of instance
- **/
- BB.EVENTS.ON_VIEWER_SELECTED = 'ON_VIEWER_SELECTED';
-
- var ScreenTemplateFactory = BB.Controller.extend({
-
- /**
- Constructor
- @method initialize
- **/
- initialize: function () {
- var self = this;
- this.m_owner = self.options.i_owner;
- this.m_myElementID = 'svgScreenLayout' + '_' + _.uniqueId();
- this.m_screenTemplateData = self.options.i_screenTemplateData;
- this.m_selfDestruct = self.options.i_selfDestruct;
- this.m_orientation = self.options.i_screenTemplateData['orientation'];
- this.m_resolution = self.options.i_screenTemplateData['resolution'];
- this.m_screenProps = self.options.i_screenTemplateData['screenProps'];
- this.m_scale = self.options.i_screenTemplateData['scale'];
- this.m_svgWidth = (this.m_resolution.split('x')[0]) / this.m_scale;
- this.m_svgHeight = (this.m_resolution.split('x')[1]) / this.m_scale;
- this.m_useLabels = false;
- },
-
- /**
- Get current selection color depnding on theme of light / daek
- @method _getColor
- @params {String} color
- _getColor: function(){
- if (BB.CONSTS['THEME']=='light')
- return '#428ac9 ';
- return '#eb7c66';
- },
- **/
-
- /**
- Method is called when an entire screen frame of the UI is clicked, in contrast to when a single viewer is selected.
- The difference in dispatch of the event depends on how the factory created this instance.
- @method _onViewSelected
- @param {Event} e
- @param {Object} i_caller
- @return {Boolean} false
- **/
- _onViewSelected: function (e, i_caller) {
- var self = i_caller;
- var element = e.target;
-
- var campaign_timeline_board_viewer_id = $(element).data('campaign_timeline_board_viewer_id');
- var campaign_timeline_id = $(element).data('campaign_timeline_id');
-
- var screenData = {
- sd: $(element).data('sd'),
- elementID: i_caller.m_myElementID,
- owner: i_caller.getOwner(),
- campaign_timeline_board_viewer_id: campaign_timeline_board_viewer_id,
- campaign_timeline_id: campaign_timeline_id,
- screenTemplateData: self.m_screenTemplateData
- };
- self._deselectViewers();
- BB.comBroker.fire(BB.EVENTS.ON_VIEWER_SELECTED, this, screenData);
- },
-
- /**
- Deselect all viewers, thus change their colors back to default.
- @method _deselectViewers
- @return none
- **/
- _deselectViewers: function () {
- var self = this;
- $(Elements.CLASS_SCREEN_DIVISION).each(function () {
- if ($(this).is('rect')) {
- $(this).css({'fill': 'rgb(230,230,230)'});
- }
- });
- },
-
- /**
- When enabled, _mouseOverEffect will highlight viewers when mouse is hovered over them.
- @method _mouseOverEffect
- @return none
- **/
- _mouseOverEffect: function () {
- var self = this;
- var a = $('#' + self.m_myElementID);
- var b = $('#' + self.m_myElementID).find('rect');
- $('#' + self.m_myElementID).find('rect').each(function () {
- $(this).on('mouseover', function () {
- $(this).css({'fill': 'rgb(190,190,190)'});
- }).mouseout(function () {
- $(this).css({'fill': 'rgb(230,230,230)'});
- });
- });
- },
-
- /**
- Get the owner (parent) of this instance, i.e., the one who created this.
- We use the owner attribute as a way to distinguish what type of instance this was created as.
- @method getOwner
- @return {Object} m_owner
- **/
- getOwner: function () {
- var self = this;
- return self.m_owner;
- },
-
- /**
- Create all the screen divisions (aka viewers) as svg snippets and push them into an array
- @method getDivisions
- @return {array} f array of all svg divisions
- **/
- getDivisions: function () {
- var self = this;
- var svg = self.create();
- return $(svg).find('rect');
-
- var f = $(svg).find('rect').map(function (k, v) {
- return '<svg style="padding: 0px; margin: 15px" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg"> ' +
- '<g>' +
- v.outerHTML +
- '</g> ' +
- '</svg>';
- });
- return f;
- },
-
- /**
- Create will produce the actual SVG based Template (screen) with inner viewers and return HTML snippet to the caller.
- @method create
- @return {Object} html element produced by this factory
- **/
- create: function () {
- var self = this;
- var screensDivisons = '';
- var screenLabels = '';
-
- // sort for proper z-order creating the viewers
- var orderedScreenValues = [], i = 0;
- for (var screenValues in self.m_screenProps) {
- var viewOrder = self.m_screenProps[screenValues]['view_order'];
- viewOrder = _.isUndefined(viewOrder) ? i : viewOrder;
- orderedScreenValues[viewOrder] = self.m_screenProps[screenValues];
- i++;
- }
-
- // create the viewers
- i = 0;
- for (var ordered in orderedScreenValues) {
- i++;
- var screenValue = orderedScreenValues[ordered];
- var x = screenValue['x'] == 0 ? 0 : screenValue['x'] / self.m_scale;
- var y = screenValue['y'] == 0 ? 0 : screenValue['y'] / self.m_scale;
- var w = screenValue['w'] == 0 ? 0 : screenValue['w'] / self.m_scale;
- var h = screenValue['h'] == 0 ? 0 : screenValue['h'] / self.m_scale;
- var campaign_timeline_board_viewer_id = screenValue['campaign_timeline_board_viewer_id'];
- var campaign_timeline_id = screenValue['campaign_timeline_id'];
- var sd = screenValues;
-
- var uniqueID = 'rectSD' + '_' + _.uniqueId();
- if (self.m_useLabels == true)
- screenLabels += '<text class="screenDivisionClass"' + '" data-for="' + uniqueID + '" x="' + (x + (w / 2)) + '" y="' + (y + (h / 2)) + '" font-family="sans-serif" font-size="12px" text-anchor="middle" alignment-baseline="middle" fill="#666">' + i + '</text>';
-
- screensDivisons += '<rect id="' + uniqueID +
- '" data-campaign_timeline_board_viewer_id="' + campaign_timeline_board_viewer_id +
- '" data-campaign_timeline_id="' + campaign_timeline_id +
- '" x="' + x +
- '" y="' + y +
- '" width="' + w +
- '" height="' + h +
- '" data-sd="' + sd +
- '" class="screenDivisionClass"' +
- ' style="fill:rgb(230,230,230);stroke-width:2;stroke:rgb(72,72,72)"/>';
- }
- return ($('<svg class="svgSD" id="' + self.m_myElementID + '" width="' + self.m_svgWidth + '" height="' + self.m_svgHeight + '" xmlns="http://www.w3.org/2000/svg"> ' +
- '<g>' +
- screensDivisons +
- screenLabels +
- '</g> ' +
- '</svg>'));
- },
-
- /**
- When enabled, selectableFrame will allow for UI mouse / click of the outer frame of the template (screen) and not
- individual viewers.
- @method selectableFrame
- @return none
- **/
- selectableFrame: function () {
- var self = this;
- var applyToSelected = function (e) {
- $('#' + self.m_myElementID).parent().parent().parent().find('rect').css({'stroke-width': '2', 'stroke': 'rgb(72,72,72)'});
- $('#' + self.m_myElementID).find('rect').css({'stroke-width': '2', 'stroke': BB.lib.getThemeColor()});
- self._onViewSelected(e, self);
- }
- // listen one
- if (self.m_selfDestruct) {
- $(Elements.CLASS_SCREEN_DIVISION, '#' + self.m_myElementID).one('mouseup contextmenu', function (e) {
- applyToSelected(e);
- });
-
- } else {
- // listen on
- $(Elements.CLASS_SCREEN_DIVISION, '#' + self.m_myElementID).on('mouseup contextmenu', function (e) {
- applyToSelected(e);
- });
- }
- },
-
- /**
- The public method version of _deselectViewers, which de-selects all viewers
- @method deselectDivisons
- **/
- deselectDivisons: function () {
- var self = this;
- self._deselectViewers();
- },
-
- /**
- Select a division (aka viewer) using it's viewer_id, only applicable when class represents an actual timelime > board > viewer_id
- @method selectDivison
- @param {Number} i_campaign_timeline_board_viewer_id
- **/
- selectDivison: function (i_campaign_timeline_board_viewer_id) {
- var self = this;
- self._deselectViewers();
- var selectedElement = $('#' + self.m_myElementID).find('[data-campaign_timeline_board_viewer_id="' + i_campaign_timeline_board_viewer_id + '"]');
- $(selectedElement).css({'fill': BB.lib.getThemeColor()});
- },
-
- /**
- Release all members to allow for garbage collection.
- @method destroy
- @return none
- **/
- destroy: function () {
- var self = this;
- $(Elements.CLASS_SCREEN_DIVISION).off('click contextmenu', function (e) {
- self._onViewSelected(e, self);
- });
- $(this).off('mouseover', function () {
- $(this).css({'fill': 'rgb(190,190,190)'});
- }).mouseout(function () {
- $(this).css({'fill': 'rgb(230,230,230)'});
- });
- $.each(self, function (k) {
- self[k] = undefined;
- });
- }
- });
-
- return ScreenTemplateFactory;
-
- });
-