Refactor polygon drawing methods, make all tools draw

unepwcmc · May 31, 2012 · 738a9a6 · 738a9a6
1 parent 23d9a6c
commit 738a9a6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 81 deletions.
diff --git a/app/assets/javascripts/backbone/templates/islands/geometry_edit.jst.ejs b/app/assets/javascripts/backbone/templates/islands/geometry_edit.jst.ejs
@@ -1,8 +1,8 @@
 <div id='tools' class='well'>
   <a href="#" id='validate-btn' class="validate btn btn-success"><i class="icon-ok icon-white"></i><br/>Validate</a>
   <div class="btn-group">
-    <a href="#" class="add-area btn btn-primary"><i class="icon-plus icon-white"></i><br/>Add</a>
-    <a href="#" class="delete-area btn btn-danger"><i class="icon-trash icon-white"></i><br/>Delete</a>
+    <a href="#" id='add-area-btn' class="add-area btn btn-primary"><i class="icon-plus icon-white"></i><br/>Add</a>
+    <a href="#" id='delete-area-btn' class="delete-area btn btn-danger"><i class="icon-trash icon-white"></i><br/>Delete</a>
   </div>
 </div>
 <select class="knowledge">

diff --git a/app/assets/javascripts/backbone/views/islands/geometry_edit_view.js.coffee b/app/assets/javascripts/backbone/views/islands/geometry_edit_view.js.coffee
@@ -9,6 +9,8 @@ class MangroveValidation.Views.Islands.GeometryEditView extends Backbone.View
 
   events :
     "click #validate-btn": "startValidate"
+    "click #add-area-btn": "startAdd"
+    "click #delete-area-btn": "startDelete"
     "submit #submit-polygon" : "submitPolygon"
     "submit #erase-polygon" : "erasePolygon"
 
@@ -23,33 +25,42 @@ class MangroveValidation.Views.Islands.GeometryEditView extends Backbone.View
         $('.submit-polygon').removeClass('disabled')
 
   startValidate: (event) =>
-    event.preventDefault();
+    @drawNewPolygon('validate', '#46a546', event)
+
+  startAdd: (event) =>
+    @drawNewPolygon('add', '#08C', event)
+
+  startDelete: (event) =>
+    @drawNewPolygon('add', '#9d261d', event)
+
+  # Start drawing a new polygon on the map, for the given action and color
+  drawNewPolygon: (action, color, event) ->
+    event.preventDefault()
     if $(event.target).hasClass('active')
-      #Disable editing
-      @mapPolygon.setMap(null)
-      @mapPolygon = null
-
-      # Current action
-      window.VALIDATION.currentAction = null
-
-      $('#tools .btn').removeClass('active')
-      $('#main_menu .submit-or-erase').slideUp()
-      $('#main_menu .submit-polygon, #main_menu .erase-polygon').addClass('disabled')
+      @clearCurrentEdits()
     else
-      # Set only this button active
-      $('#tools .btn').removeClass('active')
-      $(this).addClass('active')
+      @clearCurrentEdits()
+      $(event.target).addClass('active')
 
-      @mapPolygon = new google.maps.Polygon(_.extend(window.VALIDATION.mapPolygonOptions, {strokeColor: '#08c', fillColor: '#08c'}))
+      @mapPolygon = new google.maps.Polygon(_.extend(window.VALIDATION.mapPolygonOptions, {strokeColor: color, fillColor: color}))
       MangroveValidation.bus.trigger('addToMap', @mapPolygon)
 
       # Current action
-      window.VALIDATION.currentAction = window.VALIDATION.actions.validate
+      window.VALIDATION.currentAction = window.VALIDATION.actions[action]
 
-      $('#main_menu .submit-or-erase').slideDown()
-      $("select.knowledge").val('').parents('.control-group').removeClass('error').find('.help-block').remove()
-      $('#main_menu .edit-area').html('<i class="icon-pencil icon-white"></i> Edit area <span class="caret"></span>').removeClass('btn-success btn-danger active').addClass('btn-warning')
-      $('#main_menu ul.dropdown-menu li.divider').addClass('hide').next('li').addClass('hide')
+  # Destroy the current polygon, hide submit options
+  clearCurrentEdits: ->
+    if @mapPolygon?
+      # Clear polygon
+      @mapPolygon.setMap(null)
+      @mapPolygon = null
+
+    # Unset current 
+    window.VALIDATION.currentAction = null
+
+    $('#tools .btn').removeClass('active')
+    $('#main_menu .submit-or-erase').slideUp()
+    $('#main_menu .submit-polygon, #main_menu .erase-polygon').addClass('disabled')
 
   render : ->
     $(@el).html(@template(@model.toJSON() ))

diff --git a/app/assets/javascripts/user_geo_edits.js.coffee b/app/assets/javascripts/user_geo_edits.js.coffee
@@ -33,65 +33,6 @@ jQuery ->
   $('[href^=#]').click (e) ->
     e.preventDefault()
 
-  $('#main_menu .add-area').click ->
-    # Add button clicked
-    $('#main_menu .edit-area').html('<i class="icon-plus icon-white"></i> Add new area <span class="caret"></span>').removeClass('btn-warning btn-danger').addClass('btn-success')
-
-    if $(this).hasClass('active')
-      window.VALIDATION.mapPolygon.getPath().clear()
-      window.VALIDATION.mapPolygon.setMap(null)
-      window.VALIDATION.currentAction = null
-
-      # Deactivate button, hide submit/erase
-      $('#tools .btn').removeClass('active')
-      $('#main_menu .submit-or-erase').slideUp()
-    else
-      $('#tools .btn').removeClass('active')
-      $(this).addClass('active')
-
-      # Google Maps Polygon
-      window.VALIDATION.mapPolygon.setMap(null) if window.VALIDATION.mapPolygon
-      window.VALIDATION.mapPolygon = new google.maps.Polygon(_.extend(window.VALIDATION.mapPolygonOptions, {strokeColor: '#46a546', fillColor: '#46a546'}))
-      window.VALIDATION.mapPolygon.setMap(window.VALIDATION.map)
-
-      # Current action
-      window.VALIDATION.currentAction = window.VALIDATION.actions['add']
-
-      $('#main_menu .submit-or-erase').slideDown()
-      $("select.knowledge").val('').parents('.control-group').removeClass('error').find('.help-block').remove()
-      $('#main_menu .submit-polygon, #main_menu .erase-polygon').addClass('disabled')
-      $('#main_menu .edit-area').addClass('active')
-      $('#main_menu ul.dropdown-menu li').removeClass('hide')
-
-  $('#main_menu .delete-area').click ->
-    $('#main_menu .edit-area').html('<i class="icon-trash icon-white"></i> Delete area <span class="caret"></span>').removeClass('btn-warning btn-success').addClass('btn-danger')
-
-    if $(this).hasClass('active')
-      window.VALIDATION.mapPolygon.getPath().clear()
-      window.VALIDATION.mapPolygon.setMap(null)
-      window.VALIDATION.currentAction = null
-
-      # Deactivate button, hide submit/erase
-      $('#tools .btn').removeClass('active')
-      $('#main_menu .submit-or-erase').slideUp()
-    else
-      $('#tools .btn').removeClass('active')
-      $(this).addClass('active')
-
-      # Google Maps Polygon
-      window.VALIDATION.mapPolygon.setMap(null) if window.VALIDATION.mapPolygon
-      window.VALIDATION.mapPolygon = new google.maps.Polygon(_.extend(window.VALIDATION.mapPolygonOptions, {strokeColor: '#9d261d', fillColor: '#9d261d'}))
-      window.VALIDATION.mapPolygon.setMap(window.VALIDATION.map)
-
-      # Current action
-      window.VALIDATION.currentAction = window.VALIDATION.actions['delete']
-
-      $('#main_menu .submit-or-erase').slideDown()
-      $("select.knowledge").val('').parents('.control-group').removeClass('error').find('.help-block').remove()
-      $('#main_menu .submit-polygon, #main_menu .erase-polygon').addClass('disabled')
-      $('#main_menu .edit-area').addClass('active')
-      $('#main_menu ul.dropdown-menu li').removeClass('hide')
-
   $('#main_menu .submit-polygon').click ->
     # Fill form
     $("form#new_layer input#layer_polygon").val ->