/** * StatusBar View * * Created by Maxim Kadushkin on 27 March 2014 * Copyright (c) 2014 Ascensio System SIA. All rights reserved. * */ define([ 'text!spreadsheeteditor/main/app/template/StatusBar.template', 'tip', 'common/main/lib/component/TabBar', 'common/main/lib/component/Menu', 'common/main/lib/component/Window', 'common/main/lib/component/ThemeColorPalette' ], function(template){ 'use strict'; if (SSE.Views.Statusbar) { var RenameDialog = SSE.Views.Statusbar.RenameDialog; var CopyDialog = SSE.Views.Statusbar.CopyDialog; } SSE.Views.Statusbar = Common.UI.BaseView.extend(_.extend({ el: '#statusbar', template: _.template(template), storeUsers: undefined, tplUser: ['
  • " class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">', '
    ;" >', '', '
    ', '
  • '].join(''), templateUserList: _.template(''), events: function() { return { 'click #status-btn-tabfirst': _.bind(this.onBtnTabScroll, this, 'first'), 'click #status-btn-tabback': _.bind(this.onBtnTabScroll, this, 'backward'), 'click #status-btn-tabnext': _.bind(this.onBtnTabScroll, this, 'forward'), 'click #status-btn-tablast': _.bind(this.onBtnTabScroll, this, 'last') }; }, api: undefined, initialize: function (options) { _.extend(this, options); }, render: function () { var me = this; $(this.el).html(this.template({ scope: this })); this.editMode = false; this.btnZoomDown = new Common.UI.Button({ el: $('#status-btn-zoomdown',this.el), hint: this.tipZoomOut+' (Ctrl+-)', hintAnchor: 'top' }); this.btnZoomUp = new Common.UI.Button({ el: $('#status-btn-zoomup',this.el), hint: this.tipZoomIn+' (Ctrl++)', hintAnchor: 'top-right' }); this.btnScrollFirst = new Common.UI.Button({ el: $('#status-btn-tabfirst',this.el), hint: this.tipFirst, disabled: true, hintAnchor: 'top' }); this.btnScrollBack = new Common.UI.Button({ el: $('#status-btn-tabback',this.el), hint: this.tipPrev, disabled: true, hintAnchor: 'top' }); this.btnScrollNext = new Common.UI.Button({ el: $('#status-btn-tabnext',this.el), hint: this.tipNext, disabled: true, hintAnchor: 'top' }); this.btnScrollLast = new Common.UI.Button({ el: $('#status-btn-tablast',this.el), hint: this.tipLast, disabled: true, hintAnchor: 'top' }); this.btnAddWorksheet = new Common.UI.Button({ el: $('#status-btn-addtab',this.el), hint: this.tipAddTab, disabled: true, hintAnchor: 'top' }); this.cntZoom = new Common.UI.Button({ el: $('.cnt-zoom',this.el), hint: this.tipZoomFactor, hintAnchor: 'top' }); this.cntZoom.cmpEl.on({ 'show.bs.dropdown': function () { _.defer(function(){ me.api.asc_enableKeyEvents(false); me.cntZoom.cmpEl.find('ul').focus(); }, 100); }, 'hide.bs.dropdown': function () { _.defer(function(){ me.api.asc_enableKeyEvents(true); }, 100); } }); this.zoomMenu = new Common.UI.Menu({ style: 'margin-top:-5px;', menuAlign: 'bl-tl', items: [ { caption: "50%", value: 50 }, { caption: "75%", value: 75 }, { caption: "100%", value: 100 }, { caption: "125%", value: 125 }, { caption: "150%", value: 150 }, { caption: "175%", value: 175 }, { caption: "200%", value: 200 } ] }); this.zoomMenu.render($('.cnt-zoom',this.el)); this.zoomMenu.cmpEl.attr({tabindex: -1}); this.labelZoom = $('#status-label-zoom',this.$el); /** coauthoring begin **/ this.panelUsersList = $('#status-users-list', this.el); this.storeUsers.bind({ add : _.bind(this._onAddUser, this), change : _.bind(this._onUsersChanged, this), reset : _.bind(this._onResetUsers, this) }); this.panelUsers = $('#status-users-ct', this.el); this.panelUsers.on('shown.bs.dropdown', function () { me.panelUsersList.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true}); }); this.panelUsersBlock = this.panelUsers.find('#status-users-block'); this.panelUsersBlock.tooltip({ title: this.tipAccessRights, html: true, placement: 'top' }); this.panelUsersBlock.on('click', _.bind(this.onUsersClick, this)); this.lblUserCount = this.panelUsers.find('#status-users-count'); this.lblChangeRights = this.panelUsers.find('#status-change-rights'); this.lblChangeRights.on('click', _.bind(this.onUsersClick, this)); this.$el.find('#status-users-menu').on('click', function() { return false; }); /** coauthoring end **/ this.tabBarBox = $('#status-sheets-bar-box', this.el); this.tabbar = new Common.UI.TabBar({ el: '#status-sheets-bar', placement: 'bottom', draggable: false }).render(); this.tabbar.on({ 'tab:invisible' : _.bind(this.onTabInvisible, this), 'tab:changed' : _.bind(this.onSheetChanged, this), //'tab:manual' : _.bind(this.onAddTabClick, this), 'tab:contextmenu' : _.bind(this.onTabMenu, this), 'tab:dblclick' : _.bind(function () { if (me.editMode && (me.rangeSelectionMode !== c_oAscSelectionDialogType.Chart) && (me.rangeSelectionMode !== c_oAscSelectionDialogType.FormatTable)) { me.fireEvent('sheet:changename'); } }, this), 'tab:move' : _.bind(function (tabIndex, index) { me.tabBarScroll = {scrollLeft: me.tabbar.scrollX}; if (_.isUndefined(index) || tabIndex === index) { return; } if (tabIndex < index) { ++index; } me.fireEvent('sheet:move', [false, true, tabIndex, index]); }, this) }); var menuHiddenItems = new Common.UI.Menu({ menuAlign: 'tl-tr' }); menuHiddenItems.on('item:click', function(obj,item,e) { me.fireEvent('show:hidden', [me, item.value]); }); var menuColorItems = new Common.UI.Menu({ menuAlign: 'tl-tr', cls: 'color-tab', items: [ { template: _.template('
    ') }, { template: _.template('' + me.textNewColor + '') } ] }); function dummyCmp() { return { isDummy : true, on : function() {} } } me.mnuTabColor = dummyCmp(); this.tabMenu = new Common.UI.Menu({ menuAlign: 'bl-tl', items: [ {caption: this.itemInsert, value: 'ins'}, {caption: this.itemDelete, value: 'del'}, {caption: this.itemRename, value: 'ren'}, {caption: this.itemCopy, value: 'copy'}, {caption: this.itemMove, value: 'move'}, {caption: this.itemHide, value: 'hide'}, { caption: this.itemHidden, menu: menuHiddenItems }, { caption: this.itemTabColor, menu: menuColorItems } ] }).on('render:after', function(btn) { var colorVal = $('
    '); $('button:first-child', btn.cmpEl).append(colorVal); colorVal.css('background-color', btn.currentColor || 'transparent'); me.mnuTabColor = new Common.UI.ThemeColorPalette({ el: $('#id-tab-menu-color'), dynamiccolors: 10, colors: [ me.textThemeColors, '-', {color: '3366FF', effectId: 1}, {color: '0000FF', effectId: 2}, {color: '000090', effectId: 3}, {color: '660066', effectId: 4}, {color: '800000', effectId: 5}, {color: 'FF0000', effectId: 1}, {color: 'FF6600', effectId: 1}, {color: 'FFFF00', effectId: 2}, {color: 'CCFFCC', effectId: 3}, {color: '008000', effectId: 4}, '-', {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2}, {color: '000000', effectId: 3}, {color: 'FFFFFF', effectId: 4}, {color: '000000', effectId: 5}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, '-', '--', '-', me.textStandartColors, '-', 'transparent', '5301B3', '980ABD', 'B2275F', 'F83D26', 'F86A1D', 'F7AC16', 'F7CA12', 'FAFF44', 'D6EF39', '-', '--' ] }); me.mnuTabColor.on('select', function(picker, color) { me.fireEvent('sheet:setcolor', [color]); }); }); this.tabbar.$el.append('