Point - globules-io/OGX.JS GitHub Wiki

Point is an object that handles and returns an OML node based on the screen width. It also dispatches when a break point has been reached. It can be instanced as a Uxi or as a Uxi's child.

Stack

Extends

  Uxi, Placeholder

OML

Point acts like a fork that returns the appropriate OML subtree based on the screen width. You can have as many break points that you desire, as long as set are set in a range. In this example, Point is standalone.

 "myStage/MyRoute":{
       "#myDiv:Point":{
             "0-768":{
                "default:Templates.MyTemplateA":{ ... }
             },
             "768-1024":{
                "default:Templates.MyTemplateB":{ ... }
             },
             "1024-1920":{
                "default:Templates.MyTemplateC":{ ... }
             }
        }
  }

Note that the min value is inclusive while the max value is non inclusive

You can also attach a Point to another Uxi. In this case, Point is not standalone but instantiated as a child of the Uxi and won't create any markup. Also note that Point here has been instanced with a name myPoint instead of a selector #myDiv in the previous example.

 "myStage/MyRoute":{
       "#myDiv:Views.MyView":{
             "id":"myview",
             "node:OML":{
                 "myPoint:Point":{
                      "0-768":{
                          "default:Templates.MyTemplateA":{ ... }
                      },
                      "769-1024":{
                          "default:Templates.MyTemplateB":{ ... }
                      },
                      "1025-1920":{
                          "default:Templates.MyTemplateC":{ ... }
                      }
                  }
             }
        }
  }

Live

Point allows you to set live components which will be reused and moved instead of being re-created when a new break point is reached. In the following example, a view is being relocated without being re-created

   "#myDiv:Point":{
         "live":["myView"],
         "0-768":{
              "default:Views.MyView":{
                     "id":"myView",
                      ....
              }
          },
          "769-1024":{
              "#someDiv:Views.MyView":{
                     "id":"myView",
                      ....
              }
          }
    }

Starting at version 1.26.0, you can also set your references to live objects using filters, in case you do not declare an id

     "#myDiv:Point":{
         "live":[{"name":"myView"}],
         "0-768":{
              "default:Views.MyView":{
                     "name":"myView",
                      ....
              }
          },
          "769-1024":{
              "#someDiv:Views.MyView":{
                     "name":"myView",
                      ....
              }
          }
    }

Target

You can also specify a target element to watch instead of the point's element. In this case, you can also express the size in percent. The size comparison will be made over the point's width and the target element's width.

 "#myDiv:Point":{
      "target" : ".col",
      "0%-49%" : { ... },
      "50%-100%" : { ... }
 }

This way you can easily link a css media query @container over the target element

#myDiv{
     container-type: inline-size;
     container-name: mydiv;
}

@container mydiv (max-width: 49%){
    .col{
         width: 100%;
    }
}

@container mydiv (min-width: 50%){
    .col{
         width: 50%;
    }
}

Methods

getPoint

Returns an object expressed as {min: VALUE, max: VALUE} as set in the OML

 myPoint.getPoint();

Events

Point triggers a change event OGX.Point.CHANGE when a new break point has been reached. The information is dispatched as the range, such as

 {min:MIN_VALUE, max:MAX_VALUE}

In other words, when the screen resizes, for instance, to 825px, Point will dispatch

 {min:769, max:1024}