SynchronizeTip: added 'left' placement, added option for changing link text and visibility.

Bug with creating several synchronize tips.
This commit is contained in:
Julia Radzhabova 2017-11-08 17:35:23 +03:00
parent d1bdace072
commit 5623c7dd3e
2 changed files with 28 additions and 4 deletions

View file

@ -43,7 +43,8 @@ define([
options : {
target : $(document.body),
text : '',
placement: 'right'
placement: 'right',
showLink: true
},
template: _.template([
@ -54,7 +55,9 @@ define([
'<div class="tip-text" style="width: 260px;"><%= scope.text %></div>',
'<div class="close img-commonctrl"></div>',
'</div>',
'<div class="show-link"><label><%= scope.textDontShow %></label></div>',
'<% if ( scope.showLink ) { %>',
'<div class="show-link"><label><%= scope.textLink %></label></div>',
'<% } %>',
'</div>',
'</div>'
].join('')),
@ -65,7 +68,9 @@ define([
Common.UI.BaseView.prototype.initialize.call(this, options);
this.target = this.options.target;
this.text = !_.isEmpty(this.options.text) ? this.options.text : this.textSynchronize;
this.textLink = !_.isEmpty(this.options.textLink) ? this.options.textLink : this.textDontShow;
this.placement = this.options.placement;
this.showLink = this.options.showLink;
},
render: function() {
@ -95,8 +100,12 @@ define([
applyPlacement: function () {
var showxy = this.target.offset();
(this.placement == 'top') ? this.cmpEl.css({bottom : Common.Utils.innerHeight() - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'})
: this.cmpEl.css({top : showxy.top + this.target.height()/2 + 'px', left: showxy.left + this.target.width() + 'px'});
if (this.placement == 'top')
this.cmpEl.css({bottom : Common.Utils.innerHeight() - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'});
else if (this.placement == 'left')
this.cmpEl.css({top : showxy.top + this.target.height()/2 + 'px', right: Common.Utils.innerWidth() - showxy.left - 5 + 'px'});
else // right
this.cmpEl.css({top : showxy.top + this.target.height()/2 + 'px', left: showxy.left + this.target.width() + 'px'});
},
isVisible: function() {

View file

@ -23,6 +23,21 @@
}
}
&.left {
margin: -32px 15px 0 0;
.tip-arrow {
right: -15px;
top: 20px;
width: 15px;
height: 30px;
&:after {
top: 5px;
left: -8px;
}
}
}
&.top {
margin: 0 -32px 15px 0;