ios support

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

@@ -6,20 +6,20 @@ App.SectionController = Ember.ObjectController.extend
     finishEditable: ->
       @set('editmode', false)
       @get('model').save()
-      @get('model.section_elements').forEach (section_element) -> section_element.save()
-      @get('model.section_areas').forEach (section_area) -> section_area.save()
+      @get('model.section_elements').filterProperty('isDirty').invoke 'save'
+      @get('model.section_areas').filterProperty('isDirty').invoke 'save'
     rollbackEditable: ->
       @get('model').rollback()
       @get('model.section_elements').forEach (section_element) ->
-        if section_element.get('id')
-          section_element.rollback()
-        else
+        if section_element.get('isNew')
           section_element.deleteRecord()
-      @get('model.section_areas').forEach (section_area) ->
-        if section_area.get('id')
-          section_area.rollback()
         else
+          section_element.rollback()
+      @get('model.section_areas').forEach (section_area) ->
+        if section_area.get('isNew')
           section_area.deleteRecord()
+        else
+          section_area.rollback()
       @set('editmode', false)
     addSection: -> @modal 'add_section', model: @get('model')
     addTables: -> @modal 'section_add_tables', model: @get('model')

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

@@ -28,7 +28,39 @@ DragNDrop.Draggable = Ember.Mixin.create
     @set 'targetObject.isDragging', false
     @set 'targetObject.controllers.application.isDragging', false
     localStorage.removeItem 'draggingView' if localStorage.getItem 'draggingView'
+  touchStart: (ev)->
+    ev.preventDefault()
+    target = @$()
+    return unless target.prop 'draggable'
+    touch = ev.originalEvent.changedTouches[0]
+    @touchStartEvent =
+      left: parseFloat(target.css('left'))
+      top: parseFloat(target.css('top'))
+      pageX: touch.pageX
+      pageY: touch.pageY
 
+  touchMove: (ev)->
+    ev.preventDefault()
+    target = @$()
+    return unless target.prop 'draggable'
+    if ev.originalEvent.changedTouches.length is 1
+      touch = ev.originalEvent.changedTouches[0]
+      target.css
+        left: "#{@touchStartEvent.left + touch.pageX - @touchStartEvent.pageX}px"
+        top: "#{@touchStartEvent.top + touch.pageY - @touchStartEvent.pageY}px"
+  touchEnd: (ev)->
+    ev.preventDefault()
+    touch = ev.originalEvent.changedTouches[0]
+    if Math.abs(@touchStartEvent.pageX - touch.pageX) < 2 and Math.abs(@touchStartEvent.pageY - touch.pageY) < 2
+      # The preventDefaults are preventing the click action to fire, therefore we trigger it ourselves
+      # But do not trigger when a handle insed the element is clicked
+      unless $(ev.target).parents('.handles-inside-draggable') or $(ev.target).hasClass('handles-inside-draggable')
+        @click() if @click
+      else
+        $(ev.target).click()
+
+    @touchStartEvent = null
+    this
 DragNDrop.Droppable = Ember.Mixin.create
   dragEnter: (e)->
     if @dragEntered
@@ -40,6 +72,20 @@ DragNDrop.Droppable = Ember.Mixin.create
     #   DragNDrop.cancel(e)
   dragOver: DragNDrop.cancel # don't know why, but crucial for the current way of working with section tables
   # dragOver: (e)->(e.preventDefault(); false)
+  touchEnd: (ev)->
+    ev.preventDefault()
+    view = ev.result
+    return unless view._parentView
+    target = view.$()
+    return unless target.prop 'draggable'
+    newX = parseFloat(target.css('left'))
+    newY = parseFloat(target.css('top'))
+    return unless newX? and newY?
+    position =
+      left: newX
+      top: newY
+    @dropped view, position if @dropped
+    this
   dragLeave: ->
     if @dragLeft
       @dragLeft()

app/assets/javascripts/supplier/app/templates/section/section-element.emblem

@@ -1,6 +1,6 @@
 = svg view.content.svg width=view.content.box_width height=view.content.box_height rotation=view.content.rotation
 if view.showHandles
-  .section-element-handles
+  .section-element-handles.handles-inside-draggable
     a.rotate-left{action "rotateLeft" view.content bubbles=false}: span.icon
     a.rotate-right{action "rotateRight" view.content bubbles=false}: span.icon
     a.remove-section-element{action "removeSectionElement" view.content bubbles=false}: span.icon

app/assets/javascripts/supplier/app/views/section/section-element.js.coffee

@@ -1,6 +1,6 @@
 App.SectionElementView = Ember.View.extend DragNDrop.Draggable,
   templateName: 'section/section-element'
-  classNames: ['section-element']
+  classNames: ['section-element-container']
   attributeBindings: ['style']
   show_handles: false
   classNameBindings: [

app/assets/javascripts/supplier/app/views/section/tables.js.coffee

@@ -1,11 +1,8 @@
 App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
   classNames: ['well', 'section-tables-container', 'section-tables-active']
+  classNameBindings: ['controller.editmode:editing']
   templateName: 'section/tables'
   dpm: 1
-  didInsertElement: ->
-    @$el = $(@get('element'))
-    height = @$el.width() * @get('controller.model.height') / @get('controller.model.width')
-    @$el.css('height', height)
   dropped: (view, position)->
     view.positionChange(position, @content)
   observeSectionDimensions: (->
@@ -21,10 +18,9 @@ App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
       dpm = viewport_height / section_height
     @$el.css 'width', dpm * section_width
     @$el.css 'height', dpm * section_height
-    console.log "SECTION dpm #{dpm}"
     @set 'dpm', dpm
   ).observes('controller.model.height', 'controller.model.width')
-  tables: (->@get('content')).property('content')
+  tables: (->@get('content')).property('content.@each')
   didInsertElement: ->
     # the first observable event is triggered without the container having its dimensions
-    @get('controller.model').notifyPropertyChange('width').notifyPropertyChange('height')
+    @get('controller.model').notifyPropertyChange('width') #.notifyPropertyChange('height')

app/assets/javascripts/supplier/foundation1/application.js.erb

@@ -2,17 +2,14 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery-ui/sortable
-//= require jquery.ui.touch-punch
+// require ./im
 // require foundation FOUNDATION 5 JAVASCRIPT IMPLEMENTATIONS AND EMBER ARE NOT COMPATIBLE, FOUNDATION IS TOO SIMPLISTIC AT THE MOMENT AND DESTROYS DOM EVENTS
 //= require js-routes
 //= require moment
 //= require fullcalendar
 //= require translations
-// require qwaiter
-// require ./qsupplier
 //= require faye
 //= require ./base
-// require qtip # was used for table actions in section view, now done by EMBER
 //= require pickdate
 //= require_directory .
 //= require_self

app/assets/javascripts/supplier/foundation1/jquery.ui.touch-punch.min.js

@@ -1,11 +0,0 @@
-/*
- * jQuery UI Touch Punch 0.2.2
- *
- * Copyright 2011, Dave Furfero
- * Dual licensed under the MIT or GPL Version 2 licenses.
- *
- * Depends:
- *  jquery.ui.widget.js
- *  jquery.ui.mouse.js
- */
-(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);

app/assets/stylesheets/supplier/foundation1/_qstructure.css.sass

@@ -12,8 +12,6 @@ $side-spacing: 0px
     display: inline-block
 .location_picker_search
   float: left
-.draggable
-  cursor: move !important
 .text-alert
   color: $alert-color
 .text-warning

app/assets/stylesheets/supplier/foundation1/components/_section_elements.css.sass

@@ -6,6 +6,7 @@
     margin-right: 10px
     margin-bottom: 10px
     width: 80px
+    max-height: 120px
     border: 2px outset #aaa
     &:hover
       border-color: $active-color

app/assets/stylesheets/supplier/foundation1/components/_section_tables.css.sass

@@ -30,6 +30,10 @@
   position: relative
   padding: 0
   height: 400px
+  &.editing
+    background-color: rgba(240, 138, 36, 0.5)
+  .section-element-container, .section-area-container
+    cursor: pointer
   //background-image: image-url('textures/wood4.jpg')
   //background-color: rgba(0,0,0,0.4)
   .section-table