Ekstra Bladet - Magic Shuffle Module

Let the magic happen

Isotope-like grouping, sorting and filtering interface. This project was inspired by Isotope and d3.layout.grid

Table Of Content

• Getting Started
• Dependencies
  • Usage
• Contributing
  • Build
• Questions
• License

Getting Started

Dependencies

This module requires Node.JS and NPM for installation. The module use 'debounce' package to limit the number of invocations when resizing the browser. Add the module and install dependencies using NPM:

npm i eb-module-magic-shuffle

Usage

Create a container in the HTML-file for the shuffle:

<div class="grid-container"></div>

Reference the required stylesheet:

@import 'eb-module-magic-shuffle/main.css';

Reference the module in the javascript:

import EbGridLayout from 'eb-module-magic-shuffle';

/* Create a new instance */
const gridInstance = new EbGridLayout(document.querySelector('.grid-container'));

/* Create some elements for sorting */
gridInstance.createElem({
        attributes: {'color': 'blue', 'otherdata': 311},
        innerHTML: `<p style="color: blue;">Item 1</p>`
      });

gridInstance.createElem({
        attributes: {'color': 'blue', 'otherdata': 121},
        innerHTML: `<p style="color: blue;">Item 2</p>`
      });

gridInstance.createElem({
        attributes: {'color': 'red', 'otherdata': 411},
        innerHTML: `<p style="color: red;">Item 3</p>`
      });

The module creates corresponding DOM-elements every time createElem() function is invoked. The DOM-elements can be targeted in as by referencing the default classname grid-item.

.grid-item {
  width: 33,3%;
  background: blue;
}

Public functions

Grouping:

Shows groupnames and sorts by item

/* Group the created items by color and update layout */
gridInstance.groupBy('color');

Sorting:

Hides groupname and sorts by attribute

/* Sort items by otherdata */
gridInstance.sortBy('otherdata');

Filter:

Filters out files by passing attributes to boolean function

/* Group the created items by color and update layout */
gridInstancer.filter((attr) => {
  return (attr.color !=== 'blue')
})

Examples

• Simple Example
• Demonstration (Custom design)

Contributing

If you want to contribute to a project and make it better, your help is very welcome.

git clone [email protected]:EkstraBladetUdvikling/eb-module-magic-shuffle.git
cd eb-module-magic-shuffle

References: API Documentation

Build

Run build to output ES5 CommonJS-module for use with package manager (index.js). Typescript definitions is automatically created (index.d.js).

npm run build

License

Copyright © 2018, Ekstra Bladet

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.