You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by hl...@apache.org on 2013/06/05 20:04:09 UTC
[3/3] git commit: Add support for a events.document.reflow event,
to identify when page layout has changed
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 <hl...@apache.org>
Authored: Wed Jun 5 10:27:04 2013 -0700
Committer: Howard M. Lewis Ship <hl...@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