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 <[email protected]> Authored: Wed Jun 5 10:27:04 2013 -0700 Committer: Howard M. Lewis Ship <[email protected]> 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
