From 1a91d2322af890a17ae30755635a36f204774260 Mon Sep 17 00:00:00 2001 From: Mark Nelson Date: Mon, 13 Jun 2016 15:49:05 +0800 Subject: [PATCH] Converted existing JS to a YUI module Also fixed errors reported by JSLint. --- rearrange.php | 10 +- .../moodle-mod_customcert-rearrange-debug.js | 306 ++++++++++++++++++ .../moodle-mod_customcert-rearrange-min.js | 1 + .../moodle-mod_customcert-rearrange.js | 306 ++++++++++++++++++ yui/src/rearrange/build.json | 10 + yui/src/{ => rearrange/js}/rearrange.js | 98 +++--- yui/src/rearrange/meta/rearrange.json | 8 + 7 files changed, 684 insertions(+), 55 deletions(-) create mode 100644 yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-debug.js create mode 100644 yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-min.js create mode 100644 yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange.js create mode 100644 yui/src/rearrange/build.json rename yui/src/{ => rearrange/js}/rearrange.js (78%) create mode 100644 yui/src/rearrange/meta/rearrange.json diff --git a/rearrange.php b/rearrange.php index dda8781..a8bebb4 100644 --- a/rearrange.php +++ b/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')); diff --git a/yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-debug.js b/yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-debug.js new file mode 100644 index 0000000..3666e3c --- /dev/null +++ b/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"]}); diff --git a/yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-min.js b/yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-min.js new file mode 100644 index 0000000..017b5f9 --- /dev/null +++ b/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 rthis.pdfrightboundary?!0:sthis.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"]}); diff --git a/yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange.js b/yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange.js new file mode 100644 index 0000000..3666e3c --- /dev/null +++ b/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"]}); diff --git a/yui/src/rearrange/build.json b/yui/src/rearrange/build.json new file mode 100644 index 0000000..246cfbb --- /dev/null +++ b/yui/src/rearrange/build.json @@ -0,0 +1,10 @@ +{ + "name": "moodle-mod_customcert-rearrange", + "builds": { + "moodle-mod_customcert-rearrange": { + "jsfiles": [ + "rearrange.js" + ] + } + } +} diff --git a/yui/src/rearrange.js b/yui/src/rearrange/js/rearrange.js similarity index 78% rename from yui/src/rearrange.js rename to yui/src/rearrange/js/rearrange.js index 11dd0de..bfaa875 100644 --- a/yui/src/rearrange.js +++ b/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); } -} \ No newline at end of file +}); + +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); +}; \ No newline at end of file diff --git a/yui/src/rearrange/meta/rearrange.json b/yui/src/rearrange/meta/rearrange.json new file mode 100644 index 0000000..7bd9ba7 --- /dev/null +++ b/yui/src/rearrange/meta/rearrange.json @@ -0,0 +1,8 @@ +{ + "moodle-mod_customcert-rearrange": { + "requires": [ + "dd-delegate", + "dd-drag" + ] + } +}