library-ts/browser/dom/ClassFlag.ts

import { RegExpUtility } from "../text/RegExpUtitlity";
import { DOMEditor } from "./DOMEditor";

export class ClassFlag
{
  static readonly active = new ClassFlag( "active" );
  static readonly inactive = new ClassFlag( "inactive" );
  
  static readonly enabled = new ClassFlag( "enabled" );
  static readonly disabled = new ClassFlag( "disabled" );

  static readonly button = new ClassFlag( "button" );

  static readonly visible = new ClassFlag( "visible" );
  static readonly invisible = new ClassFlag( "invisible" );

  static readonly hidden = new ClassFlag( "hidden" );
  static readonly show = new ClassFlag( "show" );
  static readonly hideable = new ClassFlag( "hideable" ); 

  static readonly playing = new ClassFlag( "playing" );
  static readonly paused = new ClassFlag( "paused" );

  static readonly error   = new ClassFlag( "error" );
  static readonly warning = new ClassFlag( "warning" );
  static readonly ok      = new ClassFlag( "ok" );

  static readonly debugging = new ClassFlag( "debugging" );
  
  static readonly loggedIn = new ClassFlag( "logged-in" );
  static readonly loggedOut = new ClassFlag( "logged-out" );

  static readonly hovered  = new ClassFlag( "hovered" );
  static readonly selected = new ClassFlag( "selected" );
  static readonly dragging = new ClassFlag( "dragging" );

  static readonly smooth = new ClassFlag( "smooth" );

  static readonly debug  = new ClassFlag( "debug" );
  
  static readonly open   = new ClassFlag( "open" );

  static readonly default   = new ClassFlag( "default" );

  static readonly clickable   = new ClassFlag( "clickable" );

  private _value:string;

  constructor( value:string )
  {
    this._value = value;
  }

  static fromEnum( value:string, prefix = "", appendix = "" )
  {
    let flag = value.toLowerCase().replace( "_", "-" );

    return new ClassFlag( prefix + flag + appendix );
  }

  get selector()
  {
    return "." + this._value;
  }

  query( element:Element )
  {
    return element.querySelector( this.selector );
  }

  queryAll( element:Element )
  {
    return DOMEditor.nodeListToArray( element.querySelectorAll( this.selector ) );
  }

  forEachInDoc( callback:( n:Element ) => void )
  {
    let all = this.queryAll( document.body );

    for ( let i = 0; i < all.length; i++)
    {
      callback( all[ i ] );
    }
  }

  forEachIn( source:Element, callback:( n:Element ) => void )
  {
    let all = this.queryAll( source);

    for ( let i = 0; i < all.length; i++)
    {
      callback( all[ i ] );
    }
  }

  queryPrefixed( element:Element )
  {
    return element.querySelector( `[class^="${this._value}"]` );
  }

  queryPrefixedAll( element:Element )
  {
    return element.querySelectorAll( `[class^="${this._value}"]` );
  }
  
  queryDoc()
  {
    return document.querySelector( this.selector );
  }

  set( element:Element )
  {
    ClassFlag.setClass( element, this._value, true );
    return element;
  }

  setAll( elements:Element[], selectedElement:Element )
  {
    elements.forEach( e => this.setAs( e, e === selectedElement ) );
  }

  setSolo( element:Element )
  {
    element.setAttribute( "class", this._value );
  }

  setAs( element:Element, value:boolean )
  {
    ClassFlag.setClass( element, this._value, value );
    return element;
  }

  removeFrom( element:Element )
  {
    ClassFlag.setClass( element, this._value, false );
    return element;
  }

  toggle( element:Element )
  {
    ClassFlag.toggleClass( element, this._value );
    return element;
  }

  in( element:Element )
  {
    return ClassFlag.hasClass( element, this._value );
  }

  static clear( element: Element )
  {
    element.removeAttribute( "class" );
  }
  
  static assign( element:Element, value:string )
  {
    new ClassFlag( value ).set( element );
  }

  static addClass( element:Element, classString:string )
  {
    let classAttribute = element.getAttribute( "class" ) || "";
    let matcher = RegExpUtility.createWordMatcher( classString );
  
    if ( matcher.test( classAttribute ) )
    {
      return;
    }
  
    classAttribute += " " + classString;
    
    ClassFlag.setNormalizedClassAttribute( element, classAttribute );
  }
  
  static removeClass( element:Element, classString:string )
  {
    let matcher = RegExpUtility.createWordMatcher( classString );
    let classAttribute = element.getAttribute( "class" ) || ""; 
  
    classAttribute = classAttribute.replace( matcher, "" );
    ClassFlag.setNormalizedClassAttribute( element, classAttribute );
  }
  
  static hasClass( element:Element, classString:string )
  {
    let matcher = RegExpUtility.createWordMatcher( classString );
    let classAttribute = element.getAttribute( "class" ) || ""; 
    
    return matcher.test( classAttribute );
  }

  static toggleClass( element:Element, className:string )
  {
    let flag = ! ClassFlag.hasClass( element, className );
    ClassFlag.setClass( element, className, flag );
  }
  
  static setNormalizedClassAttribute( element:Element, classAttribute:string )
  { 
    classAttribute = classAttribute.replace( /\s+/g, " " );
    classAttribute = classAttribute.trim();
    
    if ( "" === classAttribute )
    {
      element.removeAttribute( "class" );
    }
    else
    {
      element.setAttribute( "class", classAttribute );
    }
    
  }
  
  static setClass( element:Element, classString:string, enable:boolean )
  {
    if ( enable )
    {
      ClassFlag.addClass( element, classString ); 
    }
    else
    {
      ClassFlag.removeClass( element, classString );
    }
  }
  
  static toggleClassState( element:Element, classString:string )
  {
    let hasClassAssigned = ClassFlag.hasClass( element, classString );
  
    ClassFlag.setClass( element, classString, ! hasClassAssigned );
  }
}