@dooboostore/dom-parser 1.0.0

package/src/node/elements/HTMLElementBase.ts

@@ -0,0 +1,198 @@
+import { ElementBase } from './ElementBase';
+import { HTMLElement, FocusOptions } from './HTMLElement';
+import { Text } from '../Text';
+import { ElementFactory } from '../../factory';
+
+/**
+ * Base implementation for all HTML elements
+ */
+export abstract class HTMLElementBase extends ElementBase implements HTMLElement {
+    private _title: string = '';
+    private _lang: string = '';
+    private _dir: string = '';
+    private _hidden: boolean = false;
+    private _tabIndex: number = -1;
+    private _accessKey: string = '';
+    private _contentEditable: string = 'inherit';
+    private _innerText: string = '';
+    private _outerText: string = '';
+
+    constructor(tagName: string, ownerDocument?: any) {
+        super(tagName, ownerDocument);
+    }
+
+    // HTMLElement interface implementation
+    get title(): string {
+        return this._title;
+    }
+
+    set title(value: string) {
+        this._title = value;
+        this.setAttribute('title', value);
+    }
+
+    get lang(): string {
+        return this._lang;
+    }
+
+    set lang(value: string) {
+        this._lang = value;
+        this.setAttribute('lang', value);
+    }
+
+    get dir(): string {
+        return this._dir;
+    }
+
+    set dir(value: string) {
+        this._dir = value;
+        this.setAttribute('dir', value);
+    }
+
+    get hidden(): boolean {
+        return this._hidden;
+    }
+
+    set hidden(value: boolean) {
+        this._hidden = value;
+        if (value) {
+            this.setAttribute('hidden', '');
+        } else {
+            this.removeAttribute('hidden');
+        }
+    }
+
+    get tabIndex(): number {
+        return this._tabIndex;
+    }
+
+    set tabIndex(value: number) {
+        this._tabIndex = value;
+        this.setAttribute('tabindex', value.toString());
+    }
+
+    get accessKey(): string {
+        return this._accessKey;
+    }
+
+    set accessKey(value: string) {
+        this._accessKey = value;
+        this.setAttribute('accesskey', value);
+    }
+
+    get contentEditable(): string {
+        return this._contentEditable;
+    }
+
+    set contentEditable(value: string) {
+        this._contentEditable = value;
+        this.setAttribute('contenteditable', value);
+    }
+
+    get isContentEditable(): boolean {
+        return this._contentEditable === 'true';
+    }
+
+    get innerText(): string {
+        return this._innerText || this.textContent || '';
+    }
+
+    set innerText(value: string) {
+        this._innerText = value;
+        this.textContent = value;
+    }
+
+    get outerText(): string {
+        return this._outerText || this.innerText;
+    }
+
+    set outerText(value: string) {
+        this._outerText = value;
+        if (this.parentNode) {
+            const { TextBase } = require('../TextBase');
+            const textNode = new TextBase(value, this._ownerDocument);
+            this.parentNode.replaceChild(textNode, this);
+        }
+    }
+
+    // innerHTML functionality is inherited from ElementBase
+
+    // HTMLElement methods
+    click(): void {
+        // Simulate click event - in a real implementation, this would dispatch events
+        console.log(`Clicked on ${this.tagName} element`);
+    }
+
+    focus(options?: FocusOptions): void {
+        // Set focus state using data attribute
+        this.setAttribute('data-focused', 'true');
+        console.log(`Focused on ${this.tagName} element`);
+    }
+
+    blur(): void {
+        // Remove focus state
+        this.removeAttribute('data-focused');
+        console.log(`Blurred ${this.tagName} element`);
+    }
+
+    // Override setAttribute to sync with properties
+    setAttribute(qualifiedName: string, value: string): void {
+        super.setAttribute(qualifiedName, value);
+
+        // Sync with properties
+        const name = qualifiedName.toLowerCase();
+        switch (name) {
+            case 'title':
+                this._title = value;
+                break;
+            case 'lang':
+                this._lang = value;
+                break;
+            case 'dir':
+                this._dir = value;
+                break;
+            case 'hidden':
+                this._hidden = true;
+                break;
+            case 'tabindex':
+                this._tabIndex = parseInt(value, 10) || -1;
+                break;
+            case 'accesskey':
+                this._accessKey = value;
+                break;
+            case 'contenteditable':
+                this._contentEditable = value;
+                break;
+        }
+    }
+
+    // Override removeAttribute to sync with properties
+    removeAttribute(qualifiedName: string): void {
+        super.removeAttribute(qualifiedName);
+
+        const name = qualifiedName.toLowerCase();
+        switch (name) {
+            case 'title':
+                this._title = '';
+                break;
+            case 'lang':
+                this._lang = '';
+                break;
+            case 'dir':
+                this._dir = '';
+                break;
+            case 'hidden':
+                this._hidden = false;
+                break;
+            case 'tabindex':
+                this._tabIndex = -1;
+                break;
+            case 'accesskey':
+                this._accessKey = '';
+                break;
+            case 'contenteditable':
+                this._contentEditable = 'inherit';
+                break;
+        }
+    }
+}

package/src/node/elements/HTMLEmbedElement.ts

@@ -0,0 +1,33 @@
+import { HTMLElementBase } from './HTMLElementBase';
+import { Document } from '../Document';
+
+/**
+ * The **`HTMLEmbedElement`** interface provides special properties (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating `<embed>` elements.
+ * 
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLEmbedElement)
+ */
+export class HTMLEmbedElement extends HTMLElementBase {
+    /**
+     * A string reflecting the `src` HTML attribute, containing the address of the resource.
+     */
+    src: string = '';
+
+    /**
+     * A string reflecting the `type` HTML attribute, containing the type of the resource.
+     */
+    type: string = '';
+
+    /**
+     * A string reflecting the `width` HTML attribute, containing the displayed width of the resource in CSS pixels.
+     */
+    width: string = '';
+
+    /**
+     * A string reflecting the `height` HTML attribute, containing the displayed height of the resource in CSS pixels.
+     */
+    height: string = '';
+
+    constructor(ownerDocument: Document) {
+        super('embed', ownerDocument);
+    }
+}

package/src/node/elements/HTMLFormElement.ts

@@ -0,0 +1,131 @@
+import { HTMLElementBase } from './HTMLElementBase';
+
+/**
+ * The **`HTMLFormElement`** class represents an HTML `<form>` element.
+ * 
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement)
+ */
+export class HTMLFormElement extends HTMLElementBase {
+    private _action: string = '';
+    private _method: string = 'get';
+    private _enctype: string = 'application/x-www-form-urlencoded';
+    private _target: string = '';
+    private _noValidate: boolean = false;
+    
+    constructor(tagName: string, ownerDocument?: any) {
+        super(tagName, ownerDocument);
+    }
+
+    get action(): string {
+        return this._action;
+    }
+
+    set action(value: string) {
+        this._action = value;
+        this.setAttribute('action', value);
+    }
+
+    get method(): string {
+        return this._method;
+    }
+
+    set method(value: string) {
+        this._method = value.toLowerCase();
+        this.setAttribute('method', value);
+    }
+
+    get enctype(): string {
+        return this._enctype;
+    }
+
+    set enctype(value: string) {
+        this._enctype = value;
+        this.setAttribute('enctype', value);
+    }
+
+    get target(): string {
+        return this._target;
+    }
+
+    set target(value: string) {
+        this._target = value;
+        this.setAttribute('target', value);
+    }
+
+    get noValidate(): boolean {
+        return this._noValidate;
+    }
+
+    set noValidate(value: boolean) {
+        this._noValidate = value;
+        if (value) {
+            this.setAttribute('novalidate', '');
+        } else {
+            this.removeAttribute('novalidate');
+        }
+    }
+
+    // Form methods
+    submit(): void {
+        // Form submission logic would go here
+        console.log('Form submitted');
+    }
+
+    reset(): void {
+        // Form reset logic would go here
+        console.log('Form reset');
+    }
+
+    checkValidity(): boolean {
+        // Form validation logic would go here
+        return true;
+    }
+
+    // Override setAttribute to sync with properties
+    setAttribute(qualifiedName: string, value: string): void {
+        super.setAttribute(qualifiedName, value);
+        
+        const name = qualifiedName.toLowerCase();
+        switch (name) {
+            case 'action':
+                this._action = value;
+                break;
+            case 'method':
+                this._method = value.toLowerCase();
+                break;
+            case 'enctype':
+                this._enctype = value;
+                break;
+            case 'target':
+                this._target = value;
+                break;
+            case 'novalidate':
+                this._noValidate = true;
+                break;
+        }
+    }
+
+    // Override removeAttribute to sync with properties
+    removeAttribute(qualifiedName: string): void {
+        super.removeAttribute(qualifiedName);
+        
+        const name = qualifiedName.toLowerCase();
+        switch (name) {
+            case 'action':
+                this._action = '';
+                break;
+            case 'method':
+                this._method = 'get';
+                break;
+            case 'enctype':
+                this._enctype = 'application/x-www-form-urlencoded';
+                break;
+            case 'target':
+                this._target = '';
+                break;
+            case 'novalidate':
+                this._noValidate = false;
+                break;
+        }
+    }
+}

package/src/node/elements/HTMLGenericElement.ts

@@ -0,0 +1,13 @@
+import { HTMLElementBase } from './HTMLElementBase';
+
+export class HTMLGenericElement extends HTMLElementBase {
+
+    constructor(tagName: string, ownerDocument?: any) {
+        super(tagName, ownerDocument);
+    }
+
+
+    get localName(): string {
+        return this._tagName.toLowerCase();
+    }
+}

package/src/node/elements/HTMLH1Element.ts

@@ -0,0 +1,12 @@
+import { HTMLElementBase } from './HTMLElementBase';
+
+/**
+ * The **`HTMLH1Element`** class represents an HTML `<h1>` element.
+ * 
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLHeadingElement)
+ */
+export class HTMLH1Element extends HTMLElementBase {
+    constructor(tagName: string, ownerDocument?: any) {
+        super(tagName, ownerDocument);
+    }
+}

package/src/node/elements/HTMLHeadElement.ts

@@ -0,0 +1,12 @@
+import { HTMLElementBase } from './HTMLElementBase';
+
+/**
+ * The **`HTMLHeadElement`** class represents an HTML `<head>` element.
+ * 
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLHeadElement)
+ */
+export class HTMLHeadElement extends HTMLElementBase {
+    constructor(tagName: string, ownerDocument?: any) {
+        super(tagName, ownerDocument);
+    }
+}

package/src/node/elements/HTMLHtmlElement.ts

@@ -0,0 +1,82 @@
+import { HTMLElementBase } from './HTMLElementBase';
+
+/**
+ * The **`HTMLHtmlElement`** class represents an HTML `<html>` element.
+ * This is the root element of an HTML document.
+ * 
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLHtmlElement)
+ */
+export class HTMLHtmlElement extends HTMLElementBase {
+    // private _lang: string = '';
+    // private _dir: string = '';
+
+    constructor(tagName: string, ownerDocument?: any) {
+        super(tagName, ownerDocument);
+    }
+
+    // /**
+    //  * Gets or sets the language of the document.
+    //  */
+    // get lang(): string {
+    //     return this._lang;
+    // }
+    //
+    // set lang(value: string) {
+    //     this._lang = value;
+    //     this.setAttribute('lang', value);
+    // }
+    //
+    // /**
+    //  * Gets or sets the text direction of the document.
+    //  */
+    // get dir(): string {
+    //     return this._dir;
+    // }
+    //
+    // set dir(value: string) {
+    //     this._dir = value;
+    //     this.setAttribute('dir', value);
+    // }
+
+    /**
+     * Gets the version attribute (deprecated in HTML5).
+     * @deprecated
+     */
+    get version(): string {
+        return this.getAttribute('version') || '';
+    }
+
+    set version(value: string) {
+        this.setAttribute('version', value);
+    }
+
+    // Override setAttribute to sync with properties
+    // setAttribute(qualifiedName: string, value: string): void {
+    //     super.setAttribute(qualifiedName, value);
+    //
+    //     const name = qualifiedName.toLowerCase();
+    //     switch (name) {
+    //         case 'lang':
+    //             this.__lang = value;
+    //             break;
+    //         case 'dir':
+    //             this.__dir = value;
+    //             break;
+    //     }
+    // }
+
+    // Override removeAttribute to sync with properties
+    // removeAttribute(qualifiedName: string): void {
+    //     super.removeAttribute(qualifiedName);
+    //
+    //     const name = qualifiedName.toLowerCase();
+    //     switch (name) {
+    //         case 'lang':
+    //             this.__lang = '';
+    //             break;
+    //         case 'dir':
+    //             this.__dir = '';
+    //             break;
+    //     }
+    // }
+}

package/src/node/elements/HTMLImgElement.ts

@@ -0,0 +1,96 @@
+import { HTMLElementBase } from './HTMLElementBase';
+
+/**
+ * The **`HTMLImgElement`** class represents an HTML `<img>` element.
+ * 
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLImageElement)
+ */
+export class HTMLImgElement extends HTMLElementBase  {
+    private _src: string = '';
+    private _alt: string = '';
+    private _width: number = 0;
+    private _height: number = 0;
+
+    constructor(tagName: string, ownerDocument?: any) {
+        super(tagName, ownerDocument);
+    }
+
+
+    get src(): string {
+        return this._src;
+    }
+
+    set src(value: string) {
+        this._src = value;
+        this.setAttribute('src', value);
+    }
+
+    get alt(): string {
+        return this._alt;
+    }
+
+    set alt(value: string) {
+        this._alt = value;
+        this.setAttribute('alt', value);
+    }
+
+    get width(): number {
+        return this._width;
+    }
+
+    set width(value: number) {
+        this._width = value;
+        this.setAttribute('width', value.toString());
+    }
+
+    get height(): number {
+        return this._height;
+    }
+
+    set height(value: number) {
+        this._height = value;
+        this.setAttribute('height', value.toString());
+    }
+
+    // Override setAttribute to sync with properties
+    setAttribute(qualifiedName: string, value: string): void {
+        super.setAttribute(qualifiedName, value);
+        
+        const name = qualifiedName.toLowerCase();
+        switch (name) {
+            case 'src':
+                this._src = value;
+                break;
+            case 'alt':
+                this._alt = value;
+                break;
+            case 'width':
+                this._width = parseInt(value, 10) || 0;
+                break;
+            case 'height':
+                this._height = parseInt(value, 10) || 0;
+                break;
+        }
+    }
+
+    // Override removeAttribute to sync with properties
+    removeAttribute(qualifiedName: string): void {
+        super.removeAttribute(qualifiedName);
+        
+        const name = qualifiedName.toLowerCase();
+        switch (name) {
+            case 'src':
+                this._src = '';
+                break;
+            case 'alt':
+                this._alt = '';
+                break;
+            case 'width':
+                this._width = 0;
+                break;
+            case 'height':
+                this._height = 0;
+                break;
+        }
+    }
+}