1
// Copyright 2009 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 values in
17
 * an Element's dataset.
18
 * See {@link http://www.w3.org/TR/html5/Overview.html#dom-dataset}.
19
 *
20
 * @author [email protected] (Alex Nicksay)
21
 */
22

23
goog.provide('goog.dom.dataset');
24

25
goog.require('goog.labs.userAgent.browser');
26
goog.require('goog.string');
27
goog.require('goog.userAgent.product');
28

29

30
/**
31
 * Whether using the dataset property is allowed.
32
 *
33
 * In IE (up to and including IE 11), setting element.dataset in JS does not
34
 * propagate values to CSS, breaking expressions such as
35
 * `content: attr(data-content)` that would otherwise work.
36
 * See {@link https://github.com/google/closure-library/issues/396}.
37
 *
38
 * In Safari >= 9, reading from element.dataset sometimes returns
39
 * undefined, even though the corresponding data- attribute has a value.
40
 * See {@link https://bugs.webkit.org/show_bug.cgi?id=161454}.
41
 * @const
42
 * @private
43
 */
44
goog.dom.dataset.ALLOWED_ =
45
    !goog.userAgent.product.IE && !goog.labs.userAgent.browser.isSafari();
46

47

48
/**
49
 * The DOM attribute name prefix that must be present for it to be considered
50
 * for a dataset.
51
 * @type {string}
52
 * @const
53
 * @private
54
 */
55
goog.dom.dataset.PREFIX_ = 'data-';
56

57

58
/**
59
 * Sets a custom data attribute on an element. The key should be
60
 * in camelCase format (e.g "keyName" for the "data-key-name" attribute).
61
 * @param {Element} element DOM node to set the custom data attribute on.
62
 * @param {string} key Key for the custom data attribute.
63
 * @param {string} value Value for the custom data attribute.
64
 */
65
goog.dom.dataset.set = function(element, key, value) {
66
  if (goog.dom.dataset.ALLOWED_ && element.dataset) {
67
    element.dataset[key] = value;
68
  } else {
69
    element.setAttribute(
70
        goog.dom.dataset.PREFIX_ + goog.string.toSelectorCase(key), value);
71
  }
72
};
73

74

75
/**
76
 * Gets a custom data attribute from an element. The key should be
77
 * in camelCase format (e.g "keyName" for the "data-key-name" attribute).
78
 * @param {Element} element DOM node to get the custom data attribute from.
79
 * @param {string} key Key for the custom data attribute.
80
 * @return {?string} The attribute value, if it exists.
81
 */
82
goog.dom.dataset.get = function(element, key) {
83
  if (goog.dom.dataset.ALLOWED_ && element.dataset) {
84
    // Android browser (non-chrome) returns the empty string for
85
    // element.dataset['doesNotExist'].
86
    if (!(key in element.dataset)) {
87
      return null;
88
    }
89
    return element.dataset[key];
90
  } else {
91
    return element.getAttribute(
92
        goog.dom.dataset.PREFIX_ + goog.string.toSelectorCase(key));
93
  }
94
};
95

96

97
/**
98
 * Removes a custom data attribute from an element. The key should be
99
  * in camelCase format (e.g "keyName" for the "data-key-name" attribute).
100
 * @param {Element} element DOM node to get the custom data attribute from.
101
 * @param {string} key Key for the custom data attribute.
102
 */
103
goog.dom.dataset.remove = function(element, key) {
104
  if (goog.dom.dataset.ALLOWED_ && element.dataset) {
105
    // In strict mode Safari will trigger an error when trying to delete a
106
    // property which does not exist.
107
    if (goog.dom.dataset.has(element, key)) {
108
      delete element.dataset[key];
109
    }
110
  } else {
111
    element.removeAttribute(
112
        goog.dom.dataset.PREFIX_ + goog.string.toSelectorCase(key));
113
  }
114
};
115

116

117
/**
118
 * Checks whether custom data attribute exists on an element. The key should be
119
 * in camelCase format (e.g "keyName" for the "data-key-name" attribute).
120
 *
121
 * @param {Element} element DOM node to get the custom data attribute from.
122
 * @param {string} key Key for the custom data attribute.
123
 * @return {boolean} Whether the attribute exists.
124
 */
125
goog.dom.dataset.has = function(element, key) {
126
  if (goog.dom.dataset.ALLOWED_ && element.dataset) {
127
    return key in element.dataset;
128
  } else if (element.hasAttribute) {
129
    return element.hasAttribute(
130
        goog.dom.dataset.PREFIX_ + goog.string.toSelectorCase(key));
131
  } else {
132
    return !!(
133
        element.getAttribute(
134
            goog.dom.dataset.PREFIX_ + goog.string.toSelectorCase(key)));
135
  }
136
};
137

138

139
/**
140
 * Gets all custom data attributes as a string map.  The attribute names will be
141
 * camel cased (e.g., data-foo-bar -> dataset['fooBar']).  This operation is not
142
 * safe for attributes having camel-cased names clashing with already existing
143
 * properties (e.g., data-to-string -> dataset['toString']).
144
 * @param {!Element} element DOM node to get the data attributes from.
145
 * @return {!Object} The string map containing data attributes and their
146
 *     respective values.
147
 */
148
goog.dom.dataset.getAll = function(element) {
149
  if (goog.dom.dataset.ALLOWED_ && element.dataset) {
150
    return element.dataset;
151
  } else {
152
    var dataset = {};
153
    var attributes = element.attributes;
154
    for (var i = 0; i < attributes.length; ++i) {
155
      var attribute = attributes[i];
156
      if (goog.string.startsWith(attribute.name, goog.dom.dataset.PREFIX_)) {
157
        // We use substr(5), since it's faster than replacing 'data-' with ''.
158
        var key = goog.string.toCamelCase(attribute.name.substr(5));
159
        dataset[key] = attribute.value;
160
      }
161
    }
162
    return dataset;
163
  }
164
};
165

166