1 | 'use strict';
|
---|
2 |
|
---|
3 | function cssBlankPseudo(document, opts) {
|
---|
4 | // configuration
|
---|
5 | const className = Object(opts).className;
|
---|
6 | const attr = Object(opts).attr || 'blank';
|
---|
7 | const force = Object(opts).force;
|
---|
8 |
|
---|
9 | try {
|
---|
10 | document.querySelector(':blank');
|
---|
11 |
|
---|
12 | if (!force) {
|
---|
13 | return;
|
---|
14 | }
|
---|
15 | } catch (ignoredError) {}
|
---|
16 | /* do nothing and continue */
|
---|
17 | // observe value changes on <input>, <select>, and <textarea>
|
---|
18 |
|
---|
19 |
|
---|
20 | const window = (document.ownerDocument || document).defaultView;
|
---|
21 | observeValueOfHTMLElement(window.HTMLInputElement);
|
---|
22 | observeValueOfHTMLElement(window.HTMLSelectElement);
|
---|
23 | observeValueOfHTMLElement(window.HTMLTextAreaElement);
|
---|
24 | observeSelectedOfHTMLElement(window.HTMLOptionElement); // form control elements selector
|
---|
25 |
|
---|
26 | const selector = 'INPUT,SELECT,TEXTAREA';
|
---|
27 | const selectorRegExp = /^(INPUT|SELECT|TEXTAREA)$/; // conditionally update all form control elements
|
---|
28 |
|
---|
29 | Array.prototype.forEach.call(document.querySelectorAll(selector), node => {
|
---|
30 | if (node.nodeName === 'SELECT') {
|
---|
31 | node.addEventListener('change', configureCssBlankAttribute);
|
---|
32 | } else {
|
---|
33 | node.addEventListener('input', configureCssBlankAttribute);
|
---|
34 | }
|
---|
35 |
|
---|
36 | configureCssBlankAttribute.call(node);
|
---|
37 | }); // conditionally observe added or unobserve removed form control elements
|
---|
38 |
|
---|
39 | new MutationObserver(mutationsList => {
|
---|
40 | mutationsList.forEach(mutation => {
|
---|
41 | Array.prototype.forEach.call(mutation.addedNodes || [], node => {
|
---|
42 | if (node.nodeType === 1 && selectorRegExp.test(node.nodeName)) {
|
---|
43 | if (node.nodeName === 'SELECT') {
|
---|
44 | node.addEventListener('change', configureCssBlankAttribute);
|
---|
45 | } else {
|
---|
46 | node.addEventListener('input', configureCssBlankAttribute);
|
---|
47 | }
|
---|
48 |
|
---|
49 | configureCssBlankAttribute.call(node);
|
---|
50 | }
|
---|
51 | });
|
---|
52 | Array.prototype.forEach.call(mutation.removedNodes || [], node => {
|
---|
53 | if (node.nodeType === 1 && selectorRegExp.test(node.nodeName)) {
|
---|
54 | if (node.nodeName === 'SELECT') {
|
---|
55 | node.removeEventListener('change', configureCssBlankAttribute);
|
---|
56 | } else {
|
---|
57 | node.removeEventListener('input', configureCssBlankAttribute);
|
---|
58 | }
|
---|
59 | }
|
---|
60 | });
|
---|
61 | });
|
---|
62 | }).observe(document, {
|
---|
63 | childList: true,
|
---|
64 | subtree: true
|
---|
65 | }); // update a form control element’s css-blank attribute
|
---|
66 |
|
---|
67 | function configureCssBlankAttribute() {
|
---|
68 | if (this.value || this.nodeName === 'SELECT' && this.options[this.selectedIndex].value) {
|
---|
69 | if (attr) {
|
---|
70 | this.removeAttribute(attr);
|
---|
71 | }
|
---|
72 |
|
---|
73 | if (className) {
|
---|
74 | this.classList.remove(className);
|
---|
75 | }
|
---|
76 |
|
---|
77 | this.removeAttribute('blank');
|
---|
78 | } else {
|
---|
79 | if (attr) {
|
---|
80 | this.setAttribute('blank', attr);
|
---|
81 | }
|
---|
82 |
|
---|
83 | if (className) {
|
---|
84 | this.classList.add(className);
|
---|
85 | }
|
---|
86 | }
|
---|
87 | } // observe changes to the "value" property on an HTML Element
|
---|
88 |
|
---|
89 |
|
---|
90 | function observeValueOfHTMLElement(HTMLElement) {
|
---|
91 | const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'value');
|
---|
92 | const nativeSet = descriptor.set;
|
---|
93 |
|
---|
94 | descriptor.set = function set(value) {
|
---|
95 | // eslint-disable-line no-unused-vars
|
---|
96 | nativeSet.apply(this, arguments);
|
---|
97 | configureCssBlankAttribute.apply(this);
|
---|
98 | };
|
---|
99 |
|
---|
100 | Object.defineProperty(HTMLElement.prototype, 'value', descriptor);
|
---|
101 | } // observe changes to the "selected" property on an HTML Element
|
---|
102 |
|
---|
103 |
|
---|
104 | function observeSelectedOfHTMLElement(HTMLElement) {
|
---|
105 | const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'selected');
|
---|
106 | const nativeSet = descriptor.set;
|
---|
107 |
|
---|
108 | descriptor.set = function set(value) {
|
---|
109 | // eslint-disable-line no-unused-vars
|
---|
110 | nativeSet.apply(this, arguments);
|
---|
111 | const event = document.createEvent('Event');
|
---|
112 | event.initEvent('change', true, true);
|
---|
113 | this.dispatchEvent(event);
|
---|
114 | };
|
---|
115 |
|
---|
116 | Object.defineProperty(HTMLElement.prototype, 'selected', descriptor);
|
---|
117 | }
|
---|
118 | }
|
---|
119 |
|
---|
120 | module.exports = cssBlankPseudo;
|
---|
121 | //# sourceMappingURL=legacy.js.map
|
---|