| Línea 19... |
Línea 19... |
| 19 |
* @module tiny_media/imagehelpers
|
19 |
* @module tiny_media/imagehelpers
|
| 20 |
* @copyright 2024 Meirza <meirza.arson@moodle.com>
|
20 |
* @copyright 2024 Meirza <meirza.arson@moodle.com>
|
| 21 |
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
21 |
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
| 22 |
*/
|
22 |
*/
|
| Línea -... |
Línea 23... |
| - |
|
23 |
|
| 23 |
|
24 |
import * as Helpers from 'tiny_media/helpers';
|
| - |
|
25 |
import {Selectors} from './selectors';
|
| - |
|
26 |
|
| - |
|
27 |
/**
|
| - |
|
28 |
* Maximum length allowed for the alt attribute.
|
| - |
|
29 |
*/
|
| Línea 24... |
Línea 30... |
| 24 |
import Templates from 'core/templates';
|
30 |
export const MAX_LENGTH_ALT = 750;
|
| 25 |
|
31 |
|
| 26 |
/**
|
32 |
/**
|
| 27 |
* Renders and inserts the body template for inserting an image into the modal.
|
33 |
* Renders and inserts the body template for inserting an image into the modal.
|
| 28 |
*
|
34 |
*
|
| 29 |
* @param {object} templateContext - The context for rendering the template.
|
35 |
* @param {object} templateContext - The context for rendering the template.
|
| - |
|
36 |
* @param {HTMLElement} root - The root element where the template will be inserted.
|
| 30 |
* @param {HTMLElement} root - The root element where the template will be inserted.
|
37 |
* @returns {Promise<void>}
|
| 31 |
* @returns {Promise<void>}
|
38 |
* @deprecated Since Moodle 5.0 See {@link module:core_editor/tiny/plugins/media/helpers.body}
|
| 32 |
*/
|
39 |
*/
|
| 33 |
export const bodyImageInsert = async(templateContext, root) => {
|
- |
|
| - |
|
40 |
export const bodyImageInsert = async(templateContext, root) => {
|
| 34 |
return Templates.renderForPromise('tiny_media/insert_image_modal_insert', {...templateContext})
|
41 |
window.console.warn('This function is deprecated. Please use core_editor/tiny/plugins/media/helpers.body instead.');
|
| 35 |
.then(({html, js}) => {
|
- |
|
| 36 |
Templates.replaceNodeContents(root.querySelector('.tiny_image_body_template'), html, js);
|
- |
|
| 37 |
return;
|
42 |
|
| 38 |
})
|
43 |
templateContext.bodyTemplate = 'tiny_media/insert_image_modal_insert';
|
| 39 |
.catch(error => {
|
- |
|
| 40 |
window.console.log(error);
|
44 |
templateContext.selector = Selectors.IMAGE.type;
|
| Línea 41... |
Línea 45... |
| 41 |
});
|
45 |
return Helpers.body(templateContext, root);
|
| 42 |
};
|
46 |
};
|
| 43 |
|
47 |
|
| 44 |
/**
|
48 |
/**
|
| 45 |
* Renders and inserts the footer template for inserting an image into the modal.
|
49 |
* Renders and inserts the footer template for inserting an image into the modal.
|
| 46 |
*
|
50 |
*
|
| - |
|
51 |
* @param {object} templateContext - The context for rendering the template.
|
| 47 |
* @param {object} templateContext - The context for rendering the template.
|
52 |
* @param {HTMLElement} root - The root element where the template will be inserted.
|
| 48 |
* @param {HTMLElement} root - The root element where the template will be inserted.
|
53 |
* @returns {Promise<void>}
|
| 49 |
* @returns {Promise<void>}
|
- |
|
| 50 |
*/
|
54 |
* @deprecated Since Moodle 5.0 See {@link module:core_editor/tiny/plugins/media/helpers.footer}
|
| 51 |
export const footerImageInsert = async(templateContext, root) => {
|
55 |
*/
|
| 52 |
return Templates.renderForPromise('tiny_media/insert_image_modal_insert_footer', {...templateContext})
|
- |
|
| 53 |
.then(({html, js}) => {
|
56 |
export const footerImageInsert = async(templateContext, root) => {
|
| - |
|
57 |
window.console.warn(`This function is deprecated.
|
| 54 |
Templates.replaceNodeContents(root.querySelector('.tiny_image_footer_template'), html, js);
|
58 |
Please use core_editor/tiny/plugins/media/helpers.footer instead.`);
|
| 55 |
return;
|
59 |
|
| 56 |
})
|
- |
|
| 57 |
.catch(error => {
|
60 |
templateContext.footerTemplate = 'tiny_media/insert_image_modal_insert_footer';
|
| Línea 58... |
Línea 61... |
| 58 |
window.console.log(error);
|
61 |
templateContext.selector = Selectors.IMAGE.type;
|
| 59 |
});
|
62 |
return Helpers.footer(templateContext, root);
|
| 60 |
};
|
63 |
};
|
| 61 |
|
64 |
|
| 62 |
/**
|
65 |
/**
|
| 63 |
* Renders and inserts the body template for displaying image details in the modal.
|
66 |
* Renders and inserts the body template for displaying image details in the modal.
|
| - |
|
67 |
*
|
| 64 |
*
|
68 |
* @param {object} templateContext - The context for rendering the template.
|
| 65 |
* @param {object} templateContext - The context for rendering the template.
|
69 |
* @param {HTMLElement} root - The root element where the template will be inserted.
|
| 66 |
* @param {HTMLElement} root - The root element where the template will be inserted.
|
70 |
* @returns {Promise<void>}
|
| 67 |
* @returns {Promise<void>}
|
71 |
* @deprecated Since Moodle 5.0 See {@link module:core_editor/tiny/plugins/media/helpers.body}
|
| - |
|
72 |
*/
|
| 68 |
*/
|
73 |
export const bodyImageDetails = async(templateContext, root) => {
|
| 69 |
export const bodyImageDetails = async(templateContext, root) => {
|
- |
|
| 70 |
return Templates.renderForPromise('tiny_media/insert_image_modal_details', {...templateContext})
|
- |
|
| 71 |
.then(({html, js}) => {
|
74 |
window.console.warn(`This function is deprecated.
|
| 72 |
Templates.replaceNodeContents(root.querySelector('.tiny_image_body_template'), html, js);
|
75 |
Please use core_editor/tiny/plugins/media/helpers.body instead.`);
|
| 73 |
return;
|
- |
|
| 74 |
})
|
76 |
|
| Línea 75... |
Línea 77... |
| 75 |
.catch(error => {
|
77 |
templateContext.bodyTemplate = 'tiny_media/insert_image_modal_details';
|
| 76 |
window.console.log(error);
|
78 |
templateContext.selector = Selectors.IMAGE.type;
|
| 77 |
});
|
79 |
return Helpers.body(templateContext, root);
|
| 78 |
};
|
80 |
};
|
| 79 |
|
81 |
|
| - |
|
82 |
/**
|
| 80 |
/**
|
83 |
* Renders and inserts the footer template for displaying image details in the modal.
|
| 81 |
* Renders and inserts the footer template for displaying image details in the modal.
|
84 |
* @param {object} templateContext - The context for rendering the template.
|
| 82 |
* @param {object} templateContext - The context for rendering the template.
|
- |
|
| 83 |
* @param {HTMLElement} root - The root element where the template will be inserted.
|
85 |
* @param {HTMLElement} root - The root element where the template will be inserted.
|
| 84 |
* @returns {Promise<void>}
|
86 |
* @returns {Promise<void>}
|
| 85 |
*/
|
- |
|
| 86 |
export const footerImageDetails = async(templateContext, root) => {
|
87 |
* @deprecated Since Moodle 5.0 See {@link module:core_editor/tiny/plugins/media/helpers.footer}
|
| - |
|
88 |
*/
|
| 87 |
return Templates.renderForPromise('tiny_media/insert_image_modal_details_footer', {...templateContext})
|
89 |
export const footerImageDetails = async(templateContext, root) => {
|
| 88 |
.then(({html, js}) => {
|
90 |
window.console.warn(`This function is deprecated.
|
| 89 |
Templates.replaceNodeContents(root.querySelector('.tiny_image_footer_template'), html, js);
|
- |
|
| 90 |
return;
|
91 |
Please use core_editor/tiny/plugins/media/helpers.footer instead.`);
|
| Línea 91... |
Línea 92... |
| 91 |
})
|
92 |
|
| 92 |
.catch(error => {
|
93 |
templateContext.footerTemplate = 'tiny_media/insert_image_modal_details_footer';
|
| 93 |
window.console.log(error);
|
94 |
templateContext.selector = Selectors.IMAGE.type;
|
| 94 |
});
|
95 |
return Helpers.footer(templateContext, root);
|
| 95 |
};
|
96 |
};
|
| - |
|
97 |
|
| 96 |
|
98 |
/**
|
| 97 |
/**
|
99 |
* Show the element(s).
|
| 98 |
* Show the element(s).
|
100 |
*
|
| 99 |
*
|
- |
|
| 100 |
* @param {string|string[]} elements - The CSS selector for the elements to toggle.
|
101 |
* @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 |
*/
|
102 |
* @param {object} root - The CSS selector for the elements to toggle.
|
| 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 {
|
103 |
* @deprecated Since Moodle 5.0 See {@link module:core_editor/tiny/plugins/media/helpers.showElements}
|
| Línea 112... |
Línea 104... |
| 112 |
const element = root.querySelector(elements);
|
104 |
*/
|
| 113 |
if (element) {
|
105 |
export const showElements = (elements, root) => {
|
| 114 |
element.classList.remove('d-none');
|
106 |
window.console.warn(`This function is deprecated.
|
| 115 |
}
|
107 |
Please use core_editor/tiny/plugins/media/helpers.showElements instead.`);
|
| 116 |
}
|
108 |
Helpers.showElements(elements, root);
|
| - |
|
109 |
};
|
| 117 |
};
|
110 |
|
| 118 |
|
111 |
/**
|
| 119 |
/**
|
112 |
* Hide the element(s).
|
| 120 |
* Hide the element(s).
|
- |
|
| 121 |
*
|
113 |
*
|
| 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.
|
114 |
* @param {string|string[]} elements - 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 |
});
|
115 |
* @param {object} root - The CSS selector for the elements to toggle.
|
| Línea 133... |
Línea 116... |
| 133 |
} else {
|
116 |
* @deprecated Since Moodle 5.0 See {@link module:core_editor/tiny/plugins/media/helpers.hideElements}
|
| 134 |
const element = root.querySelector(elements);
|
117 |
*/
|
| 135 |
if (element) {
|
118 |
export const hideElements = (elements, root) => {
|
| 136 |
element.classList.add('d-none');
|
119 |
window.console.warn(`This function is deprecated.
|
| 137 |
}
|
120 |
Please use core_editor/tiny/plugins/media/helpers.hideElements instead.`);
|
| - |
|
121 |
Helpers.hideElements(elements, root);
|
| 138 |
}
|
122 |
};
|
| 139 |
};
|
123 |
|
| - |
|
124 |
/**
|
| - |
|
125 |
* Checks if the given value is a percentage value.
|
| 140 |
|
126 |
*
|
| 141 |
/**
|
127 |
* @param {string} value - The value to check.
|