tao_ui 0.1.3 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/assets/icons/{loading.svg → Loading.svg} +0 -0
- data/lib/assets/icons/close.svg +12 -0
- data/lib/assets/javascripts/tao/ui/dialog/element.coffee +61 -0
- data/lib/assets/javascripts/tao/ui/dialog/index.coffee +4 -0
- data/lib/assets/javascripts/tao/ui/icons/{basic.coffee → base.coffee} +2 -1
- data/lib/assets/javascripts/tao/ui/icons/index.coffee +4 -4
- data/lib/assets/javascripts/tao/ui/index.coffee +4 -1
- data/lib/assets/javascripts/tao/ui/mobile/index.coffee +3 -2
- data/lib/assets/javascripts/tao/ui/mobile/slide_box/element.coffee +7 -0
- data/lib/assets/javascripts/tao/ui/mobile/slide_box/index.coffee +4 -0
- data/lib/assets/javascripts/tao/ui/popover/create.coffee +18 -0
- data/lib/assets/javascripts/tao/ui/popover/direction.coffee +76 -0
- data/lib/assets/javascripts/tao/ui/popover/element.coffee +99 -0
- data/lib/assets/javascripts/tao/ui/popover/index.coffee +5 -0
- data/lib/assets/javascripts/tao/ui/popover/position.coffee +83 -0
- data/lib/assets/javascripts/tao/ui/shared/slide_box/element/base.coffee +76 -0
- data/lib/assets/javascripts/tao/ui/{ujs.coffee → shared/ujs.coffee} +22 -1
- data/lib/assets/javascripts/tao/ui/slide_box/element.coffee +7 -0
- data/lib/assets/javascripts/tao/ui/slide_box/index.coffee +4 -0
- data/lib/assets/stylesheets/tao/ui/_mixins.scss +2 -2
- data/lib/assets/stylesheets/tao/ui/_variables.scss +2 -2
- data/lib/assets/stylesheets/tao/ui/basic.scss +11 -139
- data/lib/assets/stylesheets/tao/ui/buttons.scss +3 -54
- data/lib/assets/stylesheets/tao/ui/code.scss +1 -55
- data/lib/assets/stylesheets/tao/ui/dialog.scss +78 -0
- data/lib/assets/stylesheets/tao/ui/icons.scss +1 -17
- data/lib/assets/stylesheets/tao/ui/index.scss +3 -0
- data/lib/assets/stylesheets/tao/ui/mobile/_mixins.scss +2 -2
- data/lib/assets/stylesheets/tao/ui/mobile/_variables.scss +2 -2
- data/lib/assets/stylesheets/tao/ui/mobile/basic.scss +1 -1
- data/lib/assets/stylesheets/tao/ui/mobile/buttons.scss +1 -1
- data/lib/assets/stylesheets/tao/ui/mobile/code.scss +1 -1
- data/lib/assets/stylesheets/tao/ui/mobile/icons.scss +1 -1
- data/lib/assets/stylesheets/tao/ui/mobile/index.scss +1 -0
- data/lib/assets/stylesheets/tao/ui/mobile/slide_box.scss +48 -0
- data/lib/assets/stylesheets/tao/ui/mobile/tables.scss +1 -1
- data/lib/assets/stylesheets/tao/ui/mobile/variables/_base.scss +1 -2
- data/lib/assets/stylesheets/tao/ui/popover.scss +178 -0
- data/lib/assets/stylesheets/tao/ui/shared/_basic.scss +128 -0
- data/lib/assets/stylesheets/tao/ui/shared/_buttons.scss +65 -0
- data/lib/assets/stylesheets/tao/ui/shared/_code.scss +54 -0
- data/lib/assets/stylesheets/tao/ui/shared/_icons.scss +16 -0
- data/lib/assets/stylesheets/tao/ui/shared/_slide_box.scss +80 -0
- data/lib/assets/stylesheets/tao/ui/shared/_tables.scss +38 -0
- data/lib/assets/stylesheets/tao/ui/{mixins → shared/mixins}/_base.scss +0 -0
- data/lib/assets/stylesheets/tao/ui/{mixins → shared/mixins}/_buttons.scss +2 -4
- data/lib/assets/stylesheets/tao/ui/shared/variables/_base.scss +48 -0
- data/lib/assets/stylesheets/tao/ui/shared/variables/_buttons.scss +93 -0
- data/lib/assets/stylesheets/tao/ui/shared/variables/_tables.scss +2 -0
- data/lib/assets/stylesheets/tao/ui/slide_box.scss +16 -0
- data/lib/assets/stylesheets/tao/ui/tables.scss +3 -41
- data/lib/assets/stylesheets/tao/ui/variables/_base.scss +3 -42
- data/lib/generators/tao/icons/USAGE +2 -2
- data/lib/generators/tao/icons/templates/icons.coffee.erb +1 -1
- data/lib/tao_ui/components/dialog_component.rb +25 -0
- data/lib/tao_ui/components/icon_component.rb +7 -8
- data/lib/tao_ui/components/popover_component.rb +17 -0
- data/lib/tao_ui/components/slide_box_component.rb +21 -0
- data/lib/tao_ui/components.rb +3 -5
- data/lib/tao_ui/engine.rb +4 -1
- data/lib/tao_ui/version.rb +1 -1
- data/lib/views/components/tao_ui/components/_dialog.html.erb +10 -0
- data/lib/views/components/tao_ui/components/_popover.html.erb +10 -0
- data/lib/views/components/tao_ui/components/_slide_box.html.erb +8 -0
- metadata +79 -25
- data/lib/assets/stylesheets/tao/ui/mobile/mixins/_base.scss +0 -1
- data/lib/assets/stylesheets/tao/ui/mobile/mixins/_buttons.scss +0 -1
- data/lib/assets/stylesheets/tao/ui/mobile/variables/_buttons.scss +0 -1
- data/lib/assets/stylesheets/tao/ui/mobile/variables/_tables.scss +0 -1
- data/lib/assets/stylesheets/tao/ui/variables/_buttons.scss +0 -84
- data/lib/assets/stylesheets/tao/ui/variables/_tables.scss +0 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c4503a47fdc14364f2b6de5a4754818c9ea7d214
|
4
|
+
data.tar.gz: cca0b1713325cdb3cd7d283ad6963a1e0bb902e8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9653a5a12c355ce4d3fc758302b83f7bec482a79303fbf68a161b37e9d4daaf70b18550fbd5ff7b52c756becdf14a28d9419778c0825514797ab784bff9a3ab8
|
7
|
+
data.tar.gz: b6162bbcea4162b646cc5ed191511251f5cfa2131f0f795b9d048cd7c08ea09754cbb1af03bd663e3e967e891cfa5eb0da858801850dc62da46d731abdfea224
|
File without changes
|
@@ -0,0 +1,12 @@
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
2
|
+
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
3
|
+
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
|
4
|
+
<title>Close</title>
|
5
|
+
<desc>Created with Sketch.</desc>
|
6
|
+
<defs></defs>
|
7
|
+
<g id="zhiren_icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
8
|
+
<g id="Main" transform="translate(3.000000, 3.000000)" fill="#9B9B9B">
|
9
|
+
<path d="M8.83832409,8.13223866 L1.06053975,0.354454322 C0.863250778,0.157165345 0.548022825,0.158062608 0.353042717,0.353042717 C0.163764932,0.542320501 0.158694605,0.864780038 0.354454322,1.06053975 L8.13223866,8.83832409 L0.354454322,16.6161084 C0.157165345,16.8133974 0.158062608,17.1286254 0.353042717,17.3236055 C0.542320501,17.5128832 0.864780038,17.5179536 1.06053975,17.3221939 L8.83832409,9.54440952 L16.6161084,17.3221939 C16.8133974,17.5194828 17.1286254,17.5185856 17.3236055,17.3236055 C17.5128832,17.1343277 17.5179536,16.8118681 17.3221939,16.6161084 L9.54440952,8.83832409 L17.3221939,1.06053975 C17.5194828,0.863250778 17.5185856,0.548022825 17.3236055,0.353042717 C17.1343277,0.163764932 16.8118681,0.158694605 16.6161084,0.354454322 L8.83832409,8.13223866 Z" id="Close"></path>
|
10
|
+
</g>
|
11
|
+
</g>
|
12
|
+
</svg>
|
@@ -0,0 +1,61 @@
|
|
1
|
+
class Tao.Dialog.Element extends TaoComponent
|
2
|
+
|
3
|
+
@tag 'tao-dialog'
|
4
|
+
|
5
|
+
@attribute 'active', type: 'boolean', observe: true
|
6
|
+
|
7
|
+
@attribute 'modal', 'withCloseButton', 'autoDestroy', type: 'boolean'
|
8
|
+
|
9
|
+
@attribute 'triggerSelector', 'triggerTraversal', 'size'
|
10
|
+
|
11
|
+
_connected: ->
|
12
|
+
@triggerEl = if @triggerTraversal && @triggerSelector
|
13
|
+
@jq[@triggerTraversal]?(@triggerSelector)
|
14
|
+
else if @triggerSelector
|
15
|
+
$ @triggerSelector
|
16
|
+
|
17
|
+
@_bind()
|
18
|
+
@_activeChanged() if @active
|
19
|
+
|
20
|
+
_disconnected: ->
|
21
|
+
@triggerEl?.off ".tao-slide-box-#{@taoId}"
|
22
|
+
@off()
|
23
|
+
|
24
|
+
_bind: ->
|
25
|
+
@on 'click', (e) =>
|
26
|
+
@active = false if e.target == @
|
27
|
+
|
28
|
+
@on 'click', '.tao-dialog-wrapper > .link-close', =>
|
29
|
+
@active = false
|
30
|
+
|
31
|
+
if @triggerEl && @triggerEl.length > 0
|
32
|
+
@triggerEl.on "click.tao-slide-box-#{@taoId}", (e) =>
|
33
|
+
@active = true
|
34
|
+
|
35
|
+
_beforeActiveChanged: (active) ->
|
36
|
+
if active
|
37
|
+
@jq.find('.tao-dialog-content').css
|
38
|
+
maxHeight: $(window).height() - 40
|
39
|
+
@jq.show()
|
40
|
+
@_reflow()
|
41
|
+
else
|
42
|
+
@one 'transitionend', =>
|
43
|
+
if @autoDestroy
|
44
|
+
@jq.remove()
|
45
|
+
else
|
46
|
+
@jq.hide()
|
47
|
+
null
|
48
|
+
|
49
|
+
_activeChanged: ->
|
50
|
+
if @active
|
51
|
+
$('body').addClass('dialog-active')
|
52
|
+
@trigger 'show'
|
53
|
+
else
|
54
|
+
$('body').removeClass('dialog-active')
|
55
|
+
@trigger 'hide'
|
56
|
+
|
57
|
+
setContent: (content) ->
|
58
|
+
@jq.find('.tao-dialog-content').empty()
|
59
|
+
.append content
|
60
|
+
|
61
|
+
TaoComponent.register Tao.Dialog.Element
|
@@ -1,4 +1,5 @@
|
|
1
|
-
Tao.
|
1
|
+
Tao._icons += '''
|
2
|
+
<symbol id="icon-close" viewBox="0 0 24 24" width="100%" height="100%"><defs/><g class="zhiren_icon" stroke="none" stroke-width="1" fill-rule="evenodd"><g class="Main" transform="translate(3.000000, 3.000000)"><path d="M8.83832409,8.13223866 L1.06053975,0.354454322 C0.863250778,0.157165345 0.548022825,0.158062608 0.353042717,0.353042717 C0.163764932,0.542320501 0.158694605,0.864780038 0.354454322,1.06053975 L8.13223866,8.83832409 L0.354454322,16.6161084 C0.157165345,16.8133974 0.158062608,17.1286254 0.353042717,17.3236055 C0.542320501,17.5128832 0.864780038,17.5179536 1.06053975,17.3221939 L8.83832409,9.54440952 L16.6161084,17.3221939 C16.8133974,17.5194828 17.1286254,17.5185856 17.3236055,17.3236055 C17.5128832,17.1343277 17.5179536,16.8118681 17.3221939,16.6161084 L9.54440952,8.83832409 L17.3221939,1.06053975 C17.5194828,0.863250778 17.5185856,0.548022825 17.3236055,0.353042717 C17.1343277,0.163764932 16.8118681,0.158694605 16.6161084,0.354454322 L8.83832409,8.13223866 Z" class="Close"/></g></g></symbol>
|
2
3
|
<symbol id="icon-loading" viewBox="0 0 20 20" width="100%" height="100%"><defs/><g class="zhiren_icon" stroke="none" stroke-width="1" fill-rule="evenodd"><g class="Main"><rect class="Path" opacity="0.5" x="9" y="0" width="2" height="6" rx="1"/><rect class="Path" opacity="0.600000024" transform="translate(14.828427, 4.828427) rotate(45.000000) translate(-14.828427, -4.828427) " x="13.8284271" y="1.82842712" width="2" height="6" rx="1"/><rect class="Path" opacity="0.400000006" transform="translate(4.828427, 4.828427) scale(-1, 1) rotate(45.000000) translate(-4.828427, -4.828427) " x="3.82842712" y="1.82842712" width="2" height="6" rx="1"/><rect class="Path" opacity="0.200000003" transform="translate(4.828427, 14.828427) rotate(45.000000) translate(-4.828427, -14.828427) " x="3.82842712" y="11.8284271" width="2" height="6" rx="1"/><rect class="Rectangle-24" opacity="0.300000012" x="0" y="9" width="6" height="2" rx="1"/><rect class="Rectangle-24" opacity="0.699999988" x="14" y="9" width="6" height="2" rx="1"/><rect class="Rectangle-24" opacity="0.05" transform="translate(14.828427, 14.828427) rotate(45.000000) translate(-14.828427, -14.828427) " x="11.8284271" y="13.8284271" width="6" height="2" rx="1"/><rect class="Combined-Shape" opacity="0.100000001" x="9" y="14" width="2" height="6" rx="1"/></g></g></symbol>
|
3
4
|
|
4
5
|
'''
|
@@ -1,9 +1,9 @@
|
|
1
1
|
#= require_self
|
2
|
-
#=
|
2
|
+
#= require_tree .
|
3
3
|
|
4
|
-
|
4
|
+
_.extend Tao,
|
5
5
|
|
6
|
-
|
6
|
+
_icons: ''
|
7
7
|
|
8
8
|
iconTag: (name, attributes={}) ->
|
9
9
|
$("<svg><use xlink:href=\"#icon-#{name}\"/></svg>")
|
@@ -15,6 +15,6 @@ Tao.Application.initializer 'icons', (app) ->
|
|
15
15
|
return if $('#tao-icons').length > 0
|
16
16
|
document.body.insertAdjacentHTML 'afterbegin', """
|
17
17
|
<svg id="tao-icons" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
|
18
|
-
#{Tao.
|
18
|
+
#{Tao._icons}
|
19
19
|
</svg>
|
20
20
|
"""
|
@@ -0,0 +1,18 @@
|
|
1
|
+
# Avoid using this method to create popover
|
2
|
+
# Use `tao_popover` view helper method instead
|
3
|
+
|
4
|
+
Tao.Popover.create = (attributes, content) ->
|
5
|
+
$popover = $('''
|
6
|
+
<tao-popover class="tao-popover">
|
7
|
+
<div class="tao-popover-content">
|
8
|
+
</div>
|
9
|
+
<div class="tao-popover-arrow">
|
10
|
+
<i class="arrow arrow-shadow"></i>
|
11
|
+
<i class="arrow arrow-border"></i>
|
12
|
+
<i class="arrow arrow-basic"></i>
|
13
|
+
</div>
|
14
|
+
</tao-popover>
|
15
|
+
''').attr attributes
|
16
|
+
|
17
|
+
$popover.find('.tao-popover-content').append content
|
18
|
+
$popover.get(0)
|
@@ -0,0 +1,76 @@
|
|
1
|
+
|
2
|
+
class Tao.Popover.Direction extends TaoModule
|
3
|
+
|
4
|
+
@option 'popover', 'target', 'boundarySelector'
|
5
|
+
|
6
|
+
_init: ->
|
7
|
+
@boundary = if @boundarySelector
|
8
|
+
@target.closest(@boundarySelector)
|
9
|
+
else
|
10
|
+
$(window)
|
11
|
+
|
12
|
+
@_calculate()
|
13
|
+
|
14
|
+
_calculate: ->
|
15
|
+
coefficient = @_beyondCoefficient()
|
16
|
+
|
17
|
+
vertical = if (coefficient.bottom > 0 && coefficient.top > 0) || coefficient.bottom == coefficient.top == 0
|
18
|
+
'middle'
|
19
|
+
else if coefficient.bottom > 0
|
20
|
+
'top'
|
21
|
+
else
|
22
|
+
'bottom'
|
23
|
+
|
24
|
+
horizental = if (coefficient.left > 0 && coefficient.right > 0) || coefficient.left == coefficient.right == 0
|
25
|
+
if vertical == 'middle' then 'right' else 'center'
|
26
|
+
else if coefficient.right > 0
|
27
|
+
'left'
|
28
|
+
else
|
29
|
+
'right'
|
30
|
+
|
31
|
+
@directions = if vertical == 'middle'
|
32
|
+
[horizental, vertical]
|
33
|
+
else if horizental == 'center'
|
34
|
+
[vertical, horizental]
|
35
|
+
else if coefficient[vertical] > coefficient[horizental]
|
36
|
+
[horizental, vertical]
|
37
|
+
else
|
38
|
+
[vertical, horizental]
|
39
|
+
|
40
|
+
_beyondCoefficient: ->
|
41
|
+
targetDimensions = @_getDimensions @target
|
42
|
+
boundaryDimensions = @_getDimensions @boundary
|
43
|
+
popoverWidth = @popover.outerWidth()
|
44
|
+
popoverHeight = @popover.outerHeight()
|
45
|
+
boundaryWidth = @boundary.width()
|
46
|
+
boundaryHeight = @boundary.height()
|
47
|
+
|
48
|
+
beyondOffset = ['left', 'right', 'top', 'bottom'].reduce (offset, name) ->
|
49
|
+
offset[name] = targetDimensions[name] - boundaryDimensions[name]
|
50
|
+
offset
|
51
|
+
, {}
|
52
|
+
|
53
|
+
{
|
54
|
+
left: Math.max(popoverWidth - beyondOffset.left, 0) * popoverHeight + Math.max(popoverHeight - boundaryHeight, 0) * popoverWidth
|
55
|
+
right: Math.max(popoverWidth - beyondOffset.right, 0) * popoverHeight + Math.max(popoverHeight - boundaryHeight, 0) * popoverWidth
|
56
|
+
top: Math.max(popoverHeight - beyondOffset.top, 0) * popoverWidth + Math.max(popoverWidth - boundaryWidth, 0) * popoverHeight
|
57
|
+
bottom: Math.max(popoverHeight - beyondOffset.bottom, 0) * popoverWidth + Math.max(popoverWidth - boundaryWidth, 0) * popoverHeight
|
58
|
+
}
|
59
|
+
|
60
|
+
_getDimensions: ($el) ->
|
61
|
+
return {
|
62
|
+
left: 0, right: 0, top: 0, bottom: 0
|
63
|
+
} if $el[0] is window
|
64
|
+
|
65
|
+
$window = $ window
|
66
|
+
offset = $el.offset()
|
67
|
+
|
68
|
+
{
|
69
|
+
left: offset.left - $window.scrollLeft()
|
70
|
+
right: $window.scrollLeft() + $window.width() - offset.left - $el.outerWidth()
|
71
|
+
top: offset.top - $window.scrollTop()
|
72
|
+
bottom: $window.scrollTop() + $window.height() - offset.top - $el.outerHeight()
|
73
|
+
}
|
74
|
+
|
75
|
+
toString: ->
|
76
|
+
@directions.join('-')
|
@@ -0,0 +1,99 @@
|
|
1
|
+
#= require ./direction
|
2
|
+
#= require ./position
|
3
|
+
|
4
|
+
{Direction, Position} = Tao.Popover
|
5
|
+
|
6
|
+
class Tao.Popover.Element extends TaoComponent
|
7
|
+
|
8
|
+
@tag 'tao-popover'
|
9
|
+
|
10
|
+
@attribute 'active', type: 'boolean', observe: true
|
11
|
+
|
12
|
+
@attribute 'targetSelector', 'targetTraversal', 'triggerSelector', 'triggerTraversal'
|
13
|
+
|
14
|
+
@attribute 'triggerAction', default: 'click'
|
15
|
+
|
16
|
+
@attribute 'boundarySelector', 'direction', 'arrowAlign', 'arrowVerticalAlign'
|
17
|
+
|
18
|
+
@attribute 'offset', type: 'number', default: 0
|
19
|
+
|
20
|
+
@attribute 'autoHide', type: 'boolean'
|
21
|
+
|
22
|
+
@attribute 'autoDestroy', type: 'boolean'
|
23
|
+
|
24
|
+
_connected: ->
|
25
|
+
@_initTarget()
|
26
|
+
@_initTrigger()
|
27
|
+
@_activeChanged() if @active
|
28
|
+
|
29
|
+
_initTarget: ->
|
30
|
+
@target = if @targetTraversal && @targetSelector
|
31
|
+
@jq[@targetTraversal]?(@targetSelector)
|
32
|
+
else if @targetSelector
|
33
|
+
$ @targetSelector
|
34
|
+
|
35
|
+
_initTrigger: ->
|
36
|
+
@triggerEl = if @triggerTraversal && @triggerSelector
|
37
|
+
@jq[@triggerTraversal]?(@triggerSelector)
|
38
|
+
else if @triggerSelector
|
39
|
+
$ @triggerSelector
|
40
|
+
else
|
41
|
+
@target
|
42
|
+
|
43
|
+
if @triggerAction == 'click'
|
44
|
+
@triggerEl.on 'click.tao-popover', (e) =>
|
45
|
+
@toggleActive()
|
46
|
+
else if @triggerAction == 'hover'
|
47
|
+
@triggerEl.on 'mouseenter.tao-popover', (e) =>
|
48
|
+
@active = true
|
49
|
+
.on 'mouseleave.tao-popover', (e) =>
|
50
|
+
@active = false
|
51
|
+
|
52
|
+
_activeChanged: ->
|
53
|
+
if @active
|
54
|
+
@refresh()
|
55
|
+
@_enableAutoHide() if @autoHide
|
56
|
+
@trigger 'show'
|
57
|
+
else
|
58
|
+
@_disableAutoHide() if @autoHide
|
59
|
+
@trigger 'hide'
|
60
|
+
@jq.remove() if @autoDestroy
|
61
|
+
|
62
|
+
_enableAutoHide: ->
|
63
|
+
$(document).on "mousedown.tao-popover-#{@taoId}", (e) =>
|
64
|
+
return unless @active
|
65
|
+
target = $ e.target
|
66
|
+
return if target.is(@target) or @jq.has(target).length or target.is(@)
|
67
|
+
@active = false
|
68
|
+
|
69
|
+
_disableAutoHide: ->
|
70
|
+
$(document).off "mousedown.tao-popover-#{@taoId}"
|
71
|
+
|
72
|
+
refresh: ->
|
73
|
+
unless @direction
|
74
|
+
direction = new Direction
|
75
|
+
popover: @jq
|
76
|
+
target: @target
|
77
|
+
boundarySelector: @boundarySelector
|
78
|
+
@direction = direction.toString()
|
79
|
+
|
80
|
+
@position = new Position
|
81
|
+
popover: @jq
|
82
|
+
target: @target
|
83
|
+
direction: @direction.split('-')
|
84
|
+
arrowAlign: @arrowAlign
|
85
|
+
arrowVerticalAlign: @arrowVerticalAlign
|
86
|
+
offset: @offset
|
87
|
+
|
88
|
+
@jq.css
|
89
|
+
top: @position.top
|
90
|
+
left: @position.left
|
91
|
+
|
92
|
+
toggleActive: ->
|
93
|
+
@active = !@active
|
94
|
+
|
95
|
+
_disconnected: ->
|
96
|
+
@triggerEl.off '.tao-popover'
|
97
|
+
$(document).off ".tao-popover-#{@taoId}"
|
98
|
+
|
99
|
+
TaoComponent.register Tao.Popover.Element
|
@@ -0,0 +1,83 @@
|
|
1
|
+
|
2
|
+
class Tao.Popover.Position extends TaoModule
|
3
|
+
|
4
|
+
@option 'direction', 'popover', 'target'
|
5
|
+
|
6
|
+
@option 'arrowAlign', default: 'center'
|
7
|
+
|
8
|
+
@option 'arrowVerticalAlign', default: 'middle'
|
9
|
+
|
10
|
+
@option 'offset', default: 0
|
11
|
+
|
12
|
+
ARROW_OFFSET: 16
|
13
|
+
|
14
|
+
_init: ->
|
15
|
+
@top = 0
|
16
|
+
@left = 0
|
17
|
+
|
18
|
+
@_setPosition()
|
19
|
+
@_setArrowAlign()
|
20
|
+
@_setOffset()
|
21
|
+
|
22
|
+
_setPosition: ->
|
23
|
+
targetOffset = @target.offset()
|
24
|
+
targetWidth = @target.outerWidth()
|
25
|
+
targetHeight = @target.outerHeight()
|
26
|
+
popoverWidth = @popover.outerWidth()
|
27
|
+
popoverHeight = @popover.outerHeight()
|
28
|
+
parentOffset = @popover.offsetParent().offset()
|
29
|
+
$arrow = @popover.find('.tao-popover-arrow')
|
30
|
+
arrowWidth = $arrow.outerWidth()
|
31
|
+
arrowHeight = $arrow.outerHeight()
|
32
|
+
|
33
|
+
switch @direction[0]
|
34
|
+
when 'left'
|
35
|
+
@left = targetOffset.left - popoverWidth - arrowWidth - parentOffset.left
|
36
|
+
when 'right'
|
37
|
+
@left = targetOffset.left + targetWidth + arrowWidth - parentOffset.left
|
38
|
+
when 'top'
|
39
|
+
@top = targetOffset.top - popoverHeight - arrowHeight - parentOffset.top
|
40
|
+
when 'bottom'
|
41
|
+
@top = targetOffset.top + targetHeight + arrowHeight - parentOffset.top
|
42
|
+
|
43
|
+
switch @direction[1]
|
44
|
+
when 'top'
|
45
|
+
@top = targetOffset.top - popoverHeight + targetHeight / 2 + arrowHeight / 2 + @ARROW_OFFSET - parentOffset.top
|
46
|
+
when 'bottom'
|
47
|
+
@top = targetOffset.top + targetHeight / 2 - arrowHeight / 2 - @ARROW_OFFSET - parentOffset.top
|
48
|
+
when 'left'
|
49
|
+
@left = targetOffset.left - popoverWidth + targetWidth / 2 + arrowWidth / 2 + @ARROW_OFFSET - parentOffset.left
|
50
|
+
when 'right'
|
51
|
+
@left = targetOffset.left + targetWidth / 2 - arrowWidth / 2 - @ARROW_OFFSET - parentOffset.left
|
52
|
+
when 'center'
|
53
|
+
@left = targetOffset.left + targetWidth / 2 - popoverWidth / 2 - parentOffset.left
|
54
|
+
when 'middle'
|
55
|
+
@top = targetOffset.top + targetHeight / 2 - popoverHeight / 2 - parentOffset.top
|
56
|
+
|
57
|
+
_setArrowAlign: ->
|
58
|
+
if /top|bottom/.test @direction[0]
|
59
|
+
switch @arrowAlign
|
60
|
+
when 'left'
|
61
|
+
@left -= @target.width() / 2
|
62
|
+
when 'right'
|
63
|
+
@left += @target.width() / 2
|
64
|
+
|
65
|
+
if /left|right/.test @direction[0]
|
66
|
+
switch @arrowVerticalAlign
|
67
|
+
when 'top'
|
68
|
+
@top -= @target.height() / 2
|
69
|
+
when 'bottom'
|
70
|
+
@top += @target.height() / 2
|
71
|
+
|
72
|
+
_setOffset: ->
|
73
|
+
return unless @offset
|
74
|
+
|
75
|
+
switch @direction[0]
|
76
|
+
when 'top'
|
77
|
+
@top -= @offset
|
78
|
+
when 'bottom'
|
79
|
+
@top += @offset
|
80
|
+
when 'left'
|
81
|
+
@left -= @offset
|
82
|
+
when 'right'
|
83
|
+
@left += @offset
|
@@ -0,0 +1,76 @@
|
|
1
|
+
class Tao.SlideBox.ElementBase extends TaoComponent
|
2
|
+
|
3
|
+
@tag 'tao-slide-box'
|
4
|
+
|
5
|
+
@attribute 'active', type: 'boolean', observe: true
|
6
|
+
|
7
|
+
@attribute 'withCloseButton', 'autoHide', 'autoDestroy', type: 'boolean'
|
8
|
+
|
9
|
+
@attribute 'triggerSelector', 'triggerTraversal'
|
10
|
+
|
11
|
+
@attribute 'direction', default: 'btt'
|
12
|
+
|
13
|
+
@attribute 'size'
|
14
|
+
|
15
|
+
_connected: ->
|
16
|
+
@triggerEl = if @triggerTraversal && @triggerSelector
|
17
|
+
@jq[@triggerTraversal]?(@triggerSelector)
|
18
|
+
else if @triggerSelector
|
19
|
+
$ @triggerSelector
|
20
|
+
|
21
|
+
@_initSize()
|
22
|
+
@_bind()
|
23
|
+
@_activeChanged() if @active
|
24
|
+
|
25
|
+
_disconnected: ->
|
26
|
+
@triggerEl?.off ".tao-slide-box-#{@taoId}"
|
27
|
+
@off()
|
28
|
+
$(document).off ".tao-select-#{@taoId}"
|
29
|
+
|
30
|
+
_initSize: ->
|
31
|
+
sizeProperty = if @direction in ['btt', 'ttb'] then 'height' else 'width'
|
32
|
+
@jq[sizeProperty] if (size = parseFloat(@size)) < 0
|
33
|
+
$(window)[sizeProperty]() + size
|
34
|
+
else
|
35
|
+
@size
|
36
|
+
|
37
|
+
_bind: ->
|
38
|
+
@on 'click', '> .link-close', =>
|
39
|
+
@active = false
|
40
|
+
|
41
|
+
if @triggerEl && @triggerEl.length > 0
|
42
|
+
@triggerEl.on "click.tao-slide-box-#{@taoId}", (e) =>
|
43
|
+
@active = true
|
44
|
+
|
45
|
+
_beforeActiveChanged: (active) ->
|
46
|
+
if active
|
47
|
+
@jq.show()
|
48
|
+
@_reflow()
|
49
|
+
else
|
50
|
+
@one 'transitionend', =>
|
51
|
+
if @autoDestroy
|
52
|
+
@jq.remove()
|
53
|
+
else
|
54
|
+
@jq.hide()
|
55
|
+
null
|
56
|
+
|
57
|
+
_activeChanged: ->
|
58
|
+
@_unbindAutoHideEvent() if @autoHide
|
59
|
+
if @active
|
60
|
+
@_bindAutoHideEvent() if @autoHide
|
61
|
+
$('body').addClass('slide-box-active')
|
62
|
+
@trigger 'show'
|
63
|
+
else
|
64
|
+
$('body').removeClass('slide-box-active')
|
65
|
+
@trigger 'hide'
|
66
|
+
|
67
|
+
_autoHideEvent: ''
|
68
|
+
|
69
|
+
_unbindAutoHideEvent: ->
|
70
|
+
$(document).off "#{@_autoHideEvent}.tao-slide-box-#{@taoId}"
|
71
|
+
|
72
|
+
_bindAutoHideEvent: ->
|
73
|
+
$(document).on "#{@_autoHideEvent}.tao-slide-box-#{@taoId}", (e) =>
|
74
|
+
return if e.target == @ || $.contains(@, e.target) || @triggerEl?.is(e.target)
|
75
|
+
@active = false
|
76
|
+
@_unbindAutoHideEvent()
|
@@ -1,7 +1,8 @@
|
|
1
1
|
# hack ujs for adding loading icon on disabled buttons/links
|
2
2
|
|
3
3
|
prependLoadingIcon = (element) ->
|
4
|
-
$(element).
|
4
|
+
$(element).addClass('text-with-icon')
|
5
|
+
.prepend Tao.iconTag('loading', class: 'spin')
|
5
6
|
|
6
7
|
# jquery-ujs
|
7
8
|
if $.rails?
|
@@ -15,6 +16,16 @@ if $.rails?
|
|
15
16
|
originDisableFormElement element
|
16
17
|
prependLoadingIcon element
|
17
18
|
|
19
|
+
originEnableElement = $.rails.enableElement
|
20
|
+
$.rails.enableElement = (element) ->
|
21
|
+
originEnableElement element
|
22
|
+
$(element).removeClass 'text-with-icon'
|
23
|
+
|
24
|
+
originEnableFormElement = $.rails.enableFormElement
|
25
|
+
$.rails.enableFormElement = (element) ->
|
26
|
+
originEnableFormElement element
|
27
|
+
$(element).removeClass 'text-with-icon'
|
28
|
+
|
18
29
|
# rails-ujs
|
19
30
|
else if Rails?
|
20
31
|
originDisableElement = Rails.disableElement
|
@@ -26,3 +37,13 @@ else if Rails?
|
|
26
37
|
prependLoadingIcon el
|
27
38
|
else
|
28
39
|
prependLoadingIcon element
|
40
|
+
|
41
|
+
originEnableElement = Rails.enableElement
|
42
|
+
Rails.enableElement = (e) ->
|
43
|
+
originEnableElement e
|
44
|
+
element = if e instanceof Event then e.target else e
|
45
|
+
if Rails.matches(element, Rails.formSubmitSelector)
|
46
|
+
Rails.formElements(element, Rails.formDisableSelector).forEach (el) ->
|
47
|
+
$(el).removeClass 'text-with-icon'
|
48
|
+
else
|
49
|
+
$(el).removeClass 'text-with-icon'
|
@@ -1,2 +1,2 @@
|
|
1
|
-
@import 'tao/ui/mixins/base';
|
2
|
-
@import 'tao/ui/mixins/buttons';
|
1
|
+
@import 'tao/ui/shared/mixins/base';
|
2
|
+
@import 'tao/ui/shared/mixins/buttons';
|
@@ -1,3 +1,3 @@
|
|
1
1
|
@import 'tao/ui/variables/base';
|
2
|
-
@import 'tao/ui/variables/buttons';
|
3
|
-
@import 'tao/ui/variables/tables';
|
2
|
+
@import 'tao/ui/shared/variables/buttons';
|
3
|
+
@import 'tao/ui/shared/variables/tables';
|