Skip to content

Commit 49e5d79

Browse files
mattjmattjmattjmattj
committed
Initial commit
- component - bower stuff - some basic doc - example file
0 parents  commit 49e5d79

File tree

5 files changed

+145
-0
lines changed

5 files changed

+145
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bower_components/

‎README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# <input is="tristate-checkbox">
2+
3+
> A checkbox that can be indeterminate
4+
5+
## Rationale
6+
7+
HTML5 provides a 3rd state to checkboxes, which is the "indeterminate" state.
8+
This property can only be set using javascript, like in the example below:
9+
10+
```javascript
11+
var cb = document.getElementById('whatever-checkbox');
12+
cb.indeterminate = true;
13+
```
14+
15+
Unfortunately, one cannot write the same thing in pure HTML, since "indeterminate"
16+
is not an attribute. The following example will not work as expected:
17+
18+
```html
19+
<input type="checkbox" indeterminate></input>
20+
```
21+
22+
The goal of this custom element is to allow setting the "indeterminate" property
23+
via an attribute.
24+
25+
## Install
26+
27+
Install the component using [Bower](http://bower.io/):
28+
29+
```sh
30+
$ bower install tristate-checkbox --save
31+
```
32+
33+
Or [download as ZIP](https://github.com/mattjmattj/tristate-checkbox/archive/master.zip).
34+
35+
## Usage
36+
37+
1. Import Web Components' polyfill:
38+
39+
```html
40+
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
41+
```
42+
43+
2. Import Custom Element:
44+
45+
```html
46+
<link rel="import" href="bower_components/tristate-checkbox/src/tristate-checkbox.html">
47+
```
48+
49+
3. Start using it!
50+
51+
```html
52+
<input is="tristate-checkbox" indeterminate name="qux" id="baz"></input>
53+
```
54+
The custom element will do two things:
55+
56+
1. add the attribute `type="checkbox"` if not already there
57+
2. set the `indeterminate` property according to the attribute value
58+
59+
## License
60+
61+
[MIT License](http://opensource.org/licenses/MIT)

‎bower.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "tristate-checkbox",
3+
"version": "1.0.0",
4+
"description": "A checkbox that can be indeterminate",
5+
"license": "MIT",
6+
"main": "src/tristate-checkbox.html",
7+
"keywords": [
8+
"web-components",
9+
"checkbox",
10+
"indeterminate"
11+
],
12+
"ignore": [
13+
"**/.*",
14+
"bower_components"
15+
],
16+
"dependencies": {
17+
"webcomponentsjs": "^0.5.1"
18+
}
19+
}

‎index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>&lt;input is="tristate-checkbox"&gt;</title>
6+
7+
<!-- Importing Web Component's Polyfill -->
8+
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
9+
10+
<link rel="import" href="src/tristate-checkbox.html">
11+
</head>
12+
<body>
13+
<h1>Basic examples of how to use tristate-checkbox</h1>
14+
<form action="" method="GET">
15+
<p>To use the custom element, you must use the "is" attribute</p>
16+
<pre><code>&lt;input is="tristate-checkbox" checked name="foo" id="bar"&gt;&lt;/input&gt;</code></pre>
17+
<input is="tristate-checkbox" checked name="foo" id="bar"></input>
18+
19+
<p>Now you can add the "indeterminate" attribute</p>
20+
<pre><code>&lt;input is="tristate-checkbox" indeterminate name="qux" id="baz"&gt;&lt;/input&gt;</code></pre>
21+
<input is="tristate-checkbox" indeterminate name="qux" id="baz"></input>
22+
23+
<p>You can also create a "tristate-checkbox" in javascript</p>
24+
<pre><code>&lt;script type="text/javascript"&gt;
25+
var cb = new TristateCheckbox();
26+
cb.setAttribute('indeterminate',true); //or simply cb.indeterminate = true;
27+
document.body.appendChild(cb);
28+
&lt;/script&gt;</code></pre>
29+
<script type="text/javascript">
30+
var cb = new TristateCheckbox();
31+
cb.setAttribute('indeterminate',true); //or simply cb.indeterminate = true;
32+
document.body.appendChild(cb);
33+
</script>
34+
</form>
35+
</body>
36+
</html>

‎src/tristate-checkbox.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script>
2+
(function(window, document) {
3+
4+
var element = Object.create(HTMLInputElement.prototype);
5+
6+
element.createdCallback = function() {
7+
// we force the type to "checkbox"
8+
this.type = "checkbox";
9+
10+
// and set the "indeterminate" property according to the provided attribute
11+
if (this.hasAttribute('indeterminate')) {
12+
this.indeterminate = this.getAttribute('indeterminate') !== 'false';
13+
}
14+
};
15+
16+
element.attributeChangedCallback = function(name, oldvalue, newvalue) {
17+
if (name === 'indeterminate') {
18+
this.indeterminate = newvalue !== 'false';
19+
}
20+
};
21+
22+
window.TristateCheckbox = document.registerElement("tristate-checkbox", {
23+
'prototype' : element,
24+
'extends' : 'input'
25+
});
26+
27+
}(window, document));
28+
</script>

0 commit comments

Comments
 (0)