001package arez.dom;
002
003import javax.annotation.Nonnull;
004import jsinterop.annotations.JsPackage;
005import jsinterop.annotations.JsProperty;
006import jsinterop.annotations.JsType;
007
008/**
009 * Factory for getting observable models that sizing of windows.
010 *
011 * <p>A very simple example</p>
012 * <pre>{@code
013 * import arez.Arez;
014 * import arez.dom.EventDrivenValue;
015 * import arez.dom.WindowSize;
016 * import arez.dom.WindowSize.Window;
017 * import com.google.gwt.core.client.EntryPoint;
018 * import jsinterop.annotations.JsPackage;
019 * import jsinterop.annotations.JsProperty;
020 *
021 * public class WindowSizeExample
022 *   implements EntryPoint
023 * {
024 *   public void onModuleLoad()
025 *   {
026 *     final EventDrivenValue<Window, Integer> innerHeight = WindowSize.innerHeight( window() );
027 *     final EventDrivenValue<Window, Integer> innerWidth = WindowSize.innerWidth( window() );
028 *
029 *     Arez.context().observer( () -> System.out.println(
030 *       "Screen size: " + innerWidth.getValue() + " x " + innerHeight.getValue() ) );
031 *   }
032 *
033 *   {@literal @}JsProperty( name = "window", namespace = JsPackage.GLOBAL )
034 *   private static native Window window();
035 * }
036 * }</pre>
037 */
038public final class WindowSize
039{
040  /**
041   * Minimal facade for the browser window sizing API.
042   */
043  @JsType( isNative = true, name = "Window", namespace = JsPackage.GLOBAL )
044  public static class Window
045    extends EventDrivenValue.EventTarget
046  {
047    protected Window()
048    {
049    }
050
051    @JsProperty( name = "innerHeight" )
052    native int innerHeight();
053
054    @JsProperty( name = "innerWidth" )
055    native int innerWidth();
056
057    @JsProperty( name = "outerHeight" )
058    native int outerHeight();
059
060    @JsProperty( name = "outerWidth" )
061    native int outerWidth();
062  }
063
064  private WindowSize()
065  {
066  }
067
068  /**
069   * Create an event driven observable component for window.innerWidth and window.innerHeight wrapped in dimension object.
070   *
071   * @param window the window.
072   * @return the event driven observable component.
073   */
074  @Nonnull
075  public static EventDrivenValue<Window, Dimension> inner( @Nonnull final Window window )
076  {
077    return EventDrivenValue.create( window, "resize", w -> new Dimension( w.innerWidth(), w.innerHeight() ) );
078  }
079
080  /**
081   * Create an event driven observable component for window.innerHeight.
082   *
083   * @param window the window.
084   * @return the event driven observable component.
085   */
086  @Nonnull
087  public static EventDrivenValue<Window, Integer> innerHeight( @Nonnull final Window window )
088  {
089    return EventDrivenValue.create( window, "resize", Window::innerHeight );
090  }
091
092  /**
093   * Create an event driven observable component for window.innerWidth.
094   *
095   * @param window the window.
096   * @return the event driven observable component.
097   */
098  @Nonnull
099  public static EventDrivenValue<Window, Integer> innerWidth( @Nonnull final Window window )
100  {
101    return EventDrivenValue.create( window, "resize", Window::innerWidth );
102  }
103
104  /**
105   * Create an event driven observable component for window.outerHeight.
106   *
107   * @param window the window.
108   * @return the event driven observable component.
109   */
110  @Nonnull
111  public static EventDrivenValue<Window, Integer> outerHeight( @Nonnull final Window window )
112  {
113    return EventDrivenValue.create( window, "resize", Window::outerHeight );
114  }
115
116  /**
117   * Create an event driven observable component for window.outerWidth.
118   *
119   * @param window the window.
120   * @return the event driven observable component.
121   */
122  @Nonnull
123  public static EventDrivenValue<Window, Integer> outerWidth( @Nonnull final Window window )
124  {
125    return EventDrivenValue.create( window, "resize", Window::outerWidth );
126  }
127}