node.preview.es6.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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 (
  26. event.button === 0 &&
  27. !event.altKey &&
  28. !event.ctrlKey &&
  29. !event.metaKey &&
  30. !event.shiftKey
  31. ) {
  32. event.preventDefault();
  33. const $previewDialog = $(
  34. `<div>${Drupal.theme('nodePreviewModal')}</div>`,
  35. ).appendTo('body');
  36. Drupal.dialog($previewDialog, {
  37. title: Drupal.t('Leave preview?'),
  38. buttons: [
  39. {
  40. text: Drupal.t('Cancel'),
  41. click() {
  42. $(this).dialog('close');
  43. },
  44. },
  45. {
  46. text: Drupal.t('Leave preview'),
  47. click() {
  48. window.top.location.href = event.target.href;
  49. },
  50. },
  51. ],
  52. }).showModal();
  53. }
  54. }
  55. const $preview = $(context).once('node-preview');
  56. if ($(context).find('.node-preview-container').length) {
  57. $preview.on(
  58. 'click.preview',
  59. 'a:not([href^="#"], .node-preview-container a)',
  60. clickPreviewModal,
  61. );
  62. }
  63. },
  64. detach(context, settings, trigger) {
  65. if (trigger === 'unload') {
  66. const $preview = $(context)
  67. .find('.content')
  68. .removeOnce('node-preview');
  69. if ($preview.length) {
  70. $preview.off('click.preview');
  71. }
  72. }
  73. },
  74. };
  75. /**
  76. * Switch view mode.
  77. *
  78. * @type {Drupal~behavior}
  79. *
  80. * @prop {Drupal~behaviorAttach} attach
  81. * Attaches automatic submit on `formUpdated.preview` events.
  82. */
  83. Drupal.behaviors.nodePreviewSwitchViewMode = {
  84. attach(context) {
  85. const $autosubmit = $(context)
  86. .find('[data-drupal-autosubmit]')
  87. .once('autosubmit');
  88. if ($autosubmit.length) {
  89. $autosubmit.on('formUpdated.preview', function() {
  90. $(this.form).trigger('submit');
  91. });
  92. }
  93. },
  94. };
  95. /**
  96. * Theme function for node preview modal.
  97. *
  98. * @return {string}
  99. * Markup for the node preview modal.
  100. */
  101. Drupal.theme.nodePreviewModal = function() {
  102. return `<p>${Drupal.t(
  103. 'Leaving the preview will cause unsaved changes to be lost. Are you sure you want to leave the preview?',
  104. )}</p><small class="description">${Drupal.t(
  105. 'CTRL+Left click will prevent this dialog from showing and proceed to the clicked link.',
  106. )}</small>`;
  107. };
  108. })(jQuery, Drupal);