pwnstyles_rails 0.1.6 → 0.1.7

data/VERSION

@@ -1 +1 @@
-0.1.6
+0.1.7

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

@@ -5,18 +5,159 @@
 # library provides a replacement that adheres to the new philosophy of
 # unobtrusive JavaScript triggered by HTML5 data- attributes.
 
+
+# The class of the singleton instance that tracks all the effects on the page.
+class PwnFxClass
+  # Creates an instance that isn't aware of any effects.
+  #
+  # After defining an effect class, call registerEffect on this instance to make
+  # it aware of the effect.
+  constructor: ->
+    @effects = []
+    @effectsByName = {}
+  
+  # Wires JS to elements with data-pwnfx attributes.
+  #
+  # @param [Element] root the element whose content is wired; use document at
+  #                       load time
+  wire: (root) ->
+    for effect in @effects
+      attrName = "data-pwnfx-#{effect[0]}"
+      effectClass = effect[1]
+      scopeAttrName = "#{attrName}-scope"
+      doneAttrName = "#{attrName}-done"
+      attrSelector = "[#{attrName}]"
+      for element in document.querySelectorAll(attrSelector)
+        attrValue = element.getAttribute attrName
+        continue unless attrValue
+        element.removeAttribute attrName
+        element.setAttribute doneAttrName, attrValue
+        scopeId = element.getAttribute scopeAttrName
+        new effectClass element, attrValue, scopeId
+    null     
+  
+  # Registers a PwnFx effect.
+  #
+  # @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")
+    @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
+  #     data-pwnfx-scope matches the scopeId argument; window.document is
+  #     returned if no such element exists or if scope is null
+  resolveScope: (scopeId, element) ->
+    element = null if scopeId is null
+    while element != null && element.getAttribute('data-pwnfx-scope') != scopeId
+      element = element.parentElement
+    element || document
+  
+  # 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
+  #     selector; the scope container can belong to the returned array
+  queryScope: (scope, selector) ->
+    scopeMatches = false
+    if scope != document
+      # TODO: machesSelector is in a W3C spec, but only implemented using 
+      #       prefixes; the code below should be simplified once browsers
+      #       implement it without vendor prefixes
+      if scope.matchesSelector
+        scopeMatches = scope.matchesSelector selector
+      else if scope.webkitMatchesSelector
+        scopeMatches = scope.webkitMatchesSelector selector
+      else if scope.mozMatchesSelector
+        scopeMatches = scope.mozMatchesSelector
+    
+    if scopeMatches
+      matches = Array.prototype.slice.call scope.querySelectorAll(selector)
+      matches.push scope
+      matches
+    else
+      scope.querySelectorAll selector
+  
+  
+# Singleton instance.
+PwnFx = new PwnFxClass
+
+
+# Moves an element using data-pwnfx-move.
+#
+# Attributes:
+#   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
+class PwnFxMove
+  constructor: (element, identifier, scopeId) ->
+    scope = PwnFx.resolveScope scopeId, element
+    target = document.querySelector "[data-pwnfx-move-target=\"#{identifier}\"]"
+    target.appendChild element
+
+PwnFx.registerEffect 'move', PwnFxMove
+    
+    
+# Renders the contents of a template into a DOM element.
+#
+# Attributes:
+#   data-pwnfx-render: identifier for the render operation
+#   data-pwnfx-render-where: insertAdjacentHTML position argument; can be
+#       beforebegin, afterbegin, beforeend, afterend; defaults to beforeend
+#   data-pwnfx-render-randomize: regexp pattern whose matches will be replaced
+#       with a random string; useful for generating unique IDs
+#   data-pwnfx-render-target: set on the element(s) receiving the rendered HTML;
+#       set to the identifier in data-pwnfx-render 
+#   data-pwnfx-render-source: set on the <script> tag containing the source HTML
+#       to be rendered; set to the identifier in data-pwnfx-render
+class PwnFxRender
+  constructor: (element, identifier, scopeId) ->
+    sourceSelector = "script[data-pwnfx-render-source=\"#{identifier}\"]"
+    targetSelector = "[data-pwnfx-render-target=\"#{identifier}\"]"
+    insertionPoint = element.getAttribute('data-pwnfx-render-where') ||
+                     'beforeend'
+    randomizedPatten = element.getAttribute('data-pwnfx-render-randomize')
+    if randomizedPatten
+      randomizeRegExp = new RegExp(randomizedPatten, 'g')
+    else
+      randomizeRegExp = null
+    
+    onClick = (event) ->
+      scope = PwnFx.resolveScope scopeId, element
+      source = scope.querySelector sourceSelector
+      html = source.innerHTML
+      if randomizeRegExp
+        randomId = 'r' + Date.now() + '_' + Math.random()
+        html = html.replace randomizeRegExp, randomId
+      for targetElement in PwnFx.queryScope(scope, targetSelector)
+        targetElement.insertAdjacentHTML insertionPoint, html
+        PwnFx.wire targetElement
+      event.preventDefault()
+      false
+    element.addEventListener 'click', onClick, false
+
+PwnFx.registerEffect 'render', PwnFxRender
+
+
 # Fires off an AJAX request (almost) every time when an element changes.
 #
 # The text / HTML returned by the request is placed in another element.
 #
 # Element attributes:
-#   data-pwnfx-refresh-url: URL to perform an AJAX request to
+#   data-pwnfx-refresh: 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
 #                          AJAX refresh requests (default: 200ms)
 #   data-pwnfx-target: the element populated with the AJAX response
 class PwnFxRefresh
-  constructor: (element, xhrUrl) ->
+  constructor: (element, xhrUrl, scopeId) ->
     targetSelector = '#' + element.getAttribute('data-pwnfx-refresh-target') 
     refreshInterval = parseInt(
         element.getAttribute('data-pwnfx-refresh-ms') || '200');
@@ -25,15 +166,17 @@ class PwnFxRefresh
     
     onXhrSuccess = ->
       data = @responseText
-      for targetElement in document.querySelectorAll(targetSelector)
+      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
-        
-    
+          parent.insertBefore scriptElement.cloneNode(true), nextSibling        
+        PwnFx.wire targetElement
+            
     refreshPending = false
     refreshOldValue = null
     ajaxRefresh = ->
@@ -53,9 +196,9 @@ class PwnFxRefresh
       window.setTimeout ajaxRefresh, refreshInterval
       true
       
-    element.addEventListener 'change', onChange
-    element.addEventListener 'keydown', onChange
-    element.addEventListener 'keyup', onChange
+    element.addEventListener 'change', onChange, false
+    element.addEventListener 'keydown', onChange, false
+    element.addEventListener 'keyup', onChange, false
     
     
   # The closest form element wrapping a node.
@@ -64,80 +207,87 @@ class PwnFxRefresh
       return element if element.nodeName == 'FORM'
       element = element.parentNode
     null
-    
+
+PwnFx.registerEffect 'refresh', PwnFxRefresh
+
+
 # Shows elements conditionally, depending on whether some inputs' values match.
 #
 # Element attributes:
 #   data-pwnfx-confirm: all elements with the same value for this attribute
 #       belong to the same confirmation group; their values have to match to
 #       trigger the "win" condition
+#   data-pwnfx-confirm-class: the CSS class that is added to hidden elements;
+#       (default: hidden)
 #   data-pwnfx-confirm-win: CSS selector identifying the elements to be shown
 #       when the "win" condition is triggered, and hidden otherwise
 #   data-pwnfx-confirm-fail: CSS selector identifying the elements to be hidden
 #       when the "win" condition is triggered, and shown otherwise
 class PwnFxConfirm
-  constructor: (element, identifier) ->
+  constructor: (element, identifier, scopeId) ->
+    hiddenClass = element.getAttribute('data-pwnfx-confirm-class') || 'hidden'
     sourceSelector = "[data-pwnfx-confirm-done=\"#{identifier}\"]"
     winSelector = "[data-pwnfx-confirm-win=\"#{identifier}\"]"
     failSelector = "[data-pwnfx-confirm-fail=\"#{identifier}\"]"
 
     onChange = ->
+      scope = PwnFx.resolveScope scopeId, element
       value = null
       matching = true
-      for element, index in document.querySelectorAll(sourceSelector)
+      for sourceElement, index in PwnFx.queryScope(scope, sourceSelector)
         if index == 0
-          value = element.value
-        else if element.value != value
+          value = sourceElement.value
+        else if sourceElement.value != value
           matching = false
           break
 
       hideSelector = if matching then failSelector else winSelector
       showSelector = if matching then winSelector else failSelector
-      for targetElement in document.querySelectorAll(showSelector)
-        targetElement.classList.remove 'hidden'
-      for targetElement in document.querySelectorAll(hideSelector)
-        targetElement.classList.add 'hidden'
+      for targetElement in PwnFx.queryScope(scope, winSelector)
+        targetElement.classList.remove hiddenClass
+      for targetElement in PwnFx.queryScope(scope, hideSelector)
+        targetElement.classList.add hiddenClass
       true
     onChange()
       
-    element.addEventListener 'change', onChange
-    element.addEventListener 'keydown', onChange
-    element.addEventListener 'keyup', onChange
-        
-# Moves an element using data-pwnfx-move.
-class PwnFxMove
-  constructor: (element, identifier) ->
-    targetSelector = 
-    target = document.querySelector "[data-pwnfx-move-target=\"#{identifier}\"]"
-    target.appendChild element
+    element.addEventListener 'change', onChange, false
+    element.addEventListener 'keydown', onChange, false
+    element.addEventListener 'keyup', onChange, false
+
+PwnFx.registerEffect 'confirm', PwnFxConfirm
+
 
 # Shows / hides elements when an element is clicked or checked / unchecked.
 #
 # Attributes:
-#   data-pwnfx-reveal: a name for the events caused by this element's triggering
-#   data-pwnfx-trigger: 'click' means events are triggered when the element is
-#       clicked, 'check' means events are triggered when the element is checked;
-#       (default: click)
-#   data-pwnfx-positive: set to the same value as data-pwnfx-reveal on elements
-#       that will be shown when a positive event (click / check) is triggered,
-#       and hidden when a negative event (uncheck) is triggered
-#   data-pwnfx-negative: set to the same value as data-pwnfx-reveal on elements
-#       that will be hidden when a positive event (click / check) is triggered,
-#       and shown when a negative event (uncheck) is triggered
-class PwnFxReveal
-  constructor: (element, identifier) ->
-    trigger = element.getAttribute('data-pwnfx-reveal-trigger') || 'click'      
-    positiveSelector = "[data-pwnfx-reveal-positive=\"#{identifier}\"]"
-    negativeSelector = "[data-pwnfx-reveal-negative=\"#{identifier}\"]"
+#   data-pwnfx-hide: a name for the events caused by this element's triggering
+#   data-pwnfx-hide-trigger: "click" means events are triggered when the
+#       element is clicked, "checked" means events are triggered when the
+#       element is checked; (default: click)
+#   data-pwnfx-hide-class: the CSS class that is added to hidden elements;
+#       (default: hidden)
+#   data-pwnfx-hide-positive: set to the same value as data-pwnfx-hide on
+#       elements that will be hidden when a positive event (click / check) is
+#       triggered, and shown when a negative event (uncheck) is triggered
+#   data-pwnfx-hide-negative: set to the same value as data-pwnfx-hide on
+#       elements that will be shown when a positive event (click / check) is
+#       triggered, and hidden when a negative event (uncheck) is triggered
+class PwnFxHide
+  constructor: (element, identifier, scopeId) ->
+    trigger = element.getAttribute('data-pwnfx-hide-trigger') || 'click'
+    hiddenClass = element.getAttribute('data-pwnfx-hide-class') || 'hidden'
+    positiveSelector = "[data-pwnfx-hide-positive=\"#{identifier}\"]"
+    negativeSelector = "[data-pwnfx-hide-negative=\"#{identifier}\"]"
     onChange = (event) ->
       positive = (trigger == 'click') || element.checked
+      hideSelector = if positive then positiveSelector else negativeSelector
+      showSelector = if positive then negativeSelector else positiveSelector
       
-      showSelector = if positive then positiveSelector else negativeSelector
-      hideSelector = if positive then negativeSelector else positiveSelector
-      for targetElement in document.querySelectorAll(showSelector)
-        targetElement.classList.remove 'hidden'
-      for targetElement in document.querySelectorAll(hideSelector)
-        targetElement.classList.add 'hidden'
+      scope = PwnFx.resolveScope scopeId, element
+      for targetElement in PwnFx.queryScope(scope, hideSelector)
+        targetElement.classList.add hiddenClass
+      for targetElement in PwnFx.queryScope(scope, showSelector)
+        targetElement.classList.remove hiddenClass
       if trigger == 'click'
         event.preventDefault()
         false
@@ -145,34 +295,39 @@ class PwnFxReveal
         true
     
     if trigger == 'click'
-      element.addEventListener 'click', onChange
-    else if trigger == 'check'
-      element.addEventListener 'change', onChange
+      element.addEventListener 'click', onChange, false
+    else if trigger == 'checked'
+      element.addEventListener 'change', onChange, false
       onChange()
+    else
+      throw new Error("Unimplemented trigger #{trigger}")
+
+PwnFx.registerEffect 'hide', PwnFxHide
+
+
+# Removes elements from the DOM when an element is clicked.
+#
+# Attributes:
+#   data-pwnfx-remove: an identifier connecting the elements to be removed
+#   data-pwnfx-remove-target: set to the same value as data-pwnfx-remove on
+#       elements that will be removed when the element is clicked 
+class PwnFxRemove
+  constructor: (element, identifier, scopeId) ->
+    targetSelector = "[data-pwnfx-remove-target=\"#{identifier}\"]"
+
+    onClick = (event) ->
+      scope = PwnFx.resolveScope scopeId, element
+      for targetElement in PwnFx.queryScope(scope, targetSelector)
+        targetElement.parentNode.removeChild targetElement
+      event.preventDefault()
+      false
+    element.addEventListener 'click', onClick, false
+
+PwnFx.registerEffect 'remove', PwnFxRemove
+
 
+# Export the PwnFx instance.
+window.PwnFx = PwnFx
 
-# List of effects.
-pwnEffects = [
-  ['data-pwnfx-move', PwnFxMove],
-  ['data-pwnfx-refresh-url', PwnFxRefresh],
-  ['data-pwnfx-confirm', PwnFxConfirm],
-  ['data-pwnfx-reveal', PwnFxReveal]
-]
-
-# Wires JS to elements with data-pwnfx attributes.
-window.PwnFx = ->
-  for effect in pwnEffects
-    attrName = effect[0]
-    effectClass = effect[1]
-    doneAttrName = "#{attrName}-done"
-    attrSelector = "[#{attrName}]"
-    for element in document.querySelectorAll(attrSelector)
-      attrValue = element.getAttribute attrName
-      continue unless attrValue
-      element.removeAttribute attrName
-      element.setAttribute doneAttrName, attrValue
-      new effectClass element, attrValue
-  null
-
-# Honor data-pwnfx attributes after the DOM is loaded.
-window.addEventListener 'load', -> window.PwnFx()
+# Wire up the entire DOM after the document is loaded.
+window.addEventListener 'load', -> PwnFx.wire(document)

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

@@ -1,16 +1,16 @@
 <% if flash[:error] %>
-<p class="status-bar error" data-pwnfx-reveal-negative="status-bar">
+<p class="status-bar error" data-pwnfx-hide-positive="status-bar">
   <%= flash[:error] %>
 
   <span class="actions">
-  <%= link_to 'Hide', '#', 'data-pwnfx-reveal' => 'status-bar' %>
+  <%= link_to 'Hide', '#', 'data-pwnfx-hide' => 'status-bar' %>
   </span>
 </p>
 <% elsif flash[:errors] && flash[:errors].any? %>
-<div class="status-bar error" data-pwnfx-reveal-negative="status-bar">
+<div class="status-bar error" data-pwnfx-hide-positive="status-bar">
   <%= pluralize(flash[:errors].count, "error") %> occurred:
   <span class="actions">
-  <%= link_to 'Hide', '#', 'data-pwnfx-reveal' => 'status-bar' %>
+  <%= link_to 'Hide', '#', 'data-pwnfx-hide' => 'status-bar' %>
   </span>
 
   <ul>
@@ -20,11 +20,11 @@
   </ul>
 </div>
 <% elsif flash[:notice] %>
-<p class="status-bar notice" data-pwnfx-reveal-negative="status-bar">
+<p class="status-bar notice" data-pwnfx-hide-positive="status-bar">
   <%= flash[:notice] %>
 
   <span class="actions">
-  <%= link_to 'Hide', '#', 'data-pwnfx-reveal' => 'status-bar' %>
+  <%= link_to 'Hide', '#', 'data-pwnfx-hide' => 'status-bar' %>
   </span>
 </p>
 <% end %>

data/pwnstyles_rails.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = "pwnstyles_rails"
-  s.version = "0.1.6"
+  s.version = "0.1.7"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Victor Costan"]
-  s.date = "2012-02-04"
+  s.date = "2012-02-06"
   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.6
+  version: 0.1.7
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-02-04 00:00:00.000000000 Z
+date: 2012-02-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
-  requirement: &7895040 !ruby/object:Gem::Requirement
+  requirement: &16773780 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,10 +21,10 @@ dependencies:
         version: 3.2.0
   type: :runtime
   prerelease: false
-  version_requirements: *7895040
+  version_requirements: *16773780
 - !ruby/object:Gem::Dependency
   name: sass-rails
-  requirement: &7893040 !ruby/object:Gem::Requirement
+  requirement: &16771860 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -32,10 +32,10 @@ dependencies:
         version: 3.2.4
   type: :runtime
   prerelease: false
-  version_requirements: *7893040
+  version_requirements: *16771860
 - !ruby/object:Gem::Dependency
   name: shoulda
-  requirement: &7891480 !ruby/object:Gem::Requirement
+  requirement: &16791900 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -43,10 +43,10 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *7891480
+  version_requirements: *16791900
 - !ruby/object:Gem::Dependency
   name: bundler
-  requirement: &7890520 !ruby/object:Gem::Requirement
+  requirement: &16797760 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -54,10 +54,10 @@ dependencies:
         version: 1.0.0
   type: :development
   prerelease: false
-  version_requirements: *7890520
+  version_requirements: *16797760
 - !ruby/object:Gem::Dependency
   name: jeweler
-  requirement: &7889360 !ruby/object:Gem::Requirement
+  requirement: &16823860 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -65,10 +65,10 @@ dependencies:
         version: 1.8.0
   type: :development
   prerelease: false
-  version_requirements: *7889360
+  version_requirements: *16823860
 - !ruby/object:Gem::Dependency
   name: rcov
-  requirement: &7888140 !ruby/object:Gem::Requirement
+  requirement: &16823100 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -76,10 +76,10 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *7888140
+  version_requirements: *16823100
 - !ruby/object:Gem::Dependency
   name: simplecov
-  requirement: &7887200 !ruby/object:Gem::Requirement
+  requirement: &16833240 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -87,7 +87,7 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *7887200
+  version_requirements: *16833240
 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: -808311045673830044
+      hash: 714706419940380793
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements: