component-classes.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
  2. import _createClass from "@babel/runtime/helpers/esm/createClass";
  3. /**
  4. * source by `component-classes`
  5. * https://github.com/component/classes.git
  6. */
  7. import indexOf from 'lodash-es/indexOf';
  8. /**
  9. * Whitespace regexp.
  10. */
  11. var re = /\s+/;
  12. export var ClassList = /*#__PURE__*/function () {
  13. function ClassList(el) {
  14. _classCallCheck(this, ClassList);
  15. if (!el || !el.nodeType) {
  16. throw new Error('A DOM element reference is required');
  17. }
  18. this.el = el;
  19. this.list = el.classList;
  20. }
  21. _createClass(ClassList, [{
  22. key: "array",
  23. value: function array() {
  24. var className = this.el.getAttribute('class') || '';
  25. var str = className.replace(/^\s+|\s+$/g, '');
  26. var arr = str.split(re);
  27. if ('' === arr[0]) arr.shift();
  28. return arr;
  29. }
  30. /**
  31. * Add class `name` if not already present.
  32. *
  33. * @param {String} name
  34. * @return {ClassList}
  35. * @api public
  36. */
  37. }, {
  38. key: "add",
  39. value: function add(name) {
  40. // classList
  41. if (this.list) {
  42. this.list.add(name);
  43. return this;
  44. }
  45. // fallback
  46. var arr = this.array();
  47. var i = indexOf(arr, name);
  48. if (!~i) arr.push(name);
  49. this.el.className = arr.join(' ');
  50. return this;
  51. }
  52. /**
  53. * Remove class `name` when present, or
  54. * pass a regular expression to remove
  55. * any which match.
  56. *
  57. * @param {String|RegExp} name
  58. * @return {ClassList}
  59. * @api public
  60. */
  61. }, {
  62. key: "remove",
  63. value: function remove(name) {
  64. if ('[object RegExp]' === toString.call(name)) {
  65. return this._removeMatching(name);
  66. }
  67. // classList
  68. if (this.list) {
  69. this.list.remove(name);
  70. return this;
  71. }
  72. // fallback
  73. var arr = this.array();
  74. var i = indexOf(arr, name);
  75. if (~i) arr.splice(i, 1);
  76. this.el.className = arr.join(' ');
  77. return this;
  78. }
  79. /**
  80. * Remove all classes matching `re`.
  81. *
  82. * @param {RegExp} re
  83. * @return {ClassList}
  84. * @api private
  85. */
  86. }, {
  87. key: "_removeMatching",
  88. value: function _removeMatching(re) {
  89. var arr = this.array();
  90. for (var i = 0; i < arr.length; i++) {
  91. if (re.test(arr[i])) {
  92. this.remove(arr[i]);
  93. }
  94. }
  95. return this;
  96. }
  97. /**
  98. * Toggle class `name`, can force state via `force`.
  99. *
  100. * For browsers that support classList, but do not support `force` yet,
  101. * the mistake will be detected and corrected.
  102. *
  103. * @param {String} name
  104. * @param {Boolean} force
  105. * @return {ClassList}
  106. * @api public
  107. */
  108. }, {
  109. key: "toggle",
  110. value: function toggle(name, force) {
  111. // classList
  112. if (this.list) {
  113. if ('undefined' !== typeof force) {
  114. if (force !== this.list.toggle(name, force)) {
  115. this.list.toggle(name); // toggle again to correct
  116. }
  117. } else {
  118. this.list.toggle(name);
  119. }
  120. return this;
  121. }
  122. // fallback
  123. if ('undefined' !== typeof force) {
  124. if (!force) {
  125. this.remove(name);
  126. } else {
  127. this.add(name);
  128. }
  129. } else {
  130. if (this.has(name)) {
  131. this.remove(name);
  132. } else {
  133. this.add(name);
  134. }
  135. }
  136. return this;
  137. }
  138. /**
  139. * Check if class `name` is present.
  140. *
  141. * @param {String} name
  142. * @api public
  143. */
  144. }, {
  145. key: "has",
  146. value: function has(name) {
  147. return this.list ? this.list.contains(name) : !!~indexOf(this.array(), name);
  148. }
  149. /**
  150. * Check if class `name` is present.
  151. *
  152. * @param {String} name
  153. * @api public
  154. */
  155. }, {
  156. key: "contains",
  157. value: function contains(name) {
  158. return this.has(name);
  159. }
  160. }]);
  161. return ClassList;
  162. }();
  163. /**
  164. * Wrap `el` in a `ClassList`.
  165. *
  166. * @param {Element} el
  167. * @return {ClassList}
  168. * @api public
  169. */
  170. export default function (el) {
  171. return new ClassList(el);
  172. }