Ember updates

app/assets/javascripts/supplier/app/application.js.coffee

@@ -1,5 +1,7 @@
+#= require_self
 #= require ember
 #= require ember-data
 #= require_directory ./modifications
 #= require ./app
 #= require_tree .
+@EmberENV = {FEATURES: {'query-params-new': true}}

app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee

@@ -1,4 +1,5 @@
 Qsupplier.App.SectionController = Ember.ObjectController.extend
+  needs: ['application']
   editmode: false
   makeEditable: -> @set('editmode', true)
   finishEditable: ->

app/assets/javascripts/supplier/app/controllers/sections_controller.js.coffee

@@ -1 +1,2 @@
-Qsupplier.App.SectionsController = Ember.ArrayController.extend {}
+Qsupplier.App.SectionsController = Ember.ArrayController.extend
+  needs: ['application', 'section']

app/assets/javascripts/supplier/app/helpers/drag_n_drop.js.coffee

@@ -10,11 +10,15 @@ DragNDrop.Draggable = Ember.Mixin.create
   draggable: 'true'
   dragStart: (e)->
     @set 'content.isDragging', true
+    @set 'controller.isDragging', true
+    @set 'controller.controllers.application.isDragging', true
     localStorage.setItem('draggingView', @get('elementId'))
     dataTransfer = e.originalEvent.dataTransfer
     dataTransfer.setData 'Text', @get('elementId')
   dragEnd: (e)->
     @set 'content.isDragging', false
+    @set 'controller.isDragging', false
+    @set 'controller.controllers.application.isDragging', false
     localStorage.removeItem 'draggingView' if localStorage.getItem 'draggingView'
 
 DragNDrop.Droppable = Ember.Mixin.create
@@ -27,12 +31,15 @@ DragNDrop.Droppable = Ember.Mixin.create
     else
       DragNDrop.cancel(e)
   dragOver: DragNDrop.cancel
+  dragLeave: ->
+    if @dragLeft
+      @dragLeft()
   drop: (e)->
     e.preventDefault()
     viewId = e.originalEvent.dataTransfer.getData('Text')
     view = Ember.View.views[viewId]
     return unless view
-    # Calculate drop position relative to container
+    # Calculate the element's center drop position relative to container
     position =
       left: Math.max(e.originalEvent.pageX - view.$el.offsetParent().offset().left - (view.$el.outerWidth()/2), 0)
       top:  Math.max(e.originalEvent.pageY - view.$el.offsetParent().offset().top - (view.$el.outerHeight()/2), 0)

app/assets/javascripts/supplier/app/templates/section_tab_header.emblem

@@ -0,0 +1 @@
+= title

app/assets/javascripts/supplier/app/templates/sections.emblem

@@ -0,0 +1,4 @@
+.section-tabs-container
+  each section in controller
+    view Qsupplier.App.SectionTabHeaderView context=section
+= outlet

app/assets/javascripts/supplier/app/templates/sections.hbs

@@ -1,6 +0,0 @@
-<ul class="nav nav-tabs">
-  {{#each section in controller}}
-    {{#link-to "section" section tagName="li" href=false}}{{view 'Qsupplier.App.SectionTabHeaderView' contentBinding="section"}}{{/link-to}}
-  {{/each}}
-</ul>
-{{outlet}}

app/assets/javascripts/supplier/app/views/section_tab_header_view.js.coffee

@@ -1,16 +1,18 @@
 Qsupplier.App.SectionTabHeaderView = Ember.View.extend DragNDrop.Droppable,
-  template: Ember.Handlebars.compile('{{view.content.title}}')
-  tagName: 'a'
-  attributeBindings: ['href']
-  classNameBindings: ['section_header_class']
+  templateName: 'section_tab_header'
+  classNames: ['section-tab-header']
+  classNameBindings: ['section_header_class', 'controller.controllers.application.isDragging:table-dragging', 'section_active']
+  click: (e)->
+    @get('controller').transitionToRoute 'section', @get('context.id')
 
-  section_header_class: (-> "section-tab-header-#{@get('content.id')}").property()
-  href: (-> Routes.suppliers_section_path(@content.id)).property()
+  section_header_class: (-> "section-tab-header-#{@get('context.id')}").property()
   dragEntered: (view)->
+    @$().addClass('table-hover')
     return false
     # Changing the route for now is too difficult. Just do a move
     #if view.constructor.toString().match(/SectionTableView$/)
       #@get('controller').transitionToRoute 'section', @get('content')
+  dragLeft: -> @$().removeClass('table-hover')
   dropped: (view)->
     if view.constructor.toString().match(/SectionTableView$/)
       table = view.get('content')
@@ -19,3 +21,9 @@ Qsupplier.App.SectionTabHeaderView = Ember.View.extend DragNDrop.Droppable,
       table.save()
   didInsertElement: ->
     @$el = $ @get('element')
+
+  section_active: (->
+    current_section = @get('controller.controllers.section.content.id')
+    view_section = @get('context.id')
+    if current_section == view_section then 'active' else ''
+  ).property('controller.controllers.section.content.id')