states.js 10 KB

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