openui5-masonry stunning cascading grid layout library

[ericci]

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

• Properties


• Aggregations


• Events


• Public Methods

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

Links

• Author: Emanuele Ricci


• Medium Blog


• openui5-masonry repo


• MasonryJS