Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 25... Línea 25...
25
import Dropzone from 'core/dropzone';
25
import Dropzone from 'core/dropzone';
26
import uploadFile from 'editor_tiny/uploader';
26
import uploadFile from 'editor_tiny/uploader';
27
import {prefetchStrings} from 'core/prefetch';
27
import {prefetchStrings} from 'core/prefetch';
28
import {getStrings} from 'core/str';
28
import {getStrings} from 'core/str';
29
import {component} from "./common";
29
import {component} from "./common";
-
 
30
import {getFilePicker} from 'editor_tiny/options';
30
import {displayFilepicker} from 'editor_tiny/utils';
31
import {displayFilepicker} from 'editor_tiny/utils';
31
import {ImageDetails} from 'tiny_media/imagedetails';
32
import {ImageDetails} from 'tiny_media/imagedetails';
32
import {
33
import {
-
 
34
    body,
33
    showElements,
35
    footer,
34
    hideElements,
36
    hideElements,
35
    bodyImageDetails,
37
    showElements,
36
    footerImageDetails,
38
    isValidUrl,
37
} from 'tiny_media/imagehelpers';
39
} from './helpers';
-
 
40
import {MAX_LENGTH_ALT} from './imagehelpers';
Línea 38... Línea 41...
38
 
41
 
39
prefetchStrings('tiny_media', [
42
prefetchStrings('tiny_media', [
40
    'insertimage',
43
    'insertimage',
41
    'enterurl',
44
    'enterurl',
Línea 80... Línea 83...
80
        // Convert array to object.
83
        // Convert array to object.
81
        this.langStrings = Object.fromEntries(langStringKeys.map((key, index) => [key, langStringvalues[index]]));
84
        this.langStrings = Object.fromEntries(langStringKeys.map((key, index) => [key, langStringvalues[index]]));
82
        this.currentModal.setTitle(this.langStrings.insertimage);
85
        this.currentModal.setTitle(this.langStrings.insertimage);
83
        if (this.canShowDropZone) {
86
        if (this.canShowDropZone) {
84
            const dropZoneEle = document.querySelector(Selectors.IMAGE.elements.dropzoneContainer);
87
            const dropZoneEle = document.querySelector(Selectors.IMAGE.elements.dropzoneContainer);
-
 
88
 
-
 
89
            // Accepted types can be either a string or an array.
-
 
90
            let acceptedTypes = getFilePicker(this.editor, 'image').accepted_types;
-
 
91
            if (Array.isArray(acceptedTypes)) {
-
 
92
                acceptedTypes = acceptedTypes.join(',');
-
 
93
            }
-
 
94
 
85
            const dropZone = new Dropzone(
95
            const dropZone = new Dropzone(
86
                dropZoneEle,
96
                dropZoneEle,
87
                'image/*',
97
                acceptedTypes,
88
                files => {
98
                files => {
89
                    this.handleUploadedFile(files);
99
                    this.handleUploadedFile(files);
90
                }
100
                }
91
            );
101
            );
92
            dropZone.setLabel(this.langStrings.addfilesdrop);
102
            dropZone.setLabel(this.langStrings.addfilesdrop);
Línea 100... Línea 110...
100
     */
110
     */
101
    toggleUrlButton() {
111
    toggleUrlButton() {
102
        const urlInput = this.root.querySelector(Selectors.IMAGE.elements.url);
112
        const urlInput = this.root.querySelector(Selectors.IMAGE.elements.url);
103
        const url = urlInput.value;
113
        const url = urlInput.value;
104
        const addUrl = this.root.querySelector(Selectors.IMAGE.actions.addUrl);
114
        const addUrl = this.root.querySelector(Selectors.IMAGE.actions.addUrl);
105
        addUrl.disabled = !(url !== "" && this.isValidUrl(url));
115
        addUrl.disabled = !(url !== "" && isValidUrl(url));
106
    }
116
    }
Línea 107... Línea 117...
107
 
117
 
108
    /**
-
 
109
     * Check if given string is a valid URL.
-
 
110
     *
-
 
111
     * @param {String} urlString URL the link will point to.
-
 
112
     * @returns {boolean} True is valid, otherwise false.
-
 
113
     */
-
 
114
    isValidUrl = urlString => {
-
 
115
        const urlPattern = new RegExp('^(https?:\\/\\/)?' + // Protocol.
-
 
116
                                    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // Domain name.
-
 
117
                                    '((\\d{1,3}\\.){3}\\d{1,3})|localhost)' + // OR ip (v4) address, localhost.
-
 
118
                                    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'); // Port and path.
-
 
119
        return !!urlPattern.test(urlString);
-
 
120
    };
-
 
121
 
-
 
122
    /**
118
    /**
123
     * Handles changes in the image URL input field and loads a preview of the image if the URL has changed.
119
     * Handles changes in the image URL input field and loads a preview of the image if the URL has changed.
124
     */
120
     */
125
    urlChanged() {
121
    urlChanged() {
126
        hideElements(Selectors.IMAGE.elements.urlWarning, this.root);
122
        hideElements(Selectors.IMAGE.elements.urlWarning, this.root);
Línea 149... Línea 145...
149
        });
145
        });
Línea 150... Línea 146...
150
 
146
 
151
        image.addEventListener('load', () => {
147
        image.addEventListener('load', () => {
152
            let templateContext = {};
148
            let templateContext = {};
-
 
149
            templateContext.sizecustomhelpicon = {text: this.langStrings.sizecustom_help};
-
 
150
            templateContext.bodyTemplate = Selectors.IMAGE.template.body.insertImageDetailsBody;
-
 
151
            templateContext.footerTemplate = Selectors.IMAGE.template.footer.insertImageDetailsFooter;
-
 
152
            templateContext.selector = Selectors.IMAGE.type;
-
 
153
            templateContext.maxlengthalt = MAX_LENGTH_ALT;
153
            templateContext.sizecustomhelpicon = {text: this.langStrings.sizecustom_help};
154
 
154
            Promise.all([bodyImageDetails(templateContext, this.root), footerImageDetails(templateContext, this.root)])
155
            Promise.all([body(templateContext, this.root), footer(templateContext, this.root)])
155
                .then(() => {
156
                .then(() => {
156
                    const imagedetails = new ImageDetails(
157
                    const imagedetails = new ImageDetails(
157
                        this.root,
158
                        this.root,
158
                        this.editor,
159
                        this.editor,
Línea 269... Línea 270...
269
            fileInput.addEventListener('change', () => {
270
            fileInput.addEventListener('change', () => {
270
                this.handleUploadedFile(fileInput.files);
271
                this.handleUploadedFile(fileInput.files);
271
            });
272
            });
272
        }
273
        }
273
    }
274
    }
274
}
-
 
275
275
}
-
 
276