happy-dom
Version:
Happy DOM is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG DOM and HTML.
683 lines • 24.2 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const HTMLElement_js_1 = __importDefault(require("../html-element/HTMLElement.cjs"));
const PropertySymbol = __importStar(require("../../PropertySymbol.cjs"));
const ValidityState_js_1 = __importDefault(require("../../validity-state/ValidityState.cjs"));
const HTMLOptionElement_js_1 = __importDefault(require("../html-option-element/HTMLOptionElement.cjs"));
const HTMLOptionsCollection_js_1 = __importDefault(require("./HTMLOptionsCollection.cjs"));
const Event_js_1 = __importDefault(require("../../event/Event.cjs"));
const HTMLLabelElementUtility_js_1 = __importDefault(require("../html-label-element/HTMLLabelElementUtility.cjs"));
const HTMLCollection_js_1 = __importDefault(require("../element/HTMLCollection.cjs"));
const NodeTypeEnum_js_1 = __importDefault(require("../node/NodeTypeEnum.cjs"));
const QuerySelector_js_1 = __importDefault(require("../../query-selector/QuerySelector.cjs"));
const ClassMethodBinder_js_1 = __importDefault(require("../../utilities/ClassMethodBinder.cjs"));
const Node_js_1 = __importDefault(require("../node/Node.cjs"));
const Element_js_1 = __importDefault(require("../element/Element.cjs"));
const EventTarget_js_1 = __importDefault(require("../../event/EventTarget.cjs"));
const ElementEventAttributeUtility_js_1 = __importDefault(require("../element/ElementEventAttributeUtility.cjs"));
/**
* HTML Select Element.
*
* Reference:
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement.
*/
class HTMLSelectElement extends HTMLElement_js_1.default {
// Internal properties.
[PropertySymbol.validationMessage] = '';
[PropertySymbol.validity] = new ValidityState_js_1.default(this);
[PropertySymbol.options] = null;
[PropertySymbol.selectedOptions] = null;
[PropertySymbol.selectedIndex] = -1;
[PropertySymbol.proxy];
/**
* Constructor.
*/
constructor() {
super();
const methodBinder = new ClassMethodBinder_js_1.default(this, [
HTMLSelectElement,
HTMLElement_js_1.default,
Element_js_1.default,
Node_js_1.default,
EventTarget_js_1.default
]);
const proxy = new Proxy(this, {
get: (target, property) => {
if (property in target || typeof property === 'symbol') {
methodBinder.bind(property);
return target[property];
}
const index = Number(property);
if (!isNaN(index)) {
return QuerySelector_js_1.default.querySelectorAll(target, 'option')[PropertySymbol.items][index];
}
},
set(target, property, newValue) {
methodBinder.bind(property);
if (typeof property === 'symbol') {
target[property] = newValue;
return true;
}
const index = Number(property);
if (isNaN(index)) {
target[property] = newValue;
return true;
}
if (!newValue || !(newValue instanceof HTMLOptionElement_js_1.default)) {
throw new this[PropertySymbol.window].Error(`TypeError: Failed to set an indexed property [${index}] on 'HTMLSelectElement': parameter 2 is not of type 'HTMLOptionElement'.`);
}
const options = QuerySelector_js_1.default.querySelectorAll(target, 'option')[PropertySymbol.items];
const childNodes = target[PropertySymbol.nodeArray];
while (childNodes.length) {
target[PropertySymbol.removeChild](childNodes[0]);
}
for (let i = 0; i <= index; i++) {
if (i === index) {
target[PropertySymbol.appendChild](newValue);
}
else if (options[i]) {
target[PropertySymbol.appendChild](options[i]);
}
else {
target[PropertySymbol.appendChild](target[PropertySymbol.ownerDocument].createElement('option'));
}
}
return true;
},
deleteProperty(target, property) {
if (typeof property === 'symbol') {
delete target[property];
return true;
}
const index = Number(property);
if (isNaN(index)) {
delete target[property];
}
return true;
},
ownKeys(target) {
return Object.keys(QuerySelector_js_1.default.querySelectorAll(target, 'option')[PropertySymbol.items]);
},
has(target, property) {
if (property in target) {
return true;
}
if (typeof property === 'symbol') {
return false;
}
const index = Number(property);
if (!isNaN(index)) {
return !!QuerySelector_js_1.default.querySelectorAll(target, 'option')[PropertySymbol.items][index];
}
return false;
},
defineProperty(target, property, descriptor) {
methodBinder.preventBinding(property);
const index = Number(property);
if (isNaN(index)) {
Object.defineProperty(target, property, descriptor);
return true;
}
if (!descriptor.value || !(descriptor.value instanceof HTMLOptionElement_js_1.default)) {
throw new this[PropertySymbol.window].Error(`TypeError: Failed to set an indexed property [${index}] on 'HTMLSelectElement': parameter 2 is not of type 'HTMLOptionElement'.`);
}
const options = QuerySelector_js_1.default.querySelectorAll(target, 'option')[PropertySymbol.items];
const childNodes = target[PropertySymbol.nodeArray];
while (childNodes.length) {
target[PropertySymbol.removeChild](childNodes[0]);
}
for (let i = 0; i <= index; i++) {
if (i === index) {
target[PropertySymbol.appendChild](descriptor.value);
}
else if (options[i]) {
target[PropertySymbol.appendChild](options[i]);
}
else {
target[PropertySymbol.appendChild](target[PropertySymbol.ownerDocument].createElement('option'));
}
}
return true;
},
getOwnPropertyDescriptor(target, property) {
if (property in target) {
return Object.getOwnPropertyDescriptor(target, property);
}
const index = Number(property);
if (isNaN(index)) {
return;
}
const options = QuerySelector_js_1.default.querySelectorAll(target, 'option')[PropertySymbol.items];
if (!options[index]) {
return;
}
return {
value: options[index],
writable: true,
enumerable: true,
configurable: true
};
}
});
this[PropertySymbol.proxy] = proxy;
this[PropertySymbol.selectNode] = proxy;
return proxy;
}
// Events
/* eslint-disable jsdoc/require-jsdoc */
get onchange() {
return ElementEventAttributeUtility_js_1.default.getEventListener(this, 'onchange');
}
set onchange(value) {
this[PropertySymbol.propertyEventListeners].set('onchange', value);
}
get oninput() {
return ElementEventAttributeUtility_js_1.default.getEventListener(this, 'oninput');
}
set oninput(value) {
this[PropertySymbol.propertyEventListeners].set('oninput', value);
}
/* eslint-enable jsdoc/require-jsdoc */
/**
* Returns length.
*
* @returns Length.
*/
get length() {
return QuerySelector_js_1.default.querySelectorAll(this, 'option')[PropertySymbol.items].length;
}
/**
* Returns options.
*
* @returns Options.
*/
get options() {
if (!this[PropertySymbol.options]) {
this[PropertySymbol.options] = new HTMLOptionsCollection_js_1.default(PropertySymbol.illegalConstructor, this);
}
return this[PropertySymbol.options];
}
/**
* Returns validation message.
*
* @returns Validation message.
*/
get validationMessage() {
return this[PropertySymbol.validationMessage];
}
/**
* Returns validity.
*
* @returns Validity.
*/
get validity() {
return this[PropertySymbol.validity];
}
/**
* Returns name.
*
* @returns Name.
*/
get name() {
return this.getAttribute('name') || '';
}
/**
* Sets name.
*
* @param name Name.
*/
set name(name) {
this.setAttribute('name', name);
}
/**
* Returns disabled.
*
* @returns Disabled.
*/
get disabled() {
return this.getAttribute('disabled') !== null;
}
/**
* Sets disabled.
*
* @param disabled Disabled.
*/
set disabled(disabled) {
if (!disabled) {
this.removeAttribute('disabled');
}
else {
this.setAttribute('disabled', '');
}
}
/**
* Returns multiple.
*
* @returns Multiple.
*/
get multiple() {
return this.getAttribute('multiple') !== null;
}
/**
* Sets multiple.
*
* @param multiple Multiple.
*/
set multiple(multiple) {
if (!multiple) {
this.removeAttribute('multiple');
}
else {
this.setAttribute('multiple', '');
}
}
/**
* Returns autofocus.
*
* @returns Autofocus.
*/
get autofocus() {
return this.getAttribute('autofocus') !== null;
}
/**
* Sets autofocus.
*
* @param autofocus Autofocus.
*/
set autofocus(autofocus) {
if (!autofocus) {
this.removeAttribute('autofocus');
}
else {
this.setAttribute('autofocus', '');
}
}
/**
* Returns required.
*
* @returns Required.
*/
get required() {
return this.getAttribute('required') !== null;
}
/**
* Sets required.
*
* @param required Required.
*/
set required(required) {
if (!required) {
this.removeAttribute('required');
}
else {
this.setAttribute('required', '');
}
}
/**
* Returns type.
*
* @returns type.
*/
get type() {
return this.hasAttributeNS(null, 'multiple') ? 'select-multiple' : 'select-one';
}
/**
* Returns value.
*
* @returns Value.
*/
get value() {
const options = QuerySelector_js_1.default.querySelectorAll(this, 'option')[PropertySymbol.items];
for (let i = 0, max = options.length; i < max; i++) {
const option = options[i];
if (option[PropertySymbol.selectedness]) {
return option.value;
}
}
return '';
}
/**
* Sets value.
*
* @param value Value.
*/
set value(value) {
const options = QuerySelector_js_1.default.querySelectorAll(this, 'option')[PropertySymbol.items];
this[PropertySymbol.selectedIndex] = -1;
for (let i = 0, max = options.length; i < max; i++) {
const option = options[i];
if (option.value === value) {
option[PropertySymbol.selectedness] = true;
option[PropertySymbol.dirtyness] = true;
this[PropertySymbol.selectedIndex] = i;
}
else {
option[PropertySymbol.selectedness] = false;
}
}
}
/**
* Returns value.
*
* @returns Value.
*/
get selectedIndex() {
return this[PropertySymbol.selectedIndex];
}
/**
* Sets value.
*
* @param selectedIndex Selected index.
*/
set selectedIndex(selectedIndex) {
selectedIndex = Number(selectedIndex);
if (isNaN(selectedIndex)) {
return;
}
const options = QuerySelector_js_1.default.querySelectorAll(this, 'option')[PropertySymbol.items];
this[PropertySymbol.selectedIndex] = -1;
if (typeof selectedIndex === 'number' && !isNaN(selectedIndex)) {
for (let i = 0, max = options.length; i < max; i++) {
options[i][PropertySymbol.selectedness] = false;
}
const selectedOption = options[selectedIndex];
if (selectedOption) {
selectedOption[PropertySymbol.selectedness] = true;
selectedOption[PropertySymbol.dirtyness] = true;
this[PropertySymbol.selectedIndex] = selectedIndex;
}
}
}
/**
* Returns selected options.
*
* @returns HTMLCollection.
*/
get selectedOptions() {
if (!this[PropertySymbol.selectedOptions]) {
this[PropertySymbol.selectedOptions] = new HTMLCollection_js_1.default(PropertySymbol.illegalConstructor, () => {
const options = QuerySelector_js_1.default.querySelectorAll(this, 'option')[PropertySymbol.items];
// If we hit the cache, we should recieve the same Array instance as before, which will then contain the selected options.
if (options[PropertySymbol.selectedOptions]) {
return options[PropertySymbol.selectedOptions];
}
const selectedOptions = [];
for (let i = 0, max = options.length; i < max; i++) {
const option = options[i];
if (option[PropertySymbol.selectedness]) {
selectedOptions.push(option);
}
}
options[PropertySymbol.selectedOptions] = selectedOptions;
return selectedOptions;
});
}
return this[PropertySymbol.selectedOptions];
}
/**
* Returns the associated label elements.
*
* @returns Label elements.
*/
get labels() {
return HTMLLabelElementUtility_js_1.default.getAssociatedLabelElements(this);
}
/**
* Returns the parent form element.
*
* @returns Form.
*/
get form() {
if (this[PropertySymbol.formNode]) {
return this[PropertySymbol.formNode];
}
const id = this.getAttribute('form');
if (!id || !this[PropertySymbol.isConnected]) {
return null;
}
return this[PropertySymbol.ownerDocument].getElementById(id);
}
/**
* Returns "true" if it will validate.
*
* @returns "true" if it will validate.
*/
get willValidate() {
return (this.type !== 'hidden' &&
this.type !== 'reset' &&
this.type !== 'button' &&
!this.disabled &&
!this['readOnly']);
}
/**
* @override
*/
get tabIndex() {
const tabIndex = this.getAttribute('tabindex');
if (tabIndex !== null) {
const parsed = Number(tabIndex);
return isNaN(parsed) ? 0 : parsed;
}
return 0;
}
/**
* @override
*/
set tabIndex(tabIndex) {
super.tabIndex = tabIndex;
}
/**
* Returns item from options collection by index.
*
* @param index Index.
*/
item(index) {
return this[PropertySymbol.options].item(index);
}
/**
* Adds new option to options collection.
*
* @param element HTMLOptionElement to add.
* @param before HTMLOptionElement or index number.
*/
add(element, before) {
const options = QuerySelector_js_1.default.querySelectorAll(this, 'option')[PropertySymbol.items];
if (!before && before !== 0) {
const childNodes = this[PropertySymbol.nodeArray];
while (childNodes.length) {
this[PropertySymbol.removeChild](childNodes[0]);
}
for (const option of options) {
this[PropertySymbol.appendChild](option);
}
this[PropertySymbol.appendChild](element);
return;
}
const window = this[PropertySymbol.window];
if (typeof before !== 'number') {
if (!(before instanceof HTMLOptionElement_js_1.default)) {
throw new window.DOMException("Failed to execute 'add' on 'HTMLFormElement': The node before which the new node is to be inserted before is not an 'HTMLOptionElement'.");
}
before = options.indexOf(before);
}
const optionsElement = options[before];
if (!optionsElement) {
throw new window.DOMException("Failed to execute 'add' on 'HTMLFormElement': The node before which the new node is to be inserted before is not a child of this node.");
}
const childNodes = this[PropertySymbol.nodeArray];
while (childNodes.length) {
this[PropertySymbol.removeChild](childNodes[0]);
}
for (let i = 0, max = options.length; i < max; i++) {
if (i === before) {
this[PropertySymbol.appendChild](element);
}
this[PropertySymbol.appendChild](options[i]);
}
}
/**
* Removes indexed element from collection or the select element.
*
* @param [index] Index.
*/
remove(index) {
if (typeof index === 'number') {
const options = QuerySelector_js_1.default.querySelectorAll(this, 'option')[PropertySymbol.items];
if (!options[index]) {
return;
}
const childNodes = this[PropertySymbol.nodeArray];
while (childNodes.length) {
this[PropertySymbol.removeChild](childNodes[0]);
}
for (let i = 0, max = options.length; i < max; i++) {
if (i !== index) {
this[PropertySymbol.appendChild](options[i]);
}
}
}
else {
super.remove();
}
}
/**
* Sets validation message.
*
* @param message Message.
*/
setCustomValidity(message) {
this[PropertySymbol.validationMessage] = String(message);
}
/**
* Checks validity.
*
* @returns "true" if the field is valid.
*/
checkValidity() {
const valid = this.disabled || this[PropertySymbol.validity].valid;
if (!valid) {
this.dispatchEvent(new Event_js_1.default('invalid', { bubbles: true, cancelable: true }));
}
return valid;
}
/**
* Reports validity.
*
* @returns "true" if the field is valid.
*/
reportValidity() {
return this.checkValidity();
}
/**
* Updates option item.
*
* Based on:
* https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/nodes/HTMLSelectElement-impl.js
*
* @see https://html.spec.whatwg.org/multipage/form-elements.html#selectedness-setting-algorithm
* @param [selectedOption] Selected option.
*/
[PropertySymbol.updateSelectedness](selectedOption) {
const isMultiple = this.hasAttribute('multiple');
const options = QuerySelector_js_1.default.querySelectorAll(this, 'option')[PropertySymbol.items];
const selected = [];
if (selectedOption) {
this[PropertySymbol.selectedIndex] = -1;
}
if (!isMultiple) {
for (let i = 0, max = options.length; i < max; i++) {
const option = options[i];
if (selectedOption) {
option[PropertySymbol.selectedness] = option === selectedOption;
if (option === selectedOption) {
this[PropertySymbol.selectedIndex] = i;
}
}
if (option[PropertySymbol.selectedness]) {
selected.push(option);
}
}
}
const size = this.#getDisplaySize();
if (size === 1 && !selected.length) {
this[PropertySymbol.selectedIndex] = -1;
for (let i = 0, max = options.length; i < max; i++) {
const option = options[i];
const parentNode = option[PropertySymbol.parentNode];
let disabled = option.hasAttributeNS(null, 'disabled');
if (parentNode &&
parentNode[PropertySymbol.nodeType] === NodeTypeEnum_js_1.default.elementNode &&
parentNode[PropertySymbol.tagName] === 'OPTGROUP' &&
parentNode.hasAttributeNS(null, 'disabled')) {
disabled = true;
}
if (!disabled) {
option[PropertySymbol.selectedness] = true;
this[PropertySymbol.selectedIndex] = i;
break;
}
}
}
else if (selected.length >= 2) {
this[PropertySymbol.selectedIndex] = -1;
for (let i = 0, max = options.length; i < max; i++) {
options[i][PropertySymbol.selectedness] = i === selected.length - 1;
if (i === selected.length - 1) {
this[PropertySymbol.selectedIndex] = i;
}
}
}
}
/**
* Returns display size.
*
* @returns Display size.
*/
#getDisplaySize() {
if (this.hasAttributeNS(null, 'size')) {
const size = parseInt(this.getAttribute('size'));
if (!isNaN(size) && size >= 0) {
return size;
}
}
return this.hasAttributeNS(null, 'multiple') ? 4 : 1;
}
}
exports.default = HTMLSelectElement;
//# sourceMappingURL=HTMLSelectElement.cjs.map