|
|
| Line 1: |
Line 1: |
| == Javascript Custom Modal Window ==
| | {{obsolete}} |
|
| |
|
| 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.
| | This page has been removed because it contained inaccurate out of date information. To see the original text of this page check the history. |
| | |
| 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 work with or without JavaScript enabled.
| |
| | |
| The view PHP page
| |
| | |
| <code php>
| |
| //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 '<p id="feedback_text"> </p>';
| |
|
| |
| echo html_writer::link($your_link, 'Link text');
| |
| | |
| | |
| </code>
| |
| | |
| The form PHP page.
| |
| | |
| I haven't shown the form class, it will be a standard class extending moodleform
| |
| | |
| <code php>
| |
| | |
| //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();
| |
| }
| |
| </code>
| |
| | |
| The JavaScript:
| |
| | |
| <code php>
| |
| //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);
| |
| | |
| | |
| });
| |
| </code>
| |
| | |
| The custom JavaScript class which will create the popup
| |
| | |
| <code php>
| |
| 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);
| |
| </code>
| |
