Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/brettz9/miller-columns

Miller Columns in ES6 Modules JavaScript
https://github.com/brettz9/miller-columns

miller-columns widget

Last synced: 16 days ago
JSON representation

Miller Columns in ES6 Modules JavaScript

Host: GitHub
URL: https://github.com/brettz9/miller-columns
Owner: brettz9
License: mit
Created: 2018-03-25T11:08:38.000Z (over 6 years ago)
Default Branch: main
Last Pushed: 2024-09-27T13:40:22.000Z (about 2 months ago)
Last Synced: 2024-10-25T14:37:16.107Z (19 days ago)
Topics: miller-columns, widget
Language: JavaScript
Size: 4.07 MB
Stars: 6
Watchers: 4
Forks: 1
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE-MIT.txt

Awesome Lists containing this project

README

# miller-columns

ES6 Modules adaptation and expansion of

## Screenshots

![Multiple columns](./screenshots/multiple-columns.png)

## Features

- **Good output for styling control**
- Works with semantically correct `

## Installation

`npm install miller-columns --save`

## Set-up

### ES6 Module-supporting browsers

```html

```

### Older browsers

```html

```

## Expected HTML data format

In order to take advantage of the default stylesheet, you should:

1. Put the class `miller-columns` on the element on which you will invoke
our jQuery plug-in for adding Miller columns. The nestable `

` children) will be automatically
given the `miller-column` and possibly the `miller-collapse` class
and its `

` any of these classes: `miller-parent` or `miller-selected`.
If you do not wish one of the lists within `miller-columns` to be
treated as part of the Miller columns, give it a `miller-no-selected`
class.
1. Add `miller-breadcrumbs` for whichever element you want to be the
container for breadcrumbs. Those individual breadcrumbs will be given
the `miller-breadcrumb` class and will be added automatically.

Note that `miller-breadcrumbs` is the only class expected to be present by
our JavaScript code, and that is only if you are not overriding the
`breadcrumbs` option, and also if you have not changed the default
`namespace` to something other than "miller".

(Also as far as namespacing, the library uses jQuery's `.data()` with
`miller-ancestor` and `miller-child` (which can also be altered by the
`namespace` option), but these are stored internally by jQuery).)

## Example (ES6)

```js
// Though on Roadmap for 3.4.0 (see https://github.com/jquery/jquery/wiki/Roadmap),
// jQuery doesn't have ES6 either as source or in a distribution, so you
// currently have to use Rollup with CommonJS plugins to get this next line
// working (or just add the script non-modularly to HTML and use the global `$`)
import $ from 'jquery';

import addMillerColumnPlugin from './node_modules/miller-columns/dist/index-es.min.js';

// The second options argument is optional
await addMillerColumnPlugin($, {stylesheets: ['path/to/extra-stylesheet.css', '@default']});

$('div.miller-columns').millerColumns({
// Options:
current ($item, $cols) {
console.log('User selected:', $item);
}
});
```

## Constructor

Returns a promise resolving when all supplied stylesheets (if any) have
been loaded.

- `$` - The instance of jQuery to which you are adding the plug-in.
- `options`
- `stylesheets` - An optional array of stylesheet paths to be loaded in
parallel. Is meant for this plug-in, but you could include any
stylesheets to benefit from them loading together in parallel. Using
`@default` will provide (an attempt to) load the default stylesheet.
Due to current browser limitations, we can only guess the location of
our module URL.
- `namespace` - Defaults to `miller`. The default must be kept if one
wishes to use the provided `miller-columns.css` stylesheet without
modification.

## Plugin options

- `animation` - Optional callback for ensuring the viewport shows the
entire newly expanded item. Defaults to an internal method. Passed the
column item and columns jQuery objects as arguments.
- `breadcrumb` - Optional callback for adding the breadcrumb path using the
chain of selected items. Defaults to an internal method. No arguments.
- `current` - Optional callback; defaults to a noop. Called upon selection.
Passed the column item and columns jQuery object as arguments.
- `reset` - Optional callback; defaults to a noop. Called upon reset (by
user hitting escape key or any time clicking an element). Passed the
columns jQuery object as argument
- `preview` - Optional callback; defaults to `null`. Passed the column
item and columns jQuery object as arguments. The return result should be
an HTML string which is used to fill the list item which functions as the
preview pane when selected a final item (an item without children).
- `delay` - Optional integer indicating animation delay. Defaults to 500ms.
- `resetOnOutsideClick` - Optional boolean to indicate whether to reset the
browser to the beginning upon clicking within the columns area where
it is not a column. Defaults to `true`.

## To-dos

1. Stop jolting when switching between those with preview panes at same
level and which are already scrolled (new `scrollIntoView` code?)
1. Any way to avoid restructuring of DOM for sake of accessibility?
1. Support JSON (as with routine for converting internally to HTML)
1. Parse lazily from JSON (or HTML) data sources (using ES6 generator)
1. Allow for Preview column for `