/** * Viewport.js * * This is out main controller which will do most of job * It will listen for view and collection events and manage all data-related operations * * Created by Alexander Yuzhin on 1/15/14 * Copyright (c) 2014 Ascensio System SIA. All rights reserved. * */ define([ 'core', 'common/main/lib/view/Header', 'documenteditor/main/app/view/Viewport', 'documenteditor/main/app/view/LeftMenu' ], function (Viewport) { 'use strict'; DE.Controllers.Viewport = Backbone.Controller.extend({ // Specifying a Viewport model models: [], // Specifying a collection of out Viewport collections: [], // Specifying application views views: [ 'Viewport', // is main application layout 'Common.Views.Header' ], // When controller is created let's setup view event listeners initialize: function() { // This most important part when we will tell our controller what events should be handled }, setApi: function(api) { this.api = api; }, // When our application is ready, lets get started onLaunch: function() { // Create and render main view this.viewport = this.createView('Viewport').render(); this.header = this.createView('Common.Views.Header', { headerCaption: 'Document Editor' }).render(); Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this)); $(window).on('resize', _.bind(this.onWindowResize, this)); var leftPanel = $('#left-menu'), histPanel = $('#left-panel-history'); this.viewport.hlayout.on('layout:resizedrag', function() { this.api.Resize(); Common.localStorage.setItem('de-mainmenu-width', histPanel.is(':visible') ? (histPanel.width()+SCALE_MIN) : leftPanel.width() ); }, this); this.boxSdk = $('#editor_sdk'); this.boxSdk.css('border-left', 'none'); }, onLayoutChanged: function(area) { switch (area) { default: this.viewport.vlayout.doLayout(); case 'rightmenu': this.viewport.hlayout.doLayout(); break; case 'history': var panel = this.viewport.hlayout.items[1]; if (panel.resize.el) { this.boxSdk.css('border-left', ''); panel.resize.el.show(); } this.viewport.hlayout.doLayout(); break; case 'leftmenu': var panel = this.viewport.hlayout.items[0]; if (panel.resize.el) { if (panel.el.width() > 40) { this.boxSdk.css('border-left', ''); panel.resize.el.show(); } else { panel.resize.el.hide(); this.boxSdk.css('border-left', '0 none'); } } this.viewport.hlayout.doLayout(); break; case 'header': case 'toolbar': case 'status': this.viewport.vlayout.doLayout(); break; } this.api.Resize(); }, onWindowResize: function(e) { this.onLayoutChanged('window'); } }); });