tapestry-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From hls...@apache.org
Subject [3/3] git commit: Add support for a events.document.reflow event, to identify when page layout has changed
Date Wed, 05 Jun 2013 18:04:09 GMT
Add support for a events.document.reflow event, to identify when page layout has changed


Project: http://git-wip-us.apache.org/repos/asf/tapestry-5/repo
Commit: http://git-wip-us.apache.org/repos/asf/tapestry-5/commit/c18e1199
Tree: http://git-wip-us.apache.org/repos/asf/tapestry-5/tree/c18e1199
Diff: http://git-wip-us.apache.org/repos/asf/tapestry-5/diff/c18e1199

Branch: refs/heads/master
Commit: c18e1199e8eaa801c6be149e76d077221a685c04
Parents: cfb63ee
Author: Howard M. Lewis Ship <hlship@apache.org>
Authored: Wed Jun 5 10:27:04 2013 -0700
Committer: Howard M. Lewis Ship <hlship@apache.org>
Committed: Wed Jun 5 10:27:04 2013 -0700

----------------------------------------------------------------------
 .../META-INF/modules/t5/core/events.coffee         |   10 ++++
 .../org/apache/tapestry5/t5-core-dom-jquery.coffee |   34 +++++++++++++--
 .../apache/tapestry5/t5-core-dom-prototype.coffee  |   28 +++++++++++-
 3 files changed, 66 insertions(+), 6 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/c18e1199/tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/events.coffee
----------------------------------------------------------------------
diff --git a/tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/events.coffee b/tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/events.coffee
index 908470b..bc9ca33 100644
--- a/tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/events.coffee
+++ b/tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/events.coffee
@@ -18,6 +18,16 @@
 # trigger or listener for. Prototype requires that all custom events have a namespace prefix;
jQuery appears to
 # allow it without issue.
 define
+
+  # Events relating to the document as a whole, triggered on the document object, or elsewhere
on the page.
+  document:
+    # Triggered when the page's content has changed and absolutely positioned elements may
need to have their
+    # positions adjusted (an example of this is the Bootstrap Popover). Many of the methods
on the `t5/core/dom:ElementWrapper`
+    # object automatically trigger this event, as does resizing the window. When that is
insufficient, the `dom`
+    # module exports a `triggerReflow()` function. The firing of the event is "debounced"
such that it will occur
+    # only every 250ms.
+    reflow: "t5:document:reflow"
+
   # Defines events related to the validation and submission of forms. See module `t5/core/forms`
for further details.
   # All events are triggered on a specific HTML `<form>` element, and top-level handlers
take it from there.
   form:

http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/c18e1199/tapestry-core/src/main/coffeescript/org/apache/tapestry5/t5-core-dom-jquery.coffee
----------------------------------------------------------------------
diff --git a/tapestry-core/src/main/coffeescript/org/apache/tapestry5/t5-core-dom-jquery.coffee
b/tapestry-core/src/main/coffeescript/org/apache/tapestry5/t5-core-dom-jquery.coffee
index 9f60c92..86c09b4 100644
--- a/tapestry-core/src/main/coffeescript/org/apache/tapestry5/t5-core-dom-jquery.coffee
+++ b/tapestry-core/src/main/coffeescript/org/apache/tapestry5/t5-core-dom-jquery.coffee
@@ -31,8 +31,7 @@
 # the abstract layer and gain the valuable benefit of not caring about the infrastructure
framework.
 #
 # Changes to this library should be coordinated with the Prototype version.
-define ["underscore", "./utils", "jquery"], (_, utils, $) ->
-
+define ["underscore", "./utils", "jquery", "./events"], (_, utils, $, events) ->
 
   # Converts content (provided to `ElementWrapper.update()` or `append()`) into an appropriate
type. This
   # primarily exists to validate the value, and to "unpack" an ElementWrapper into a DOM
element.
@@ -123,12 +122,16 @@ define ["underscore", "./utils", "jquery"], (_, utils, $) ->
     hide: ->
       @$.hide()
 
+      triggerReflow()
+
       return this
 
     # Displays the wrapped element if hidden.
     show: ->
       @$.show()
 
+      triggerReflow()
+
       return this
 
     # Removes the wrapped element from the DOM.  It can later be re-attached.
@@ -136,6 +139,8 @@ define ["underscore", "./utils", "jquery"], (_, utils, $) ->
       # jQuery's remove() will remove event handlers which we don't want.
       @$.detach()
 
+      triggerReflow()
+
       return this
 
     # Reads or updates an attribute. With one argument, returns the current value
@@ -189,18 +194,24 @@ define ["underscore", "./utils", "jquery"], (_, utils, $) ->
       if content
         @$.append (convertContent content)
 
+      triggerReflow()
+
       return this
 
     # Appends new content (Element, ElementWrapper, or HTML markup string) to the body of
the element.
     append: (content) ->
       @$.append (convertContent content)
 
+      triggerReflow()
+
       return this
 
     # Prepends new content (Element, ElementWrapper, or HTML markup string) to the body of
the element.
     prepend: (content) ->
       @$.prepend (convertContent content)
 
+      triggerReflow()
+
       return this
 
     # Inserts new content (Element, ElementWrapper, or HTML markup string) into the DOM immediately
before
@@ -208,6 +219,8 @@ define ["underscore", "./utils", "jquery"], (_, utils, $) ->
     insertBefore: (content) ->
       @$.before (convertContent content)
 
+      triggerReflow()
+
       return this
 
     # Inserts new content (Element, ElementWrapper, or HTML markup string) into the DOM immediately
after
@@ -215,6 +228,8 @@ define ["underscore", "./utils", "jquery"], (_, utils, $) ->
     insertAfter: (content) ->
       @$.after (convertContent content)
 
+      triggerReflow()
+
       return this
 
     # Runs an animation to fade-in the element over the specified duration.
@@ -222,7 +237,9 @@ define ["underscore", "./utils", "jquery"], (_, utils, $) ->
     # * duration - animation duration time, in seconds
     # * callback - function invoked after the animation is complete
     fadeIn: (duration, callback) ->
-      @$.fadeIn duration * 1000, callback
+      @$.fadeIn duration * 1000, ->
+        triggerReflow()
+        callback and callback()
 
       return this
 
@@ -232,7 +249,9 @@ define ["underscore", "./utils", "jquery"], (_, utils, $) ->
     # * duration - animation duration time, in seconds
     # * callback - function invoked after the animation is complete
     fadeOut: (duration, callback) ->
-      @$.fadeOut duration * 1000, callback
+      @$.fadeOut duration * 1000, ->
+        triggerReflow()
+        callback and callback()
 
       return this
 
@@ -437,6 +456,7 @@ define ["underscore", "./utils", "jquery"], (_, utils, $) ->
 
     return exports
 
+  triggerReflow = _.debounce (-> $(document).trigger events.document.reflow), 250
 
   # The main export is a function that wraps a DOM element as an ElementWrapper; additional
functions are attached as
   # properties.
@@ -462,6 +482,8 @@ define ["underscore", "./utils", "jquery"], (_, utils, $) ->
     # Escape's HTML markup in the string.
     escapeHTML: _.escape
 
+    triggerReflow: triggerReflow
+
     ajaxRequest: ajaxRequest
 
     # Used to add an event handler to an element (possibly from elements below it in the
hierarch).
@@ -492,3 +514,7 @@ define ["underscore", "./utils", "jquery"], (_, utils, $) ->
     # inside a block at the end of the document, inside the `<body`> element, it is
assumed that
     # it is always safe to get the body.
     body: -> wrapElement document.body
+
+  $(window).on "resize", exports.triggerReflow
+
+  return exports
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/c18e1199/tapestry-core/src/main/coffeescript/org/apache/tapestry5/t5-core-dom-prototype.coffee
----------------------------------------------------------------------
diff --git a/tapestry-core/src/main/coffeescript/org/apache/tapestry5/t5-core-dom-prototype.coffee
b/tapestry-core/src/main/coffeescript/org/apache/tapestry5/t5-core-dom-prototype.coffee
index ccabd1b..85d1f97 100644
--- a/tapestry-core/src/main/coffeescript/org/apache/tapestry5/t5-core-dom-prototype.coffee
+++ b/tapestry-core/src/main/coffeescript/org/apache/tapestry5/t5-core-dom-prototype.coffee
@@ -31,7 +31,7 @@
 # the abstract layer and gain the valuable benefit of not caring about the infrastructure
framework.
 #
 # Changes to this library should be coordinated with the jQuery version.
-define ["underscore", "./utils", "prototype"], (_, utils) ->
+define ["underscore", "./utils", "./events", "prototype"], (_, utils, events) ->
 
   # Save a local reference to Prototype.$ ... see notes about some challenges using Prototype,
jQuery,
   # and RequireJS together, here: https://github.com/jrburke/requirejs/issues/534
@@ -77,6 +77,7 @@ define ["underscore", "./utils", "prototype"], (_, utils) ->
         styles[styleName] = finalValue
         element.setStyle styles
         window.clearInterval timeoutID
+        triggerReflow()
         callbacks.oncomplete and callbacks.oncomplete()
 
       # TODO: Add an easein/easeout function
@@ -164,18 +165,24 @@ define ["underscore", "./utils", "prototype"], (_, utils) ->
     hide: ->
       @element.hide()
 
+      triggerReflow()
+
       return this
 
     # Displays the wrapped element if hidden.
     show: ->
       @element.show()
 
+      triggerReflow()
+
       return this
 
     # Removes the wrapped element from the DOM.  It can later be re-attached.
     remove: ->
       @element.remove()
 
+      triggerReflow()
+
       return this
 
     # Reads or updates an attribute. With one argument, returns the current value
@@ -227,18 +234,24 @@ define ["underscore", "./utils", "prototype"], (_, utils) ->
     update: (content) ->
       @element.update (content and convertContent content)
 
+      triggerReflow()
+
       return this
 
     # Appends new content (Element, ElementWrapper, or HTML markup string) to the body of
the element.
     append: (content) ->
       @element.insert bottom: (convertContent content)
 
+      triggerReflow()
+
       return this
 
     # Prepends new content (Element, ElementWrapper, or HTML markup string) to the body of
the element.
     prepend: (content) ->
       @element.insert top: (convertContent content)
 
+      triggerReflow()
+
       return this
 
     # Inserts new content (Element, ElementWrapper, or HTML markup string) into the DOM immediately
before
@@ -246,6 +259,8 @@ define ["underscore", "./utils", "prototype"], (_, utils) ->
     insertBefore: (content) ->
       @element.insert before: (convertContent content)
 
+      triggerReflow()
+
       return this
 
     # Inserts new content (Element, ElementWrapper, or HTML markup string) into the DOM immediately
after
@@ -253,6 +268,8 @@ define ["underscore", "./utils", "prototype"], (_, utils) ->
     insertAfter: (content) ->
       @element.insert after: (convertContent content)
 
+      triggerReflow()
+
       return this
 
     # Runs an animation to fade-in the element over the specified duration. The element may
be hidden (via `hide()`)
@@ -508,7 +525,6 @@ define ["underscore", "./utils", "prototype"], (_, utils) ->
 
     return exports
 
-
   # The main export is a function that wraps a DOM element as an ElementWrapper; additional
functions are attached as
   # properties.
   #
@@ -526,12 +542,16 @@ define ["underscore", "./utils", "prototype"], (_, utils) ->
     # Prototype API (especially with respect to events).
     new ElementWrapper element
 
+  triggerReflow = _.debounce (-> $(document).fire events.document.reflow), 250
+
   _.extend exports,
     wrap: wrapElement
 
     # Escape's HTML markup in the string.
     escapeHTML: (str) -> str.escapeHTML()
 
+    triggerReflow: triggerReflow
+
     ajaxRequest: ajaxRequest
 
     # Used to add an event handler to an element (possibly from elements below it in the
hierarch).
@@ -564,3 +584,7 @@ define ["underscore", "./utils", "prototype"], (_, utils) ->
     # inside a block at the end of the document, inside the `<body`> element, it is
assumed that
     # it is always safe to get the body.
     body: -> wrapElement document.body
+
+  Event.observe window, "resize", triggerReflow
+
+  return exports
\ No newline at end of file


Mime
View raw message