[SSE] Editing highlight user name
This commit is contained in:
ShimaginAndrey
parent
4163904940
commit
73e6d1ef6d
|
|
@ -19,7 +19,6 @@ class ContextMenuController extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
this.fastCoAuthTips = [];
|
this.fastCoAuthTips = [];
|
||||||
this.isOpenWindowUser = true;
|
|
||||||
this.onMenuItemClick = this.onMenuItemClick.bind(this);
|
this.onMenuItemClick = this.onMenuItemClick.bind(this);
|
||||||
this.onMenuClosed = this.onMenuClosed.bind(this);
|
this.onMenuClosed = this.onMenuClosed.bind(this);
|
||||||
this.onActionClosed = this.onActionClosed.bind(this);
|
this.onActionClosed = this.onActionClosed.bind(this);
|
||||||
|
|
@ -28,7 +27,6 @@ class ContextMenuController extends Component {
|
||||||
this.onApiHideContextMenu = this.onApiHideContextMenu.bind(this);
|
this.onApiHideContextMenu = this.onApiHideContextMenu.bind(this);
|
||||||
this.onApiShowForeignCursorLabel = this.onApiShowForeignCursorLabel.bind(this);
|
this.onApiShowForeignCursorLabel = this.onApiShowForeignCursorLabel.bind(this);
|
||||||
this.onApiHideForeignCursorLabel = this.onApiHideForeignCursorLabel.bind(this);
|
this.onApiHideForeignCursorLabel = this.onApiHideForeignCursorLabel.bind(this);
|
||||||
this.onApiMouseMove = this.onApiMouseMove.bind(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onDocumentReady() {
|
onDocumentReady() {
|
||||||
|
|
@ -46,7 +44,6 @@ class ContextMenuController extends Component {
|
||||||
api.asc_registerCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
|
api.asc_registerCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
|
||||||
api.asc_registerCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
|
api.asc_registerCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
|
||||||
api.asc_registerCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
|
api.asc_registerCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
|
||||||
api.asc_registerCallback('asc_onMouseMove', this.onApiMouseMove);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
offsetPopoverTop(popover) {
|
offsetPopoverTop(popover) {
|
||||||
|
|
@ -205,52 +202,6 @@ class ContextMenuController extends Component {
|
||||||
/** coauthoring end **/
|
/** coauthoring end **/
|
||||||
}
|
}
|
||||||
|
|
||||||
onApiMouseMove(dataarray) {
|
|
||||||
if ( dataarray[0].asc_getType() === Asc.c_oAscMouseMoveType.LockedObject && this.isOpenWindowUser ) {
|
|
||||||
const tipHeight = 20;
|
|
||||||
this.isOpenWindowUser = false;
|
|
||||||
let XY = [$$("#editor_sdk").offset().left - $(window).scrollLeft(),
|
|
||||||
$$("#editor_sdk").offset().top - $(window).scrollTop()],
|
|
||||||
data = dataarray[0],
|
|
||||||
X = data.asc_getX(),
|
|
||||||
Y = data.asc_getY(),
|
|
||||||
src = $$(`<div class="username-tip"></div>`);
|
|
||||||
|
|
||||||
src.css({
|
|
||||||
height : tipHeight + 'px',
|
|
||||||
position : 'absolute',
|
|
||||||
zIndex : '5000',
|
|
||||||
visibility : 'visible',
|
|
||||||
});
|
|
||||||
|
|
||||||
src.text(this.getUserName(data.asc_getUserId()));
|
|
||||||
src.addClass('active');
|
|
||||||
$$(document.body).append(src);
|
|
||||||
|
|
||||||
let showPoint = [ ($$(window).width() - (X + XY[0])), Y + XY[1] ];
|
|
||||||
|
|
||||||
if ( $$(window).width() - showPoint[0] < src.outerWidth() ) {
|
|
||||||
src.css({
|
|
||||||
backgroundColor: '#ee3525',
|
|
||||||
left: '0px',
|
|
||||||
top: (showPoint[1] - tipHeight) + 'px',
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
src.css({
|
|
||||||
backgroundColor: '#ee3525',
|
|
||||||
right: showPoint[0] + 'px',
|
|
||||||
top: showPoint[1] - 1 + 'px',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.isOpenWindowUser = true;
|
|
||||||
$$('.username-tip').remove();
|
|
||||||
}, 1500);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
Common.Notifications.off('document:ready', this.onDocumentReady);
|
Common.Notifications.off('document:ready', this.onDocumentReady);
|
||||||
|
|
||||||
|
|
@ -259,7 +210,6 @@ class ContextMenuController extends Component {
|
||||||
api.asc_unregisterCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
|
api.asc_unregisterCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
|
||||||
api.asc_unregisterCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
|
api.asc_unregisterCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
|
||||||
api.asc_unregisterCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
|
api.asc_unregisterCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
|
||||||
api.asc_unregisterCallback('asc_onMouseMove', this.onApiMouseMove);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,10 @@ class ContextMenu extends ContextMenuController {
|
||||||
// console.log('context menu controller created');
|
// console.log('context menu controller created');
|
||||||
this.onApiShowComment = this.onApiShowComment.bind(this);
|
this.onApiShowComment = this.onApiShowComment.bind(this);
|
||||||
this.onApiHideComment = this.onApiHideComment.bind(this);
|
this.onApiHideComment = this.onApiHideComment.bind(this);
|
||||||
|
this.isOpenWindowUser = false;
|
||||||
|
this.timer;
|
||||||
this.getUserName = this.getUserName.bind(this);
|
this.getUserName = this.getUserName.bind(this);
|
||||||
|
this.onApiMouseMove = this.onApiMouseMove.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
static closeContextMenu() {
|
static closeContextMenu() {
|
||||||
|
|
@ -43,6 +46,7 @@ class ContextMenu extends ContextMenuController {
|
||||||
const api = Common.EditorApi.get();
|
const api = Common.EditorApi.get();
|
||||||
api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
|
api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
|
||||||
api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
|
api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
|
||||||
|
api.asc_unregisterCallback('asc_onMouseMove', this.onApiMouseMove);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -164,6 +168,7 @@ class ContextMenu extends ContextMenuController {
|
||||||
const api = Common.EditorApi.get();
|
const api = Common.EditorApi.get();
|
||||||
api.asc_registerCallback('asc_onShowComment', this.onApiShowComment);
|
api.asc_registerCallback('asc_onShowComment', this.onApiShowComment);
|
||||||
api.asc_registerCallback('asc_onHideComment', this.onApiHideComment);
|
api.asc_registerCallback('asc_onHideComment', this.onApiHideComment);
|
||||||
|
api.asc_registerCallback('asc_onMouseMove', this.onApiMouseMove);
|
||||||
}
|
}
|
||||||
|
|
||||||
initMenuItems() {
|
initMenuItems() {
|
||||||
|
|
@ -230,6 +235,88 @@ class ContextMenu extends ContextMenuController {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onApiMouseMove(dataarray) {
|
||||||
|
let index_hyperlink,
|
||||||
|
index_comments,
|
||||||
|
index_locked,
|
||||||
|
index_column, index_row,
|
||||||
|
index_filter,
|
||||||
|
index_slicer,
|
||||||
|
index_foreign;
|
||||||
|
for (let i = dataarray.length; i > 0; i--) {
|
||||||
|
switch (dataarray[i-1].asc_getType()) {
|
||||||
|
case Asc.c_oAscMouseMoveType.Hyperlink:
|
||||||
|
index_hyperlink = i;
|
||||||
|
break;
|
||||||
|
case Asc.c_oAscMouseMoveType.Comment:
|
||||||
|
index_comments = i;
|
||||||
|
break;
|
||||||
|
case Asc.c_oAscMouseMoveType.LockedObject:
|
||||||
|
index_locked = i;
|
||||||
|
break;
|
||||||
|
case Asc.c_oAscMouseMoveType.ResizeColumn:
|
||||||
|
index_column = i;
|
||||||
|
break;
|
||||||
|
case Asc.c_oAscMouseMoveType.ResizeRow:
|
||||||
|
index_row = i;
|
||||||
|
break;
|
||||||
|
case Asc.c_oAscMouseMoveType.Filter:
|
||||||
|
index_filter = i;
|
||||||
|
break;
|
||||||
|
case Asc.c_oAscMouseMoveType.Tooltip:
|
||||||
|
index_slicer = i;
|
||||||
|
break;
|
||||||
|
case Asc.c_oAscMouseMoveType.ForeignSelect:
|
||||||
|
index_foreign = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!index_locked && this.isOpenWindowUser) {
|
||||||
|
this.timer = setTimeout(() => $$('.username-tip').remove(), 1500);
|
||||||
|
this.isOpenWindowUser = false;
|
||||||
|
} else {
|
||||||
|
clearTimeout(this.timer);
|
||||||
|
$$('.username-tip').remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (index_locked ) {
|
||||||
|
const tipHeight = 20;
|
||||||
|
let editorOffset = $$("#editor_sdk").offset(),
|
||||||
|
XY = [ editorOffset.left - $(window).scrollLeft(), editorOffset.top - $(window).scrollTop()],
|
||||||
|
data = dataarray[index_locked - 1],
|
||||||
|
X = data.asc_getX(),
|
||||||
|
Y = data.asc_getY(),
|
||||||
|
src = $$(`<div class="username-tip"></div>`);
|
||||||
|
|
||||||
|
src.css({
|
||||||
|
height : tipHeight + 'px',
|
||||||
|
position : 'absolute',
|
||||||
|
zIndex : '5000',
|
||||||
|
visibility : 'visible',
|
||||||
|
});
|
||||||
|
|
||||||
|
src.text(this.getUserName(data.asc_getUserId()));
|
||||||
|
src.addClass('active');
|
||||||
|
$$(document.body).append(src);
|
||||||
|
|
||||||
|
let showPoint = [ ($$(window).width() - (X + XY[0])), Y + XY[1] ];
|
||||||
|
|
||||||
|
if ( $$(window).width() - showPoint[0] < src.outerWidth() ) {
|
||||||
|
src.css({
|
||||||
|
left: '0px',
|
||||||
|
top: (showPoint[1] - tipHeight) + 'px',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
src.css({
|
||||||
|
right: showPoint[0] + 'px',
|
||||||
|
top: showPoint[1] - 1 + 'px',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.isOpenWindowUser = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
initExtraItems () {
|
initExtraItems () {
|
||||||
return (this.extraItems && this.extraItems.length > 0 ? this.extraItems : []);
|
return (this.extraItems && this.extraItems.length > 0 ? this.extraItems : []);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -46,6 +46,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.username-tip.active {
|
||||||
|
background-color: #ee3525;
|
||||||
|
}
|
||||||
|
|
||||||
// Skeleton of workbook
|
// Skeleton of workbook
|
||||||
|
|
||||||
.doc-placeholder {
|
.doc-placeholder {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue