Chris@0: /**
Chris@0:  * @file
Chris@0:  * Preview behaviors.
Chris@0:  */
Chris@0: 
Chris@17: (function($, Drupal) {
Chris@0:   /**
Chris@0:    * Disables all non-relevant links in node previews.
Chris@0:    *
Chris@0:    * Destroys links (except local fragment identifiers such as href="#frag") in
Chris@0:    * node previews to prevent users from leaving the page.
Chris@0:    *
Chris@0:    * @type {Drupal~behavior}
Chris@0:    *
Chris@0:    * @prop {Drupal~behaviorAttach} attach
Chris@0:    *   Attaches confirmation prompt for clicking links in node preview mode.
Chris@0:    * @prop {Drupal~behaviorDetach} detach
Chris@0:    *   Detaches confirmation prompt for clicking links in node preview mode.
Chris@0:    */
Chris@0:   Drupal.behaviors.nodePreviewDestroyLinks = {
Chris@0:     attach(context) {
Chris@0:       function clickPreviewModal(event) {
Chris@0:         // Only confirm leaving previews when left-clicking and user is not
Chris@0:         // pressing the ALT, CTRL, META (Command key on the Macintosh keyboard)
Chris@0:         // or SHIFT key.
Chris@17:         if (
Chris@17:           event.button === 0 &&
Chris@17:           !event.altKey &&
Chris@17:           !event.ctrlKey &&
Chris@17:           !event.metaKey &&
Chris@17:           !event.shiftKey
Chris@17:         ) {
Chris@0:           event.preventDefault();
Chris@17:           const $previewDialog = $(
Chris@17:             `<div>${Drupal.theme('nodePreviewModal')}</div>`,
Chris@17:           ).appendTo('body');
Chris@0:           Drupal.dialog($previewDialog, {
Chris@0:             title: Drupal.t('Leave preview?'),
Chris@0:             buttons: [
Chris@0:               {
Chris@0:                 text: Drupal.t('Cancel'),
Chris@0:                 click() {
Chris@0:                   $(this).dialog('close');
Chris@0:                 },
Chris@17:               },
Chris@17:               {
Chris@0:                 text: Drupal.t('Leave preview'),
Chris@0:                 click() {
Chris@0:                   window.top.location.href = event.target.href;
Chris@0:                 },
Chris@0:               },
Chris@0:             ],
Chris@0:           }).showModal();
Chris@0:         }
Chris@0:       }
Chris@0: 
Chris@17:       const $preview = $(context).once('node-preview');
Chris@0:       if ($(context).find('.node-preview-container').length) {
Chris@17:         $preview.on(
Chris@17:           'click.preview',
Chris@17:           'a:not([href^="#"], .node-preview-container a)',
Chris@17:           clickPreviewModal,
Chris@17:         );
Chris@0:       }
Chris@0:     },
Chris@0:     detach(context, settings, trigger) {
Chris@0:       if (trigger === 'unload') {
Chris@17:         const $preview = $(context)
Chris@17:           .find('.content')
Chris@17:           .removeOnce('node-preview');
Chris@0:         if ($preview.length) {
Chris@0:           $preview.off('click.preview');
Chris@0:         }
Chris@0:       }
Chris@0:     },
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Switch view mode.
Chris@0:    *
Chris@0:    * @type {Drupal~behavior}
Chris@0:    *
Chris@0:    * @prop {Drupal~behaviorAttach} attach
Chris@0:    *   Attaches automatic submit on `formUpdated.preview` events.
Chris@0:    */
Chris@0:   Drupal.behaviors.nodePreviewSwitchViewMode = {
Chris@0:     attach(context) {
Chris@17:       const $autosubmit = $(context)
Chris@17:         .find('[data-drupal-autosubmit]')
Chris@17:         .once('autosubmit');
Chris@0:       if ($autosubmit.length) {
Chris@17:         $autosubmit.on('formUpdated.preview', function() {
Chris@0:           $(this.form).trigger('submit');
Chris@0:         });
Chris@0:       }
Chris@0:     },
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Theme function for node preview modal.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   Markup for the node preview modal.
Chris@0:    */
Chris@17:   Drupal.theme.nodePreviewModal = function() {
Chris@17:     return `<p>${Drupal.t(
Chris@17:       'Leaving the preview will cause unsaved changes to be lost. Are you sure you want to leave the preview?',
Chris@17:     )}</p><small class="description">${Drupal.t(
Chris@17:       'CTRL+Left click will prevent this dialog from showing and proceed to the clicked link.',
Chris@17:     )}</small>`;
Chris@0:   };
Chris@17: })(jQuery, Drupal);