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