classes.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. // Copyright 2006 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview Utilities for adding, removing and setting classes. Prefer
  16. * {@link goog.dom.classlist} over these utilities since goog.dom.classlist
  17. * conforms closer to the semantics of Element.classList, is faster (uses
  18. * native methods rather than parsing strings on every call) and compiles
  19. * to smaller code as a result.
  20. *
  21. * Note: these utilities are meant to operate on HTMLElements and
  22. * will not work on elements with differing interfaces (such as SVGElements).
  23. *
  24. * @author arv@google.com (Erik Arvidsson)
  25. */
  26. goog.provide('goog.dom.classes');
  27. goog.require('goog.array');
  28. /**
  29. * Sets the entire class name of an element.
  30. * @param {Node} element DOM node to set class of.
  31. * @param {string} className Class name(s) to apply to element.
  32. * @deprecated Use goog.dom.classlist.set instead.
  33. */
  34. goog.dom.classes.set = function(element, className) {
  35. element.className = className;
  36. };
  37. /**
  38. * Gets an array of class names on an element
  39. * @param {Node} element DOM node to get class of.
  40. * @return {!Array<?>} Class names on {@code element}. Some browsers add extra
  41. * properties to the array. Do not depend on any of these!
  42. * @deprecated Use goog.dom.classlist.get instead.
  43. */
  44. goog.dom.classes.get = function(element) {
  45. var className = element.className;
  46. // Some types of elements don't have a className in IE (e.g. iframes).
  47. // Furthermore, in Firefox, className is not a string when the element is
  48. // an SVG element.
  49. return goog.isString(className) && className.match(/\S+/g) || [];
  50. };
  51. /**
  52. * Adds a class or classes to an element. Does not add multiples of class names.
  53. * @param {Node} element DOM node to add class to.
  54. * @param {...string} var_args Class names to add.
  55. * @return {boolean} Whether class was added (or all classes were added).
  56. * @deprecated Use goog.dom.classlist.add or goog.dom.classlist.addAll instead.
  57. */
  58. goog.dom.classes.add = function(element, var_args) {
  59. var classes = goog.dom.classes.get(element);
  60. var args = goog.array.slice(arguments, 1);
  61. var expectedCount = classes.length + args.length;
  62. goog.dom.classes.add_(classes, args);
  63. goog.dom.classes.set(element, classes.join(' '));
  64. return classes.length == expectedCount;
  65. };
  66. /**
  67. * Removes a class or classes from an element.
  68. * @param {Node} element DOM node to remove class from.
  69. * @param {...string} var_args Class name(s) to remove.
  70. * @return {boolean} Whether all classes in {@code var_args} were found and
  71. * removed.
  72. * @deprecated Use goog.dom.classlist.remove or goog.dom.classlist.removeAll
  73. * instead.
  74. */
  75. goog.dom.classes.remove = function(element, var_args) {
  76. var classes = goog.dom.classes.get(element);
  77. var args = goog.array.slice(arguments, 1);
  78. var newClasses = goog.dom.classes.getDifference_(classes, args);
  79. goog.dom.classes.set(element, newClasses.join(' '));
  80. return newClasses.length == classes.length - args.length;
  81. };
  82. /**
  83. * Helper method for {@link goog.dom.classes.add} and
  84. * {@link goog.dom.classes.addRemove}. Adds one or more classes to the supplied
  85. * classes array.
  86. * @param {Array<string>} classes All class names for the element, will be
  87. * updated to have the classes supplied in {@code args} added.
  88. * @param {Array<string>} args Class names to add.
  89. * @private
  90. */
  91. goog.dom.classes.add_ = function(classes, args) {
  92. for (var i = 0; i < args.length; i++) {
  93. if (!goog.array.contains(classes, args[i])) {
  94. classes.push(args[i]);
  95. }
  96. }
  97. };
  98. /**
  99. * Helper method for {@link goog.dom.classes.remove} and
  100. * {@link goog.dom.classes.addRemove}. Calculates the difference of two arrays.
  101. * @param {!Array<string>} arr1 First array.
  102. * @param {!Array<string>} arr2 Second array.
  103. * @return {!Array<string>} The first array without the elements of the second
  104. * array.
  105. * @private
  106. */
  107. goog.dom.classes.getDifference_ = function(arr1, arr2) {
  108. return goog.array.filter(
  109. arr1, function(item) { return !goog.array.contains(arr2, item); });
  110. };
  111. /**
  112. * Switches a class on an element from one to another without disturbing other
  113. * classes. If the fromClass isn't removed, the toClass won't be added.
  114. * @param {Node} element DOM node to swap classes on.
  115. * @param {string} fromClass Class to remove.
  116. * @param {string} toClass Class to add.
  117. * @return {boolean} Whether classes were switched.
  118. * @deprecated Use goog.dom.classlist.swap instead.
  119. */
  120. goog.dom.classes.swap = function(element, fromClass, toClass) {
  121. var classes = goog.dom.classes.get(element);
  122. var removed = false;
  123. for (var i = 0; i < classes.length; i++) {
  124. if (classes[i] == fromClass) {
  125. goog.array.splice(classes, i--, 1);
  126. removed = true;
  127. }
  128. }
  129. if (removed) {
  130. classes.push(toClass);
  131. goog.dom.classes.set(element, classes.join(' '));
  132. }
  133. return removed;
  134. };
  135. /**
  136. * Adds zero or more classes to an element and removes zero or more as a single
  137. * operation. Unlike calling {@link goog.dom.classes.add} and
  138. * {@link goog.dom.classes.remove} separately, this is more efficient as it only
  139. * parses the class property once.
  140. *
  141. * If a class is in both the remove and add lists, it will be added. Thus,
  142. * you can use this instead of {@link goog.dom.classes.swap} when you have
  143. * more than two class names that you want to swap.
  144. *
  145. * @param {Node} element DOM node to swap classes on.
  146. * @param {?(string|Array<string>)} classesToRemove Class or classes to
  147. * remove, if null no classes are removed.
  148. * @param {?(string|Array<string>)} classesToAdd Class or classes to add, if
  149. * null no classes are added.
  150. * @deprecated Use goog.dom.classlist.addRemove instead.
  151. */
  152. goog.dom.classes.addRemove = function(element, classesToRemove, classesToAdd) {
  153. var classes = goog.dom.classes.get(element);
  154. if (goog.isString(classesToRemove)) {
  155. goog.array.remove(classes, classesToRemove);
  156. } else if (goog.isArray(classesToRemove)) {
  157. classes = goog.dom.classes.getDifference_(classes, classesToRemove);
  158. }
  159. if (goog.isString(classesToAdd) &&
  160. !goog.array.contains(classes, classesToAdd)) {
  161. classes.push(classesToAdd);
  162. } else if (goog.isArray(classesToAdd)) {
  163. goog.dom.classes.add_(classes, classesToAdd);
  164. }
  165. goog.dom.classes.set(element, classes.join(' '));
  166. };
  167. /**
  168. * Returns true if an element has a class.
  169. * @param {Node} element DOM node to test.
  170. * @param {string} className Class name to test for.
  171. * @return {boolean} Whether element has the class.
  172. * @deprecated Use goog.dom.classlist.contains instead.
  173. */
  174. goog.dom.classes.has = function(element, className) {
  175. return goog.array.contains(goog.dom.classes.get(element), className);
  176. };
  177. /**
  178. * Adds or removes a class depending on the enabled argument.
  179. * @param {Node} element DOM node to add or remove the class on.
  180. * @param {string} className Class name to add or remove.
  181. * @param {boolean} enabled Whether to add or remove the class (true adds,
  182. * false removes).
  183. * @deprecated Use goog.dom.classlist.enable or goog.dom.classlist.enableAll
  184. * instead.
  185. */
  186. goog.dom.classes.enable = function(element, className, enabled) {
  187. if (enabled) {
  188. goog.dom.classes.add(element, className);
  189. } else {
  190. goog.dom.classes.remove(element, className);
  191. }
  192. };
  193. /**
  194. * Removes a class if an element has it, and adds it the element doesn't have
  195. * it. Won't affect other classes on the node.
  196. * @param {Node} element DOM node to toggle class on.
  197. * @param {string} className Class to toggle.
  198. * @return {boolean} True if class was added, false if it was removed
  199. * (in other words, whether element has the class after this function has
  200. * been called).
  201. * @deprecated Use goog.dom.classlist.toggle instead.
  202. */
  203. goog.dom.classes.toggle = function(element, className) {
  204. var add = !goog.dom.classes.has(element, className);
  205. goog.dom.classes.enable(element, className, add);
  206. return add;
  207. };