101 lines
2.3 KiB
TypeScript
101 lines
2.3 KiB
TypeScript
|
|
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()})`;
|
|
}
|
|
} |