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 Link UI.
18
 *
19
 * @module      tiny_link/ui
20
 * @copyright   2023 Huong Nguyen <huongnv13@gmail.com>
21
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22
 */
23
 
24
import {getFilePicker} from 'editor_tiny/options';
25
import {displayFilepicker} from 'editor_tiny/utils';
26
import LinkModal from 'tiny_link/modal';
27
import {getPermissions} from "tiny_link/options";
28
import {setLink, getCurrentLinkData, unSetLink} from "tiny_link/link";
29
import Selectors from 'tiny_link/selectors';
30
 
31
/**
32
 * Handle action.
33
 *
34
 * @param {TinyMCE} editor
35
 * @param {boolean} unlink
36
 */
37
export const handleAction = (editor, unlink = false) => {
38
    if (!unlink) {
39
        displayDialogue(editor);
40
    } else {
41
        unSetLink(editor);
42
    }
43
};
44
 
45
/**
46
 * Display the link dialogue.
47
 *
48
 * @param {TinyMCE} editor
49
 * @returns {Promise<void>}
50
 */
51
const displayDialogue = async(editor) => {
52
    const modal = await LinkModal.create({
53
        templateContext: getTemplateContext(editor),
54
    });
55
 
56
    const $root = await modal.getRoot();
57
    const root = $root[0];
58
    const currentForm = root.querySelector('form');
59
 
60
    root.addEventListener('click', (e) => {
61
        const submitAction = e.target.closest(Selectors.actions.submit);
62
        const linkBrowserAction = e.target.closest(Selectors.actions.linkBrowser);
63
        if (submitAction) {
64
            e.preventDefault();
65
            setLink(currentForm, editor);
66
            modal.destroy();
67
        }
68
        if (linkBrowserAction) {
69
            e.preventDefault();
70
            displayFilepicker(editor, 'link').then((params) => {
71
                filePickerCallback(params, currentForm, editor);
72
                return modal.destroy();
73
            }).catch();
74
        }
75
    });
76
 
77
    const linkTitle = root.querySelector(Selectors.elements.urlText);
78
    const linkUrl = root.querySelector(Selectors.elements.urlEntry);
79
    linkTitle.addEventListener('change', () => {
80
        if (linkTitle.value.length > 0) {
81
            linkTitle.dataset.useLinkAsText = 'false';
82
        } else {
83
            linkTitle.dataset.useLinkAsText = 'true';
84
            linkTitle.value = linkUrl.value;
85
        }
86
    });
87
 
88
    linkUrl.addEventListener('keyup', () => {
89
        updateTextToDisplay(currentForm);
90
    });
91
};
92
 
93
/**
94
 * Get template context.
95
 *
96
 * @param {TinyMCE} editor
97
 * @returns {Object}
98
 */
99
const getTemplateContext = (editor) => {
100
    const data = getCurrentLinkData(editor);
101
 
102
    return Object.assign({}, {
103
        elementid: editor.id,
104
        showfilepicker: getPermissions(editor).filepicker &&
105
            (typeof getFilePicker(editor, 'link') !== 'undefined'),
106
        isupdating: Object.keys(data).length > 0,
107
    }, data);
108
};
109
 
110
/**
111
 * Update the dialogue after a link was selected in the File Picker.
112
 *
113
 * @param {Object} params
114
 * @param {Element} currentForm
115
 * @param {TinyMCE} editor
116
 */
117
const filePickerCallback = (params, currentForm, editor) => {
118
    if (params.url) {
119
        const inputUrl = currentForm.querySelector(Selectors.elements.urlEntry);
120
        inputUrl.value = params.url;
121
        setLink(currentForm, editor);
122
    }
123
};
124
 
125
/**
126
 * Update the text to display if the user does not provide the custom text.
127
 *
128
 * @param {Element} currentForm
129
 */
130
const updateTextToDisplay = (currentForm) => {
131
    const urlEntry = currentForm.querySelector(Selectors.elements.urlEntry);
132
    const urlText = currentForm.querySelector(Selectors.elements.urlText);
133
    if (urlText.dataset.useLinkAsText === 'true') {
134
        urlText.value = urlEntry.value;
135
    }
136
};