Proyectos de Subversion Moodle

Rev

Ir a la última revisión | | 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
 * @package    atto_link
18
 * @copyright  2013 Damyon Wiese  <damyon@moodle.com>
19
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
20
 */
21
 
22
/**
23
 * @module moodle-atto_link-button
24
 */
25
 
26
/**
27
 * Atto text editor link plugin.
28
 *
29
 * @namespace M.atto_link
30
 * @class button
31
 * @extends M.editor_atto.EditorPlugin
32
 */
33
 
34
var COMPONENTNAME = 'atto_link',
35
    CSS = {
36
        NEWWINDOW: 'atto_link_openinnewwindow',
37
        URLINPUT: 'atto_link_urlentry',
38
        URLTEXT: 'atto_link_urltext'
39
    },
40
    SELECTORS = {
41
        NEWWINDOW: '.atto_link_openinnewwindow',
42
        URLINPUT: '.atto_link_urlentry',
43
        URLTEXT: '.atto_link_urltext',
44
        SUBMIT: '.submit',
45
        LINKBROWSER: '.openlinkbrowser'
46
    },
47
    TEMPLATE = '' +
48
            '<form class="atto_form">' +
49
                '<div class="mb-1">' +
50
                '<label for="{{elementid}}_atto_link_urltext">{{get_string "texttodisplay" component}}</label>' +
51
                '<input class="form-control fullwidth {{CSS.URLTEXT}}" type="text" ' +
52
                'id="{{elementid}}_atto_link_urltext" size="32"/>' +
53
                '</div>' +
54
                '{{#if showFilepicker}}' +
55
                    '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
56
                    '<div class="input-group input-append w-100 mb-1">' +
57
                        '<input class="form-control url {{CSS.URLINPUT}}" type="url" ' +
58
                        'id="{{elementid}}_atto_link_urlentry"/>' +
59
                        '<span class="input-group-append">' +
60
                            '<button class="btn btn-secondary openlinkbrowser" type="button">' +
61
                            '{{get_string "browserepositories" component}}</button>' +
62
                        '</span>' +
63
                    '</div>' +
64
                '{{else}}' +
65
                    '<div class="mb-1">' +
66
                        '<label for="{{elementid}}_atto_link_urlentry">{{get_string "enterurl" component}}</label>' +
67
                        '<input class="form-control fullwidth url {{CSS.URLINPUT}}" type="url" ' +
68
                        'id="{{elementid}}_atto_link_urlentry" size="32"/>' +
69
                    '</div>' +
70
                '{{/if}}' +
71
                '<div class="form-check">' +
72
                    '<input type="checkbox" class="form-check-input newwindow {{CSS.NEWWINDOW}}" ' +
73
                    'id="{{elementid}}_{{CSS.NEWWINDOW}}"/>' +
74
                    '<label class="form-check-label" for="{{elementid}}_{{CSS.NEWWINDOW}}">' +
75
                    '{{get_string "openinnewwindow" component}}' +
76
                    '</label>' +
77
                '</div>' +
78
                '<div class="mdl-align">' +
79
                    '<br/>' +
80
                    '<button type="submit" class="btn btn-secondary submit">{{get_string "createlink" component}}</button>' +
81
                '</div>' +
82
            '</form>';
83
Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
84
 
85
    /**
86
     * A reference to the current selection at the time that the dialogue
87
     * was opened.
88
     *
89
     * @property _currentSelection
90
     * @type Range
91
     * @private
92
     */
93
    _currentSelection: null,
94
 
95
    /**
96
     * A reference to the dialogue content.
97
     *
98
     * @property _content
99
     * @type Node
100
     * @private
101
     */
102
    _content: null,
103
 
104
    /**
105
     * Text to display has value or not.
106
     * @property _hasTextToDisplay
107
     * @type Boolean
108
     * @private
109
     */
110
    _hasTextToDisplay: false,
111
 
112
    /**
113
     * User has selected plain text or not.
114
     * @property _hasPlainTextSelected
115
     * @type Boolean
116
     * @private
117
     */
118
    _hasPlainTextSelected: false,
119
 
120
    initializer: function() {
121
        // Add the link button first.
122
        this.addButton({
123
            icon: 'e/insert_edit_link',
124
            keys: '75',
125
            callback: this._displayDialogue,
126
            tags: 'a',
127
            tagMatchRequiresAll: false
128
        });
129
 
130
        // And then the unlink button.
131
        this.addButton({
132
            buttonName: 'unlink',
133
            callback: this._unlink,
134
            icon: 'e/remove_link',
135
            title: 'unlink',
136
 
137
            // Watch the following tags and add/remove highlighting as appropriate:
138
            tags: 'a',
139
            tagMatchRequiresAll: false
140
        });
141
    },
142
 
143
    /**
144
     * Display the link editor.
145
     *
146
     * @method _displayDialogue
147
     * @private
148
     */
149
    _displayDialogue: function() {
150
        // Store the current selection.
151
        this._currentSelection = this.get('host').getSelection();
152
        if (this._currentSelection === false) {
153
            return;
154
        }
155
 
156
        var dialogue = this.getDialogue({
157
            headerContent: M.util.get_string('createlink', COMPONENTNAME),
158
            width: 'auto',
159
            focusAfterHide: true,
160
            focusOnShowSelector: SELECTORS.URLINPUT
161
        });
162
 
163
        // Set the dialogue content, and then show the dialogue.
164
        dialogue.set('bodyContent', this._getDialogueContent());
165
 
166
        // Resolve anchors in the selected text.
167
        this._resolveAnchors();
168
        dialogue.show();
169
    },
170
 
171
    /**
172
     * If there is selected text and it is part of an anchor link,
173
     * extract the url (and target) from the link (and set them in the form).
174
     *
175
     * @method _resolveAnchors
176
     * @private
177
     */
178
    _resolveAnchors: function() {
179
        // Find the first anchor tag in the selection.
180
        var selectednode = this.get('host').getSelectionParentNode(),
181
            anchornodes,
182
            anchornode,
183
            url,
184
            target,
185
            textToDisplay,
186
            title;
187
 
188
        // Note this is a document fragment and YUI doesn't like them.
189
        if (!selectednode) {
190
            return;
191
        }
192
 
193
        anchornodes = this._findSelectedAnchors(Y.one(selectednode));
194
        if (anchornodes.length > 0) {
195
            anchornode = anchornodes[0];
196
            this._currentSelection = this.get('host').getSelectionFromNode(anchornode);
197
            url = anchornode.getAttribute('href');
198
            target = anchornode.getAttribute('target');
199
            textToDisplay = anchornode.get('innerText');
200
            title = anchornode.getAttribute('title');
201
            if (url !== '') {
202
                this._content.one(SELECTORS.URLINPUT).setAttribute('value', url);
203
            }
204
            if (textToDisplay !== '') {
205
                this._content.one(SELECTORS.URLTEXT).set('value', textToDisplay);
206
            } else if (title !== '') {
207
                this._content.one(SELECTORS.URLTEXT).set('value', title);
208
            }
209
            if (target === '_blank') {
210
                this._content.one(SELECTORS.NEWWINDOW).setAttribute('checked', 'checked');
211
            } else {
212
                this._content.one(SELECTORS.NEWWINDOW).removeAttribute('checked');
213
            }
214
        } else {
215
            // User is selecting some text before clicking on the Link button.
216
            textToDisplay = this._getTextSelection();
217
            if (textToDisplay !== '') {
218
                this._hasTextToDisplay = true;
219
                this._hasPlainTextSelected = true;
220
                this._content.one(SELECTORS.URLTEXT).set('value', textToDisplay);
221
            }
222
        }
223
    },
224
 
225
    /**
226
     * Update the dialogue after a link was selected in the File Picker.
227
     *
228
     * @method _filepickerCallback
229
     * @param {object} params The parameters provided by the filepicker
230
     * containing information about the link.
231
     * @private
232
     */
233
    _filepickerCallback: function(params) {
234
        this.getDialogue()
235
                .set('focusAfterHide', null)
236
                .hide();
237
 
238
        if (params.url !== '') {
239
            // Add the link.
240
            this._setLinkOnSelection(params.url);
241
 
242
            // And mark the text area as updated.
243
            this.markUpdated();
244
        }
245
    },
246
 
247
    /**
248
     * The link was inserted, so make changes to the editor source.
249
     *
250
     * @method _setLink
251
     * @param {EventFacade} e
252
     * @private
253
     */
254
    _setLink: function(e) {
255
        var input,
256
            value;
257
 
258
        e.preventDefault();
259
        this.getDialogue({
260
            focusAfterHide: null
261
        }).hide();
262
 
263
        input = this._content.one(SELECTORS.URLINPUT);
264
 
265
        value = input.get('value');
266
        if (value !== '') {
267
 
268
            // We add a prefix if it is not already prefixed.
269
            value = value.trim();
270
            var expr = new RegExp(/^[a-zA-Z]*\.*\/|^#|^[a-zA-Z]*:/);
271
            if (!expr.test(value)) {
272
                value = 'http://' + value;
273
            }
274
 
275
            // Add the link.
276
            this._setLinkOnSelection(value);
277
 
278
            this.markUpdated();
279
        }
280
    },
281
 
282
    /**
283
     * Final step setting the anchor on the selection.
284
     *
285
     * @private
286
     * @method _setLinkOnSelection
287
     * @param  {String} url URL the link will point to.
288
     * @return {Node} The added Node.
289
     */
290
    _setLinkOnSelection: function(url) {
291
        var host = this.get('host'),
292
            link,
293
            selectednode,
294
            target,
295
            anchornodes,
296
            isUpdating,
297
            urlText,
298
            textToDisplay;
299
 
300
        this.editor.focus();
301
        host.setSelection(this._currentSelection);
302
        isUpdating = !this._currentSelection[0].collapsed;
303
        urlText = this._content.one(SELECTORS.URLTEXT);
304
        textToDisplay = urlText.get('value').replace(/(<([^>]+)>)/gi, "").trim();
305
        if (textToDisplay === '') {
306
            textToDisplay = url;
307
        }
308
 
309
        if (!isUpdating) {
310
            // Firefox cannot add links when the selection is empty so we will add it manually.
311
            link = Y.Node.create('<a>' + textToDisplay + '</a>');
312
            link.setAttribute('href', url);
313
 
314
            // Add the node and select it to replicate the behaviour of execCommand.
315
            selectednode = host.insertContentAtFocusPoint(link.get('outerHTML'));
316
            host.setSelection(host.getSelectionFromNode(selectednode));
317
        } else {
318
            document.execCommand('unlink', false, null);
319
            document.execCommand('createLink', false, url);
320
 
321
            // Now set the target.
322
            selectednode = host.getSelectionParentNode();
323
        }
324
 
325
        // Note this is a document fragment and YUI doesn't like them.
326
        if (!selectednode) {
327
            return;
328
        }
329
 
330
        anchornodes = this._findSelectedAnchors(Y.one(selectednode));
331
        // Add new window attributes if requested.
332
        Y.Array.each(anchornodes, function(anchornode) {
333
            target = this._content.one(SELECTORS.NEWWINDOW);
334
            if (target.get('checked')) {
335
                anchornode.setAttribute('target', '_blank');
336
            } else {
337
                anchornode.removeAttribute('target');
338
            }
339
            if (isUpdating && textToDisplay) {
340
                // The 'createLink' command do not allow to set the custom text to display. So we need to do it here.
341
                if (this._hasPlainTextSelected) {
342
                    // Only replace the innerText if the user has not selected any element or just the plain text.
343
                    anchornode.set('innerText', textToDisplay);
344
                } else {
345
                    // The user has selected another element to add the hyperlink, like an image.
346
                    // We should add the title attribute instead of replacing the innerText of the hyperlink.
347
                    anchornode.setAttribute('title', textToDisplay);
348
                }
349
            }
350
        }, this);
351
 
352
        return selectednode;
353
    },
354
 
355
    /**
356
     * Look up and down for the nearest anchor tags that are least partly contained in the selection.
357
     *
358
     * @method _findSelectedAnchors
359
     * @param {Node} node The node to search under for the selected anchor.
360
     * @return {Node|Boolean} The Node, or false if not found.
361
     * @private
362
     */
363
    _findSelectedAnchors: function(node) {
364
        var tagname = node.get('tagName'),
365
            hit, hits;
366
 
367
        // Direct hit.
368
        if (tagname && tagname.toLowerCase() === 'a') {
369
            return [node];
370
        }
371
 
372
        // Search down but check that each node is part of the selection.
373
        hits = [];
374
        node.all('a').each(function(n) {
375
            if (!hit && this.get('host').selectionContainsNode(n)) {
376
                hits.push(n);
377
            }
378
        }, this);
379
        if (hits.length > 0) {
380
            return hits;
381
        }
382
        // Search up.
383
        hit = node.ancestor('a');
384
        if (hit) {
385
            return [hit];
386
        }
387
        return [];
388
    },
389
 
390
    /**
391
     * Generates the content of the dialogue.
392
     *
393
     * @method _getDialogueContent
394
     * @return {Node} Node containing the dialogue content
395
     * @private
396
     */
397
    _getDialogueContent: function() {
398
        var canShowFilepicker = this.get('host').canShowFilepicker('link'),
399
            template = Y.Handlebars.compile(TEMPLATE);
400
 
401
        this._content = Y.Node.create(template({
402
            showFilepicker: canShowFilepicker,
403
            component: COMPONENTNAME,
404
            CSS: CSS
405
        }));
406
 
407
        this._content.one(SELECTORS.URLINPUT).on('keyup', this._updateTextToDisplay, this);
408
        this._content.one(SELECTORS.URLINPUT).on('change', this._updateTextToDisplay, this);
409
        this._content.one(SELECTORS.URLTEXT).on('keyup', this._setTextToDisplayState, this);
410
        this._content.one(SELECTORS.SUBMIT).on('click', this._setLink, this);
411
        if (canShowFilepicker) {
412
            this._content.one(SELECTORS.LINKBROWSER).on('click', function(e) {
413
                e.preventDefault();
414
                this.get('host').showFilepicker('link', this._filepickerCallback, this);
415
            }, this);
416
        }
417
 
418
        return this._content;
419
    },
420
 
421
    /**
422
     * Unlinks the current selection.
423
     * If the selection is empty (e.g. the cursor is placed within a link),
424
     * then the whole link is unlinked.
425
     *
426
     * @method _unlink
427
     * @private
428
     */
429
    _unlink: function() {
430
        var host = this.get('host'),
431
            range = host.getSelection();
432
 
433
        if (range && range.length) {
434
            if (range[0].startOffset === range[0].endOffset) {
435
                // The cursor was placed in the editor but there was no selection - select the whole parent.
436
                var nodes = host.getSelectedNodes();
437
                if (nodes) {
438
                    // We need to unlink each anchor individually - we cannot select a range because it may only consist of a
439
                    // fragment of an anchor. Selecting the parent would be dangerous because it may contain other links which
440
                    // would then be unlinked too.
441
                    nodes.each(function(node) {
442
                        // We need to select the whole anchor node for this to work in some browsers.
443
                        // We only need to search up because getSelectedNodes returns all Nodes in the selection.
444
                        var anchor = node.ancestor('a', true);
445
                        if (anchor) {
446
                            // Set the selection to the whole of the first anchor.
447
                            host.setSelection(host.getSelectionFromNode(anchor));
448
 
449
                            // Call the browser unlink.
450
                            document.execCommand('unlink', false, null);
451
                        }
452
                    }, this);
453
 
454
                    // And mark the text area as updated.
455
                    this.markUpdated();
456
                }
457
            } else {
458
                // Call the browser unlink.
459
                document.execCommand('unlink', false, null);
460
 
461
                // And mark the text area as updated.
462
                this.markUpdated();
463
            }
464
        }
465
    },
466
 
467
    /**
468
     * Set the current text to display state.
469
     *
470
     * @method _setTextToDisplayState
471
     * @private
472
     */
473
    _setTextToDisplayState: function() {
474
        var urlText,
475
            urlTextVal;
476
        urlText = this._content.one(SELECTORS.URLTEXT);
477
        urlTextVal = urlText.get('value');
478
        if (urlTextVal !== '') {
479
            this._hasTextToDisplay = true;
480
        } else {
481
            this._hasTextToDisplay = false;
482
        }
483
    },
484
 
485
    /**
486
     * Update the text to display if the user does not provide the custom text.
487
     *
488
     * @method _updateTextToDisplay
489
     * @private
490
     */
491
    _updateTextToDisplay: function() {
492
        var urlEntry,
493
            urlText,
494
            urlEntryVal;
495
        urlEntry = this._content.one(SELECTORS.URLINPUT);
496
        urlText = this._content.one(SELECTORS.URLTEXT);
497
        urlEntryVal = urlEntry.get('value');
498
        if (!this._hasTextToDisplay) {
499
            urlText.set('value', urlEntryVal);
500
        }
501
    },
502
 
503
    /**
504
     * Get only the selected text.
505
     * In some cases, window.getSelection() is not run as expected. We should only get the text value
506
     * For ex: <img src="" alt="XYZ">Some text here
507
     *          window.getSelection() will return XYZSome text here
508
     *
509
     * @returns {string} Selected text
510
     * @private
511
     */
512
    _getTextSelection: function() {
513
        var selText = '';
514
        var sel = window.getSelection();
515
        var rangeCount = sel.rangeCount;
516
        if (rangeCount) {
517
            var rangeTexts = [];
518
            for (var i = 0; i < rangeCount; ++i) {
519
                rangeTexts.push('' + sel.getRangeAt(i));
520
            }
521
            selText = rangeTexts.join('');
522
        }
523
        return selText;
524
    }
525
});