library-ts/browser/dom/ElementType.ts

import { DOMEditor } from "./DOMEditor";

export class ElementType<E extends Element> 
{
  static readonly any = new ElementType<Element>( "*" );
  static readonly input  = new ElementType<HTMLInputElement>( "input" );

  static readonly meta = new ElementType<HTMLMetaElement>( "meta" );
  static readonly title = new ElementType<HTMLMetaElement>( "title" );

  static readonly anchor = new ElementType<HTMLAnchorElement>( "a" );
  static readonly break  = new ElementType<HTMLBRElement>( "br" );

  static readonly image  = new ElementType<HTMLImageElement>( "img" );
  static readonly audio  = new ElementType<HTMLAudioElement>( "audio" );
  static readonly video  = new ElementType<HTMLVideoElement>( "video" );
  static readonly source = new ElementType<HTMLSourceElement>( "source" );
  static readonly canvas = new ElementType<HTMLCanvasElement>( "canvas" );
  
  
  static readonly script = new ElementType<HTMLScriptElement>( "script" );
  static readonly style  = new ElementType<HTMLStyleElement>( "style" );
  static readonly form   = new ElementType<HTMLFormElement>( "form" );
  static readonly button = new ElementType<HTMLButtonElement>( "button" );
  static readonly select = new ElementType<HTMLSelectElement>( "select" );
  static readonly option = new ElementType<HTMLOptionElement>( "option" );
  static readonly textArea = new ElementType<HTMLTextAreaElement>( "textarea" );

  static readonly table = new ElementType<HTMLTableElement>( "table" );
  static readonly thead = new ElementType<HTMLTableElement>( "thead" );
  static readonly tbody = new ElementType<HTMLTableElement>( "tbody" );
  
  static readonly tr = new ElementType<HTMLTableRowElement>( "tr" );
  static readonly th = new ElementType<HTMLTableCellElement>( "th" );
  static readonly td = new ElementType<HTMLTableCellElement>( "td" );
  
  static readonly hr = new ElementType<HTMLElement>( "hr" );

  static readonly span = new ElementType<HTMLSpanElement>( "span" );
  static readonly div = new ElementType<HTMLDivElement>( "div" );
  static readonly code = new ElementType<HTMLElement>( "code" );
  static readonly pre = new ElementType<HTMLPreElement>( "pre" );

  static readonly p = new ElementType<HTMLElement>( "p" );
  static readonly b = new ElementType<HTMLElement>( "b" );
  static readonly i = new ElementType<HTMLElement>( "i" );

  static readonly h1 = new ElementType<HTMLElement>( "h1" );
  static readonly h2 = new ElementType<HTMLElement>( "h2" );
  static readonly h3 = new ElementType<HTMLElement>( "h3" );
  static readonly h4 = new ElementType<HTMLElement>( "h4" );
  static readonly h5 = new ElementType<HTMLElement>( "h5" );
  static readonly h6 = new ElementType<HTMLElement>( "h6" );
  static readonly h7 = new ElementType<HTMLElement>( "h7" );
  static readonly h8 = new ElementType<HTMLElement>( "h8" );
  static readonly h9 = new ElementType<HTMLElement>( "h9" );
  static readonly h10 = new ElementType<HTMLElement>( "h10" );

  static readonly section = new ElementType<HTMLElement>( "section" );

  static readonly iframe = new ElementType<HTMLIFrameElement>( "iframe" );

  static readonly svg = new ElementType<SVGElement>( "svg" ); 

  static readonly strong = new ElementType( "strong" ); 

  _type:string;
  _rawType:string;
  _namespace:string;

  public constructor( type:string, namespace:string = undefined )
  {
    this._rawType = type;
    this._type = this._rawType.toUpperCase();

    if ( namespace !== undefined )
    {
      this._namespace = namespace;
    }
  }


  get type()
  {
    return this._type;
  }

  get rawType()
  {
    return this._rawType;
  }

  get selector()
  {
    return this._type;
  }

  forEach( target:Element|Document, callback:(element:E)=>any)
  {
    let elements = this.queryAll( target );
    
    for ( let i = 0; i < elements.length; i++ )
    {
      callback( elements[ i ] );
    }
  }

  forEachInDoc( callback:(element:E)=>any)
  {
    this.forEach( document, callback );
  }

  queryDoc():E
  {
    return document.querySelector( this._rawType ) as E;
  }

  query( element:Document|Element ):E
  {
    return element.querySelector( this._rawType ) as E;
  }

  selects( element:Element )
  {
    return element.nodeName.toLowerCase() == this._rawType.toLowerCase();
  }
  
  queryAll( element:Document|Element ):E[]
  {
    return DOMEditor.nodeListToArray( element.querySelectorAll( this._rawType ) ) as E[];
  }


  create( children:(Node|string)|(Node|string)[] = undefined, doc:Document = undefined ):E
  {
    doc = doc || document;

    let anyElement =
    this._namespace === undefined ?  doc.createElement( this._rawType ) 
                                  :  doc.createElementNS( this._namespace, this._rawType ); 
    
    let element = anyElement as any as E;

    if ( children )
    {
      if ( Array.isArray( children ) )
      {
        for ( let i = 0; i < children.length; i++ )
        {
          if ( typeof children[ i ] === "string" )
          {
            element.appendChild( doc.createTextNode( children[ i ] as string ) );
          }
          else
          {
            element.appendChild( children[ i ] as Node );
          }
        } 
      }
      else
      {
        if ( typeof children === "string" )
        {
          element.appendChild( doc.createTextNode( children as string ) );
        }
        else
        {
          element.appendChild( children as Node );
        }
      }
      
           
    }

    return element;
  }
}