openui5-masonry stunning cascading grid layout library
Some weeks ago I asked on Twitter and on OpenUI5 Slack channel if someone needed an external JS library wrapped in a custom-lib. One of the first replays was talking about Masonry, a stunning library to create cascading grid layout.
And here we are, this is the first of a series of on-demand openui5 custom library 😉
What is Masonry?
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
Final result first
If you want to checkout the current demo (I’m planning to add more user case) you can check it out here: https://stermi.github.io/openui5-masonry/test/demo/
Usage
Configure manifest.json
Add the library to sap.ui5 dependencies list and configure the resourceRoots to point where you uploaded the custom library.
"sap.ui5": {
...
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
...
"it.designfuture.masonry": {}
}
},
"resourceRoots": {
"it.designfuture.masonry": "./resources/it/designfuture/masonry/"
}
}Add the custom control inside an XML View
Add the library to sap.ui5 dependencies list and configure the resourceRoots to point where you uploaded the custom library.
xmlns:df="it.designfuture.masonry"
And than you can simply add the MasonryLayout custom control
<df:MasonryLayout id="grid-layout" width="100%" height="1080px"
waitImageLoaded="false"
fitWidth="true"
resize="true"
columnWidth=".openui5-masonry-grid-sizer"
layoutComplete="onLayoutComplete"
removeComplete="onRemoveComplete"
imageLoadedAlways="onImageLoadedAlways"
imageLoadedDone="onImageLoadedDone"
imageLoadedFail="onImageLoadedFail"
imageLoadedProgress="onImageLoadedProgress">
<df:content>
<Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
<Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
<Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
<Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
<Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
<Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
<Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
<Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
<Image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
</df:content>
</df:MasonryLayout>Documentation
Build
If you would like to extend and customize the control, you can easily do that but re-building the code with just a simple Grunt command:
npm install
grunt build
If i can, i would add something more interactive to the demo, otherwise it looks a bit ineffectual
Yes, I think I should do. Can you suggest some good user scenario that maybe are not only images?
Hi,
Unfortunately it seems the lib suffers from same issues I have invoking masonry in UI5... The very first time the demo opens it doesn't work because the UI elements haven't fully loaded/informed the Dom of their sizes. Seems this is due to the amount of time it takes to load the UI5 controls. As when cached it works just fine.
Try clearing your cache and throttling your connection speed, you may find same result...
Cheers,
Chris
I've played with it a lot of times. Many times the real effort is to understand when you need to reload the layout and how to correctly apply CSS.
The demo shows the worst case scenario: images. That's why I also needed to add the imagesLoaded plugin.
Each time an image is loaded it triggers a progress event on which I'm also recalling masonry re-layout. Right now I'm handling all internally but I don't know if it should be a developer option or not. I would like to provide an out-of-the-box-working library but maybe it just becomes too overcomplicated.