droom 0.4.3 → 0.5.3

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

@@ -8,9 +8,9 @@ jQuery ($) ->
   #   $(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.
+  # resubmitting the form are built on the usual `remote` method, which just configures 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
@@ -26,11 +26,13 @@ jQuery ($) ->
       @_iteration = 0
       @_affected = @_link.attr('data-affected')
       @_replaced = @_link.attr('data-replaced')
+      @_aftered = @_link.attr('data-appended')
+      @_befored = @_link.attr('data-prepended')
       @_link.remote
         on_request: @begin
         on_success: @receive
 
-    begin: (xhr) =>
+    begin: (event, xhr, settings) =>
       switch @_iteration
         when 0
           @prepare()
@@ -54,7 +56,7 @@ jQuery ($) ->
       @_container.bind 'resize', @place
       @_container.insertAfter(@_mask).hide()
 
-    receive: (data) =>
+    receive: (event, data) =>
       if @_iteration == 0 || $(data).find('form').length
         @display(data)
       else
@@ -65,17 +67,25 @@ jQuery ($) ->
       @_content = $(data)
       @_container.empty()
       @_container.append(@_content)
-      @_content.activate()
       @_header = @_content.find('.header')
       @_content.find('form').remote
         on_cancel: @hide
         on_success: @receive
+      @_content.activate()
       @show()
           
     conclude: (data) =>
       if @_affected
         $(@_affected).trigger "refresh"
-      if @_replaced
+      if @_aftered?
+        addition = $(data)
+        $(@_aftered).after(addition)
+        addition.activate().signal_confirmation()
+      if @_befored?
+        addition = $(data)
+        $(@_befored).before(addition)
+        addition.activate().signal_confirmation()
+      if @_replaced?
         replacement = $(data)
         $(@_replaced).after(replacement)
         $(@_replaced).remove()
@@ -87,19 +97,21 @@ jQuery ($) ->
       @place()
       unless @_container.is(":visible")
         @_container.fadeTo 'fast', 1, () =>
-          @_container.find('[data-focus]').focus()
-        @_mask.fadeTo('fast', 0.8)
+          @_container.find('[autofocus]').focus()
+        @_mask.addClass('up')
         @_mask.bind "click", @hide
+        $('#droom').addClass('masked')
         $(window).bind "resize", @place
+        @focus()
 
     hide: (e) =>
       e.preventDefault() if e
       @_container.fadeOut('fast')
-      @_mask.fadeOut('fast')
+      @_mask.removeClass('up')
       @_mask.unbind "click", @hide
+      $('#droom').removeClass('masked')
       $(window).unbind "resize", @place
       @_container.find('iframe.youtube').sendCommand('pauseVideo')
-      
 
     reset: () =>
       @hide()
@@ -107,11 +119,7 @@ jQuery ($) ->
       @_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
+      width = @_container.children().first().width() || 580
       w = $(window)
       height_limit = w.height() - 100
       height = [@_container.height(), height_limit].min()
@@ -127,7 +135,8 @@ jQuery ($) ->
       else
         @_container.css placement
 
-
+    focus: () =>
+      @_container.find('[autofocus]').focus()
 
   # 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,
@@ -195,14 +204,14 @@ jQuery ($) ->
       @place()
       ActionMenu.hideAll()
       @_link.addClass('up')
-      $(@_selector).stop().slideDown 'fast'
+      $(@_selector).first().stop().slideDown 'fast'
       $(document).bind "click", @hide
     
     hide: (e) =>
-      $(@_selector).stop().slideUp 'fast', () =>
+      $(@_selector).first().stop().slideUp 'fast', () =>
         @_link.removeClass('up')
       $(document).unbind "click", @hide
-      
+
 
 
   class Panel
@@ -214,37 +223,89 @@ jQuery ($) ->
 
     constructor: (element) ->
       @container = $(element)
-      @id = @container.attr('id')
+      @id = @container.attr('data-panel')
       @links = $("a[data-panel='#{@id}']")
-      Panel.remember(@)
-      @links.bind "click", @toggle
+      @header = $('#masthead').find("a[data-panel='#{@id}']")
+      box = @header.offsetParent()
+      @container.appendTo(box )
+      @patch = $('<div class="patch" />').appendTo(box)
+      @timer = null
+      @showing = false
+
+      # Open on hover or click. Close with wobble catcher on exit. 
+      @links.bind "click", @showOrGo
+      @links.bind "touchstart", @showOrGo
+      $(@header).hover(@show, @hideSoon)
+      $(@patch).hover(@show, @hideSoon)
+      $(@container).hover(@show, @hideSoon)
+
+      # To open remotely just trigger a show event on the panel.
       @container.bind "show", @show
+      @container.bind "hide", @hide
       @set()
-        
+      Panel.remember(@)
+    
+    setup: () =>
+      position = @header.position()
+      offset = @header.offset()
+      @patch.css
+        left: position.left + 1
+        top: position.top + @header.height() - 3
+        width: @header.outerWidth() - 2
+      if offset.left > $(window).width() / 2
+        @container.css
+          left: position.left - (@container.outerWidth() - @header.outerWidth() - 50)
+          top: position.top + @header.height()
+      else
+        @container.css
+          left: position.left - 40
+          top: position.top + @header.height()
+
+      
     set: () =>
-      if @container.hasClass('here') then @show() else @hide()
+      if @header.hasClass('here') then @show() else @hide()
       
     toggle: (e) =>
       if e
         e.preventDefault()
         e.stopPropagation()
-      if @container.is(":visible") then @revert() else @show()
+      if @showing then @hide() else @show()
+    
+    # We hit this method on click or touchstart. It has two purposes: to prevent annoying hover-based double taps,
+    # and to allow a click on the menu header *while it is showing* (probably because of a hover evet) to active the underlying link.
+    #
+    showOrGo: (e) =>
+      unless @showing
+        if e
+          e.preventDefault()
+          e.stopPropagation()
+        @show()
 
     hide: (e) =>
-      @container.fadeOut()
-      @links.removeClass('here')
-      $(document).unbind "click", @hide
-    
+      window.clearTimeout @timer
+      @container.removeClass('up')
+      @patch.removeClass('up')
+      @header.removeClass('up')
+      @showing = false
+          
+    hideSoon: () =>
+      @timer = window.setTimeout @hide, 500
+      
     show: (e) =>
-      Panel.hideAll()
-      @container.stop().fadeIn()
-      @links.addClass('here')
-      # $(document).bind("click", @hide)
-  
+      window.clearTimeout @timer
+      unless @showing
+        @setup()
+        Panel.hideAll()
+        @container.addClass('up')
+        @patch.addClass('up')
+        @header.addClass('up')
+        @showing = true
+        @container.find('input[autofocus]').first().focus()
+
     revert: (e) =>
       Panel.hideAll()
-      
-      
+
+
   $.fn.panel = ->
     @each ->
       new Panel(@)

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

@@ -1,92 +1,134 @@
 jQuery ($) ->
+
+  $.fn.add_to_stream = ->
+    if @length
+      $.stream ?= new Streamer()
+      $.stream.append(@) 
+
+  class Streamer
+    constructor: () ->
+      @_container = $('<div class="streamer" />').appendTo $('body')
+      @_scroller = $('<div class="scroller" />').appendTo @_container
+      $('<a class="next" href="#" />').appendTo(@_container).click @next
+      $('<a class="prev" href="#" />').appendTo(@_container).click @prev
+      $('<a class="closer" href="#" />').appendTo(@_container).click @hide
+      @_scraps = []
+      @_showing = false
+      @_modified = true
+      @place()
+      @_container.bind "mousedown", @containEvent
+      @_container.bind "touchstart", @containEvent
+      @_container.bind "refresh", @refresh
+      $(window).bind "resize", @place
+    
+    place: (e) =>
+      w = $(window)
+      @_container.css
+        left: (w.width() - @_container.width()) / 2
+        top: (w.height() - @_container.height())/ 2
+      
+    containEvent: (e) =>
+      e.stopPropagation() if e
+      
+    append: (elements) =>
+      $(elements).each (i, element) =>
+        scrap = new Scrap element, this
+        scrap.container.removeClass('preload').appendTo @_scroller
+        @_scraps.push scrap
+      @_modified = true
+    
+    refresh: (e) =>
+      # do something!
+
+    goto: (scrap) =>
+      @_swipe.slide @_scraps.indexOf(scrap)
+    
+    next: () =>
+      @_swipe.next()
+
+    prev: () =>
+      @_swipe.prev()
+    
+    afterSlide: () =>
+      @stopVideos()
+
+    stopVideos: () =>
+      @_container.find('iframe.youtube').each ->
+        $(@).attr('src', $(@).attr('src'))
+      
+    resetSwipe: () =>
+      @_swipe?.kill()
+      @_swipe = new Swipe @_container[0],
+        speed: 1000
+        auto: false
+        loop: false
+        callback: @afterSlide
+      $.swipe = @_swipe
+      @_modified = false
+      
+    show: (scrap) =>
+      unless @_showing
+        @_container.fadeIn 'fast', () =>
+          @resetSwipe() if @_modified
+          @goto(scrap) if scrap?
+        @_showing = true
+        $(document).bind "mousedown", @hide
+        $(document).bind "touchstart", @hide
+
+    hide: () =>
+      if @_showing
+        @stopVideos()
+        @_container.fadeOut('fast')
+        $(document).unbind "mousedown", @hide
+        $(document).unbind "touchstart", @hide
+        @_showing = false
+
+
+  class Scrap
+    constructor: (element, stream) ->
+      @container = $(element)
+      @_stream = stream
+      $('a[data-scrap="' + @container.attr('data-scrap') + '"]').click @goto
+    
+    goto: (e) =>
+      if e
+        e.preventDefault()
+        e.stopPropagation()
+      @_stream.show(this)
+
+
+
+
+
   $.fn.scrap_form = () ->
     @each ->
       new ScrapForm(@)
     @
 
-  $.fn.type_setter = (scrapform) ->
-    @change ->
-      if $(@).is('checked')
-        scrapform.setType($(@).val())
-
   class ScrapForm
     constructor: (element) ->
       @_container = $(element)
       @_header = @_container.find('.scraptypes')
-      @_fields = @_container.find('.fields')
       @_header.find('input:radio').change @setType
-      @_body = @_fields.find('.body')
-      @_caption = @_fields.find('.caption')
-      @_image = @_fields.find('.upload')
-      @_event = @_fields.find('.scrapevent')
-      @_document = @_fields.find('.scrapdocument')
-      @_video = @_fields.find('.scrapvideo')
-      @_video.find('input').video_picker()
-      @_thumb = @_video.find '.thumb'
       @setType()
-      @getVideo()
-
-    getVideo: =>
-      if @_header.find('input:radio:checked').val() == "video"
-        yt_id = @_video.find('input.name').val()
-        $.ajax
-          url: "/videos/#{yt_id}.js"
-          type: "GET"
-          dataType: "html"
-          success: (data) =>
-            @_thumb.append data
 
     setType: () =>
       scraptype = @_header.find('input:radio:checked').val()
-      @_fields.attr("class", "fields #{scraptype}")
-      switch scraptype
-        when "text"
-          @_body.find('textarea').attr("placeholder", "Your remarks")
-          @textBased()
-        when "quote"
-          @_body.find('textarea').attr("placeholder", "Quote text")
-          @textBased()
-        when "link"
-          @_body.find('textarea').attr("placeholder", "Link address")
-          @textBased()
-        when "video"
-          @_body.find('textarea').attr("placeholder", "Youtube ID")
-          @videoBased()
-        when "image"
-          @imageBased()
-        when "event"
-          @eventBased()
-        when "document"
-          @documentBased()
-
-    imageBased: =>
-      @_image.show().find('input').prop('disabled', false)
-      @_document.remove().find('input').prop('disabled', true)
-      @_event.hide().find('input').prop('disabled', true)
-      @_body.hide().find('input, textarea').prop('disabled', true)
-
-    textBased: =>
-      @_image.hide().find('input').prop('disabled', true)
-      @_document.remove().find('input').prop('disabled', true)
-      @_event.hide().find('input').prop('disabled', true)
-      @_body.show().find('input, textarea').prop('disabled', false)
-
-    eventBased: =>
-      @_image.hide().find('input').prop('disabled', true)
-      @_document.remove().find('input').prop('disabled', true)
-      @_event.show().find('input').prop('disabled', false)
-      @_body.hide().find('input, textarea').prop('disabled', true)
-
-    documentBased: =>
-      @_image.hide().find('input').prop('disabled', true)
-      @_fields.prepend @_document
-      @_document = @_fields.find('.scrapdocument').activate()
-      @_document.show().find('input').prop('disabled', false)
-      @_event.hide().find('input').prop('disabled', true)
-      @_body.hide().find('input, textarea').prop('disabled', true)
-
-    videoBased: =>
-      @_image.hide().find('input').prop('disabled', true)
-      @_document.remove().find('input').prop('disabled', true)
-      @_event.hide().find('input').prop('disabled', true)
-      @_body.hide().find('input, textarea').prop('disabled', false)
+      @_container.attr("class", "scrap #{scraptype}")
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -1,5 +1,11 @@
 jQuery ($) ->
 
+  $.zeroPad = (n, width) ->
+    width ?= 2
+    n = n + ''
+    n = "0#{n}" while n.length < width
+    n
+
   ## Utilities
   # **$.makeGuid** is a neat little rfc4122 generator cribbed from 
   # http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
@@ -18,6 +24,12 @@ jQuery ($) ->
     return false unless results
     results[1] or null
 
+  # Returns true if the keycode is a meaningful text-editing action.
+  #
+  $.significantKeypress = (kc) ->
+    #enter        delete,      backspace,    alphanumerics,    number pad,        punctuation
+    (kc is 13) or (kc is 8) or (kc is 46) or (47 < kc < 91) or (96 < kc < 112) or (kc > 145)
+
   # This sends a command to the youtube API event listener in an iframe player.
   # commands include pauseVideo, playVideo, etc.
 
@@ -41,14 +53,14 @@ jQuery ($) ->
         input.change() if $(@).is(":checked")
 
   $.easing.glide = (x, t, b, c, d) ->
-    -c * ((t=t/d-1)*t*t*t - 1) + b
+    -c * ((t=t / d-1)*t*t*t - 1) + b
 
   $.easing.boing = (x, t, b, c, d, s) ->
     s ?= 1.70158;
-    c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b
+    c*((t=t / d-1)*t*((s+1)*t + s) + 1) + b
 
   $.easing.expo = (x, t, b, c, d) ->
-    (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b
+    (t==d) ? b+c : c * (-Math.pow(2, -10 * t / d) + 1) + b
 
   $.add_stylesheet = (path) ->
     if document.createStyleSheet
@@ -109,6 +121,16 @@ jQuery ($) ->
       history.back()
       true
 
+  $.fn.disable = ->
+    @each ->
+      $(@).addClass('disabled').find('input, select, textarea').attr('disabled', true)
+  
+  $.fn.enable = ->
+    @each ->
+      $(@).removeClass('disabled').find('input, select, textarea').attr('disabled', false)
+  
+  
+
   $.activations = []
   
   $.activate_with = (fn) ->