Converted existing JS to a YUI module

Also fixed errors reported by JSLint.

rearrange.php

@@ -47,12 +47,10 @@ $pageurl = new moodle_url('/mod/customcert/rearrange.php', array('pid' => $pid))
 \mod_customcert\page_helper::page_setup($pageurl, $template->get_context(), get_string('rearrangeelements', 'customcert'));
 
 // Include the JS we need.
-$module = array(
-    'name' => 'mod_customcert',
-    'fullpath' => '/mod/customcert/yui/src/rearrange.js',
-    'requires' => array('dd-delegate', 'dd-drag')
-);
-$PAGE->requires->js_init_call('M.mod_customcert.rearrange.init', array($template->get_id(), $page, $elements), false, $module);
+$PAGE->requires->yui_module('moodle-mod_customcert-rearrange', 'M.mod_customcert.rearrange.init',
+    array($template->get_id(),
+          $page,
+          $elements));
 
 // Create the buttons to save the position of the elements.
 $html = html_writer::start_tag('div', array('class' => 'buttons'));

yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-debug.js

@@ -0,0 +1,306 @@
+YUI.add('moodle-mod_customcert-rearrange', function (Y, NAME) {
+
+/**
+ * Rearrange elements in the custom certificate
+ *
+ * @class M.mod_customcert.rearrange.rearrange
+ * @constructor
+ */
+var Rearrange = function() {
+    Rearrange.superclass.constructor.apply(this, [arguments]);
+};
+Y.extend(Rearrange, Y.Base, {
+
+    /**
+     * The template id.
+     */
+    templateid : 0,
+
+    /**
+     * The customcert page we are displaying.
+     */
+    page : [],
+
+    /**
+     * The custom certificate elements to display.
+     */
+    elements : [],
+
+    /**
+     * Store the X coordinates of the top left of the pdf div.
+     */
+    pdfx : 0,
+
+    /**
+     * Store the Y coordinates of the top left of the pdf div.
+     */
+    pdfy : 0,
+
+    /**
+     * Store the width of the pdf div.
+     */
+    pdfwidth : 0,
+
+    /**
+     * Store the height of the pdf div.
+     */
+    pdfheight : 0,
+
+    /**
+     * Store the location of the element before we move.
+     */
+    elementxy : 0,
+
+    /**
+     * Store the left boundary of the pdf div.
+     */
+    pdfleftboundary : 0,
+
+    /**
+     * Store the right boundary of the pdf div.
+     */
+    pdfrightboundary : 0,
+
+    /**
+     * The number of pixels in a mm.
+     */
+    pixelsinmm : 3.779527559055, // '3.779528'.
+
+    /**
+     * Initialise.
+     *
+     * @param params
+     */
+    initializer : function(params) {
+        // Set the course module id.
+        this.templateid = params[0];
+        // Set the page.
+        this.page = params[1];
+        // Set the elements.
+        this.elements = params[2];
+
+        // Set the PDF dimensions.
+        this.pdfx = Y.one('#pdf').getX();
+        this.pdfy = Y.one('#pdf').getY();
+        this.pdfwidth = parseFloat(Y.one('#pdf').getComputedStyle('width'), 10);
+        this.pdfheight = parseFloat(Y.one('#pdf').getComputedStyle('height'), 10);
+
+        // Set the boundaries.
+        this.pdfleftboundary = this.pdfx;
+        if (this.page.leftmargin) {
+            this.pdfleftboundary += parseInt(this.page.leftmargin * this.pixelsinmm, 10);
+        }
+
+        this.pdfrightboundary = this.pdfx + this.pdfwidth;
+        if (this.page.rightmargin) {
+            this.pdfrightboundary -= parseInt(this.page.rightmargin * this.pixelsinmm, 10);
+        }
+
+        this.set_data();
+        this.set_positions();
+        this.create_events();
+    },
+
+    /**
+     * Sets the additional data for the elements.
+     */
+    set_data : function() {
+        // Go through the elements and set their reference points.
+        for (var key in this.elements) {
+            var element = this.elements[key];
+            Y.one('#element-' + element.id).setData('refpoint', element.refpoint);
+            Y.one('#element-' + element.id).setData('width', element.width);
+        }
+    },
+
+    /**
+     * Sets the current position of the elements.
+     */
+    set_positions : function() {
+        // Go through the elements and set their positions.
+        for (var key in this.elements) {
+            var element = this.elements[key];
+            var posx = this.pdfx + element.posx * this.pixelsinmm;
+            var posy = this.pdfy + element.posy * this.pixelsinmm;
+            var nodewidth = parseFloat(Y.one('#element-' + element.id).getComputedStyle('width'), 10);
+            var maxwidth = element.width * this.pixelsinmm;
+
+            if (maxwidth && (nodewidth > maxwidth)) {
+                nodewidth = maxwidth;
+            }
+            Y.one('#element-' + element.id).setStyle('width', nodewidth + 'px');
+
+            switch (element.refpoint) {
+                case '1':   // Top-center
+                    posx -= nodewidth / 2;
+                    break;
+                case '2':   // Top-right
+                    posx = posx - nodewidth + 2;
+                    break;
+            }
+
+            Y.one('#element-' + element.id).setX(posx);
+            Y.one('#element-' + element.id).setY(posy);
+        }
+    },
+
+    /**
+     * Creates the JS events for changing element positions.
+     */
+    create_events : function() {
+        // Trigger a save event when save button is pushed.
+        Y.one('.savepositionsbtn input[type=submit]').on('click', function(e) {
+            this.save_positions(e);
+        }, this);
+
+        // Trigger a save event when apply button is pushed.
+        Y.one('.applypositionsbtn input[type=submit]').on('click', function(e) {
+            this.save_positions(e);
+            e.preventDefault();
+        }, this);
+
+        // Define the container and the elements that are draggable.
+        var del = new Y.DD.Delegate({
+            container: '#pdf',
+            nodes: '.element'
+        });
+
+        // When we start dragging keep track of it's position as we may set it back.
+        del.on('drag:start', function() {
+            var node = del.get('currentNode');
+            this.elementxy = node.getXY();
+            this.elementwidth = node.getComputedStyle('width');
+        }, this);
+
+        // When we finish the dragging action check that the node is in bounds,
+        // if not, set it back to where it was.
+        del.on('drag:end', function() {
+            var node = del.get('currentNode');
+            if (this.is_out_of_bounds(node)) {
+                node.setXY(this.elementxy);
+                node.setStyle('width', this.elementwidth);
+            }
+        }, this);
+    },
+
+    /**
+     * Returns true if any part of the element is placed outside of the PDF div, false otherwise.
+     *
+     * @param node
+     * @returns {boolean}
+     */
+    is_out_of_bounds : function(node) {
+        // Get the width and height of the node.
+        var nodewidth = parseFloat(node.getComputedStyle('width'), 10);
+        var nodeheight = parseFloat(node.getComputedStyle('height'), 10);
+
+        // Store the positions of each edge of the node.
+        var left = node.getX();
+        var right = left + nodewidth;
+        var top = node.getY();
+        var bottom = top + nodeheight;
+
+        // Check if it is out of bounds horizontally.
+        if ((left < this.pdfleftboundary) || (right > this.pdfrightboundary))  {
+            return true;
+        }
+
+        // Check if it is out of bounds vertically.
+        if ((top < this.pdfy) || (bottom > (this.pdfy + this.pdfheight)))  {
+            return true;
+        }
+
+        return false;
+    },
+
+    /**
+     * Perform an AJAX call and save the positions of the elements.
+     *
+     * @param e
+     */
+    save_positions : function(e) {
+        // The parameters to send the AJAX call.
+        var params = {
+            tid: this.templateid,
+            values: []
+        };
+
+        // Go through the elements and save their positions.
+        for (var key in this.elements) {
+            var element = this.elements[key];
+            var node = Y.one('#element-' + element.id);
+
+            // Get the current X and Y positions for this element.
+            var posx = node.getX() - this.pdfx;
+            var posy = node.getY() - this.pdfy;
+
+            var nodewidth = parseFloat(node.getComputedStyle('width'), 10);
+
+            switch (element.refpoint) {
+                case '1':   // Top-center
+                    posx += nodewidth / 2;
+                    break;
+                case '2':   // Top-right
+                    posx += nodewidth;
+                    break;
+            }
+
+            // Set the parameters to pass to the AJAX request.
+            params.values.push({
+                id: element.id,
+                posx: Math.round(parseFloat(posx / this.pixelsinmm, 10)),
+                posy: Math.round(parseFloat(posy / this.pixelsinmm, 10))
+            });
+        }
+
+        params.values = JSON.stringify(params.values);
+
+        // Save these positions.
+        Y.io(M.cfg.wwwroot + '/mod/customcert/rest.php', {
+            method: 'POST',
+            data: params,
+            on: {
+                failure: function(tid, response) {
+                    this.ajax_failure(response);
+                },
+                success: function() {
+                    var formNode = e.currentTarget.ancestor('form', true);
+                    var baseUrl = formNode.getAttribute('action');
+                    var pageinput = formNode.one('[name=pid]');
+                    if (pageinput) {
+                        var pageid = pageinput.get('value');
+                        window.location = baseUrl + '?pid=' + pageid;
+                    } else {
+                        var templateid = formNode.one('[name=tid]').get('value');
+                        window.location = baseUrl + '?tid=' + templateid;
+                    }
+                }
+            },
+            context: this
+        });
+
+        e.preventDefault();
+    },
+
+    /**
+     * Handles any failures during an AJAX call.
+     *
+     * @param response
+     * @returns {M.core.exception}
+     */
+    ajax_failure : function(response) {
+        var e = {
+            name: response.status + ' ' + response.statusText,
+            message: response.responseText
+        };
+        return new M.core.exception(e);
+    }
+});
+
+M.mod_customcert = M.mod_customcert || {};
+M.mod_customcert.rearrange = M.mod_customcert.rearrange || {};
+M.mod_customcert.rearrange.init = function(templateid, page, elements) {
+    new Rearrange(templateid, page, elements);
+};
+
+}, '@VERSION@', {"requires": ["dd-delegate", "dd-drag"]});

yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-min.js

@@ -0,0 +1 @@
+YUI.add("moodle-mod_customcert-rearrange",function(e,t){var n=function(){n.superclass.constructor.apply(this,[arguments])};e.extend(n,e.Base,{templateid:0,page:[],elements:[],pdfx:0,pdfy:0,pdfwidth:0,pdfheight:0,elementxy:0,pdfleftboundary:0,pdfrightboundary:0,pixelsinmm:3.779527559055,initializer:function(t){this.templateid=t[0],this.page=t[1],this.elements=t[2],this.pdfx=e.one("#pdf").getX(),this.pdfy=e.one("#pdf").getY(),this.pdfwidth=parseFloat(e.one("#pdf").getComputedStyle("width"),10),this.pdfheight=parseFloat(e.one("#pdf").getComputedStyle("height"),10),this.pdfleftboundary=this.pdfx,this.page.leftmargin&&(this.pdfleftboundary+=parseInt(this.page.leftmargin*this.pixelsinmm,10)),this.pdfrightboundary=this.pdfx+this.pdfwidth,this.page.rightmargin&&(this.pdfrightboundary-=parseInt(this.page.rightmargin*this.pixelsinmm,10)),this.set_data(),this.set_positions(),this.create_events()},set_data:function(){for(var t in this.elements){var n=this.elements[t];e.one("#element-"+n.id).setData("refpoint",n.refpoint),e.one("#element-"+n.id).setData("width",n.width)}},set_positions:function(){for(var t in this.elements){var n=this.elements[t],r=this.pdfx+n.posx*this.pixelsinmm,i=this.pdfy+n.posy*this.pixelsinmm,s=parseFloat(e.one("#element-"+n.id).getComputedStyle("width"),10),o=n.width*this.pixelsinmm;o&&s>o&&(s=o),e.one("#element-"+n.id).setStyle("width",s+"px");switch(n.refpoint){case"1":r-=s/2;break;case"2":r=r-s+2}e.one("#element-"+n.id).setX(r),e.one("#element-"+n.id).setY(i)}},create_events:function(){e.one(".savepositionsbtn input[type=submit]").on("click",function(e){this.save_positions(e)},this),e.one(".applypositionsbtn input[type=submit]").on("click",function(e){this.save_positions(e),e.preventDefault()},this);var t=new e.DD.Delegate({container:"#pdf",nodes:".element"});t.on("drag:start",function(){var e=t.get("currentNode");this.elementxy=e.getXY(),this.elementwidth=e.getComputedStyle("width")},this),t.on("drag:end",function(){var e=t.get("currentNode");this.is_out_of_bounds(e)&&(e.setXY(this.elementxy),e.setStyle("width",this.elementwidth))},this)},is_out_of_bounds:function(e){var t=parseFloat(e.getComputedStyle("width"),10),n=parseFloat(e.getComputedStyle("height"),10),r=e.getX(),i=r+t,s=e.getY(),o=s+n;return r<this.pdfleftboundary||i>this.pdfrightboundary?!0:s<this.pdfy||o>this.pdfy+this.pdfheight?!0:!1},save_positions:function(t){var n={tid:this.templateid,values:[]};for(var r in this.elements){var i=this.elements[r],s=e.one("#element-"+i.id),o=s.getX()-this.pdfx,u=s.getY()-this.pdfy,a=parseFloat(s.getComputedStyle("width"),10);switch(i.refpoint){case"1":o+=a/2;break;case"2":o+=a}n.values.push({id:i.id,posx:Math.round(parseFloat(o/this.pixelsinmm,10)),posy:Math.round(parseFloat(u/this.pixelsinmm,10))})}n.values=JSON.stringify(n.values),e.io(M.cfg.wwwroot+"/mod/customcert/rest.php",{method:"POST",data:n,on:{failure:function(e,t){this.ajax_failure(t)},success:function(){var e=t.currentTarget.ancestor("form",!0),n=e.getAttribute("action"),r=e.one("[name=pid]");if(r){var i=r.get("value");window.location=n+"?pid="+i}else{var s=e.one("[name=tid]").get("value");window.location=n+"?tid="+s}}},context:this}),t.preventDefault()},ajax_failure:function(e){var t={name:e.status+" "+e.statusText,message:e.responseText};return new M.core.exception(t)}}),M.mod_customcert=M.mod_customcert||{},M.mod_customcert.rearrange=M.mod_customcert.rearrange||{},M.mod_customcert.rearrange.init=function(e,t,r){new n(e,t,r)}},"@VERSION@",{requires:["dd-delegate","dd-drag"]});

yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange.js

@@ -0,0 +1,306 @@
+YUI.add('moodle-mod_customcert-rearrange', function (Y, NAME) {
+
+/**
+ * Rearrange elements in the custom certificate
+ *
+ * @class M.mod_customcert.rearrange.rearrange
+ * @constructor
+ */
+var Rearrange = function() {
+    Rearrange.superclass.constructor.apply(this, [arguments]);
+};
+Y.extend(Rearrange, Y.Base, {
+
+    /**
+     * The template id.
+     */
+    templateid : 0,
+
+    /**
+     * The customcert page we are displaying.
+     */
+    page : [],
+
+    /**
+     * The custom certificate elements to display.
+     */
+    elements : [],
+
+    /**
+     * Store the X coordinates of the top left of the pdf div.
+     */
+    pdfx : 0,
+
+    /**
+     * Store the Y coordinates of the top left of the pdf div.
+     */
+    pdfy : 0,
+
+    /**
+     * Store the width of the pdf div.
+     */
+    pdfwidth : 0,
+
+    /**
+     * Store the height of the pdf div.
+     */
+    pdfheight : 0,
+
+    /**
+     * Store the location of the element before we move.
+     */
+    elementxy : 0,
+
+    /**
+     * Store the left boundary of the pdf div.
+     */
+    pdfleftboundary : 0,
+
+    /**
+     * Store the right boundary of the pdf div.
+     */
+    pdfrightboundary : 0,
+
+    /**
+     * The number of pixels in a mm.
+     */
+    pixelsinmm : 3.779527559055, // '3.779528'.
+
+    /**
+     * Initialise.
+     *
+     * @param params
+     */
+    initializer : function(params) {
+        // Set the course module id.
+        this.templateid = params[0];
+        // Set the page.
+        this.page = params[1];
+        // Set the elements.
+        this.elements = params[2];
+
+        // Set the PDF dimensions.
+        this.pdfx = Y.one('#pdf').getX();
+        this.pdfy = Y.one('#pdf').getY();
+        this.pdfwidth = parseFloat(Y.one('#pdf').getComputedStyle('width'), 10);
+        this.pdfheight = parseFloat(Y.one('#pdf').getComputedStyle('height'), 10);
+
+        // Set the boundaries.
+        this.pdfleftboundary = this.pdfx;
+        if (this.page.leftmargin) {
+            this.pdfleftboundary += parseInt(this.page.leftmargin * this.pixelsinmm, 10);
+        }
+
+        this.pdfrightboundary = this.pdfx + this.pdfwidth;
+        if (this.page.rightmargin) {
+            this.pdfrightboundary -= parseInt(this.page.rightmargin * this.pixelsinmm, 10);
+        }
+
+        this.set_data();
+        this.set_positions();
+        this.create_events();
+    },
+
+    /**
+     * Sets the additional data for the elements.
+     */
+    set_data : function() {
+        // Go through the elements and set their reference points.
+        for (var key in this.elements) {
+            var element = this.elements[key];
+            Y.one('#element-' + element.id).setData('refpoint', element.refpoint);
+            Y.one('#element-' + element.id).setData('width', element.width);
+        }
+    },
+
+    /**
+     * Sets the current position of the elements.
+     */
+    set_positions : function() {
+        // Go through the elements and set their positions.
+        for (var key in this.elements) {
+            var element = this.elements[key];
+            var posx = this.pdfx + element.posx * this.pixelsinmm;
+            var posy = this.pdfy + element.posy * this.pixelsinmm;
+            var nodewidth = parseFloat(Y.one('#element-' + element.id).getComputedStyle('width'), 10);
+            var maxwidth = element.width * this.pixelsinmm;
+
+            if (maxwidth && (nodewidth > maxwidth)) {
+                nodewidth = maxwidth;
+            }
+            Y.one('#element-' + element.id).setStyle('width', nodewidth + 'px');
+
+            switch (element.refpoint) {
+                case '1':   // Top-center
+                    posx -= nodewidth / 2;
+                    break;
+                case '2':   // Top-right
+                    posx = posx - nodewidth + 2;
+                    break;
+            }
+
+            Y.one('#element-' + element.id).setX(posx);
+            Y.one('#element-' + element.id).setY(posy);
+        }
+    },
+
+    /**
+     * Creates the JS events for changing element positions.
+     */
+    create_events : function() {
+        // Trigger a save event when save button is pushed.
+        Y.one('.savepositionsbtn input[type=submit]').on('click', function(e) {
+            this.save_positions(e);
+        }, this);
+
+        // Trigger a save event when apply button is pushed.
+        Y.one('.applypositionsbtn input[type=submit]').on('click', function(e) {
+            this.save_positions(e);
+            e.preventDefault();
+        }, this);
+
+        // Define the container and the elements that are draggable.
+        var del = new Y.DD.Delegate({
+            container: '#pdf',
+            nodes: '.element'
+        });
+
+        // When we start dragging keep track of it's position as we may set it back.
+        del.on('drag:start', function() {
+            var node = del.get('currentNode');
+            this.elementxy = node.getXY();
+            this.elementwidth = node.getComputedStyle('width');
+        }, this);
+
+        // When we finish the dragging action check that the node is in bounds,
+        // if not, set it back to where it was.
+        del.on('drag:end', function() {
+            var node = del.get('currentNode');
+            if (this.is_out_of_bounds(node)) {
+                node.setXY(this.elementxy);
+                node.setStyle('width', this.elementwidth);
+            }
+        }, this);
+    },
+
+    /**
+     * Returns true if any part of the element is placed outside of the PDF div, false otherwise.
+     *
+     * @param node
+     * @returns {boolean}
+     */
+    is_out_of_bounds : function(node) {
+        // Get the width and height of the node.
+        var nodewidth = parseFloat(node.getComputedStyle('width'), 10);
+        var nodeheight = parseFloat(node.getComputedStyle('height'), 10);
+
+        // Store the positions of each edge of the node.
+        var left = node.getX();
+        var right = left + nodewidth;
+        var top = node.getY();
+        var bottom = top + nodeheight;
+
+        // Check if it is out of bounds horizontally.
+        if ((left < this.pdfleftboundary) || (right > this.pdfrightboundary))  {
+            return true;
+        }
+
+        // Check if it is out of bounds vertically.
+        if ((top < this.pdfy) || (bottom > (this.pdfy + this.pdfheight)))  {
+            return true;
+        }
+
+        return false;
+    },
+
+    /**
+     * Perform an AJAX call and save the positions of the elements.
+     *
+     * @param e
+     */
+    save_positions : function(e) {
+        // The parameters to send the AJAX call.
+        var params = {
+            tid: this.templateid,
+            values: []
+        };
+
+        // Go through the elements and save their positions.
+        for (var key in this.elements) {
+            var element = this.elements[key];
+            var node = Y.one('#element-' + element.id);
+
+            // Get the current X and Y positions for this element.
+            var posx = node.getX() - this.pdfx;
+            var posy = node.getY() - this.pdfy;
+
+            var nodewidth = parseFloat(node.getComputedStyle('width'), 10);
+
+            switch (element.refpoint) {
+                case '1':   // Top-center
+                    posx += nodewidth / 2;
+                    break;
+                case '2':   // Top-right
+                    posx += nodewidth;
+                    break;
+            }
+
+            // Set the parameters to pass to the AJAX request.
+            params.values.push({
+                id: element.id,
+                posx: Math.round(parseFloat(posx / this.pixelsinmm, 10)),
+                posy: Math.round(parseFloat(posy / this.pixelsinmm, 10))
+            });
+        }
+
+        params.values = JSON.stringify(params.values);
+
+        // Save these positions.
+        Y.io(M.cfg.wwwroot + '/mod/customcert/rest.php', {
+            method: 'POST',
+            data: params,
+            on: {
+                failure: function(tid, response) {
+                    this.ajax_failure(response);
+                },
+                success: function() {
+                    var formNode = e.currentTarget.ancestor('form', true);
+                    var baseUrl = formNode.getAttribute('action');
+                    var pageinput = formNode.one('[name=pid]');
+                    if (pageinput) {
+                        var pageid = pageinput.get('value');
+                        window.location = baseUrl + '?pid=' + pageid;
+                    } else {
+                        var templateid = formNode.one('[name=tid]').get('value');
+                        window.location = baseUrl + '?tid=' + templateid;
+                    }
+                }
+            },
+            context: this
+        });
+
+        e.preventDefault();
+    },
+
+    /**
+     * Handles any failures during an AJAX call.
+     *
+     * @param response
+     * @returns {M.core.exception}
+     */
+    ajax_failure : function(response) {
+        var e = {
+            name: response.status + ' ' + response.statusText,
+            message: response.responseText
+        };
+        return new M.core.exception(e);
+    }
+});
+
+M.mod_customcert = M.mod_customcert || {};
+M.mod_customcert.rearrange = M.mod_customcert.rearrange || {};
+M.mod_customcert.rearrange.init = function(templateid, page, elements) {
+    new Rearrange(templateid, page, elements);
+};
+
+}, '@VERSION@', {"requires": ["dd-delegate", "dd-drag"]});

yui/src/rearrange/build.json

@@ -0,0 +1,10 @@
+{
+  "name": "moodle-mod_customcert-rearrange",
+  "builds": {
+    "moodle-mod_customcert-rearrange": {
+      "jsfiles": [
+        "rearrange.js"
+      ]
+    }
+  }
+}

yui/src/rearrange/js/rearrange.js

@@ -1,22 +1,28 @@
-M.mod_customcert = {};
-
-
-M.mod_customcert.rearrange = {
+/**
+ * Rearrange elements in the custom certificate
+ *
+ * @class M.mod_customcert.rearrange.rearrange
+ * @constructor
+ */
+var Rearrange = function() {
+    Rearrange.superclass.constructor.apply(this, [arguments]);
+};
+Y.extend(Rearrange, Y.Base, {
 
     /**
-     * The course module id.
+     * The template id.
      */
     templateid : 0,
 
     /**
      * The customcert page we are displaying.
      */
-    page : Array(),
+    page : [],
 
     /**
      * The custom certificate elements to display.
      */
-    elements : Array(),
+    elements : [],
 
     /**
      * Store the X coordinates of the top left of the pdf div.
@@ -53,27 +59,23 @@ M.mod_customcert.rearrange = {
      */
     pdfrightboundary : 0,
 
-
     /**
      * The number of pixels in a mm.
      */
-    pixelsinmm : 3.779527559055, //'3.779528',
+    pixelsinmm : 3.779527559055, // '3.779528'.
 
     /**
      * Initialise.
      *
-     * @param Y
-     * @param templateid
-     * @param page
-     * @param elements
+     * @param params
      */
-    init : function(Y, templateid, page, elements) {
+    initializer : function(params) {
         // Set the course module id.
-        this.templateid = templateid;
+        this.templateid = params[0];
         // Set the page.
-        this.page = page;
+        this.page = params[1];
         // Set the elements.
-        this.elements = elements;
+        this.elements = params[2];
 
         // Set the PDF dimensions.
         this.pdfx = Y.one('#pdf').getX();
@@ -83,55 +85,50 @@ M.mod_customcert.rearrange = {
 
         // Set the boundaries.
         this.pdfleftboundary = this.pdfx;
-        if (this.page['leftmargin']) {
-            this.pdfleftboundary += parseInt(this.page['leftmargin'] * this.pixelsinmm);
+        if (this.page.leftmargin) {
+            this.pdfleftboundary += parseInt(this.page.leftmargin * this.pixelsinmm, 10);
         }
 
         this.pdfrightboundary = this.pdfx + this.pdfwidth;
-        if (this.page['rightmargin']) {
-            this.pdfrightboundary -= parseInt(this.page['rightmargin'] * this.pixelsinmm);
+        if (this.page.rightmargin) {
+            this.pdfrightboundary -= parseInt(this.page.rightmargin * this.pixelsinmm, 10);
         }
 
-        this.set_data(Y);
-        this.set_positions(Y);
-        this.create_events(Y);
-        // this.set_positions(Y); // move here
+        this.set_data();
+        this.set_positions();
+        this.create_events();
     },
 
     /**
      * Sets the additional data for the elements.
-     *
-     * @param Y
      */
-    set_data : function(Y) {
+    set_data : function() {
         // Go through the elements and set their reference points.
         for (var key in this.elements) {
             var element = this.elements[key];
-            Y.one('#element-' + element['id']).setData('refpoint', element['refpoint']);
-            Y.one('#element-' + element['id']).setData('width', element['width']);
+            Y.one('#element-' + element.id).setData('refpoint', element.refpoint);
+            Y.one('#element-' + element.id).setData('width', element.width);
         }
     },
 
     /**
      * Sets the current position of the elements.
-     *
-     * @param Y
      */
-    set_positions : function(Y) {
+    set_positions : function() {
         // Go through the elements and set their positions.
         for (var key in this.elements) {
             var element = this.elements[key];
-            var posx = this.pdfx + element['posx'] * this.pixelsinmm;
-            var posy = this.pdfy + element['posy'] * this.pixelsinmm;
-            var nodewidth = parseFloat(Y.one('#element-' + element['id']).getComputedStyle('width'), 10);
-            var maxwidth = element['width'] * this.pixelsinmm;
+            var posx = this.pdfx + element.posx * this.pixelsinmm;
+            var posy = this.pdfy + element.posy * this.pixelsinmm;
+            var nodewidth = parseFloat(Y.one('#element-' + element.id).getComputedStyle('width'), 10);
+            var maxwidth = element.width * this.pixelsinmm;
 
             if (maxwidth && (nodewidth > maxwidth)) {
                 nodewidth = maxwidth;
             }
-            Y.one('#element-' + element['id']).setStyle('width', nodewidth + 'px');
+            Y.one('#element-' + element.id).setStyle('width', nodewidth + 'px');
 
-            switch (element['refpoint']) {
+            switch (element.refpoint) {
                 case '1':   // Top-center
                     posx -= nodewidth / 2;
                     break;
@@ -140,17 +137,15 @@ M.mod_customcert.rearrange = {
                     break;
             }
 
-            Y.one('#element-' + element['id']).setX(posx);
-            Y.one('#element-' + element['id']).setY(posy);
+            Y.one('#element-' + element.id).setX(posx);
+            Y.one('#element-' + element.id).setY(posy);
         }
     },
 
     /**
      * Creates the JS events for changing element positions.
-     *
-     * @param Y
      */
-    create_events : function(Y) {
+    create_events : function() {
         // Trigger a save event when save button is pushed.
         Y.one('.savepositionsbtn input[type=submit]').on('click', function(e) {
             this.save_positions(e);
@@ -231,7 +226,7 @@ M.mod_customcert.rearrange = {
         // Go through the elements and save their positions.
         for (var key in this.elements) {
             var element = this.elements[key];
-            var node = Y.one('#element-' + element['id']);
+            var node = Y.one('#element-' + element.id);
 
             // Get the current X and Y positions for this element.
             var posx = node.getX() - this.pdfx;
@@ -239,7 +234,7 @@ M.mod_customcert.rearrange = {
 
             var nodewidth = parseFloat(node.getComputedStyle('width'), 10);
 
-            switch (element['refpoint']) {
+            switch (element.refpoint) {
                 case '1':   // Top-center
                     posx += nodewidth / 2;
                     break;
@@ -250,7 +245,7 @@ M.mod_customcert.rearrange = {
 
             // Set the parameters to pass to the AJAX request.
             params.values.push({
-                id: element['id'],
+                id: element.id,
                 posx: Math.round(parseFloat(posx / this.pixelsinmm, 10)),
                 posy: Math.round(parseFloat(posy / this.pixelsinmm, 10))
             });
@@ -283,7 +278,6 @@ M.mod_customcert.rearrange = {
         });
 
         e.preventDefault();
-
     },
 
     /**
@@ -299,4 +293,10 @@ M.mod_customcert.rearrange = {
         };
         return new M.core.exception(e);
     }
-}
+});
+
+M.mod_customcert = M.mod_customcert || {};
+M.mod_customcert.rearrange = M.mod_customcert.rearrange || {};
+M.mod_customcert.rearrange.init = function(templateid, page, elements) {
+    new Rearrange(templateid, page, elements);
+};

yui/src/rearrange/meta/rearrange.json

@@ -0,0 +1,8 @@
+{
+    "moodle-mod_customcert-rearrange": {
+        "requires": [
+            "dd-delegate",
+            "dd-drag"
+        ]
+    }
+}