import { Share } from './share' ; import { GUIActions } from './GUIActions' ; import { CSSStyleModifier } from './CSSStyleModifier' ; import Color from 'color' ; /**
 *
 * This class implements the background texture.
 * The background can be black (for a blackboard), or white for a whiteboard
 * But it can technicallybe of any color, or actually any CSS style
 */ export class BackgroundTexture { static currentBackgroundTexture = "black" ; static init ( ) { const backgroundCustomColor = document . getElementById ( "backgroundCustomColor" ) ; const checkboxBackgroundGradient = < HTMLInputElement > document . getElementById ( "checkboxBackgroundGradient" ) ; const inputBackgroundColor = < HTMLInputElement > document . getElementById ( "inputBackgroundColor" ) ; const inputBackgroundColor2 = < HTMLInputElement > document . getElementById ( "inputBackgroundColor2" ) ; const updateCustomColor = ( ) => { backgroundCustomColor . hidden = false ; const texture = checkboxBackgroundGradient . checked ? `linear-gradient(${ inputBackgroundColor . value }, ${ inputBackgroundColor2 . value })` : inputBackgroundColor . value ; Share . execute ( "setBackgroundColor" , [ texture ] ) ; } ; checkboxBackgroundGradient . oninput = ( ) => { document . getElementById ( "backgroundIfGradient" ) . hidden = ! checkboxBackgroundGradient . checked ; updateCustomColor ( ) ; } ; inputBackgroundColor . oninput = updateCustomColor ; inputBackgroundColor2 . oninput = updateCustomColor ; checkboxBackgroundGradient . checked = false ; backgroundCustomColor . hidden = true ; document . getElementById ( "content" ) . style . background = "black" ; BackgroundTexture . switchTo ( "black" ) ; document . getElementById ( "whiteBoardSwitch" ) . onclick = ( ) => { backgroundCustomColor . hidden = true ; Share . execute ( "setBackgroundColor" , [ "white" ] ) ; } ; document . getElementById ( "blackBoardSwitch" ) . onclick = ( ) => { backgroundCustomColor . hidden = true ; Share . execute ( "setBackgroundColor" , [ "black" ] ) ; } ; document . getElementById ( "customBoardSwitch" ) . onclick = updateCustomColor ; } param backgroundTexture description static switchTo ( backgroundTexture ) { const previousBackgroundColor = BackgroundTexture . currentBackgroundTexture ; BackgroundTexture . currentBackgroundTexture = backgroundTexture ; console . log ( "previous background color was " + previousBackgroundColor ) ; console . log ( "switch to " + backgroundTexture + "board" ) ; if ( document . getElementById ( backgroundTexture + "BoardSwitch" ) ) document . getElementById ( backgroundTexture + "BoardSwitch" ) . classList . add ( "buttonselected" ) ; document . getElementById ( "backgroundSnapshotBackgroundColor" ) . style . background = backgroundTexture ; if ( previousBackgroundColor == backgroundTexture ) return ; if ( document . getElementById ( previousBackgroundColor + "BoardSwitch" ) ) document . getElementById ( previousBackgroundColor + "BoardSwitch" ) . classList . remove ( "buttonselected" ) ; GUIActions . palette . switchBlackAndWhite ( ) ; document . getElementById ( "content" ) . style . background = backgroundTexture ; } returns static getBackgroundTexture ( ) { return this . currentBackgroundTexture ; } returns static getDefaultChalkColor ( ) { return Color ( BackgroundTexture . getBackgroundTexture ( ) ) . isLight ( ) ? "black" : "white" ; } }