[common] Update bootstrap (fix tooltip)

This commit is contained in:
JuliaSvinareva 2020-08-28 19:29:20 +03:00
parent cb88f90710
commit 9e4abe9225
3 changed files with 75 additions and 50 deletions

View file

@ -100,7 +100,7 @@
this.$element.tooltip({ this.$element.tooltip({
title : opts.title, title : opts.title,
trigger : 'manual', trigger : 'manual',
placement : opts.placement || 'top', placement : opts.placement || 'cursor',
offset : opts.offset || 0, offset : opts.offset || 0,
cls : opts.cls, cls : opts.cls,
html : opts.html, html : opts.html,
@ -109,7 +109,7 @@
if (opts.hideonclick) { if (opts.hideonclick) {
var tip = this.$element.data('bs.tooltip'); var tip = this.$element.data('bs.tooltip');
if (tip) tip.tip().on('click', function() {tip.hide();}); if (tip) tip.getTipElement().on('click', function() {tip.hide();});
} }
this.$element.on('shown.bs.tooltip', _.bind(this.onTipShown, this)); this.$element.on('shown.bs.tooltip', _.bind(this.onTipShown, this));
@ -126,7 +126,7 @@
setTitle: function(title) { setTitle: function(title) {
var tip = this.getBSTip(); var tip = this.getBSTip();
if (tip) tip.options.title = title; if (tip) tip.config.title = title;
}, },
updateTitle: function() { updateTitle: function() {

View file

@ -104,18 +104,18 @@ define([
this._timeout = 0; this._timeout = 0;
this._hoverState = ''; this._hoverState = '';
this._activeTrigger = {}; this._activeTrigger = {};
this._popper = null; // Protected this._popper = null;
this.element = element; this.element = element;
this.config = this._getConfig(config); this.config = this._getConfig(config);
this.tip = null; this.tip = null;
this._setListeners(); this._setListeners();
/*if (this.config.placement == 'cursor') { if (this.config.placement == 'cursor') {
if (/hover/.exec(this.config.trigger)) { if (/hover/.exec(this.config.trigger)) {
$(this.element).on('mousemove.tooltip', this.config.selector, $.proxy(this.mousemove, this)) $(this.element).on('mousemove.tooltip', this.config.selector, $.proxy(this.mousemove, this));
} }
}*/ }
if (this.config.zIndex) { if (this.config.zIndex) {
$(this.getTipElement()).css('z-index', this.config.zIndex); $(this.getTipElement()).css('z-index', this.config.zIndex);
@ -128,25 +128,28 @@ define([
}}); }});
}, },
/*mousemove: function (e) { mousemove: function (e) {
this.mouse = {clientX: e.clientX*Common.Utils.zoom(), clientY: e.clientY*Common.Utils.zoom()}; this.mouse = {clientX: e.clientX*Common.Utils.zoom(), clientY: e.clientY*Common.Utils.zoom()};
},*/ },
_leave: function(obj) { _leave: function(event) {
_superclass.prototype._leave.apply(this, arguments); _superclass.prototype._leave.apply(this, arguments);
this.dontShow = undefined; this.dontShow = undefined;
this.mouse = undefined; this.mouse = undefined;
}, },
show: function (at) { show: function (at) {
var _this = this; var me = this;
if (this.isWithContent() && this._isEnabled && !this.dontShow) { if (this.isWithContent() && this._isEnabled && !this.dontShow) {
if (!$(this.element).is(":visible") && $(this.element).closest('[role=menu]').length > 0) return; if (!$(this.element).is(":visible") && $(this.element).closest('[role=menu]').length > 0) return;
var tip = this.getTipElement();
if (this.config.cls) $(tip).addClass(this.config.cls);
var placementEx = (typeof this.config.placement !== 'function') ? /^([a-zA-Z]+)-?([a-zA-Z]*)$/.exec(this.config.placement) : null; var placementEx = (typeof this.config.placement !== 'function') ? /^([a-zA-Z]+)-?([a-zA-Z]*)$/.exec(this.config.placement) : null;
if (!at && placementEx && !placementEx[2].length && this.config.placement !== 'cursor' || typeof this.config.placement === 'function') { if ((!at && placementEx && this.config.placement !== 'cursor') || (typeof this.config.placement === 'function')) {
_superclass.prototype.show.apply(this, arguments); _superclass.prototype.show.apply(this, arguments);
} else { } else {
var showEvent = $.Event(this.constructor.Event.SHOW); var showEvent = $.Event(this.constructor.Event.SHOW);
@ -154,9 +157,15 @@ define([
if (showEvent.isDefaultPrevented()) { if (showEvent.isDefaultPrevented()) {
return; return;
} }
var tip = this.getTipElement();
this.setContent(); this.setContent();
var placement = this.config.placement; if (this.config.animation) {
$(tip).addClass('fade');
}
var placement = typeof this.config.placement === 'function' ? this.config.placement.call(this, tip, this.element) : this.config.placement;
if (placement !== 'cursor') {
var attachment = this._getAttachment(placement);
this.addAttachmentClass(attachment);
}
var container = this._getContainer(); var container = this._getContainer();
$(tip).data(this.constructor.DATA_KEY, this); $(tip).data(this.constructor.DATA_KEY, this);
if (!$.contains(this.element.ownerDocument.documentElement, this.tip)) { if (!$.contains(this.element.ownerDocument.documentElement, this.tip)) {
@ -164,33 +173,51 @@ define([
} }
$(this.element).trigger(this.constructor.Event.INSERTED); $(this.element).trigger(this.constructor.Event.INSERTED);
if (placement === 'cursor') { if (placement === 'cursor') {
if (at) { if (typeof at == "object") {
this.mouse = {clientX: at[0], clientY: at[1]}; var innerWidth = Common.Utils.innerWidth(),
} else if (!this.mouse) { innerHeight = Common.Utils.innerHeight();
this.mouse = {clientX: 0, clientY: 0}; var tp = {left: at[0], top: at[1]};
if (tp.left + $(tip).width() > innerWidth) {
tp.left = at[0] - $(tip).width()/2 - 10;
} else {
tp.left = at[0] + $(tip).width()/2 + 18;
}
if (tp.top + $(tip).height() > innerHeight) {
tp.top = innerHeight - $(tip).height() - 30;
} else {
tp.top = at[1] + 15;
}
} }
var ref = { function generateGetBoundingClientRect (x, y) {
getBoundingClientRect: function getBoundingClientRect() { return function () {
return { return {
top: _this.mouse.clientY, top: y,
right: _this.mouse.clientX, right: x,
bottom: _this.mouse.clientY, bottom: y,
left: _this.mouse.clientX, left: x,
width: 0, width: 0,
height: 0 height: 0
}; }
} };
}
var virtualElement = {
getBoundingClientRect: generateGetBoundingClientRect(),
}; };
this._popper = new Popper(ref, tip, { this._popper = new Popper(virtualElement, tip, {
onCreate: function onCreate(_ref) { modifiers: {
var instance = _ref.instance; offset: this._getOffset(),
document.onmousemove = function (e) { arrow: {
var x = e.clientX * Common.Utils.zoom(); enabled: false
var y = e.clientY * Common.Utils.zoom(); },
preventOverflow: {
_this.mouse = {clientX: x, clientY: y}; boundariesElement: this.config.boundary
instance.scheduleUpdate(); }
}; },
onCreate: function onCreate() {
var x = tp.left;
var y = tp.top;
virtualElement.getBoundingClientRect = generateGetBoundingClientRect(x, y);
me.update();
} }
}); });
} }
@ -201,27 +228,25 @@ define([
$(document.body).children().on('mouseover', null, $.noop); $(document.body).children().on('mouseover', null, $.noop);
} }
var prevHoverState = _this._hoverState; var prevHoverState = me._hoverState;
_this._hoverState = null; me._hoverState = null;
$(_this.element).trigger(_this.constructor.Event.SHOWN); $(me.element).trigger(me.constructor.Event.SHOWN);
if (prevHoverState === 'out') { if (prevHoverState === 'out') {
_this._leave(null, _this); me._leave(null, me);
} }
} }
} }
clearTimeout(me.timeout);
clearTimeout(_this.timeout); me.timeout = setTimeout(function () {
_this.timeout = setTimeout(function () { if (prevHoverState == 'show') me.hide();
if (_this.hoverState == 'in') _this.hide(); me.dontShow = false;
_this.dontShow = false;
}, 5000); }, 5000);
}, },
/*moveArrow: function () { moveArrow: function () {
var $arrow = this.tip().find(".tooltip-arrow, .arrow"); var $arrow = this.tip().find(".tooltip-arrow, .arrow");
var new_arrow_position = 10; var new_arrow_position = 10;
switch (this.options.placement) { switch (this.options.placement) {
@ -234,7 +259,7 @@ define([
$arrow.css("right", new_arrow_position); $arrow.css("right", new_arrow_position);
break; break;
} }
},*/ },
_enter: function(event, context) { _enter: function(event, context) {
if (event.type !== 'mouseenter') return; if (event.type !== 'mouseenter') return;

View file

@ -219,12 +219,12 @@ define([
}); });
this.btnZoomUp = new Common.UI.Button({ this.btnZoomUp = new Common.UI.Button({
hintAnchor: 'top-right' hintAnchor: 'top'
}); });
this.btnLanguage = new Common.UI.Button({ this.btnLanguage = new Common.UI.Button({
// el: panelLang, // el: panelLang,
hintAnchor: 'top-left', hintAnchor: 'top',
disabled: true disabled: true
}); });