Improved tabSidebar.

app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee

@@ -420,7 +420,7 @@ class App.Sidebar extends App.Controller
     @render()
 
     # get first tab
-    name = @el.find('.tabsSidebar-tab').first().data('content')
+    name = @el.find('.tabsSidebar-tab').first().data('tab')
 
     # activate first tab
     @toggleTabAction(name)
@@ -431,7 +431,20 @@ class App.Sidebar extends App.Controller
     # init content callback
     for item in @items
       if item.callback
-        item.callback( @el.find( '.sidebar-content[data-content=' + item.name + ']' ) )
+        item.callback( @el.find( '.sidebar[data-tab="' + item.name + '"] .sidebar-content' ) )
+
+    # add item acctions
+    for item in @items
+      if item.actions
+        for action in item.actions
+          do (action) =>
+            @el.find('.sidebar[data-tab="' + item.name + '"] .tabsSidebar-tabActions .tabsSidebar-tabAction[data-name="' + action.name + '"]').bind(
+              'click'
+              (e) =>
+                e.stopPropagation()
+                e.preventDefault()
+                action.callback(e)
+            )
 
   toggleSidebar: ->
     @el.parent().find('.tabsSidebarSpace').toggleClass('is-closed')
@@ -444,7 +457,7 @@ class App.Sidebar extends App.Controller
   toggleTab: (e) ->
 
     # get selected tab
-    name = $(e.target).closest('.tabsSidebar-tab').data('content')
+    name = $(e.target).closest('.tabsSidebar-tab').data('tab')
 
     if name
 
@@ -456,7 +469,6 @@ class App.Sidebar extends App.Controller
       else
         @toggleTabAction(name)
 
-
   toggleTabAction: (name) ->
     return if !name
 
@@ -464,36 +476,15 @@ class App.Sidebar extends App.Controller
     @el.find('.tabsSidebar-tab').removeClass('active')
 
     # add active state
-    @el.find('.tabsSidebar-tab[data-content=' + name + ']').addClass('active')
+    @el.find('.tabsSidebar-tab[data-tab=' + name + ']').addClass('active')
 
     # hide all content tabs
-    @el.find('.sidebar-content').addClass('hide')
+    @el.find('.sidebar').addClass('hide')
 
     # show active tab content
-    tabContent = @el.find('.sidebar-content[data-content=' + name + ']')
+    tabContent = @el.find('.sidebar[data-tab=' + name + ']')
     tabContent.removeClass('hide')
 
-    # set content tab title
-    title = tabContent.data('title')
-    @el.find('.sidebar h2').html(title)
-
-    # set tab actions
-    @el.find('.tabsSidebar-tabActions').html('')
-
-    # add item acctions
-    for item in @items
-      if item.name is name
-        if item.actions
-          for action in item.actions
-            do (action) =>
-              @el.find('.tabsSidebar-tabActions').append("<div class='tabsSidebar-tabAction #{action.class}'></div>").find(".tabsSidebar-tabAction").last().bind(
-                'click'
-                (e) =>
-                  e.stopPropagation()
-                  e.preventDefault()
-                  action.callback(e)
-              )
-
     # remember current tab
     @currentTab = name
 

app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee

@@ -456,6 +456,7 @@ class Sidebar extends App.Controller
         icon: 'person'
         actions: [
           {
+            name:  'Edit Customer'
             class: 'glyphicon glyphicon-edit'
             #callback: editCustomer
           },

app/assets/javascripts/app/controllers/layout_ref.js.coffee

@@ -41,6 +41,7 @@ class ContentSidebarRightSidebarOptional extends App.ControllerContent
 
 App.Config.set( 'layout_ref/content_sidebar_right_sidebar_optional', ContentSidebarRightSidebarOptional, 'Routes' )
 
+
 class ModalForm extends App.ControllerModal
   constructor: ->
     super
@@ -63,9 +64,9 @@ class ModalForm extends App.ControllerModal
     params = App.ControllerForm.params( $(e.target).closest('form') )
     console.log('params', params)
 
-
 App.Config.set( 'layout_ref/modal_form', ModalForm, 'Routes' )
 
+
 class ModalText extends App.ControllerModal
   constructor: ->
     super
@@ -78,8 +79,6 @@ class ModalText extends App.ControllerModal
   onHide: =>
     window.history.back()
 
-
-
 App.Config.set( 'layout_ref/modal_text', ModalText, 'Routes' )
 
 
@@ -92,14 +91,49 @@ class ContentSidebarTabsRight extends App.ControllerContent
     super
     @render()
 
+    changeCustomerTicket = ->
+      alert('change customer ticket')
+
+    editCustomerTicket = ->
+      alert('edit customer ticket')
+
+    changeCustomerCustomer = ->
+      alert('change customer customer')
+
+    editCustomerCustomer = ->
+      alert('edit customer customer')
+
+
     items = [
         head: 'Ticket Settings'
         name: 'ticket'
         icon: 'message'
+        callback: (el) ->
+          el.html('some ticket')
+        actions: [
+            name:  'Change Customer'
+            class: 'glyphicon glyphicon-transfer'
+            callback: changeCustomerTicket
+          ,
+            name:  'Edit Customer'
+            class: 'glyphicon glyphicon-edit'
+            callback: editCustomerTicket
+        ]
       ,
         head: 'Customer'
         name: 'customer'
         icon: 'person'
+        callback: (el) ->
+          el.html('some customer')
+        actions: [
+            name:  'Change Customer'
+            class: 'glyphicon glyphicon-transfer'
+            callback: changeCustomerCustomer
+          ,
+            name:  'Edit Customer'
+            class: 'glyphicon glyphicon-edit'
+            callback: editCustomerCustomer
+        ]
       ,
         head: 'Organization'
         name: 'organization'

app/assets/javascripts/app/controllers/ticket_zoom.js.coffee

@@ -196,10 +196,12 @@ class App.TicketZoom extends App.Controller
           icon: 'person'
           actions: [
             {
+              name:  'Change Customer'
               class: 'glyphicon glyphicon-transfer'
               callback: changeCustomer
             },
             {
+              name:  'Edit Customer'
               class: 'glyphicon glyphicon-edit'
               callback: editCustomer
             },

app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco

@@ -1,21 +1,27 @@
-<div class="sidebar bottom-form-shadow flex">
+<% for item in @items: %>
+<div class="sidebar bottom-form-shadow flex hide" data-tab="<%= item.name %>">
   <div class="horizontal center">
-    <h2 class="flex u-textTruncate"></h2>
+    <h2 class="flex u-textTruncate"><%- @T( item.head ) %></h2>
     <div class="tabsSidebar-close centered u-clickable">
-      <div class="tabsSidebar-tabActions"></div>
+      <div class="tabsSidebar-tabActions">
+      <% if item.actions: %>
+        <% for action in item.actions: %>
+          <div class="tabsSidebar-tabAction <%- action.class %>" data-name="<%- action.name %>"></div>
+        <% end %>
+      <% end %>
+      </div>
       <div class="arrow-right icon"></div>
     </div>
   </div>
   <hr>
 
-  <% for item in @items: %>
-    <div class="sidebar-content" data-content="<%= item.name %>" data-title="<%= @T( item.head ) %>"></div>
-  <% end %>
+  <div class="sidebar-content"></div>
 
 </div>
+<% end %>
 <div class="tabsSidebar-tabs vertical justified">
 <% for item in @items: %>
-  <div class="tabsSidebar-tab centered" data-content="<%= item.name %>">
+  <div class="tabsSidebar-tab centered" data-tab="<%= item.name %>">
     <div class="dark icon <%= item.icon %>"></div>
   </div>
 <% end %>

app/assets/javascripts/app/views/layout_ref/content_sidebar_tabs_right.jst.eco

@@ -14,75 +14,4 @@ Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit no
   </p>
 </div>
 
-<div class="tabsSidebar vertical">
-
-  <!-- ticket information content -->
-  <div class="sidebar flex" data-tab="ticket">
-
-    <div class="horizontal center">
-      <h2 class="flex u-textTruncate">Ticket Settings</h2>
-      <div class="close-sidebar centered u-clickable">
-        <div class="arrow-right icon"></div>
-      </div>
-    </div>
-
-    <hr>
-
-    <p>
-  Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
-    </p>
-
-  </div>
-
-  <!-- customer information content -->
-  <div class="sidebar flex hide" data-tab="customer">
-
-    <div class="horizontal center">
-      <h2 class="flex u-textTruncate">Customer</h2>
-      <div class="close-sidebar centered u-clickable">
-        <div class="arrow-right icon"></div>
-      </div>
-    </div>
-
-    <hr>
-
-    <p>
-  Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
-    </p>
-
-  </div>
-
-  <!-- organization information content -->
-  <div class="sidebar flex hide" data-tab="organization">
-
-    <div class="horizontal center">
-      <h2 class="flex u-textTruncate">Organization</h2>
-      <div class="close-sidebar centered u-clickable">
-        <div class="arrow-right icon"></div>
-      </div>
-    </div>
-
-    <hr>
-
-    <p>
-  Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
-    </p>
-
-  </div>
-
-  <div class="tabsSidebar-tabs vertical justified">
-
-    <div class="tabsSidebar-tab centered active" data-tab="ticket">
-      <div class="dark icon message"></div>
-    </div>
-
-    <div class="tabsSidebar-tab centered" data-tab="customer">
-      <div class="dark icon person"></div>
-    </div>
-
-    <div class="tabsSidebar-tab centered" data-tab="organization">
-      <div class="dark icon group"></div>
-    </div>
-
-  </div>
-</div>
+<div class="tabsSidebar vertical"></div>