Proyectos de Subversion Moodle

// 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/>.

/**

 * @author     Andreas Grabs <moodle@grabs-edv.de>

 * @copyright  2024 Andreas Grabs

 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

import log from 'core/log';

import config from 'core/config';

let _formid;

let _type;

let _useDragdrop;

let _contextid;

/**

 * Find the items in our mform we want to be draggable

 *

 * @param {string} formid The id of the mform the draggable items are related toHtml

 * @returns {array}

 */

const getDraggableItems = (formid) => {

    let fieldsets = document.querySelectorAll('#' + formid + ' fieldset');

    const items = [];

    fieldsets.forEach(fieldset => {

        if (fieldset.id.startsWith('id_singleelementheader_')) {

            items.push(fieldset);

        }

    });

    return items;

};

/**

 * Initialize a draggable item to be ready for drag and drop

 *

 * @param {Element} item The draggable item

 * @param {Integer} index The index of the draggable item

 */

const initDragElement = (item, index) => {

    // Add the class "dragging" a little later to get the dragging image visible.

    if (_useDragdrop) {

        item.classList.add('draggable');

    }

    item.dataset.index = index;

};

/**

 * Set the new sortorder values dependig on the current list order.

 */

const resortList = () => {

    // Set the new sortorder;

    let i = 0;

    log.debug('Changed sortorder');

    document.querySelectorAll('#' + _formid + ' fieldset.draggable').forEach(sortitem => {

        let elementindex = sortitem.dataset.index;

        log.debug('Set sortorder in element: ' + 'unilabeltype_' + _type + '_sortorder[' + elementindex + ']');

        let hiddenelement = document.forms[_formid].elements['unilabeltype_' + _type + '_sortorder[' + elementindex + ']'];

        let oldvalue = hiddenelement.value;

        hiddenelement.value = i + 1;

        log.debug('Element: ' + elementindex + ' - old value: ' + oldvalue + ', new value: ' + hiddenelement.value);

        i++;

    });

};

/**

 * Export our init method.

 *

 * @param {string}  type The type of unilabeltype e.g.: grid

 * @param {string}  formid The id of the mform the draggable elements are related to

 * @param {boolean} useDragdrop If false or not set drag drop is deactivated.

 */

export const init = async(type, formid, useDragdrop) => {

    _type = type;

    _formid = formid;

    _useDragdrop = useDragdrop;

    // Initialize drag and drop.

    const items = getDraggableItems(formid);

    let index = 0;

    items.forEach(item => {

        initDragElement(item, index);

        index++;

    });

    // Add event listener for new items.

    document.querySelector('#' + formid).addEventListener('itemadded', (e) => {

        log.debug('New element created with index: ' + e.detail);

        var newitem = document.querySelector('#id_singleelementheader_' + e.detail);

        initDragElement(newitem, e.detail);

        if (_useDragdrop) {

            resortList();

        }

    });

    // Add event listener if item is removed.

    document.querySelector('#' + formid).addEventListener('itemremoved', (e) => {

        log.debug('Element has been deleted: ' + e.detail);

        if (_useDragdrop) {

            resortList();

        }

    });

    // Import Sortable from 'js/Sortable.js';

    const Sortable = await import(config.wwwroot + '/mod/unilabel/js/Sortable.min.js');

    _contextid = config.contextid;

    const mysortablelist = document.querySelector('#' + formid);

    var sortable = Sortable.create(

        mysortablelist,

        {

            draggable: '.draggable',

            handle: '.draghandle',

            animation: 150,

            swapThreshold: 0.5,

            onEnd: async(e) => {

                log.debug(e.item);

                if (globalThis.tinymce !== undefined) {

                    var fieldsetselector = '#' + e.item.id;

                    log.debug(fieldsetselector);

                    var repeatindex = parseInt(document.querySelector(fieldsetselector).dataset.index);

                    let tinyeditor = await import('editor_tiny/editor');

                    let tinyconfig = await import('mod_unilabel/tinyconfig');

                    let editor = globalThis.tinymce;

                    editor.remove('#' + e.item.id + ' textarea');

                    document.querySelectorAll('#id_singleelementheader_' + repeatindex + ' [data-fieldtype="editor"]').forEach(

                        async(editorcontainer) => {

                            let target = editorcontainer.querySelector('textarea');

                            let targetid = target.getAttribute('id');

                            let targetname = target.getAttribute('name');

                            // Find the current draftitemid;

                            let draftitemidselector = targetname.replace('[text]', '[itemid]');

                            let draftitemid = document.forms[_formid][draftitemidselector].value;

                            let config = await tinyconfig.getTinyConfig(_contextid, targetid, targetname, draftitemid, repeatindex);

                            await tinyeditor.setupForTarget(target, config);

                        }

                    );

                }

                resortList();

                return true;

            }

        }

    );

    log.debug('Initialized sortable list');

    return sortable;

};