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.

README.md 4.7 KiB

3 years ago
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. # dom-helpers
  2. tiny modular DOM lib for ie8+
  3. ## Install
  4. ```sh
  5. npm i -S dom-helpers
  6. ```
  7. Mostly just naive wrappers around common DOM API inconsistencies, Cross browser work is minimal and mostly taken from jQuery. This library doesn't do a lot to normalize behavior across browsers, it mostly seeks to provide a common interface, and eliminate the need to write the same damn `if (ie8)` statements in every project.
  8. For example `events.on` works in all browsers ie8+ but it uses the native event system so actual event oddities will continue to exist. If you need __robust__ cross-browser support, use jQuery. If you are just tired of rewriting:
  9. ```js
  10. if (document.addEventListener)
  11. return (node, eventName, handler, capture) =>
  12. node.addEventListener(eventName, handler, capture || false);
  13. else if (document.attachEvent)
  14. return (node, eventName, handler) =>
  15. node.attachEvent('on' + eventName, handler);
  16. ```
  17. over and over again, or you need a ok `getComputedStyle` polyfill but don't want to include all of jQuery, use this.
  18. dom-helpers does expect certain, polyfillable, es5 features to be present for which you can use `es5-shim` for ie8
  19. The real advantage to this collection is that any method can be required individually, meaning tools like Browserify or webpack will only include the exact methods you use. This is great for environments where jQuery doesn't make sense, such as `React` where you only occasionally need to do direct DOM manipulation.
  20. Each level of the module can be required as a whole or you can drill down for a specific method or section:
  21. ```js
  22. var helpers = require('dom-helpers')
  23. var query = require('dom-helpers/query')
  24. var offset = require('dom-helpers/query/offset')
  25. // style is a function
  26. require('dom-helpers/style')(node, { width: '40px' })
  27. //and a namespace
  28. var gcs = require('dom-helpers/style/getComputedStyle')
  29. ```
  30. - dom-helpers
  31. - `ownerDocument(element)`: returns the element's document owner
  32. - `ownerWindow(element)`: returns the element's document window
  33. - `activeElement`: return focused element safely
  34. - query
  35. + `querySelectorAll(element, selector)`: optimized qsa, uses `getElementBy{Id|TagName|ClassName}` if it can.
  36. + `contains(container, element)`
  37. + `height(element, useClientHeight)`
  38. + `width(element, useClientWidth)`
  39. + `matches(element, selector)`: `matches()` polyfill that works in ie8
  40. + `offset(element)` -> `{ top: Number, left: Number, height: Number, width: Number}`
  41. + `offsetParent(element)`: return the parent node that the element is offset from
  42. + `position(element, [offsetParent]`: return "offset" of the node to its offsetParent, optionally you can specify the offset parent if different than the "real" one
  43. + `scrollTop(element, [value])`
  44. + `scrollLeft(element, [value])`
  45. + `scrollParent(element)`
  46. - class
  47. - `addClass(element, className)`
  48. - `removeClass(element, className)`
  49. - `hasClass(element, className)`
  50. - `style(element, propName, [value])` or `style(element, objectOfPropValues)`
  51. + `removeStyle(element, styleName)`
  52. + `getComputedStyle(element)` -> `getPropertyValue(name)`
  53. - transition
  54. + `animate(node, properties, duration, easing, callback)` programmatically start css transitions
  55. + `end(node, handler, [duration])` listens for transition end, and ensures that the handler if called even if the transition fails to fire its end event. Will attempt to read duration from the element, otherwise one can be provided
  56. + `properties`: Object containing the various vendor specific transition and transform properties for your browser
  57. ```js
  58. {
  59. transform: // transform property: 'transform'
  60. end: // transitionend
  61. property: // transition-property
  62. timing: // transition-timing
  63. delay: // transition-delay
  64. duration: // transition-duration
  65. }
  66. ```
  67. - events
  68. + `on(node, eventName, handler, [capture])`: capture is silently ignored in ie8
  69. + `off(node, eventName, handler, [capture])`: capture is silently ignored in ie8
  70. + `listen(node, eventName, handler, [capture])`: wraps `on` and returns a function that calls `off` for you
  71. + `filter(selector, fn)`: returns a function handler that only fires when the target matches or is contained in the selector ex: `events.on(list, 'click', events.filter('li > a', handler))`
  72. - util
  73. + `requestAnimationFrame(cb)` returns an ID for canceling
  74. * `requestAnimationFrame.cancel(id)`
  75. + `scrollbarSize([recalc])` returns the scrollbar's width size in pixels
  76. + `scrollTo(element, [scrollParent])`