Coral.Masonry

Current Version: 1.2.1
Note:Any Coral CSS classes and attributes not explicitly mentioned in the public documentation are private and subject to change. Their direct use is not recommended and at high risk of breaking after subsequent updates of CoralUI library. For technical details of how to use Coral safely, please refer to the CoralUI Architecture.
Github: @coralui/coralui-component-masonry

The masonry is a container component which allows to lay out items in a masonry grid.

Markup Examples

Layout Types

Fixed-spread

All items have the same fixed width. The remaining space is equally distributed between the container and items. If the first row is not filled, then the items are left aligned.

Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel. His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem. Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu. Et summo volumus sed, sea sale maiorum dignissim te.
Show Markup 
<coral-masonry layout="fixed-spread" spacing="20" columnwidth="80">
  <coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item>
  <coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.</coral-masonry-item>
  <coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.</coral-masonry-item>
  <coral-masonry-item>Et summo volumus sed, sea sale maiorum dignissim te.</coral-masonry-item>
</coral-masonry>

Fixed-centered

All items have the same fixed width. They are centered in the middle of the container with the defined spacing between each other.

Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel. His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem. Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu. Et summo volumus sed, sea sale maiorum dignissim te.
Show Markup 
<coral-masonry layout="fixed-centered" spacing="20" columnwidth="80">
  <coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item>
  <coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.</coral-masonry-item>
  <coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.</coral-masonry-item>
  <coral-masonry-item>Et summo volumus sed, sea sale maiorum dignissim te.</coral-masonry-item>
</coral-masonry>

Variable

The columnwidth defines the minimum width for the item. If there is remaining space, then it is distributed equally between all items.

Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel. His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem. Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu. Et summo volumus sed, sea sale maiorum dignissim te.
Show Markup 
<coral-masonry layout="variable" spacing="20" columnwidth="80">
  <coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item>
  <coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.</coral-masonry-item>
  <coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.</coral-masonry-item>
  <coral-masonry-item>Et summo volumus sed, sea sale maiorum dignissim te.</coral-masonry-item>
</coral-masonry>

Dashboard

Similar to the variable layout; however, remaining vertical space will be filled by expanding items.

Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel. His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem. Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu. Et summo volumus sed, sea sale maiorum dignissim te.
Show Markup 
<coral-masonry layout="dashboard" spacing="20" columnwidth="80">
  <coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item>
  <coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.</coral-masonry-item>
  <coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.</coral-masonry-item>
  <coral-masonry-item>Et summo volumus sed, sea sale maiorum dignissim te.</coral-masonry-item>
</coral-masonry>

Orderable

⠿ Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel. ⠿ His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. ⠿ Ei noluisse expetenda qui. Mei in iusto convenire torquatos.
Show Markup 
<coral-masonry layout="fixed-spread" spacing="20" columnwidth="100" orderable>
  <coral-masonry-item>
    <span coral-masonry-draghandle>⠿</span>
    Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.
  </coral-masonry-item>
  <coral-masonry-item>
    <span coral-masonry-draghandle>⠿</span>
    His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.
  </coral-masonry-item>
  <coral-masonry-item>
    <span coral-masonry-draghandle>⠿</span>
    Ei noluisse expetenda qui. Mei in iusto convenire torquatos.
  </coral-masonry-item>
</coral-masonry>

Multi-column Items

Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel. His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Ei noluisse expetenda qui. Mei in iusto convenire torquatos. Et summo volumus sed, sea sale maiorum dignissim te.
Show Markup 
<coral-masonry layout="fixed-spread" spacing="20" columnwidth="100">
  <coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item>
  <coral-masonry-item colspan="2">His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.</coral-masonry-item>
  <coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos.</coral-masonry-item>
  <coral-masonry-item>Et summo volumus sed, sea sale maiorum dignissim te.</coral-masonry-item>
</coral-masonry>

JavaScript Examples

Filtering Items

The following example shows how items can be filtered with JavaScript.
Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel. His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Ei noluisse expetenda qui. Mei in iusto convenire torquatos.
Show Markup 
<input class="coral3-Textfield" id="filter" placeholder="Filter">
<coral-masonry id="masonry_filter_example" layout="variable" spacing="20" columnwidth="100">
  <coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item>
  <coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.</coral-masonry-item>
  <coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos.</coral-masonry-item>
</coral-masonry>
<script>
  $('#filter').on('input', function(e) {
    var filterText = e.target.value.toLowerCase();
  
    $('#masonry_filter_example')[0].items.getAll().forEach(function (item) {
      var itemText = item.textContent.toLowerCase();
      if (itemText.indexOf(filterText) !== -1) {
        item.show();
      } else {
        item.hide();
      }
    });
  });
</script>

Selecting Items

The following example shows one possibility how selection can be implemented.

Click on items to select/unselect them:

Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel. His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Ei noluisse expetenda qui. Mei in iusto convenire torquatos.
Show Markup 
<p>Click on items to select/unselect them:</p>
<coral-masonry id="masonry_selection_example" layout="variable" spacing="20" columnwidth="100">
  <coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item>
  <coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.</coral-masonry-item>
  <coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos.</coral-masonry-item>
</coral-masonry>
<script>
  $('#masonry_selection_example').on('click', 'coral-masonry-item', function(e) {
    this.selected = !this.selected;
  });
</script>

Coral.Masonry API

Constructor

JavaScript:

new Coral.Masonry() or document.createElement('coral-masonry')

HTML Tag:

<coral-masonry>

Extends

Sub-components

Instance Properties

instance.hidden {Boolean}

Reflected
Whether this component is hidden or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • hidden

instance.items {Coral.Collection}

Readonly
Coral.Collection which allows to interact with the masonry items.

instance.layout {String}

Reflected
The layout name for this masonry. Must be one of Coral.Masonry.layouts. The following layout types are available by default:
  • fixed-centered: Layout with fixed width centered items
  • fixed-spread: Layout with fixed width and evenly spread items
  • variable: Layout with variable width items
  • dashboard: Layout with variable width items which are expanded in their height to fill gaps
HTML Attribute:
  • layout

instance.selectedItem {Coral.Masonry.Item}

Readonly
The first selected item or null if no item is selected.

instance.selectedItems {Array.<Coral.Masonry.Item>}

Readonly
An array of all selected items.

instance.spacing {Number}

The spacing between the items and the masonry container in pixel. If this property is not set, then it falls back to the CSS padding of the masonry and margin of the items.
Default Value:
  • null
HTML Attribute:
  • spacing

Methods

Coral.Masonry.registerLayout

Registers a layout with the given name. The name can then be set at Coral.Masonry.layout to render a masonry with the this registered layout.
Parameters:
Name Type Description
name String the lower case name of the layout
Layout Layout class which extends Layout

instance.deselectAll

Deselects all items.
See:
  • #selectAll

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
 The event name to stop listening for.
selector String Yes
 The selector that was used for event delegation.
func function No
 The function that was passed to on().
useCapture Boolean Yes
 Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
 The event name to listen for.
selector String Yes
 The selector to use for event delegation.
func function No
 The function that will be called when the event is triggered.
useCapture Boolean Yes
 Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it.
Inherited From:

instance.selectAll

Selects all items.
See:
  • #deselectAll

instance.set

Set a single property.
Parameters:
Name Type Description
property String The name of the property to set.
value * The value to set the property to.
silent Boolean If true, events should not be triggered as a result of this set.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
 The event name to trigger.
props Object Yes
 Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
 Set to false to prevent the event from bubbling.
cancelable Boolean Yes
 Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:
Deprecated:
  • since 1.14.0, use MutationObserver instead.

    coral-component:detached

    Triggered when the component is detached to the DOM.
    Callback Parameters:
    Name Type Description
    event Object Event object.
    Inherited From:
    Deprecated:
    • since 1.14.0, use MutationObserver instead.

      coral-component:ready

      Triggerred when the component has been upgraded and is ready for use.
      Callback Parameters:
      Name Type Description
      event Object Event object.
      Inherited From:
      Deprecated:
      • since 1.9.0, use Coral.commons.ready() instead.

        Coral.Masonry.Item API

        Constructor

        JavaScript:

        new Coral.Masonry.Item() or document.createElement('coral-masonry-item')

        HTML Tag:

        <coral-masonry-item>

        Extends

        Instance Properties

        instance.content {HTMLElement}

        Item content element.

        instance.hidden {Boolean}

        Reflected
        Whether this component is hidden or not.
        Inherited From:
        Default Value:
        • false
        HTML Attribute:
        • hidden

        instance.orderable {Boolean}

        Whether or not it is possible to order items with drag & drop.
        Default Value:
        • false
        HTML Attribute:
        • orderable

        instance.selected {Boolean}

        Reflected
        Whether the item is selected.
        Default Value:
        • false
        HTML Attribute:
        • selected

        Methods

        instance.get

        Get the value of a property.
        Parameters:
        Name Type Description
        property String The name of the property to fetch the value of.
        Returns:
        Property value. {*}
        Inherited From:

        instance.hide

        Hide this component.
        Returns:
        this, chainable {Coral.Component}
        Inherited From:

        instance.off

        Remove an event listener.
        Parameters:
        Name Type Optional Description
        eventName String No
        		 The event name to stop listening for.
        selector String Yes
        		 The selector that was used for event delegation.
        func function No
        		 The function that was passed to on().
        useCapture Boolean Yes
        		 Only remove listeners with useCapture set to the value passed in.
        Returns:
        this, chainable. {Coral.Component}
        Inherited From:

        instance.on

        Add an event listener.
        Parameters:
        Name Type Optional Default Description
        eventName String No
        		 The event name to listen for.
        selector String Yes
        		 The selector to use for event delegation.
        func function No
        		 The function that will be called when the event is triggered.
        useCapture Boolean Yes
        		 Whether or not to listen during the capturing or bubbling phase.
        Returns:
        this, chainable. {Coral.Component}
        Inherited From:

        instance.remove

        Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it.
        Inherited From:

        instance.set

        Set a single property.
        Parameters:
        Name Type Description
        property String The name of the property to set.
        value * The value to set the property to.
        silent Boolean If true, events should not be triggered as a result of this set.
        Returns:
        this, chainable. {Coral.Component}
        Inherited From:

        instance.show

        Show this component.
        Returns:
        this, chainable {Coral.Component}
        Inherited From:

        instance.trigger

        Trigger an event.
        Parameters:
        Name Type Optional Default Description
        eventName String No
        		 The event name to trigger.
        props Object Yes
        		 Additional properties to make available to handlers as event.detail.
        bubbles Boolean Yes
        		 Set to false to prevent the event from bubbling.
        cancelable Boolean Yes
        		 Set to false to prevent the event from being cancelable.
        Returns:
        CustomEvent object {CustomEvent}
        Inherited From:

        Events

        coral-component:attached

        Triggered when the component is attached to the DOM.
        Callback Parameters:
        Name Type Description
        event Object Event object.
        Inherited From:
        Deprecated:
        • since 1.14.0, use MutationObserver instead.

          coral-component:detached

          Triggered when the component is detached to the DOM.
          Callback Parameters:
          Name Type Description
          event Object Event object.
          Inherited From:
          Deprecated:
          • since 1.14.0, use MutationObserver instead.

            coral-component:ready

            Triggerred when the component has been upgraded and is ready for use.
            Callback Parameters:
            Name Type Description
            event Object Event object.
            Inherited From:
            Deprecated:
            • since 1.9.0, use Coral.commons.ready() instead.