Skip to content

Commit 0bd888c

Browse files
author
Graham Butler
committed
add demo showroom and update readme
1 parent 89ba055 commit 0bd888c

File tree

9 files changed

+5331
-7
lines changed

9 files changed

+5331
-7
lines changed

‎README.md‎

Lines changed: 71 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
# AuthorSelectElement [![](https://data.jsdelivr.com/v1/package/npm/@author.io/element-select/badge)](https://www.jsdelivr.com/package/npm/@author.io/element-select?path=dist) [![Build Status](https://travis-ci.org/author-elements/select.svg?branch=master&style=for-the-badge)](https://travis-ci.org/author-elements/select)
22

3-
<!-- TODO: Add description -->
3+
`author-select` is a fully-stylable select menu component. It is designed to match the functionality of browser default select menus while providing flexibility for customization if desired.
4+
5+
`author-select` is broken down into several components:
6+
7+
- `author-selected-options`
8+
- `author-options`
9+
- `author-option`
10+
- `author-optgroup-label`
11+
- `author-optgroup`
12+
13+
This allows each part of the component to be styled directly. Each of these components can also be used standalone in other applications as well.
414

515
![Source Size](https://img.shields.io/github/size/author-elements/select/src/element.js.svg?colorB=%23333333&label=Source&logo=JavaScript&logoColor=%23aaaaaa&style=for-the-badge) ![Deliverable Size](https://img.shields.io/bundlephobia/minzip/@author.io/element-select.svg?colorB=%23333333&label=Minified-Gzipped&logo=JavaScript&style=for-the-badge) ![npm](https://img.shields.io/npm/v/@author.io/element-select.svg?colorB=%23333&label=%40author.io%2Felement-select&logo=npm&style=for-the-badge)
616

@@ -17,9 +27,9 @@ There are 4 versions of this element:
1727
1. *author-select.es5.min.js* (ES5 Minified for Production)
1828
1. _author-select.es5.js_ (ES5 Unminified for Debugging)
1929

20-
Each version has it's own source map, so it's always possible to trace activity back to a specific code block in the source.
30+
You only need to choose one of these files. If you need to support Internet Explorer, older versions of Chrome/Firefox/Safari, then you likely need the ES5 version. Each version has it's own source map, so it's always possible to trace activity back to a specific code block in the source.
2131

22-
You only need to choose one of these files. If you need to support Internet Explorer, older versions of Chrome/Firefox/Safari, then you likely need the ES5 version.
32+
The best way to use `author-select` is in combination with [author-control](https://github.com/author-elements/control). Placing a `select` tag inside an `author-control` will automatically generate a fully-functional `author-select` menu and pair it with a label if provided.
2333

2434
*Via Global CDN*
2535

@@ -34,25 +44,79 @@ You only need to choose one of these files. If you need to support Internet Expl
3444

3545
*Via npm*
3646

37-
If the [base class](https://github.com/author-elements/base) is not yet installed, install it:
47+
1. If the [base class](https://github.com/author-elements/base) is not yet installed, install it:
3848

3949
`npm install @author.io/element-base -S`
4050

41-
Next, install the select module locally:
51+
2. Next, install the select module locally:
4252

4353
`npm install @author.io/element-select -S`
4454

45-
Then include them in your HTML:
55+
3. If using with `author-control`, install it:
56+
57+
`npm install @author.io/element-control -S`
58+
59+
4. Then include the components in your HTML:
4660

4761
```html
4862
<html>
4963
<head>
5064
<script src="./node_modules/@author.io/element-base/dist/author-base.min.js"></script>
65+
<script src="./node_modules/@author.io/element-base/dist/author-control.min.js"></script>
5166
<script src="./node_modules/@author.io/element-select/dist/author-select.min.js"></script>
5267
</head>
5368

5469
<body>
55-
70+
<author-control>
71+
<label>Select Menu</label>
72+
<select [placeholder="Select an Option"] [multiple]>
73+
<option value="Option 1">Option 1</option>
74+
<option value="Option 2">Option 2</option>
75+
<option value="Option 3">Option 3</option>
76+
77+
<optgroup label="Grouped Options">
78+
<option value="Grouped Option 1">Grouped Option 1</option>
79+
<option value="Grouped Option 2">Grouped Option 2</option>
80+
<option value="Grouped Option 3">Grouped Option 3</option>
81+
</optgroup>
82+
</select>
83+
</author-control>
5684
</body>
5785
</html>
5886
```
87+
88+
If using without `author-control`, lay out `author-select` manually using the following markup:
89+
90+
```html
91+
<author-select>
92+
<!-- <slot name="afterbegin"></slot> -->
93+
94+
<!-- <slot name="beforeselectedoptions"></slot> -->
95+
<author-selected-options></author-selected-options>
96+
<!-- <slot name="afterselectedoptions"></slot> -->
97+
98+
<!-- <slot name="beforeoptions"></slot> -->
99+
<author-options>
100+
<author-option value="Option 1">Option 1</author-option>
101+
<author-option value="Option 2">Option 2</author-option>
102+
<author-option value="Option 3">Option 3</author-option>
103+
104+
<author-optgroup-label>OPTGROUP LABEL</author-optgroup-label>
105+
<author-optgroup>
106+
<author-option value="Grouped Option 1">Grouped Option 1</author-option>
107+
<author-option value="Grouped Option 2">Grouped Option 2</author-option>
108+
<author-option value="Grouped Option 3">Grouped Option 3</author-option>
109+
</author-optgroup>
110+
</author-options>
111+
<!-- <slot name="afteroptions"></slot> -->
112+
113+
<!-- <slot name="beforeend"></slot> -->
114+
</author-select>
115+
```
116+
117+
Additional elements can be added to the various slots within the markup if desired.
118+
119+
## Customization and Styling
120+
`author-select` is optimized for use with [NGN Chassis](https://github.com/ngn-chassis), a PostCSS-powered CSS Framework and Preprocessor. If using `author-select` separately, it and all its child elements can be styled directly with CSS. For a quick start, download the <a href="#">default theme</a>.
121+
122+
The child elements of `author-select` can also be used independently to create customized UI components. See also [author-datalist](https://github.com/author-elements/datalist).

‎showroom/build.js‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
const fs = require('fs-extra')
2+
const path = require('path')
3+
4+
const ProductionLine = require('productionline-web')
5+
const TaskRunner = require('shortbus')
6+
const Chassis = require('@chassis/core')
7+
8+
class Builder extends ProductionLine {
9+
constructor (cfg) {
10+
super(cfg)
11+
12+
this.devMode = false
13+
}
14+
15+
copyCustomElements (cb) {
16+
this.walk(this.paths.authorElements).forEach(dir => {
17+
let filepath = path.join(dir, 'dist')
18+
this.walk(filepath).forEach(file => fs.copySync(filepath, this.outputDirectory('webcomponents')))
19+
})
20+
21+
cb()
22+
}
23+
24+
copyLibs (cb) {
25+
fs.copySync(this.paths.lib, this.outputDirectory('lib'))
26+
cb()
27+
}
28+
29+
processCss (minify = true, cb) {
30+
let chassis = new Chassis({
31+
minify,
32+
sourceMap: true,
33+
theme: path.join(this.SOURCE, 'css', 'main.theme'),
34+
layout: {
35+
minWidth: 320,
36+
maxWidth: 960
37+
}
38+
})
39+
40+
let tasks = new TaskRunner()
41+
42+
this.walk(this.paths.css).forEach(filepath => {
43+
tasks.add(`Process ${this.localDirectory(filepath)}`, cont => {
44+
chassis.process(filepath, (err, processed) => {
45+
if (err) {
46+
throw err
47+
}
48+
49+
if (processed.sourceMap) {
50+
this.writeFileSync(`${this.outputDirectory(filepath)}.map`, processed.sourceMap)
51+
}
52+
53+
this.writeFile(this.outputDirectory(filepath), this.applyHeader(processed.css, 'css'), cont)
54+
})
55+
})
56+
})
57+
58+
tasks.on('complete', cb)
59+
tasks.run()
60+
}
61+
62+
processJavascript (minify = true, cb) {
63+
let tasks = new TaskRunner()
64+
65+
this.walk(this.paths.javascript).forEach(filepath => {
66+
tasks.add(`Process ${this.localDirectory(filepath)}`, cont => {
67+
let dir = path.dirname(filepath)
68+
let output = this.transpile(filepath)
69+
70+
if (minify) {
71+
output = this.minify(output.code)
72+
}
73+
74+
this.writeFile(this.outputDirectory(filepath), this.applyHeader(output.code, 'js'), cont)
75+
})
76+
})
77+
78+
tasks.on('complete', cb)
79+
tasks.run()
80+
}
81+
82+
make (devMode = false) {
83+
this.clean()
84+
// this.copyAssets(true)
85+
this.addTask('Copy Libraries', next => this.copyLibs(next))
86+
this.addTask('Copy Custom Elements', next => this.copyCustomElements(next))
87+
this.buildHTML()
88+
this.addTask('Build JavaScript', next => this.processJavascript(!devMode, next))
89+
this.addTask('Build CSS', next => this.processCss(!devMode, next))
90+
}
91+
}
92+
93+
const builder = new Builder({
94+
header: `Built at ${new Date().toTimeString()}\nCopyright (c) ${new Date().getFullYear()} Author.io`,
95+
96+
commands: {
97+
'--prod' (cmd) {
98+
builder.make()
99+
},
100+
101+
'--dev' (cmd) {
102+
builder.make(true)
103+
104+
builder.watch((action, filepath) => {
105+
if (action === 'create' || action === 'update') {
106+
builder.make(true)
107+
builder.run()
108+
}
109+
})
110+
},
111+
112+
'--js-only' (cmd) {
113+
this.addTask('Build JavaScript', next => this.processJavascript(false, next))
114+
}
115+
}
116+
})
117+
118+
builder.paths = {
119+
apps: path.join(builder.SOURCE, '/apps'),
120+
javascript: path.join(builder.SOURCE, 'js', '/**/*.js'),
121+
css: path.join(builder.SOURCE, 'css', '/**/*.css'),
122+
lib: path.join(builder.SOURCE, 'lib'),
123+
authorElements: './node_modules/@author.io/element-*'
124+
}
125+
126+
builder.run()

0 commit comments

Comments
 (0)