settings_tray.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. /**
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. **/
  7. (function ($, Drupal) {
  8. var blockConfigureSelector = '[data-settings-tray-edit]';
  9. var toggleEditSelector = '[data-drupal-settingstray="toggle"]';
  10. var itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-settingstray="editable"] a, [data-drupal-settingstray="editable"] button';
  11. var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
  12. var quickEditItemSelector = '[data-quickedit-entity-id]';
  13. function preventClick(event) {
  14. if ($(event.target).closest('.contextual-links').length) {
  15. return;
  16. }
  17. event.preventDefault();
  18. }
  19. function closeToolbarTrays() {
  20. $(Drupal.toolbar.models.toolbarModel.get('activeTab')).trigger('click');
  21. }
  22. function disableQuickEdit() {
  23. $('.quickedit-toolbar button.action-cancel').trigger('click');
  24. }
  25. function closeOffCanvas() {
  26. $('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click');
  27. }
  28. function getItemsToToggle() {
  29. return $(itemsToToggleSelector).not(contextualItemsSelector);
  30. }
  31. function setEditModeState(editMode) {
  32. if (!document.querySelector('[data-off-canvas-main-canvas]')) {
  33. throw new Error('data-off-canvas-main-canvas is missing from settings-tray-page-wrapper.html.twig');
  34. }
  35. editMode = !!editMode;
  36. var $editButton = $(toggleEditSelector);
  37. var $editables = void 0;
  38. if (editMode) {
  39. $editButton.text(Drupal.t('Editing'));
  40. closeToolbarTrays();
  41. $editables = $('[data-drupal-settingstray="editable"]').once('settingstray');
  42. if ($editables.length) {
  43. document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true);
  44. $editables.not(contextualItemsSelector).on('click.settingstray', function (e) {
  45. if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
  46. return;
  47. }
  48. $(e.currentTarget).find(blockConfigureSelector).trigger('click');
  49. disableQuickEdit();
  50. });
  51. $(quickEditItemSelector).not(contextualItemsSelector).on('click.settingstray', function (e) {
  52. if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
  53. closeOffCanvas();
  54. }
  55. if ($(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
  56. return;
  57. }
  58. $(e.currentTarget).find('li.quickedit a').trigger('click');
  59. });
  60. }
  61. } else {
  62. $editables = $('[data-drupal-settingstray="editable"]').removeOnce('settingstray');
  63. if ($editables.length) {
  64. document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
  65. $editables.off('.settingstray');
  66. $(quickEditItemSelector).off('.settingstray');
  67. }
  68. $editButton.text(Drupal.t('Edit'));
  69. closeOffCanvas();
  70. disableQuickEdit();
  71. }
  72. getItemsToToggle().toggleClass('js-settings-tray-edit-mode', editMode);
  73. $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
  74. }
  75. function isInEditMode() {
  76. return $('#toolbar-bar').hasClass('js-settings-tray-edit-mode');
  77. }
  78. function toggleEditMode() {
  79. setEditModeState(!isInEditMode());
  80. }
  81. function prepareAjaxLinks() {
  82. Drupal.ajax.instances.filter(function (instance) {
  83. return instance && $(instance.element).attr('data-dialog-renderer') === 'off_canvas';
  84. }).forEach(function (instance) {
  85. if (!instance.options.data.hasOwnProperty('dialogOptions')) {
  86. instance.options.data.dialogOptions = {};
  87. }
  88. instance.options.data.dialogOptions.settingsTrayActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id');
  89. instance.progress = { type: 'fullscreen' };
  90. });
  91. }
  92. $(document).on('drupalContextualLinkAdded', function (event, data) {
  93. prepareAjaxLinks();
  94. $('body').once('settings_tray.edit_mode_init').each(function () {
  95. var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
  96. if (editMode) {
  97. setEditModeState(true);
  98. }
  99. });
  100. data.$el.find(blockConfigureSelector).on('click.settingstray', function () {
  101. if (!isInEditMode()) {
  102. $(toggleEditSelector).trigger('click').trigger('click.settings_tray');
  103. }
  104. disableQuickEdit();
  105. });
  106. });
  107. $(document).on('keyup.settingstray', function (e) {
  108. if (isInEditMode() && e.keyCode === 27) {
  109. Drupal.announce(Drupal.t('Exited edit mode.'));
  110. toggleEditMode();
  111. }
  112. });
  113. Drupal.behaviors.toggleEditMode = {
  114. attach: function attach() {
  115. $(toggleEditSelector).once('settingstray').on('click.settingstray', toggleEditMode);
  116. }
  117. };
  118. $(window).on({
  119. 'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
  120. if ($element.is('#drupal-off-canvas')) {
  121. $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
  122. var $activeElement = $('#' + settings.settingsTrayActiveEditableId);
  123. if ($activeElement.length) {
  124. $activeElement.addClass('settings-tray-active-editable');
  125. }
  126. }
  127. },
  128. 'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
  129. if ($element.is('#drupal-off-canvas')) {
  130. $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
  131. }
  132. }
  133. });
  134. })(jQuery, Drupal);