Ember updates

Gemfile.lock

@@ -86,7 +86,7 @@ GEM
       tzinfo (~> 0.3.37)
     addressable (2.3.5)
     arel (4.0.1)
-    atomic (1.1.14)
+    atomic (1.1.16)
     barber (0.4.2)
       ember-source
       execjs
@@ -173,8 +173,8 @@ GEM
       handlebars-source
       jquery-rails (>= 1.0.17)
       railties (>= 3.1)
-    ember-source (1.2.0.1)
+    ember-source (1.4.0)
-      handlebars-source (~> 1.1.2)
+      handlebars-source (~> 1.0)
     emblem-rails (0.2.1)
       barber-emblem (~> 0.1.1)
       ember-rails (>= 0.14.0)
@@ -213,13 +213,13 @@ GEM
       activesupport (>= 4.0.1)
       haml (>= 3.1, < 5.0)
       railties (>= 4.0.1)
-    handlebars-source (1.1.2)
+    handlebars-source (1.3.0)
     hashie (2.0.5)
     hike (1.2.3)
     http_parser.rb (0.6.0)
     httpauth (0.2.0)
     i18n (0.6.9)
-    jquery-rails (3.0.4)
+    jquery-rails (3.1.0)
       railties (>= 3.0, < 5.0)
       thor (>= 0.14, < 2.0)
     jquery-ui-rails (4.1.1)
@@ -246,7 +246,7 @@ GEM
       subexec (~> 0.2.1)
     mini_portile (0.5.2)
     minitest (4.7.5)
-    multi_json (1.9.0)
+    multi_json (1.9.2)
     multipart-post (1.2.0)
     nokogiri (1.6.1)
       mini_portile (~> 0.5.0)
@@ -355,8 +355,8 @@ GEM
       eventmachine (>= 1.0.0)
       rack (>= 1.0.0)
     thor (0.18.1)
-    thread_safe (0.1.3)
+    thread_safe (0.3.1)
-      atomic
+      atomic (>= 1.1.7, < 2)
     tilt (1.4.1)
     tinymce-rails (4.0.11)
       railties (>= 3.1.1)
@@ -366,7 +366,7 @@ GEM
     turnip (1.1.0)
       gherkin (>= 2.5)
       rspec (~> 2.0)
-    tzinfo (0.3.38)
+    tzinfo (0.3.39)
     uglifier (2.4.0)
       execjs (>= 0.3.0)
       json (>= 1.8.0)

app/assets/images/supplier/drop-target-active.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="100"
+  height="100"
+  viewBox="0 0 100 100"
+>
+<circle r="50" cx="50" cy="50" fill="transparent" stroke="#a00" stroke-width="2">
+  <animate attributeName="r" from="50" to="0" dur="1s" repeatCount="indefinite"/>
+</circle>
+<circle r="25" cx="50" cy="50" fill="transparent" stroke="#a00" stroke-width="1">
+  <animate attributeName="r" from="25" to="0" dur="1s" repeatCount="indefinite"/>
+</circle>
+</svg>

app/assets/images/supplier/drop-target.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="100"
+  height="100"
+  viewBox="0 0 100 100"
+>
+<circle r="50" cx="50" cy="50" fill="transparent" stroke="black" stroke-width="1">
+  <animate attributeName="r" from="50" to="0" dur="3s" repeatCount="indefinite"/>
+</circle>
+<circle r="25" cx="50" cy="50" fill="transparent" stroke="black" stroke-width="0.5">
+  <animate attributeName="r" from="25" to="0" dur="2s" repeatCount="indefinite"/>
+</circle>
+</svg>

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}}')
+  templateName: 'section_tab_header'
-  tagName: 'a'
+  classNames: ['section-tab-header']
-  attributeBindings: ['href']
+  classNameBindings: ['section_header_class', 'controller.controllers.application.isDragging:table-dragging', 'section_active']
-  classNameBindings: ['section_header_class']
+  click: (e)->
+    @get('controller').transitionToRoute 'section', @get('context.id')
 
-  section_header_class: (-> "section-tab-header-#{@get('content.id')}").property()
+  section_header_class: (-> "section-tab-header-#{@get('context.id')}").property()
-  href: (-> Routes.suppliers_section_path(@content.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')

app/assets/stylesheets/supplier/base1-shared/section-tab-header.css.sass

@@ -0,0 +1,26 @@
+.section-tabs-container
+  .section-tab-header
+    float: left
+    margin-right: 10px
+    $border: 1px solid black
+    border: $border
+    padding: 5px
+    cursor: pointer
+    font-weight: bold
+    background-color: rgba(200,200,200,0.4)
+    color: #333
+    &.active
+      border-bottom-width: 0
+    &.table-hover, &.table-dragging
+      background-size: 100px
+      background-position: center center
+      background-repeat: no-repeat
+    &.table-dragging
+      background-image: image-url('supplier/drop-target.svg')
+    &.table-hover
+      background-image: image-url('supplier/drop-target-active.svg')
+
+  &:after
+    content: ''
+    display: block
+    clear: left

app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass

@@ -3,7 +3,7 @@
   padding: 4px 0px
 .section-tables-container
   .section-manage-tables
-    margin: -26px 6px 4px 6px
+    margin: -32px 6px 4px 6px
   .section-table
     background-color: #ccc
     //TODO remove width and height for ember control

app/assets/stylesheets/supplier/basic1/application.css

@@ -5,6 +5,7 @@
  *= require qtip
  *= require 'general'
  *= require user/active_list
+ *= require_directory ../base1-shared
  *= require_directory .
  *= require_self
  */

app/assets/stylesheets/supplier/wood1/application.css

@@ -5,6 +5,7 @@
  *= require qtip
  *= require 'general'
  *= require user/active_list
+ *= require_directory ../base1-shared
  *= require_directory .
  *= require_self
  */