[mobile] Show foreign cursor label, enable collaboration fast mode
This commit is contained in:
parent
f33112be3a
commit
eda4736916
|
@ -1,6 +1,7 @@
|
|||
import React, { Component, Fragment } from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { Device } from '../../../../common/mobile/utils/device'
|
||||
import {observer, inject} from "mobx-react";
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
|
||||
import ContextMenuView, { idContextMenuElement, ActionsWithExtraItems } from '../view/ContextMenu';
|
||||
|
||||
|
@ -23,6 +24,8 @@ class ContextMenuController extends Component {
|
|||
this.onDocumentReady = this.onDocumentReady.bind(this);
|
||||
this.onApiOpenContextMenu = this.onApiOpenContextMenu.bind(this);
|
||||
this.onApiHideContextMenu = this.onApiHideContextMenu.bind(this);
|
||||
this.onApiShowForeignCursorLabel = this.onApiShowForeignCursorLabel.bind(this);
|
||||
this.onApiHideForeignCursorLabel = this.onApiHideForeignCursorLabel.bind(this);
|
||||
}
|
||||
|
||||
onDocumentReady() {
|
||||
|
@ -38,6 +41,8 @@ class ContextMenuController extends Component {
|
|||
const api = Common.EditorApi.get();
|
||||
api.asc_registerCallback('asc_onShowPopMenu', this.onApiOpenContextMenu);
|
||||
api.asc_registerCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
|
||||
api.asc_registerCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
|
||||
api.asc_registerCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
|
||||
}
|
||||
|
||||
offsetPopoverTop(popover) {
|
||||
|
@ -150,12 +155,61 @@ class ContextMenuController extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
onApiShowForeignCursorLabel(UserId, X, Y, color) {
|
||||
/** coauthoring begin **/
|
||||
const tipHeight = 20;
|
||||
|
||||
if (!this.fastCoAuthTips) {
|
||||
this.fastCoAuthTips = [];
|
||||
}
|
||||
let src;
|
||||
for (let i=0; i<this.fastCoAuthTips.length; i++) {
|
||||
if (this.fastCoAuthTips[i].attr('userid') === UserId) {
|
||||
src = this.fastCoAuthTips[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!src) {
|
||||
src = $$(`<div class="username-tip"></div>`);
|
||||
src.attr('userid', UserId);
|
||||
src.css({'background-color': '#'+Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b())});
|
||||
src.text(this.getUserName(UserId));
|
||||
$$('#id_main_parent').append(src);
|
||||
this.fastCoAuthTips.push(src);
|
||||
//src.fadeIn(150);
|
||||
src[0].classList.add('active');
|
||||
|
||||
$$('#id_main_view').append(src);
|
||||
}
|
||||
src.css({
|
||||
top: (Y - tipHeight) + 'px',
|
||||
left: X + 'px'});
|
||||
/** coauthoring end **/
|
||||
}
|
||||
|
||||
onApiHideForeignCursorLabel(userId) {
|
||||
/** coauthoring begin **/
|
||||
for (let i=0; i<this.fastCoAuthTips.length; i++) {
|
||||
if (this.fastCoAuthTips[i].attr('userid') == userId) {
|
||||
const src = this.fastCoAuthTips[i];
|
||||
//this.fastCoAuthTips[i].fadeOut(150, () => {src.remove()});
|
||||
src[0].classList.remove('active');
|
||||
src.remove();
|
||||
this.fastCoAuthTips.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/** coauthoring end **/
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
Common.Notifications.off('document:ready', this.onDocumentReady);
|
||||
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_unregisterCallback('asc_onShowPopMenu', this.onApiOpenContextMenu);
|
||||
api.asc_unregisterCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
|
||||
api.asc_unregisterCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
|
||||
api.asc_unregisterCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import React, { Component } from 'react'
|
||||
import {observer, inject} from "mobx-react"
|
||||
import { LocalStorage } from '../../../utils/LocalStorage';
|
||||
|
||||
class CollaborationController extends Component {
|
||||
constructor(props){
|
||||
|
@ -12,6 +13,52 @@ class CollaborationController extends Component {
|
|||
api.asc_registerCallback('asc_onParticipantsChanged', this.onChangeEditUsers.bind(this));
|
||||
api.asc_registerCallback('asc_onConnectionStateChanged', this.onUserConnection.bind(this));
|
||||
});
|
||||
|
||||
Common.Notifications.on('document:ready', this.onDocumentReady.bind(this));
|
||||
}
|
||||
|
||||
onDocumentReady() {
|
||||
const api = Common.EditorApi.get();
|
||||
const appOptions = this.props.storeAppOptions;
|
||||
/** coauthoring begin **/
|
||||
let isFastCoauth;
|
||||
if (appOptions.isEdit && appOptions.canLicense && !appOptions.isOffline && appOptions.canCoAuthoring) {
|
||||
// Force ON fast co-authoring mode
|
||||
isFastCoauth = true;
|
||||
api.asc_SetFastCollaborative(isFastCoauth);
|
||||
|
||||
if (window.editorType === 'de') {
|
||||
const value = LocalStorage.getItem((isFastCoauth) ? "de-settings-showchanges-fast" : "de-settings-showchanges-strict");
|
||||
if (value !== null) {
|
||||
api.SetCollaborativeMarksShowType(
|
||||
value === 'all' ? Asc.c_oAscCollaborativeMarksShowType.All :
|
||||
value === 'none' ? Asc.c_oAscCollaborativeMarksShowType.None : Asc.c_oAscCollaborativeMarksShowType.LastChanges);
|
||||
} else {
|
||||
api.SetCollaborativeMarksShowType(isFastCoauth ? Asc.c_oAscCollaborativeMarksShowType.None : Asc.c_oAscCollaborativeMarksShowType.LastChanges);
|
||||
}
|
||||
}
|
||||
} else if (!appOptions.isEdit && appOptions.isRestrictedEdit) {
|
||||
isFastCoauth = true;
|
||||
api.asc_SetFastCollaborative(isFastCoauth);
|
||||
window.editorType === 'de' && api.SetCollaborativeMarksShowType(Asc.c_oAscCollaborativeMarksShowType.None);
|
||||
api.asc_setAutoSaveGap(1);
|
||||
} else {
|
||||
isFastCoauth = false;
|
||||
api.asc_SetFastCollaborative(isFastCoauth);
|
||||
window.editorType === 'de' && api.SetCollaborativeMarksShowType(Asc.c_oAscCollaborativeMarksShowType.None);
|
||||
}
|
||||
|
||||
if (appOptions.isEdit) {
|
||||
let value;
|
||||
if (window.editorType === 'sse') {
|
||||
value = appOptions.canAutosave ? 1 : 0; // FORCE AUTOSAVE
|
||||
} else {
|
||||
value = isFastCoauth; // Common.localStorage.getItem("de-settings-autosave");
|
||||
value = (!isFastCoauth && value !== null) ? parseInt(value) : (appOptions.canCoAuthoring ? 1 : 0);
|
||||
}
|
||||
api.asc_setAutoSaveGap(value);
|
||||
}
|
||||
/** coauthoring end **/
|
||||
}
|
||||
|
||||
onChangeEditUsers(users) {
|
||||
|
|
|
@ -62,4 +62,14 @@ export class storeUsers {
|
|||
});
|
||||
return user;
|
||||
}
|
||||
|
||||
searchUserByCurrentId (id) {
|
||||
let user = null;
|
||||
this.users.forEach((item) => {
|
||||
if (item.asc_getId() === id) {
|
||||
user = item;
|
||||
}
|
||||
});
|
||||
return user;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -669,6 +669,22 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
}
|
||||
}
|
||||
|
||||
.username-tip {
|
||||
height: 20px;
|
||||
color: @white;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
z-index: 900;
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.1ms ease-out;
|
||||
opacity: 0;
|
||||
&.active {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -11,7 +11,8 @@ import { Device } from '../../../../common/mobile/utils/device';
|
|||
@inject ( stores => ({
|
||||
isEdit: stores.storeAppOptions.isEdit,
|
||||
canViewComments: stores.storeAppOptions.canViewComments,
|
||||
canReview: stores.storeAppOptions.canReview
|
||||
canReview: stores.storeAppOptions.canReview,
|
||||
users: stores.users
|
||||
}))
|
||||
class ContextMenu extends ContextMenuController {
|
||||
constructor(props) {
|
||||
|
@ -21,12 +22,18 @@ class ContextMenu extends ContextMenuController {
|
|||
this.onApiShowComment = this.onApiShowComment.bind(this);
|
||||
this.onApiHideComment = this.onApiHideComment.bind(this);
|
||||
this.onApiShowChange = this.onApiShowChange.bind(this);
|
||||
this.getUserName = this.getUserName.bind(this);
|
||||
}
|
||||
|
||||
static closeContextMenu() {
|
||||
f7.popover.close(idContextMenuElement, false);
|
||||
}
|
||||
|
||||
getUserName(id) {
|
||||
const user = this.props.users.searchUserByCurrentId(id);
|
||||
return Common.Utils.UserInfoParser.getParsedName(user.asc_getUserName());
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
super.componentWillUnmount();
|
||||
|
||||
|
|
Loading…
Reference in a new issue