Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
// This file is part of Moodle - http://moodle.org/
2 
//
3 
// Moodle is free software: you can redistribute it and/or modify
4 
// it under the terms of the GNU General Public License as published by
5 
// the Free Software Foundation, either version 3 of the License, or
6 
// (at your option) any later version.
7 
//
8 
// Moodle is distributed in the hope that it will be useful,
9 
// but WITHOUT ANY WARRANTY; without even the implied warranty of
10 
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 
// GNU General Public License for more details.
12 
//
13 
// You should have received a copy of the GNU General Public License
14 
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
15 
 
16 
/**
17 
 * Tiny media plugin image helpers.
18 
 *
19 
 * @module      tiny_media/imagehelpers
20 
 * @copyright   2024 Meirza <meirza.arson@moodle.com>
21 
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22 
 */
23 
 
24 
import Templates from 'core/templates';
25 
 
26 
/**
27 
 * Renders and inserts the body template for inserting an image into the modal.
28 
 *
29 
 * @param {object} templateContext - The context for rendering the template.
30 
 * @param {HTMLElement} root - The root element where the template will be inserted.
31 
 * @returns {Promise<void>}
32 
 */
33 
export const bodyImageInsert = async(templateContext, root) => {
34 
    return Templates.renderForPromise('tiny_media/insert_image_modal_insert', {...templateContext})
35 
    .then(({html, js}) => {
36 
        Templates.replaceNodeContents(root.querySelector('.tiny_image_body_template'), html, js);
37 
        return;
38 
    })
39 
    .catch(error => {
40 
        window.console.log(error);
41 
    });
42 
};
43 
 
44 
/**
45 
 * Renders and inserts the footer template for inserting an image into the modal.
46 
 *
47 
 * @param {object} templateContext - The context for rendering the template.
48 
 * @param {HTMLElement} root - The root element where the template will be inserted.
49 
 * @returns {Promise<void>}
50 
 */
51 
export const footerImageInsert = async(templateContext, root) => {
52 
    return Templates.renderForPromise('tiny_media/insert_image_modal_insert_footer', {...templateContext})
53 
    .then(({html, js}) => {
54 
        Templates.replaceNodeContents(root.querySelector('.tiny_image_footer_template'), html, js);
55 
        return;
56 
    })
57 
    .catch(error => {
58 
        window.console.log(error);
59 
    });
60 
};
61 
 
62 
/**
63 
 * Renders and inserts the body template for displaying image details in the modal.
64 
 *
65 
 * @param {object} templateContext - The context for rendering the template.
66 
 * @param {HTMLElement} root - The root element where the template will be inserted.
67 
 * @returns {Promise<void>}
68 
 */
69 
export const bodyImageDetails = async(templateContext, root) => {
70 
    return Templates.renderForPromise('tiny_media/insert_image_modal_details', {...templateContext})
71 
    .then(({html, js}) => {
72 
        Templates.replaceNodeContents(root.querySelector('.tiny_image_body_template'), html, js);
73 
        return;
74 
    })
75 
    .catch(error => {
76 
        window.console.log(error);
77 
    });
78 
};
79 
 
80 
/**
81 
 * Renders and inserts the footer template for displaying image details in the modal.
82 
 * @param {object} templateContext - The context for rendering the template.
83 
 * @param {HTMLElement} root - The root element where the template will be inserted.
84 
 * @returns {Promise<void>}
85 
 */
86 
export const footerImageDetails = async(templateContext, root) => {
87 
    return Templates.renderForPromise('tiny_media/insert_image_modal_details_footer', {...templateContext})
88 
    .then(({html, js}) => {
89 
        Templates.replaceNodeContents(root.querySelector('.tiny_image_footer_template'), html, js);
90 
        return;
91 
    })
92 
    .catch(error => {
93 
        window.console.log(error);
94 
    });
95 
};
96 
 
97 
/**
98 
 * Show the element(s).
99 
 *
100 
 * @param {string|string[]} elements - The CSS selector for the elements to toggle.
101 
 * @param {object} root - The CSS selector for the elements to toggle.
102 
 */
103 
export const showElements = (elements, root) => {
104 
    if (elements instanceof Array) {
105 
        elements.forEach((elementSelector) => {
106 
            const element = root.querySelector(elementSelector);
107 
            if (element) {
108 
                element.classList.remove('d-none');
109 
            }
110 
        });
111 
    } else {
112 
        const element = root.querySelector(elements);
113 
        if (element) {
114 
            element.classList.remove('d-none');
115 
        }
116 
    }
117 
};
118 
 
119 
/**
120 
 * Hide the element(s).
121 
 *
122 
 * @param {string|string[]} elements - The CSS selector for the elements to toggle.
123 
 * @param {object} root - The CSS selector for the elements to toggle.
124 
 */
125 
export const hideElements = (elements, root) => {
126 
    if (elements instanceof Array) {
127 
        elements.forEach((elementSelector) => {
128 
            const element = root.querySelector(elementSelector);
129 
            if (element) {
130 
                element.classList.add('d-none');
131 
            }
132 
        });
133 
    } else {
134 
        const element = root.querySelector(elements);
135 
        if (element) {
136 
            element.classList.add('d-none');
137 
        }
138 
    }
139 
};
140 
 
141 
/**
142 
 * Checks if the given value is a percentage value.
143 
 *
144 
 * @param {string} value - The value to check.
145 
 * @returns {boolean} True if the value is a percentage value, false otherwise.
146 
 */
147 
export const isPercentageValue = (value) => {
148 
    return value.match(/\d+%/);
149 
};