328 lines
13 KiB
JavaScript
328 lines
13 KiB
JavaScript
/*
|
|
*
|
|
* (c) Copyright Ascensio System SIA 2010-2019
|
|
*
|
|
* This program is a free software product. You can redistribute it and/or
|
|
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
|
* version 3 as published by the Free Software Foundation. In accordance with
|
|
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
|
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
|
* of any third-party rights.
|
|
*
|
|
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
|
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
|
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
|
*
|
|
* You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
|
|
* street, Riga, Latvia, EU, LV-1050.
|
|
*
|
|
* The interactive user interfaces in modified source and object code versions
|
|
* of the Program must display Appropriate Legal Notices, as required under
|
|
* Section 5 of the GNU AGPL version 3.
|
|
*
|
|
* Pursuant to Section 7(b) of the License you must retain the original Product
|
|
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
|
* grant you any rights under trademark law for use of our trademarks.
|
|
*
|
|
* All the Product's GUI elements, including illustrations and icon sets, as
|
|
* well as technical writing content are licensed under the terms of the
|
|
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
|
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
|
*
|
|
*/
|
|
/**
|
|
* StatusBar View
|
|
*
|
|
* Created by Maxim Kadushkin on 11/28/2016
|
|
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
|
|
*
|
|
*/
|
|
|
|
define([
|
|
'core',
|
|
'underscore'
|
|
, 'common/mobile/utils/utils'
|
|
],
|
|
function(core){
|
|
'use strict';
|
|
|
|
SSE.Views.Statusbar = Backbone.View.extend((function(){
|
|
function tabVisible(t) {
|
|
var leftbound = arguments[1] || this.$boxTabs.offset().left,
|
|
rightbound = arguments[2] || (leftbound + this.$boxTabs.width()),
|
|
tab;
|
|
|
|
if ( typeof t == 'number' ) {
|
|
if ( !(t < 0) && t < this.$boxTabs.children().length ) {
|
|
tab = this.$boxTabs.children().eq(t);
|
|
}
|
|
} else {
|
|
tab = t.get('el');
|
|
}
|
|
|
|
if ( tab ) {
|
|
var rect = tab.get(0).getBoundingClientRect();
|
|
return !(rect.left < leftbound) && !(rect.right > rightbound);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
function setTabVisible(tab) {
|
|
var _sheets = SSE.getCollection('Sheets');
|
|
|
|
if ( typeof tab == 'object' ) {
|
|
if ( tab == _sheets.first() ) tab = 'first'; else
|
|
if ( tab == _sheets.last() ) tab = 'last';
|
|
} else
|
|
if ( typeof tab == 'number' ) {
|
|
if ( !(tab > 0) ) tab = 'first'; else
|
|
if ( !(tab + 1 < _sheets.size()) ) tab = 'last';
|
|
else tab = _sheets.at(tab);
|
|
}
|
|
|
|
if (tab <= 0 || tab == 'first') {
|
|
this.$boxTabs.scrollLeft(0);
|
|
} else
|
|
if ( tab == 'last' || tab >= (_sheets.size() - 1) ) {
|
|
this.$boxTabs.scrollLeft(10000);
|
|
} else {
|
|
var $el = tab.get('el');
|
|
if ( $el ) {
|
|
var rightbound = this.$boxTabs.width();
|
|
var left = $el.position().left,
|
|
right = left + parseInt($el.css('width'));
|
|
|
|
if (left < 0) {
|
|
this.$boxTabs.scrollLeft(/*this.$boxTabs.scrollLeft() + */left - 26);
|
|
} else if (right > rightbound) {
|
|
this.$boxTabs.scrollLeft(/*this.$boxTabs.scrollLeft() + */(right - rightbound) + 20);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function hasInvisible() {
|
|
var _sheets = SSE.getCollection('Sheets');
|
|
|
|
var _left_bound_ = this.$boxTabs.offset().left,
|
|
_right_bound_ = _left_bound_ + this.$boxTabs.width();
|
|
|
|
var tab = _sheets.first().get('el');
|
|
var rect = tab.get(0).getBoundingClientRect();
|
|
|
|
if ( !(rect.left < _left_bound_) ) {
|
|
tab = _sheets.last().get('el');
|
|
rect = tab.get(0).getBoundingClientRect();
|
|
|
|
if ( !(rect.right > _right_bound_) )
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
var touch = {};
|
|
function onTouchStart(e) {
|
|
if ( hasInvisible.call(this) )
|
|
{
|
|
var touches = e.originalEvent.changedTouches;
|
|
touch.startx = touches[0].clientX;
|
|
touch.scrollx = this.$boxTabs.scrollLeft();
|
|
|
|
touch.timer = setTimeout(function () {
|
|
// touch.longtouch = true;
|
|
}, 500);
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
function onTouchMove(e) {
|
|
if ( touch.startx !== undefined ) {
|
|
var touches = e.originalEvent.changedTouches;
|
|
|
|
if ( touch.longtouch ) {}
|
|
else {
|
|
if ( touch.timer ) clearTimeout(touch.timer), delete touch.timer;
|
|
this.$boxTabs.scrollLeft(touch.scrollx + (touch.startx - touches[0].clientX));
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
function onTouchEnd(e) {
|
|
if ( touch.startx !== undefined ) {
|
|
touch.longtouch = false;
|
|
delete touch.startx;
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
return {
|
|
el: '.pages > .page',
|
|
template: '<div class="statusbar">' +
|
|
'<div id="box-addtab" class="status-group">' +
|
|
'<a href="#" id="btn-addtab" class="button" style="display:none"><i class="icon icon-plus"></i></a>' +
|
|
'</div>' +
|
|
'<div class="box-tabs">' +
|
|
'<ul class="sheet-tabs bottom"></ul>' +
|
|
'</div>' +
|
|
'</div>',
|
|
tabtemplate: _.template('<li class="tab<% if (locked) print(" locked"); %>"><a><%= label %></a></li>'),
|
|
menutemplate: _.template(
|
|
'<% _.each(menuItems, function(item) { %>' +
|
|
'<li data-event="<%= item.event %>" class="<% if (item.locked===true) print("disabled") %>">' +
|
|
'<a href="#" class="item-link list-button"><%= item.caption %>' +
|
|
'</li>' +
|
|
'<% }); %>'),
|
|
|
|
events: {},
|
|
api: undefined,
|
|
|
|
initialize: function (options) {
|
|
_.extend(this, options);
|
|
},
|
|
|
|
render: function () {
|
|
var me = this;
|
|
me.$el = $(me.template).appendTo($(me.el));
|
|
|
|
me.$boxTabs = me.$el.find('.box-tabs > ul');
|
|
me.$btnAddTab = me.$el.find('#box-addtab > .button');
|
|
me.$btnAddTab.single('click', _.buffered(function(e) {
|
|
me.fireEvent('sheet:addnew');
|
|
}, 300));
|
|
|
|
me.$boxTabs.on({
|
|
'touchstart': onTouchStart.bind(this),
|
|
'touchmove': onTouchMove.bind(this),
|
|
'touchend': onTouchEnd
|
|
});
|
|
|
|
// me.editMode = false;
|
|
return me;
|
|
},
|
|
|
|
setMode: function(mode) {
|
|
if ('disconnect' == mode) {
|
|
this.$btnAddTab.toggleClass('disabled', true);
|
|
} else if (mode.isEdit) {
|
|
this.$btnAddTab.show();
|
|
}
|
|
},
|
|
|
|
setVisible: function(visible) {
|
|
visible ? this.show(): this.hide();
|
|
},
|
|
|
|
addSheet: function(model) {
|
|
var index = this.$boxTabs.children().length;
|
|
var $item = $(this.tabtemplate({
|
|
label: model.get('name'),
|
|
locked: model.get('locked')
|
|
})).appendTo(this.$boxTabs);
|
|
|
|
$item.on('click', this.onSheetClick.bind(this, index, model));
|
|
model.get('active') && $item.addClass('active');
|
|
model.set('el', $item, {silent:true});
|
|
|
|
return $item;
|
|
},
|
|
|
|
addSheets: function (collection) {
|
|
var active;
|
|
collection.each(function(model) {
|
|
this.addSheet(model);
|
|
|
|
if ( model.get('active') )
|
|
active = model;
|
|
}, this);
|
|
|
|
if ( active && !tabVisible.call(this, active) )
|
|
setTabVisible.call(this, active);
|
|
},
|
|
|
|
clearTabs: function () {
|
|
this.$boxTabs.children().off('click');
|
|
this.$boxTabs.empty();
|
|
},
|
|
|
|
setActiveTab: function (index) {
|
|
this.$boxTabs.children().removeClass('active')
|
|
.eq(index).addClass('active');
|
|
|
|
if ( !tabVisible.call(this, index) )
|
|
setTabVisible.call(this, index);
|
|
},
|
|
|
|
onSheetClick: function (index, model, e) {
|
|
this.fireEvent('sheet:click', [index, model]);
|
|
return false;
|
|
},
|
|
|
|
// onSheetChanged: function(o, index, tab) {
|
|
// this.api.asc_showWorksheet(tab.sheetindex);
|
|
//
|
|
// if (this.hasTabInvisible && !this.tabbar.isTabVisible(index)) {
|
|
// this.tabbar.setTabVisible(index);
|
|
// }
|
|
//
|
|
// this.fireEvent('sheet:changed', [this, tab.sheetindex]);
|
|
// this.fireEvent('sheet:updateColors', [true]);
|
|
//
|
|
// Common.NotificationCenter.trigger('comments:updatefilter',
|
|
// {
|
|
// property: 'uid',
|
|
// value: new RegExp('^(doc_|sheet' + this.api.asc_getActiveWorksheetId() + '_)')
|
|
// },
|
|
// false // hide popover
|
|
// );
|
|
// },
|
|
|
|
changeViewMode: function (edit) {
|
|
if (edit) {
|
|
this.tabBarBox.css('left', '152px');
|
|
} else {
|
|
this.tabBarBox.css('left', '');
|
|
}
|
|
|
|
this.tabbar.options.draggable = edit;
|
|
this.editMode = edit;
|
|
},
|
|
|
|
showTabContextMenu: function (items, model) {
|
|
uiApp.closeModal('.document-menu.modal-in');
|
|
|
|
var popoverHTML =
|
|
'<div class="popover document-menu">'+
|
|
'<div class="popover-inner">'+
|
|
'<div class="list-block">'+
|
|
'<ul>'+
|
|
this.menutemplate({menuItems: items}) +
|
|
'</ul>'+
|
|
'</div>'+
|
|
'</div>'+
|
|
'</div>';
|
|
|
|
var $target = model.get('el');
|
|
var popover = uiApp.popover(popoverHTML, $target);
|
|
|
|
if (Common.SharedSettings.get('android')) {
|
|
Common.Utils.androidMenuTop($(popover), $target);
|
|
}
|
|
|
|
$('.modal-overlay').removeClass('modal-overlay-visible');
|
|
$('.document-menu li').single('click', _.buffered(function(e) {
|
|
uiApp.closeModal('.document-menu.modal-in');
|
|
|
|
var $target = $(e.currentTarget),
|
|
eventName = $target.data('event');
|
|
|
|
this.fireEvent('contextmenu:click', [this, eventName, model]);
|
|
}, 100, this));
|
|
}
|
|
}
|
|
})())
|
|
}
|
|
); |