Javascript Custom Modal Window
Javascript Custom Modal Window
There are custom popup windows in Moodle and there is M.util.show_confirm_dialog in lib/javascript-static.js if you want to use it.
Sometimes you might to use a custom modal window to do a quick update of a form value to save having to go on to another page. This one allows you to use the TinyMCE editor in a modal popup. Note that the TinyMCE editor seems to be a little buggy in a modal popup so might need further work.
This implementation is fully HIJAX compliant, it should with or without JavaScript enabled.
The view PHP page
//We need the tiny mce lib to get the version
require_once($CFG->libdir . '/editor/tinymce/lib.php');
//YUI 3 at the this time of writing didn't have modals that actually worked
$PAGE->requires->yui2_lib('container');
//Your js file
$PAGE->requires->js('your_js_file.js');
//include the tiny mce editor so that the view page can load a form with the editor in it.
$tiny_mce = new tinymce_texteditor();
$PAGE->requires->js('/lib/editor/tinymce/tiny_mce/' . $tiny_mce->version . '/tiny_mce.js');
//The link to the custom form you want to show in a modal pop up.
$your_link = new moodle_url('/custom_form_handler.php',
array('id' => $id),
array('class'=>'pop_up_selector_link'));
//We need an element on the page which will handle the output from the form.
echo '
';
echo html_writer::link($your_link, 'Link text');
The form PHP page.
I haven't shown the form class, it will be a standard class extending moodleform
//includes
require('../../config.php');
global $CFG, $USER, $DB;
require_once($CFG->libdir . '/adminlib.php');
require_once $CFG->libdir . '/formslib.php';
//usual $PAGE stuff here ....
require_login();
//Note if the $ajax flag isn't set, it will output a normal page
if (!$ajax) {
echo $OUTPUT->header();
}
echo $OUTPUT->heading('Your form heading');
$f = new your_custom_form();
//$f->handle() is a custom update method in your form class
if($f->handle()) {
echo 'Your custom update success message';
}else {
$f->display();
}
//Note if the $ajax flag isn't set, it will output a normal page
if (!$ajax) {
echo $OUTPUT->footer();
}
The JavaScript:
//event handlers
YUI().use('node-base', function(Y) {
function init() {
//We need to create a hidden div to act as the container for the modal popup
var yui_act_sel_dialog = Y.one('#yui_act_sel_dialog');
if (!yui_act_sel_dialog) {
var el = document.createElement('div');
el.id = 'yui_act_sel_dialog';
el.style = 'display:none;';
document.getElementsByTagName('body')[0].appendChild(el);
}
//links which have the pop_up_selector_link class will be turned into modal form windows
Y.all(".pop_up_selector_link").on('click', function(e) {
var a = new com.uol.PopupHandler(e.currentTarget.get('href'), false);
a.ajax();
//e.stopPropagation works only in Firefox,Safari etc, not ie.
if (e.preventDefault) {
e.preventDefault();
}
return false;
});
//links which have the pop_up_selector_link_cancel_only class will be turned into modal display only windows
Y.all(".pop_up_selector_link_cancel_only").on('click', function(e) {
var a = new com.uol.PopupHandler(e.currentTarget.get('href'), true);
a.ajax();
//e.stopPropagation works only in Firefox,Safari etc, not ie.
if (e.preventDefault) {
e.preventDefault();
}
return false;
});
}
Y.on("domready", init);
});
The custom JavaScript class which will create the popup
if (typeof com == 'undefined') {
com = {};
}
if (typeof com.uol == 'undefined') {
com.uol = {};
}
(function() {
/**
* Constructor for the PopupHandler class
* @param url
* @param cancel_button_only
* @param width
*/
this.PopupHandler = function(url, cancel_button_only, width) {
this.url = url;
//add the ajax flag into the url
this.url += '&ajax=1';
this.cancel_button_only = cancel_button_only;
this.width = width;
if (this.width == null) {
this.width = 650;
}
this.tiny_mce = false;
},
/**
* We need to set up a tiny mce instance if the form has a rich text element on it
*/
this.PopupHandler.prototype.html_editor = function() {
if (this.tiny_mce) {
return;
}
this.tiny_mce = true;
tinyMCE.init({
mode : "textareas",
theme : "advanced",
skin : "o2k7",
"width": 300,
skin_variant : "silver",
plugins : "advimage,safari,table,style,layer,advhr,advlink,emotions,inlinepopups,searchreplace,paste,directionality,fullscreen,moodlenolink,nonbreaking,contextmenu,insertdatetime,save,iespell,preview,print,noneditable,visualchars,xhtmlxtras,template,pagebreak,spellchecker,dragmath,moodlemedia",
theme_advanced_buttons1 : "fontselect,fontsizeselect,formatselect,|,undo,redo,|,search,replace,|,fullscreen",
theme_advanced_buttons2 : "bold,italic,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,|,cleanup,removeformat,pastetext,pasteword,|,forecolor,backcolor,|,ltr,rtl",
theme_advanced_buttons3 : "bullist,numlist,outdent,indent,|,link,unlink,moodlenolink,|,image,moodlemedia,dragmath,nonbreaking,charmap,table,|,code,spellchecker,|,anchor",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_fonts : "Trebuchet=Trebuchet MS,Verdana,Arial,Helvetica,sans-serif;Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,times new roman,times,serif;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times,serif;Verdana=verdana,arial,helvetica,sans-serif;Impact=impact;Wingdings=wingdings",
relative_urls : "false",
apply_source_formatting : "true",
remove_script_host : "false",
entity_encoding : "raw",
theme_advanced_resize_horizontal : "true"
});
};
/**
* Method to call load the form
*/
this.PopupHandler.prototype.ajax = function() {
//Assignment call to solve the scope problem in ajax_callback
this.ajax_callback.argument[0] = this.cancel_button_only;
this.ajax_callback.argument[1] = this.width;
this.ajax_callback.argument[2] = this.html_editor;
//make the ajax call
YAHOO.util.Connect.asyncRequest('GET', this.url, this.ajax_callback, null);
},
this.PopupHandler.prototype.ajax_callback = {
success: function(e) {
document.getElementById('yui_act_sel_dialog').innerHTML = e.responseText;
var html = e.argument[2];
html();
var activity_dialog = new YAHOO.widget.Dialog('yui_act_sel_dialog', {
modal: true,
width: e.argument[1] + 'px',
top:'200px',
iframe: false,
zIndex: 2000,
fixedcenter: true,
visible: false,
close: true,
constraintoviewport: false,
postmethod: 'async',
hideaftersubmit:true
});
activity_dialog.cancel_button_only = this.cancel_button_only;
var onSuccess = function(o) {
document.getElementById('feedback_text').innerHTML = o.responseText;
window.setTimeout("window.location.reload(true);", 2000);
};
var onFailure = function(o) {
alert("Your submission failed. Status: " + o.status);
};
activity_dialog.callback.success = onSuccess;
activity_dialog.callback.failure = onFailure;
var handleCancel = function() {
this.cancel();
};
//add a submit button if required
if (!e.argument[0]) {
var handleSubmit = function() {
this.submit();
};
}
var myButtons = [];
if (!e.argument[0]) {
myButtons.push({ text: "Submit", handler: handleSubmit, isDefault: true });
}
myButtons.push({ text: "Cancel", handler: handleCancel });
activity_dialog.cfg.queueProperty("buttons", myButtons);
activity_dialog.render();
activity_dialog.show();
}
,
failure: function(e) {
},
argument: [this.cancel_button_only]
}
}).call(com.uol);
