Masonry¶
-
/libs/granite/ui/components/coral/foundation/masonry
A container that layouts its items using masonry algorithm.
It implements foundation-selections and foundation-mode vocabulary.
Note that if pagination is configured, this component needs to have a parent with a height and scrollable, such as:
/libs/granite/ui/components/coral/foundation/container
withmaximized=true
/libs/granite/ui/components/coral/foundation/form/advancedselect
withmaximized=true
/libs/granite/ui/components/coral/foundation/panel
’s body
It has the following content structure:
-
granite:Masonry
- granite:commonAttrs
- granite:renderCondition
- granite:container
-
layoutstring
- fixed-spread
- fixed-spread
- fixed-centered
- variable
- dashboard
The algorithm to layout the items:
- fixed-spread
- Layout with fixed width and evenly spread items
- fixed-centered
- Layout with fixed width centered items
- variable
- Layout with variable width items
- dashboard
- Layout with variable width items which are expanded in their height to fill gaps
-
columnWidthlongel
- 242
The width of the column.
-
spacinglongel
- 15
The spacing between the items and the masonry container in pixel.
- selectionModebooleanel
true
to initially display it in selection mode;false
otherwise. In the selection mode, clicking the item selects it, instead of triggering the default behaviour of the item.
- orderablebooleanel
true
to make the items orderable per drag and drop;false
otherwise.
-
selectionCountstringel
- multiple
The count of item to be selected (when the
selectionMode
is enabled):- single
- Only maximum single selection allowed
- multiple
- Zero or more selection allowed
- srcstringel
The URI Template that is returning the HTML response of the masonry. It is used when the client needs to load data dynamically, such as pagination.
If it is not specified, the feature is disabled.
It supports the following variables:
- offset
- The item offset of the current request.
- limit
- The item limit of the pagination.
- id
- The id of the collection ([data-foundation-collection-id]).
e.g.
/a/b/c{.offset,limit}.html{+id}
- pathstringel
The path of the current collection. It will act as the value of [data-foundation-collection-id].
e.g.
${requestPathInfo.suffix}
- itemResourceTypestring
The resource type for each item of the column.
-
limitlong
- 20
The item limit of the pagination.
- sizeintegerel
Indicates the size of the items from datasource to be included. If this property is not specified, then all items from datasource will be included, and the next page will be fetched accordingly.
This is meant to be a performance optimization to avoid fetching the next page unnecessarily. For example given the fact that the
size
is set to 20, and the datasource is configured to fetchsize + 1
, which is 21, the implementation can check if the datasource actually has more item or not just by checking its size.Warning
When
size
is set, you have to make sure your datasource is configured to fetch more than the value ofsize
!size
Actual DS Size Has More? 20 < 20 false
20 = 20 false
20 > 20 true
(not set) n/a true
- metaPathstringel
The path to the resource to render .foundation-collection-meta. If not specified, the resource specified at
path
will be used instead.The resource will be included using resource type specified at
metaResourceType
, where it can be processed accordingly.
- metaResourceTypestring
The resource type to render .foundation-collection-meta.
The resource specified at
metaPath
orpath
will be included using this resource type, where it can be processed accordingly.This property is mandatory to specified if
.foundation-collection-meta
needs to be generated.
- modeGroupstring
The value of [data-foundation-mode-group] this component participates.
The component supports the
default
orselection
mode.When there is a selection, it will trigger the
foundation-mode-change
event with mode =selection
, while triggering the event with mode =default
when there is no selection.When other component triggers the event, when mode =
default
, it will clear the selection and change itself into a default mode, while for mode =selection
, it will change itself into a selection mode.
- itemReorderActionstringel
The URI Template handling the POST request to reorder the item. It supports the following variables:
- item
- The id of the reordered item. ([data-foundation-collection-item-id])
- before
- The id of the reference item. The item is ordered before this reference item. ([data-foundation-collection-item-id])
- beforeName
The name of the before item: var beforeName = before.substring(before.lastIndexOf(“/”) + 1);.
This is meant for convenience for Sling POST Servlet’s
:order
parameter, which requires the node name (instead of path).
The final URL (after URI Template expansion) is converted to
application/x-www-form-urlencoded
content type. For example if we have URI Template of/reorder{?item,before}
which is expanded into/reorder?item=%2Fcontent%2Fde&before=%2Fcontent%2Fen
, the POST would be against/reorder
withitem=%2Fcontent%2Fde&before=%2Fcontent%2Fen
as the request body.
- itemReorderAction.absstringel
This property is the equivalence of
itemReorderAction
for absolute path.For example if your template is
{+item}?order{&before}
, since it is not starting with “/”, the server is unable to know if it is an absolute path. So use this property if you want to add the context path regardless.
-
renderItemElementboolean
- true
true
to automatically render<coral-masonry-item>
and thus the item resource is rendering the content (e.g. a<coral-card>
).false
to make the item resource itself responsible to render<coral-masonry-item>
. This would allow arbitrary attribute to be added to the element.
- skipEmptyItemboolean
false
to show the empty message (or render the empty item usingemptyitem
subresource) when there is no item;true
to skip showing that message.
- emptyitem
The component to render the item to represent an “empty item” when there is no item.
-
layoutstring
Navigating the Item
For navigation when clicking the item, .foundation-collection-navigator can be specified at the item element (or its descendant). It supports navigating to arbitrary location (just like
<a>
), or navigating to the collection item. An example if the item is<coral-card>
:<coral-card class="foundation-collection-navigator"></coral-card>
Card Markup
<coral-card>
is usually used as the item of masonry.For the thumbnail of the card, it is recommended to use maximum 480w x 800h dimensions.
<coral-card image="/content/geometrixx_mobile.thumb.800.480.png?ck=1447060146"></coral-card>
Indicating foundation-collection-action Relationship
To indicate the
[data-foundation-collection-quickactions-rel]
that is used to match the foundation-collection-action (in the toolbar), you should prepare a<meta>
holding the information:<meta class="foundation-collection-quickactions" data-foundation-collection-quickactions-rel="<put value here>">
You can put it as a child of <coral-card>.
Adding Quickactions to the Card
To add quickactions, you need to add
<coral-quickactions>
after the<coral-card>
and specify thetarget
attribute of<coral-quickactions>
to point to the card.Replacement for <a> in Quickactions
Since the markup now is required to be
<coral-quickactions-item>
, you cannot use<a>
anymore. To replace it, you can use foundation-anchor:<coral-quickactions-item icon="infoCircle" class="foundation-anchor" data-foundation-anchor-href="/libs/wcm/core/content/sites/properties.html/content/geometrixx-outdoors">Properties</coral-quickactions-item>
Quickactions Item to Select the Card
For Shell3, there is a need to have a button in the quickactions to select the item/card. To do this, you can use foundation-collection-item-activator to annotate the button:
<coral-quickactions> <coral-quickactions-item class="foundation-collection-item-activator" icon="check">Select</coral-quickactions-item> </coral-quickactions>
Example
<coral-card> <!-- ... --> <meta class="foundation-collection-quickactions" data-foundation-collection-quickactions-rel="cq-siteadmin-admin-actions-create-activator cq-siteadmin-admin-actions-copy-activator"> </coral-card> <coral-quickactions target="_prev" alignMy="left top" alignAt="left top"> <coral-quickactions-item icon="infoCircle" class="foundation-anchor" data-foundation-anchor-href="/libs/wcm/core/content/sites/properties.html/content/geometrixx-outdoors">Properties</coral-quickactions-item> <coral-quickactions-item icon="copy" class="foundation-collection-action" data-foundation-collection-action='{"action": "cq.wcm.copy"}'>Copy</coral-quickactions-item> </coral-quickactions>
Example
+ mymasonry - sling:resourceType = "granite/ui/components/coral/foundation/masonry" - src = "/a/b/c{.offset,limit}.html" + datasource - sling:resourceType = "my/datasource"