MDL-51222 Javascript: Trigger events for filters on DOM insertion

When nodes are added to the dom, they may need to be re-processed by a JS based
filter. To do this we need to trigger the legacy YUI event filter-content-updated.

To make this easier I added some wrappers to template that will insert the node, run any
JS and trigger the event.

I also changed existing yui code to call the amd function to trigger the event. This way
all jquery and yui listeners will always be notified.
This commit is contained in:
Damyon Wiese 2015-08-27 17:15:17 +08:00
parent 74ede2d89a
commit 28de777199
17 changed files with 284 additions and 135 deletions

View file

@ -32,7 +32,6 @@ YUI.add('moodle-atto_equation-button', function (Y, NAME) {
* @class Button
* @extends M.editor_atto.EditorPlugin
*/
var COMPONENTNAME = 'atto_equation',
LOGNAME = 'atto_equation',
CSS = {
@ -231,8 +230,10 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
tabview.render();
dialogue.show();
// Trigger any JS filters to reprocess the new nodes.
Y.fire(M.core.event.FILTER_CONTENT_UPDATED, {nodes: (new Y.NodeList(dialogue.get('boundingBox')))});
// Notify the filters about the modified nodes.
require(['core/event'], function(event) {
event.notifyFilterContentUpdated(dialogue.get('boundingBox').getDOMNode());
});
if (equation) {
content.one(SELECTORS.EQUATION_TEXT).set('text', equation);
@ -496,7 +497,10 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
if (preview.status === 200) {
previewNode.setHTML(preview.responseText);
Y.fire(M.core.event.FILTER_CONTENT_UPDATED, {nodes: (new Y.NodeList(previewNode))});
// Notify the filters about the modified nodes.
require(['core/event'], function(event) {
event.notifyFilterContentUpdated(previewNode.getDOMNode());
});
}
},

View file

@ -32,7 +32,6 @@ YUI.add('moodle-atto_equation-button', function (Y, NAME) {
* @class Button
* @extends M.editor_atto.EditorPlugin
*/
var COMPONENTNAME = 'atto_equation',
LOGNAME = 'atto_equation',
CSS = {
@ -231,8 +230,10 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
tabview.render();
dialogue.show();
// Trigger any JS filters to reprocess the new nodes.
Y.fire(M.core.event.FILTER_CONTENT_UPDATED, {nodes: (new Y.NodeList(dialogue.get('boundingBox')))});
// Notify the filters about the modified nodes.
require(['core/event'], function(event) {
event.notifyFilterContentUpdated(dialogue.get('boundingBox').getDOMNode());
});
if (equation) {
content.one(SELECTORS.EQUATION_TEXT).set('text', equation);
@ -496,7 +497,10 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
if (preview.status === 200) {
previewNode.setHTML(preview.responseText);
Y.fire(M.core.event.FILTER_CONTENT_UPDATED, {nodes: (new Y.NodeList(previewNode))});
// Notify the filters about the modified nodes.
require(['core/event'], function(event) {
event.notifyFilterContentUpdated(previewNode.getDOMNode());
});
}
},

View file

@ -30,7 +30,6 @@
* @class Button
* @extends M.editor_atto.EditorPlugin
*/
var COMPONENTNAME = 'atto_equation',
LOGNAME = 'atto_equation',
CSS = {
@ -229,8 +228,10 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
tabview.render();
dialogue.show();
// Trigger any JS filters to reprocess the new nodes.
Y.fire(M.core.event.FILTER_CONTENT_UPDATED, {nodes: (new Y.NodeList(dialogue.get('boundingBox')))});
// Notify the filters about the modified nodes.
require(['core/event'], function(event) {
event.notifyFilterContentUpdated(dialogue.get('boundingBox').getDOMNode());
});
if (equation) {
content.one(SELECTORS.EQUATION_TEXT).set('text', equation);
@ -494,7 +495,10 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
if (preview.status === 200) {
previewNode.setHTML(preview.responseText);
Y.fire(M.core.event.FILTER_CONTENT_UPDATED, {nodes: (new Y.NodeList(previewNode))});
// Notify the filters about the modified nodes.
require(['core/event'], function(event) {
event.notifyFilterContentUpdated(previewNode.getDOMNode());
});
}
},