2016-04-01 13:17:09 +00:00
|
|
|
/*
|
|
|
|
*
|
2019-01-17 13:05:03 +00:00
|
|
|
* (c) Copyright Ascensio System SIA 2010-2019
|
2016-04-01 13:17:09 +00:00
|
|
|
*
|
|
|
|
* 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
|
|
|
|
*
|
2019-01-17 13:00:34 +00:00
|
|
|
* You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
|
|
|
|
* street, Riga, Latvia, EU, LV-1050.
|
2016-04-01 13:17:09 +00:00
|
|
|
*
|
|
|
|
* 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
|
|
|
|
*
|
|
|
|
*/
|
2016-03-11 00:48:53 +00:00
|
|
|
/**
|
|
|
|
* Header.js
|
|
|
|
*
|
|
|
|
* Created by Alexander Yuzhin on 2/14/14
|
2018-03-01 12:16:38 +00:00
|
|
|
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
|
2016-03-11 00:48:53 +00:00
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
if (Common === undefined)
|
|
|
|
var Common = {};
|
|
|
|
|
|
|
|
Common.Views = Common.Views || {};
|
|
|
|
|
|
|
|
define([
|
|
|
|
'backbone',
|
|
|
|
'text!common/main/lib/template/Header.template',
|
2016-09-26 10:54:25 +00:00
|
|
|
'core',
|
|
|
|
'common/main/lib/view/RenameDialog'
|
2016-03-11 00:48:53 +00:00
|
|
|
], function (Backbone, headerTemplate) { 'use strict';
|
|
|
|
|
2017-03-01 13:33:12 +00:00
|
|
|
Common.Views.Header = Backbone.View.extend(_.extend(function(){
|
2017-03-16 10:20:07 +00:00
|
|
|
var storeUsers, appConfig;
|
2017-03-13 16:29:05 +00:00
|
|
|
var $userList, $panelUsers, $btnUsers;
|
2017-03-16 10:24:03 +00:00
|
|
|
var $saveStatus;
|
2019-04-08 15:40:08 +00:00
|
|
|
var _readonlyRights = false;
|
2017-03-13 16:29:05 +00:00
|
|
|
|
|
|
|
var templateUserItem =
|
2018-03-02 14:48:24 +00:00
|
|
|
'<li id="<%= user.get("iid") %>" class="<% if (!user.get("online")) { %> offline <% } if (user.get("view")) {%> viewmode <% } %>">' +
|
2018-06-05 08:54:49 +00:00
|
|
|
'<div class="user-name">' +
|
|
|
|
'<div class="color" style="background-color: <%= user.get("color") %>;"></div>'+
|
|
|
|
'<label><%= fnEncode(user.get("username")) %></label>' +
|
|
|
|
'<% if (len>1) { %><label style="margin-left:3px;">(<%=len%>)</label><% } %>' +
|
|
|
|
'</div>'+
|
2017-03-13 16:29:05 +00:00
|
|
|
'</li>';
|
|
|
|
|
|
|
|
var templateUserList = _.template(
|
|
|
|
'<ul>' +
|
2018-06-05 08:54:49 +00:00
|
|
|
'<% for (originalId in users) { %>' +
|
|
|
|
'<%= usertpl({user: users[originalId][0], fnEncode: fnEncode, len: users[originalId].length}) %>' +
|
|
|
|
'<% } %>' +
|
2017-03-13 16:29:05 +00:00
|
|
|
'</ul>');
|
|
|
|
|
|
|
|
var templateRightBox = '<section>' +
|
2017-08-15 11:44:59 +00:00
|
|
|
'<section id="box-doc-name">' +
|
2018-02-03 13:10:38 +00:00
|
|
|
'<input type="text" id="rib-doc-name" spellcheck="false" data-can-copy="false" style="pointer-events: none;">' +
|
2017-08-15 11:44:59 +00:00
|
|
|
'</section>' +
|
2017-04-28 10:44:03 +00:00
|
|
|
'<a id="rib-save-status" class="status-label locked"><%= textSaveEnd %></a>' +
|
2017-07-13 09:43:40 +00:00
|
|
|
'<div class="hedset">' +
|
2017-07-21 10:41:56 +00:00
|
|
|
'<div class="btn-slot" id="slot-hbtn-edit"></div>' +
|
2017-07-13 09:43:40 +00:00
|
|
|
'<div class="btn-slot" id="slot-hbtn-print"></div>' +
|
|
|
|
'<div class="btn-slot" id="slot-hbtn-download"></div>' +
|
|
|
|
'</div>' +
|
2017-07-13 09:37:22 +00:00
|
|
|
'<div class="hedset">' +
|
2017-03-13 16:29:05 +00:00
|
|
|
// '<span class="btn-slot text" id="slot-btn-users"></span>' +
|
|
|
|
'<section id="tlb-box-users" class="box-cousers dropdown"">' +
|
|
|
|
'<div class="btn-users">' +
|
2017-08-17 14:32:37 +00:00
|
|
|
'<svg class="icon"><use xlink:href="#svg-btn-users"></use></svg>' +
|
2017-03-13 16:29:05 +00:00
|
|
|
'<label class="caption">+</label>' +
|
|
|
|
'</div>' +
|
|
|
|
'<div class="cousers-menu dropdown-menu">' +
|
|
|
|
'<label id="tlb-users-menu-descr"><%= tipUsers %></label>' +
|
|
|
|
'<div class="cousers-list"></div>' +
|
|
|
|
'<label id="tlb-change-rights" class="link"><%= txtAccessRights %></label>' +
|
|
|
|
'</div>' +
|
|
|
|
'</section>'+
|
2017-07-13 09:37:22 +00:00
|
|
|
'</div>' +
|
|
|
|
'<div class="hedset">' +
|
2019-05-13 11:45:17 +00:00
|
|
|
'<div class="btn-slot" id="slot-btn-undock"></div>' +
|
2017-05-04 12:39:17 +00:00
|
|
|
'<div class="btn-slot" id="slot-btn-back"></div>' +
|
2018-03-21 11:11:03 +00:00
|
|
|
'<div class="btn-slot" id="slot-btn-options"></div>' +
|
2017-03-01 13:33:12 +00:00
|
|
|
'</div>' +
|
|
|
|
'</section>';
|
|
|
|
|
2017-04-22 14:51:12 +00:00
|
|
|
var templateLeftBox = '<section class="logo">' +
|
2017-04-25 16:52:51 +00:00
|
|
|
'<div id="header-logo"><i /></div>' +
|
2017-03-13 16:29:05 +00:00
|
|
|
'</section>';
|
|
|
|
|
2018-02-03 13:10:38 +00:00
|
|
|
var templateTitleBox = '<section id="box-document-title">' +
|
2018-09-25 10:46:28 +00:00
|
|
|
'<div class="extra"></div>' +
|
2018-02-03 13:10:38 +00:00
|
|
|
'<div class="hedset">' +
|
|
|
|
'<div class="btn-slot" id="slot-btn-dt-save"></div>' +
|
|
|
|
'<div class="btn-slot" id="slot-btn-dt-print"></div>' +
|
|
|
|
'<div class="btn-slot" id="slot-btn-dt-undo"></div>' +
|
|
|
|
'<div class="btn-slot" id="slot-btn-dt-redo"></div>' +
|
|
|
|
'</div>' +
|
2018-02-28 13:31:59 +00:00
|
|
|
'<div class="lr-separator"></div>' +
|
2018-02-03 13:10:38 +00:00
|
|
|
'<input type="text" id="title-doc-name" spellcheck="false" data-can-copy="false" style="pointer-events: none;">' +
|
|
|
|
'<label id="title-user-name" style="pointer-events: none;"></label>' +
|
|
|
|
'</section>';
|
|
|
|
|
2017-03-13 16:29:05 +00:00
|
|
|
function onResetUsers(collection, opts) {
|
2017-08-17 12:39:28 +00:00
|
|
|
var usercount = collection.getEditingCount();
|
2017-03-13 16:29:05 +00:00
|
|
|
if ( $userList ) {
|
2018-07-19 14:47:03 +00:00
|
|
|
if ( usercount > 1 || usercount > 0 && appConfig && !appConfig.isEdit && !appConfig.isRestrictedEdit) {
|
2017-03-13 16:29:05 +00:00
|
|
|
$userList.html(templateUserList({
|
2018-06-05 08:54:49 +00:00
|
|
|
users: collection.chain().filter(function(item){return item.get('online') && !item.get('view')}).groupBy(function(item) {return item.get('idOriginal');}).value(),
|
2017-03-13 16:29:05 +00:00
|
|
|
usertpl: _.template(templateUserItem),
|
|
|
|
fnEncode: Common.Utils.String.htmlEncode
|
|
|
|
}));
|
|
|
|
|
2019-04-23 10:20:39 +00:00
|
|
|
$userList.scroller = new Common.UI.Scroller({
|
|
|
|
el: $userList.find('ul'),
|
|
|
|
useKeyboard: true,
|
|
|
|
minScrollbarLength: 40,
|
|
|
|
alwaysVisibleY: true
|
|
|
|
});
|
2018-06-05 08:54:49 +00:00
|
|
|
$userList.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true});
|
2017-03-13 16:29:05 +00:00
|
|
|
} else {
|
|
|
|
$userList.empty();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-06-05 08:54:49 +00:00
|
|
|
applyUsers( usercount, collection.getEditingOriginalCount() );
|
|
|
|
};
|
|
|
|
|
|
|
|
function onUsersChanged(model) {
|
|
|
|
onResetUsers(model.collection);
|
2017-03-13 16:29:05 +00:00
|
|
|
};
|
|
|
|
|
2018-06-05 08:54:49 +00:00
|
|
|
function applyUsers(count, originalCount) {
|
2019-01-11 11:02:28 +00:00
|
|
|
if (!$btnUsers) return;
|
|
|
|
|
2018-07-19 14:47:03 +00:00
|
|
|
var has_edit_users = count > 1 || count > 0 && appConfig && !appConfig.isEdit && !appConfig.isRestrictedEdit; // has other user(s) who edit document
|
2018-04-20 08:23:58 +00:00
|
|
|
if ( has_edit_users ) {
|
2017-03-13 16:29:05 +00:00
|
|
|
$btnUsers
|
|
|
|
.attr('data-toggle', 'dropdown')
|
|
|
|
.addClass('dropdown-toggle')
|
|
|
|
.menu = true;
|
|
|
|
|
|
|
|
$panelUsers['show']();
|
|
|
|
} else {
|
|
|
|
$btnUsers
|
|
|
|
.removeAttr('data-toggle')
|
|
|
|
.removeClass('dropdown-toggle')
|
|
|
|
.menu = false;
|
|
|
|
|
2019-04-08 15:40:08 +00:00
|
|
|
$panelUsers[(!_readonlyRights && appConfig && !appConfig.isReviewOnly && appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length) ? 'show' : 'hide']();
|
2017-03-13 16:29:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
$btnUsers.find('.caption')
|
2018-04-20 08:23:58 +00:00
|
|
|
.css({'font-size': ((has_edit_users) ? '12px' : '14px'),
|
|
|
|
'margin-top': ((has_edit_users) ? '0' : '-1px')})
|
2018-06-05 08:54:49 +00:00
|
|
|
.html((has_edit_users) ? originalCount : '+');
|
2017-03-13 16:29:05 +00:00
|
|
|
|
|
|
|
var usertip = $btnUsers.data('bs.tooltip');
|
|
|
|
if ( usertip ) {
|
2018-04-20 08:23:58 +00:00
|
|
|
usertip.options.title = (has_edit_users) ? usertip.options.titleExt : usertip.options.titleNorm;
|
2017-03-13 16:29:05 +00:00
|
|
|
usertip.setContent();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-08 15:40:08 +00:00
|
|
|
function onLostEditRights() {
|
|
|
|
_readonlyRights = true;
|
|
|
|
$panelUsers.find('#tlb-change-rights').hide();
|
|
|
|
$btnUsers && !$btnUsers.menu && $panelUsers.hide();
|
|
|
|
}
|
|
|
|
|
2017-03-13 16:29:05 +00:00
|
|
|
function onUsersClick(e) {
|
|
|
|
if ( !$btnUsers.menu ) {
|
|
|
|
$panelUsers.removeClass('open');
|
|
|
|
this.fireEvent('click:users', this);
|
2018-08-28 12:09:19 +00:00
|
|
|
} else {
|
|
|
|
var usertip = $btnUsers.data('bs.tooltip');
|
|
|
|
if ( usertip ) {
|
|
|
|
if ( usertip.dontShow===undefined)
|
|
|
|
usertip.dontShow = true;
|
2017-03-13 16:29:05 +00:00
|
|
|
|
2018-08-28 12:09:19 +00:00
|
|
|
usertip.hide();
|
|
|
|
}
|
2017-03-13 16:29:05 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-03-21 11:11:03 +00:00
|
|
|
function onAppShowed(config) {}
|
|
|
|
|
2017-03-16 10:24:03 +00:00
|
|
|
function onAppReady(mode) {
|
|
|
|
appConfig = mode;
|
|
|
|
|
|
|
|
var me = this;
|
|
|
|
me.btnGoBack.on('click', function (e) {
|
2018-02-14 14:11:28 +00:00
|
|
|
Common.NotificationCenter.trigger('goback');
|
2017-03-16 10:24:03 +00:00
|
|
|
});
|
|
|
|
|
2017-05-04 12:36:42 +00:00
|
|
|
if ( me.logo )
|
2017-09-19 12:42:44 +00:00
|
|
|
me.logo.children(0).on('click', function (e) {
|
2018-11-13 08:40:35 +00:00
|
|
|
var _url = !!me.branding && !!me.branding.logo && (me.branding.logo.url!==undefined) ?
|
2019-06-07 15:23:33 +00:00
|
|
|
me.branding.logo.url : '{{PUBLISHER_URL}}';
|
2018-11-13 08:40:35 +00:00
|
|
|
if (_url) {
|
|
|
|
var newDocumentPage = window.open(_url);
|
|
|
|
newDocumentPage && newDocumentPage.focus();
|
|
|
|
}
|
2017-05-04 12:36:42 +00:00
|
|
|
});
|
2017-03-16 10:24:03 +00:00
|
|
|
|
2017-08-24 08:44:11 +00:00
|
|
|
onResetUsers(storeUsers);
|
|
|
|
|
2017-03-16 10:24:03 +00:00
|
|
|
$panelUsers.on('shown.bs.dropdown', function () {
|
|
|
|
$userList.scroller && $userList.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true});
|
|
|
|
});
|
|
|
|
|
|
|
|
$panelUsers.find('.cousers-menu')
|
|
|
|
.on('click', function(e) { return false; });
|
|
|
|
|
2017-08-17 12:39:28 +00:00
|
|
|
var editingUsers = storeUsers.getEditingCount();
|
2017-03-16 10:24:03 +00:00
|
|
|
$btnUsers.tooltip({
|
2018-07-19 14:47:03 +00:00
|
|
|
title: (editingUsers > 1 || editingUsers>0 && !appConfig.isEdit && !appConfig.isRestrictedEdit) ? me.tipViewUsers : me.tipAccessRights,
|
2017-03-16 10:24:03 +00:00
|
|
|
titleNorm: me.tipAccessRights,
|
|
|
|
titleExt: me.tipViewUsers,
|
|
|
|
placement: 'bottom',
|
|
|
|
html: true
|
|
|
|
});
|
|
|
|
|
|
|
|
$btnUsers.on('click', onUsersClick.bind(me));
|
|
|
|
|
|
|
|
var $labelChangeRights = $panelUsers.find('#tlb-change-rights');
|
2017-08-21 07:53:39 +00:00
|
|
|
$labelChangeRights.on('click', function(e) {
|
|
|
|
$panelUsers.removeClass('open');
|
|
|
|
me.fireEvent('click:users', me);
|
|
|
|
});
|
2017-03-16 10:24:03 +00:00
|
|
|
|
|
|
|
$labelChangeRights[(!mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length)?'show':'hide']();
|
2018-07-19 14:47:03 +00:00
|
|
|
$panelUsers[(editingUsers > 1 || editingUsers > 0 && !appConfig.isEdit && !appConfig.isRestrictedEdit || !mode.isOffline && !mode.isReviewOnly && mode.sharingSettingsUrl && mode.sharingSettingsUrl.length) ? 'show' : 'hide']();
|
2017-03-16 10:24:03 +00:00
|
|
|
|
2017-05-04 12:36:42 +00:00
|
|
|
if ( $saveStatus ) {
|
|
|
|
$saveStatus.attr('data-width', me.textSaveExpander);
|
|
|
|
if (appConfig.canUseHistory) {
|
|
|
|
// $saveStatus.on('click', function(e) {
|
|
|
|
// me.fireEvent('history:show', ['header']);
|
|
|
|
// });
|
|
|
|
} else {
|
|
|
|
$saveStatus.addClass('locked');
|
|
|
|
}
|
2017-03-16 10:24:03 +00:00
|
|
|
}
|
2017-07-13 09:43:40 +00:00
|
|
|
|
2018-01-24 10:57:58 +00:00
|
|
|
if ( me.btnPrint ) {
|
|
|
|
me.btnPrint.updateHint(me.tipPrint + Common.Utils.String.platformKey('Ctrl+P'));
|
|
|
|
me.btnPrint.on('click', function (e) {
|
|
|
|
me.fireEvent('print', me);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( me.btnSave ) {
|
|
|
|
me.btnSave.updateHint(me.tipSave + Common.Utils.String.platformKey('Ctrl+S'));
|
|
|
|
me.btnSave.on('click', function (e) {
|
|
|
|
me.fireEvent('save', me);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( me.btnUndo ) {
|
|
|
|
me.btnUndo.updateHint(me.tipUndo + Common.Utils.String.platformKey('Ctrl+Z'));
|
|
|
|
me.btnUndo.on('click', function (e) {
|
|
|
|
me.fireEvent('undo', me);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( me.btnRedo ) {
|
|
|
|
me.btnRedo.updateHint(me.tipRedo + Common.Utils.String.platformKey('Ctrl+Y'));
|
|
|
|
me.btnRedo.on('click', function (e) {
|
|
|
|
me.fireEvent('redo', me);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-07-13 09:43:40 +00:00
|
|
|
if ( !mode.isEdit ) {
|
|
|
|
if ( me.btnDownload ) {
|
2017-08-07 14:10:03 +00:00
|
|
|
me.btnDownload.updateHint(me.tipDownload);
|
2017-07-13 09:43:40 +00:00
|
|
|
me.btnDownload.on('click', function (e) {
|
|
|
|
me.fireEvent('downloadas', ['original']);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-07-21 10:41:56 +00:00
|
|
|
if ( me.btnEdit ) {
|
2017-07-21 10:44:07 +00:00
|
|
|
me.btnEdit.updateHint(me.tipGoEdit);
|
2017-07-21 10:41:56 +00:00
|
|
|
me.btnEdit.on('click', function (e) {
|
|
|
|
me.fireEvent('go:editor', me);
|
|
|
|
});
|
|
|
|
}
|
2017-07-13 09:43:40 +00:00
|
|
|
}
|
2018-03-21 11:11:03 +00:00
|
|
|
|
|
|
|
if ( me.btnOptions )
|
|
|
|
me.btnOptions.updateHint(me.tipViewSettings);
|
2017-03-16 10:24:03 +00:00
|
|
|
}
|
|
|
|
|
2019-05-13 11:45:17 +00:00
|
|
|
function onAppConfig(config) {
|
|
|
|
var me = this;
|
|
|
|
if ( config.canUndock ) {
|
|
|
|
me.btnUndock = new Common.UI.Button({
|
|
|
|
cls: 'btn-header no-caret',
|
|
|
|
iconCls: 'svgicon svg-btn-undock',
|
|
|
|
hint: me.tipUndock,
|
|
|
|
split: true
|
|
|
|
});
|
|
|
|
|
|
|
|
me.btnUndock.on('click', function (e) {
|
|
|
|
Common.NotificationCenter.trigger('action:undocking', 'undock');
|
|
|
|
});
|
|
|
|
|
|
|
|
me.btnUndock.render($('#toolbar .box-tabs #slot-btn-undock'));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-01 12:14:19 +00:00
|
|
|
function onDocNameKeyDown(e) {
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
var name = me.labelDocName.val();
|
|
|
|
if ( e.keyCode == Common.UI.Keys.RETURN ) {
|
|
|
|
name = name.trim();
|
|
|
|
if ( !_.isEmpty(name) && me.documentCaption !== name ) {
|
|
|
|
if ( /[\t*\+:\"<>?|\\\\/]/gim.test(name) ) {
|
|
|
|
_.defer(function() {
|
|
|
|
Common.UI.error({
|
|
|
|
msg: (new Common.Views.RenameDialog).txtInvalidName + "*+:\"<>?|\/"
|
|
|
|
, callback: function() {
|
|
|
|
_.delay(function() {
|
|
|
|
me.labelDocName.focus();
|
|
|
|
}, 50);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
me.labelDocName.blur();
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
Common.Gateway.requestRename(name);
|
|
|
|
Common.NotificationCenter.trigger('edit:complete', me);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else
|
|
|
|
if ( e.keyCode == Common.UI.Keys.ESC ) {
|
|
|
|
me.labelDocName.val(me.documentCaption);
|
|
|
|
Common.NotificationCenter.trigger('edit:complete', this);
|
|
|
|
} else {
|
|
|
|
me.labelDocName.attr('size', name.length > 10 ? name.length : 10);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-05-13 11:45:17 +00:00
|
|
|
function onAppUndocked(c) {
|
|
|
|
var me = this;
|
|
|
|
if ( me.btnUndock ) {
|
|
|
|
c.status == 'undocked' ? me.btnUndock.hide() : me.btnUndock.show();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-03-01 13:33:12 +00:00
|
|
|
return {
|
|
|
|
options: {
|
|
|
|
branding: {},
|
|
|
|
documentCaption: '',
|
|
|
|
canBack: false
|
|
|
|
},
|
|
|
|
|
|
|
|
el: '#header',
|
|
|
|
|
|
|
|
// Compile our stats template
|
|
|
|
template: _.template(headerTemplate),
|
|
|
|
|
|
|
|
// Delegated events for creating new items, and clearing completed ones.
|
|
|
|
events: {
|
|
|
|
// 'click #header-logo': function (e) {}
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function (options) {
|
|
|
|
var me = this;
|
2018-03-28 10:37:41 +00:00
|
|
|
this.options = this.options ? _.extend(this.options, options) : options;
|
2017-03-01 13:33:12 +00:00
|
|
|
|
|
|
|
this.documentCaption = this.options.documentCaption;
|
|
|
|
this.branding = this.options.customization;
|
2017-04-12 08:55:46 +00:00
|
|
|
this.isModified = false;
|
2017-03-01 13:33:12 +00:00
|
|
|
|
|
|
|
me.btnGoBack = new Common.UI.Button({
|
|
|
|
id: 'btn-goback',
|
2017-07-13 09:37:22 +00:00
|
|
|
cls: 'btn-header',
|
2017-04-20 13:36:15 +00:00
|
|
|
iconCls: 'svgicon svg-btn-goback',
|
2017-05-04 12:39:17 +00:00
|
|
|
split: true
|
2017-03-01 13:33:12 +00:00
|
|
|
});
|
2016-03-11 00:48:53 +00:00
|
|
|
|
2017-03-29 09:01:34 +00:00
|
|
|
storeUsers = this.options.storeUsers;
|
2017-03-13 16:29:05 +00:00
|
|
|
storeUsers.bind({
|
2018-06-05 08:54:49 +00:00
|
|
|
add : onUsersChanged,
|
2017-03-13 16:29:05 +00:00
|
|
|
change : onUsersChanged,
|
|
|
|
reset : onResetUsers
|
2017-03-01 13:33:12 +00:00
|
|
|
});
|
|
|
|
|
2018-03-21 11:11:03 +00:00
|
|
|
me.btnOptions = new Common.UI.Button({
|
|
|
|
cls: 'btn-header no-caret',
|
|
|
|
iconCls: 'svgicon svg-btn-options',
|
|
|
|
menu: true
|
|
|
|
});
|
|
|
|
|
2018-03-21 11:28:28 +00:00
|
|
|
me.mnuZoom = {options: {value: 100}};
|
|
|
|
|
2019-05-13 11:45:17 +00:00
|
|
|
Common.NotificationCenter.on({
|
|
|
|
'app:ready': function(mode) {Common.Utils.asyncCall(onAppReady, me, mode);},
|
|
|
|
'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);},
|
|
|
|
'app:config' : function (c) {Common.Utils.asyncCall(onAppConfig, me, c);},
|
|
|
|
'undock:status': onAppUndocked.bind(this)
|
2018-03-21 11:11:03 +00:00
|
|
|
});
|
2019-04-08 15:40:08 +00:00
|
|
|
Common.NotificationCenter.on('collaboration:sharingdeny', onLostEditRights);
|
2017-03-01 13:33:12 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function (el, role) {
|
|
|
|
$(el).html(this.getPanel(role));
|
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2017-05-04 12:36:42 +00:00
|
|
|
getPanel: function (role, config) {
|
2018-02-03 13:10:38 +00:00
|
|
|
var me = this;
|
|
|
|
|
2018-02-15 23:46:45 +00:00
|
|
|
function createTitleButton(iconid, slot, disabled) {
|
2018-02-03 13:10:38 +00:00
|
|
|
return (new Common.UI.Button({
|
|
|
|
cls: 'btn-header',
|
2018-02-15 23:46:45 +00:00
|
|
|
iconCls: 'svgicon ' + iconid,
|
|
|
|
disabled: disabled === true
|
2018-02-03 13:10:38 +00:00
|
|
|
})).render(slot);
|
|
|
|
}
|
|
|
|
|
2017-05-04 12:36:42 +00:00
|
|
|
if ( role == 'left' && (!config || !config.isDesktopApp)) {
|
2017-03-13 16:29:05 +00:00
|
|
|
$html = $(templateLeftBox);
|
2017-03-01 13:33:12 +00:00
|
|
|
this.logo = $html.find('#header-logo');
|
2017-09-18 11:38:24 +00:00
|
|
|
|
|
|
|
if (this.branding && this.branding.logo && this.branding.logo.image && this.logo) {
|
|
|
|
this.logo.html('<img src="' + this.branding.logo.image + '" style="max-width:100px; max-height:20px; margin: 0;"/>');
|
|
|
|
this.logo.css({'background-image': 'none', width: 'auto'});
|
2018-11-13 08:40:35 +00:00
|
|
|
(this.branding.logo.url || this.branding.logo.url===undefined) && this.logo.addClass('link');
|
2017-09-18 11:38:24 +00:00
|
|
|
}
|
|
|
|
|
2017-03-01 13:33:12 +00:00
|
|
|
return $html;
|
|
|
|
} else
|
|
|
|
if ( role == 'right' ) {
|
2017-04-21 08:15:04 +00:00
|
|
|
var $html = $(_.template(templateRightBox)({
|
2017-03-13 16:29:05 +00:00
|
|
|
tipUsers: this.labelCoUsersDescr,
|
2017-04-19 12:09:44 +00:00
|
|
|
txtAccessRights: this.txtAccessRights,
|
|
|
|
textSaveEnd: this.textSaveEnd
|
2017-03-13 16:29:05 +00:00
|
|
|
}));
|
2017-03-01 13:33:12 +00:00
|
|
|
|
2018-02-03 13:10:38 +00:00
|
|
|
if ( !me.labelDocName ) {
|
|
|
|
me.labelDocName = $html.find('#rib-doc-name');
|
|
|
|
// this.labelDocName.attr('maxlength', 50);
|
|
|
|
me.labelDocName.text = function (text) {
|
|
|
|
this.val(text).attr('size', text.length);
|
|
|
|
}
|
2017-08-01 12:14:19 +00:00
|
|
|
|
2018-02-03 13:10:38 +00:00
|
|
|
if ( me.documentCaption ) {
|
|
|
|
me.labelDocName.text(me.documentCaption);
|
|
|
|
}
|
2017-08-02 11:52:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if ( !_.isUndefined(this.options.canRename) ) {
|
|
|
|
this.setCanRename(this.options.canRename);
|
|
|
|
}
|
|
|
|
|
2018-02-03 13:10:38 +00:00
|
|
|
// $saveStatus = $html.find('#rib-save-status');
|
|
|
|
$html.find('#rib-save-status').hide();
|
|
|
|
// if ( config.isOffline ) $saveStatus = false;
|
2018-01-24 10:57:58 +00:00
|
|
|
|
2018-02-03 13:10:38 +00:00
|
|
|
if ( this.options.canBack === true ) {
|
|
|
|
me.btnGoBack.render($html.find('#slot-btn-back'));
|
|
|
|
} else {
|
|
|
|
$html.find('#slot-btn-back').hide();
|
2018-01-24 10:57:58 +00:00
|
|
|
}
|
2017-03-01 13:33:12 +00:00
|
|
|
|
2017-07-13 09:43:40 +00:00
|
|
|
if ( !config.isEdit ) {
|
2018-02-03 13:10:38 +00:00
|
|
|
if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline )
|
|
|
|
this.btnDownload = createTitleButton('svg-btn-download', $html.find('#slot-hbtn-download'));
|
2017-07-13 09:43:40 +00:00
|
|
|
|
2018-02-03 13:10:38 +00:00
|
|
|
if ( config.canPrint )
|
|
|
|
this.btnPrint = createTitleButton('svg-btn-print', $html.find('#slot-hbtn-print'));
|
2017-07-21 10:41:56 +00:00
|
|
|
|
2018-02-03 13:10:38 +00:00
|
|
|
if ( config.canEdit && config.canRequestEditRights )
|
|
|
|
this.btnEdit = createTitleButton('svg-btn-edit', $html.find('#slot-hbtn-edit'));
|
2017-07-13 09:43:40 +00:00
|
|
|
}
|
2018-05-15 12:37:26 +00:00
|
|
|
me.btnOptions.render($html.find('#slot-btn-options'));
|
2017-07-13 09:43:40 +00:00
|
|
|
|
2017-03-13 16:29:05 +00:00
|
|
|
$userList = $html.find('.cousers-list');
|
|
|
|
$panelUsers = $html.find('.box-cousers');
|
|
|
|
$btnUsers = $html.find('.btn-users');
|
|
|
|
|
|
|
|
$panelUsers.hide();
|
2017-03-01 13:33:12 +00:00
|
|
|
|
2018-02-03 13:10:38 +00:00
|
|
|
return $html;
|
|
|
|
} else
|
|
|
|
if ( role == 'title' ) {
|
|
|
|
var $html = $(_.template(templateTitleBox)());
|
|
|
|
|
|
|
|
!!me.labelDocName && me.labelDocName.hide().off(); // hide document title if it was created in right box
|
|
|
|
me.labelDocName = $html.find('> #title-doc-name');
|
|
|
|
me.labelDocName.text = function (str) {this.val(str);}; // redefine text function to lock temporaly rename docuemnt option
|
|
|
|
me.labelDocName.text( me.documentCaption );
|
|
|
|
|
|
|
|
me.labelUserName = $('> #title-user-name', $html);
|
|
|
|
me.setUserName(me.options.userName);
|
|
|
|
|
|
|
|
if ( config.canPrint && config.isEdit ) {
|
2018-09-25 14:09:59 +00:00
|
|
|
me.btnPrint = createTitleButton('svg-btn-print', $('#slot-btn-dt-print', $html), true);
|
2018-02-03 13:10:38 +00:00
|
|
|
}
|
|
|
|
|
2018-02-15 23:46:45 +00:00
|
|
|
me.btnSave = createTitleButton('svg-btn-save', $('#slot-btn-dt-save', $html), true);
|
|
|
|
me.btnUndo = createTitleButton('svg-btn-undo', $('#slot-btn-dt-undo', $html), true);
|
|
|
|
me.btnRedo = createTitleButton('svg-btn-redo', $('#slot-btn-dt-redo', $html), true);
|
2018-02-03 13:10:38 +00:00
|
|
|
|
2018-02-28 13:24:48 +00:00
|
|
|
if ( me.btnSave.$icon.is('svg') ) {
|
|
|
|
me.btnSave.$icon.addClass('icon-save');
|
|
|
|
var _create_use = function (extid, intid) {
|
|
|
|
var _use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
|
|
|
|
_use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', extid);
|
|
|
|
_use.setAttribute('id', intid);
|
|
|
|
|
|
|
|
return $(_use);
|
|
|
|
};
|
|
|
|
|
|
|
|
_create_use('#svg-btn-save-coauth', 'coauth').appendTo(me.btnSave.$icon);
|
|
|
|
_create_use('#svg-btn-save-sync', 'sync').appendTo(me.btnSave.$icon);
|
|
|
|
}
|
2017-03-01 13:33:12 +00:00
|
|
|
return $html;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
setVisible: function (visible) {
|
|
|
|
// visible
|
|
|
|
// ? this.show()
|
|
|
|
// : this.hide();
|
|
|
|
},
|
|
|
|
|
|
|
|
setBranding: function (value) {
|
|
|
|
var element;
|
|
|
|
|
|
|
|
this.branding = value;
|
|
|
|
|
2018-02-07 08:11:58 +00:00
|
|
|
if ( value ) {
|
|
|
|
if ( value.logo && value.logo.image ) {
|
|
|
|
element = $('#header-logo');
|
|
|
|
if (element) {
|
|
|
|
element.html('<img src="' + value.logo.image + '" style="max-width:100px; max-height:20px; margin: 0;"/>');
|
|
|
|
element.css({'background-image': 'none', width: 'auto'});
|
2018-11-13 08:40:35 +00:00
|
|
|
(value.logo.url || value.logo.url===undefined) && element.addClass('link');
|
2018-02-07 08:11:58 +00:00
|
|
|
}
|
|
|
|
}
|
2016-09-26 10:54:25 +00:00
|
|
|
}
|
2017-03-01 13:33:12 +00:00
|
|
|
},
|
|
|
|
|
2017-04-12 08:55:46 +00:00
|
|
|
setDocumentCaption: function(value) {
|
2017-03-01 13:33:12 +00:00
|
|
|
!value && (value = '');
|
|
|
|
|
|
|
|
this.documentCaption = value;
|
2017-04-12 08:55:46 +00:00
|
|
|
this.isModified && (value += '*');
|
2017-08-01 12:14:19 +00:00
|
|
|
if ( this.labelDocName ) {
|
2017-08-15 11:44:59 +00:00
|
|
|
this.labelDocName.text( value );
|
|
|
|
// this.labelDocName.attr('size', value.length);
|
2017-08-01 12:14:19 +00:00
|
|
|
|
|
|
|
this.setCanRename(true);
|
|
|
|
}
|
2017-03-01 13:33:12 +00:00
|
|
|
|
|
|
|
return value;
|
|
|
|
},
|
|
|
|
|
|
|
|
getDocumentCaption: function () {
|
|
|
|
return this.documentCaption;
|
|
|
|
},
|
|
|
|
|
|
|
|
setDocumentChanged: function (changed) {
|
2017-04-12 08:55:46 +00:00
|
|
|
this.isModified = changed;
|
|
|
|
|
2017-08-08 08:17:18 +00:00
|
|
|
var _name = this.documentCaption;
|
2017-03-01 13:33:12 +00:00
|
|
|
changed && (_name += '*');
|
|
|
|
|
2017-08-15 11:44:59 +00:00
|
|
|
this.labelDocName.text(_name);
|
2017-03-01 13:33:12 +00:00
|
|
|
},
|
|
|
|
|
2018-03-23 13:00:57 +00:00
|
|
|
setCanBack: function (value, text) {
|
2018-02-03 13:10:38 +00:00
|
|
|
this.options.canBack = value;
|
2017-03-01 13:33:12 +00:00
|
|
|
this.btnGoBack[value ? 'show' : 'hide']();
|
2018-03-23 13:00:57 +00:00
|
|
|
if (value)
|
|
|
|
this.btnGoBack.updateHint((text && typeof text == 'string') ? text : this.textBack);
|
2018-02-03 13:10:38 +00:00
|
|
|
|
|
|
|
return this;
|
2017-03-01 13:33:12 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
getCanBack: function () {
|
2018-02-03 13:10:38 +00:00
|
|
|
return this.options.canBack;
|
2017-03-01 13:33:12 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
setCanRename: function (rename) {
|
2017-08-01 12:14:19 +00:00
|
|
|
rename = false;
|
|
|
|
|
2017-08-02 11:52:52 +00:00
|
|
|
var me = this;
|
|
|
|
me.options.canRename = rename;
|
|
|
|
if ( me.labelDocName ) {
|
|
|
|
var label = me.labelDocName;
|
|
|
|
if ( rename ) {
|
|
|
|
label.removeAttr('disabled').tooltip({
|
|
|
|
title: me.txtRename,
|
|
|
|
placement: 'cursor'}
|
|
|
|
);
|
2017-08-15 11:44:59 +00:00
|
|
|
|
|
|
|
label.on({
|
|
|
|
'keydown': onDocNameKeyDown.bind(this),
|
|
|
|
'blur': function (e) {
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2017-08-02 11:52:52 +00:00
|
|
|
} else {
|
2017-08-15 11:44:59 +00:00
|
|
|
label.off();
|
2017-08-02 11:52:52 +00:00
|
|
|
label.attr('disabled', true);
|
|
|
|
var tip = label.data('bs.tooltip');
|
|
|
|
if ( tip ) {
|
|
|
|
tip.options.title = '';
|
|
|
|
tip.setContent();
|
|
|
|
}
|
2017-08-01 12:14:19 +00:00
|
|
|
}
|
2017-08-08 08:17:18 +00:00
|
|
|
label.attr('data-can-copy', rename);
|
2017-08-01 12:14:19 +00:00
|
|
|
}
|
2017-03-01 13:33:12 +00:00
|
|
|
},
|
|
|
|
|
2017-03-16 10:24:03 +00:00
|
|
|
setSaveStatus: function (status) {
|
|
|
|
if ( $saveStatus ) {
|
|
|
|
if ( $saveStatus.is(':hidden') ) $saveStatus.show();
|
|
|
|
|
|
|
|
var _text;
|
|
|
|
switch ( status ) {
|
|
|
|
case 'begin': _text = this.textSaveBegin; break;
|
|
|
|
case 'changed': _text = this.textSaveChanged; break;
|
|
|
|
default: _text = this.textSaveEnd;
|
|
|
|
}
|
|
|
|
|
|
|
|
$saveStatus.text( _text );
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-02-03 13:10:38 +00:00
|
|
|
setUserName: function(name) {
|
|
|
|
if ( !!this.labelUserName ) {
|
|
|
|
if ( !!name ) {
|
|
|
|
this.labelUserName.text(name).show();
|
|
|
|
} else this.labelUserName.hide();
|
|
|
|
} else {
|
|
|
|
this.options.userName = name;
|
|
|
|
}
|
|
|
|
|
|
|
|
return this;
|
2018-01-24 10:57:58 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
getButton: function(type) {
|
|
|
|
if (type == 'save')
|
|
|
|
return this.btnSave;
|
|
|
|
},
|
|
|
|
|
2018-02-22 21:19:40 +00:00
|
|
|
lockHeaderBtns: function (alias, lock) {
|
|
|
|
var me = this;
|
|
|
|
if ( alias == 'users' ) {
|
|
|
|
if ( lock )
|
|
|
|
$btnUsers.addClass('disabled').attr('disabled', 'disabled'); else
|
|
|
|
$btnUsers.removeClass('disabled').attr('disabled', '');
|
|
|
|
} else {
|
2018-07-30 14:08:33 +00:00
|
|
|
var _lockButton = function (btn) {
|
2018-02-22 21:19:40 +00:00
|
|
|
if ( btn ) {
|
|
|
|
if ( lock ) {
|
|
|
|
btn.keepState = {
|
|
|
|
disabled: btn.isDisabled()
|
|
|
|
};
|
2018-03-21 11:11:03 +00:00
|
|
|
btn.setDisabled( true );
|
2018-02-22 21:19:40 +00:00
|
|
|
} else {
|
2018-04-18 12:30:09 +00:00
|
|
|
btn.setDisabled( btn.keepState && btn.keepState.disabled || lock);
|
2018-03-21 11:11:03 +00:00
|
|
|
delete btn.keepState;
|
2018-02-22 21:19:40 +00:00
|
|
|
}
|
|
|
|
}
|
2018-07-30 14:08:33 +00:00
|
|
|
};
|
2018-02-22 21:19:40 +00:00
|
|
|
|
2018-03-21 11:11:03 +00:00
|
|
|
switch ( alias ) {
|
|
|
|
case 'undo': _lockButton(me.btnUndo); break;
|
|
|
|
case 'redo': _lockButton(me.btnRedo); break;
|
|
|
|
case 'opts': _lockButton(me.btnOptions); break;
|
|
|
|
default: break;
|
2018-02-22 21:19:40 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-03-21 11:28:28 +00:00
|
|
|
fakeMenuItem: function() {
|
|
|
|
return {
|
|
|
|
conf: {checked: false},
|
|
|
|
setChecked: function (val) { this.conf.checked = val; },
|
|
|
|
isChecked: function () { return this.conf.checked; }
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2017-03-01 13:33:12 +00:00
|
|
|
textBack: 'Go to Documents',
|
2017-04-19 12:09:44 +00:00
|
|
|
txtRename: 'Rename',
|
|
|
|
textSaveBegin: 'Saving...',
|
|
|
|
textSaveEnd: 'All changes saved',
|
|
|
|
textSaveChanged: 'Modified',
|
|
|
|
textSaveExpander: 'All changes saved',
|
|
|
|
txtAccessRights: 'Change access rights',
|
|
|
|
tipAccessRights: 'Manage document access rights',
|
|
|
|
labelCoUsersDescr: 'Document is currently being edited by several users.',
|
2017-07-21 10:44:07 +00:00
|
|
|
tipViewUsers: 'View users and manage document access rights',
|
|
|
|
tipDownload: 'Download file',
|
|
|
|
tipPrint: 'Print file',
|
2018-01-24 10:57:58 +00:00
|
|
|
tipGoEdit: 'Edit current file',
|
|
|
|
tipSave: 'Save',
|
|
|
|
tipUndo: 'Undo',
|
2018-03-21 11:28:28 +00:00
|
|
|
tipRedo: 'Redo',
|
2019-05-13 11:45:17 +00:00
|
|
|
tipUndock: 'Undock',
|
2018-03-21 11:28:28 +00:00
|
|
|
textCompactView: 'Hide Toolbar',
|
|
|
|
textHideStatusBar: 'Hide Status Bar',
|
|
|
|
textHideLines: 'Hide Rulers',
|
|
|
|
textZoom: 'Zoom',
|
|
|
|
textAdvSettings: 'Advanced Settings',
|
|
|
|
tipViewSettings: 'View Settings'
|
2017-03-01 13:33:12 +00:00
|
|
|
}
|
|
|
|
}(), Common.Views.Header || {}))
|
2016-03-11 00:48:53 +00:00
|
|
|
});
|