1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
/**
* @file
* Preview behaviors.
*/
(function ($, Drupal) {
/**
* Disables all non-relevant links in node previews.
*
* Destroys links (except local fragment identifiers such as href="#frag") in
* node previews to prevent users from leaving the page.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches confirmation prompt for clicking links in node preview mode.
* @prop {Drupal~behaviorDetach} detach
* Detaches confirmation prompt for clicking links in node preview mode.
*/
Drupal.behaviors.nodePreviewDestroyLinks = {
attach(context) {
function clickPreviewModal(event) {
// Only confirm leaving previews when left-clicking and user is not
// pressing the ALT, CTRL, META (Command key on the Macintosh keyboard)
// or SHIFT key.
if (
event.button === 0 &&
!event.altKey &&
!event.ctrlKey &&
!event.metaKey &&
!event.shiftKey
) {
event.preventDefault();
const $previewDialog = $(
`<div>${Drupal.theme('nodePreviewModal')}</div>`,
).appendTo('body');
Drupal.dialog($previewDialog, {
title: Drupal.t('Leave preview?'),
buttons: [
{
text: Drupal.t('Cancel'),
click() {
$(this).dialog('close');
},
},
{
text: Drupal.t('Leave preview'),
click() {
window.top.location.href = event.target.href;
},
},
],
}).showModal();
}
}
if (!context.querySelector('.node-preview-container')) {
return;
}
if (once('node-preview', 'html').length) {
$(document).on(
'click.preview',
'a:not([href^="#"], .node-preview-container a)',
clickPreviewModal,
);
}
},
detach(context, settings, trigger) {
if (trigger === 'unload') {
if (
context.querySelector('.node-preview-container') &&
once.remove('node-preview', 'html').length
) {
$(document).off('click.preview');
}
}
},
};
/**
* Switch view mode.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches automatic submit on `formUpdated.preview` events.
*/
Drupal.behaviors.nodePreviewSwitchViewMode = {
attach(context) {
const autosubmit = once(
'autosubmit',
'[data-drupal-autosubmit]',
context,
);
if (autosubmit.length) {
$(autosubmit).on('formUpdated.preview', function () {
$(this.form).trigger('submit');
});
}
},
};
/**
* Theme function for node preview modal.
*
* @return {string}
* Markup for the node preview modal.
*/
Drupal.theme.nodePreviewModal = function () {
return `<p>${Drupal.t(
'Leaving the preview will cause unsaved changes to be lost. Are you sure you want to leave the preview?',
)}</p><small class="description">${Drupal.t(
'CTRL+Left click will prevent this dialog from showing and proceed to the clicked link.',
)}</small>`;
};
})(jQuery, Drupal);
|
