Merge "Bug 1644675 & 1650414 Eliminate MochiKit from Mahara JS files: PieForms"

htdocs/artefact/file/js/filebrowser.js

@@ -44,7 +44,6 @@ var FileBrowser = (function($) {
     };
 
     this.submitform = function () {
-        signal(self.form, 'onsubmit'); // MochiKit to be removed after cleanup
         $(self.form).triggerHandler('submit');
         self.form.submit();
     };

htdocs/lib/pieforms/static/core/pieforms.js

@@ -30,281 +30,281 @@ window.pieformHandlers = {};
  * Handles things that work the same across all pieforms, such as plugin
  * management and events
  */
-function PieformManager() {//{{{
-    var self = this;
-
-    this.init = function() {//{{{
-        self.connect('onload', null, self.setFocus);
-        self.signal('onload', null);
-    }//}}}
-
-    /**
-     * When called, ensures the focus is set correctly for all pieforms on the
-     * page
-     */
-    this.setFocus = function() {//{{{
-        var check = getElementsByTagAndClassName('form', 'pieform');
-        var formsWithError = filter(function(i) { return hasElementClass(i, 'error'); }, check);
-        if (formsWithError.length > 0) {
-            check = formsWithError;
-        }
-        forEach(check, function(form) {
-            var element = getFirstElementByTagAndClassName(null, 'autofocus', form);
-            if (element && (typeof(element.focus) == 'function' || (element.focus && element.focus.call))) {
-                var type = getNodeAttribute(element, 'type');
-                if (type && type == 'hidden') {
-                    return;
-                }
-                try { // If element is invisible, IE will throw an error
-                    element.focus();
-                    if (hasElementClass(element, 'autoselect')
-                        && (typeof(element.select) == 'function' || (element.focus && element.select.call))) {
-                        element.select();
+var PieformManager = (function($) {
+    return function() {
+        var self = this;
+
+        this.init = function() {
+            self.connect('onload', null, self.setFocus);
+            self.signal('onload', null);
+        };
+
+        /**
+         * When called, ensures the focus is set correctly for all pieforms on the
+         * page
+         */
+        this.setFocus = function() {
+            var check = $('form.pieform');
+            var formsWithError = check.filter(function() { return $(this).hasClass('error'); });
+            if (formsWithError.length > 0) {
+                check = formsWithError;
+            }
+            check.each(function() {
+                var element = $(this).find('.autofocus')[0];
+                if (element && (typeof(element.focus) == 'function' || (element.focus && element.focus.call))) {
+                    var type = $(element).prop('type');
+                    if (type && type == 'hidden') {
+                        return;
                     }
+                    try { // If element is invisible, IE will throw an error
+                        element.focus();
+                        if ($(element).hasClass('autoselect')
+                            && (typeof(element.select) == 'function' || (element.focus && element.select.call))) {
+                            element.select();
+                        }
+                    }
+                    catch (e) {}
+                    return false;
                 }
-                catch (e) {}
-                throw MochiKit.Iter.StopIteration;
+            });
+        };
+
+        /**
+         * Loads a javascript plugin file
+         */
+        this.loadPlugin = function(type, name) {
+            if (type != 'element' && type != 'renderer' && type != 'rule') {
+                throw 'Plugin type ' + type + ' is not valid';
+            }
+            if (typeof(self.loadCache[type][name]) != 'undefined') {
+                return;
             }
-        });
-    }//}}}
-
-    /**
-     * Loads a javascript plugin file
-     */
-    this.loadPlugin = function(type, name) {//{{{
-        if (type != 'element' && type != 'renderer' && type != 'rule') {
-            throw 'Plugin type ' + type + ' is not valid';
-        }
-        if (typeof(self.loadCache[type][name]) != 'undefined') {
-            return;
-        }
 
-        var script = createDOM('script', {
-            'type': 'application/javascript',
-            'src' : self.pieformPath + type + 's/' + name + '.js'
-        });
-
-        appendChildNodes(self.head, script);
-        self.loadCache[type][name] = 1;
-    }//}}}
-
-    /**
-     * Registers an observer for a given event type
-     */
-    this.connect = function(slot, form, callback) {//{{{
-        if (typeof(self.observers[slot]) == 'undefined') {
-            throw 'Slot ' + slot + ' does not exist';
-        }
-        self.observers[slot].push({'form': form, 'callback': callback});
-    }//}}}
+            var script = $('<script>', {
+                'type': 'application/javascript',
+                'src' : self.pieformPath + type + 's/' + name + '.js'
+            });
 
-    this.signal = function(slot, form) {//{{{
-        forEach(self.observers[slot], function(observer) {
-            if (form == null || observer.form == null || form == observer['form']) {
-                observer.callback(form);
+            script.append(self.head);
+            self.loadCache[type][name] = 1;
+        };
+
+        /**
+         * Registers an observer for a given event type
+         */
+        this.connect = function(slot, form, callback) {
+            if (typeof(self.observers[slot]) == 'undefined') {
+                throw 'Slot ' + slot + ' does not exist';
             }
-        });
-    }//}}}
+            self.observers[slot].push({'form': form, 'callback': callback});
+        };
+
+        this.signal = function(slot, form) {
+            $.each(self.observers[slot], function(id, observer) {
+                if (form == null || observer.form == null || form == observer['form']) {
+                    observer.callback(form);
+                }
+            });
+        };
 
-    this.head = getFirstElementByTagAndClassName('head');
+        this.head = $('head')[0];
 
-    if (typeof(pieformPath) == 'string') {
-        this.pieformPath = pieformPath;
-        if (pieformPath.substr(pieformPath.length - 1, 1) != '/') {
-            this.pieformPath += '/';
+        if (typeof(pieformPath) == 'string') {
+            this.pieformPath = pieformPath;
+            if (pieformPath.substr(pieformPath.length - 1, 1) != '/') {
+                this.pieformPath += '/';
+            }
+        }
+        else {
+            this.pieformPath = '';
         }
-    }
-    else {
-        this.pieformPath = '';
-    }
 
-    this.loadCache = {'element': {}, 'renderer': {}, 'rule': {}};
+        this.loadCache = {'element': {}, 'renderer': {}, 'rule': {}};
 
-    this.observers = {
-        'onload'  : [],  // when elements are loaded
-        'onsubmit': [],  // when a form is submitted
-        'onreply' : []   // when a response is received
-    };
+        this.observers = {
+            'onload'  : [],  // when elements are loaded
+            'onsubmit': [],  // when a form is submitted
+            'onreply' : []   // when a response is received
+        };
 
-    addLoadEvent(self.init);
-}//}}}
+        $(document).ready(self.init);
+    };
+}(jQuery));
 
 PieformManager = new PieformManager();
-
-
 /**
  * Handles the javascript side of pieforms - submitting the form via a hidden
  * iframe and dealing with the result
  */
-function Pieform(data) {//{{{
-    var self = this;
+var Pieform = (function($) {
+    return function(data) {
+        var self = this;
 
-    this.init = function() {//{{{
-        if (self.data.checkDirtyChange) {
-            formchangemanager.add(self.data.name);
-        }
-        connect(self.data.name, 'onsubmit', self.processForm);
-
-        self.connectSubmitButtons();
+        this.init = function() {
+            if (self.data.checkDirtyChange) {
+                formchangemanager.add(self.data.name);
+            }
+            $('#' + self.data.name).on('submit', self.processForm);
 
-        // Hook for pieform elements that need to execute Javascript
-        // *after* the Pieform has been initialized.
-        jQuery(document).triggerHandler('pieform_postinit', self);
-    }//}}}
+            self.connectSubmitButtons();
 
-    this.processForm = function(e) {//{{{
-        PieformManager.signal('onsubmit', self.data.name);
+            // Hook for pieform elements that need to execute Javascript
+            // *after* the Pieform has been initialized.
+            $(document).triggerHandler('pieform_postinit', self);
+        };
 
-        // Call the presubmit callback, if there is one
-        if (typeof(self.data.preSubmitCallback) == 'string'
-            && self.data.preSubmitCallback != "") {
-            window[self.data.preSubmitCallback]($(self.data.name), self.clickedButton, e);
-        }
+        this.processForm = function(e) {
+            PieformManager.signal('onsubmit', self.data.name);
 
-        // If the form actually isn't a jsform - i.e. only a presubmithandler
-        // was defined - we stop here
-        if (!self.data.jsForm) {
-            return;
-        }
+            // Call the presubmit callback, if there is one
+            if (typeof(self.data.preSubmitCallback) == 'string'
+                && self.data.preSubmitCallback != "") {
+                window[self.data.preSubmitCallback]($('#' + self.data.name)[0], self.clickedButton, e);
+            }
 
-        // Ensure the iframe exists and make sure the form targets it
-        // self.data.newIframes = true;
-        var iframeName = self.setupIframe();
-        $(self.data.name).target = iframeName;
-
-        appendChildNodes(self.data.name,
-            INPUT({
-                'type': 'hidden',
-                'name': 'pieform_jssubmission',
-                'value': 1
-            })
-        );
-
-        window.pieformHandlers[self.data.name] = function(data) {
-            // If canceling the form, redirect away
-            if (data.returnCode == -2) {
-                window.location = data.location;
+            // If the form actually isn't a jsform - i.e. only a presubmithandler
+            // was defined - we stop here
+            if (!self.data.jsForm) {
                 return;
             }
 
-            if (typeof(data.replaceHTML) == 'string') {
-                PieformManager.signal('onreply', self.data.name);
+            // Ensure the iframe exists and make sure the form targets it
+            // self.data.newIframes = true;
+            var iframeName = self.setupIframe();
+            $('#' + self.data.name)[0].target = iframeName;
+
+            $('#' + self.data.name).append($('<input>', {
+                    'type': 'hidden',
+                    'name': 'pieform_jssubmission',
+                    'value': 1
+                }));
+
+            window.pieformHandlers[self.data.name] = function(data) {
+                // If canceling the form, redirect away
+                if (data.returnCode == -2) {
+                    window.location = data.location;
+                    return;
+                }
 
-                var tmp = DIV();
-                tmp.innerHTML = data.replaceHTML;
+                if (typeof(data.replaceHTML) == 'string') {
+                    PieformManager.signal('onreply', self.data.name);
 
-                // Work out whether the new form tag has the error class on it, for
-                // updating the form in the document
-                if (hasElementClass(tmp.childNodes[0], 'error')) {
-                    addElementClass(self.data.name, 'error');
-                }
-                else {
-                    removeElementClass(self.data.name, 'error');
-                }
-                
-                // The first child node is the form tag. We replace the children of
-                // the current form tag with the new children. This prevents
-                // javascript references being lost
-                replaceChildNodes($(self.data.name), tmp.childNodes[0].childNodes);
-
-                // data.replaceHTML may contain inline javascript code which need to be evaluated
-                // Append any inline js code to data.javascript and evaluate them
-                var temp = jQuery('<div>').append(data.replaceHTML);
-                data.javascript = '';
-                temp.find('*').each(function() {
-                    if (jQuery(this).prop('nodeName') === 'SCRIPT' && jQuery(this).prop('src') === '') {
-                        data.javascript += jQuery(this).prop('innerHTML');
+                    var tmp = $('<div>');
+                    tmp.html(data.replaceHTML);
+
+                    // Work out whether the new form tag has the error class on it, for
+                    // updating the form in the document
+                    if (tmp.children().first().hasClass('error')) {
+                        $('#' + self.data.name).addClass('error');
+                    }
+                    else {
+                      $('#' + self.data.name).removeClass('error');
                     }
-                });
-                eval(data.javascript);
 
-                self.connectSubmitButtons();
-                self.clickedButton = null;
-                if (self.data.checkDirtyChange) {
-                    formchangemanager.rebindForm(self.data.name);
+                    // The first child node is the form tag. We replace the children of
+                    // the current form tag with the new children. This prevents
+                    // javascript references being lost
+                    $('#' + self.data.name).empty().append(tmp.children().first().children());
+
+                    // data.replaceHTML may contain inline javascript code which need to be evaluated
+                    // Append any inline js code to data.javascript and evaluate them
+                    var temp = $('<div>').append(data.replaceHTML);
+                    data.javascript = '';
+                    temp.find('*').each(function() {
+                        if ($(this).prop('nodeName') === 'SCRIPT' && $(this).prop('src') === '') {
+                            data.javascript += $(this).prop('innerHTML');
+                        }
+                    });
+                    eval(data.javascript);
+
+                    self.connectSubmitButtons();
+                    self.clickedButton = null;
+                    if (self.data.checkDirtyChange) {
+                        formchangemanager.rebindForm(self.data.name);
+                    }
+                    PieformManager.signal('onload', self.data.name);
                 }
-                PieformManager.signal('onload', self.data.name);
-            }
 
-            if (data.returnCode == 0) {
-                // Call the defined success callback, if there is one
-                if (typeof(self.data.jsSuccessCallback) == 'string'
-                    && self.data.jsSuccessCallback != "") {
-                    window[self.data.jsSuccessCallback]($(self.data.name), data);
+                if (data.returnCode == 0) {
+                    // Call the defined success callback, if there is one
+                    if (typeof(self.data.jsSuccessCallback) == 'string'
+                        && self.data.jsSuccessCallback != "") {
+                        window[self.data.jsSuccessCallback]($('#' + self.data.name)[0], data);
+                    }
+                    else {
+                        // TODO: work out what I'm going to do here...
+                        if (typeof(data.message) == 'string' && data.message != '') {
+                            alert(data.message);
+                        }
+                    }
                 }
-                else {
-                    // TODO: work out what I'm going to do here...
-                    if (typeof(data.message) == 'string' && data.message != '') {
-                        alert(data.message);
+                else if (data.returnCode == -1) {
+                    if (typeof(self.data.jsErrorCallback) == 'string'
+                        && self.data.jsErrorCallback != '') {
+                        window[self.data.jsErrorCallback]($('#' + self.data.name)[0], data);
                     }
                 }
+                else if (typeof(self.data.globalJsErrorCallback) == 'string'
+                    && self.data.globalJsErrorCallback != '') {
+                    window[self.data.globalJsErrorCallback]($('#' + self.data.name)[0], data);
+                }
+                else {
+                    alert('Developer: got error code ' + data.returnCode
+                    + ', either fix your form to not use this code or define '
+                    + 'a global js error handler');
+                }
+
+                // The post submit callback (for if the form succeeds or fails, but
+                // not for if it cancels)
+                if (typeof(self.data.postSubmitCallback) == 'string'
+                    && self.data.postSubmitCallback != '') {
+                    window[self.data.postSubmitCallback]($('#' + self.data.name)[0], self.clickedButton, e);
+                }
             }
-            else if (data.returnCode == -1) {
-                if (typeof(self.data.jsErrorCallback) == 'string'
-                    && self.data.jsErrorCallback != '') {
-                    window[self.data.jsErrorCallback]($(self.data.name), data);
+        };
+
+        this.setupIframe = function() {
+            var iframeName = self.data.name + '_iframe';
+            if (self.data.newIframeOnSubmit) {
+                if (!self.data.nextIframe) {
+                    self.data.nextIframe = 0;
                 }
+                iframeName += '_' + self.data.nextIframe;
+                self.data.nextIframe++;
             }
-            else if (typeof(self.data.globalJsErrorCallback) == 'string'
-                && self.data.globalJsErrorCallback != '') {
-                window[self.data.globalJsErrorCallback]($(self.data.name), data);
+            if ($('#' + iframeName).length) {
+                self.iframe = $('#' + iframeName)[0];
             }
             else {
-                alert('Developer: got error code ' + data.returnCode
-                + ', either fix your form to not use this code or define '
-                + 'a global js error handler');
-            }
-
-            // The post submit callback (for if the form succeeds or fails, but
-            // not for if it cancels)
-            if (typeof(self.data.postSubmitCallback) == 'string'
-                && self.data.postSubmitCallback != '') {
-                window[self.data.postSubmitCallback]($(self.data.name), self.clickedButton, e);
-            }
-        }
-    }//}}}
-
-    this.setupIframe = function() {//{{{
-        var iframeName = self.data.name + '_iframe';
-        if (self.data.newIframeOnSubmit) {
-            if (!self.data.nextIframe) {
-                self.data.nextIframe = 0;
+                self.iframe = $('<iframe>', {
+                    'name': iframeName,
+                    'id'  : iframeName,
+                    'style': 'position: absolute; visibility: hidden; height: 0px; width: 0px;'
+                })[0];
+                $(self.iframe).insertAfter($('#' + self.data.name));
             }
-            iframeName += '_' + self.data.nextIframe;
-            self.data.nextIframe++;
-        }
-        if ($(iframeName)) {
-            self.iframe = $(iframeName);
-        }
-        else {
-            self.iframe = createDOM('iframe', {
-                'name': iframeName,
-                'id'  : iframeName,
-                'style': 'position: absolute; visibility: hidden; height: 0px; width: 0px;'
+            return iframeName;
+        };
+
+        this.connectSubmitButtons = function() {
+            $.each(self.data.submitButtons, function(id, buttonName) {
+                var btn = $('#' + self.data.name + '_' + buttonName)[0];
+                if (btn) {
+                    $(btn).on('click', function() { self.clickedButton = this; });
+                }
             });
-            insertSiblingNodesAfter(self.data.name, self.iframe);
-        }
-        return iframeName;
-    }//}}}
-
-    this.connectSubmitButtons = function() {//{{{
-        forEach(self.data.submitButtons, function(buttonName) {
-            var btn = $(self.data.name + '_' + buttonName);
-            if (btn) {
-                connect(btn, 'onclick', function() { self.clickedButton = this; });
-            }
-        });
-    }//}}}
+        };
 
-    // A reference to the iframe that submissions are made through
-    this.iframe = null;
+        // A reference to the iframe that submissions are made through
+        this.iframe = null;
 
-    // The button that was clicked to trigger the form submission
-    this.clickedButton = null;
+        // The button that was clicked to trigger the form submission
+        this.clickedButton = null;
 
-    // Form configuration data passed from PHP
-    this.data = data;
+        // Form configuration data passed from PHP
+        this.data = data;
 
-    addLoadEvent(self.init);
+        $(document).ready(self.init);
 
-}//}}}
+    };
+}(jQuery));