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.

130 lines
4.0 KiB

4 years ago
  1. import domToArray from 'bianco.dom-to-array'
  2. /**
  3. * Normalize the return values, in case of a single value we avoid to return an array
  4. * @param { Array } values - list of values we want to return
  5. * @returns { Array|string|boolean } either the whole list of values or the single one found
  6. * @private
  7. */
  8. const normalize = values => values.length === 1 ? values[0] : values
  9. /**
  10. * Parse all the nodes received to get/remove/check their attributes
  11. * @param { HTMLElement|NodeList|Array } els - DOM node/s to parse
  12. * @param { string|Array } name - name or list of attributes
  13. * @param { string } method - method that will be used to parse the attributes
  14. * @returns { Array|string } result of the parsing in a list or a single value
  15. * @private
  16. */
  17. function parseNodes(els, name, method) {
  18. const names = typeof name === 'string' ? [name] : name
  19. return normalize(domToArray(els).map(el => {
  20. return normalize(names.map(n => el[method](n)))
  21. }))
  22. }
  23. /**
  24. * Set any attribute on a single or a list of DOM nodes
  25. * @param { HTMLElement|NodeList|Array } els - DOM node/s to parse
  26. * @param { string|Object } name - either the name of the attribute to set
  27. * or a list of properties as object key - value
  28. * @param { string } value - the new value of the attribute (optional)
  29. * @returns { HTMLElement|NodeList|Array } the original array of elements passed to this function
  30. *
  31. * @example
  32. *
  33. * import { set } from 'bianco.attr'
  34. *
  35. * const img = document.createElement('img')
  36. *
  37. * set(img, 'width', 100)
  38. *
  39. * // or also
  40. * set(img, {
  41. * width: 300,
  42. * height: 300
  43. * })
  44. *
  45. */
  46. export function set(els, name, value) {
  47. const attrs = typeof name === 'object' ? name : { [name]: value }
  48. const props = Object.keys(attrs)
  49. domToArray(els).forEach(el => {
  50. props.forEach(prop => el.setAttribute(prop, attrs[prop]))
  51. })
  52. return els
  53. }
  54. /**
  55. * Get any attribute from a single or a list of DOM nodes
  56. * @param { HTMLElement|NodeList|Array } els - DOM node/s to parse
  57. * @param { string|Array } name - name or list of attributes to get
  58. * @returns { Array|string } list of the attributes found
  59. *
  60. * @example
  61. *
  62. * import { get } from 'bianco.attr'
  63. *
  64. * const img = document.createElement('img')
  65. *
  66. * get(img, 'width') // => '200'
  67. *
  68. * // or also
  69. * get(img, ['width', 'height']) // => ['200', '300']
  70. *
  71. * // or also
  72. * get([img1, img2], ['width', 'height']) // => [['200', '300'], ['500', '200']]
  73. */
  74. export function get(els, name) {
  75. return parseNodes(els, name, 'getAttribute')
  76. }
  77. /**
  78. * Remove any attribute from a single or a list of DOM nodes
  79. * @param { HTMLElement|NodeList|Array } els - DOM node/s to parse
  80. * @param { string|Array } name - name or list of attributes to remove
  81. * @returns { HTMLElement|NodeList|Array } the original array of elements passed to this function
  82. *
  83. * @example
  84. *
  85. * import { remove } from 'bianco.attr'
  86. *
  87. * remove(img, 'width') // remove the width attribute
  88. *
  89. * // or also
  90. * remove(img, ['width', 'height']) // remove the width and the height attribute
  91. *
  92. * // or also
  93. * remove([img1, img2], ['width', 'height']) // remove the width and the height attribute from both images
  94. */
  95. export function remove(els, name) {
  96. return parseNodes(els, name, 'removeAttribute')
  97. }
  98. /**
  99. * Set any attribute on a single or a list of DOM nodes
  100. * @param { HTMLElement|NodeList|Array } els - DOM node/s to parse
  101. * @param { string|Array } name - name or list of attributes to detect
  102. * @returns { boolean|Array } true or false or an array of boolean values
  103. * @example
  104. *
  105. * import { has } from 'bianco.attr'
  106. *
  107. * has(img, 'width') // false
  108. *
  109. * // or also
  110. * has(img, ['width', 'height']) // => [false, false]
  111. *
  112. * // or also
  113. * has([img1, img2], ['width', 'height']) // => [[false, false], [false, false]]
  114. */
  115. export function has(els, name) {
  116. return parseNodes(els, name, 'hasAttribute')
  117. }
  118. export default {
  119. get,
  120. set,
  121. remove,
  122. has
  123. }