-
Notifications
You must be signed in to change notification settings - Fork 19
Expand file tree
/
Copy pathtip.js
More file actions
145 lines (127 loc) · 3.78 KB
/
Copy pathtip.js
File metadata and controls
145 lines (127 loc) · 3.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import $ from 'jquery';
import BasicTip from './basic-tip';
import 'alice-poptip';
import './tip.css';
// 气泡提示弹出组件
// ---
const Tip = BasicTip.extend({
attrs: {
template: `<div class="ui-poptip">
<div class="ui-poptip-shadow">
<div class="ui-poptip-container">
<div class="ui-poptip-arrow">
<em></em>
<span></span>
</div>
<div class="ui-poptip-content" data-role="content">
</div>
</div>
</div>
</div>`,
// 提示内容
content: 'A TIP BOX',
// 箭头位置
// 按钟表点位置，目前支持1、2、5、7、10、11点位置
// https://i.alipayobjects.com/e/201307/jBty06lQT.png
arrowPosition: 7,
align: {
setter: function (val) {
// 用户初始化时主动设置了 align
// 且并非来自 arrowPosition 的设置
if (val && !val.comeFromArrowPosition) {
this._specifiedAlign = true;
}
return val;
}
},
// 颜色 [yellow|blue|white]
theme: 'yellow',
// 当弹出层显示在屏幕外时，是否自动转换浮层位置
inViewport: false
},
setup: function () {
BasicTip.superclass.setup.call(this);
this._originArrowPosition = this.get('arrowPosition');
this.after('show', function () {
this._makesureInViewport();
});
},
_makesureInViewport: function () {
if (!this.get('inViewport')) {
return;
}
var ap = this._originArrowPosition,
scrollTop = $(window).scrollTop(),
viewportHeight = $(window).outerHeight(),
elemHeight = this.element.height() + this.get('distance'),
triggerTop = this.get('trigger').offset().top,
triggerHeight = this.get('trigger').height(),
arrowMap = {
'1': 5,
'5': 1,
'7': 11,
'11': 7
};
if ((ap == 11 || ap == 1) && (triggerTop + triggerHeight > scrollTop + viewportHeight - elemHeight)) {
// tip 溢出屏幕下方
this.set('arrowPosition', arrowMap[ap]);
} else if ((ap == 7 || ap == 5) && (triggerTop < scrollTop + elemHeight)) {
// tip 溢出屏幕上方
this.set('arrowPosition', arrowMap[ap]);
} else {
// 复原
this.set('arrowPosition', this._originArrowPosition);
}
},
// 用于 set 属性后的界面更新
_onRenderArrowPosition: function (val, prev) {
val = parseInt(val, 10);
var arrow = this.$('.ui-poptip-arrow');
arrow.removeClass('ui-poptip-arrow-' + prev).addClass('ui-poptip-arrow-' + val);
// 用户设置了 align
// 则直接使用 align 表示的位置信息，忽略 arrowPosition
if (this._specifiedAlign) {
return;
}
var direction = '',
arrowShift = 0;
if (val === 10) {
direction = 'right';
arrowShift = 20;
}
else if (val === 11) {
direction = 'down';
arrowShift = 22;
}
else if (val === 1) {
direction = 'down';
arrowShift = -22;
}
else if (val === 2) {
direction = 'left';
arrowShift = 20;
}
else if (val === 5) {
direction = 'up';
arrowShift = -22;
}
else if (val === 7) {
direction = 'up';
arrowShift = 22;
}
this.set('direction', direction);
this.set('arrowShift', arrowShift);
this._setAlign();
},
_onRenderWidth: function (val) {
this.$('[data-role="content"]').css('width', val);
},
_onRenderHeight: function (val) {
this.$('[data-role="content"]').css('height', val);
},
_onRenderTheme: function (val, prev) {
this.element.removeClass('ui-poptip-' + prev);
this.element.addClass('ui-poptip-' + val);
}
});
module.exports = Tip;