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
/**
16
 * @fileoverview Utilities for adding, removing and setting classes.  Prefer
17
 * {@link goog.dom.classlist} over these utilities since goog.dom.classlist
18
 * conforms closer to the semantics of Element.classList, is faster (uses
19
 * native methods rather than parsing strings on every call) and compiles
20
 * to smaller code as a result.
21
 *
22
 * Note: these utilities are meant to operate on HTMLElements and
23
 * will not work on elements with differing interfaces (such as SVGElements).
24
 *
25
 * @author [email protected] (Erik Arvidsson)
26
 */
27

28

29
goog.provide('goog.dom.classes');
30

31
goog.require('goog.array');
32

33

34
/**
35
 * Sets the entire class name of an element.
36
 * @param {Node} element DOM node to set class of.
37
 * @param {string} className Class name(s) to apply to element.
38
 * @deprecated Use goog.dom.classlist.set instead.
39
 */
40
goog.dom.classes.set = function(element, className) {
41
  element.className = className;
42
};
43

44

45
/**
46
 * Gets an array of class names on an element
47
 * @param {Node} element DOM node to get class of.
48
 * @return {!Array<?>} Class names on {@code element}. Some browsers add extra
49
 *     properties to the array. Do not depend on any of these!
50
 * @deprecated Use goog.dom.classlist.get instead.
51
 */
52
goog.dom.classes.get = function(element) {
53
  var className = element.className;
54
  // Some types of elements don't have a className in IE (e.g. iframes).
55
  // Furthermore, in Firefox, className is not a string when the element is
56
  // an SVG element.
57
  return goog.isString(className) && className.match(/\S+/g) || [];
58
};
59

60

61
/**
62
 * Adds a class or classes to an element. Does not add multiples of class names.
63
 * @param {Node} element DOM node to add class to.
64
 * @param {...string} var_args Class names to add.
65
 * @return {boolean} Whether class was added (or all classes were added).
66
 * @deprecated Use goog.dom.classlist.add or goog.dom.classlist.addAll instead.
67
 */
68
goog.dom.classes.add = function(element, var_args) {
69
  var classes = goog.dom.classes.get(element);
70
  var args = goog.array.slice(arguments, 1);
71
  var expectedCount = classes.length + args.length;
72
  goog.dom.classes.add_(classes, args);
73
  goog.dom.classes.set(element, classes.join(' '));
74
  return classes.length == expectedCount;
75
};
76

77

78
/**
79
 * Removes a class or classes from an element.
80
 * @param {Node} element DOM node to remove class from.
81
 * @param {...string} var_args Class name(s) to remove.
82
 * @return {boolean} Whether all classes in {@code var_args} were found and
83
 *     removed.
84
 * @deprecated Use goog.dom.classlist.remove or goog.dom.classlist.removeAll
85
 *     instead.
86
 */
87
goog.dom.classes.remove = function(element, var_args) {
88
  var classes = goog.dom.classes.get(element);
89
  var args = goog.array.slice(arguments, 1);
90
  var newClasses = goog.dom.classes.getDifference_(classes, args);
91
  goog.dom.classes.set(element, newClasses.join(' '));
92
  return newClasses.length == classes.length - args.length;
93
};
94

95

96
/**
97
 * Helper method for {@link goog.dom.classes.add} and
98
 * {@link goog.dom.classes.addRemove}. Adds one or more classes to the supplied
99
 * classes array.
100
 * @param {Array<string>} classes All class names for the element, will be
101
 *     updated to have the classes supplied in {@code args} added.
102
 * @param {Array<string>} args Class names to add.
103
 * @private
104
 */
105
goog.dom.classes.add_ = function(classes, args) {
106
  for (var i = 0; i < args.length; i++) {
107
    if (!goog.array.contains(classes, args[i])) {
108
      classes.push(args[i]);
109
    }
110
  }
111
};
112

113

114
/**
115
 * Helper method for {@link goog.dom.classes.remove} and
116
 * {@link goog.dom.classes.addRemove}. Calculates the difference of two arrays.
117
 * @param {!Array<string>} arr1 First array.
118
 * @param {!Array<string>} arr2 Second array.
119
 * @return {!Array<string>} The first array without the elements of the second
120
 *     array.
121
 * @private
122
 */
123
goog.dom.classes.getDifference_ = function(arr1, arr2) {
124
  return goog.array.filter(
125
      arr1, function(item) { return !goog.array.contains(arr2, item); });
126
};
127

128

129
/**
130
 * Switches a class on an element from one to another without disturbing other
131
 * classes. If the fromClass isn't removed, the toClass won't be added.
132
 * @param {Node} element DOM node to swap classes on.
133
 * @param {string} fromClass Class to remove.
134
 * @param {string} toClass Class to add.
135
 * @return {boolean} Whether classes were switched.
136
 * @deprecated Use goog.dom.classlist.swap instead.
137
 */
138
goog.dom.classes.swap = function(element, fromClass, toClass) {
139
  var classes = goog.dom.classes.get(element);
140

141
  var removed = false;
142
  for (var i = 0; i < classes.length; i++) {
143
    if (classes[i] == fromClass) {
144
      goog.array.splice(classes, i--, 1);
145
      removed = true;
146
    }
147
  }
148

149
  if (removed) {
150
    classes.push(toClass);
151
    goog.dom.classes.set(element, classes.join(' '));
152
  }
153

154
  return removed;
155
};
156

157

158
/**
159
 * Adds zero or more classes to an element and removes zero or more as a single
160
 * operation. Unlike calling {@link goog.dom.classes.add} and
161
 * {@link goog.dom.classes.remove} separately, this is more efficient as it only
162
 * parses the class property once.
163
 *
164
 * If a class is in both the remove and add lists, it will be added. Thus,
165
 * you can use this instead of {@link goog.dom.classes.swap} when you have
166
 * more than two class names that you want to swap.
167
 *
168
 * @param {Node} element DOM node to swap classes on.
169
 * @param {?(string|Array<string>)} classesToRemove Class or classes to
170
 *     remove, if null no classes are removed.
171
 * @param {?(string|Array<string>)} classesToAdd Class or classes to add, if
172
 *     null no classes are added.
173
 * @deprecated Use goog.dom.classlist.addRemove instead.
174
 */
175
goog.dom.classes.addRemove = function(element, classesToRemove, classesToAdd) {
176
  var classes = goog.dom.classes.get(element);
177
  if (goog.isString(classesToRemove)) {
178
    goog.array.remove(classes, classesToRemove);
179
  } else if (goog.isArray(classesToRemove)) {
180
    classes = goog.dom.classes.getDifference_(classes, classesToRemove);
181
  }
182

183
  if (goog.isString(classesToAdd) &&
184
      !goog.array.contains(classes, classesToAdd)) {
185
    classes.push(classesToAdd);
186
  } else if (goog.isArray(classesToAdd)) {
187
    goog.dom.classes.add_(classes, classesToAdd);
188
  }
189

190
  goog.dom.classes.set(element, classes.join(' '));
191
};
192

193

194
/**
195
 * Returns true if an element has a class.
196
 * @param {Node} element DOM node to test.
197
 * @param {string} className Class name to test for.
198
 * @return {boolean} Whether element has the class.
199
 * @deprecated Use goog.dom.classlist.contains instead.
200
 */
201
goog.dom.classes.has = function(element, className) {
202
  return goog.array.contains(goog.dom.classes.get(element), className);
203
};
204

205

206
/**
207
 * Adds or removes a class depending on the enabled argument.
208
 * @param {Node} element DOM node to add or remove the class on.
209
 * @param {string} className Class name to add or remove.
210
 * @param {boolean} enabled Whether to add or remove the class (true adds,
211
 *     false removes).
212
 * @deprecated Use goog.dom.classlist.enable or goog.dom.classlist.enableAll
213
 *     instead.
214
 */
215
goog.dom.classes.enable = function(element, className, enabled) {
216
  if (enabled) {
217
    goog.dom.classes.add(element, className);
218
  } else {
219
    goog.dom.classes.remove(element, className);
220
  }
221
};
222

223

224
/**
225
 * Removes a class if an element has it, and adds it the element doesn't have
226
 * it.  Won't affect other classes on the node.
227
 * @param {Node} element DOM node to toggle class on.
228
 * @param {string} className Class to toggle.
229
 * @return {boolean} True if class was added, false if it was removed
230
 *     (in other words, whether element has the class after this function has
231
 *     been called).
232
 * @deprecated Use goog.dom.classlist.toggle instead.
233
 */
234
goog.dom.classes.toggle = function(element, className) {
235
  var add = !goog.dom.classes.has(element, className);
236
  goog.dom.classes.enable(element, className, add);
237
  return add;
238
};
239

240