File tree Expand file tree Collapse file tree 5 files changed +145
-0
lines changed Expand file tree Collapse file tree 5 files changed +145
-0
lines changed Original file line number Diff line number Diff line change
1
+ bower_components /
Original file line number Diff line number Diff line change
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 )
Original file line number Diff line number Diff line change
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
+ }
Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html >
3
+ < head >
4
+ < meta charset ="UTF-8 ">
5
+ < title > <input is="tristate-checkbox"></ 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 > <input is="tristate-checkbox" checked name="foo" id="bar"></input></ 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 > <input is="tristate-checkbox" indeterminate name="qux" id="baz"></input></ 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 > <script type="text/javascript">
25
+ var cb = new TristateCheckbox();
26
+ cb.setAttribute('indeterminate',true); //or simply cb.indeterminate = true;
27
+ document.body.appendChild(cb);
28
+ </script></ 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 >
Original file line number Diff line number Diff line change
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 >
You can’t perform that action at this time.
0 commit comments