Fantom

//
// Copyright (c) 2014, Brian Frank and Andy Frank
// Licensed under the Academic Free License version 3.0
//
// History:
//   19 Dec 2014  Andy Frank  Creation
//

using dom

**
** FlexBox lays out child elements based on the CSS Flexbox Layout module, which
** primarily lays out items along a single axis (the main axis).  Alignment can
** also be specified for the opposite axis (the cross axis).
**
** See also: [docDomkit]`docDomkit::Layout#flexBox`
**
@Js class FlexBox : Box
{
  new make() : super()
  {
    this.style.addClass("domkit-FlexBox")
  }

  **
  ** Direction of the main axis to layout child items:
  **   - "row": layout children left to right
  **   - "column": layout childrent top to bottom
  **
  Str dir := "row"

  **
  ** Define how items are wrapped when content cannot  fit in a
  ** single line/column:
  **   - "nowrap": do not wrap; items are clipped
  **   - "wrap: wrap items onto the next line or column
  **
  Str wrap := "nowrap"

  **
  ** Define child alignment along main axis:
  **
  **   - "flex-start": items are packed toward start of line
  **   - "flex-end": items are packed toward end of line
  **   - "center": items are centered along the line
  **   - "space-between": extra space is evenly distributed between items
  **   - "space-around": extra space is evenly distributed around items
  **
  Str alignMain := "flex-start"

  **
  ** Define child alignment along cross axis:
  **
  **   - "flex-start": items are aligned to top of cross axis
  **   - "flex-end": items are aligned to bottom of cross axis
  **   - "center": items are centered along cross axis
  **   - "baseline": items are aligned so baselines match
  **   - "stretch": stretch items to fill container
  **
  Str alignCross := "center"

  **
  ** Define how multiple lines of content are aligned when extra space
  ** exists in the cross axis:
  **
  **   - "flex-start": lines are packed to top of cross axis
  **   - "flex-end": lines are packed to bottom of cross axis
  **   - "center": lines are packed along center of cross axis
  **   - "space-around": extra space is evenly divided between lines
  **   - "space-between": extra space is evenly divided around lines
  **   - "stretch": stretch lines to fill container
  **
  ** This value has no effect for single line layouts.
  **
  Str alignLines := "stretch"

  **
  ** Convenience to configure the shorthand 'flex' values outside
  ** of child items, where the list position maps to the index of
  ** the child node. Any value here will override the value specified
  ** in the child.
  **
  Str[] flex := [,]

  protected override Void onParent(Elem p) { applyStyle }
  protected override Void onAdd(Elem c)    { applyStyle }
  protected override Void onRemove(Elem c) { applyStyle }

  private Void applyStyle()
  {
    style.setAll([
      "flex-direction":  dir,
      "flex-wrap":       wrap,
      "justify-content": alignMain,
      "align-items":     alignCross,
      "align-content":   alignLines,
    ])

    children.each |kid,i|
    {
      f := flex.getSafe(i)
      if (f != null) kid.style->flex = f
      if (kid is Box)
      {
        if (dir == "row" && kid.style.effective("width") == "100%") kid.style->width  = "auto"
        else if (dir == "column" && kid.style.effective("height") == "100%") kid.style->height = "auto"
      }
    }
  }
}