3 * Handles AJAX submission and response in Views UI.
6 (function ($, Drupal, drupalSettings) {
8 * Ajax command for highlighting elements.
10 * @param {Drupal.Ajax} [ajax]
12 * @param {object} response
14 * @param {string} response.selector
15 * The selector in question.
16 * @param {number} [status]
17 * The HTTP status code.
19 Drupal.AjaxCommands.prototype.viewsHighlight = function (ajax, response, status) {
20 $('.hilited').removeClass('hilited');
21 $(response.selector).addClass('hilited');
25 * Ajax command to set the form submit action in the views modal edit form.
27 * @param {Drupal.Ajax} [ajax]
29 * @param {object} response
30 * The Ajax response. Contains .url
31 * @param {string} [status]
32 * The XHR status code?
34 Drupal.AjaxCommands.prototype.viewsSetForm = function (ajax, response, status) {
35 const $form = $('.js-views-ui-dialog form');
36 // Identify the button that was clicked so that .ajaxSubmit() can use it.
37 // We need to do this for both .click() and .mousedown() since JavaScript
38 // code might trigger either behavior.
39 const $submit_buttons = $form.find('input[type=submit].js-form-submit, button.js-form-submit').once('views-ajax-submit');
40 $submit_buttons.on('click mousedown', function () {
43 $form.once('views-ajax-submit').each(function () {
44 const $form = $(this);
45 const element_settings = {
48 base: $form.attr('id'),
51 const ajaxForm = Drupal.ajax(element_settings);
52 ajaxForm.$form = $form;
57 * Ajax command to show certain buttons in the views edit form.
59 * @param {Drupal.Ajax} [ajax]
61 * @param {object} response
63 * @param {bool} response.changed
64 * Whether the state changed for the buttons or not.
65 * @param {number} [status]
66 * The HTTP status code.
68 Drupal.AjaxCommands.prototype.viewsShowButtons = function (ajax, response, status) {
69 $('div.views-edit-view div.form-actions').removeClass('js-hide');
70 if (response.changed) {
71 $('div.views-edit-view div.view-changed.messages').removeClass('js-hide');
76 * Ajax command for triggering preview.
78 * @param {Drupal.Ajax} [ajax]
80 * @param {object} [response]
82 * @param {number} [status]
83 * The HTTP status code.
85 Drupal.AjaxCommands.prototype.viewsTriggerPreview = function (ajax, response, status) {
86 if ($('input#edit-displays-live-preview').is(':checked')) {
87 $('#preview-submit').trigger('click');
92 * Ajax command to replace the title of a page.
94 * @param {Drupal.Ajax} [ajax]
96 * @param {object} response
98 * @param {string} response.siteName
100 * @param {string} response.title
101 * The new page title.
102 * @param {number} [status]
103 * The HTTP status code.
105 Drupal.AjaxCommands.prototype.viewsReplaceTitle = function (ajax, response, status) {
106 const doc = document;
107 // For the <title> element, make a best-effort attempt to replace the page
108 // title and leave the site name alone. If the theme doesn't use the site
109 // name in the <title> element, this will fail.
110 const oldTitle = doc.title;
111 // Escape the site name, in case it has special characters in it, so we can
112 // use it in our regex.
113 const escapedSiteName = response.siteName.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
114 const re = new RegExp(`.+ (.) ${escapedSiteName}`);
115 doc.title = oldTitle.replace(re, `${response.title} $1 ${response.siteName}`);
117 $('h1.page-title').text(response.title);
121 * Get rid of irritating tabledrag messages.
124 * An array of messages. Always empty array, to get rid of the messages.
126 Drupal.theme.tableDragChangedWarning = function () {
131 * Trigger preview when the "live preview" checkbox is checked.
133 * @type {Drupal~behavior}
135 * @prop {Drupal~behaviorAttach} attach
136 * Attaches behavior to trigger live preview if the live preview option is
139 Drupal.behaviors.livePreview = {
141 $('input#edit-displays-live-preview', context).once('views-ajax').on('click', function () {
142 if ($(this).is(':checked')) {
143 $('#preview-submit').trigger('click');
150 * Sync preview display.
152 * @type {Drupal~behavior}
154 * @prop {Drupal~behaviorAttach} attach
155 * Attaches behavior to sync the preview display when needed.
157 Drupal.behaviors.syncPreviewDisplay = {
159 $('#views-tabset a').once('views-ajax').on('click', function () {
160 const href = $(this).attr('href');
161 // Cut of #views-tabset.
162 const display_id = href.substr(11);
163 // Set the form element.
164 $('#views-live-preview #preview-display-id').val(display_id);
170 * Ajax behaviors for the views_ui module.
172 * @type {Drupal~behavior}
174 * @prop {Drupal~behaviorAttach} attach
175 * Attaches ajax behaviors to the elements with the classes in question.
177 Drupal.behaviors.viewsAjax = {
178 collapseReplaced: false,
179 attach(context, settings) {
180 const base_element_settings = {
182 progress: { type: 'fullscreen' },
184 // Bind AJAX behaviors to all items showing the class.
185 $('a.views-ajax-link', context).once('views-ajax').each(function () {
186 const element_settings = base_element_settings;
187 element_settings.base = $(this).attr('id');
188 element_settings.element = this;
189 // Set the URL to go to the anchor.
190 if ($(this).attr('href')) {
191 element_settings.url = $(this).attr('href');
193 Drupal.ajax(element_settings);
196 $('div#views-live-preview a')
197 .once('views-ajax').each(function () {
198 // We don't bind to links without a URL.
199 if (!$(this).attr('href')) {
203 const element_settings = base_element_settings;
204 // Set the URL to go to the anchor.
205 element_settings.url = $(this).attr('href');
206 if (Drupal.Views.getPath(element_settings.url).substring(0, 21) !== 'admin/structure/views') {
210 element_settings.wrapper = 'views-preview-wrapper';
211 element_settings.method = 'replaceWith';
212 element_settings.base = $(this).attr('id');
213 element_settings.element = this;
214 Drupal.ajax(element_settings);
217 // Within a live preview, make exposed widget form buttons re-trigger the
219 // @todo Revisit this after fixing Views UI to display a Preview outside
220 // of the main Edit form.
221 $('div#views-live-preview input[type=submit]')
222 .once('views-ajax').each(function (event) {
223 $(this).on('click', function () {
224 this.form.clk = this;
227 const element_settings = base_element_settings;
228 // Set the URL to go to the anchor.
229 element_settings.url = $(this.form).attr('action');
230 if (Drupal.Views.getPath(element_settings.url).substring(0, 21) !== 'admin/structure/views') {
234 element_settings.wrapper = 'views-preview-wrapper';
235 element_settings.method = 'replaceWith';
236 element_settings.event = 'click';
237 element_settings.base = $(this).attr('id');
238 element_settings.element = this;
240 Drupal.ajax(element_settings);
244 }(jQuery, Drupal, drupalSettings));