lib/assets/javascripts/cmi/tabs.coffee in curo-material-interface-0.0.4 vs lib/assets/javascripts/cmi/tabs.coffee in curo-material-interface-0.0.5

@@ -1,46 +1,77 @@
 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')
     if left < indicator.position().left
       indicator.addClass('cmi-tabs-animate-left')
     else
       indicator.addClass('cmi-tabs-animate-right')
 
     # 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>')