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 parent Uxi width. You can have as many break points that you desire, as long as set are set in a range. Point is available from any Uxi through the point attribute, and can relocate an existing Uxi that has not been instantiated inside Point, such as

 {"#some_id:Views.MyView":{
      "point" : {
           "0-768":{"myWindow:Window":{
                "node:OML":[{"myUxi:Uxi" : {}]
           }},
           "769-5000":{ "myUxi:Uxi" : {} }
      }
 }}

If parameters are omitted, the moving Uxi will be attached at the parent's default placeholder. Some parameters can be passed to target a specific parent and an optional element, such as

"0-768":{ "myUxi:Uxi" : {"parent" : {"id": "someUxi"}, "el": ".someElement"}

Note that parent in this case is a query to target a parent. You can also use {"name": "myName"} etc.

If parameters are omitted, it will attach at the current node in the OML tree, at the parent's placeholder.

{"myId:Uxi" : {} }    

You can now also look for a node, given a search query, mostly used if you are not targeting a node by id. For instance, if you declared Uxi's with a name instead of id, you can search for this node.

If lookup and lookdown are specified, OML will search up first, then down from the found node. If lookup is only specified, it will look upstream for the target, and if only lookdown is specified, it will only look downstream.

In this example, we lookup (upstream) for a node that has for name "OtherName", then from this node, we lookdown (downstream) for a target node of name "MyName". The target node will be moved to either a given parent, or the current parent in the OML tree.

{"*:Uxi" : {
     "target" : { "lookup" : {"name" : "OtherName" }, "lookdown" : {"name" : "MyName"} }
}}

You can also look for the new parent to move the target to, using the same logic.

{"*:Uxi" : {
     "target" : { "lookup" : {"name" : "OtherName" } , "lookdown" : {"name" : "MyName"} },
     "parent" : { "lookup" : {"name" : "SomeName" }, "lookdown" : {"name" : "MyParent"} }
}}

You can of course use lookdown only, if the target and/or the parent are downstream, and you do not need to start the downstream search from a higher starting point in the tree, or lookup only

{"*:Uxi" : {
     "target" : { "lookdown" : {"name" : "MyName"} },
     "parent" : { "lookup" : {"name" : "MyParent"} }
}}

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}