form.es6.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. /**
  2. * @file
  3. * Form features.
  4. */
  5. /**
  6. * Triggers when a value in the form changed.
  7. *
  8. * The event triggers when content is typed or pasted in a text field, before
  9. * the change event triggers.
  10. *
  11. * @event formUpdated
  12. */
  13. /**
  14. * Triggers when a click on a page fragment link or hash change is detected.
  15. *
  16. * The event triggers when the fragment in the URL changes (a hash change) and
  17. * when a link containing a fragment identifier is clicked. In case the hash
  18. * changes due to a click this event will only be triggered once.
  19. *
  20. * @event formFragmentLinkClickOrHashChange
  21. */
  22. (function ($, Drupal, debounce) {
  23. /**
  24. * Retrieves the summary for the first element.
  25. *
  26. * @return {string}
  27. * The text of the summary.
  28. */
  29. $.fn.drupalGetSummary = function () {
  30. const callback = this.data('summaryCallback');
  31. return (this[0] && callback) ? $.trim(callback(this[0])) : '';
  32. };
  33. /**
  34. * Sets the summary for all matched elements.
  35. *
  36. * @param {function} callback
  37. * Either a function that will be called each time the summary is
  38. * retrieved or a string (which is returned each time).
  39. *
  40. * @return {jQuery}
  41. * jQuery collection of the current element.
  42. *
  43. * @fires event:summaryUpdated
  44. *
  45. * @listens event:formUpdated
  46. */
  47. $.fn.drupalSetSummary = function (callback) {
  48. const self = this;
  49. // To facilitate things, the callback should always be a function. If it's
  50. // not, we wrap it into an anonymous function which just returns the value.
  51. if (typeof callback !== 'function') {
  52. const val = callback;
  53. callback = function () {
  54. return val;
  55. };
  56. }
  57. return this
  58. .data('summaryCallback', callback)
  59. // To prevent duplicate events, the handlers are first removed and then
  60. // (re-)added.
  61. .off('formUpdated.summary')
  62. .on('formUpdated.summary', () => {
  63. self.trigger('summaryUpdated');
  64. })
  65. // The actual summaryUpdated handler doesn't fire when the callback is
  66. // changed, so we have to do this manually.
  67. .trigger('summaryUpdated');
  68. };
  69. /**
  70. * Prevents consecutive form submissions of identical form values.
  71. *
  72. * Repetitive form submissions that would submit the identical form values
  73. * are prevented, unless the form values are different to the previously
  74. * submitted values.
  75. *
  76. * This is a simplified re-implementation of a user-agent behavior that
  77. * should be natively supported by major web browsers, but at this time, only
  78. * Firefox has a built-in protection.
  79. *
  80. * A form value-based approach ensures that the constraint is triggered for
  81. * consecutive, identical form submissions only. Compared to that, a form
  82. * button-based approach would (1) rely on [visible] buttons to exist where
  83. * technically not required and (2) require more complex state management if
  84. * there are multiple buttons in a form.
  85. *
  86. * This implementation is based on form-level submit events only and relies
  87. * on jQuery's serialize() method to determine submitted form values. As such,
  88. * the following limitations exist:
  89. *
  90. * - Event handlers on form buttons that preventDefault() do not receive a
  91. * double-submit protection. That is deemed to be fine, since such button
  92. * events typically trigger reversible client-side or server-side
  93. * operations that are local to the context of a form only.
  94. * - Changed values in advanced form controls, such as file inputs, are not
  95. * part of the form values being compared between consecutive form submits
  96. * (due to limitations of jQuery.serialize()). That is deemed to be
  97. * acceptable, because if the user forgot to attach a file, then the size of
  98. * HTTP payload will most likely be small enough to be fully passed to the
  99. * server endpoint within (milli)seconds. If a user mistakenly attached a
  100. * wrong file and is technically versed enough to cancel the form submission
  101. * (and HTTP payload) in order to attach a different file, then that
  102. * edge-case is not supported here.
  103. *
  104. * Lastly, all forms submitted via HTTP GET are idempotent by definition of
  105. * HTTP standards, so excluded in this implementation.
  106. *
  107. * @type {Drupal~behavior}
  108. */
  109. Drupal.behaviors.formSingleSubmit = {
  110. attach() {
  111. function onFormSubmit(e) {
  112. const $form = $(e.currentTarget);
  113. const formValues = $form.serialize();
  114. const previousValues = $form.attr('data-drupal-form-submit-last');
  115. if (previousValues === formValues) {
  116. e.preventDefault();
  117. }
  118. else {
  119. $form.attr('data-drupal-form-submit-last', formValues);
  120. }
  121. }
  122. $('body').once('form-single-submit')
  123. .on('submit.singleSubmit', 'form:not([method~="GET"])', onFormSubmit);
  124. },
  125. };
  126. /**
  127. * Sends a 'formUpdated' event each time a form element is modified.
  128. *
  129. * @param {HTMLElement} element
  130. * The element to trigger a form updated event on.
  131. *
  132. * @fires event:formUpdated
  133. */
  134. function triggerFormUpdated(element) {
  135. $(element).trigger('formUpdated');
  136. }
  137. /**
  138. * Collects the IDs of all form fields in the given form.
  139. *
  140. * @param {HTMLFormElement} form
  141. * The form element to search.
  142. *
  143. * @return {Array}
  144. * Array of IDs for form fields.
  145. */
  146. function fieldsList(form) {
  147. const $fieldList = $(form).find('[name]').map((index, element) =>
  148. // We use id to avoid name duplicates on radio fields and filter out
  149. // elements with a name but no id.
  150. element.getAttribute('id'));
  151. // Return a true array.
  152. return $.makeArray($fieldList);
  153. }
  154. /**
  155. * Triggers the 'formUpdated' event on form elements when they are modified.
  156. *
  157. * @type {Drupal~behavior}
  158. *
  159. * @prop {Drupal~behaviorAttach} attach
  160. * Attaches formUpdated behaviors.
  161. * @prop {Drupal~behaviorDetach} detach
  162. * Detaches formUpdated behaviors.
  163. *
  164. * @fires event:formUpdated
  165. */
  166. Drupal.behaviors.formUpdated = {
  167. attach(context) {
  168. const $context = $(context);
  169. const contextIsForm = $context.is('form');
  170. const $forms = (contextIsForm ? $context : $context.find('form')).once('form-updated');
  171. let formFields;
  172. if ($forms.length) {
  173. // Initialize form behaviors, use $.makeArray to be able to use native
  174. // forEach array method and have the callback parameters in the right
  175. // order.
  176. $.makeArray($forms).forEach((form) => {
  177. const events = 'change.formUpdated input.formUpdated ';
  178. const eventHandler = debounce((event) => {
  179. triggerFormUpdated(event.target);
  180. }, 300);
  181. formFields = fieldsList(form).join(',');
  182. form.setAttribute('data-drupal-form-fields', formFields);
  183. $(form).on(events, eventHandler);
  184. });
  185. }
  186. // On ajax requests context is the form element.
  187. if (contextIsForm) {
  188. formFields = fieldsList(context).join(',');
  189. // @todo replace with form.getAttribute() when #1979468 is in.
  190. const currentFields = $(context).attr('data-drupal-form-fields');
  191. // If there has been a change in the fields or their order, trigger
  192. // formUpdated.
  193. if (formFields !== currentFields) {
  194. triggerFormUpdated(context);
  195. }
  196. }
  197. },
  198. detach(context, settings, trigger) {
  199. const $context = $(context);
  200. const contextIsForm = $context.is('form');
  201. if (trigger === 'unload') {
  202. const $forms = (contextIsForm ? $context : $context.find('form')).removeOnce('form-updated');
  203. if ($forms.length) {
  204. $.makeArray($forms).forEach((form) => {
  205. form.removeAttribute('data-drupal-form-fields');
  206. $(form).off('.formUpdated');
  207. });
  208. }
  209. }
  210. },
  211. };
  212. /**
  213. * Prepopulate form fields with information from the visitor browser.
  214. *
  215. * @type {Drupal~behavior}
  216. *
  217. * @prop {Drupal~behaviorAttach} attach
  218. * Attaches the behavior for filling user info from browser.
  219. */
  220. Drupal.behaviors.fillUserInfoFromBrowser = {
  221. attach(context, settings) {
  222. const userInfo = ['name', 'mail', 'homepage'];
  223. const $forms = $('[data-user-info-from-browser]').once('user-info-from-browser');
  224. if ($forms.length) {
  225. userInfo.map((info) => {
  226. const $element = $forms.find(`[name=${info}]`);
  227. const browserData = localStorage.getItem(`Drupal.visitor.${info}`);
  228. const emptyOrDefault = ($element.val() === '' || ($element.attr('data-drupal-default-value') === $element.val()));
  229. if ($element.length && emptyOrDefault && browserData) {
  230. $element.val(browserData);
  231. }
  232. });
  233. }
  234. $forms.on('submit', () => {
  235. userInfo.map((info) => {
  236. const $element = $forms.find(`[name=${info}]`);
  237. if ($element.length) {
  238. localStorage.setItem(`Drupal.visitor.${info}`, $element.val());
  239. }
  240. });
  241. });
  242. },
  243. };
  244. /**
  245. * Sends a fragment interaction event on a hash change or fragment link click.
  246. *
  247. * @param {jQuery.Event} e
  248. * The event triggered.
  249. *
  250. * @fires event:formFragmentLinkClickOrHashChange
  251. */
  252. const handleFragmentLinkClickOrHashChange = (e) => {
  253. let url;
  254. if (e.type === 'click') {
  255. url = e.currentTarget.location ? e.currentTarget.location : e.currentTarget;
  256. }
  257. else {
  258. url = location;
  259. }
  260. const hash = url.hash.substr(1);
  261. if (hash) {
  262. const $target = $(`#${hash}`);
  263. $('body').trigger('formFragmentLinkClickOrHashChange', [$target]);
  264. /**
  265. * Clicking a fragment link or a hash change should focus the target
  266. * element, but event timing issues in multiple browsers require a timeout.
  267. */
  268. setTimeout(() => $target.trigger('focus'), 300);
  269. }
  270. };
  271. const debouncedHandleFragmentLinkClickOrHashChange = debounce(handleFragmentLinkClickOrHashChange, 300, true);
  272. // Binds a listener to handle URL fragment changes.
  273. $(window).on('hashchange.form-fragment', debouncedHandleFragmentLinkClickOrHashChange);
  274. /**
  275. * Binds a listener to handle clicks on fragment links and absolute URL links
  276. * containing a fragment, this is needed next to the hash change listener
  277. * because clicking such links doesn't trigger a hash change when the fragment
  278. * is already in the URL.
  279. */
  280. $(document).on('click.form-fragment', 'a[href*="#"]', debouncedHandleFragmentLinkClickOrHashChange);
  281. }(jQuery, Drupal, Drupal.debounce));