158 lines
5.3 KiB
JavaScript
158 lines
5.3 KiB
JavaScript
// Copyright 2009 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 values in
|
|
* an Element's dataset.
|
|
* See {@link http://www.w3.org/TR/html5/Overview.html#dom-dataset}.
|
|
*
|
|
* @author nicksay@google.com (Alex Nicksay)
|
|
*/
|
|
|
|
goog.provide('goog.dom.dataset');
|
|
|
|
goog.require('goog.string');
|
|
goog.require('goog.userAgent.product');
|
|
|
|
|
|
/**
|
|
* Whether using the dataset property is allowed. In IE (up to and including
|
|
* IE 11), setting element.dataset in JS does not propagate values to CSS,
|
|
* breaking expressions such as `content: attr(data-content)` that would
|
|
* otherwise work.
|
|
* See {@link https://github.com/google/closure-library/issues/396}.
|
|
* @const
|
|
* @private
|
|
*/
|
|
goog.dom.dataset.ALLOWED_ = !goog.userAgent.product.IE;
|
|
|
|
|
|
/**
|
|
* The DOM attribute name prefix that must be present for it to be considered
|
|
* for a dataset.
|
|
* @type {string}
|
|
* @const
|
|
* @private
|
|
*/
|
|
goog.dom.dataset.PREFIX_ = 'data-';
|
|
|
|
|
|
/**
|
|
* Sets a custom data attribute on an element. The key should be
|
|
* in camelCase format (e.g "keyName" for the "data-key-name" attribute).
|
|
* @param {Element} element DOM node to set the custom data attribute on.
|
|
* @param {string} key Key for the custom data attribute.
|
|
* @param {string} value Value for the custom data attribute.
|
|
*/
|
|
goog.dom.dataset.set = function(element, key, value) {
|
|
if (goog.dom.dataset.ALLOWED_ && element.dataset) {
|
|
element.dataset[key] = value;
|
|
} else {
|
|
element.setAttribute(
|
|
goog.dom.dataset.PREFIX_ + goog.string.toSelectorCase(key), value);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets a custom data attribute from an element. The key should be
|
|
* in camelCase format (e.g "keyName" for the "data-key-name" attribute).
|
|
* @param {Element} element DOM node to get the custom data attribute from.
|
|
* @param {string} key Key for the custom data attribute.
|
|
* @return {?string} The attribute value, if it exists.
|
|
*/
|
|
goog.dom.dataset.get = function(element, key) {
|
|
if (goog.dom.dataset.ALLOWED_ && element.dataset) {
|
|
// Android browser (non-chrome) returns the empty string for
|
|
// element.dataset['doesNotExist'].
|
|
if (!(key in element.dataset)) {
|
|
return null;
|
|
}
|
|
return element.dataset[key];
|
|
} else {
|
|
return element.getAttribute(
|
|
goog.dom.dataset.PREFIX_ + goog.string.toSelectorCase(key));
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Removes a custom data attribute from an element. The key should be
|
|
* in camelCase format (e.g "keyName" for the "data-key-name" attribute).
|
|
* @param {Element} element DOM node to get the custom data attribute from.
|
|
* @param {string} key Key for the custom data attribute.
|
|
*/
|
|
goog.dom.dataset.remove = function(element, key) {
|
|
if (goog.dom.dataset.ALLOWED_ && element.dataset) {
|
|
// In strict mode Safari will trigger an error when trying to delete a
|
|
// property which does not exist.
|
|
if (goog.dom.dataset.has(element, key)) {
|
|
delete element.dataset[key];
|
|
}
|
|
} else {
|
|
element.removeAttribute(
|
|
goog.dom.dataset.PREFIX_ + goog.string.toSelectorCase(key));
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Checks whether custom data attribute exists on an element. The key should be
|
|
* in camelCase format (e.g "keyName" for the "data-key-name" attribute).
|
|
*
|
|
* @param {Element} element DOM node to get the custom data attribute from.
|
|
* @param {string} key Key for the custom data attribute.
|
|
* @return {boolean} Whether the attribute exists.
|
|
*/
|
|
goog.dom.dataset.has = function(element, key) {
|
|
if (goog.dom.dataset.ALLOWED_ && element.dataset) {
|
|
return key in element.dataset;
|
|
} else if (element.hasAttribute) {
|
|
return element.hasAttribute(
|
|
goog.dom.dataset.PREFIX_ + goog.string.toSelectorCase(key));
|
|
} else {
|
|
return !!(
|
|
element.getAttribute(
|
|
goog.dom.dataset.PREFIX_ + goog.string.toSelectorCase(key)));
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Gets all custom data attributes as a string map. The attribute names will be
|
|
* camel cased (e.g., data-foo-bar -> dataset['fooBar']). This operation is not
|
|
* safe for attributes having camel-cased names clashing with already existing
|
|
* properties (e.g., data-to-string -> dataset['toString']).
|
|
* @param {!Element} element DOM node to get the data attributes from.
|
|
* @return {!Object} The string map containing data attributes and their
|
|
* respective values.
|
|
*/
|
|
goog.dom.dataset.getAll = function(element) {
|
|
if (goog.dom.dataset.ALLOWED_ && element.dataset) {
|
|
return element.dataset;
|
|
} else {
|
|
var dataset = {};
|
|
var attributes = element.attributes;
|
|
for (var i = 0; i < attributes.length; ++i) {
|
|
var attribute = attributes[i];
|
|
if (goog.string.startsWith(attribute.name, goog.dom.dataset.PREFIX_)) {
|
|
// We use substr(5), since it's faster than replacing 'data-' with ''.
|
|
var key = goog.string.toCamelCase(attribute.name.substr(5));
|
|
dataset[key] = attribute.value;
|
|
}
|
|
}
|
|
return dataset;
|
|
}
|
|
};
|