1
// Copyright 2012 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
/**
16
 * @fileoverview Utilities for detecting, adding and removing classes.  Prefer
17
 * this over goog.dom.classes for new code since it attempts to use classList
18
 * (DOMTokenList: http://dom.spec.whatwg.org/#domtokenlist) which is faster
19
 * and requires less code.
20
 *
21
 * Note: these utilities are meant to operate on HTMLElements
22
 * and may have unexpected behavior on elements with differing interfaces
23
 * (such as SVGElements).
24
 */
25

26

27
goog.provide('goog.dom.classlist');
28

29
goog.require('goog.array');
30

31

32
/**
33
 * Override this define at build-time if you know your target supports it.
34
 * @define {boolean} Whether to use the classList property (DOMTokenList).
35
 */
36
goog.define('goog.dom.classlist.ALWAYS_USE_DOM_TOKEN_LIST', false);
37

38

39
/**
40
 * Gets an array-like object of class names on an element.
41
 * @param {Element} element DOM node to get the classes of.
42
 * @return {!IArrayLike<?>} Class names on {@code element}.
43
 */
44
goog.dom.classlist.get = function(element) {
45
  if (goog.dom.classlist.ALWAYS_USE_DOM_TOKEN_LIST || element.classList) {
46
    return element.classList;
47
  }
48

49
  var className = element.className;
50
  // Some types of elements don't have a className in IE (e.g. iframes).
51
  // Furthermore, in Firefox, className is not a string when the element is
52
  // an SVG element.
53
  return goog.isString(className) && className.match(/\S+/g) || [];
54
};
55

56

57
/**
58
 * Sets the entire class name of an element.
59
 * @param {Element} element DOM node to set class of.
60
 * @param {string} className Class name(s) to apply to element.
61
 */
62
goog.dom.classlist.set = function(element, className) {
63
  element.className = className;
64
};
65

66

67
/**
68
 * Returns true if an element has a class.  This method may throw a DOM
69
 * exception for an invalid or empty class name if DOMTokenList is used.
70
 * @param {Element} element DOM node to test.
71
 * @param {string} className Class name to test for.
72
 * @return {boolean} Whether element has the class.
73
 */
74
goog.dom.classlist.contains = function(element, className) {
75
  if (goog.dom.classlist.ALWAYS_USE_DOM_TOKEN_LIST || element.classList) {
76
    return element.classList.contains(className);
77
  }
78
  return goog.array.contains(goog.dom.classlist.get(element), className);
79
};
80

81

82
/**
83
 * Adds a class to an element.  Does not add multiples of class names.  This
84
 * method may throw a DOM exception for an invalid or empty class name if
85
 * DOMTokenList is used.
86
 * @param {Element} element DOM node to add class to.
87
 * @param {string} className Class name to add.
88
 */
89
goog.dom.classlist.add = function(element, className) {
90
  if (goog.dom.classlist.ALWAYS_USE_DOM_TOKEN_LIST || element.classList) {
91
    element.classList.add(className);
92
    return;
93
  }
94

95
  if (!goog.dom.classlist.contains(element, className)) {
96
    // Ensure we add a space if this is not the first class name added.
97
    element.className +=
98
        element.className.length > 0 ? (' ' + className) : className;
99
  }
100
};
101

102

103
/**
104
 * Convenience method to add a number of class names at once.
105
 * @param {Element} element The element to which to add classes.
106
 * @param {IArrayLike<string>} classesToAdd An array-like object
107
 * containing a collection of class names to add to the element.
108
 * This method may throw a DOM exception if classesToAdd contains invalid
109
 * or empty class names.
110
 */
111
goog.dom.classlist.addAll = function(element, classesToAdd) {
112
  if (goog.dom.classlist.ALWAYS_USE_DOM_TOKEN_LIST || element.classList) {
113
    goog.array.forEach(classesToAdd, function(className) {
114
      goog.dom.classlist.add(element, className);
115
    });
116
    return;
117
  }
118

119
  var classMap = {};
120

121
  // Get all current class names into a map.
122
  goog.array.forEach(goog.dom.classlist.get(element), function(className) {
123
    classMap[className] = true;
124
  });
125

126
  // Add new class names to the map.
127
  goog.array.forEach(
128
      classesToAdd, function(className) { classMap[className] = true; });
129

130
  // Flatten the keys of the map into the className.
131
  element.className = '';
132
  for (var className in classMap) {
133
    element.className +=
134
        element.className.length > 0 ? (' ' + className) : className;
135
  }
136
};
137

138

139
/**
140
 * Removes a class from an element.  This method may throw a DOM exception
141
 * for an invalid or empty class name if DOMTokenList is used.
142
 * @param {Element} element DOM node to remove class from.
143
 * @param {string} className Class name to remove.
144
 */
145
goog.dom.classlist.remove = function(element, className) {
146
  if (goog.dom.classlist.ALWAYS_USE_DOM_TOKEN_LIST || element.classList) {
147
    element.classList.remove(className);
148
    return;
149
  }
150

151
  if (goog.dom.classlist.contains(element, className)) {
152
    // Filter out the class name.
153
    element.className = goog.array
154
                            .filter(
155
                                goog.dom.classlist.get(element),
156
                                function(c) { return c != className; })
157
                            .join(' ');
158
  }
159
};
160

161

162
/**
163
 * Removes a set of classes from an element.  Prefer this call to
164
 * repeatedly calling {@code goog.dom.classlist.remove} if you want to remove
165
 * a large set of class names at once.
166
 * @param {Element} element The element from which to remove classes.
167
 * @param {IArrayLike<string>} classesToRemove An array-like object
168
 * containing a collection of class names to remove from the element.
169
 * This method may throw a DOM exception if classesToRemove contains invalid
170
 * or empty class names.
171
 */
172
goog.dom.classlist.removeAll = function(element, classesToRemove) {
173
  if (goog.dom.classlist.ALWAYS_USE_DOM_TOKEN_LIST || element.classList) {
174
    goog.array.forEach(classesToRemove, function(className) {
175
      goog.dom.classlist.remove(element, className);
176
    });
177
    return;
178
  }
179
  // Filter out those classes in classesToRemove.
180
  element.className =
181
      goog.array
182
          .filter(
183
              goog.dom.classlist.get(element),
184
              function(className) {
185
                // If this class is not one we are trying to remove,
186
                // add it to the array of new class names.
187
                return !goog.array.contains(classesToRemove, className);
188
              })
189
          .join(' ');
190
};
191

192

193
/**
194
 * Adds or removes a class depending on the enabled argument.  This method
195
 * may throw a DOM exception for an invalid or empty class name if DOMTokenList
196
 * is used.
197
 * @param {Element} element DOM node to add or remove the class on.
198
 * @param {string} className Class name to add or remove.
199
 * @param {boolean} enabled Whether to add or remove the class (true adds,
200
 *     false removes).
201
 */
202
goog.dom.classlist.enable = function(element, className, enabled) {
203
  if (enabled) {
204
    goog.dom.classlist.add(element, className);
205
  } else {
206
    goog.dom.classlist.remove(element, className);
207
  }
208
};
209

210

211
/**
212
 * Adds or removes a set of classes depending on the enabled argument.  This
213
 * method may throw a DOM exception for an invalid or empty class name if
214
 * DOMTokenList is used.
215
 * @param {!Element} element DOM node to add or remove the class on.
216
 * @param {?IArrayLike<string>} classesToEnable An array-like object
217
 *     containing a collection of class names to add or remove from the element.
218
 * @param {boolean} enabled Whether to add or remove the classes (true adds,
219
 *     false removes).
220
 */
221
goog.dom.classlist.enableAll = function(element, classesToEnable, enabled) {
222
  var f = enabled ? goog.dom.classlist.addAll : goog.dom.classlist.removeAll;
223
  f(element, classesToEnable);
224
};
225

226

227
/**
228
 * Switches a class on an element from one to another without disturbing other
229
 * classes. If the fromClass isn't removed, the toClass won't be added.  This
230
 * method may throw a DOM exception if the class names are empty or invalid.
231
 * @param {Element} element DOM node to swap classes on.
232
 * @param {string} fromClass Class to remove.
233
 * @param {string} toClass Class to add.
234
 * @return {boolean} Whether classes were switched.
235
 */
236
goog.dom.classlist.swap = function(element, fromClass, toClass) {
237
  if (goog.dom.classlist.contains(element, fromClass)) {
238
    goog.dom.classlist.remove(element, fromClass);
239
    goog.dom.classlist.add(element, toClass);
240
    return true;
241
  }
242
  return false;
243
};
244

245

246
/**
247
 * Removes a class if an element has it, and adds it the element doesn't have
248
 * it.  Won't affect other classes on the node.  This method may throw a DOM
249
 * exception if the class name is empty or invalid.
250
 * @param {Element} element DOM node to toggle class on.
251
 * @param {string} className Class to toggle.
252
 * @return {boolean} True if class was added, false if it was removed
253
 *     (in other words, whether element has the class after this function has
254
 *     been called).
255
 */
256
goog.dom.classlist.toggle = function(element, className) {
257
  var add = !goog.dom.classlist.contains(element, className);
258
  goog.dom.classlist.enable(element, className, add);
259
  return add;
260
};
261

262

263
/**
264
 * Adds and removes a class of an element.  Unlike
265
 * {@link goog.dom.classlist.swap}, this method adds the classToAdd regardless
266
 * of whether the classToRemove was present and had been removed.  This method
267
 * may throw a DOM exception if the class names are empty or invalid.
268
 *
269
 * @param {Element} element DOM node to swap classes on.
270
 * @param {string} classToRemove Class to remove.
271
 * @param {string} classToAdd Class to add.
272
 */
273
goog.dom.classlist.addRemove = function(element, classToRemove, classToAdd) {
274
  goog.dom.classlist.remove(element, classToRemove);
275
  goog.dom.classlist.add(element, classToAdd);
276
};
277

278