curo-material-interface 0.0.4 → 0.0.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/assets/fonts/mdi/LICENSE.txt +96 -428
- data/lib/assets/fonts/mdi/materialdesignicons-webfont.eot +0 -0
- data/lib/assets/fonts/mdi/materialdesignicons-webfont.svg +3198 -0
- data/lib/assets/fonts/mdi/materialdesignicons-webfont.ttf +0 -0
- data/lib/assets/fonts/mdi/materialdesignicons-webfont.woff +0 -0
- data/lib/assets/fonts/mdi/materialdesignicons-webfont.woff2 +0 -0
- data/lib/assets/javascripts/cmi/behaviors/form_select_behavior.coffee +22 -0
- data/lib/assets/javascripts/cmi/behaviors/form_text_field_behavior.coffee +14 -3
- data/lib/assets/javascripts/cmi/behaviors/tabs_behavior.coffee +36 -2
- data/lib/assets/javascripts/cmi/form_components/select.coffee +274 -0
- data/lib/assets/javascripts/cmi/form_components/text_field.coffee +1 -1
- data/lib/assets/javascripts/cmi/tabs.coffee +60 -29
- data/lib/assets/stylesheets/cmi/_global.sass +7 -8
- data/lib/assets/stylesheets/cmi/_icons.sass +1 -2242
- data/lib/assets/stylesheets/cmi/_mixins.sass +24 -0
- data/lib/assets/stylesheets/cmi/_reset.sass +3 -3
- data/lib/assets/stylesheets/cmi/_variables.sass +21 -6
- data/lib/assets/stylesheets/cmi/components/_buttons.sass +143 -2
- data/lib/assets/stylesheets/cmi/components/_cards.sass +105 -0
- data/lib/assets/stylesheets/cmi/components/_flex-modal-ie.sass +21 -0
- data/lib/assets/stylesheets/cmi/components/_flex-modal.sass +59 -40
- data/lib/assets/stylesheets/cmi/components/_lists.sass +61 -0
- data/lib/assets/stylesheets/cmi/components/_loading-indicator.sass +26 -4
- data/lib/assets/stylesheets/cmi/components/_ripples.sass +1 -0
- data/lib/assets/stylesheets/cmi/components/_tables.sass +37 -0
- data/lib/assets/stylesheets/cmi/form_components/_checkbox.sass +14 -14
- data/lib/assets/stylesheets/cmi/form_components/_inputs.sass +83 -0
- data/lib/assets/stylesheets/cmi/form_components/_selects.sass +58 -0
- data/lib/assets/stylesheets/cmi/form_components/_text_field.sass +0 -84
- data/lib/assets/stylesheets/cmi/mdi/_core.scss +9 -0
- data/lib/assets/stylesheets/cmi/mdi/_icons.scss +19 -0
- data/lib/assets/stylesheets/cmi/mdi/_materialdesignicons.scss +5 -0
- data/lib/assets/stylesheets/cmi/mdi/_path.scss +11 -0
- data/lib/assets/stylesheets/cmi/mdi/_variables.scss +4 -0
- data/lib/curo_material_interface/engine.rb +11 -5
- data/lib/curo_material_interface/version.rb +1 -1
- metadata +20 -6
- data/lib/assets/fonts/mdi/Material-Design-Icons.eot +0 -0
- data/lib/assets/fonts/mdi/Material-Design-Icons.svg +0 -751
- data/lib/assets/fonts/mdi/Material-Design-Icons.ttf +0 -0
- data/lib/assets/fonts/mdi/Material-Design-Icons.woff +0 -0
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,22 @@
|
|
1
|
+
window.CMI or= {}
|
2
|
+
|
3
|
+
class CMI.FormSelectBehavior extends Marionette.Behavior
|
4
|
+
|
5
|
+
ui:
|
6
|
+
selects: '.cmi-select-input'
|
7
|
+
|
8
|
+
onRender: ->
|
9
|
+
@ui.selects.each ->
|
10
|
+
CMI.FormComponents.Select.reset($(this))
|
11
|
+
|
12
|
+
onShow: ->
|
13
|
+
@ui.selects.each ->
|
14
|
+
CMI.FormComponents.Select.reset($(this))
|
15
|
+
|
16
|
+
#
|
17
|
+
# To trigger a refresh, call triggerMethod('cmi:select:refresh') on
|
18
|
+
# the view implementing the behavior.
|
19
|
+
#
|
20
|
+
onCmiSelectRefresh: ->
|
21
|
+
@ui.selects.each ->
|
22
|
+
CMI.FormComponents.Select.reset($(this))
|
@@ -15,9 +15,7 @@ class CMI.FormTextFieldBehavior extends Marionette.Behavior
|
|
15
15
|
'blur @ui.inputs': 'onInputBlur'
|
16
16
|
|
17
17
|
onRender: ->
|
18
|
-
|
19
|
-
@ui.inputs.each ->
|
20
|
-
CMI.FormComponents.TextField.reset($(this))
|
18
|
+
@onCmiFormTextFieldsReset()
|
21
19
|
|
22
20
|
onInputChange: (event) ->
|
23
21
|
CMI.FormComponents.TextField.animateChange($(event.currentTarget))
|
@@ -28,3 +26,16 @@ class CMI.FormTextFieldBehavior extends Marionette.Behavior
|
|
28
26
|
onInputBlur: (event) ->
|
29
27
|
CMI.FormComponents.TextField.animateBlur($(event.currentTarget))
|
30
28
|
|
29
|
+
onCmiFormTextFieldsReset: ->
|
30
|
+
return unless @ui.inputs instanceof jQuery
|
31
|
+
return unless @ui.inputs.length > 0
|
32
|
+
|
33
|
+
_self = @
|
34
|
+
|
35
|
+
@ui.inputs.each -> _self.onCmiFormTextFieldReset($(this))
|
36
|
+
|
37
|
+
onCmiFormTextFieldReset: (domElement) ->
|
38
|
+
return unless domElement instanceof jQuery
|
39
|
+
|
40
|
+
CMI.FormComponents.TextField.reset(domElement)
|
41
|
+
|
@@ -12,17 +12,23 @@ class CMI.TabsBehavior extends Marionette.Behavior
|
|
12
12
|
|
13
13
|
ui:
|
14
14
|
tabs: '.cmi-tabs > li > a'
|
15
|
-
tabActive: '.cmi-tabs > li.cmi-active > a'
|
15
|
+
tabActive: '.cmi-tabs > li.cmi-tabs-active > a' # fixed here li identifier
|
16
|
+
tabsNavigation: '.cmi-tabs'
|
16
17
|
|
17
18
|
events:
|
18
19
|
'click @ui.tabs': 'onTabClick'
|
19
20
|
|
20
21
|
onRender: ->
|
21
|
-
@
|
22
|
+
@onCmiTabsRefresh()
|
22
23
|
|
23
24
|
onShow: ->
|
24
25
|
@activate(@ui.tabActive)
|
25
26
|
|
27
|
+
onCmiTabsRefresh: ->
|
28
|
+
@view.bindUIElements()
|
29
|
+
|
30
|
+
@activate(@ui.tabActive)
|
31
|
+
|
26
32
|
onTabClick: (event, b) ->
|
27
33
|
event.preventDefault()
|
28
34
|
target = $(event.currentTarget)
|
@@ -30,5 +36,33 @@ class CMI.TabsBehavior extends Marionette.Behavior
|
|
30
36
|
@activate(target)
|
31
37
|
@view.triggerMethod 'cmi:tabs:click', target
|
32
38
|
|
39
|
+
|
40
|
+
getTabsName: ->
|
41
|
+
@ui.tabsNavigation.data('cmi-tabs-name')
|
42
|
+
|
43
|
+
getCurrentTab: ->
|
44
|
+
$("[data-cmi-tabs-name=#{@getTabsName()}].cmi-tabs-tab.cmi-tabs-active")
|
45
|
+
|
46
|
+
getTabForNavigationElement: (domElement) ->
|
47
|
+
id = domElement.data('cmi-tab-id').replace('#', '')
|
48
|
+
|
49
|
+
$("[data-cmi-tabs-name=#{@getTabsName()}]##{id}.cmi-tabs-tab")
|
50
|
+
|
51
|
+
|
33
52
|
activate: (domElement) ->
|
53
|
+
return unless domElement instanceof jQuery
|
54
|
+
return unless domElement.length > 0
|
55
|
+
return if domElement == @getCurrentTab()
|
56
|
+
|
57
|
+
currentDomElement = @getCurrentTab()
|
58
|
+
unless currentDomElement instanceof jQuery && currentDomElement.length > 0
|
59
|
+
currentDomElement = null
|
60
|
+
|
61
|
+
@view.triggerMethod 'cmi:tabs:tab:beforeShow', @getTabForNavigationElement(domElement)
|
62
|
+
@view.triggerMethod 'cmi:tabs:tab:beforeHide', currentDomElement if currentDomElement? == true
|
63
|
+
|
34
64
|
CMI.Tabs.activate(domElement)
|
65
|
+
|
66
|
+
@view.triggerMethod 'cmi:tabs:tab:hide', currentDomElement if currentDomElement? == true
|
67
|
+
@view.triggerMethod 'cmi:tabs:tab:show', @getTabForNavigationElement(domElement)
|
68
|
+
|
@@ -0,0 +1,274 @@
|
|
1
|
+
window.CMI or= {}
|
2
|
+
window.CMI.FormComponents or= {}
|
3
|
+
|
4
|
+
class CMI.FormComponents.Select
|
5
|
+
|
6
|
+
@get: (domElement) ->
|
7
|
+
domElement = $(domElement) unless domElement instanceof jQuery
|
8
|
+
|
9
|
+
unless domElement.data('cmi-select') instanceof CMI.FormComponents.Select
|
10
|
+
domElement.data 'cmi-select', new @(domElement)
|
11
|
+
|
12
|
+
domElement.data 'cmi-select'
|
13
|
+
|
14
|
+
@reset: (domElement) ->
|
15
|
+
domElement = $(domElement) unless domElement instanceof jQuery
|
16
|
+
|
17
|
+
@get(domElement)
|
18
|
+
|
19
|
+
@open: (domElement, selectCallback = null) ->
|
20
|
+
domElement = $(domElement) unless domElement instanceof jQuery
|
21
|
+
|
22
|
+
@get(domElement).open(selectCallback)
|
23
|
+
|
24
|
+
@close: (domElement) ->
|
25
|
+
domElement = $(domElement) unless domElement instanceof jQuery
|
26
|
+
|
27
|
+
@get(domElement).close()
|
28
|
+
|
29
|
+
@select: (domElement, value) ->
|
30
|
+
domElement = $(domElement) unless domElement instanceof jQuery
|
31
|
+
|
32
|
+
@get(domElement).select(value)
|
33
|
+
|
34
|
+
@destroy: (domElement) ->
|
35
|
+
domElement = $(domElement) unless domElement instanceof jQuery
|
36
|
+
|
37
|
+
@get(domElement).destroy()
|
38
|
+
domElement.data 'cmi-select', null
|
39
|
+
|
40
|
+
|
41
|
+
# ---------------------------------------------
|
42
|
+
|
43
|
+
constructor: (@domElement) ->
|
44
|
+
@reset()
|
45
|
+
|
46
|
+
reset: ->
|
47
|
+
@_prepare()
|
48
|
+
|
49
|
+
destroy: ->
|
50
|
+
@_unbindListeners()
|
51
|
+
@_clear()
|
52
|
+
|
53
|
+
open: ->
|
54
|
+
return if @domElement.hasClass 'cmi-select-open'
|
55
|
+
|
56
|
+
@_open = true
|
57
|
+
|
58
|
+
@domElement.addClass 'cmi-select-open'
|
59
|
+
@getDropdownList().addClass 'cmi-select-open'
|
60
|
+
$('body').addClass 'cmi-select-list-open'
|
61
|
+
|
62
|
+
$(window).on 'resize.cmiSelectOpen', $.proxy(@updateDropdownListPosition, @)
|
63
|
+
|
64
|
+
@updateDropdownListPosition()
|
65
|
+
|
66
|
+
close: ->
|
67
|
+
return unless @domElement.hasClass 'cmi-select-open'
|
68
|
+
|
69
|
+
$(window).off 'resize.cmiSelectOpen'
|
70
|
+
|
71
|
+
@_open = false
|
72
|
+
|
73
|
+
@domElement.removeClass 'cmi-select-open'
|
74
|
+
@getDropdownList().removeClass 'cmi-select-open'
|
75
|
+
$('body').removeClass 'cmi-select-list-open'
|
76
|
+
|
77
|
+
CMI.FormComponents.TextField.reset(@getInput())
|
78
|
+
|
79
|
+
select: (value) ->
|
80
|
+
|
81
|
+
getInput: ->
|
82
|
+
@domElement.data('cmi-select-input') || $('<div></div>')
|
83
|
+
|
84
|
+
getDropdownList: ->
|
85
|
+
@domElement.data('cmi-select-dropdown-list') || $('<div></div>')
|
86
|
+
|
87
|
+
getSelect: ->
|
88
|
+
$('select', @domElement)
|
89
|
+
|
90
|
+
getName: ->
|
91
|
+
@getSelect().attr 'name'
|
92
|
+
|
93
|
+
getDocumentHeight: ->
|
94
|
+
html = document.documentElement
|
95
|
+
body = document.body
|
96
|
+
|
97
|
+
Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight )
|
98
|
+
|
99
|
+
getViewportHeight: ->
|
100
|
+
Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
|
101
|
+
|
102
|
+
getViewportScrollY: ->
|
103
|
+
window.scrollY
|
104
|
+
|
105
|
+
updateDropdownListPosition: ->
|
106
|
+
offset = @getInput().offset()
|
107
|
+
width = @getInput().width()
|
108
|
+
|
109
|
+
# reset
|
110
|
+
@getDropdownList().css
|
111
|
+
height: 'auto'
|
112
|
+
top: 0
|
113
|
+
bottom: 'auto'
|
114
|
+
width: "#{width}px"
|
115
|
+
left: "#{offset.left}px"
|
116
|
+
|
117
|
+
# set the position
|
118
|
+
dropdownHeight = @getDropdownList().outerHeight(true)
|
119
|
+
dropdownMarginTop = parseInt(@getDropdownList().css('margin-top'))
|
120
|
+
pos = { bottom: null, top: offset.top - dropdownMarginTop }
|
121
|
+
|
122
|
+
# adjust position for selected element
|
123
|
+
selected = $('.cmi-select-selected', @getDropdownList()).first()
|
124
|
+
selectedOffset = selected.offset().top - selected.offsetParent().offset().top
|
125
|
+
pos.top = pos.top - selectedOffset
|
126
|
+
|
127
|
+
# fix if top is outside viewport
|
128
|
+
if pos.top < @getViewportScrollY()
|
129
|
+
pos.top = @getViewportScrollY()
|
130
|
+
|
131
|
+
# fix if bottom is outside viewport
|
132
|
+
if pos.top + dropdownHeight > @getDocumentHeight()
|
133
|
+
pos.bottom = window.scrollY * -1
|
134
|
+
pos.top = null if pos.top > @getViewportScrollY()
|
135
|
+
|
136
|
+
# fix if top is outside viewport
|
137
|
+
if pos.top == null && dropdownHeight > @getViewportHeight()
|
138
|
+
pos.top = @getViewportScrollY()
|
139
|
+
|
140
|
+
# set position
|
141
|
+
pos.top = if pos.top == null then 'auto' else "#{pos.top}px"
|
142
|
+
pos.bottom = if pos.bottom == null then 'auto' else "#{pos.bottom}px"
|
143
|
+
@getDropdownList().css pos
|
144
|
+
|
145
|
+
onInputClick: ->
|
146
|
+
@open()
|
147
|
+
|
148
|
+
onInputFocus: ->
|
149
|
+
@open()
|
150
|
+
|
151
|
+
onInputBlur: (event) ->
|
152
|
+
@close()
|
153
|
+
|
154
|
+
setTimeout =>
|
155
|
+
CMI.FormComponents.TextField.reset(@getInput())
|
156
|
+
, 50
|
157
|
+
|
158
|
+
onListClick: (event) ->
|
159
|
+
event.preventDefault()
|
160
|
+
return unless @_open == true
|
161
|
+
|
162
|
+
selected = $('option:selected', @getSelect())
|
163
|
+
selected[0].removeAttribute('selected') if selected.length > 0
|
164
|
+
|
165
|
+
target = $("option[value='#{$(event.target).data('cmi-value')}']", @getSelect())
|
166
|
+
target.attr('selected', true)
|
167
|
+
|
168
|
+
@_setValues()
|
169
|
+
@getSelect().trigger 'change'
|
170
|
+
|
171
|
+
@close()
|
172
|
+
@getInput().stop().delay(250).blur()
|
173
|
+
|
174
|
+
|
175
|
+
# ---------------------------------------------
|
176
|
+
# private methods
|
177
|
+
|
178
|
+
# @nodoc
|
179
|
+
_prepare: ->
|
180
|
+
return unless @domElement instanceof jQuery
|
181
|
+
return unless @domElement.length > 0
|
182
|
+
|
183
|
+
@_initializeInput()
|
184
|
+
@_initializeDropdownList()
|
185
|
+
@_hideSelect()
|
186
|
+
@_setValues()
|
187
|
+
@_bindListeners()
|
188
|
+
|
189
|
+
CMI.FormComponents.TextField.reset(@getInput())
|
190
|
+
|
191
|
+
# @nodoc
|
192
|
+
_clear: ->
|
193
|
+
return unless @domElement instanceof jQuery
|
194
|
+
return unless @domElement.length > 0
|
195
|
+
|
196
|
+
@_clearInput()
|
197
|
+
@_clearDropdownList()
|
198
|
+
@_showSelect()
|
199
|
+
|
200
|
+
# @nodoc
|
201
|
+
_initializeInput: ->
|
202
|
+
input = $("<input class='cmi-input' readonly='true' />")
|
203
|
+
|
204
|
+
@domElement.data 'cmi-select-input', input
|
205
|
+
@domElement.prepend input
|
206
|
+
|
207
|
+
# @nodoc
|
208
|
+
_clearInput: ->
|
209
|
+
return unless @domElement.data('cmi-select-input') instanceof jQuery
|
210
|
+
|
211
|
+
@domElement.data('cmi-select-input').remove()
|
212
|
+
@domElement.data 'cmi-select-input', null
|
213
|
+
|
214
|
+
# @nodoc
|
215
|
+
_initializeDropdownList: ->
|
216
|
+
options = []
|
217
|
+
for option in $('option', @getSelect())
|
218
|
+
content = $(option).text()
|
219
|
+
content = ' ' if content.length <= 0
|
220
|
+
options.push "<li data-cmi-value='#{$(option).val()}'>#{content}</li>"
|
221
|
+
|
222
|
+
dropdownList = $("<ul class='cmi-select-list'>#{options.join('')}</ul>")
|
223
|
+
|
224
|
+
@domElement.data 'cmi-select-dropdown-list', dropdownList
|
225
|
+
$('body').append dropdownList
|
226
|
+
|
227
|
+
# @nodoc
|
228
|
+
_clearDropdownList: ->
|
229
|
+
return unless @domElement.data('cmi-select-dropdown-list') instanceof jQuery
|
230
|
+
|
231
|
+
@domElement.data('cmi-select-dropdown-list').remove()
|
232
|
+
@domElement.data 'cmi-select-dropdown-list', null
|
233
|
+
|
234
|
+
# @nodoc
|
235
|
+
_hideSelect: ->
|
236
|
+
@getSelect().addClass 'cmi-select-select-hidden'
|
237
|
+
|
238
|
+
# @nodoc
|
239
|
+
_showSelect: ->
|
240
|
+
@getSelect().removeClass 'cmi-select-select-hidden'
|
241
|
+
|
242
|
+
# @nodoc
|
243
|
+
_setValues: ->
|
244
|
+
selected = $('option:selected', @getSelect())
|
245
|
+
return if selected.length <= 0
|
246
|
+
|
247
|
+
content = selected.text()
|
248
|
+
value = selected.val()
|
249
|
+
|
250
|
+
if selected.data('cmi-input-content') && selected.data('cmi-input-content').length > 0
|
251
|
+
content = selected.data('cmi-input-content')
|
252
|
+
|
253
|
+
@getInput().val content
|
254
|
+
|
255
|
+
$("li", @getDropdownList()).removeClass 'cmi-select-selected'
|
256
|
+
$("li[data-cmi-value='#{value}']", @getDropdownList()).addClass 'cmi-select-selected'
|
257
|
+
|
258
|
+
|
259
|
+
# @nodoc
|
260
|
+
_bindListeners: ->
|
261
|
+
@getDropdownList().on "mousedown.cmiInput#{@getName()}", 'li', $.proxy(@onListClick, @)
|
262
|
+
|
263
|
+
@getInput().on "focus.cmiInput#{@getName()}", $.proxy(@onInputFocus, @)
|
264
|
+
@getInput().on "click.cmiInput#{@getName()}", $.proxy(@onInputClick, @)
|
265
|
+
@getInput().on "blur.cmiInput#{@getName()}", $.proxy(@onInputBlur, @)
|
266
|
+
|
267
|
+
# @nodoc
|
268
|
+
_unbindListeners: ->
|
269
|
+
@getDropdownList().off "mousedown.cmiInput#{@getName()}", 'li'
|
270
|
+
|
271
|
+
@getInput().off "focus.cmiInput#{@getName()}"
|
272
|
+
@getInput().off "blur.cmiInput#{@getName()}"
|
273
|
+
|
274
|
+
|
@@ -2,19 +2,69 @@ window.CMI or= {}
|
|
2
2
|
|
3
3
|
class CMI.Tabs
|
4
4
|
|
5
|
-
@activate: (
|
6
|
-
|
7
|
-
return if
|
5
|
+
@activate: (invoker) ->
|
6
|
+
invoker = $(invoker) unless invoker instanceof jQuery
|
7
|
+
return if invoker.length <= 0
|
8
8
|
|
9
|
-
#
|
10
|
-
|
11
|
-
|
12
|
-
indicator = tabs.find('.cmi-tabs-active-indicator')
|
9
|
+
# fetch - links panel
|
10
|
+
invokersPanel = invoker.parents('.cmi-tabs').first()
|
11
|
+
return if invokersPanel.length <= 0
|
13
12
|
|
14
|
-
#
|
15
|
-
|
13
|
+
# ensure indicator (bar below)
|
14
|
+
@_ensureActiveIndicator(invokersPanel)
|
15
|
+
|
16
|
+
# fetch - tabs unique name
|
17
|
+
name = invokersPanel.data('cmi-tabs-name')
|
18
|
+
return if name? == false || name.length <= 0
|
19
|
+
|
20
|
+
# fetch - upcoming tab
|
21
|
+
upcomingTab = @_tabFromInvoker invoker, name
|
22
|
+
return if upcomingTab.length <= 0
|
23
|
+
return if upcomingTab.hasClass 'cmi-tabs-active'
|
24
|
+
|
25
|
+
# fetch - active tabs
|
26
|
+
activeTabs = $("[data-cmi-tabs-name=#{name}].cmi-tabs-tab.cmi-tabs-active")
|
27
|
+
|
28
|
+
# before triggers
|
29
|
+
upcomingTab.trigger 'cmi.tabs.beforeShow'
|
30
|
+
activeTabs.trigger 'cmi.tabs.beforeHide'
|
31
|
+
|
32
|
+
# set and animate active indicator
|
33
|
+
@_setAndAnimateActiveIndicator(invokersPanel, invoker)
|
34
|
+
|
35
|
+
# show / hide
|
36
|
+
upcomingTab.addClass 'cmi-tabs-active'
|
37
|
+
activeTabs.removeClass 'cmi-tabs-active'
|
38
|
+
invokersPanel.find('li').removeClass 'cmi-tabs-active'
|
39
|
+
invoker.parents('li').first().addClass 'cmi-tabs-active'
|
40
|
+
|
41
|
+
# after triggers
|
42
|
+
upcomingTab.trigger 'cmi.tabs.show'
|
43
|
+
activeTabs.trigger 'cmi.tabs.hide'
|
44
|
+
|
45
|
+
|
46
|
+
# ---------------------------------------------
|
47
|
+
# private
|
48
|
+
|
49
|
+
# @nodoc
|
50
|
+
@_ensureActiveIndicator: (invokersPanel) ->
|
51
|
+
return if invokersPanel.find('.cmi-tabs-active-indicator').length > 0
|
52
|
+
|
53
|
+
invokersPanel.append('<li class="cmi-li cmi-tabs-active-indicator"></li>')
|
54
|
+
|
55
|
+
# @nodoc
|
56
|
+
@_tabFromInvoker: (domElement, name) ->
|
57
|
+
id = domElement.attr('data-cmi-tab-id').replace('#', '')
|
58
|
+
$("[data-cmi-tabs-name=#{name}]##{id}").first()
|
59
|
+
|
60
|
+
# @nodoc
|
61
|
+
@_setAndAnimateActiveIndicator: (invokersPanel, invoker) ->
|
62
|
+
indicator = invokersPanel.find('.cmi-tabs-active-indicator')
|
63
|
+
|
64
|
+
# new position for active indicator
|
65
|
+
position = invoker.offsetParent().position()
|
16
66
|
left = position.left
|
17
|
-
right =
|
67
|
+
right = invokersPanel.innerWidth() - left - invoker.outerWidth()
|
18
68
|
|
19
69
|
# moving direction
|
20
70
|
indicator.removeClass('cmi-tabs-animate-right').removeClass('cmi-tabs-animate-left')
|
@@ -25,22 +75,3 @@ class CMI.Tabs
|
|
25
75
|
|
26
76
|
# animate indicator
|
27
77
|
indicator.css({ left: "#{left}px", right: "#{right}px" })
|
28
|
-
|
29
|
-
# set link active
|
30
|
-
tabs.find('li').removeClass('cmi-tabs-active')
|
31
|
-
domElement.parents('li').addClass('cmi-tabs-active')
|
32
|
-
|
33
|
-
# switch tab
|
34
|
-
tabsContainer = $(tabs.data('cmi-tabs-container'))
|
35
|
-
element = document.getElementById(domElement.attr('href').replace('#', ''))
|
36
|
-
if element? == true && element.className.indexOf('cmi-tabs-active') < 0
|
37
|
-
tabsContainer.find('.cmi-tabs-tab').removeClass('cmi-tabs-active')
|
38
|
-
element.className += ' cmi-tabs-active'
|
39
|
-
|
40
|
-
|
41
|
-
# ---------------------------------------------
|
42
|
-
# private
|
43
|
-
|
44
|
-
@_ensureActiveIndicator: (tabsElement) ->
|
45
|
-
return if tabsElement.find('.cmi-tabs-active-indicator').length > 0
|
46
|
-
tabsElement.append('<li class="cmi-li cmi-tabs-active-indicator"></li>')
|
@@ -3,7 +3,7 @@
|
|
3
3
|
font-size: 16px
|
4
4
|
font-size: 1rem
|
5
5
|
line-height: 1.4
|
6
|
-
box-sizing
|
6
|
+
+box-sizing(border-box)
|
7
7
|
|
8
8
|
*[class^="cmi-"]
|
9
9
|
+selection
|
@@ -23,7 +23,10 @@ input.cmi-input,
|
|
23
23
|
label.cmi-label,
|
24
24
|
textarea.cmi-textarea,
|
25
25
|
select.cmi-select
|
26
|
-
box-sizing
|
26
|
+
+box-sizing(border-box)
|
27
|
+
|
28
|
+
.cmi-clearfix
|
29
|
+
+clearfix
|
27
30
|
|
28
31
|
hr.cmi-hr
|
29
32
|
display: block
|
@@ -58,15 +61,11 @@ table.cmi-table
|
|
58
61
|
thead.cmi-thead
|
59
62
|
border-bottom: 1px solid $color-table-border
|
60
63
|
td.cmi-td, th.cmi-th
|
61
|
-
padding: 15px
|
64
|
+
padding: 5px 15px
|
62
65
|
display: table-cell
|
63
66
|
text-align: left
|
64
67
|
vertical-align: middle
|
65
|
-
background
|
66
|
-
+cmi-border-radius(2px)
|
67
|
-
tr.cmi-tr:nth-child(even)
|
68
|
-
td.cmi-td
|
69
|
-
background-color: #f9f9f9
|
68
|
+
background: transparent
|
70
69
|
|
71
70
|
.cmi-pull-right
|
72
71
|
position: relative
|