⚠️ This element is DEPRECATED, we lack of resorces to support it any longer. Please write an issue if you are interested in maintaining it.

<juicy-tile-list>

<juicy-tile-list> is masonry-like Custom Element for sortable tiles that packs efficiently without changing HTML structure (changes CSS only).

Features

It gives you:

• masonry-like, gap-less layout (bin-packing),
• layout applied in Shadow DOM - so it doesn't mess with your styles,
• prioritizing items,
• grouping into virtual, nested containers,
• alignment in different orientations and directions,
• dynamically changing size,
• auto adjusting container sizes,
• gutter/cell-spacing between tiles,
• adapting to window size changes.

Demo

Check it live!

Usage

1. Install the component using Bower:

   $ bower install juicy-tile-list --save

2. Import Web Components' polyfill, if needed:

   <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

3. Import Custom Element:

   <link rel="import" href="../juicy-tile-list/dist/juicy-tile-list.html">

4. Start using it!

   <juicy-tile-list></juicy-tile-list>

Options

Properties

Methods

               | item       | *Item*             |         | Reference to the setup item
               | width      | *Number*           | `0`     | new width
               | height     | *Number*           | `0`     | new height

reprioritizeItem | | | | Change priority/weight of any item | item | Item | | Reference to the setup item | increase | Boolean | false | true - increases, false decreases priority | end | Boolean | false | true to move to the end of list moveToContainer | | | | Move any item to given container, or wrap it with new one | what | Item | | Reference to the setup item | where | Item | | Reference to the destination container item. | noPacking | Boolean | false | true to prevent re-packing after setup change. createNewContainer| | | | Create new empty virtual container. | name | String | | Name for the container | where | Item | "root"| Reference to the container setup item | rectangle | Rectangle | | Rectangle setup (width, height, priority) | noPacking | Boolean | false | true to prevent re-packing after setup change. deleteContainer | | | | Delete virtual container, move items (if any) to one above. | what | Item | | Reference to the container setup item to delete. | noPacking | Boolean | false | true to prevent re-packing after setup change.

Events

Refresh/repack

<juicy-tile-list> can refresh/repack your tiles interactively. You can set it by attributes: refreshOnMutation, refreshOnResize, refreshOnAttached.

👾 🚧 Per-item declarative setup (experimental feature)

If you would like to provide more declaratively setup for each element of <juicy-tile-list>, you can do so by adding custom attribute juicy-style on child element, and provide setup in CSS-like syntax:

<juicy-tile-list>
 <div juicy-style="width: 50%; height: 20;">smth</div>
</juicy-tile-list>

instead of setting it via setup:

juicytilelist.setup = {
  // ...    
  items:[
    {
      id: 0,
      priority: 0.2,
      width: "50%",
      height: 20
    }
  ]
}

Properties provided in juicy-style extends defaults, but may be overwritten by explicit setup entry.

The importance of setups, looks as follows:

1. juicy-tile-list's setup attribute/property,
2. juicy-tile-list's child juicy-style attribute (extends defaults mentioned below),
3. juicy-tile-list's defaultTileSetup attribute,
4. juicy-tile-list's build in default tile setup.

Meaning, that a setup higher on the list overwrites previous values

Tile ids

Every tile gets its id, it's used in ShadowDom (so it won't collide with your markup) to match Light DOM content with positioned tile (and its setup). In HTML ids get created automatically, from order in DOM, so in your setup JSON you simply need to match the index of child node.

🚧 Custom ids (experimental feature)

If for some reason, consecutive numbers does not fit your needs, you can assign id manually, by setting juicytile attribute:

<juicy-tile-list>
 <div juicytile="myFancyTileId">smth</div>
</juicy-tile-list>

juicytilelist.setup = {
  items:[
    {
      id: "myFancyTileId",
      priority: 0.2
    }
  ]
}

Scoped ids (experimental feature)

You can also add name-space to your id in declarative way.

<juicy-tile-list>
  <juicy-tile-group name="fruits">
    <div>apple</div>
  </juicy-tile-group>
  <juicy-tile-group name="veggies">
    <div>carrot</div>
  </juicy-tile-group>
</juicy-tile-list>

juicytilelist.setup = {
  items:[
    {
      id: "fruits/0",
      priority: 0.2
    },
    {
      id: "veggies/0",
      priority: 0.4
    }
  ]
}

Related components

• <juicy-tile-editor> - GUI for editing tiles JSON setup
• <juicy-tile-grid> - Tiles rendered with CSS Grid Layout

Development

Naturally stary with npm install and bower install.

Minify

To minify code you can use grunt minify

Release

To minify, bump versions and release it, use grunt release

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

History

For detailed changelog, check Releases.

License

MIT