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 work 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);