moodle-mod_htmlcert/amd/src/rearrange-area.js

// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**
 * AMD module used when rearranging a custom certificate.
 *
 * @module     mod_customcert/rearrange-area
 * @package    mod_customcert
 * @copyright  2016 Mark Nelson <markn@moodle.com>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */
define(['jquery', 'core/yui', 'core/fragment', 'mod_customcert/dialogue', 'core/notification',
        'core/str', 'core/templates', 'core/ajax'],
        function($, Y, fragment, Dialogue, notification, str, template, ajax) {

            /**
             * RearrangeArea class.
             *
             * @param {String} selector The rearrange PDF selector
             */
            var RearrangeArea = function(selector) {
                this._node = $(selector);
                this._setEvents();
            };

            RearrangeArea.prototype.CUSTOMCERT_REF_POINT_TOPLEFT = 0;
            RearrangeArea.prototype.CUSTOMCERT_REF_POINT_TOPCENTER = 1;
            RearrangeArea.prototype.CUSTOMCERT_REF_POINT_TOPRIGHT = 2;
            RearrangeArea.prototype.PIXELSINMM = 3.779527559055;

            RearrangeArea.prototype._setEvents = function() {
                this._node.on('click', '.element', this._editElement.bind(this));
            };

            RearrangeArea.prototype._editElement = function(event) {
                var elementid = event.currentTarget.id.substr(8);
                var contextid = this._node.attr('data-contextid');
                var params = {
                    'elementid': elementid
                };

                fragment.loadFragment('mod_customcert', 'editelement', contextid, params).done(function(html, js) {
                    str.get_string('editelement', 'mod_customcert').done(function(title) {
                        Y.use('moodle-core-formchangechecker', function() {
                            new Dialogue(
                                title,
                                '<div id=\'elementcontent\'></div>',
                                this._editElementDialogueConfig.bind(this, elementid, html, js),
                                undefined,
                                true
                            );
                        }.bind(this));
                    }.bind(this));
                }.bind(this)).fail(notification.exception);
            };

            RearrangeArea.prototype._editElementDialogueConfig = function(elementid, html, js, popup) {
                // Place the content in the dialogue.
                template.replaceNode('#elementcontent', html, js);

                // We may have dragged the element changing it's position.
                // Ensure the form has the current up-to-date location.
                this._setPositionInForm(elementid);

                // Add events for when we save, close and cancel the page.
                var body = $(popup.getContent());
                body.on('click', '#id_submitbutton', function(e) {
                    // Do not want to ask the user if they wish to stay on page after saving.
                    M.core_formchangechecker.reset_form_dirty_state();
                    // Save the data.
                    this._saveElement(elementid).then(function() {
                        // Update the DOM to reflect the adjusted value.
                        this._getElementHTML(elementid).done(function(html) {
                            var elementNode = this._node.find('#element-' + elementid);
                            var refpoint = parseInt($('#id_refpoint').val());
                            var refpointClass = '';
                            if (refpoint == this.CUSTOMCERT_REF_POINT_TOPLEFT) {
                                refpointClass = 'refpoint-left';
                            } else if (refpoint == this.CUSTOMCERT_REF_POINT_TOPCENTER) {
                                refpointClass = 'refpoint-center';
                            } else if (refpoint == this.CUSTOMCERT_REF_POINT_TOPRIGHT) {
                                refpointClass = 'refpoint-right';
                            }
                            elementNode.empty().append(html);
                            // Update the ref point.
                            elementNode.removeClass();
                            elementNode.addClass('element ' + refpointClass);
                            elementNode.attr('data-refpoint', refpoint);
                            // Move the element.
                            var posx = $('#editelementform #id_posx').val();
                            var posy = $('#editelementform #id_posy').val();
                            this._setPosition(elementid, refpoint, posx, posy);
                            // All done.
                            popup.close();
                        }.bind(this));
                    }.bind(this));
                    e.preventDefault();
                }.bind(this));

                body.on('click', '#id_cancel', function(e) {
                    popup.close();
                    e.preventDefault();
                });
            };

            RearrangeArea.prototype._setPosition = function(elementid, refpoint, posx, posy) {
                var element = Y.one('#element-' + elementid);

                posx = Y.one('#pdf').getX() + posx * this.PIXELSINMM;
                posy = Y.one('#pdf').getY() + posy * this.PIXELSINMM;
                var nodewidth = parseFloat(element.getComputedStyle('width'));
                var maxwidth = element.width * this.PIXELSINMM;

                if (maxwidth && (nodewidth > maxwidth)) {
                    nodewidth = maxwidth;
                }

                switch (refpoint) {
                    case this.CUSTOMCERT_REF_POINT_TOPCENTER:
                        posx -= nodewidth / 2;
                        break;
                    case this.CUSTOMCERT_REF_POINT_TOPRIGHT:
                        posx = posx - nodewidth + 2;
                        break;
                }

                element.setX(posx);
                element.setY(posy);
            };

            RearrangeArea.prototype._setPositionInForm = function(elementid) {
                var posxelement = $('#editelementform #id_posx');
                var posyelement = $('#editelementform #id_posy');

                if (posxelement.length && posyelement.length) {
                    var element = Y.one('#element-' + elementid);
                    var posx = element.getX() - Y.one('#pdf').getX();
                    var posy = element.getY() - Y.one('#pdf').getY();
                    var refpoint = parseInt(element.getData('refpoint'));
                    var nodewidth = parseFloat(element.getComputedStyle('width'));

                    switch (refpoint) {
                        case this.CUSTOMCERT_REF_POINT_TOPCENTER:
                            posx += nodewidth / 2;
                            break;
                        case this.CUSTOMCERT_REF_POINT_TOPRIGHT:
                            posx += nodewidth;
                            break;
                    }

                    posx = Math.round(parseFloat(posx / this.PIXELSINMM));
                    posy = Math.round(parseFloat(posy / this.PIXELSINMM));

                    posxelement.val(posx);
                    posyelement.val(posy);
                }
            };

            RearrangeArea.prototype._getElementHTML = function(elementid) {
                // Get the variables we need.
                var templateid = this._node.attr('data-templateid');

                // Call the web service to get the updated element.
                var promises = ajax.call([{
                    methodname: 'mod_customcert_get_element_html',
                    args: {
                        templateid: templateid,
                        elementid: elementid
                    }
                }]);

                // Return the promise.
                return promises[0];
            };

            RearrangeArea.prototype._saveElement = function(elementid) {
                // Get the variables we need.
                var templateid = this._node.attr('data-templateid');
                var inputs = $('#editelementform').serializeArray();

                // Call the web service to save the element.
                var promises = ajax.call([{
                    methodname: 'mod_customcert_save_element',
                    args: {
                        templateid: templateid,
                        elementid: elementid,
                        values: inputs
                    }
                }]);

                // Return the promise.
                return promises[0];
            };

            return {
                init: function(selector) {
                    new RearrangeArea(selector);
                }
            };
        }
    );