You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.6 KiB
109 lines
3.6 KiB
10 years ago
|
/**
|
||
|
* Copyright 2013-2015, Facebook, Inc.
|
||
|
* All rights reserved.
|
||
|
*
|
||
|
* This source code is licensed under the BSD-style license found in the
|
||
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
*
|
||
|
* @providesModule CSSCore
|
||
|
* @typechecks
|
||
|
*/
|
||
|
|
||
|
var invariant = require("./invariant");
|
||
|
|
||
|
/**
|
||
|
* The CSSCore module specifies the API (and implements most of the methods)
|
||
|
* that should be used when dealing with the display of elements (via their
|
||
|
* CSS classes and visibility on screen. It is an API focused on mutating the
|
||
|
* display and not reading it as no logical state should be encoded in the
|
||
|
* display of elements.
|
||
|
*/
|
||
|
|
||
|
var CSSCore = {
|
||
|
|
||
|
/**
|
||
|
* Adds the class passed in to the element if it doesn't already have it.
|
||
|
*
|
||
|
* @param {DOMElement} element the element to set the class on
|
||
|
* @param {string} className the CSS className
|
||
|
* @return {DOMElement} the element passed in
|
||
|
*/
|
||
|
addClass: function(element, className) {
|
||
|
("production" !== process.env.NODE_ENV ? invariant(
|
||
|
!/\s/.test(className),
|
||
|
'CSSCore.addClass takes only a single class name. "%s" contains ' +
|
||
|
'multiple classes.', className
|
||
|
) : invariant(!/\s/.test(className)));
|
||
|
|
||
|
if (className) {
|
||
|
if (element.classList) {
|
||
|
element.classList.add(className);
|
||
|
} else if (!CSSCore.hasClass(element, className)) {
|
||
|
element.className = element.className + ' ' + className;
|
||
|
}
|
||
|
}
|
||
|
return element;
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Removes the class passed in from the element
|
||
|
*
|
||
|
* @param {DOMElement} element the element to set the class on
|
||
|
* @param {string} className the CSS className
|
||
|
* @return {DOMElement} the element passed in
|
||
|
*/
|
||
|
removeClass: function(element, className) {
|
||
|
("production" !== process.env.NODE_ENV ? invariant(
|
||
|
!/\s/.test(className),
|
||
|
'CSSCore.removeClass takes only a single class name. "%s" contains ' +
|
||
|
'multiple classes.', className
|
||
|
) : invariant(!/\s/.test(className)));
|
||
|
|
||
|
if (className) {
|
||
|
if (element.classList) {
|
||
|
element.classList.remove(className);
|
||
|
} else if (CSSCore.hasClass(element, className)) {
|
||
|
element.className = element.className
|
||
|
.replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)', 'g'), '$1')
|
||
|
.replace(/\s+/g, ' ') // multiple spaces to one
|
||
|
.replace(/^\s*|\s*$/g, ''); // trim the ends
|
||
|
}
|
||
|
}
|
||
|
return element;
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Helper to add or remove a class from an element based on a condition.
|
||
|
*
|
||
|
* @param {DOMElement} element the element to set the class on
|
||
|
* @param {string} className the CSS className
|
||
|
* @param {*} bool condition to whether to add or remove the class
|
||
|
* @return {DOMElement} the element passed in
|
||
|
*/
|
||
|
conditionClass: function(element, className, bool) {
|
||
|
return (bool ? CSSCore.addClass : CSSCore.removeClass)(element, className);
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Tests whether the element has the class specified.
|
||
|
*
|
||
|
* @param {DOMNode|DOMWindow} element the element to set the class on
|
||
|
* @param {string} className the CSS className
|
||
|
* @return {boolean} true if the element has the class, false if not
|
||
|
*/
|
||
|
hasClass: function(element, className) {
|
||
|
("production" !== process.env.NODE_ENV ? invariant(
|
||
|
!/\s/.test(className),
|
||
|
'CSS.hasClass takes only a single class name.'
|
||
|
) : invariant(!/\s/.test(className)));
|
||
|
if (element.classList) {
|
||
|
return !!className && element.classList.contains(className);
|
||
|
}
|
||
|
return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
|
||
|
}
|
||
|
|
||
|
};
|
||
|
|
||
|
module.exports = CSSCore;
|