[xwiki-devs] [Proposal] Adding JS behaviors to dynamically inserted HTML
Hi devs, Short story: Whenever adding new HTML content to the document, like loading the content of a modal popup, or refreshing the Activity stream, an 'xwiki:dom:updated' event should be fired, sending the list of added elements in the even memo. All standard behaviors should also monitor these events and enhance the newly inserted HTML content, for example adding support for the suggestDocuments, withTip or maximizable behavior classnames. Long story: One of the good features of XWiki is that we have the notion of "behavior classnames", CSS class names that attach a certain behavior to the affected element. This usually works by looking for such elements when the DOM is loaded ('xwiki:dom:loaded' event) and enhancing them with the requested behavior. The problem is that this behavior isn't automatically added for elements inserted in the DOM after the initial xwiki:dom:loaded event, which means that the code that inserted those new elements in the DOM tree must also take extra steps to add the desired behavior, usually with copy/paste, firing custom events or by re-sending the xwiki:dom:loaded event (which is wrong). I'd like to propose a new standard, the 'xwiki:dom:updated' event. This works in two ways: 1. All the code that inserts new elements will fire such an event, sending the list of new HTML elements in the 'elements' field of the event memo. For example:
document.fire('xwiki:dom:udated', {'elements': [dialog.dialogBox._x_contentPlug]});
The 'elements' field must always be a list, even if only one root element is inserted, so that adding a set of items (<li> or <tr> elements, for example) is well supported. 2. All code that adds behavior to classnames must also listen to this event and enhance the sub-elements that have been inserted. For example:
document.observe('xwiki:dom:udated', function(event) { event.memo.elements.each(function(element) { $(element).select('input.withTip').each(function(input) { input.observe... }); }); });
I wonder if we should also list the removed elements. In general this would be needed to cleanup resources, but as far as I know Prototype can take care of its own cleanup, without any manual steps needed. -- Sergiu Dumitriu http://purl.org/net/sergiu/
+1 On Mon, Jul 9, 2012 at 2:54 AM, Sergiu Dumitriu <[email protected]> wrote:
Hi devs,
Short story:
Whenever adding new HTML content to the document, like loading the content of a modal popup, or refreshing the Activity stream, an 'xwiki:dom:updated' event should be fired, sending the list of added elements in the even memo. All standard behaviors should also monitor these events and enhance the newly inserted HTML content, for example adding support for the suggestDocuments, withTip or maximizable behavior classnames.
Long story:
One of the good features of XWiki is that we have the notion of "behavior classnames", CSS class names that attach a certain behavior to the affected element. This usually works by looking for such elements when the DOM is loaded ('xwiki:dom:loaded' event) and enhancing them with the requested behavior.
The problem is that this behavior isn't automatically added for elements inserted in the DOM after the initial xwiki:dom:loaded event, which means that the code that inserted those new elements in the DOM tree must also take extra steps to add the desired behavior, usually with copy/paste, firing custom events or by re-sending the xwiki:dom:loaded event (which is wrong).
I'd like to propose a new standard, the 'xwiki:dom:updated' event. This works in two ways:
1. All the code that inserts new elements will fire such an event, sending the list of new HTML elements in the 'elements' field of the event memo. For example:
document.fire('xwiki:dom:udated', {'elements': [dialog.dialogBox._x_contentPlug]});
The 'elements' field must always be a list, even if only one root element is inserted, so that adding a set of items (<li> or <tr> elements, for example) is well supported.
2. All code that adds behavior to classnames must also listen to this event and enhance the sub-elements that have been inserted. For example:
document.observe('xwiki:dom:udated', function(event) { event.memo.elements.each(function(element) { $(element).select('input.withTip').each(function(input) { input.observe... }); }); });
Should we fire 'xwiki:dom:udated' on 'xwiki:dom:loaded' so that the code that adds the behaviour handles only one event? Thanks, Marius
I wonder if we should also list the removed elements. In general this would be needed to cleanup resources, but as far as I know Prototype can take care of its own cleanup, without any manual steps needed. -- Sergiu Dumitriu http://purl.org/net/sergiu/
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
On 07/09/2012 03:03 AM, Marius Dumitru Florea wrote:
+1
On Mon, Jul 9, 2012 at 2:54 AM, Sergiu Dumitriu <[email protected]> wrote:
Hi devs,
Short story:
Whenever adding new HTML content to the document, like loading the content of a modal popup, or refreshing the Activity stream, an 'xwiki:dom:updated' event should be fired, sending the list of added elements in the even memo. All standard behaviors should also monitor these events and enhance the newly inserted HTML content, for example adding support for the suggestDocuments, withTip or maximizable behavior classnames.
Long story:
One of the good features of XWiki is that we have the notion of "behavior classnames", CSS class names that attach a certain behavior to the affected element. This usually works by looking for such elements when the DOM is loaded ('xwiki:dom:loaded' event) and enhancing them with the requested behavior.
The problem is that this behavior isn't automatically added for elements inserted in the DOM after the initial xwiki:dom:loaded event, which means that the code that inserted those new elements in the DOM tree must also take extra steps to add the desired behavior, usually with copy/paste, firing custom events or by re-sending the xwiki:dom:loaded event (which is wrong).
I'd like to propose a new standard, the 'xwiki:dom:updated' event. This works in two ways:
1. All the code that inserts new elements will fire such an event, sending the list of new HTML elements in the 'elements' field of the event memo. For example:
document.fire('xwiki:dom:udated', {'elements': [dialog.dialogBox._x_contentPlug]});
The 'elements' field must always be a list, even if only one root element is inserted, so that adding a set of items (<li> or <tr> elements, for example) is well supported.
2. All code that adds behavior to classnames must also listen to this event and enhance the sub-elements that have been inserted. For example:
document.observe('xwiki:dom:udated', function(event) { event.memo.elements.each(function(element) { $(element).select('input.withTip').each(function(input) { input.observe... }); }); });
Should we fire 'xwiki:dom:udated' on 'xwiki:dom:loaded' so that the code that adds the behaviour handles only one event?
Hm, interesting point. Yes, we could do that, sending the entire document.documentElement as the only entry of the memo.elements list.
Thanks, Marius
I wonder if we should also list the removed elements. In general this would be needed to cleanup resources, but as far as I know Prototype can take care of its own cleanup, without any manual steps needed.
-- Sergiu Dumitriu http://purl.org/net/sergiu/
+1, sounds good in general. Trusting you for the details. On Mon, Jul 9, 2012 at 1:54 AM, Sergiu Dumitriu <[email protected]> wrote:
Hi devs,
Short story:
Whenever adding new HTML content to the document, like loading the content of a modal popup, or refreshing the Activity stream, an 'xwiki:dom:updated' event should be fired, sending the list of added elements in the even memo. All standard behaviors should also monitor these events and enhance the newly inserted HTML content, for example adding support for the suggestDocuments, withTip or maximizable behavior classnames.
Long story:
One of the good features of XWiki is that we have the notion of "behavior classnames", CSS class names that attach a certain behavior to the affected element. This usually works by looking for such elements when the DOM is loaded ('xwiki:dom:loaded' event) and enhancing them with the requested behavior.
The problem is that this behavior isn't automatically added for elements inserted in the DOM after the initial xwiki:dom:loaded event, which means that the code that inserted those new elements in the DOM tree must also take extra steps to add the desired behavior, usually with copy/paste, firing custom events or by re-sending the xwiki:dom:loaded event (which is wrong).
I'd like to propose a new standard, the 'xwiki:dom:updated' event. This works in two ways:
1. All the code that inserts new elements will fire such an event, sending the list of new HTML elements in the 'elements' field of the event memo. For example:
document.fire('xwiki:dom:udated', {'elements': [dialog.dialogBox._x_contentPlug]});
The 'elements' field must always be a list, even if only one root element is inserted, so that adding a set of items (<li> or <tr> elements, for example) is well supported.
2. All code that adds behavior to classnames must also listen to this event and enhance the sub-elements that have been inserted. For example:
document.observe('xwiki:dom:udated', function(event) { event.memo.elements.each(function(element) { $(element).select('input.withTip').each(function(input) { input.observe... }); }); });
I wonder if we should also list the removed elements. In general this would be needed to cleanup resources, but as far as I know Prototype can take care of its own cleanup, without any manual steps needed. -- Sergiu Dumitriu http://purl.org/net/sergiu/
_______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
-- Thomas Mortagne
participants (3)
-
Marius Dumitru Florea -
Sergiu Dumitriu -
Thomas Mortagne