droom 0.0.1 → 0.2.1

data/app/assets/javascripts/droom/map.js.coffee

@@ -3,62 +3,128 @@ jQuery ($) ->
   
   class Map
     constructor: (element) ->
-      @container = $(element)
-      lat = @container.attr('data-lat') || 22.280147
-      lng = @container.attr('data-lng') || 114.158302
-      zoom = @container.attr('data-zoom') || 12
-      @map = new google.maps.Map element,
+      @_container = $(element)
+      @_editable = @_container.hasClass('editable')
+      @_infowindows = []
+      @_affected = @_container.attr('data-affected')
+      lat = @_container.attr('data-lat') || 22.280147
+      lng = @_container.attr('data-lng') || 114.158302
+      zoom = @_container.attr('data-zoom') || 12
+      @_bounds = new google.maps.LatLngBounds()
+      @_map = new google.maps.Map element,
         center: new google.maps.LatLng lat, lng
         zoom: parseInt(zoom)
         mapTypeId: google.maps.MapTypeId.ROADMAP
         mapTypeControlOptions: 
           style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
-
+      
     getMap: () =>
-      @map  
-  
-  class Point
-    constructor: (point, map) ->
-      @_lat = point.lat
-      @_lng = point.lng
-      @_map = map
-      @_events = point.events
-      @_postcode = point.postcode      
-      @id = point.id
-      @_name = point.name
-      @_address = point.address
-      @_editable = $.ed
-      @_marker = new google.maps.Marker
-        position: new google.maps.LatLng @_lat, @_lng
-        map: @_map
-        icon: $.set_icon(@_events.length)
-        draggable: $.map_editable
-      @infowindow()
-      google.maps.event.addListener @_marker, "click", @click
-      google.maps.event.addListener @_marker, "dragstart", @dragstart
-      google.maps.event.addListener @_marker, "dragend", @dragend
-      @_infowindow.open(@_map) if parseInt($.urlParam("id"), 10) == @id
+      @_map
+
+    isEditable: () =>
+      @_editable
       
+    getBounds: () =>
+      @_bounds
       
-    infowindow: () =>
-      content = $("<div class='window'><h2>#{@_name}</h2>#{@_address.replace(/\n/g, ",")}<div class='window_venue_events'></div></div>")
-      $.each @_events, (i, evt) =>
-        content.find('.window_venue_events').append "<li><a href='/events/#{evt.id}'>#{evt.name}</a> <span class='pale'>#{evt.datestring}</span></li>"
-      @_infowindow = new google.maps.InfoWindow
-        position: new google.maps.LatLng @_lat, @_lng
-        content: content.prop('outerHTML')
-        marker: @_marker
-      $.infowindows.push @_infowindow
-
-    click: (e) =>
-      $.each $.infowindows, (i, iw) =>
-        iw.close()
-      @_infowindow.open(@_map)
+    setBounds: (things) =>
+      @_bounds = new google.maps.LatLngBounds()
+      for thing in things
+        if pos = thing.getPosition()
+          @_bounds.extend(pos) 
+      @showBounds()
+
+    extendBounds: (position) =>
+      if position
+        @_bounds.extend(position)
+        @showBounds()
+    
+    showBounds: () =>
+      @_zoom_limiter = google.maps.event.addListener @_map, 'bounds_changed', =>
+        @_map.setZoom(17) if @_map.getZoom() > 17
+        google.maps.event.removeListener(@_zoom_limiter);
+      @_map.fitBounds @_bounds
+
+    rememberInfowindow: (iw) =>
+      @_infowindows.push(iw)
+
+    closeInfowindows: (iw) =>
+      iw.close() for iw in @_infowindows
+
+
+  class VenueMap extends Map
+    constructor: (element) ->
+      super
+      @_venues = []
+      if @_container.hasClass('small')
+        @get_one_venue()
+      else
+        @get_venues()
+    
+    get_one_venue: () =>
+      if src = @_container.attr("data-url")
+        $.getJSON src, @show_venue
       
-    dragstart: (e) =>
+    get_venues: () =>
+      if src = @_container.attr("data-url")
+        $.getJSON src, @show_venues
+
+    show_venues: (response) =>
+      @show_venue(venue) for venue in response
+
+    show_venue: (response) =>
+      latlng = new google.maps.LatLng response.lat, response.lng
+      venue = new Venue response, @
+      @_venues.push venue
+
+
+  class Venue
+    constructor: (data, @_mapper) ->
+      @_map = @_mapper.getMap()
+      @id = data.id
+      @_name = data.name
+      @_address = data.address
+      @_events = data.events
+      @_postcode = data.postcode
+      @_marker = new google.maps.Marker
+        map: @_map
+        draggable: @_mapper.isEditable()
+      if data.lat? and data.lng?
+        @_position = new google.maps.LatLng(data.lat, data.lng)
+        @placeMarker()
+      google.maps.event.addListener @_marker, "click", @show
+      google.maps.event.addListener @_marker, "dragstart", @pickup
+      google.maps.event.addListener @_marker, "dragend", @drop
+
+    placeMarker: () =>
+      @_marker.setPosition(@_position)
+      @_mapper.extendBounds(@_position)
+
+    getPosition: () =>
+      @_position
+
+    show: () =>
+      @_mapper.closeInfowindows()
+      @infowindow().open(@_map, @_marker)
+    
+    update: (e) =>
+      # console.log "update", e.latLng
+
+    infowindow: () =>
+      unless @_infowindow?
+        content = $("<div class='window'><h2>#{@_name}</h2>#{@_address.replace(/\n/g, ",")}<div class='window_venue_events'></div></div>")
+        for evt in @_events
+          content.find('.window_venue_events').append "<li><a href='/events/#{evt.id}'>#{evt.name}</a> <span class='pale'>#{evt.datestring}</span></li>"
+        @_infowindow = new google.maps.InfoWindow
+          content: content.prop('outerHTML')
+          maxWidth: 300
+        @_mapper.rememberInfowindow(@_infowindow)
+      @_infowindow
+
+    pickup: (e) =>
       @_infowindow?.close()
 
-    dragend: (e) =>
+    drop: (e) =>
       position = @_marker.getPosition()
       $.ajax 
         type: 'POST'
@@ -72,52 +138,24 @@ jQuery ($) ->
         success: () ->
           console.log "venue updated"
         
+    remove: (e) =>
+      e.preventDefault() if e
+      @_infowindow?.close()
+      @_marker.setMap(null)
+
+
 
   $.fn.init_map = () ->
     @each ->
-      $.gmap = new Map(@).getMap()
-      $.map_editable = $(@).hasClass('editable')
-      if $(@).hasClass('small')
-        $(@).show_venue()
-      else
-        $(@).show_venues()
-  
-  $.fn.show_venues = () ->
-    @each ->
-      map = $.gmap
-      if src = $(@).attr("data-url")
-        $.getJSON src, (response) =>
-          bounds = new google.maps.LatLngBounds()
-          $.each response, (i, venue) =>
-            latlng = new google.maps.LatLng venue.lat, venue.lng
-            bounds.extend latlng
-            venue = new Point venue, map
-          
-          temporary_zoom_limiter = google.maps.event.addListener map, 'bounds_changed', ->
-            map.setZoom(17) if map.getZoom() > 17
-            google.maps.event.removeListener(temporary_zoom_limiter);
-
-          map.fitBounds bounds
-
-  $.fn.show_venue = () ->
-    @each ->
-      map = $.gmap
-      if src = $(@).attr("data-url")
-        $.getJSON src, (venue) =>
-          latlng = new google.maps.LatLng venue.lat, venue.lng
-          marker = new google.maps.Marker
-            position: latlng
-            map: map
-            icon: $.set_icon(venue.events.length)
-          map.setCenter(latlng)
-
-
-  $.urlParam = (name) ->
-    results = new RegExp("[\\?&]" + name + "=([^&#]*)").exec(window.location.href)
-    return 0  unless results
-    results[1] or 0
+      $.gmap = new VenueMap(@).getMap()
+    @
 
   $.set_icon = (size) ->
     name = if size > 0 then "place_busy" else "place_quiet"
     new google.maps.MarkerImage "/assets/droom/#{name}.png", new google.maps.Size(36, 36), new google.maps.Point(0, 0), new google.maps.Point(18, 18)
   
+  
+  $.namespace "Droom", (target, top) ->
+    target.Map = Map
+    target.VenueMap = VenueMap
+    target.Venue = Venue

data/app/assets/javascripts/droom/popups.js.coffee

@@ -0,0 +1,252 @@
+jQuery ($) ->
+
+  ## Popups
+  #
+  # This is the modal overlay we use for most creation and editing tasks. No special setup is required: any link can
+  # be turned into a popup-form-generator just by calling
+  #   
+  #   $(link).popup()
+  #
+  # Display of the popup form is handled by the Popup class. The requests involved in retrieving, submitting and 
+  # resubmitting the form are built on the usual `remote_form` and `remote_link` methods, both of which just configure
+  # the rails_ujs remote links. All this is held together by callbacks triggered in the remote_link mechanism. The
+  # callbacks are defined anonymously as part of the `$().popup()` method below.
+  #
+  # We don't attempt to update the page directly with a server response, but a `data-affected` attribute can be used to 
+  # trigger a refresh event on any DOM element that should be updated after this action completes. If those elements
+  # have (or are within) refreshable behaviour, they will be updated from the server. See 'affecting the page' above.
+  #
+  $.fn.popup = () ->
+    @each ->
+      new Popup(@)
+          
+  class Popup
+    constructor: (element) ->
+      @_link = $(element)
+      @_iteration = 0
+      @_affected = @_link.attr('data-affected')
+      @_replaced = @_link.attr('data-replaced')
+      @_link.remote
+        on_request: @begin
+        on_success: @receive
+
+    begin: (xhr) =>
+      switch @_iteration
+        when 0
+          @prepare()
+        when 1
+          # a popup that it is still displaying the first response will just be shown again.
+          @show()
+          return false
+        else
+          # A popup that is on a second or later response will be considered abandoned and started again.
+          @reset()
+          @prepare()
+
+    getContainer: () =>
+      $('<div class="popup" />')
+
+    prepare: () =>
+      @_mask = $('<div class="mask" />').appendTo($('body'))
+      @_container = @getContainer()
+      @_container.bind 'close', @hide
+      @_container.bind 'finished', @conclude
+      @_container.bind 'resize', @place
+      @_container.insertAfter(@_mask).hide()
+
+    receive: (data) =>
+      if @_iteration == 0 || $(data).find('form').length
+        @display(data)
+      else
+        @conclude(data)
+        
+    display: (data) =>
+      @_iteration++
+      @_content = $(data)
+      @_container.empty()
+      @_container.append(@_content)
+      @_content.activate()
+      @_header = @_content.find('.header')
+      @_content.find('form').remote
+        on_cancel: @hide
+        on_success: @receive
+      @show()
+          
+    conclude: (data) =>
+      if @_affected
+        $(@_affected).trigger "refresh"
+      if @_replaced
+        replacement = $(data)
+        $(@_replaced).after(replacement)
+        $(@_replaced).remove()
+        replacement.activate().signal_confirmation()
+      @reset()
+
+    show: (e) =>
+      e.preventDefault() if e
+      @place()
+      unless @_container.is(":visible")
+        @_container.fadeTo 'fast', 1, () =>
+          @_container.find('[data-focus]').focus()
+        @_mask.fadeTo('fast', 0.8)
+        @_mask.bind "click", @hide
+        $(window).bind "resize", @place
+
+    hide: (e) =>
+      e.preventDefault() if e
+      @_container.fadeOut('fast')
+      @_mask.fadeOut('fast')
+      @_mask.unbind "click", @hide
+      $(window).unbind "resize", @place
+      @_container.find('iframe.youtube').sendCommand('pauseVideo')
+      
+
+    reset: () =>
+      @hide()
+      @_container.remove()
+      @_iteration = 0
+
+    place: (e) =>
+      cols = @_container.find("div.column").not('.hidden').length
+      if cols
+        width = (cols * 280) + 40
+      else 
+        width = @_container.children().first().width() || 580
+      w = $(window)
+      height_limit = w.height() - 100
+      height = [@_container.height(), height_limit].min()
+      left = parseInt((w.width() - width) / 2)
+      top = parseInt((w.height() - height - 40) / 2)  # allowing for padding
+      placement = 
+        left: left
+        top: top
+        width: width
+        "max-height": height_limit
+      if @_container.is(":visible")
+        @_container.animate placement
+      else
+        @_container.css placement
+
+
+
+  # Popup forms will usually contain one or more .column divs. The columns are a standard width and
+  # the number of columns determines the width of the popup. Columns can also be hidden, initially,
+  # then revealed if the user clicks a 'more' or 'detail' link. The expander action is defined here.
+  #
+  $.fn.column_expander = (popup) ->
+    @click (e) ->
+      e.preventDefault() if e
+      link = $(@)
+      container = link.parents('popup').first()
+      if affected = link.attr('data-affected')
+        # swap between text and the alt text held in data-alt
+        text = link.text()
+        alt = link.attr('data-alt')
+        link.text(alt).attr('data-alt', text)
+        # Point in the other direction
+        if link.hasClass('left') then link.addClass('right').removeClass('left') else link.addClass('left').removeClass('right')
+        # Toggle visibility of the column.
+        # Contained form fields are disabled when hidden, detaching them from form submission.
+        container.find(affected).each (i, col) ->
+          if $(col).is(":visible")
+            $(col).addClass('hidden').find('input, select, textarea').attr('disabled', true)
+          else
+            $(col).removeClass('hidden').find('input, select, textarea').removeAttr('disabled')
+        # We finish by triggering a resize event on the popup container, which will trigger a place() on the popup..
+        container.trigger('resize')
+
+
+
+
+
+  # The action menu is a simple popup submenu used to hide editing links.
+  #
+  $.fn.action_menu = ->
+    @each ->
+      new ActionMenu(@)
+    @
+
+  class ActionMenu
+    @menus: $()
+    @remember: (menu) ->
+      @menus.push(menu)
+    @hideAll: () ->
+      menu.hide() for menu in @menus
+
+    constructor: (element) ->
+      @_link = $(element)
+      @_selector = "[data-for=\"#{@_link.attr('data-menu')}\"]"
+      @_link.click @toggle
+      ActionMenu.remember(@)
+
+    place: =>
+      pos = @_link.position()
+      $(@_selector).css
+        top: pos.top + 20
+        left: pos.left
+
+    toggle: (e) =>
+      if e
+        e.preventDefault() 
+        e.stopPropagation()
+      if @_link.hasClass('up') then @hide() else @show()
+
+    show: (e) =>
+      @place()
+      ActionMenu.hideAll()
+      @_link.addClass('up')
+      $(@_selector).stop().slideDown 'fast'
+      $(document).bind "click", @hide
+    
+    hide: (e) =>
+      $(@_selector).stop().slideUp 'fast', () =>
+        @_link.removeClass('up')
+      $(document).unbind "click", @hide
+      
+
+
+  class Panel
+    @panels: $()
+    @remember: (panel) ->
+      @panels.push(panel)
+    @hideAll: () ->
+      panel.hide() for panel in @panels
+
+    constructor: (element) ->
+      @container = $(element)
+      @id = @container.attr('id')
+      @links = $("a[data-panel='#{@id}']")
+      Panel.remember(@)
+      @links.bind "click", @toggle
+      @container.bind "show", @show
+      @set()
+        
+    set: () =>
+      if @container.hasClass('here') then @show() else @hide()
+      
+    toggle: (e) =>
+      if e
+        e.preventDefault()
+        e.stopPropagation()
+      if @container.is(":visible") then @revert() else @show()
+
+    hide: (e) =>
+      @container.fadeOut()
+      @links.removeClass('here')
+      $(document).unbind "click", @hide
+    
+    show: (e) =>
+      Panel.hideAll()
+      @container.stop().fadeIn()
+      @links.addClass('here')
+      # $(document).bind("click", @hide)
+  
+    revert: (e) =>
+      Panel.hideAll()
+      
+      
+  $.fn.panel = ->
+    @each ->
+      new Panel(@)
+    @
+