pwnstyles_rails 0.1.8 → 0.1.9

data/VERSION

@@ -1 +1 @@
-0.1.8
+0.1.9

data/app/assets/javascripts/pwn-fx.js.coffee

@@ -18,7 +18,7 @@ class PwnFxClass
   
   # Wires JS to elements with data-pwnfx attributes.
   #
-  # @param [Element] root the element whose content is wired; use document at
+  # @param {Element} root the element whose content is wired; use document at
   #                       load time
   wire: (root) ->
     for effect in @effects
@@ -38,19 +38,19 @@ class PwnFxClass
   
   # Registers a PwnFx effect.
   #
-  # @param [String] attrName string following data-pwnfx- in the effect's
+  # @param {String} attrName string following data-pwnfx- in the effect's
   #                          attribute names
   # @param klass the class that wraps the effect's implementation
   registerEffect: (attrPrefix, klass) ->
     if @effectsByName[attrPrefix]
-      throw new Error("Effect name {attrPrefix} already registered")
+      throw new Error("PwnFx effect name {attrPrefix} already registered")
     @effects.push [attrPrefix, klass]
   
   # Finds a scoping container.
   #
-  # @param [String] scopeId the scope ID to look for
-  # @param [Element] element the element where the lookup starts
-  # @return [Element] the closest parent of the given element whose
+  # @param {String} scopeId the scope ID to look for
+  # @param {HTMLElement} element the element where the lookup starts
+  # @return {HTMLElement} the closest parent of the given element whose
   #     data-pwnfx-scope matches the scopeId argument; window.document is
   #     returned if no such element exists or if scope is null
   resolveScope: (scopeId, element) ->
@@ -61,9 +61,9 @@ class PwnFxClass
   
   # Performs a scoped querySelectAll.
   #
-  # @param [Element] scope the DOM element serving as the search scope
-  # @param [String] selector the CSS selector to query
-  # @return [NodeList, Array] the elements in the scope that match the CSS
+  # @param {HTMLElement} scope the DOM element serving as the search scope
+  # @param {String} selector the CSS selector to query
+  # @return {NodeList, Array} the elements in the scope that match the CSS
   #     selector; the scope container can belong to the returned array
   queryScope: (scope, selector) ->
     scopeMatches = false
@@ -85,6 +85,64 @@ class PwnFxClass
     else
       scope.querySelectorAll selector
   
+  # Executes the JavaScript inside the <script> tags in a DOM subtree.
+  #
+  # @param {HTMLElement} element the DOM element rooting the subtree that will
+  #                              be searched for <script> tags
+  runScripts: (element) ->
+    # HACK: <script>s are removed and re-inserted so the browser runs them
+    for scriptElement in element.querySelectorAll('script')
+      parent = scriptElement.parentElement
+      nextSibling = scriptElement.nextSibling
+      parent.removeChild scriptElement
+      parent.insertBefore scriptElement.cloneNode(true), nextSibling
+    null
+  
+  # Replaces an element's contents with some HTML.
+  #
+  # The JavaScript inside the HTML's <script> tags will be executed. 
+  #
+  # @param {HTMLElement} element the element whose contents will be replaced
+  # @param {String}
+  replaceHtml: (element, html) ->
+    element.innerHTML = html
+    @runScripts element
+    @wire element
+
+  # The closest form element wrapping a node.
+  #
+  # @param {HTMLElement} element the element whose parent chain will be searched
+  # @return {HTMLFormElement} the element's closest parent form, or null if the
+  #     element is not wrapped in a <form>
+  parentForm: (element) ->
+    while element
+      return element if element.nodeName == 'FORM'
+      element = element.parentNode
+    null
+  
+  # Do AJAX.
+  #
+  # @param {String} url the request URL (e.g., "http://localhost/path/to.html")
+  # @param {String} method the request method (e.g., "POST")
+  # @param [HTMLFormElement] form the DOM form whose data will be submitted
+  # @param [function(data)] onData callback that receives the XHR data, if the
+  #                                XHR completes successfully
+  xhr: (url, method, form, onData) ->
+    xhr = new XMLHttpRequest
+    xhr.onload = @_xhr_onload
+    xhr.pwnfxOnData = onData
+    xhr.open method, url
+    xhr.setRequestHeader 'X-Requested-With', 'XMLHttpRequest'
+    if form
+      xhr.send new FormData(form)
+    else
+      xhr.send null
+  
+  # Called when an XHR request issued by PwnFx.xhr works out.
+  _xhr_onload: ->
+    if @status < 200 || @status >= 300
+      throw new Error("XHR result ignored due to HTTP status: #{@statusText}")
+    @pwnfxOnData @responseText
   
 # Singleton instance.
 PwnFx = new PwnFxClass
@@ -96,11 +154,24 @@ PwnFx = new PwnFxClass
 #   data-pwnfx-move: an identifier connecting the move's target element
 #   data-pwnfx-move-target: set to the same value as data-pwnfx-move on the
 #       element that will receive the moved element as its last child
+#   data-pwnfx-move-method: 'append' adds the moved as the element as the
+#       target's last child, 'replace' clears the target element, then adds the
+#       moved element as the target's only child
 class PwnFxMove
   constructor: (element, identifier, scopeId) ->
     scope = PwnFx.resolveScope scopeId, element
+    method = element.getAttribute('data-pwnfx-move-method') || 'append'
     target = document.querySelector "[data-pwnfx-move-target=\"#{identifier}\"]"
-    target.appendChild element
+     
+    switch method
+      when 'append'
+        target.appendChild element
+      when 'replace'
+        target.innerHTML = ''
+        target.appendChild element
+      else
+        throw new Error("pwnfx-move-method #{method} not implemented")
+  
 
 PwnFx.registerEffect 'move', PwnFxMove
     
@@ -146,68 +217,85 @@ class PwnFxRender
 PwnFx.registerEffect 'render', PwnFxRender
 
 
+# Loads some content after the main page load via an AJAX request. 
+#
+# The text / HTML returned by the request is placed in another element. Scripts
+# in <script> tags are executed.
+#
+# Element attributes:
+#   data-pwnfx-delayed: identifier connecting the AJAX data receiver
+#   data-pwnfx-delayed-url: URL to perform an AJAX request to
+#   data-pwnfx-delayed-method: the HTTP method of AJAX request (default: POST)
+#   data-pwnfx-delayed-ms: the delay between the page load and the issuing of
+#                          the AJAX request (default: 1000ms)
+#   data-pwnfx-delayed-target: set to the value of data-pwnfx-delayed on the
+#                              element populated with the AJAX response
+class PwnFxDelayed
+  constructor: (element, identifier, scopeId) ->
+    targetSelector = "[data-pwnfx-delayed-target=\"#{identifier}\"]"
+    xhrUrl = element.getAttribute('data-pwnfx-delayed-url')
+    xhrMethod = element.getAttribute('data-pwnfx-delayed-method') || 'POST'
+    xhrForm = PwnFx.parentForm element
+    delay = parseInt(
+        element.getAttribute('data-pwnfx-delayed-ms') || '1000');
+
+    ajaxLoad = ->
+      PwnFx.xhr xhrUrl, xhrMethod, xhrForm, (data) ->
+        scope = PwnFx.resolveScope scopeId, element
+        for targetElement in PwnFx.queryScope(scope, targetSelector)
+          PwnFx.replaceHtml targetElement, data
+          
+    window.setTimeout ajaxLoad, delay
+
+PwnFx.registerEffect 'delayed', PwnFxDelayed
+
+
 # Fires off an AJAX request (almost) every time when an element changes.
 #
-# The text / HTML returned by the request is placed in another element.
+# The text / HTML returned by the request is placed in another element. Scripts
+# in <script> tags are executed.
 #
 # Element attributes:
-#   data-pwnfx-refresh: URL to perform an AJAX request to
+#   data-pwnfx-refresh: identifier connecting the AJAX data receiver
+#   data-pwnfx-refresh-url: URL to perform an AJAX request to
 #   data-pwnfx-refresh-method: the HTTP method of AJAX request (default: POST)
-#   data-pwnfx-refresh-ms: interval between a change on the source element and
+#   data-pwnfx-refresh-ms: delay between a change on the source element and
 #                          AJAX refresh requests (default: 200ms)
-#   data-pwnfx-target: the element populated with the AJAX response
+#   data-pwnfx-refresh-target: set to the value of data-pwnfx-refresh on the
+#                              element populated with the AJAX response
 class PwnFxRefresh
-  constructor: (element, xhrUrl, scopeId) ->
-    targetSelector = '#' + element.getAttribute('data-pwnfx-refresh-target') 
-    refreshInterval = parseInt(
-        element.getAttribute('data-pwnfx-refresh-ms') || '200');
+  constructor: (element, identifier, scopeId) ->
+    targetSelector = "[data-pwnfx-refresh-target=\"#{identifier}\"]"
+    xhrUrl = element.getAttribute('data-pwnfx-refresh-url')
     xhrMethod = element.getAttribute('data-pwnfx-refresh-method') || 'POST'
-    xhrForm = @parentForm element
+    xhrForm = PwnFx.parentForm element
+    refreshDelay = parseInt(
+        element.getAttribute('data-pwnfx-refresh-ms') || '200');
     
-    onXhrSuccess = ->
-      data = @responseText
+    onXhrData = (data) ->
       scope = PwnFx.resolveScope scopeId, element
       for targetElement in PwnFx.queryScope(scope, targetSelector)
-        targetElement.innerHTML = data
-        # HACK: <script>s are removed and re-inserted so the browser runs them
-        for scriptElement in targetElement.querySelectorAll('script')
-          parent = scriptElement.parentElement
-          nextSibling = scriptElement.nextSibling
-          parent.removeChild scriptElement
-          parent.insertBefore scriptElement.cloneNode(true), nextSibling        
-        PwnFx.wire targetElement
+        PwnFx.replaceHtml targetElement, data
             
-    refreshPending = false
+    changeTimeout = null
     refreshOldValue = null
     ajaxRefresh = ->
-      refreshPending = false
-      xhr = new XMLHttpRequest
-      xhr.onload = onXhrSuccess
-      xhr.open xhrMethod, xhrUrl
-      xhr.send new FormData(xhrForm)
+      changeTimeout = null
+      PwnFx.xhr xhrUrl, xhrMethod, xhrForm, onXhrData
       
     onChange = ->
       value = element.value
       return true if value == refreshOldValue
       refreshOldValue = value
       
-      return true if refreshPending
-      refreshPending = true
-      window.setTimeout ajaxRefresh, refreshInterval
+      window.clearTimeout changeTimeout if changeTimeout != null
+      changeTimeout = window.setTimeout ajaxRefresh, refreshDelay
       true
       
     element.addEventListener 'change', onChange, false
     element.addEventListener 'keydown', onChange, false
     element.addEventListener 'keyup', onChange, false
     
-    
-  # The closest form element wrapping a node.
-  parentForm: (element) ->
-    while element
-      return element if element.nodeName == 'FORM'
-      element = element.parentNode
-    null
-
 PwnFx.registerEffect 'refresh', PwnFxRefresh
 
 
@@ -300,7 +388,7 @@ class PwnFxHide
       element.addEventListener 'change', onChange, false
       onChange()
     else
-      throw new Error("Unimplemented trigger #{trigger}")
+      throw new Error("Unimplemented pwnfx-hide trigger #{trigger}")
 
 PwnFx.registerEffect 'hide', PwnFxHide
 

data/lib/pwnstyles_rails/generators/layouts/_status_bar.html.erb

@@ -1,6 +1,6 @@
-<% if flash[:error] %>
+<% if flash[:alert] %>
 <p class="status-bar error" data-pwnfx-hide-positive="status-bar">
-  <%= flash[:error] %>
+  <%= flash[:alert] %>
 
   <span class="actions">
   <%= link_to 'Hide', '#', 'data-pwnfx-hide' => 'status-bar' %>

data/pwnstyles_rails.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = "pwnstyles_rails"
-  s.version = "0.1.8"
+  s.version = "0.1.9"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Victor Costan"]
-  s.date = "2012-02-06"
+  s.date = "2012-02-08"
   s.description = "Included CSS was designed for reuse across pwnb.us apps."
   s.email = "victor@costan.us"
   s.extra_rdoc_files = [

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pwnstyles_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.8
+  version: 0.1.9
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-02-06 00:00:00.000000000Z
+date: 2012-02-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
-  requirement: &19937980 !ruby/object:Gem::Requirement
+  requirement: &11333680 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,10 +21,10 @@ dependencies:
         version: 3.2.0
   type: :runtime
   prerelease: false
-  version_requirements: *19937980
+  version_requirements: *11333680
 - !ruby/object:Gem::Dependency
   name: sass-rails
-  requirement: &19937220 !ruby/object:Gem::Requirement
+  requirement: &11332740 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -32,10 +32,10 @@ dependencies:
         version: 3.2.4
   type: :runtime
   prerelease: false
-  version_requirements: *19937220
+  version_requirements: *11332740
 - !ruby/object:Gem::Dependency
   name: shoulda
-  requirement: &19936520 !ruby/object:Gem::Requirement
+  requirement: &11331580 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -43,10 +43,10 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *19936520
+  version_requirements: *11331580
 - !ruby/object:Gem::Dependency
   name: bundler
-  requirement: &19935800 !ruby/object:Gem::Requirement
+  requirement: &11330960 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -54,10 +54,10 @@ dependencies:
         version: 1.0.0
   type: :development
   prerelease: false
-  version_requirements: *19935800
+  version_requirements: *11330960
 - !ruby/object:Gem::Dependency
   name: jeweler
-  requirement: &19934980 !ruby/object:Gem::Requirement
+  requirement: &11330260 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -65,10 +65,10 @@ dependencies:
         version: 1.8.0
   type: :development
   prerelease: false
-  version_requirements: *19934980
+  version_requirements: *11330260
 - !ruby/object:Gem::Dependency
   name: rcov
-  requirement: &19934260 !ruby/object:Gem::Requirement
+  requirement: &11329560 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -76,10 +76,10 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *19934260
+  version_requirements: *11329560
 - !ruby/object:Gem::Dependency
   name: simplecov
-  requirement: &19933540 !ruby/object:Gem::Requirement
+  requirement: &11328840 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -87,7 +87,7 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *19933540
+  version_requirements: *11328840
 description: Included CSS was designed for reuse across pwnb.us apps.
 email: victor@costan.us
 executables: []
@@ -152,7 +152,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -1644724603097624457
+      hash: -1561629047696915926
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements: