Juicy / juicy-tile-grid

Masonry-like Custom Element for sortable tiles that packs efficiently without changing HTML structure (changes CSS only), and adapts it to CSS Grid Layout. Extended renderer for juicy-tile-list.
http://juicy.github.io/juicy-tile-grid/
MIT License
8 stars 1 forks source link

Bound setup of few items together #30

Open tomalec opened 8 years ago

tomalec commented 8 years ago

It would be nice to have a feature to state that some items shares the same setup.

To improve config maintenance, and reduce the size of config, and the number of copy'n'paste.

We could mark two items/groups to refer to the same setup node.

Proposed syntax:

{
    // ...
    {
        id: 'groupOrRootName',
        items: [{
            id: 'label1',
            priority: 0.9,
            // all those properties will be overridden by referenced setup
            // but could stay here to be used after `setupReference` is set to falsy
            height: 100,
            width: 200,
            // share the setup 
            setupReference: 'labels'
        }, {
            id: 'label2'
            priority: 0.6,
            // share the setup 
            setupReference: 'labels'
        }, {
            id: 'map',
            priority: 0.7,
            height: 20,
            width: 80
        }],
        // setup for bound items
        boundItems: {
            'labels': {
                height: 100,
                width: 100
            }
        }
    }
    // ...
}

what make tiles to be rendered as for:

{
    // ...
    {
        id: 'groupOrRootName',
        items: [{
            id: 'label1',
            priority: 0.9,
            height: 100,
            width: 100
        }, {
            id: 'label2'
            priority: 0.6,
            // those values are fetched from the same object as before, so
            height: 100,
            width: 100
        }, {
            id: 'map',
            priority: 0.7,
            height: 20,
            width: 80
        }]
    }
    // ...
}