mirror of
https://github.com/moodle/moodle.git
synced 2025-08-05 00:46:50 +02:00
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
parent
74ede2d89a
commit
28de777199
17 changed files with 284 additions and 135 deletions
|
|
@ -22,46 +22,53 @@ Y.extend(AUTOLINKER, Y.Base, {
|
|||
alertpanels: {},
|
||||
initializer : function() {
|
||||
var self = this;
|
||||
Y.delegate('click', function(e){
|
||||
e.preventDefault();
|
||||
require(['core/event'], function(event) {
|
||||
Y.delegate('click', function(e){
|
||||
e.preventDefault();
|
||||
|
||||
//display a progress indicator
|
||||
var title = '',
|
||||
content = Y.Node.create('<div id="glossaryfilteroverlayprogress">' +
|
||||
'<img src="' + M.cfg.loadingicon + '" class="spinner" />' +
|
||||
'</div>'),
|
||||
o = new Y.Overlay({
|
||||
headerContent : title,
|
||||
bodyContent : content
|
||||
}),
|
||||
fullurl,
|
||||
cfg;
|
||||
self.overlay = o;
|
||||
o.render(Y.one(document.body));
|
||||
//display a progress indicator
|
||||
var title = '',
|
||||
content = Y.Node.create('<div id="glossaryfilteroverlayprogress">' +
|
||||
'<img src="' + M.cfg.loadingicon + '" class="spinner" />' +
|
||||
'</div>'),
|
||||
o = new Y.Overlay({
|
||||
headerContent : title,
|
||||
bodyContent : content
|
||||
}),
|
||||
fullurl,
|
||||
cfg;
|
||||
self.overlay = o;
|
||||
o.render(Y.one(document.body));
|
||||
|
||||
//Switch over to the ajax url and fetch the glossary item
|
||||
fullurl = this.getAttribute('href').replace('showentry.php','showentry_ajax.php');
|
||||
cfg = {
|
||||
method: 'get',
|
||||
context : self,
|
||||
on: {
|
||||
success: function(id, o) {
|
||||
this.display_callback(o.responseText);
|
||||
},
|
||||
failure: function(id, o) {
|
||||
var debuginfo = o.statusText;
|
||||
if (M.cfg.developerdebug) {
|
||||
o.statusText += ' (' + fullurl + ')';
|
||||
//Switch over to the ajax url and fetch the glossary item
|
||||
fullurl = this.getAttribute('href').replace('showentry.php','showentry_ajax.php');
|
||||
cfg = {
|
||||
method: 'get',
|
||||
context : self,
|
||||
on: {
|
||||
success: function(id, o) {
|
||||
this.display_callback(o.responseText, event);
|
||||
},
|
||||
failure: function(id, o) {
|
||||
var debuginfo = o.statusText;
|
||||
if (M.cfg.developerdebug) {
|
||||
o.statusText += ' (' + fullurl + ')';
|
||||
}
|
||||
new M.core.exception({ message: debuginfo });
|
||||
}
|
||||
this.display_callback('bodyContent',debuginfo);
|
||||
}
|
||||
}
|
||||
};
|
||||
Y.io(fullurl, cfg);
|
||||
};
|
||||
Y.io(fullurl, cfg);
|
||||
|
||||
}, Y.one(document.body), 'a.glossary.autolink.concept');
|
||||
}, Y.one(document.body), 'a.glossary.autolink.concept');
|
||||
});
|
||||
},
|
||||
display_callback : function(content) {
|
||||
/**
|
||||
* @method display_callback
|
||||
* @param {String} content - Content to display
|
||||
* @param {Object} event The amd event module used to fire events for jquery and yui.
|
||||
*/
|
||||
display_callback : function(content, event) {
|
||||
var data,
|
||||
key,
|
||||
alertpanel,
|
||||
|
|
@ -78,7 +85,8 @@ Y.extend(AUTOLINKER, Y.Base, {
|
|||
definition = data.entries[key].definition + data.entries[key].attachments;
|
||||
alertpanel = new M.core.alert({title:data.entries[key].concept, draggable: true,
|
||||
message:definition, modal:false, yesLabel: M.util.get_string('ok', 'moodle')});
|
||||
Y.fire(M.core.event.FILTER_CONTENT_UPDATED, {nodes: (new Y.NodeList(alertpanel.get('boundingBox')))});
|
||||
// Notify the filters about the modified nodes.
|
||||
event.notifyFilterContentUpdated(alertpanel.get('boundingBox').getDOMNode());
|
||||
Y.Node.one('#id_yuialertconfirm-' + alertpanel.get('COUNT')).focus();
|
||||
|
||||
// Register alertpanel for stacking.
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
YUI.add("moodle-filter_glossary-autolinker",function(e,t){var n="Glossary filter autolinker",r="width",i="height",s="menubar",o="location",u="scrollbars",a="resizable",f="toolbar",l="status",c="directories",h="fullscreen",p="dependent",d;d=function(){d.superclass.constructor.apply(this,arguments)},e.extend(d,e.Base,{overlay:null,alertpanels:{},initializer:function(){var t=this;e.delegate("click",function(n){n.preventDefault();var r="",i=e.Node.create('<div id="glossaryfilteroverlayprogress"><img src="'+M.cfg.loadingicon+'" class="spinner" />'+"</div>"),s=new e.Overlay({headerContent:r,bodyContent:i}),o,u;t.overlay=s,s.render(e.one(document.body)),o=this.getAttribute("href").replace("showentry.php","showentry_ajax.php"),u={method:"get",context:t,on:{success:function(e,t){this.display_callback(t.responseText)},failure:function(e,t){var n=t.statusText;M.cfg.developerdebug&&(t.statusText+=" ("+o+")"),this.display_callback("bodyContent",n)}}},e.io(o,u)},e.one(document.body),"a.glossary.autolink.concept")},display_callback:function(t){var n,r,i,s,o,u,a=this;try{n=e.JSON.parse(t);if(n.success){this.overlay.hide();for(r in n.entries)o=n.entries[r].definition+n.entries[r].attachments,i=new M.core.alert({title:n.entries[r].concept,draggable:!0,message:o,modal:!1,yesLabel:M.util.get_string("ok","moodle")}),e.fire(M.core.event.FILTER_CONTENT_UPDATED,{nodes:new e.NodeList(i.get("boundingBox"))}),e.Node.one("#id_yuialertconfirm-"+i.get("COUNT")).focus(),s="#moodle-dialogue-"+i.get("COUNT"),i.on("complete",this._deletealertpanel(a.alertpanels,s)),e.Object.isEmpty(this.alertpanels)||(u=this._getLatestWindowPosition(),e.Node.one(s).setXY([u[0]+10,u[1]+10])),this.alertpanels[s]=e.Node.one(s).getXY();return!0}n.error&&new M.core.ajaxException(n)}catch(f){new M.core.exception(f)}return!1},_getLatestWindowPosition:function(){var t=[0,0];return e.Object.each(this.alertpanels,function(e){e[0]>t[0]&&(t=e)}),t},_deletealertpanel:function(e,t){delete e[t]}},{NAME:n,ATTRS:{url:{validator:e.Lang.isString,value:M.cfg.wwwroot+"/mod/glossary/showentry.php"},name:{validator:e.Lang.isString,value:"glossaryconcept"},options:{getter:function(){return{width:this.get(r),height:this.get(i),menubar:this.get(s),location:this.get(o),scrollbars:this.get(u),resizable:this.get(a),toolbar:this.get(f),status:this.get(l),directories:this.get(c),fullscreen:this.get(h),dependent:this.get(p)}},readOnly:!0},width:{value:600},height:{value:450},menubar:{value:!1},location:{value:!1},scrollbars:{value:!0},resizable:{value:!0},toolbar:{value:!0},status:{value:!0},directories:{value:!1},fullscreen:{value:!1},dependent:{value:!0}}}),M.filter_glossary=M.filter_glossary||{},M.filter_glossary.init_filter_autolinking=function(e){return new d(e)}},"@VERSION@",{requires:["base","node","io-base","json-parse","event-delegate","overlay","moodle-core-event","moodle-core-notification-alert","moodle-core-notification-exception","moodle-core-notification-ajaxexception"]});
|
||||
YUI.add("moodle-filter_glossary-autolinker",function(e,t){var n="Glossary filter autolinker",r="width",i="height",s="menubar",o="location",u="scrollbars",a="resizable",f="toolbar",l="status",c="directories",h="fullscreen",p="dependent",d;d=function(){d.superclass.constructor.apply(this,arguments)},e.extend(d,e.Base,{overlay:null,alertpanels:{},initializer:function(){var t=this;require(["core/event"],function(n){e.delegate("click",function(r){r.preventDefault();var i="",s=e.Node.create('<div id="glossaryfilteroverlayprogress"><img src="'+M.cfg.loadingicon+'" class="spinner" />'+"</div>"),o=new e.Overlay({headerContent:i,bodyContent:s}),u,a;t.overlay=o,o.render(e.one(document.body)),u=this.getAttribute("href").replace("showentry.php","showentry_ajax.php"),a={method:"get",context:t,on:{success:function(e,t){this.display_callback(t.responseText,n)},failure:function(e,t){var n=t.statusText;M.cfg.developerdebug&&(t.statusText+=" ("+u+")"),new M.core.exception({message:n})}}},e.io(u,a)},e.one(document.body),"a.glossary.autolink.concept")})},display_callback:function(t,n){var r,i,s,o,u,a,f=this;try{r=e.JSON.parse(t);if(r.success){this.overlay.hide();for(i in r.entries)u=r.entries[i].definition+r.entries[i].attachments,s=new M.core.alert({title:r.entries[i].concept,draggable:!0,message:u,modal:!1,yesLabel:M.util.get_string("ok","moodle")}),n.notifyFilterContentUpdated(s.get("boundingBox").getDOMNode()),e.Node.one("#id_yuialertconfirm-"+s.get("COUNT")).focus(),o="#moodle-dialogue-"+s.get("COUNT"),s.on("complete",this._deletealertpanel(f.alertpanels,o)),e.Object.isEmpty(this.alertpanels)||(a=this._getLatestWindowPosition(),e.Node.one(o).setXY([a[0]+10,a[1]+10])),this.alertpanels[o]=e.Node.one(o).getXY();return!0}r.error&&new M.core.ajaxException(r)}catch(l){new M.core.exception(l)}return!1},_getLatestWindowPosition:function(){var t=[0,0];return e.Object.each(this.alertpanels,function(e){e[0]>t[0]&&(t=e)}),t},_deletealertpanel:function(e,t){delete e[t]}},{NAME:n,ATTRS:{url:{validator:e.Lang.isString,value:M.cfg.wwwroot+"/mod/glossary/showentry.php"},name:{validator:e.Lang.isString,value:"glossaryconcept"},options:{getter:function(){return{width:this.get(r),height:this.get(i),menubar:this.get(s),location:this.get(o),scrollbars:this.get(u),resizable:this.get(a),toolbar:this.get(f),status:this.get(l),directories:this.get(c),fullscreen:this.get(h),dependent:this.get(p)}},readOnly:!0},width:{value:600},height:{value:450},menubar:{value:!1},location:{value:!1},scrollbars:{value:!0},resizable:{value:!0},toolbar:{value:!0},status:{value:!0},directories:{value:!1},fullscreen:{value:!1},dependent:{value:!0}}}),M.filter_glossary=M.filter_glossary||{},M.filter_glossary.init_filter_autolinking=function(e){return new d(e)}},"@VERSION@",{requires:["base","node","io-base","json-parse","event-delegate","overlay","moodle-core-event","moodle-core-notification-alert","moodle-core-notification-exception","moodle-core-notification-ajaxexception"]});
|
||||
|
|
|
|||
|
|
@ -22,46 +22,53 @@ Y.extend(AUTOLINKER, Y.Base, {
|
|||
alertpanels: {},
|
||||
initializer : function() {
|
||||
var self = this;
|
||||
Y.delegate('click', function(e){
|
||||
e.preventDefault();
|
||||
require(['core/event'], function(event) {
|
||||
Y.delegate('click', function(e){
|
||||
e.preventDefault();
|
||||
|
||||
//display a progress indicator
|
||||
var title = '',
|
||||
content = Y.Node.create('<div id="glossaryfilteroverlayprogress">' +
|
||||
'<img src="' + M.cfg.loadingicon + '" class="spinner" />' +
|
||||
'</div>'),
|
||||
o = new Y.Overlay({
|
||||
headerContent : title,
|
||||
bodyContent : content
|
||||
}),
|
||||
fullurl,
|
||||
cfg;
|
||||
self.overlay = o;
|
||||
o.render(Y.one(document.body));
|
||||
//display a progress indicator
|
||||
var title = '',
|
||||
content = Y.Node.create('<div id="glossaryfilteroverlayprogress">' +
|
||||
'<img src="' + M.cfg.loadingicon + '" class="spinner" />' +
|
||||
'</div>'),
|
||||
o = new Y.Overlay({
|
||||
headerContent : title,
|
||||
bodyContent : content
|
||||
}),
|
||||
fullurl,
|
||||
cfg;
|
||||
self.overlay = o;
|
||||
o.render(Y.one(document.body));
|
||||
|
||||
//Switch over to the ajax url and fetch the glossary item
|
||||
fullurl = this.getAttribute('href').replace('showentry.php','showentry_ajax.php');
|
||||
cfg = {
|
||||
method: 'get',
|
||||
context : self,
|
||||
on: {
|
||||
success: function(id, o) {
|
||||
this.display_callback(o.responseText);
|
||||
},
|
||||
failure: function(id, o) {
|
||||
var debuginfo = o.statusText;
|
||||
if (M.cfg.developerdebug) {
|
||||
o.statusText += ' (' + fullurl + ')';
|
||||
//Switch over to the ajax url and fetch the glossary item
|
||||
fullurl = this.getAttribute('href').replace('showentry.php','showentry_ajax.php');
|
||||
cfg = {
|
||||
method: 'get',
|
||||
context : self,
|
||||
on: {
|
||||
success: function(id, o) {
|
||||
this.display_callback(o.responseText, event);
|
||||
},
|
||||
failure: function(id, o) {
|
||||
var debuginfo = o.statusText;
|
||||
if (M.cfg.developerdebug) {
|
||||
o.statusText += ' (' + fullurl + ')';
|
||||
}
|
||||
new M.core.exception({ message: debuginfo });
|
||||
}
|
||||
this.display_callback('bodyContent',debuginfo);
|
||||
}
|
||||
}
|
||||
};
|
||||
Y.io(fullurl, cfg);
|
||||
};
|
||||
Y.io(fullurl, cfg);
|
||||
|
||||
}, Y.one(document.body), 'a.glossary.autolink.concept');
|
||||
}, Y.one(document.body), 'a.glossary.autolink.concept');
|
||||
});
|
||||
},
|
||||
display_callback : function(content) {
|
||||
/**
|
||||
* @method display_callback
|
||||
* @param {String} content - Content to display
|
||||
* @param {Object} event The amd event module used to fire events for jquery and yui.
|
||||
*/
|
||||
display_callback : function(content, event) {
|
||||
var data,
|
||||
key,
|
||||
alertpanel,
|
||||
|
|
@ -78,7 +85,8 @@ Y.extend(AUTOLINKER, Y.Base, {
|
|||
definition = data.entries[key].definition + data.entries[key].attachments;
|
||||
alertpanel = new M.core.alert({title:data.entries[key].concept, draggable: true,
|
||||
message:definition, modal:false, yesLabel: M.util.get_string('ok', 'moodle')});
|
||||
Y.fire(M.core.event.FILTER_CONTENT_UPDATED, {nodes: (new Y.NodeList(alertpanel.get('boundingBox')))});
|
||||
// Notify the filters about the modified nodes.
|
||||
event.notifyFilterContentUpdated(alertpanel.get('boundingBox').getDOMNode());
|
||||
Y.Node.one('#id_yuialertconfirm-' + alertpanel.get('COUNT')).focus();
|
||||
|
||||
// Register alertpanel for stacking.
|
||||
|
|
|
|||
|
|
@ -20,46 +20,53 @@ Y.extend(AUTOLINKER, Y.Base, {
|
|||
alertpanels: {},
|
||||
initializer : function() {
|
||||
var self = this;
|
||||
Y.delegate('click', function(e){
|
||||
e.preventDefault();
|
||||
require(['core/event'], function(event) {
|
||||
Y.delegate('click', function(e){
|
||||
e.preventDefault();
|
||||
|
||||
//display a progress indicator
|
||||
var title = '',
|
||||
content = Y.Node.create('<div id="glossaryfilteroverlayprogress">' +
|
||||
'<img src="' + M.cfg.loadingicon + '" class="spinner" />' +
|
||||
'</div>'),
|
||||
o = new Y.Overlay({
|
||||
headerContent : title,
|
||||
bodyContent : content
|
||||
}),
|
||||
fullurl,
|
||||
cfg;
|
||||
self.overlay = o;
|
||||
o.render(Y.one(document.body));
|
||||
//display a progress indicator
|
||||
var title = '',
|
||||
content = Y.Node.create('<div id="glossaryfilteroverlayprogress">' +
|
||||
'<img src="' + M.cfg.loadingicon + '" class="spinner" />' +
|
||||
'</div>'),
|
||||
o = new Y.Overlay({
|
||||
headerContent : title,
|
||||
bodyContent : content
|
||||
}),
|
||||
fullurl,
|
||||
cfg;
|
||||
self.overlay = o;
|
||||
o.render(Y.one(document.body));
|
||||
|
||||
//Switch over to the ajax url and fetch the glossary item
|
||||
fullurl = this.getAttribute('href').replace('showentry.php','showentry_ajax.php');
|
||||
cfg = {
|
||||
method: 'get',
|
||||
context : self,
|
||||
on: {
|
||||
success: function(id, o) {
|
||||
this.display_callback(o.responseText);
|
||||
},
|
||||
failure: function(id, o) {
|
||||
var debuginfo = o.statusText;
|
||||
if (M.cfg.developerdebug) {
|
||||
o.statusText += ' (' + fullurl + ')';
|
||||
//Switch over to the ajax url and fetch the glossary item
|
||||
fullurl = this.getAttribute('href').replace('showentry.php','showentry_ajax.php');
|
||||
cfg = {
|
||||
method: 'get',
|
||||
context : self,
|
||||
on: {
|
||||
success: function(id, o) {
|
||||
this.display_callback(o.responseText, event);
|
||||
},
|
||||
failure: function(id, o) {
|
||||
var debuginfo = o.statusText;
|
||||
if (M.cfg.developerdebug) {
|
||||
o.statusText += ' (' + fullurl + ')';
|
||||
}
|
||||
new M.core.exception({ message: debuginfo });
|
||||
}
|
||||
this.display_callback('bodyContent',debuginfo);
|
||||
}
|
||||
}
|
||||
};
|
||||
Y.io(fullurl, cfg);
|
||||
};
|
||||
Y.io(fullurl, cfg);
|
||||
|
||||
}, Y.one(document.body), 'a.glossary.autolink.concept');
|
||||
}, Y.one(document.body), 'a.glossary.autolink.concept');
|
||||
});
|
||||
},
|
||||
display_callback : function(content) {
|
||||
/**
|
||||
* @method display_callback
|
||||
* @param {String} content - Content to display
|
||||
* @param {Object} event The amd event module used to fire events for jquery and yui.
|
||||
*/
|
||||
display_callback : function(content, event) {
|
||||
var data,
|
||||
key,
|
||||
alertpanel,
|
||||
|
|
@ -76,7 +83,8 @@ Y.extend(AUTOLINKER, Y.Base, {
|
|||
definition = data.entries[key].definition + data.entries[key].attachments;
|
||||
alertpanel = new M.core.alert({title:data.entries[key].concept, draggable: true,
|
||||
message:definition, modal:false, yesLabel: M.util.get_string('ok', 'moodle')});
|
||||
Y.fire(M.core.event.FILTER_CONTENT_UPDATED, {nodes: (new Y.NodeList(alertpanel.get('boundingBox')))});
|
||||
// Notify the filters about the modified nodes.
|
||||
event.notifyFilterContentUpdated(alertpanel.get('boundingBox').getDOMNode());
|
||||
Y.Node.one('#id_yuialertconfirm-' + alertpanel.get('COUNT')).focus();
|
||||
|
||||
// Register alertpanel for stacking.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue