tao_popover 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/dist/tao_popover.css DELETED
@@ -1,89 +0,0 @@
1
- tao-popover {
2
- display: none;
3
- position: absolute;
4
- left: -9999px;
5
- top: -9999px;
6
- z-index: 200; }
7
- tao-popover[active] {
8
- display: block; }
9
- tao-popover .tao-popover-content {
10
- padding: 10px 15px;
11
- background: #fff;
12
- border: .5px solid #ddd;
13
- border-radius: 2px;
14
- box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
15
- white-space: nowrap; }
16
- tao-popover .tao-popover-arrow {
17
- position: absolute;
18
- width: 16px;
19
- height: 16px; }
20
- tao-popover .tao-popover-arrow .arrow {
21
- font-size: 0;
22
- height: 0;
23
- width: 0;
24
- border-style: solid;
25
- border-width: 8px;
26
- position: absolute;
27
- left: 0;
28
- top: 0; }
29
- tao-popover[direction='right-top'] .tao-popover-arrow, tao-popover[direction='right-bottom'] .tao-popover-arrow, tao-popover[direction='right-middle'] .tao-popover-arrow {
30
- left: -16px; }
31
- tao-popover[direction='right-top'] .arrow-basic, tao-popover[direction='right-bottom'] .arrow-basic, tao-popover[direction='right-middle'] .arrow-basic {
32
- border-color: transparent #fff transparent transparent;
33
- left: 1px; }
34
- tao-popover[direction='right-top'] .arrow-border, tao-popover[direction='right-bottom'] .arrow-border, tao-popover[direction='right-middle'] .arrow-border {
35
- border-color: transparent #ddd transparent transparent;
36
- left: 0px; }
37
- tao-popover[direction='right-top'] .arrow-shadow, tao-popover[direction='right-bottom'] .arrow-shadow, tao-popover[direction='right-middle'] .arrow-shadow {
38
- border-color: transparent rgba(0, 0, 0, 0.08) transparent transparent;
39
- left: -1px; }
40
- tao-popover[direction='left-top'] .tao-popover-arrow, tao-popover[direction='left-bottom'] .tao-popover-arrow, tao-popover[direction='left-middle'] .tao-popover-arrow {
41
- right: -16px; }
42
- tao-popover[direction='left-top'] .arrow-basic, tao-popover[direction='left-bottom'] .arrow-basic, tao-popover[direction='left-middle'] .arrow-basic {
43
- border-color: transparent transparent transparent #fff;
44
- left: -1px; }
45
- tao-popover[direction='left-top'] .arrow-border, tao-popover[direction='left-bottom'] .arrow-border, tao-popover[direction='left-middle'] .arrow-border {
46
- border-color: transparent transparent transparent #ddd;
47
- left: 0px; }
48
- tao-popover[direction='left-top'] .arrow-shadow, tao-popover[direction='left-bottom'] .arrow-shadow, tao-popover[direction='left-middle'] .arrow-shadow {
49
- border-color: transparent transparent transparent rgba(0, 0, 0, 0.08);
50
- left: 1px; }
51
- tao-popover[direction='left-top'] .tao-popover-arrow, tao-popover[direction='right-top'] .tao-popover-arrow {
52
- bottom: 16px; }
53
- tao-popover[direction='left-bottom'] .tao-popover-arrow, tao-popover[direction='right-bottom'] .tao-popover-arrow {
54
- top: 16px; }
55
- tao-popover[direction='left-middle'] .tao-popover-arrow, tao-popover[direction='right-middle'] .tao-popover-arrow {
56
- top: 50%;
57
- margin-top: -8px; }
58
- tao-popover[direction='top-left'] .tao-popover-arrow, tao-popover[direction='top-right'] .tao-popover-arrow, tao-popover[direction='top-center'] .tao-popover-arrow {
59
- bottom: -16px; }
60
- tao-popover[direction='top-left'] .arrow-basic, tao-popover[direction='top-right'] .arrow-basic, tao-popover[direction='top-center'] .arrow-basic {
61
- border-color: #fff transparent transparent transparent;
62
- top: -1px; }
63
- tao-popover[direction='top-left'] .arrow-border, tao-popover[direction='top-right'] .arrow-border, tao-popover[direction='top-center'] .arrow-border {
64
- border-color: #ddd transparent transparent transparent;
65
- top: 0px; }
66
- tao-popover[direction='top-left'] .arrow-shadow, tao-popover[direction='top-right'] .arrow-shadow, tao-popover[direction='top-center'] .arrow-shadow {
67
- border-color: rgba(0, 0, 0, 0.08) transparent transparent transparent;
68
- top: 1px; }
69
- tao-popover[direction='bottom-left'] .tao-popover-arrow, tao-popover[direction='bottom-right'] .tao-popover-arrow, tao-popover[direction='bottom-center'] .tao-popover-arrow {
70
- top: -16px; }
71
- tao-popover[direction='bottom-left'] .arrow-basic, tao-popover[direction='bottom-right'] .arrow-basic, tao-popover[direction='bottom-center'] .arrow-basic {
72
- border-color: transparent transparent #fff transparent;
73
- top: 1px; }
74
- tao-popover[direction='bottom-left'] .arrow-border, tao-popover[direction='bottom-right'] .arrow-border, tao-popover[direction='bottom-center'] .arrow-border {
75
- border-color: transparent transparent #ddd transparent;
76
- top: 0px; }
77
- tao-popover[direction='bottom-left'] .arrow-shadow, tao-popover[direction='bottom-right'] .arrow-shadow, tao-popover[direction='bottom-center'] .arrow-shadow {
78
- border-color: transparent transparent rgba(0, 0, 0, 0.08) transparent;
79
- top: -1px; }
80
- tao-popover[direction='top-left'] .tao-popover-arrow, tao-popover[direction='bottom-left'] .tao-popover-arrow {
81
- right: 16px; }
82
- tao-popover[direction='top-right'] .tao-popover-arrow, tao-popover[direction='bottom-right'] .tao-popover-arrow {
83
- left: 16px; }
84
- tao-popover[direction='top-center'] .tao-popover-arrow, tao-popover[direction='bottom-center'] .tao-popover-arrow {
85
- left: 50%;
86
- margin-left: -8px; }
87
-
88
- tao-popover-trigger {
89
- display: inline-block; }
data/dist/tao_popover.js DELETED
@@ -1,397 +0,0 @@
1
- (function() {
2
- window.TaoPopover = {};
3
-
4
- }).call(this);
5
- (function() {
6
- var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
7
- hasProp = {}.hasOwnProperty;
8
-
9
- TaoPopover.Direction = (function(superClass) {
10
- extend(Direction, superClass);
11
-
12
- function Direction() {
13
- return Direction.__super__.constructor.apply(this, arguments);
14
- }
15
-
16
- Direction.attribute('popover', 'target', 'boundarySelector');
17
-
18
- Direction.prototype._init = function() {
19
- this.boundary = this.boundarySelector ? this.target.closest(this.boundarySelector) : $(window);
20
- return this._calculate();
21
- };
22
-
23
- Direction.prototype._calculate = function() {
24
- var coefficient, horizental, ref, ref1, vertical;
25
- coefficient = this._beyondCoefficient();
26
- vertical = (coefficient.bottom > 0 && coefficient.top > 0) || (coefficient.bottom === (ref = coefficient.top) && ref === 0) ? 'middle' : coefficient.bottom > 0 ? 'top' : 'bottom';
27
- horizental = (coefficient.left > 0 && coefficient.right > 0) || (coefficient.left === (ref1 = coefficient.right) && ref1 === 0) ? vertical === 'middle' ? 'right' : 'center' : coefficient.right > 0 ? 'left' : 'right';
28
- return this.directions = vertical === 'middle' ? [horizental, vertical] : horizental === 'center' ? [vertical, horizental] : coefficient[vertical] > coefficient[horizental] ? [horizental, vertical] : [vertical, horizental];
29
- };
30
-
31
- Direction.prototype._beyondCoefficient = function() {
32
- var beyondOffset, boundaryDimensions, boundaryHeight, boundaryWidth, popoverHeight, popoverWidth, targetDimensions;
33
- targetDimensions = this._getDimensions(this.target);
34
- boundaryDimensions = this._getDimensions(this.boundary);
35
- popoverWidth = this.popover.outerWidth();
36
- popoverHeight = this.popover.outerHeight();
37
- boundaryWidth = this.boundary.width();
38
- boundaryHeight = this.boundary.height();
39
- beyondOffset = ['left', 'right', 'top', 'bottom'].reduce(function(offset, name) {
40
- offset[name] = targetDimensions[name] - boundaryDimensions[name];
41
- return offset;
42
- }, {});
43
- return {
44
- left: Math.max(popoverWidth - beyondOffset.left, 0) * popoverHeight + Math.max(popoverHeight - boundaryHeight, 0) * popoverWidth,
45
- right: Math.max(popoverWidth - beyondOffset.right, 0) * popoverHeight + Math.max(popoverHeight - boundaryHeight, 0) * popoverWidth,
46
- top: Math.max(popoverHeight - beyondOffset.top, 0) * popoverWidth + Math.max(popoverWidth - boundaryWidth, 0) * popoverHeight,
47
- bottom: Math.max(popoverHeight - beyondOffset.bottom, 0) * popoverWidth + Math.max(popoverWidth - boundaryWidth, 0) * popoverHeight
48
- };
49
- };
50
-
51
- Direction.prototype._getDimensions = function($el) {
52
- var $window, offset;
53
- if ($el[0] === window) {
54
- return {
55
- left: 0,
56
- right: 0,
57
- top: 0,
58
- bottom: 0
59
- };
60
- }
61
- $window = $(window);
62
- offset = $el.offset();
63
- return {
64
- left: offset.left - $window.scrollLeft(),
65
- right: $window.scrollLeft() + $window.width() - offset.left - $el.outerWidth(),
66
- top: offset.top - $window.scrollTop(),
67
- bottom: $window.scrollTop() + $window.height() - offset.top - $el.outerHeight()
68
- };
69
- };
70
-
71
- Direction.prototype.toString = function() {
72
- return this.directions.join('-');
73
- };
74
-
75
- return Direction;
76
-
77
- })(TaoModule);
78
-
79
- }).call(this);
80
- (function() {
81
- var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
82
- hasProp = {}.hasOwnProperty;
83
-
84
- TaoPopover.Position = (function(superClass) {
85
- extend(Position, superClass);
86
-
87
- function Position() {
88
- return Position.__super__.constructor.apply(this, arguments);
89
- }
90
-
91
- Position.attribute('direction', 'popover', 'target');
92
-
93
- Position.attribute('arrowAlign', {
94
- "default": 'center'
95
- });
96
-
97
- Position.attribute('arrowVerticalAlign', {
98
- "default": 'middle'
99
- });
100
-
101
- Position.attribute('offset', {
102
- "default": 0
103
- });
104
-
105
- Position.prototype.ARROW_OFFSET = 16;
106
-
107
- Position.prototype._init = function() {
108
- this.top = 0;
109
- this.left = 0;
110
- this._setPosition();
111
- this._setArrowAlign();
112
- return this._setOffset();
113
- };
114
-
115
- Position.prototype._setPosition = function() {
116
- var $arrow, arrowHeight, arrowWidth, parentOffset, popoverHeight, popoverWidth, targetHeight, targetOffset, targetWidth;
117
- targetOffset = this.target.offset();
118
- targetWidth = this.target.outerWidth();
119
- targetHeight = this.target.outerHeight();
120
- popoverWidth = this.popover.outerWidth();
121
- popoverHeight = this.popover.outerHeight();
122
- parentOffset = this.popover.offsetParent().offset();
123
- $arrow = this.popover.find('.tao-popover-arrow');
124
- arrowWidth = $arrow.outerWidth();
125
- arrowHeight = $arrow.outerHeight();
126
- switch (this.direction[0]) {
127
- case 'left':
128
- this.left = targetOffset.left - popoverWidth - arrowWidth - parentOffset.left;
129
- break;
130
- case 'right':
131
- this.left = targetOffset.left + targetWidth + arrowWidth - parentOffset.left;
132
- break;
133
- case 'top':
134
- this.top = targetOffset.top - popoverHeight - arrowHeight - parentOffset.top;
135
- break;
136
- case 'bottom':
137
- this.top = targetOffset.top + targetHeight + arrowHeight - parentOffset.top;
138
- }
139
- switch (this.direction[1]) {
140
- case 'top':
141
- return this.top = targetOffset.top - popoverHeight + targetHeight / 2 + arrowHeight / 2 + this.ARROW_OFFSET - parentOffset.top;
142
- case 'bottom':
143
- return this.top = targetOffset.top + targetHeight / 2 - arrowHeight / 2 - this.ARROW_OFFSET - parentOffset.top;
144
- case 'left':
145
- return this.left = targetOffset.left - popoverWidth + targetWidth / 2 + arrowWidth / 2 + this.ARROW_OFFSET - parentOffset.left;
146
- case 'right':
147
- return this.left = targetOffset.left + targetWidth / 2 - arrowWidth / 2 - this.ARROW_OFFSET - parentOffset.left;
148
- case 'center':
149
- return this.left = targetOffset.left + targetWidth / 2 - popoverWidth / 2 - parentOffset.left;
150
- case 'middle':
151
- return this.top = targetOffset.top + targetHeight / 2 - popoverHeight / 2 - parentOffset.top;
152
- }
153
- };
154
-
155
- Position.prototype._setArrowAlign = function() {
156
- if (/top|bottom/.test(this.direction[0])) {
157
- switch (this.arrowAlign) {
158
- case 'left':
159
- this.left -= this.target.width() / 2;
160
- break;
161
- case 'right':
162
- this.left += this.target.width() / 2;
163
- }
164
- }
165
- if (/left|right/.test(this.direction[0])) {
166
- switch (this.arrowVerticalAlign) {
167
- case 'top':
168
- return this.top -= this.target.height() / 2;
169
- case 'bottom':
170
- return this.top += this.target.height() / 2;
171
- }
172
- }
173
- };
174
-
175
- Position.prototype._setOffset = function() {
176
- if (!this.offset) {
177
- return;
178
- }
179
- switch (this.direction[0]) {
180
- case 'top':
181
- return this.top -= this.offset;
182
- case 'bottom':
183
- return this.top += this.offset;
184
- case 'left':
185
- return this.left -= this.offset;
186
- case 'right':
187
- return this.left += this.offset;
188
- }
189
- };
190
-
191
- return Position;
192
-
193
- })(TaoModule);
194
-
195
- }).call(this);
196
- (function() {
197
- var Direction, Position,
198
- extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
199
- hasProp = {}.hasOwnProperty;
200
-
201
- Direction = TaoPopover.Direction, Position = TaoPopover.Position;
202
-
203
- TaoPopover.Element = (function(superClass) {
204
- extend(Element, superClass);
205
-
206
- function Element() {
207
- return Element.__super__.constructor.apply(this, arguments);
208
- }
209
-
210
- Element.tag = 'tao-popover';
211
-
212
- Element.attribute('active', 'targetSelector', 'targetTraversal', 'boundarySelector', 'direction', 'arrowAlign', 'arrowVerticalAlign', {
213
- observe: true
214
- });
215
-
216
- Element.attribute('offset', {
217
- observe: true,
218
- "default": 5
219
- });
220
-
221
- Element.attribute('autoHide', {
222
- "default": true
223
- });
224
-
225
- Element.prototype._init = function() {
226
- return this.jq.wrapInner('<div class="tao-popover-content">').append('<div class="tao-popover-arrow">\n <i class="arrow arrow-shadow"></i>\n <i class="arrow arrow-border"></i>\n <i class="arrow arrow-basic"></i>\n</div>');
227
- };
228
-
229
- Element.prototype._connected = function() {
230
- this._autoHideChanged();
231
- if (this.active) {
232
- return this.refresh();
233
- }
234
- };
235
-
236
- Element.prototype._activeChanged = function() {
237
- if (this.active) {
238
- this.refresh();
239
- if (this.autoHide) {
240
- return this._enableAutoHide();
241
- }
242
- } else {
243
- if (this.autoHide) {
244
- return this._disableAutoHide();
245
- }
246
- }
247
- };
248
-
249
- Element.prototype._autoHideChanged = function() {
250
- this._disableAutoHide();
251
- if (this.autoHide && this.active) {
252
- return this._enableAutoHide();
253
- }
254
- };
255
-
256
- Element.prototype._enableAutoHide = function() {
257
- return $(document).on("mousedown.tao-popover-" + this.taoId, (function(_this) {
258
- return function(e) {
259
- var target;
260
- if (!_this.active) {
261
- return;
262
- }
263
- target = $(e.target);
264
- if (target.is(_this.target) || _this.jq.has(target).length || target.is(_this)) {
265
- return;
266
- }
267
- return _this.active = false;
268
- };
269
- })(this));
270
- };
271
-
272
- Element.prototype._disableAutoHide = function() {
273
- return $(document).off("mousedown.tao-popover-" + this.taoId);
274
- };
275
-
276
- Element.prototype.refresh = function() {
277
- var base, direction, name;
278
- this.target = this.targetTraversal && this.targetSelector ? typeof (base = this.jq)[name = this.targetTraversal] === "function" ? base[name](this.targetSelector) : void 0 : this.targetSelector ? $(this.targetSelector) : void 0;
279
- if (!(this.target && this.target.length > 0)) {
280
- return;
281
- }
282
- direction = new Direction({
283
- popover: this.jq,
284
- target: this.target,
285
- boundarySelector: this.boundarySelector
286
- });
287
- this.direction = direction.toString();
288
- this.position = new Position({
289
- popover: this.jq,
290
- target: this.target,
291
- direction: this.direction.split('-'),
292
- arrowAlign: this.arrowAlign,
293
- arrowVerticalAlign: this.arrowVerticalAlign,
294
- offset: this.offset
295
- });
296
- return this.jq.css({
297
- top: this.position.top,
298
- left: this.position.left
299
- });
300
- };
301
-
302
- Element.prototype.toggleActive = function() {
303
- return this.active = !this.active;
304
- };
305
-
306
- Element.prototype._disconnected = function() {
307
- return this._disableAutoHide();
308
- };
309
-
310
- return Element;
311
-
312
- })(TaoComponent);
313
-
314
- TaoComponent.register(TaoPopover.Element);
315
-
316
- }).call(this);
317
- (function() {
318
- var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
319
- hasProp = {}.hasOwnProperty;
320
-
321
- TaoPopover.Trigger = (function(superClass) {
322
- extend(Trigger, superClass);
323
-
324
- function Trigger() {
325
- return Trigger.__super__.constructor.apply(this, arguments);
326
- }
327
-
328
- Trigger.tag = 'tao-popover-trigger';
329
-
330
- Trigger.attribute('triggerAction', {
331
- observe: true,
332
- "default": 'click'
333
- });
334
-
335
- Trigger.attribute('triggerSelector', {
336
- observe: true,
337
- "default": 'a, button'
338
- });
339
-
340
- Trigger.prototype._init = function() {
341
- this.popover = this.jq.children('tao-popover').get(0);
342
- this.popover.active = false;
343
- this.popover.autoHide = this.triggerAction === 'click';
344
- if (!this.popover.targetSelector) {
345
- this.popover.targetSelector = '*';
346
- }
347
- if (!this.popover.targetTraversal) {
348
- return this.popover.targetTraversal = 'prev';
349
- }
350
- };
351
-
352
- Trigger.prototype._connected = function() {
353
- return this._bindTriggerEvent();
354
- };
355
-
356
- Trigger.prototype._disconnected = function() {
357
- return this.off('.tao-popover-trigger');
358
- };
359
-
360
- Trigger.prototype._bindTriggerEvent = function() {
361
- this.off('.tao-popover-trigger');
362
- if (this.triggerAction === 'click') {
363
- return this.on('click.tao-popover-trigger', "> " + this.triggerSelector, (function(_this) {
364
- return function(e) {
365
- _this.popover.toggleActive();
366
- return false;
367
- };
368
- })(this));
369
- } else if (this.triggerAction === 'hover') {
370
- return this.on('mouseenter.tao-popover-trigger', "> " + this.triggerSelector, (function(_this) {
371
- return function(e) {
372
- return _this.popover.active = true;
373
- };
374
- })(this)).on('mouseleave.tao-popover-trigger', "> " + this.triggerSelector, (function(_this) {
375
- return function(e) {
376
- return _this.popover.active = false;
377
- };
378
- })(this));
379
- }
380
- };
381
-
382
- Trigger.prototype._triggerActionChanged = function() {
383
- this._popover = null;
384
- return this._bindTriggerEvent();
385
- };
386
-
387
- Trigger.prototype._triggerSelectorChanged = function() {
388
- return this._bindTriggerEvent();
389
- };
390
-
391
- return Trigger;
392
-
393
- })(TaoComponent);
394
-
395
- TaoComponent.register(TaoPopover.Trigger);
396
-
397
- }).call(this);
data/index.html DELETED
@@ -1,95 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>QingPopover</title>
5
- <meta charset="utf-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1">
7
-
8
- <link media="all" rel="stylesheet" type="text/css" href="dist/tao.css">
9
- <link media="all" rel="stylesheet" type="text/css" href="dist/tao_popover.css">
10
- <style>
11
- .wrapper {
12
- width: 800px;
13
- height: 600px;
14
- border: 1px solid #cccccc;
15
- position: relative;
16
- margin: 80px auto;
17
- }
18
-
19
- .wrapper tao-popover-trigger {
20
- position: absolute;
21
- }
22
-
23
- .wrapper tao-popover-trigger:nth-child(1) {
24
- top: 20px;
25
- left: 20px;
26
- }
27
-
28
- .wrapper tao-popover-trigger:nth-child(2) {
29
- bottom: 20px;
30
- left: 20px;
31
- }
32
-
33
- .wrapper tao-popover-trigger:nth-child(3) {
34
- top: 20px;
35
- right: 20px;
36
- }
37
-
38
- .wrapper tao-popover-trigger:nth-child(4) {
39
- bottom: 20px;
40
- right: 20px;
41
- }
42
-
43
- .wrapper tao-popover-trigger:nth-child(5) {
44
- top: 50%;
45
- left: 50%;
46
- transform: translate(-50%, -50%);
47
- }
48
- </style>
49
-
50
- <script type="text/javascript" src="dist/tao.js"></script>
51
- <script type="text/javascript" src="dist/tao_popover.js"></script>
52
-
53
- </head>
54
- <body>
55
- <div class="wrapper">
56
- <tao-popover-trigger>
57
- <a href="javascript:;">click me</a>
58
- <tao-popover boundary-selector=".wrapper">
59
- lalala
60
- </tao-popover>
61
- </tao-popover-trigger>
62
-
63
- <tao-popover-trigger>
64
- <a href="javascript:;">click me</a>
65
- <tao-popover boundary-selector=".wrapper">
66
- lalala
67
- </tao-popover>
68
- </tao-popover-trigger>
69
-
70
- <tao-popover-trigger trigger-action="hover">
71
- <a href="javascript:;">hover me</a>
72
- <tao-popover boundary-selector=".wrapper">
73
- lalala
74
- </tao-popover>
75
- </tao-popover-trigger>
76
-
77
- <tao-popover-trigger trigger-action="hover">
78
- <a href="javascript:;">hover me</a>
79
- <tao-popover boundary-selector=".wrapper">
80
- lalala
81
- </tao-popover>
82
- </tao-popover-trigger>
83
-
84
- <tao-popover-trigger trigger-action="click">
85
- <tao-popover boundary-selector=".wrapper" target-traversal="next" target-selector="button">
86
- <ul>
87
- <li>hahaha</li>
88
- <li>lalala</li>
89
- </ul>
90
- </tao-popover>
91
- <button>click me</button>
92
- </tao-popover-trigger>
93
- </div>
94
- </body>
95
- </html>
@@ -1,46 +0,0 @@
1
- #= require ./element
2
-
3
- class TaoPopover.Trigger extends TaoComponent
4
-
5
- @tag: 'tao-popover-trigger'
6
-
7
- @attribute 'triggerAction', observe: true, default: 'click'
8
-
9
- @attribute 'triggerSelector', observe: true, default: 'a, button'
10
-
11
- _init: ->
12
- @popover = @jq.children('tao-popover').get(0)
13
- @popover.active = false
14
- @popover.autoHide = @triggerAction == 'click'
15
-
16
- @popover.targetSelector = '*' unless @popover.targetSelector
17
- @popover.targetTraversal = 'prev' unless @popover.targetTraversal
18
-
19
- _connected: ->
20
- @_bindTriggerEvent()
21
-
22
- _disconnected: ->
23
- @off '.tao-popover-trigger'
24
-
25
- _bindTriggerEvent: ->
26
- @off '.tao-popover-trigger'
27
-
28
- if @triggerAction == 'click'
29
- @on 'click.tao-popover-trigger', "> #{@triggerSelector}", (e) =>
30
- @popover.toggleActive()
31
- false
32
- else if @triggerAction == 'hover'
33
- @on 'mouseenter.tao-popover-trigger', "> #{@triggerSelector}", (e) =>
34
- @popover.active = true
35
- .on 'mouseleave.tao-popover-trigger', "> #{@triggerSelector}", (e) =>
36
- @popover.active = false
37
-
38
- _triggerActionChanged: ->
39
- @_popover = null
40
- @_bindTriggerEvent()
41
-
42
- _triggerSelectorChanged: ->
43
- @_bindTriggerEvent()
44
-
45
-
46
- TaoComponent.register TaoPopover.Trigger
@@ -1,8 +0,0 @@
1
- require 'tao_on_rails'
2
-
3
- module TaoPopover
4
- module Rails
5
- class Engine < ::Rails::Engine
6
- end
7
- end
8
- end
@@ -1,2 +0,0 @@
1
- require 'tao_popover/rails/engine'
2
- require 'tao_popover/rails/version'
data/tao_popover.gemspec DELETED
@@ -1,31 +0,0 @@
1
- # coding: utf-8
2
- lib = File.expand_path('../lib', __FILE__)
3
- $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
- require 'tao_popover/rails/version'
5
-
6
- Gem::Specification.new do |spec|
7
- spec.name = "tao_popover"
8
- spec.version = TaoPopover::VERSION
9
- spec.authors = ["farthinker"]
10
- spec.email = ["farthinker@gmail.com"]
11
-
12
- spec.summary = %q{A popover component based on Tao Framework.}
13
- spec.description = %q{A popover component based on Tao Framework.}
14
- spec.homepage = "https://github.com/mycolorway/tao_popover"
15
- spec.license = "MIT"
16
-
17
- spec.files = `git ls-files -z`.split("\x0").reject do |f|
18
- f.match(%r{^(test|spec|features)/})
19
- end
20
- spec.bindir = "exe"
21
- spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
22
- spec.require_paths = ["lib"]
23
-
24
- spec.add_runtime_dependency "tao_on_rails", '~> 0.6.1'
25
-
26
- spec.add_development_dependency "bundler", "~> 1.13"
27
- spec.add_development_dependency "rake", "~> 10.0"
28
- spec.add_development_dependency "minitest", "~> 5.0"
29
- spec.add_development_dependency "blade", "~> 0.7.0"
30
- spec.add_development_dependency "blade-sauce_labs_plugin", "~> 0.6.2"
31
- end