Converted existing JS to a YUI module
Also fixed errors reported by JSLint.
This commit is contained in:
parent
70997ceb62
commit
1a91d2322a
7 changed files with 684 additions and 55 deletions
|
@ -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'));
|
\mod_customcert\page_helper::page_setup($pageurl, $template->get_context(), get_string('rearrangeelements', 'customcert'));
|
||||||
|
|
||||||
// Include the JS we need.
|
// Include the JS we need.
|
||||||
$module = array(
|
$PAGE->requires->yui_module('moodle-mod_customcert-rearrange', 'M.mod_customcert.rearrange.init',
|
||||||
'name' => 'mod_customcert',
|
array($template->get_id(),
|
||||||
'fullpath' => '/mod/customcert/yui/src/rearrange.js',
|
$page,
|
||||||
'requires' => array('dd-delegate', 'dd-drag')
|
$elements));
|
||||||
);
|
|
||||||
$PAGE->requires->js_init_call('M.mod_customcert.rearrange.init', array($template->get_id(), $page, $elements), false, $module);
|
|
||||||
|
|
||||||
// Create the buttons to save the position of the elements.
|
// Create the buttons to save the position of the elements.
|
||||||
$html = html_writer::start_tag('div', array('class' => 'buttons'));
|
$html = html_writer::start_tag('div', array('class' => 'buttons'));
|
||||||
|
|
306
yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-debug.js
vendored
Normal file
306
yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-debug.js
vendored
Normal file
|
@ -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"]});
|
1
yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-min.js
vendored
Normal file
1
yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange-min.js
vendored
Normal file
|
@ -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"]});
|
306
yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange.js
vendored
Normal file
306
yui/build/moodle-mod_customcert-rearrange/moodle-mod_customcert-rearrange.js
vendored
Normal file
|
@ -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"]});
|
10
yui/src/rearrange/build.json
Normal file
10
yui/src/rearrange/build.json
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"name": "moodle-mod_customcert-rearrange",
|
||||||
|
"builds": {
|
||||||
|
"moodle-mod_customcert-rearrange": {
|
||||||
|
"jsfiles": [
|
||||||
|
"rearrange.js"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,22 +1,28 @@
|
||||||
M.mod_customcert = {};
|
/**
|
||||||
|
* Rearrange elements in the custom certificate
|
||||||
|
*
|
||||||
M.mod_customcert.rearrange = {
|
* @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,
|
templateid : 0,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The customcert page we are displaying.
|
* The customcert page we are displaying.
|
||||||
*/
|
*/
|
||||||
page : Array(),
|
page : [],
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The custom certificate elements to display.
|
* The custom certificate elements to display.
|
||||||
*/
|
*/
|
||||||
elements : Array(),
|
elements : [],
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Store the X coordinates of the top left of the pdf div.
|
* Store the X coordinates of the top left of the pdf div.
|
||||||
|
@ -53,27 +59,23 @@ M.mod_customcert.rearrange = {
|
||||||
*/
|
*/
|
||||||
pdfrightboundary : 0,
|
pdfrightboundary : 0,
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The number of pixels in a mm.
|
* The number of pixels in a mm.
|
||||||
*/
|
*/
|
||||||
pixelsinmm : 3.779527559055, //'3.779528',
|
pixelsinmm : 3.779527559055, // '3.779528'.
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initialise.
|
* Initialise.
|
||||||
*
|
*
|
||||||
* @param Y
|
* @param params
|
||||||
* @param templateid
|
|
||||||
* @param page
|
|
||||||
* @param elements
|
|
||||||
*/
|
*/
|
||||||
init : function(Y, templateid, page, elements) {
|
initializer : function(params) {
|
||||||
// Set the course module id.
|
// Set the course module id.
|
||||||
this.templateid = templateid;
|
this.templateid = params[0];
|
||||||
// Set the page.
|
// Set the page.
|
||||||
this.page = page;
|
this.page = params[1];
|
||||||
// Set the elements.
|
// Set the elements.
|
||||||
this.elements = elements;
|
this.elements = params[2];
|
||||||
|
|
||||||
// Set the PDF dimensions.
|
// Set the PDF dimensions.
|
||||||
this.pdfx = Y.one('#pdf').getX();
|
this.pdfx = Y.one('#pdf').getX();
|
||||||
|
@ -83,55 +85,50 @@ M.mod_customcert.rearrange = {
|
||||||
|
|
||||||
// Set the boundaries.
|
// Set the boundaries.
|
||||||
this.pdfleftboundary = this.pdfx;
|
this.pdfleftboundary = this.pdfx;
|
||||||
if (this.page['leftmargin']) {
|
if (this.page.leftmargin) {
|
||||||
this.pdfleftboundary += parseInt(this.page['leftmargin'] * this.pixelsinmm);
|
this.pdfleftboundary += parseInt(this.page.leftmargin * this.pixelsinmm, 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.pdfrightboundary = this.pdfx + this.pdfwidth;
|
this.pdfrightboundary = this.pdfx + this.pdfwidth;
|
||||||
if (this.page['rightmargin']) {
|
if (this.page.rightmargin) {
|
||||||
this.pdfrightboundary -= parseInt(this.page['rightmargin'] * this.pixelsinmm);
|
this.pdfrightboundary -= parseInt(this.page.rightmargin * this.pixelsinmm, 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.set_data(Y);
|
this.set_data();
|
||||||
this.set_positions(Y);
|
this.set_positions();
|
||||||
this.create_events(Y);
|
this.create_events();
|
||||||
// this.set_positions(Y); // move here
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sets the additional data for the elements.
|
* 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.
|
// Go through the elements and set their reference points.
|
||||||
for (var key in this.elements) {
|
for (var key in this.elements) {
|
||||||
var element = this.elements[key];
|
var element = this.elements[key];
|
||||||
Y.one('#element-' + element['id']).setData('refpoint', element['refpoint']);
|
Y.one('#element-' + element.id).setData('refpoint', element.refpoint);
|
||||||
Y.one('#element-' + element['id']).setData('width', element['width']);
|
Y.one('#element-' + element.id).setData('width', element.width);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sets the current position of the elements.
|
* Sets the current position of the elements.
|
||||||
*
|
|
||||||
* @param Y
|
|
||||||
*/
|
*/
|
||||||
set_positions : function(Y) {
|
set_positions : function() {
|
||||||
// Go through the elements and set their positions.
|
// Go through the elements and set their positions.
|
||||||
for (var key in this.elements) {
|
for (var key in this.elements) {
|
||||||
var element = this.elements[key];
|
var element = this.elements[key];
|
||||||
var posx = this.pdfx + element['posx'] * this.pixelsinmm;
|
var posx = this.pdfx + element.posx * this.pixelsinmm;
|
||||||
var posy = this.pdfy + element['posy'] * this.pixelsinmm;
|
var posy = this.pdfy + element.posy * this.pixelsinmm;
|
||||||
var nodewidth = parseFloat(Y.one('#element-' + element['id']).getComputedStyle('width'), 10);
|
var nodewidth = parseFloat(Y.one('#element-' + element.id).getComputedStyle('width'), 10);
|
||||||
var maxwidth = element['width'] * this.pixelsinmm;
|
var maxwidth = element.width * this.pixelsinmm;
|
||||||
|
|
||||||
if (maxwidth && (nodewidth > maxwidth)) {
|
if (maxwidth && (nodewidth > 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
|
case '1': // Top-center
|
||||||
posx -= nodewidth / 2;
|
posx -= nodewidth / 2;
|
||||||
break;
|
break;
|
||||||
|
@ -140,17 +137,15 @@ M.mod_customcert.rearrange = {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
Y.one('#element-' + element['id']).setX(posx);
|
Y.one('#element-' + element.id).setX(posx);
|
||||||
Y.one('#element-' + element['id']).setY(posy);
|
Y.one('#element-' + element.id).setY(posy);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates the JS events for changing element positions.
|
* 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.
|
// Trigger a save event when save button is pushed.
|
||||||
Y.one('.savepositionsbtn input[type=submit]').on('click', function(e) {
|
Y.one('.savepositionsbtn input[type=submit]').on('click', function(e) {
|
||||||
this.save_positions(e);
|
this.save_positions(e);
|
||||||
|
@ -231,7 +226,7 @@ M.mod_customcert.rearrange = {
|
||||||
// Go through the elements and save their positions.
|
// Go through the elements and save their positions.
|
||||||
for (var key in this.elements) {
|
for (var key in this.elements) {
|
||||||
var element = this.elements[key];
|
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.
|
// Get the current X and Y positions for this element.
|
||||||
var posx = node.getX() - this.pdfx;
|
var posx = node.getX() - this.pdfx;
|
||||||
|
@ -239,7 +234,7 @@ M.mod_customcert.rearrange = {
|
||||||
|
|
||||||
var nodewidth = parseFloat(node.getComputedStyle('width'), 10);
|
var nodewidth = parseFloat(node.getComputedStyle('width'), 10);
|
||||||
|
|
||||||
switch (element['refpoint']) {
|
switch (element.refpoint) {
|
||||||
case '1': // Top-center
|
case '1': // Top-center
|
||||||
posx += nodewidth / 2;
|
posx += nodewidth / 2;
|
||||||
break;
|
break;
|
||||||
|
@ -250,7 +245,7 @@ M.mod_customcert.rearrange = {
|
||||||
|
|
||||||
// Set the parameters to pass to the AJAX request.
|
// Set the parameters to pass to the AJAX request.
|
||||||
params.values.push({
|
params.values.push({
|
||||||
id: element['id'],
|
id: element.id,
|
||||||
posx: Math.round(parseFloat(posx / this.pixelsinmm, 10)),
|
posx: Math.round(parseFloat(posx / this.pixelsinmm, 10)),
|
||||||
posy: Math.round(parseFloat(posy / this.pixelsinmm, 10))
|
posy: Math.round(parseFloat(posy / this.pixelsinmm, 10))
|
||||||
});
|
});
|
||||||
|
@ -283,7 +278,6 @@ M.mod_customcert.rearrange = {
|
||||||
});
|
});
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -299,4 +293,10 @@ M.mod_customcert.rearrange = {
|
||||||
};
|
};
|
||||||
return new M.core.exception(e);
|
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);
|
||||||
|
};
|
8
yui/src/rearrange/meta/rearrange.json
Normal file
8
yui/src/rearrange/meta/rearrange.json
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"moodle-mod_customcert-rearrange": {
|
||||||
|
"requires": [
|
||||||
|
"dd-delegate",
|
||||||
|
"dd-drag"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue