index.mjs 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. function cssBlankPseudo(document, opts) {
  2. // configuration
  3. const className = Object(opts).className;
  4. const attr = Object(opts).attr || 'blank';
  5. const force = Object(opts).force;
  6. try {
  7. document.querySelector(':blank');
  8. if (!force) {
  9. return;
  10. }
  11. } catch (ignoredError) {}
  12. /* do nothing and continue */
  13. // observe value changes on <input>, <select>, and <textarea>
  14. const window = (document.ownerDocument || document).defaultView;
  15. observeValueOfHTMLElement(window.HTMLInputElement);
  16. observeValueOfHTMLElement(window.HTMLSelectElement);
  17. observeValueOfHTMLElement(window.HTMLTextAreaElement); // form control elements selector
  18. const selector = 'input,select,textarea'; // conditionally update all form control elements
  19. Array.prototype.forEach.call(document.querySelectorAll(selector), node => {
  20. node.addEventListener('input', configureCssBlankAttribute);
  21. configureCssBlankAttribute.call(node);
  22. }); // conditionally observe added or unobserve removed form control elements
  23. new MutationObserver(mutationsList => {
  24. mutationsList.forEach(mutation => {
  25. if (mutation.addedNodes) {
  26. mutation.addedNodes.forEach(node => {
  27. if (node.nodeType === 1 && node.matches(selector)) {
  28. node.addEventListener('input', configureCssBlankAttribute);
  29. configureCssBlankAttribute.call(node);
  30. }
  31. });
  32. }
  33. if (mutation.removedNodes) {
  34. mutation.removedNodes.forEach(node => {
  35. if (node.nodeType === 1 && node.matches(selector)) {
  36. node.removeEventListener('input', configureCssBlankAttribute);
  37. }
  38. });
  39. }
  40. });
  41. }).observe(document, {
  42. childList: true,
  43. subtree: true
  44. }); // update a form control element’s css-blank attribute
  45. function configureCssBlankAttribute() {
  46. if (this.value) {
  47. if (attr) {
  48. this.removeAttribute(attr);
  49. }
  50. if (className) {
  51. this.classList.remove(className);
  52. }
  53. this.removeAttribute('blank');
  54. } else {
  55. if (attr) {
  56. this.setAttribute('blank', attr);
  57. }
  58. if (className) {
  59. this.classList.add(className);
  60. }
  61. }
  62. } // observe changes to the "value" property on an HTML Element
  63. function observeValueOfHTMLElement(HTMLElement) {
  64. const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'value');
  65. const nativeSet = descriptor.set;
  66. descriptor.set = function set(value) {
  67. // eslint-disable-line no-unused-vars
  68. nativeSet.apply(this, arguments);
  69. configureCssBlankAttribute.apply(this);
  70. };
  71. Object.defineProperty(HTMLElement.prototype, 'value', descriptor);
  72. }
  73. }
  74. export default cssBlankPseudo;
  75. //# sourceMappingURL=index.mjs.map