Responsive
You might see a problem if you want to create separate elementals for desktop and mobile. To solve this issue, we can
load them lazily based on the viewport. To utilize this, we make use of the isActiveOn
property that we can define
in the given elemental object.
Viewports
The following viewports are available by default:
Viewport | dimensions |
---|---|
mobile | <= 667px |
tablet | 668px - 900px |
desktop | 901px - 1023px |
large-desktop | >= 1024px |
You can change these by changing the index.css file accordingly and by including your own styles, you will only need to
make sure these styles use the @media
directive so that the class hides or shows the block only for ONE viewport.
Using responsive elementals
Creating a mobile only elemental can be done as follows, as we will only have to provide the isActiveOn
property with
an array of the viewports on which it should be available:
<div data-elemental='{"name":"gettingStarted", "isActiveOn": ["mobile"]}'>Random text</div>
How do the elementals get loaded?
There are a number of situations that might occur. I have laid them out in a table for you:
Situation | What happens |
---|---|
in viewport | elemental gets loaded |
not in viewport | elemental does not get loaded |
in viewport after viewport change | elemental gets loaded/resumed |
not in viewport after viewport change | elemental gets paused |
Basically, it comes down to the fact, that elementals will ONLY get loaded if they are in the specified viewport,
provided that the isActiveOn
property has been set. Now, if you leave this viewport (by resizing the screen), it will
call the pause
and resume
methods that you return. Both act as per their mnemonic names.
import {Elemental} from "index";
let responsiveElemental = Elemental("responsive", function (elemental, options) {
// You get access to an object with access to the current DOM you are working in.
// .name is the elemental name
// .el is the javascript context
// .destroy is the removal callable
// .getInstance fetches an already instantiated instance in the current namespace
// .getInstances fetches all elementals in the current namespace
// .getInstanceFromElement fetches an elemental from another provided namespace
// .pubSubClient is the event manager subscription
elemental.el.innerHTML = 'Testing some text';
return {
resume: function () {
elemental.el.innerHTML = 'Testing some resumed text';
},
pause: function () {
elemental.el.innerHTML = 'Testing some paused text';
},
// there is also a destroy method, although this is only for advanced usage
}
});
Note: make sure you include the “index.css” file so that the isActiveOn
property works.