states.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  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 states = {
  9. postponed: []
  10. };
  11. Drupal.states = states;
  12. function invert(a, invertState) {
  13. return invertState && typeof a !== 'undefined' ? !a : a;
  14. }
  15. function _compare2(a, b) {
  16. if (a === b) {
  17. return typeof a === 'undefined' ? a : true;
  18. }
  19. return typeof a === 'undefined' || typeof b === 'undefined';
  20. }
  21. function ternary(a, b) {
  22. if (typeof a === 'undefined') {
  23. return b;
  24. }
  25. if (typeof b === 'undefined') {
  26. return a;
  27. }
  28. return a && b;
  29. }
  30. Drupal.behaviors.states = {
  31. attach: function attach(context, settings) {
  32. var $states = $(context).find('[data-drupal-states]');
  33. var il = $states.length;
  34. var _loop = function _loop(i) {
  35. var config = JSON.parse($states[i].getAttribute('data-drupal-states'));
  36. Object.keys(config || {}).forEach(function (state) {
  37. new states.Dependent({
  38. element: $($states[i]),
  39. state: states.State.sanitize(state),
  40. constraints: config[state]
  41. });
  42. });
  43. };
  44. for (var i = 0; i < il; i++) {
  45. _loop(i);
  46. }
  47. while (states.postponed.length) {
  48. states.postponed.shift()();
  49. }
  50. }
  51. };
  52. states.Dependent = function (args) {
  53. var _this = this;
  54. $.extend(this, { values: {}, oldValue: null }, args);
  55. this.dependees = this.getDependees();
  56. Object.keys(this.dependees || {}).forEach(function (selector) {
  57. _this.initializeDependee(selector, _this.dependees[selector]);
  58. });
  59. };
  60. states.Dependent.comparisons = {
  61. RegExp: function RegExp(reference, value) {
  62. return reference.test(value);
  63. },
  64. Function: function Function(reference, value) {
  65. return reference(value);
  66. },
  67. Number: function Number(reference, value) {
  68. return typeof value === 'string' ? _compare2(reference.toString(), value) : _compare2(reference, value);
  69. }
  70. };
  71. states.Dependent.prototype = {
  72. initializeDependee: function initializeDependee(selector, dependeeStates) {
  73. var _this2 = this;
  74. this.values[selector] = {};
  75. Object.keys(dependeeStates).forEach(function (i) {
  76. var state = dependeeStates[i];
  77. if ($.inArray(state, dependeeStates) === -1) {
  78. return;
  79. }
  80. state = states.State.sanitize(state);
  81. _this2.values[selector][state.name] = null;
  82. $(selector).on('state:' + state, { selector: selector, state: state }, function (e) {
  83. _this2.update(e.data.selector, e.data.state, e.value);
  84. });
  85. new states.Trigger({ selector: selector, state: state });
  86. });
  87. },
  88. compare: function compare(reference, selector, state) {
  89. var value = this.values[selector][state.name];
  90. if (reference.constructor.name in states.Dependent.comparisons) {
  91. return states.Dependent.comparisons[reference.constructor.name](reference, value);
  92. }
  93. return _compare2(reference, value);
  94. },
  95. update: function update(selector, state, value) {
  96. if (value !== this.values[selector][state.name]) {
  97. this.values[selector][state.name] = value;
  98. this.reevaluate();
  99. }
  100. },
  101. reevaluate: function reevaluate() {
  102. var value = this.verifyConstraints(this.constraints);
  103. if (value !== this.oldValue) {
  104. this.oldValue = value;
  105. value = invert(value, this.state.invert);
  106. this.element.trigger({
  107. type: 'state:' + this.state,
  108. value: value,
  109. trigger: true
  110. });
  111. }
  112. },
  113. verifyConstraints: function verifyConstraints(constraints, selector) {
  114. var result = void 0;
  115. if ($.isArray(constraints)) {
  116. var hasXor = $.inArray('xor', constraints) === -1;
  117. var len = constraints.length;
  118. for (var i = 0; i < len; i++) {
  119. if (constraints[i] !== 'xor') {
  120. var constraint = this.checkConstraints(constraints[i], selector, i);
  121. if (constraint && (hasXor || result)) {
  122. return hasXor;
  123. }
  124. result = result || constraint;
  125. }
  126. }
  127. } else if ($.isPlainObject(constraints)) {
  128. for (var n in constraints) {
  129. if (constraints.hasOwnProperty(n)) {
  130. result = ternary(result, this.checkConstraints(constraints[n], selector, n));
  131. if (result === false) {
  132. return false;
  133. }
  134. }
  135. }
  136. }
  137. return result;
  138. },
  139. checkConstraints: function checkConstraints(value, selector, state) {
  140. if (typeof state !== 'string' || /[0-9]/.test(state[0])) {
  141. state = null;
  142. } else if (typeof selector === 'undefined') {
  143. selector = state;
  144. state = null;
  145. }
  146. if (state !== null) {
  147. state = states.State.sanitize(state);
  148. return invert(this.compare(value, selector, state), state.invert);
  149. }
  150. return this.verifyConstraints(value, selector);
  151. },
  152. getDependees: function getDependees() {
  153. var cache = {};
  154. var _compare = this.compare;
  155. this.compare = function (reference, selector, state) {
  156. (cache[selector] || (cache[selector] = [])).push(state.name);
  157. };
  158. this.verifyConstraints(this.constraints);
  159. this.compare = _compare;
  160. return cache;
  161. }
  162. };
  163. states.Trigger = function (args) {
  164. $.extend(this, args);
  165. if (this.state in states.Trigger.states) {
  166. this.element = $(this.selector);
  167. if (!this.element.data('trigger:' + this.state)) {
  168. this.initialize();
  169. }
  170. }
  171. };
  172. states.Trigger.prototype = {
  173. initialize: function initialize() {
  174. var _this3 = this;
  175. var trigger = states.Trigger.states[this.state];
  176. if (typeof trigger === 'function') {
  177. trigger.call(window, this.element);
  178. } else {
  179. Object.keys(trigger || {}).forEach(function (event) {
  180. _this3.defaultTrigger(event, trigger[event]);
  181. });
  182. }
  183. this.element.data('trigger:' + this.state, true);
  184. },
  185. defaultTrigger: function defaultTrigger(event, valueFn) {
  186. var oldValue = valueFn.call(this.element);
  187. this.element.on(event, $.proxy(function (e) {
  188. var value = valueFn.call(this.element, e);
  189. if (oldValue !== value) {
  190. this.element.trigger({
  191. type: 'state:' + this.state,
  192. value: value,
  193. oldValue: oldValue
  194. });
  195. oldValue = value;
  196. }
  197. }, this));
  198. states.postponed.push($.proxy(function () {
  199. this.element.trigger({
  200. type: 'state:' + this.state,
  201. value: oldValue,
  202. oldValue: null
  203. });
  204. }, this));
  205. }
  206. };
  207. states.Trigger.states = {
  208. empty: {
  209. keyup: function keyup() {
  210. return this.val() === '';
  211. }
  212. },
  213. checked: {
  214. change: function change() {
  215. var checked = false;
  216. this.each(function () {
  217. checked = $(this).prop('checked');
  218. return !checked;
  219. });
  220. return checked;
  221. }
  222. },
  223. value: {
  224. keyup: function keyup() {
  225. if (this.length > 1) {
  226. return this.filter(':checked').val() || false;
  227. }
  228. return this.val();
  229. },
  230. change: function change() {
  231. if (this.length > 1) {
  232. return this.filter(':checked').val() || false;
  233. }
  234. return this.val();
  235. }
  236. },
  237. collapsed: {
  238. collapsed: function collapsed(e) {
  239. return typeof e !== 'undefined' && 'value' in e ? e.value : !this.is('[open]');
  240. }
  241. }
  242. };
  243. states.State = function (state) {
  244. this.pristine = state;
  245. this.name = state;
  246. var process = true;
  247. do {
  248. while (this.name.charAt(0) === '!') {
  249. this.name = this.name.substring(1);
  250. this.invert = !this.invert;
  251. }
  252. if (this.name in states.State.aliases) {
  253. this.name = states.State.aliases[this.name];
  254. } else {
  255. process = false;
  256. }
  257. } while (process);
  258. };
  259. states.State.sanitize = function (state) {
  260. if (state instanceof states.State) {
  261. return state;
  262. }
  263. return new states.State(state);
  264. };
  265. states.State.aliases = {
  266. enabled: '!disabled',
  267. invisible: '!visible',
  268. invalid: '!valid',
  269. untouched: '!touched',
  270. optional: '!required',
  271. filled: '!empty',
  272. unchecked: '!checked',
  273. irrelevant: '!relevant',
  274. expanded: '!collapsed',
  275. open: '!collapsed',
  276. closed: 'collapsed',
  277. readwrite: '!readonly'
  278. };
  279. states.State.prototype = {
  280. invert: false,
  281. toString: function toString() {
  282. return this.name;
  283. }
  284. };
  285. var $document = $(document);
  286. $document.on('state:disabled', function (e) {
  287. if (e.trigger) {
  288. $(e.target).prop('disabled', e.value).closest('.js-form-item, .js-form-submit, .js-form-wrapper').toggleClass('form-disabled', e.value).find('select, input, textarea').prop('disabled', e.value);
  289. }
  290. });
  291. $document.on('state:required', function (e) {
  292. if (e.trigger) {
  293. if (e.value) {
  294. var label = 'label' + (e.target.id ? '[for=' + e.target.id + ']' : '');
  295. var $label = $(e.target).attr({ required: 'required', 'aria-required': 'true' }).closest('.js-form-item, .js-form-wrapper').find(label);
  296. if (!$label.hasClass('js-form-required').length) {
  297. $label.addClass('js-form-required form-required');
  298. }
  299. } else {
  300. $(e.target).removeAttr('required aria-required').closest('.js-form-item, .js-form-wrapper').find('label.js-form-required').removeClass('js-form-required form-required');
  301. }
  302. }
  303. });
  304. $document.on('state:visible', function (e) {
  305. if (e.trigger) {
  306. $(e.target).closest('.js-form-item, .js-form-submit, .js-form-wrapper').toggle(e.value);
  307. }
  308. });
  309. $document.on('state:checked', function (e) {
  310. if (e.trigger) {
  311. $(e.target).prop('checked', e.value);
  312. }
  313. });
  314. $document.on('state:collapsed', function (e) {
  315. if (e.trigger) {
  316. if ($(e.target).is('[open]') === e.value) {
  317. $(e.target).find('> summary').trigger('click');
  318. }
  319. }
  320. });
  321. })(jQuery, Drupal);