node.preview.es6.js 3.1 KB

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