rem /**
rem  * CSSCustomProperties.bbj
rem  *
rem  * This program facilitates setting custom values for several
rem  * of the DWC's CSS custom properties.  Select a property and
rem  * value from the BBjListEdit controls, or type in your own
rem  * property and value.  Then click the [Set CSS Property to Value]
rem  * button to actually set the value of the property.
rem  *
rem  */


rem If the app is running in BUI, switch it automatically to run in the DWC client instead
rem ================================================================================
if (info(3, 6) = "5") then
    bui! = BBjAPI().getBuiManager()
    url! = bui!.getUrl().replaceAll("apps", "webapp")
    action! = bui!.urlAction(url!)
    bui!.setEndAction(action!)
    release
endif


rem Create the main window, define its ON_CLOSE callback, and set its layout and other CSS
rem ================================================================================
mySysGui! = BBjAPI().openSysGui("X0")
myWindow! = mySysGui!.addWindow("CSS Custom Properties", $00100093$)
myWindow!.setCallback(BBjAPI.ON_CLOSE, "onClose")
gosub ApplyStylesAndLayout


rem Add a child window container for sample controls
myChildWindow! = myWindow!.addChildWindow("Sample Controls", $00109000$, BBjAPI().getSysGui().getAvailableContext())

myEdit! = myChildWindow!.addEditBox("Edit Box")
myCheck! = myChildWindow!.addCheckBox("Check Box")
myCheck!.setSelected(1)
myRadio! = myChildWindow!.addRadioButton("Radio Button")
myRadio!.setSelected(1)
myNav! = myChildWindow!.addNavigator("Navigator")


rem Add a child window container for the CSS Custom Property and Value controls
myChildWindow! = myWindow!.addChildWindow("Set New Values for CSS Custom Properties", $00109000$, BBjAPI().getSysGui().getAvailableContext())

myListEditCSSProps! = myChildWindow!.addListEdit(String.join($0a$, cast(Iterable, myVectCssProps!)))
myListEditCSSProps!.setAttribute("label", "CSS Property")
myListEditCSSProps!.setAttribute("expanse", "l")
myListEditCSSProps!.selectIndex(0)
currentProperty$ = myListEditCSSProps!.getText()
myListEditCSSProps!.setCallback(BBjListEdit.ON_EDIT_MODIFY, "OnChangeProperty")

myListEditCSSVals! = myChildWindow!.addListEdit(String.join($0a$, cast(Iterable, myVectCssVals!)))
myListEditCSSVals!.setAttribute("label", "CSS Value")
myListEditCSSVals!.setAttribute("expanse", "l")
myListEditCSSVals!.selectIndex(0)
currentValue$ = myListEditCSSVals!.getText()
myListEditCSSVals!.setCallback(BBjListEdit.ON_EDIT_MODIFY, "OnChangeValue")

myButtonSetCSS! = myChildWindow!.addButton("Set CSS Property to Value")
myButtonSetCSS!.setAttribute("expanse", "l")
myButtonSetCSS!.setCallback(BBjButton.ON_BUTTON_PUSH, "OnButtonPush")

rem Make the window visible and process events
myWindow!.setVisible(1)
process_events


rem Subroutines
rem ================================================================================

rem Exit the program
onClose:
release

rem Apply CSS styles and define the window layout via CSS
ApplyStylesAndLayout:
    rem Define the main window's layout using CSS Flexbox
    css! = "dwc-window-content { "
    css! = css! + "    width: 100%;"
    css! = css! + "    box-sizing: border-box;"
    css! = css! + "    padding: var(--dwc-space-l);"
    css! = css! + "    display: flex;"
    css! = css! + "    flex-direction: column;"
    css! = css! + "    gap: var(--dwc-space-2xl);"
    css! = css! + "    align-items: center;"
    css! = css! + "    border-color: var(--dwc-color-primary);"
    css! = css! + "    border-radius: var(--dwc-border-radius);"
    css! = css! + "} "

    rem Define the Child Windows, which are implemented as fieldsets given their creation flags
    css! = css! + "dwc-window-content fieldset[is='dwc-fieldset-panel'] { "
    css! = css! + "    box-sizing: border-box; "
    css! = css! + "    width: 100%; "
    css! = css! + "    height: 100%; "
    css! = css! + "    padding: var(--dwc-space-l); "
    css! = css! + "    display: grid; "
    css! = css! + "    gap: var(--dwc-space-2xl); "
    css! = css! + "    grid-template-columns: 1fr; "
    css! = css! + "    justify-items: stretch; "
    css! = css! + "    align-items: stretch; "
    css! = css! + "}"

    rem Define the Child Window's title
    css! = css! + "fieldset > legend { "
    css! = css! + "    color: var(--dwc-color-primary); "
    css! = css! + "    font-weight: bold; "
    css! = css! + "}"

    rem Inject the CSS
    BBjAPI().getWebManager().injectStyle(css!)

    rem Define several CSS Custom Properties
    myVectCssProps! = BBjAPI().makeVector()
    myVectCssProps!.addItem("--dwc-font-size")
    myVectCssProps!.addItem("--dwc-font-weight")
    myVectCssProps!.addItem("--dwc-color-body-text")
    myVectCssProps!.addItem("--dwc-color-primary-text")
    myVectCssProps!.addItem("--dwc-color-primary")
    myVectCssProps!.addItem("--dwc-navigator-button-background")


    rem Define several possible values for the above CSS Custom Properties
    myVectCssVals! = BBjAPI().makeVector()
    myVectCssVals!.addItem("20px")
    myVectCssVals!.addItem("12px")
    myVectCssVals!.addItem("bold")
    myVectCssVals!.addItem("normal")
    myVectCssVals!.addItem("light")
    myVectCssVals!.addItem("orange")
    myVectCssVals!.addItem("red")
    myVectCssVals!.addItem("green")
    myVectCssVals!.addItem("purple")
    myVectCssVals!.addItem("unset")
return

OnChangeProperty:
    event! = mySysGui!.getLastEvent()
    currentProperty$ = event!.getText()
return

OnChangeValue:
    event! = mySysGui!.getLastEvent()
    currentValue$ = event!.getText()
return


rem Set the CSS Custom Property to the Designated Value
OnButtonPush:
    css! = ":root { " + currentProperty$ + ": " + currentValue$ + "; }"
    BBjAPI().getWebManager().injectStyle(css!)
return


rem Declares
declare auto BBjSysGui mySysGui!
declare auto BBjTopLevelWindow myWindow!
declare auto BBjChildWindow myChildWindow!
declare auto BBjListEdit myListEditCSSProps!
declare auto BBjListEdit myListEditCSSVals!
declare auto BBjButton myButtonSetCSS!
declare auto BBjEditModifyEvent event!