Package arez.dom

Class MediaQuery

java.lang.Object
arez.dom.MediaQuery
@ArezComponent(requireId=DISABLE) public abstract class MediaQuery extends Object
An observable model that indicates whether a window matches a CSS media query.

A very simple example


 import arez.Arez;
 import arez.mediaquery.MediaQuery;
 import com.google.gwt.core.client.EntryPoint;
 import akasha.Console;

 public class MediaQueryExample
   implements EntryPoint
 {
   public void onModuleLoad()
   {
     final MediaQuery mediaQuery = MediaQuery.create( "(max-width: 600px)" );
     Arez.context().observer( () ->
                                DomGlobal.document.querySelector( "#status" ).textContent =
                                  "Screen size Status: " + ( mediaQuery.matches() ? "Narrow" : "Wide" ) );
   }
 }

  • Method Details

    • create

      @Nonnull public static MediaQuery create(@Nonnull String query)
      Create an instance of MediaQuery.
      Parameters:
      query - the CSS media query to match.
      Returns:
      the MediaQuery instance.

    • create

      @Nonnull public static MediaQuery create(@Nonnull akasha.Window window, @Nonnull String query)
      Create an instance of MediaQuery.
      Parameters:
      window - the window to test.
      query - the CSS media query to match.
      Returns:
      the MediaQuery instance.

    • getWindow

      @Nonnull public akasha.Window getWindow()
      Return the window against which the MediaQuery will run.
      Returns:
      the window to test.

    • getQuery

      @Nonnull @Observable public String getQuery()
      Return the media query to test against window.
      Returns:
      the associated media query.

    • setQuery

      public void setQuery(@Nonnull String query)
      Change the media query to test against. If the component is active then invoking this will ensure that the listener is updated to listen to new query.
      Parameters:
      query - the CSS media query.

    • matches

      @Memoize(depType=AREZ_OR_EXTERNAL) public boolean matches()
      Return true if the media query matches, false otherwise.
      Returns:
      true if the media query matches, false otherwise.