[SSE] Editing highlight user name

This commit is contained in:
ShimaginAndrey 2021-08-31 17:52:12 +03:00
parent 4163904940
commit 73e6d1ef6d
3 changed files with 91 additions and 50 deletions

View file

@ -19,7 +19,6 @@ class ContextMenuController extends Component {
};
this.fastCoAuthTips = [];
this.isOpenWindowUser = true;
this.onMenuItemClick = this.onMenuItemClick.bind(this);
this.onMenuClosed = this.onMenuClosed.bind(this);
this.onActionClosed = this.onActionClosed.bind(this);
@ -28,7 +27,6 @@ class ContextMenuController extends Component {
this.onApiHideContextMenu = this.onApiHideContextMenu.bind(this);
this.onApiShowForeignCursorLabel = this.onApiShowForeignCursorLabel.bind(this);
this.onApiHideForeignCursorLabel = this.onApiHideForeignCursorLabel.bind(this);
this.onApiMouseMove = this.onApiMouseMove.bind(this);
}
onDocumentReady() {
@ -46,7 +44,6 @@ class ContextMenuController extends Component {
api.asc_registerCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
api.asc_registerCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
api.asc_registerCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
api.asc_registerCallback('asc_onMouseMove', this.onApiMouseMove);
}
offsetPopoverTop(popover) {
@ -205,52 +202,6 @@ class ContextMenuController extends Component {
/** 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() {
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_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
api.asc_unregisterCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
api.asc_unregisterCallback('asc_onMouseMove', this.onApiMouseMove);
}
componentDidMount() {

View file

@ -25,7 +25,10 @@ class ContextMenu extends ContextMenuController {
// console.log('context menu controller created');
this.onApiShowComment = this.onApiShowComment.bind(this);
this.onApiHideComment = this.onApiHideComment.bind(this);
this.isOpenWindowUser = false;
this.timer;
this.getUserName = this.getUserName.bind(this);
this.onApiMouseMove = this.onApiMouseMove.bind(this);
}
static closeContextMenu() {
@ -43,6 +46,7 @@ class ContextMenu extends ContextMenuController {
const api = Common.EditorApi.get();
api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
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();
api.asc_registerCallback('asc_onShowComment', this.onApiShowComment);
api.asc_registerCallback('asc_onHideComment', this.onApiHideComment);
api.asc_registerCallback('asc_onMouseMove', this.onApiMouseMove);
}
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 () {
return (this.extraItems && this.extraItems.length > 0 ? this.extraItems : []);
}

View file

@ -46,6 +46,10 @@
}
}
.username-tip.active {
background-color: #ee3525;
}
// Skeleton of workbook
.doc-placeholder {