`@resize` XElement’s Resize Observer

The @resize is a XElement’s Resize observer method.

This allows you to preform interactions upon the element as its own dimensions change.

Reacting to the changes in the dimensions lets you have control over the elements behavior at certain sizes. Changing the font-size of the elements content, its background-color, the options are endless.

There is some notable benefits of using the Resize Observer over the document.resize event target. The key one is that the Resize Observer avoids infinite callback loops and cyclic dependencies, that can be created when resizing through a callback function.

Arguments

The @resize method accepts only two optional arguments into its callback function.

@resize={(entry,store) => { }}

The Resize Observer does not accept any additional options for controlling its behavior.

entry : ResizeObserverEntry

XElement provides you the most recent entry to the observer. Giving you access to the ResizeObserverEntry instance. This object contains the information of the new dimensions of the XElement.

The properties attached to the entry that are available to you are as you would expect from the ResizeObserverEntry API.

entry.borderBoxSize Returns an object containing the new border box size of the XElement.
entry.contentBoxSize Returns an object containing the new content box size of the XElement.
entry.devicePixelContentBoxSize Returns an object containing the new content box size in device pixels of the XElement.
entry.contentRect Returns A DOMRectReadOnly object containing the new size of the XElement.
entry.target Returns a reference to the XElement.

store : Object

Access to XElements internal data-store. We have a page dedicated to describing the store in more detail, you can visit it here.

The store allows for data to be stored and accessed from inside the callback function. Allowing for data and state to be exchanged between other XElements more easily.

options?

There are no additional configuration options that are associated with the resize observer.

`this`

this refers to the XElement itself.

Methods

There is two @visible methods that are available to use.

The @visible method can accept callback functions written in the following manner, to use await within the scope of the function, you would need to wrap the function within its async wrapper.

@resize={(entry,store,options={})=>{ }}

@resize={async(entry,store,options={})=>{ }}

@resize={function(entry,store,options={})=>{ }}

@resize={async function(entry,store,options={})=>{ }}

`@resize` : CallBack ( entry, store )

This method indicates that the on given function

@resize={() => {
  console.log("I've changed size!")
}}

`@resize:once` : CallBack ( event, store )

This method indicated that the observation runs only the once the element has been resized, it then would be remove and disconnected from the XElement.

@resize:once={() => {
  console.log("I've only changed size Once!!")
}}

Notes

Of all of our @ decorators the @resize method is the only one that name-squats on another registered event-target: document.resize.

The reason for this was that the @resize functionality is not applied to the the document, instead it is applied directly to the Element in the form of the ResizeObserver API. Using this namespace to better reflect the resize behavior on the element and keep true with other observers.

You can still utilize the document.resize event target by using it inside your callback functions, for example:

@do={()=>{
  document.addEventListener('resize',()=>{})
}}

@resize XElement’s Resize Observer