mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-25 12:18:47 +08:00
[PE SSE] Add preview color and tip to eyedropper
This commit is contained in:
JuliaSvinareva
@ -117,6 +117,18 @@ define([
|
||||
isHidden: true,
|
||||
isVisible: false
|
||||
};
|
||||
me.eyedropperTip = {
|
||||
toolTip: new Common.UI.Tooltip({
|
||||
owner: this,
|
||||
html: true,
|
||||
cls: 'eyedropper-tooltip'
|
||||
}),
|
||||
isHidden: true,
|
||||
isVisible: false,
|
||||
eyedropperColor: null,
|
||||
tipInterval: null,
|
||||
isTipVisible: false
|
||||
}
|
||||
|
||||
me.userTooltip = true;
|
||||
me.wrapEvents = {
|
||||
@ -161,6 +173,7 @@ define([
|
||||
/** coauthoring begin **/
|
||||
me.userTipHide();
|
||||
/** coauthoring end **/
|
||||
me.hideEyedropper();
|
||||
me.mode && me.mode.isDesktopApp && me.api && me.api.asc_onShowPopupWindow();
|
||||
},
|
||||
'modal:show': function(e){
|
||||
@ -173,6 +186,7 @@ define([
|
||||
me.userTipHide();
|
||||
/** coauthoring end **/
|
||||
me.hideTips();
|
||||
me.hideEyedropper();
|
||||
me.onDocumentHolderResize();
|
||||
},
|
||||
'preview:show': function(e){
|
||||
@ -838,6 +852,9 @@ define([
|
||||
this.screenTip.isVisible = false;
|
||||
this.screenTip.toolTip.hide();
|
||||
}
|
||||
if (this.eyedropperTip.isHidden) {
|
||||
this.hideEyedropper();
|
||||
}
|
||||
},
|
||||
|
||||
onMouseMove: function(moveData) {
|
||||
@ -896,6 +913,57 @@ define([
|
||||
screenTip.toolTip.getBSTip().$tip.css({top: showPoint[1] + 'px', left: showPoint[0] + 'px'});
|
||||
}
|
||||
}
|
||||
else if (moveData.get_Type()==Asc.c_oAscMouseMoveDataTypes.Eyedropper) {
|
||||
if (me.eyedropperTip.isTipVisible) {
|
||||
me.eyedropperTip.isTipVisible = false;
|
||||
me.eyedropperTip.toolTip.hide();
|
||||
}
|
||||
|
||||
var color = moveData.get_EyedropperColor().asc_getColor(),
|
||||
r = color.get_r(),
|
||||
g = color.get_g(),
|
||||
b = color.get_b(),
|
||||
hex = Common.Utils.ThemeColor.getHexColor(r,g,b);
|
||||
if (!me.eyedropperTip.eyedropperColor) {
|
||||
var colorEl = $(document.createElement("div"));
|
||||
colorEl.addClass('eyedropper-color');
|
||||
colorEl.appendTo(document.body);
|
||||
me.eyedropperTip.eyedropperColor = colorEl;
|
||||
$('#id_main_view').on('mouseleave', _.bind(me.hideEyedropper, me));
|
||||
}
|
||||
me.eyedropperTip.eyedropperColor.css({
|
||||
backgroundColor: '#' + hex,
|
||||
left: (moveData.get_X() + me._XY[0] + 23) + 'px',
|
||||
top: (moveData.get_Y() + me._XY[1] - 53) + 'px'
|
||||
});
|
||||
me.eyedropperTip.isVisible = true;
|
||||
|
||||
if (me.eyedropperTip.tipInterval) {
|
||||
clearInterval(me.eyedropperTip.tipInterval);
|
||||
}
|
||||
me.eyedropperTip.tipInterval = setInterval(function () {
|
||||
clearInterval(me.eyedropperTip.tipInterval);
|
||||
if (me.eyedropperTip.isVisible) {
|
||||
ToolTip = '<div>RGB(' + r + ',' + g + ',' + b + ')</div>' +
|
||||
'<div>' + moveData.get_EyedropperColor().asc_getName() + '</div>';
|
||||
me.eyedropperTip.toolTip.setTitle(ToolTip);
|
||||
me.eyedropperTip.isTipVisible = true;
|
||||
me.eyedropperTip.toolTip.show([-10000, -10000]);
|
||||
me.eyedropperTip.tipWidth = me.eyedropperTip.toolTip.getBSTip().$tip.width();
|
||||
showPoint = [moveData.get_X(), moveData.get_Y()];
|
||||
showPoint[1] += (me._XY[1] - 57);
|
||||
showPoint[0] += (me._XY[0] + 58);
|
||||
if (showPoint[0] + me.eyedropperTip.tipWidth > me._BodyWidth ) {
|
||||
showPoint[0] = showPoint[0] - me.eyedropperTip.tipWidth - 40;
|
||||
}
|
||||
me.eyedropperTip.toolTip.getBSTip().$tip.css({
|
||||
top: showPoint[1] + 'px',
|
||||
left: showPoint[0] + 'px'
|
||||
});
|
||||
}
|
||||
}, 800);
|
||||
me.eyedropperTip.isHidden = false;
|
||||
}
|
||||
/** coauthoring begin **/
|
||||
else if (moveData.get_Type()==2 && me.mode.isEdit && me.isUserVisible(moveData.get_UserId())) { // 2 - locked object
|
||||
var src;
|
||||
@ -972,6 +1040,17 @@ define([
|
||||
/** coauthoring end **/
|
||||
},
|
||||
|
||||
hideEyedropper: function () {
|
||||
if (this.eyedropperTip.isVisible) {
|
||||
this.eyedropperTip.isVisible = false;
|
||||
this.eyedropperTip.eyedropperColor.css({left: '-1000px', top: '-1000px'});
|
||||
}
|
||||
if (this.eyedropperTip.isTipVisible) {
|
||||
this.eyedropperTip.isTipVisible = false;
|
||||
this.eyedropperTip.toolTip.hide();
|
||||
}
|
||||
},
|
||||
|
||||
onDialogAddHyperlink: function() {
|
||||
var win, props, text;
|
||||
var me = this;
|
||||
|
||||
@ -109,6 +109,9 @@ define([
|
||||
input_msg: {},
|
||||
foreignSelect: {
|
||||
ttHeight: 20
|
||||
},
|
||||
eyedropper: {
|
||||
isHidden: true
|
||||
}
|
||||
};
|
||||
me.mouse = {};
|
||||
@ -1516,6 +1519,17 @@ define([
|
||||
}
|
||||
},
|
||||
|
||||
hideEyedropperTip: function () {
|
||||
if (!this.tooltips.eyedropper.isHidden) {
|
||||
this.tooltips.eyedropper.color.css({left: '-1000px', top: '-1000px'});
|
||||
if (this.tooltips.eyedropper.ref) {
|
||||
this.tooltips.eyedropper.ref.hide();
|
||||
this.tooltips.eyedropper.ref = undefined;
|
||||
}
|
||||
this.tooltips.eyedropper.isHidden = true;
|
||||
}
|
||||
},
|
||||
|
||||
onApiMouseMove: function(dataarray) {
|
||||
if (!this._isFullscreenMenu && dataarray.length) {
|
||||
var index_hyperlink,
|
||||
@ -1526,7 +1540,8 @@ define([
|
||||
index_column, index_row,
|
||||
index_filter,
|
||||
index_slicer,
|
||||
index_foreign;
|
||||
index_foreign,
|
||||
index_eyedropper;
|
||||
for (var i = dataarray.length; i > 0; i--) {
|
||||
switch (dataarray[i-1].asc_getType()) {
|
||||
case Asc.c_oAscMouseMoveType.Hyperlink:
|
||||
@ -1555,6 +1570,9 @@ define([
|
||||
case Asc.c_oAscMouseMoveType.ForeignSelect:
|
||||
index_foreign = i;
|
||||
break;
|
||||
case Asc.c_oAscMouseMoveType.Eyedropper:
|
||||
index_eyedropper = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1569,6 +1587,7 @@ define([
|
||||
filterTip = me.tooltips.filter,
|
||||
slicerTip = me.tooltips.slicer,
|
||||
foreignSelect = me.tooltips.foreignSelect,
|
||||
eyedropperTip = me.tooltips.eyedropper,
|
||||
pos = [
|
||||
me.documentHolder.cmpEl.offset().left - $(window).scrollLeft(),
|
||||
me.documentHolder.cmpEl.offset().top - $(window).scrollTop()
|
||||
@ -1626,6 +1645,9 @@ define([
|
||||
filterTip.isHidden = true;
|
||||
}
|
||||
}
|
||||
if (!index_eyedropper) {
|
||||
me.hideEyedropperTip();
|
||||
}
|
||||
// show tooltips
|
||||
|
||||
if (index_hyperlink) {
|
||||
@ -1937,6 +1959,72 @@ define([
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (index_eyedropper) {
|
||||
eyedropperTip.isHidden = false;
|
||||
if (eyedropperTip.ref) {
|
||||
eyedropperTip.ref.hide();
|
||||
eyedropperTip.ref = undefined;
|
||||
}
|
||||
|
||||
var data = dataarray[index_eyedropper-1],
|
||||
color = data.asc_getColor(),
|
||||
r = color.get_r(),
|
||||
g = color.get_g(),
|
||||
b = color.get_b();
|
||||
if (r) {
|
||||
var hex = Common.Utils.ThemeColor.getHexColor(r, g, b),
|
||||
name = color.asc_getName();
|
||||
|
||||
if (!eyedropperTip.color) {
|
||||
var colorEl = $(document.createElement("div"));
|
||||
colorEl.addClass('eyedropper-color');
|
||||
colorEl.appendTo(document.body);
|
||||
eyedropperTip.color = colorEl;
|
||||
$('#ws-canvas-outer').on('mouseleave', _.bind(me.hideEyedropperTip, me));
|
||||
}
|
||||
eyedropperTip.color.css({
|
||||
backgroundColor: '#' + hex,
|
||||
left: (data.asc_getX() + pos[0] + 23) + 'px',
|
||||
top: (data.asc_getY() + pos[1] - 53) + 'px'
|
||||
});
|
||||
if (eyedropperTip.tipInterval) {
|
||||
clearInterval(eyedropperTip.tipInterval);
|
||||
}
|
||||
eyedropperTip.tipInterval = setInterval(function () {
|
||||
clearInterval(eyedropperTip.tipInterval);
|
||||
if (!me.tooltips.eyedropper.isHidden) {
|
||||
if (!eyedropperTip.parentEl) {
|
||||
eyedropperTip.parentEl = $('<div id="tip-container-eyedroppertip" style="position: absolute; z-index: 10000;"></div>');
|
||||
me.documentHolder.cmpEl.append(eyedropperTip.parentEl);
|
||||
}
|
||||
|
||||
var title = '<div>RGB(' + r + ',' + g + ',' + b + ')</div>' +
|
||||
'<div>' + name + '</div>';
|
||||
if (!eyedropperTip.ref) {
|
||||
eyedropperTip.ref = new Common.UI.Tooltip({
|
||||
owner : eyedropperTip.parentEl,
|
||||
html : true,
|
||||
title : title,
|
||||
cls : 'eyedropper-tooltip'
|
||||
});
|
||||
}
|
||||
eyedropperTip.ref.show([-10000, -10000]);
|
||||
eyedropperTip.tipWidth = eyedropperTip.ref.getBSTip().$tip.width();
|
||||
showPoint = [data.asc_getX(), data.asc_getY()];
|
||||
showPoint[1] += (pos[1] - 57);
|
||||
showPoint[0] += (pos[0] + 58);
|
||||
if (showPoint[0] + eyedropperTip.tipWidth > me.tooltips.coauth.bodyWidth ) {
|
||||
showPoint[0] = showPoint[0] - eyedropperTip.tipWidth - 40;
|
||||
}
|
||||
eyedropperTip.ref.getBSTip().$tip.css({
|
||||
top: showPoint[1] + 'px',
|
||||
left: showPoint[0] + 'px'
|
||||
});
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user