library-ts/browser/colors/Gradient.ts

import { ColorStop } from "./ColorStop";
import { HTMLColor } from "./HTMLColor";

export abstract class HTMLGradient
{
  colorStops:ColorStop[];

  getColorStopsLengthCSS()
  {
    let colorStopValues = this.colorStops.map( c => c.getLengthCSS() );

    return colorStopValues.join( ", " );
  } 

  getColorStopsDegressCSS()
  {
    let colorStopValues = this.colorStops.map( c => c.getDegreesCSS() );

    return colorStopValues.join( ", " );
  } 

  applyToBackground( e:HTMLElement )
  {
    e.style.background = this.toString();
  }

  abstract toString():string;
}

export class LinearGradient extends HTMLGradient
{
  repeating = false;
  position = "180deg";

  get type()
  {
    return this.repeating ? "repeating-linear-gradient" : "linear-gradient";
  }

  toString()
  { 
    return `${this.type}(${this.position}, ${this.getColorStopsLengthCSS()})` + ( this.repeating ? "" : " no-repeat" );
  }

  static createVertical( color:HTMLColor, h:number = 10, s:number = 5, l:number = 5 )
  {
    let hslColor = color.toHSL().clone();

    let colorA = hslColor.clone().shift( -h, -s, -l );
    let colorB = hslColor.clone().shift(  h,  s,  l );

    let lg = new LinearGradient();
    lg.colorStops = ColorStop.createEqualSpread( 100, colorA, colorB );    
    return lg;
  }

  static createHorizontal( left:HTMLColor, right:HTMLColor, normalizedState:number, normalizedWidth:number )
  {
    let lg = new LinearGradient();
    lg.position = "90deg";
    lg.colorStops = 
    [ 
      ColorStop.create( left, normalizedState - normalizedWidth ),
      ColorStop.create( right, normalizedState + normalizedWidth ),
    ]

    return lg;
  }

  static create( colors:HTMLColor[] )
  {
    let lg = new LinearGradient();
    lg.colorStops = ColorStop.createFrom( colors );    
    return lg;
  }
}

export class RadialGradient extends HTMLGradient
{
  repeating = false;
  position = "circle at center";

  get type()
  {
    return this.repeating ? "repeating-radial-gradient" : "radial-gradient";
  }

  toString()
  { 
    return `${this.type}(${this.position}, ${this.getColorStopsLengthCSS()})`;
  }
}

export class ConicGradient extends HTMLGradient
{ 
  toString()
  { 
    return `conic-gradient(${this.getColorStopsDegressCSS()})`;
  }
}