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

/**

 * Manage the courses view for the overview block.

 *

 * @module     tool_courserating/rating

 * @copyright  2022 Marina Glancy <marina.glancy@gmail.com>

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

 */

import {get_string as getString} from 'core/str';

import {add as addToast} from 'core/toast';

import ModalForm from "core_form/modalform";

import ModalFactory from "core/modal_factory";

import Fragment from "core/fragment";

import Templates from "core/templates";

import ModalEvents from 'core/modal_events';

import ajax from 'core/ajax';

const SELECTORS = {

    COURSERATING: '.customfield_tool_courserating',

    COURSEWIDGET: '.tool_courserating-widget',

    ADD_RATING: '[data-action=tool_courserating-addrating][data-courseid]',

    VIEW_RATINGS_CFIELD: '.tool_courserating-cfield .tool_courserating-ratings',

    VIEW_RATINGS_LINK: '[data-action="tool_courserating-viewratings"]',

    FLAG_RATING: '[data-action=tool_courserating-toggleflag]',

    DELETE_RATING: `[data-action='tool_courserating-delete-rating']`,

    USER_RATING: `[data-for='tool_courserating-user-rating']`,

    CFIELD_WRAPPER: `[data-for='tool_courserating-cfield-wrapper'][data-courseid]`,

    USER_RATING_FLAG: `[data-for='tool_courserating-user-flag']`,

    RATING_POPUP: `.tool_courserating-reviews-popup`,

    REVIEWS_LIST: `.tool_courserating-reviews-popup [data-for="tool_courserating-reviews"]`,

    SHOWMORE_WRAPPER: `.tool_courserating-reviews-popup [data-for="tool_courserating-reviews"] ` +

        `[data-for="tool_courserating-showmore"]`,

    SHOWMORE_BUTTON: `.tool_courserating-reviews-popup [data-for="tool_courserating-reviews"] ` +

        `[data-for="tool_courserating-showmore"] [data-action="showmore"]`,

    RESET_WITHRATINGS: `.tool_courserating-reviews-popup [data-for="tool_courserating-reviews"] ` +

        `[data-for="tool_courserating-resetwithrating"]`,

    POPUP_SUMMARY: `.tool_courserating-reviews-popup [data-for="tool_courserating-summary"]`,

    SET_WITHRATINGS: `.tool_courserating-reviews-popup [data-for="tool_courserating-summary"] ` +

        `[data-for="tool_courserating_setwithrating"]`,

    RBCELL: `[data-for="tool_courserating-rbcell"][data-ratingid]`,

};

let systemContextId;

let viewRatingsModal;

let addRatingModal;

/**

 * Initialise listeners

 *

 * @param {Number} systemContextIdParam

 * @param {Boolean} useJQuery

 */

export const init = (systemContextIdParam, useJQuery = false) => {

    systemContextId = systemContextIdParam;

    document.addEventListener('click', e => {

        if (!e || !e.target || (typeof e.target.closest === "undefined")) {

            return;

        }

        const addRatingElement = e.target.closest(SELECTORS.ADD_RATING),

            viewRatingsElement = e.target.closest(SELECTORS.VIEW_RATINGS_CFIELD),

            deleteRatingElement = e.target.closest(SELECTORS.DELETE_RATING);

        if (addRatingElement) {

            e.preventDefault();

            const courseid = addRatingElement.getAttribute('data-courseid');

            if (viewRatingsModal) {

                viewRatingsModal.destroy();

            }

            addRating(courseid);

        } else if (viewRatingsElement) {

            e.preventDefault();

            const classes = (' ' + viewRatingsElement.getAttribute('class') + ' '),

                matches = classes.match(/ tool_courserating-ratings-courseid-(\d+) /);

            if (matches) {

                const widget = viewRatingsElement.closest(SELECTORS.COURSEWIDGET);

                if (widget && widget.querySelector(SELECTORS.ADD_RATING)) {

                    addRating(matches[1]);

                } else {

                    viewRatings(matches[1]);

                }

            }

        } else if (deleteRatingElement) {

            e.preventDefault();

            const ratingid = deleteRatingElement.getAttribute('data-ratingid');

            deleteRating(ratingid);

        }

    });

    if (useJQuery) {

        require(['jquery'], function($) {

            $('body').on('updated', '[data-inplaceeditable]', e => reloadFlag(e.target));

        });

    } else {

        document.addEventListener('core/inplace_editable:updated', e => reloadFlag(e.target));

    }

};

/**

 * Update the rating flag fragment

 *

 * @param {Element} inplaceEditable

 */

const reloadFlag = (inplaceEditable) => {

    if (inplaceEditable.dataset.component === 'tool_courserating' && inplaceEditable.dataset.itemtype === 'flag') {

        const ratingid = inplaceEditable.dataset.itemid;

        const node = document.querySelector(`${SELECTORS.USER_RATING_FLAG}[data-ratingid='${ratingid}']`);

        if (node) {

            Fragment.loadFragment('tool_courserating', 'rating_flag', systemContextId, {ratingid}).done((html, js) => {

                Templates.replaceNode(node, html, js);

            });

        }

    }

};

/**

 * Add ratings dialogue

 *

 * @param {Number} courseid

 */

const addRating = (courseid) => {

    addRatingModal = new ModalForm({

        formClass: 'tool_courserating\\form\\addrating',

        args: {courseid},

        modalConfig: {

            title: getString('addrating', 'tool_courserating'),

        },

    });

    // When form is saved, refresh it to remove validation errors, if any:

    addRatingModal.addEventListener(addRatingModal.events.FORM_SUBMITTED, () => {

        getString('changessaved')

            .then(addToast)

            .catch(null);

        refreshRating(courseid);

    });

    addRatingModal.show();

};

/**

 * View ratings dialogue

 *

 * @param {Number} courseid

 */

const viewRatings = (courseid) => {

    ModalFactory.create({

        type: ModalFactory.types.CANCEL,

        title: getString('coursereviews', 'tool_courserating'),

        large: true,

        buttons: {

            cancel: getString('closebuttontitle', 'core'),

        },

        removeOnClose: true,

    })

        .then(modal => {

            modal.setLarge();

            loadCourseRatingPopupContents({courseid})

            .done(({html, js}) => {

                modal.setBody(html);

                Templates.runTemplateJS(js);

            });

            // Handle hidden event.

            modal.getRoot().on(ModalEvents.hidden, function() {

                // Destroy when hidden.

                modal.destroy();

            });

            modal.show();

            viewRatingsModal = modal;

            return modal;

        })

        .fail(() => null);

};

/**

 * Delete rating with specified id

 *

 * @param {Number} ratingid

 */

const deleteRating = (ratingid) => {

    const form = new ModalForm({

        formClass: 'tool_courserating\\form\\deleterating',

        args: {ratingid},

        modalConfig: {

            title: getString('deleterating', 'tool_courserating'),

        },

    });

    // When form is saved, rating should be deleted.

    form.addEventListener(form.events.FORM_SUBMITTED, async e => {

        const el = document.querySelector(SELECTORS.USER_RATING + `[data-ratingid='${e.detail.ratingid}'`);

        if (el) {

            el.remove();

        }

        refreshRating(e.detail.courseid);

        if (!el) {

            const rbcell = document.querySelector(SELECTORS.RBCELL + `[data-ratingid='${e.detail.ratingid}'`);

            if (rbcell) {

                rbcell.innerHTML = await getString('ratingdeleted', 'tool_courserating');

            }

        }

    });

    form.show();

};

/**

 * Refresh course rating summary

 *

 * @param {Number} courseid

 */

const refreshRating = (courseid) => {

    let el1 = document.getElementsByClassName('tool_courserating-ratings-courseid-' + courseid);

    if (el1 && el1.length) {

        const cfield = el1[0].closest(SELECTORS.COURSERATING);

        Fragment.loadFragment('tool_courserating', 'cfield', systemContextId, {courseid}).done((html, js) => {

            Templates.replaceNode(cfield, html, js);

        });

    }

    const el2 = document.querySelector(SELECTORS.CFIELD_WRAPPER + `[data-courseid='${courseid}']`);

    if (el2) {

        Fragment.loadFragment('tool_courserating', 'cfield', systemContextId, {courseid}).done((html, js) => {

            el2.innerHTML = '';

            Templates.appendNodeContents(el2, html, js);

        });

    }

    const el3 = document.querySelector(`[data-for='tool_courserating-summary'][data-courseid='${courseid}']`);

    if (el3) {

        Fragment.loadFragment('tool_courserating', 'course_ratings_summary', systemContextId, {courseid}).done((html, js) => {

            el3.innerHTML = '';

            Templates.appendNodeContents(el3, html, js);

        });

    }

};

/**

 * Adds or removes CSS class to/from an element

 *

 * @param {Element} ratingFormGroup

 * @param {String} value

 */

const setFormGroupClasses = (ratingFormGroup, value) => {

    const addRemoveClass = (className, add) => {

        if (add && !ratingFormGroup.classList.contains(className)) {

            ratingFormGroup.classList.add(className);

        } else if (!add && ratingFormGroup.classList.contains(className)) {

            ratingFormGroup.classList.remove(className);

        }

    };

    for (let i = 1; i <= 5; i++) {

        addRemoveClass('s-' + i, i <= parseInt(value));

    }

    addRemoveClass('tool_courserating-norating', parseInt(value) === 0);

};

/**

 * Sets up listeneres for the addRating modal form

 *

 * @param {String} grpId

 */

export const setupAddRatingForm = (grpId) => {

    const ratingFormGroup = document.getElementById(grpId);

    const curchecked = ratingFormGroup.querySelector('input:checked');

    setFormGroupClasses(ratingFormGroup, curchecked ? curchecked.value : 0);

    let els = ratingFormGroup.querySelectorAll('input');

    for (let i = 0; i < els.length; i++) {

        els[i].addEventListener('change', e => setFormGroupClasses(ratingFormGroup, e.target.value));

    }

    let labels = ratingFormGroup.querySelectorAll('label');

    for (let i = 0; i < labels.length; i++) {

        labels[i].addEventListener("mouseover", e => {

            const el = e.target.closest('label').querySelector('input');

            setFormGroupClasses(ratingFormGroup, el.value);

        });

        labels[i].addEventListener("mouseleave", () => {

            const el = ratingFormGroup.querySelector('input:checked');

            setFormGroupClasses(ratingFormGroup, el ? el.value : 0);

        });

    }

    const form = ratingFormGroup.closest('form');

    const viewratingsLink = form.querySelector(SELECTORS.VIEW_RATINGS_LINK);

    if (viewratingsLink) {

        viewratingsLink.addEventListener('click', e => {

            e.preventDefault();

            addRatingModal.modal.destroy();

            viewRatings(e.target.dataset.courseid);

        });

    }

};

/**

 * Sets up the "View course ratings" popup

 */

export const setupViewRatingsPopup = () => {

    const el = document.querySelector(SELECTORS.REVIEWS_LIST);

    const reloadReviews = (offset = 0) => {

        const params = {

            courseid: el.dataset.courseid,

            offset,

            withrating: el.dataset.withrating

        };

        return Fragment.loadFragment('tool_courserating', 'course_reviews', el.dataset.systemcontextid, params);

    };

    el.addEventListener('click', e => {

        const button = e.target.closest(SELECTORS.SHOWMORE_BUTTON);

        if (button) {

            const wrapper = button.closest(SELECTORS.SHOWMORE_WRAPPER);

            e.preventDefault();

            reloadReviews(button.dataset.nextoffset).done((html, js) => Templates.replaceNode(wrapper, html, js));

        }

        const resetLink = e.target.closest(SELECTORS.RESET_WITHRATINGS);

        if (resetLink) {

            e.preventDefault();

            el.dataset.withrating = 0;

            reloadReviews(0).done((html, js) => Templates.replaceNodeContents(el, html, js));

        }

    });

    const elSummary = document.querySelector(SELECTORS.POPUP_SUMMARY);

    elSummary.addEventListener('click', e => {

        const withRatingButton = e.target.closest(SELECTORS.SET_WITHRATINGS);

        if (withRatingButton) {

            el.dataset.withrating = (el.dataset.withrating === withRatingButton.dataset.withrating) ?

            reloadReviews(0).done((html, js) => Templates.replaceNodeContents(el, html, js));

        }

    });

};

/**

 * Hide the custom field editor on the course edit page

 *

 * @param {String} fieldname

 */

export const hideEditField = (fieldname) => {

    const s = '#fitem_id_customfield_' + fieldname;

    let el = document.querySelector(s + '_editor');

    if (el) {

        el.style.display = 'none';

        el = document.querySelector(s + '_static');

        if (el) {

            el.style.display = 'none';

        }

    }

};

/**

 * Loads Course Rating popup contents. Allows both loggedin and nonloggedin requests.

 *

 * @param {object} args Parameters for the callback.

 * @return {Promise} JQuery promise object resolved when the fragment has been loaded.

 */

const loadCourseRatingPopupContents = function(args) {

    const isloggedin = !document.body.classList.contains('notloggedin');

    if (isloggedin) {

        return Fragment.loadFragment('tool_courserating', 'course_ratings_popup', systemContextId, args)

            .then((html, js) => ({html, js}));

    }

    return ajax.call([{

        methodname: 'tool_courserating_course_rating_popup',

        args

    }], undefined, false)[0]

    .then(function(data) {

        return {html: data.html, js: Fragment.processCollectedJavascript(data.javascript)};

    });

};