- /**
- Application router and layout router responsible for kick starting the application as
- well as management for sizing events
- @class LayoutRouter
- @constructor
- @return {Object} instantiated AppRouter
- **/
- define(['underscore', 'jquery', 'backbone', 'AppAuth', 'NavigationView', 'AppEntryFaderView', 'LoginView', 'AppContentFaderView', 'WaitView', 'LivePreView', 'bootbox', 'CampaignManagerView', 'ResourcesLoaderView', 'ResourcesLoaderView', 'StationsViewLoader', 'SettingView', 'FQLoaderView', 'AdStatsLoaderView', 'ProStudioView', 'HelpView', 'InstallView', 'LogoutView', 'CampaignSliderStackView', 'ScreenLayoutSelectorView', 'X2JS', 'XDate', 'LanguageSelectorView', 'SceneLoaderView', 'DashboardView'],
- function (_, $, Backbone, AppAuth, NavigationView, AppEntryFaderView, LoginView, AppContentFaderView, WaitView, LivePreView, Bootbox, CampaignManagerView, ResourcesLoaderView, ResourcesLoaderView, StationsViewLoader, SettingView, FQLoaderView, AdStatsLoaderView, ProStudioView, HelpView, InstallView, LogoutView, CampaignSliderStackView, ScreenLayoutSelectorView, X2JS, XDate, LanguageSelectorView, SceneLoaderView, DashboardView) {
-
- BB.SERVICES.LAYOUT_ROUTER = 'LayoutRouter';
-
- /**
- Event fired when app resized
- @event APP_SIZED
- @static
- @final
- **/
- BB.EVENTS.APP_SIZED = 'APP_SIZED';
-
- var LayoutRouter = BB.Router.extend({
-
- /**
- Constructor
- @method initialize
- **/
- initialize: function () {
- var self = this;
- BB.comBroker.setService(BB.SERVICES['LAYOUT_ROUTER'], self);
-
- // global x2j required by pepper
- window.x2js = new X2JS({
- escapeMode: true,
- attributePrefix: "_",
- arrayAccessForm: "none",
- emptyNodeForm: "text",
- enableToStringFunc: true,
- arrayAccessFormPaths: [],
- skipEmptyTextNodesForObj: true
- });
- BB.comBroker.setService('compX2JS', window.x2js);
- BB.comBroker.setService('XDATE', new XDate());
- self._initLoginPage();
- self._listenLogoHover();
- self._listenSizeChanges();
- self.m_authenticating = false;
-
- $(window).trigger('resize');
- $('[data-toggle="tooltip"]').tooltip({'placement': 'bottom', 'delay': 1000});
- },
-
- /**
- Router definition to function maps
- @method routes
- **/
- routes: {
- "app": "_routeApp",
- "authenticate/:user/:pass": "_routeAuthenticate",
- "authenticating": "_routeAuthenticating",
- "authenticated": "_routeAuthenticated",
- "unauthenticated": "_routeUnauthenticated",
- "authenticationFailed": "_routeAuthenticationFailed"
- },
-
- /**
- Initiate user credential route authentication
- @method authenticate
- @param {String} i_user
- @param {String} i_pass
- **/
- _routeAuthenticate: function (i_user, i_pass) {
- var self = this;
- if (self.m_authenticating)
- return;
- this.m_appAuth.authenticate(i_user, i_pass);
- },
-
- /**
- In process of route authentication
- @method authenticating
- **/
- _routeAuthenticating: function () {
- var self = this;
- self.m_authenticating = true;
- this.m_appEntryFaderView.selectView(this.m_mainAppWaitView);
- },
-
- /**
- Authentication passed, load app page route
- @method authenticating
- **/
- _routeAuthenticated: function () {
- var self = this;
- self.m_authenticating = false;
- this.navigate('app', {trigger: true});
- self._updateLayoutDelay();
- },
-
- /**
- No authentication passed, load Login page route
- @method authenticating
- **/
- _routeUnauthenticated: function () {
- var self = this;
- self.m_authenticating = false;
- this.m_appEntryFaderView.selectView(this.m_loginView);
- },
-
- /**
- Failed user authentication route
- @method authenticationFailed
- **/
- _routeAuthenticationFailed: function () {
- var self = this;
- self.m_authenticating = false;
- Bootbox.dialog({
- message: $(Elements.MSG_BOOTBOX_WRONG_USER_PASS).text(),
- title: $(Elements.MSG_BOOTBOX_PROBLEM).text(),
- buttons: {
- danger: {
- label: $(Elements.MSG_BOOTBOX_OK).text(),
- className: "btn-danger",
- callback: function () {
- }
- }
- }
- });
- this.m_appEntryFaderView.selectView(this.m_loginView);
- },
-
- /**
- On successful authentication load main application StackViews per this route App
- @method app
- **/
- _routeApp: function () {
- var self = this;
- if (this.m_appAuth.authenticated) {
- this._disableBack();
- this._initContentPage();
- this._initProperties();
- this._initCampaignWizardPage();
- this._initModal();
- this._initDashBoard();
- this._initCustomer();
- pepper.injectPseudoScenePlayersIDs();
- } else {
- this.navigate('unauthenticated', {trigger: true});
- }
- },
-
- /**
- Create two StackView views: AppEntryFaderView and AppContentFaderView
- AppEntryFaderView allows for page selection between login page and main app content page
- AppContentFaderView serves as dual purpose view. On one hand it serves as simple show/hide div for main login page / content page,
- on the other hand it itself is a StackView.Fader that allows for show/hide between main content sections including campaigns,
- stations, resources, settings etc
- @method _initLoginPage
- **/
- _initLoginPage: function () {
-
- this.m_appAuth = new AppAuth();
-
- this.m_appEntryFaderView = new AppEntryFaderView({
- el: Elements.APP_ENTRY,
- duration: 500
- });
-
- this.m_appContentFaderView = new AppContentFaderView({
- el: Elements.APP_CONTENT,
- duration: 650
- });
-
- this.m_loginView = new LoginView({
- el: Elements.APP_LOGIN
- });
-
- this.m_loginView = new LoginView({
- el: Elements.APP_LOGIN
- });
-
- this.m_livePreview = new LivePreView({
- el: Elements.LIVE_PREVIEW
- });
-
- this.m_mainAppWaitView = new WaitView({
- el: Elements.WAITS_SCREEN_ENTRY_APP
- });
-
- this.m_logoutView = new BB.View({
- el: Elements.APP_LOGOUT
- });
-
- this.m_appEntryFaderView.addView(this.m_loginView);
- this.m_appEntryFaderView.addView(this.m_logoutView);
- this.m_appEntryFaderView.addView(this.m_livePreview);
- // this.m_appEntryFaderView.addView(this.m_fasterQTermRegistration);
- this.m_appEntryFaderView.addView(this.m_appContentFaderView);
- this.m_appEntryFaderView.addView(this.m_mainAppWaitView);
-
- BB.comBroker.setService(BB.SERVICES['APP_AUTH'], this.m_appAuth);
- BB.comBroker.setService(BB.SERVICES['APP_ENTRY_FADER_VIEW'], this.m_appEntryFaderView);
- BB.comBroker.setService(BB.SERVICES['APP_CONTENT_FADER_VIEW'], this.m_appContentFaderView);
- },
-
- /**
- Update the general dashboard with stats
- @method Update
- **/
- _initDashBoard: function () {
- $(Elements.SERVER_NAME).text(pepper.getUserData().domain);
- $(Elements.BUISINESS_ID).text(pepper.getUserData().businessID);
- $(Elements.CLASS_USER_NAME).text(pepper.getUserData().userName);
- },
-
- /**
- Setup customer account
- @method _initCustomer
- **/
- _initCustomer: function () {
- var self = this;
- if (pepper.getUserData().resellerID == 1 || pepper.getUserData().whiteLabel == 0) {
- $(Elements.CLASS_RES_HID).fadeIn();
- } else {
- $(Elements.APP_NAME).text(pepper.getUserData().resellerName);
- $(Elements.CLASS_RES_HID).remove();
- }
- },
-
- /**
- Use the previously created m_appContentFaderView to add list of views including campaign, stations, logout etc
- so navigation can be switched between each content div. Also we create one special view called
- CampaignSliderStackView that it itself is a StackView.Slider that will later allow for Campaign wizard slider animated selections.
- @method _initContentPage
- **/
- _initContentPage: function () {
- var self = this;
- self.m_navigationView = new NavigationView({
- el: Elements.FILE_MENU
- });
-
- self.m_campaignManagerView = new CampaignManagerView({
- el: Elements.CAMPAIGN_MANAGER_VIEW
- });
-
- self.m_campaignSliderStackView = new CampaignSliderStackView({
- el: Elements.CAMPAIGN_SLIDER
- });
-
- self.m_ResourcesLoaderView = new ResourcesLoaderView({
- el: Elements.RESOURCES_PANEL,
- stackView: self.m_appContentFaderView
- });
-
- self.m_stationsViewLoader = new StationsViewLoader({
- el: Elements.STATIONS_PANEL,
- stackView: self.m_appContentFaderView
- });
-
- self.m_sceneLoaderView = new SceneLoaderView({
- el: Elements.SCENES_PANEL,
- stackView: self.m_appContentFaderView
- });
-
- self.m_settingsView = new SettingView({
- el: Elements.SETTINGS_PANEL,
- stackView: self.m_appContentFaderView
- });
-
- self.m_fasterQLoaderView = new FQLoaderView({
- el: Elements.FASTERQ_PANEL,
- stackView: self.m_appContentFaderView
- });
-
- self.m_adStatsLoaderView = new AdStatsLoaderView({
- el: Elements.AD_STATS_PANEL,
- stackView: self.m_appContentFaderView
- });
-
- self.m_proStudioView = new ProStudioView({
- el: Elements.PRO_STUDIO_PANEL,
- stackView: self.m_appContentFaderView
- });
-
- self.m_helpView = new HelpView({
- el: Elements.HELP_PANEL,
- stackView: this.m_appContentFaderView
- });
-
- self.m_installView = new InstallView({
- el: Elements.INSTALL_PANEL,
- stackView: this.m_appContentFaderView
- });
-
- this.m_logoutView = new LogoutView({
- el: Elements.LOGOUT_PANEL,
- stackView: self.m_appContentFaderView
- });
-
- self.m_appContentFaderView.addView(self.m_campaignManagerView);
- self.m_appContentFaderView.addView(self.m_ResourcesLoaderView);
- self.m_appContentFaderView.addView(self.m_stationsViewLoader);
- self.m_appContentFaderView.addView(self.m_sceneLoaderView);
- self.m_appContentFaderView.addView(self.m_settingsView);
- self.m_appContentFaderView.addView(self.m_fasterQLoaderView);
- self.m_appContentFaderView.addView(self.m_adStatsLoaderView);
- self.m_appContentFaderView.addView(self.m_proStudioView);
- self.m_appContentFaderView.addView(self.m_helpView);
- self.m_appContentFaderView.addView(self.m_installView);
- self.m_appContentFaderView.addView(self.m_logoutView);
- // self.m_appContentFaderView.selectView(self.m_fasterQLoaderView); // debug mode
- self.m_appContentFaderView.selectView(self.m_campaignManagerView);
-
- BB.comBroker.setService(BB.SERVICES['NAVIGATION_VIEW'], self.m_navigationView);
- },
-
- /**
- Use the previously created CampaignSliderStackView to add new views for campaign wizard slider animation which include
- CampaignSelector, Screen Orientation, Screen Resolution and Campaign
- @method _initCampaignWizardPage
- **/
- _initCampaignWizardPage: function () {
- var self = this;
-
- require(['CampaignSelectorView', 'OrientationSelectorView', 'ResolutionSelectorView', 'CampaignView', 'CampaignNameSelectorView', 'AddBlockView', 'AddBlockLocationView', 'ScreenLayoutEditorView'], function (CampaignSelectorView, OrientationSelectorView, ResolutionSelectorView, CampaignView, CampaignNameSelectorView, AddBlockView, AddBlockLocationView, ScreenLayoutEditorView) {
-
- self.m_campaignSelectorView = new CampaignSelectorView({
- stackView: self.m_campaignSliderStackView,
- from: Elements.CAMPAIGN,
- el: Elements.CAMPAIGN_SELECTOR,
- to: Elements.CAMPAIGN_NAME_SELECTOR_VIEW
- });
- BB.comBroker.setService(BB.SERVICES.CAMPAIGN_SELECTOR, self.m_campaignSelectorView);
-
- self.m_campaignNameSelectorView = new CampaignNameSelectorView({
- stackView: self.m_campaignSliderStackView,
- from: Elements.CAMPAIGN_SELECTOR,
- el: Elements.CAMPAIGN_NAME_SELECTOR_VIEW,
- to: Elements.ORIENTATION_SELECTOR
- });
- BB.comBroker.setService(BB.SERVICES.CAMPAIGN_NAME_SELECTOR_VIEW, self.m_campaignNameSelectorView);
-
- self.m_orientationSelectorView = new OrientationSelectorView({
- stackView: self.m_campaignSliderStackView,
- from: Elements.CAMPAIGN_NAME_SELECTOR_VIEW,
- el: Elements.ORIENTATION_SELECTOR,
- to: Elements.RESOLUTION_SELECTOR,
- model: new BB.Model({screenOrientation: null})
- });
- BB.comBroker.setService(BB.SERVICES.ORIENTATION_SELECTOR_VIEW, self.m_orientationSelectorView);
-
- self.m_resolutionSelectorView = new ResolutionSelectorView({
- stackView: self.m_campaignSliderStackView,
- from: Elements.ORIENTATION_SELECTOR,
- el: Elements.RESOLUTION_SELECTOR,
- to: Elements.SCREEN_LAYOUT_SELECTOR,
- model: new BB.Model({screenResolution: null})
- });
- BB.comBroker.setService(BB.SERVICES.RESOLUTION_SELECTOR_VIEW, self.m_resolutionSelectorView);
-
- self.m_screenLayoutSelectorView = new ScreenLayoutSelectorView({
- stackView: self.m_campaignSliderStackView,
- from: Elements.RESOLUTION_SELECTOR,
- el: Elements.SCREEN_LAYOUT_SELECTOR,
- to: Elements.CAMPAIGN,
- model: new BB.Model({screenLayout: null})
- });
- BB.comBroker.setService(BB.SERVICES.SCREEN_LAYOUT_SELECTOR_VIEW, self.m_screenLayoutSelectorView);
-
- self.m_campaignView = new CampaignView({
- stackView: self.m_campaignSliderStackView,
- from: Elements.SCREEN_LAYOUT_SELECTOR,
- el: Elements.CAMPAIGN,
- to: Elements.ADD_BLOCK_ELEM_VIEW
- });
- BB.comBroker.setService(BB.SERVICES.CAMPAIGN_VIEW, self.m_campaignView);
-
- self.m_addBlockView = new AddBlockView({
- stackView: self.m_campaignSliderStackView,
- from: Elements.CAMPAIGN,
- el: Elements.ADD_BLOCK_ELEM_VIEW,
- to: Elements.CAMPAIGN_SELECTOR,
- placement: BB.CONSTS.PLACEMENT_CHANNEL
- });
- BB.comBroker.setService(BB.SERVICES.ADD_BLOCK_VIEW, self.m_addBlockView);
-
- self.m_addBlockLocationView = new AddBlockLocationView({
- stackView: self.m_campaignSliderStackView,
- from: Elements.CAMPAIGN,
- el: Elements.GOOGLE_MAPS_LOCATION,
- to: Elements.CAMPAIGN_SELECTOR,
- placement: BB.CONSTS.PLACEMENT_CHANNEL
- });
- BB.comBroker.setService(BB.SERVICES.ADD_BLOCK_LOCATION_VIEW, self.m_addBlockLocationView);
-
- self.m_screenLayoutEditorView = new ScreenLayoutEditorView({
- stackView: self.m_campaignSliderStackView,
- from: Elements.CAMPAIGN,
- el: Elements.SCREEN_LAYOUT_EDITOR_VIEW,
- to: Elements.CAMPAIGN_SELECTOR
- });
-
- self.m_campaignSliderStackView.addView(self.m_campaignSelectorView);
- self.m_campaignSliderStackView.addView(self.m_campaignNameSelectorView);
- self.m_campaignSliderStackView.addView(self.m_orientationSelectorView);
- self.m_campaignSliderStackView.addView(self.m_resolutionSelectorView);
- self.m_campaignSliderStackView.addView(self.m_screenLayoutSelectorView);
- self.m_campaignSliderStackView.addView(self.m_campaignView);
- self.m_campaignSliderStackView.addView(self.m_addBlockView);
- //self.m_campaignSliderStackView.addView(self.m_addBlockListsView);
- self.m_campaignSliderStackView.selectView(self.m_campaignSelectorView);
- });
-
- this.m_appEntryFaderView.selectView(this.m_appContentFaderView);
- },
-
- /**
- Create properties panel view
- @method _initProperties
- **/
- _initProperties: function () {
- require(['PropertiesView', 'bootstrapselect'], function (PropertiesView, bootstrapselect) {
-
- // enable bootstrap enhanced dropdown selection
- $('.selectpicker').selectpicker({width: '90%'});
-
- this.m_propertiesView = new PropertiesView({
- el: Elements.PROP_PANEL,
- duration: 300
- });
-
- this.m_dashboardPropView = new DashboardView({
- el: Elements.DASHBOARD_PROPERTIES
- });
-
- self.m_propertiesView.addView(this.m_dashboardPropView);
- self.m_propertiesView.selectView(this.m_dashboardPropView);
- BB.comBroker.setService(BB.SERVICES.PROPERTIES_VIEW, this.m_propertiesView);
- });
- },
-
- /**
- Create a popup modal view that's used for About Us and properties content on small screens
- @method _initModal
- **/
- _initModal: function () {
- var self = this;
- require(['PopModalView'], function (PopModalView) {
- var popModalView = new PopModalView({
- el: Elements.POP_MODAL,
- animation: 'slide_top', //or 'fade'
- bgColor: 'white'
- });
- self.m_popUpProperties = new BB.View({el: Elements.POPUP_PROPERTIES});
- popModalView.addView(self.m_popUpProperties);
-
- self.m_popUpAboutUs = new BB.View({el: Elements.ABOUT_US});
- popModalView.addView(self.m_popUpAboutUs);
-
- self.m_popUpWait = new BB.View({el: Elements.STACK_WAIT_MODAL_VIEW});
- popModalView.addView(self.m_popUpWait);
-
- BB.comBroker.setService(BB.SERVICES.POP_MODAL_VIEW, popModalView);
- });
- },
-
- /**
- Listen logo mouse hover
- @method _listenLogoHover
- **/
- _listenLogoHover: function () {
- $('.flip').mouseenter(function () {
- $(this).find('.card').addClass('flipped').mouseleave(function () {
- $(this).removeClass('flipped');
- });
- return false;
- });
- },
-
- /**
- Listen to application size changes and lazy update when so
- @method _listenSizeChanges
- **/
- _listenSizeChanges: function () {
- var self = this;
- if (BB.lib.isMobile()) {
- $(window).one('resize', self._updateLayout);
- $(window).bind('orientationchange', function (e) {
- // log(window.orientation); // 0 = portrait; 90 = landscape left; -90 = landscape right
- self._updateLayoutDelay();
- });
- } else {
- var lazyLayout = _.debounce(self._updateLayout, 150);
- $(window).resize(lazyLayout);
- self._updateLayoutDelay();
- }
- },
-
- _updateLayoutDelay: function () {
- var self = this;
- setTimeout(function () {
- self._updateLayout();
- }, 1500);
- },
-
- /**
- Update key element height changes on size change and notify event subscribers
- @method _updateLayout
- **/
- _updateLayout: function () {
- var self = BB.comBroker.getService(BB.SERVICES['LAYOUT_ROUTER']);
- var b = $('body');
- self._appHeight = parseInt(b.css('height').replace('px', ''));
- self._appWidth = parseInt(b.css('width').replace('px', ''));
- var h = self._appHeight - 115; // reduce footer
-
- $(Elements.PROP_PANEL_WRAP).height(h);
- $(Elements.MAIN_PANEL_WRAP).height(h);
- $(Elements.APP_NAVIGATOR).height(h);
- $(Elements.RESOURCE_LIB_LIST_WRAP).height(h - 40);
- $(Elements.PRICING_TABLE_WRAP).height(h - 200);
- $(Elements.BLOCK_SUBPROPERTIES).height(h - 200);
- $(Elements.BLOCK_COMMON_PROPERTIES).height(h - 200);
- $(Elements.BLOCK_COMMON_SETTINGS).height(h - 200);
- $(Elements.CLASS_ADD_NEW_BLOCK_LIST_WRAP).height(h);
- $(Elements.IFRAME_PREVIEW).height(h - 40);
- $(Elements.DASHBOARD_PROPERTIES).height(h - 30);
- $(Elements.SCENE_SELECTOR_LIST).height(h - 40);
- $(Elements.SCENE_CANVAS_CONTAINER).height(h - 150);
- $(Elements.CAMPAIGN_SELECTOR_LIST).height(h - 150);
- $(Elements.STATION_LIST_VIEW).height(h - 150);
- $(Elements.STATION_PROPERTIES).height(h - 50);
- $(Elements.FASTERQ_LINES_CONTAINER).height(h - 180);
- $(Elements.SCENE_CREATOR).height(h - 40);
- $(Elements.SELECT_SCENE_TYPE_CREATE_TEMPLATE).height(h - 40);
-
- BB.comBroker.fire(BB.EVENTS.APP_SIZED, this, null, {width: self._appWidth, height: self._appHeight});
- },
-
- /**
- Disable browser back button
- @method disableBack
- **/
- _disableBack: function () {
- var self = this;
- window.location.hash = "start_";
- window.location.hash = "Again-start_";//for google chrome
- window.onhashchange = function () {
- window.location.hash = "start_";
- }
- },
-
- /**
- Get latest registered app width
- @return {Number} width
- **/
- getAppWidth: function () {
- return this._appWidth;
- },
-
- /**
- Get latest registered app height
- @return {Number} height
- **/
- getAppHeight: function () {
- return this._appHeight;
- }
- });
-
- return LayoutRouter;
- });
-