123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- /**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @providesModule CSSCore
- * @typechecks
- */
- const 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.
- */
- /* Slow implementation for browsers that don't natively support .matches() */
- function matchesSelector_SLOW(element, selector) {
- let root = element;
- while (root.parentNode) {
- root = root.parentNode;
- }
- const all = root.querySelectorAll(selector);
- return Array.prototype.indexOf.call(all, element) !== -1;
- }
- const 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) {
- invariant(!/\s/.test(className), 'CSSCore.addClass takes only a single class name. "%s" contains ' + 'multiple classes.', 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) {
- invariant(!/\s/.test(className), 'CSSCore.removeClass takes only a single class name. "%s" contains ' + 'multiple classes.', 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 check 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) {
- invariant(!/\s/.test(className), 'CSS.hasClass takes only a single class name.');
- if (element.classList) {
- return !!className && element.classList.contains(className);
- }
- return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
- },
- /**
- * Tests whether the element matches the selector specified
- *
- * @param {DOMNode|DOMWindow} element the element that we are querying
- * @param {string} selector the CSS selector
- * @return {boolean} true if the element matches the selector, false if not
- */
- matchesSelector: function (element, selector) {
- const matchesImpl = element.matches || element.webkitMatchesSelector || element.mozMatchesSelector || element.msMatchesSelector || (s => matchesSelector_SLOW(element, s));
- return matchesImpl.call(element, selector);
- }
- };
- module.exports = CSSCore;
|