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.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/lib/assets/fonts/mdi/LICENSE.txt +96 -428
  3. data/lib/assets/fonts/mdi/materialdesignicons-webfont.eot +0 -0
  4. data/lib/assets/fonts/mdi/materialdesignicons-webfont.svg +3198 -0
  5. data/lib/assets/fonts/mdi/materialdesignicons-webfont.ttf +0 -0
  6. data/lib/assets/fonts/mdi/materialdesignicons-webfont.woff +0 -0
  7. data/lib/assets/fonts/mdi/materialdesignicons-webfont.woff2 +0 -0
  8. data/lib/assets/javascripts/cmi/behaviors/form_select_behavior.coffee +22 -0
  9. data/lib/assets/javascripts/cmi/behaviors/form_text_field_behavior.coffee +14 -3
  10. data/lib/assets/javascripts/cmi/behaviors/tabs_behavior.coffee +36 -2
  11. data/lib/assets/javascripts/cmi/form_components/select.coffee +274 -0
  12. data/lib/assets/javascripts/cmi/form_components/text_field.coffee +1 -1
  13. data/lib/assets/javascripts/cmi/tabs.coffee +60 -29
  14. data/lib/assets/stylesheets/cmi/_global.sass +7 -8
  15. data/lib/assets/stylesheets/cmi/_icons.sass +1 -2242
  16. data/lib/assets/stylesheets/cmi/_mixins.sass +24 -0
  17. data/lib/assets/stylesheets/cmi/_reset.sass +3 -3
  18. data/lib/assets/stylesheets/cmi/_variables.sass +21 -6
  19. data/lib/assets/stylesheets/cmi/components/_buttons.sass +143 -2
  20. data/lib/assets/stylesheets/cmi/components/_cards.sass +105 -0
  21. data/lib/assets/stylesheets/cmi/components/_flex-modal-ie.sass +21 -0
  22. data/lib/assets/stylesheets/cmi/components/_flex-modal.sass +59 -40
  23. data/lib/assets/stylesheets/cmi/components/_lists.sass +61 -0
  24. data/lib/assets/stylesheets/cmi/components/_loading-indicator.sass +26 -4
  25. data/lib/assets/stylesheets/cmi/components/_ripples.sass +1 -0
  26. data/lib/assets/stylesheets/cmi/components/_tables.sass +37 -0
  27. data/lib/assets/stylesheets/cmi/form_components/_checkbox.sass +14 -14
  28. data/lib/assets/stylesheets/cmi/form_components/_inputs.sass +83 -0
  29. data/lib/assets/stylesheets/cmi/form_components/_selects.sass +58 -0
  30. data/lib/assets/stylesheets/cmi/form_components/_text_field.sass +0 -84
  31. data/lib/assets/stylesheets/cmi/mdi/_core.scss +9 -0
  32. data/lib/assets/stylesheets/cmi/mdi/_icons.scss +19 -0
  33. data/lib/assets/stylesheets/cmi/mdi/_materialdesignicons.scss +5 -0
  34. data/lib/assets/stylesheets/cmi/mdi/_path.scss +11 -0
  35. data/lib/assets/stylesheets/cmi/mdi/_variables.scss +4 -0
  36. data/lib/curo_material_interface/engine.rb +11 -5
  37. data/lib/curo_material_interface/version.rb +1 -1
  38. metadata +20 -6
  39. data/lib/assets/fonts/mdi/Material-Design-Icons.eot +0 -0
  40. data/lib/assets/fonts/mdi/Material-Design-Icons.svg +0 -751
  41. data/lib/assets/fonts/mdi/Material-Design-Icons.ttf +0 -0
  42. data/lib/assets/fonts/mdi/Material-Design-Icons.woff +0 -0
@@ -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
- if @ui.inputs? == true && @ui.inputs.length > 0
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
- @activate(@ui.tabActive)
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 = '&nbsp;' 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
+
@@ -45,5 +45,5 @@ class CMI.FormComponents.TextField
45
45
  parentDomElement.addClass('cmi-invalid')
46
46
 
47
47
  @_getInputBoxSelector: ->
48
- '.cmi-text-input'
48
+ '.cmi-text-input, .cmi-select-input'
49
49
 
@@ -2,19 +2,69 @@ window.CMI or= {}
2
2
 
3
3
  class CMI.Tabs
4
4
 
5
- @activate: (domElement) ->
6
- domElement = $(domElement) unless domElement instanceof jQuery
7
- return if domElement? == false || domElement.length <= 0
5
+ @activate: (invoker) ->
6
+ invoker = $(invoker) unless invoker instanceof jQuery
7
+ return if invoker.length <= 0
8
8
 
9
- # load tabs
10
- tabs = domElement.parents('.cmi-tabs')
11
- @_ensureActiveIndicator(tabs)
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
- # new position
15
- position = domElement.offsetParent().position()
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 = tabs.innerWidth() - left - domElement.outerWidth()
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: border-box
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: border-box
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 5px
64
+ padding: 5px 15px
62
65
  display: table-cell
63
66
  text-align: left
64
67
  vertical-align: middle
65
- background-color: #fff
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