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 aUxi
or as aUxi
's child.
Stack
Extends
Uxi, Placeholder
OML
Point
acts like a fork that returns the appropriateOML
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 themax
value is non inclusive
You can also attach a
Point
to anotherUxi
. In this case,Point
is not standalone but instantiated as a child of theUxi
and won't create any markup. Also note that Point here has been instanced with a namemyPoint
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 anid
"#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 theOML
myPoint.getPoint();
Events
Point
triggers a change eventOGX.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}