curo-material-interface 0.0.4 → 0.0.5

data/lib/assets/javascripts/cmi/behaviors/form_select_behavior.coffee

@@ -0,0 +1,22 @@
+window.CMI or= {}
+
+class CMI.FormSelectBehavior extends Marionette.Behavior
+
+  ui:
+    selects: '.cmi-select-input'
+
+  onRender: ->
+    @ui.selects.each ->
+      CMI.FormComponents.Select.reset($(this))
+
+  onShow: ->
+    @ui.selects.each ->
+      CMI.FormComponents.Select.reset($(this))
+
+  #
+  # To trigger a refresh, call triggerMethod('cmi:select:refresh') on
+  # the view implementing the behavior.
+  #
+  onCmiSelectRefresh: ->
+    @ui.selects.each ->
+      CMI.FormComponents.Select.reset($(this))

data/lib/assets/javascripts/cmi/behaviors/form_text_field_behavior.coffee

@@ -15,9 +15,7 @@ class CMI.FormTextFieldBehavior extends Marionette.Behavior
     'blur @ui.inputs': 'onInputBlur'
 
   onRender: ->
-    if @ui.inputs? == true && @ui.inputs.length > 0
-      @ui.inputs.each ->
-        CMI.FormComponents.TextField.reset($(this))
+    @onCmiFormTextFieldsReset()
 
   onInputChange: (event) ->
     CMI.FormComponents.TextField.animateChange($(event.currentTarget))
@@ -28,3 +26,16 @@ class CMI.FormTextFieldBehavior extends Marionette.Behavior
   onInputBlur: (event) ->
     CMI.FormComponents.TextField.animateBlur($(event.currentTarget))
 
+  onCmiFormTextFieldsReset: ->
+    return unless @ui.inputs instanceof jQuery
+    return unless @ui.inputs.length > 0
+
+    _self = @
+
+    @ui.inputs.each -> _self.onCmiFormTextFieldReset($(this))
+
+  onCmiFormTextFieldReset: (domElement) ->
+    return unless domElement instanceof jQuery
+
+    CMI.FormComponents.TextField.reset(domElement)
+

data/lib/assets/javascripts/cmi/behaviors/tabs_behavior.coffee

@@ -12,17 +12,23 @@ class CMI.TabsBehavior extends Marionette.Behavior
 
   ui:
     tabs: '.cmi-tabs > li > a'
-    tabActive: '.cmi-tabs > li.cmi-active > a'
+    tabActive: '.cmi-tabs > li.cmi-tabs-active > a' # fixed here li identifier
+    tabsNavigation: '.cmi-tabs'
 
   events:
     'click @ui.tabs': 'onTabClick'
 
   onRender: ->
-    @activate(@ui.tabActive)
+    @onCmiTabsRefresh()
 
   onShow: ->
     @activate(@ui.tabActive)
 
+  onCmiTabsRefresh: ->
+    @view.bindUIElements()
+
+    @activate(@ui.tabActive)
+
   onTabClick: (event, b) ->
     event.preventDefault()
     target = $(event.currentTarget)
@@ -30,5 +36,33 @@ class CMI.TabsBehavior extends Marionette.Behavior
     @activate(target)
     @view.triggerMethod 'cmi:tabs:click', target
 
+
+  getTabsName: ->
+    @ui.tabsNavigation.data('cmi-tabs-name')
+
+  getCurrentTab: ->
+    $("[data-cmi-tabs-name=#{@getTabsName()}].cmi-tabs-tab.cmi-tabs-active")
+
+  getTabForNavigationElement: (domElement) ->
+    id = domElement.data('cmi-tab-id').replace('#', '')
+
+    $("[data-cmi-tabs-name=#{@getTabsName()}]##{id}.cmi-tabs-tab")
+
+
   activate: (domElement) ->
+    return unless domElement instanceof jQuery
+    return unless domElement.length > 0
+    return if domElement == @getCurrentTab()
+
+    currentDomElement = @getCurrentTab()
+    unless currentDomElement instanceof jQuery && currentDomElement.length > 0
+      currentDomElement = null
+
+    @view.triggerMethod 'cmi:tabs:tab:beforeShow', @getTabForNavigationElement(domElement)
+    @view.triggerMethod 'cmi:tabs:tab:beforeHide', currentDomElement if currentDomElement? == true
+
     CMI.Tabs.activate(domElement)
+
+    @view.triggerMethod 'cmi:tabs:tab:hide', currentDomElement if currentDomElement? == true
+    @view.triggerMethod 'cmi:tabs:tab:show', @getTabForNavigationElement(domElement)
+

data/lib/assets/javascripts/cmi/form_components/select.coffee

@@ -0,0 +1,274 @@
+window.CMI or= {}
+window.CMI.FormComponents or= {}
+
+class CMI.FormComponents.Select
+
+  @get: (domElement) ->
+    domElement = $(domElement) unless domElement instanceof jQuery
+
+    unless domElement.data('cmi-select') instanceof CMI.FormComponents.Select
+      domElement.data 'cmi-select', new @(domElement)
+
+    domElement.data 'cmi-select'
+
+  @reset: (domElement) ->
+    domElement = $(domElement) unless domElement instanceof jQuery
+
+    @get(domElement)
+
+  @open: (domElement, selectCallback = null) ->
+    domElement = $(domElement) unless domElement instanceof jQuery
+
+    @get(domElement).open(selectCallback)
+
+  @close: (domElement) ->
+    domElement = $(domElement) unless domElement instanceof jQuery
+
+    @get(domElement).close()
+
+  @select: (domElement, value) ->
+    domElement = $(domElement) unless domElement instanceof jQuery
+
+    @get(domElement).select(value)
+
+  @destroy: (domElement) ->
+    domElement = $(domElement) unless domElement instanceof jQuery
+
+    @get(domElement).destroy()
+    domElement.data 'cmi-select', null
+
+
+  # ---------------------------------------------
+
+  constructor: (@domElement) ->
+    @reset()
+
+  reset: ->
+    @_prepare()
+
+  destroy: ->
+    @_unbindListeners()
+    @_clear()
+
+  open: ->
+    return if @domElement.hasClass 'cmi-select-open'
+
+    @_open = true
+
+    @domElement.addClass 'cmi-select-open'
+    @getDropdownList().addClass 'cmi-select-open'
+    $('body').addClass 'cmi-select-list-open'
+
+    $(window).on 'resize.cmiSelectOpen', $.proxy(@updateDropdownListPosition, @)
+
+    @updateDropdownListPosition()
+
+  close: ->
+    return unless @domElement.hasClass 'cmi-select-open'
+
+    $(window).off 'resize.cmiSelectOpen'
+
+    @_open = false
+
+    @domElement.removeClass 'cmi-select-open'
+    @getDropdownList().removeClass 'cmi-select-open'
+    $('body').removeClass 'cmi-select-list-open'
+
+    CMI.FormComponents.TextField.reset(@getInput())
+
+  select: (value) ->
+
+  getInput: ->
+    @domElement.data('cmi-select-input') || $('<div></div>')
+
+  getDropdownList: ->
+    @domElement.data('cmi-select-dropdown-list') || $('<div></div>')
+
+  getSelect: ->
+    $('select', @domElement)
+
+  getName: ->
+    @getSelect().attr 'name'
+
+  getDocumentHeight: ->
+    html = document.documentElement
+    body = document.body
+
+    Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight )
+
+  getViewportHeight: ->
+    Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
+
+  getViewportScrollY: ->
+    window.scrollY
+
+  updateDropdownListPosition: ->
+    offset = @getInput().offset()
+    width = @getInput().width()
+
+    # reset
+    @getDropdownList().css
+      height: 'auto'
+      top: 0
+      bottom: 'auto'
+      width: "#{width}px"
+      left: "#{offset.left}px"
+
+    # set the position
+    dropdownHeight = @getDropdownList().outerHeight(true)
+    dropdownMarginTop = parseInt(@getDropdownList().css('margin-top'))
+    pos = { bottom: null, top: offset.top - dropdownMarginTop }
+
+    # adjust position for selected element
+    selected = $('.cmi-select-selected', @getDropdownList()).first()
+    selectedOffset = selected.offset().top - selected.offsetParent().offset().top
+    pos.top = pos.top - selectedOffset
+
+    # fix if top is outside viewport
+    if pos.top < @getViewportScrollY()
+      pos.top = @getViewportScrollY()
+
+    # fix if bottom is outside viewport
+    if pos.top + dropdownHeight > @getDocumentHeight()
+      pos.bottom = window.scrollY * -1
+      pos.top = null if pos.top > @getViewportScrollY()
+
+    # fix if top is outside viewport
+    if pos.top == null && dropdownHeight > @getViewportHeight()
+      pos.top = @getViewportScrollY()
+
+    # set position
+    pos.top = if pos.top == null then 'auto' else "#{pos.top}px"
+    pos.bottom = if pos.bottom == null then 'auto' else "#{pos.bottom}px"
+    @getDropdownList().css pos
+
+  onInputClick: ->
+    @open()
+
+  onInputFocus: ->
+    @open()
+
+  onInputBlur: (event) ->
+    @close()
+
+    setTimeout =>
+      CMI.FormComponents.TextField.reset(@getInput())
+    , 50
+
+  onListClick: (event) ->
+    event.preventDefault()
+    return unless @_open == true
+
+    selected = $('option:selected', @getSelect())
+    selected[0].removeAttribute('selected') if selected.length > 0
+
+    target = $("option[value='#{$(event.target).data('cmi-value')}']", @getSelect())
+    target.attr('selected', true)
+
+    @_setValues()
+    @getSelect().trigger 'change'
+
+    @close()
+    @getInput().stop().delay(250).blur()
+
+
+  # ---------------------------------------------
+  # private methods
+
+  # @nodoc
+  _prepare: ->
+    return unless @domElement instanceof jQuery
+    return unless @domElement.length > 0
+
+    @_initializeInput()
+    @_initializeDropdownList()
+    @_hideSelect()
+    @_setValues()
+    @_bindListeners()
+
+    CMI.FormComponents.TextField.reset(@getInput())
+
+  # @nodoc
+  _clear: ->
+    return unless @domElement instanceof jQuery
+    return unless @domElement.length > 0
+
+    @_clearInput()
+    @_clearDropdownList()
+    @_showSelect()
+
+  # @nodoc
+  _initializeInput: ->
+    input = $("<input class='cmi-input' readonly='true' />")
+
+    @domElement.data 'cmi-select-input', input
+    @domElement.prepend input
+
+  # @nodoc
+  _clearInput: ->
+    return unless @domElement.data('cmi-select-input') instanceof jQuery
+
+    @domElement.data('cmi-select-input').remove()
+    @domElement.data 'cmi-select-input', null
+
+  # @nodoc
+  _initializeDropdownList: ->
+    options = []
+    for option in $('option', @getSelect())
+      content = $(option).text()
+      content = '&nbsp;' if content.length <= 0
+      options.push "<li data-cmi-value='#{$(option).val()}'>#{content}</li>"
+
+    dropdownList = $("<ul class='cmi-select-list'>#{options.join('')}</ul>")
+
+    @domElement.data 'cmi-select-dropdown-list', dropdownList
+    $('body').append dropdownList
+
+  # @nodoc
+  _clearDropdownList: ->
+    return unless @domElement.data('cmi-select-dropdown-list') instanceof jQuery
+
+    @domElement.data('cmi-select-dropdown-list').remove()
+    @domElement.data 'cmi-select-dropdown-list', null
+
+  # @nodoc
+  _hideSelect: ->
+    @getSelect().addClass 'cmi-select-select-hidden'
+
+  # @nodoc
+  _showSelect: ->
+    @getSelect().removeClass 'cmi-select-select-hidden'
+
+  # @nodoc
+  _setValues: ->
+    selected = $('option:selected', @getSelect())
+    return if selected.length <= 0
+
+    content = selected.text()
+    value = selected.val()
+
+    if selected.data('cmi-input-content') && selected.data('cmi-input-content').length > 0
+      content = selected.data('cmi-input-content')
+
+    @getInput().val content
+
+    $("li", @getDropdownList()).removeClass 'cmi-select-selected'
+    $("li[data-cmi-value='#{value}']", @getDropdownList()).addClass 'cmi-select-selected'
+
+
+  # @nodoc
+  _bindListeners: ->
+    @getDropdownList().on "mousedown.cmiInput#{@getName()}", 'li', $.proxy(@onListClick, @)
+
+    @getInput().on "focus.cmiInput#{@getName()}", $.proxy(@onInputFocus, @)
+    @getInput().on "click.cmiInput#{@getName()}", $.proxy(@onInputClick, @)
+    @getInput().on "blur.cmiInput#{@getName()}", $.proxy(@onInputBlur, @)
+
+  # @nodoc
+  _unbindListeners: ->
+    @getDropdownList().off "mousedown.cmiInput#{@getName()}", 'li'
+
+    @getInput().off "focus.cmiInput#{@getName()}"
+    @getInput().off "blur.cmiInput#{@getName()}"
+
+

data/lib/assets/javascripts/cmi/form_components/text_field.coffee

@@ -45,5 +45,5 @@ class CMI.FormComponents.TextField
         parentDomElement.addClass('cmi-invalid')
 
   @_getInputBoxSelector: ->
-    '.cmi-text-input'
+    '.cmi-text-input, .cmi-select-input'
 

data/lib/assets/javascripts/cmi/tabs.coffee

@@ -2,19 +2,69 @@ window.CMI or= {}
 
 class CMI.Tabs
 
-  @activate: (domElement) ->
-    domElement = $(domElement) unless domElement instanceof jQuery
-    return if domElement? == false || domElement.length <= 0
+  @activate: (invoker) ->
+    invoker = $(invoker) unless invoker instanceof jQuery
+    return if invoker.length <= 0
 
-    # load tabs
-    tabs = domElement.parents('.cmi-tabs')
-    @_ensureActiveIndicator(tabs)
-    indicator = tabs.find('.cmi-tabs-active-indicator')
+    # fetch - links panel
+    invokersPanel = invoker.parents('.cmi-tabs').first()
+    return if invokersPanel.length <= 0
 
-    # new position
-    position = domElement.offsetParent().position()
+    # ensure indicator (bar below)
+    @_ensureActiveIndicator(invokersPanel)
+
+    # fetch - tabs unique name
+    name = invokersPanel.data('cmi-tabs-name')
+    return if name? == false || name.length <= 0
+
+    # fetch - upcoming tab
+    upcomingTab = @_tabFromInvoker invoker, name
+    return if upcomingTab.length <= 0
+    return if upcomingTab.hasClass 'cmi-tabs-active'
+
+    # fetch - active tabs
+    activeTabs = $("[data-cmi-tabs-name=#{name}].cmi-tabs-tab.cmi-tabs-active")
+
+    # before triggers
+    upcomingTab.trigger 'cmi.tabs.beforeShow'
+    activeTabs.trigger 'cmi.tabs.beforeHide'
+
+    # set and animate active indicator
+    @_setAndAnimateActiveIndicator(invokersPanel, invoker)
+
+    # show / hide
+    upcomingTab.addClass 'cmi-tabs-active'
+    activeTabs.removeClass 'cmi-tabs-active'
+    invokersPanel.find('li').removeClass 'cmi-tabs-active'
+    invoker.parents('li').first().addClass 'cmi-tabs-active'
+
+    # after triggers
+    upcomingTab.trigger 'cmi.tabs.show'
+    activeTabs.trigger 'cmi.tabs.hide'
+
+
+  # ---------------------------------------------
+  # private
+
+  # @nodoc
+  @_ensureActiveIndicator: (invokersPanel) ->
+    return if invokersPanel.find('.cmi-tabs-active-indicator').length > 0
+
+    invokersPanel.append('<li class="cmi-li cmi-tabs-active-indicator"></li>')
+
+  # @nodoc
+  @_tabFromInvoker: (domElement, name) ->
+    id = domElement.attr('data-cmi-tab-id').replace('#', '')
+    $("[data-cmi-tabs-name=#{name}]##{id}").first()
+
+  # @nodoc
+  @_setAndAnimateActiveIndicator: (invokersPanel, invoker) ->
+    indicator = invokersPanel.find('.cmi-tabs-active-indicator')
+
+    # new position for active indicator
+    position = invoker.offsetParent().position()
     left = position.left
-    right = tabs.innerWidth() - left - domElement.outerWidth()
+    right = invokersPanel.innerWidth() - left - invoker.outerWidth()
 
     # moving direction
     indicator.removeClass('cmi-tabs-animate-right').removeClass('cmi-tabs-animate-left')
@@ -25,22 +75,3 @@ class CMI.Tabs
 
     # animate indicator
     indicator.css({ left: "#{left}px", right: "#{right}px" })
-
-    # set link active
-    tabs.find('li').removeClass('cmi-tabs-active')
-    domElement.parents('li').addClass('cmi-tabs-active')
-
-    # switch tab
-    tabsContainer = $(tabs.data('cmi-tabs-container'))
-    element = document.getElementById(domElement.attr('href').replace('#', ''))
-    if element? == true && element.className.indexOf('cmi-tabs-active') < 0
-      tabsContainer.find('.cmi-tabs-tab').removeClass('cmi-tabs-active')
-      element.className += ' cmi-tabs-active'
-
-
-  # ---------------------------------------------
-  # private
-
-  @_ensureActiveIndicator: (tabsElement) ->
-    return if tabsElement.find('.cmi-tabs-active-indicator').length > 0
-    tabsElement.append('<li class="cmi-li cmi-tabs-active-indicator"></li>')

data/lib/assets/stylesheets/cmi/_global.sass

@@ -3,7 +3,7 @@
   font-size: 16px
   font-size: 1rem
   line-height: 1.4
-  box-sizing: border-box
+  +box-sizing(border-box)
 
 *[class^="cmi-"]
   +selection
@@ -23,7 +23,10 @@ input.cmi-input,
 label.cmi-label,
 textarea.cmi-textarea,
 select.cmi-select
-  box-sizing: border-box
+  +box-sizing(border-box)
+
+.cmi-clearfix
+  +clearfix
 
 hr.cmi-hr
   display: block
@@ -58,15 +61,11 @@ table.cmi-table
 thead.cmi-thead
   border-bottom: 1px solid $color-table-border
 td.cmi-td, th.cmi-th
-  padding: 15px 5px
+  padding: 5px 15px
   display: table-cell
   text-align: left
   vertical-align: middle
-  background-color: #fff
-  +cmi-border-radius(2px)
-tr.cmi-tr:nth-child(even)
-  td.cmi-td
-    background-color: #f9f9f9
+  background: transparent
 
 .cmi-pull-right
   position: relative