Skip to content

Commit

Permalink
Rename InputCheckbox to Checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
aadsm committed May 25, 2013
1 parent 80f50c2 commit e342fa9
Show file tree
Hide file tree
Showing 21 changed files with 188 additions and 356 deletions.
2 changes: 1 addition & 1 deletion lab/knoll/ui/main.reel/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h1><span class="logo"></span> <span>Digit</span></h1>
<input data-montage-id="radioButton1" type="radio" checked>
<input data-montage-id="radioButton2" type="radio">

<input data-montage-id="inputCheckbox" type="checkbox" checked>
<span data-montage-id="checkbox"></span>

<input data-montage-id="toggle" type="checkbox">

Expand Down
2 changes: 1 addition & 1 deletion lab/knoll/ui/main.reel/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

"toggle": { "prototype": "digit/ui/toggle.reel", "properties": { "element": {"#": "toggle"} } },

"inputCheckbox": { "prototype": "digit/ui/input-checkbox.reel", "properties": { "element": {"#": "inputCheckbox"} } },
"checkbox": { "prototype": "digit/ui/checkbox.reel", "properties": { "element": {"#": "checkbox"} } },

"radioButtonController": { "prototype": "montage/core/radio-button-controller", "properties": {"value": 1} },
"radioButton1": { "prototype": "digit/ui/radio-button.reel", "properties": { "element": {"#": "radioButton1"}, "radioButtonController": {"@": "radioButtonController"}, "value": 1 } },
Expand Down
3 changes: 2 additions & 1 deletion overview/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
![Button](https://raw.github.com/montagejs/digit/master/button.reel/screenshot.png)
![Button Group](https://raw.github.com/montagejs/digit/master/button-group.reel/screenshot.png)
![Toggle](https://raw.github.com/montagejs/digit/master/toggle.reel/screenshot.png)
![Checkbox](https://raw.github.com/montagejs/digit/master/input-checkbox.reel/screenshot.png)
![Checkbox](https://raw.github.com/montagejs/digit/edge/checkbox
.reel/screenshot.png)
![RadioButton](https://raw.github.com/montagejs/digit/master/radio-button
.reel/screenshot.png)
![Select](https://raw.github.com/montagejs/digit/master/select.reel/screenshot.png)
Expand Down
8 changes: 4 additions & 4 deletions overview/ui/main.reel/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,10 @@ <h2>Basic components</h2>
</tr>

<tr>
<td><a href="https://github.com/montagejs/digit/tree/master/input-checkbox.reel">Input Checkbox</a></td>
<td><input data-montage-id="inputCheckbox1" type="checkbox" checked></td>
<td data-montage-skin="light"><input data-montage-id="inputCheckbox2" type="checkbox" checked></td>
<td data-montage-skin="dark" ><input data-montage-id="inputCheckbox3" type="checkbox" checked></td>
<td><a href="https://github.com/montagejs/digit/tree/master/checkbox.reel">Checkbox</a></td>
<td><span data-montage-id="checkbox1"></span></td>
<td data-montage-skin="light"><span data-montage-id="checkbox2"></span></td>
<td data-montage-skin="dark" ><span data-montage-id="checkbox3"></span></td>
</tr>

<tr>
Expand Down
6 changes: 3 additions & 3 deletions overview/ui/main.reel/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
"toggle2": { "prototype": "ui/toggle.reel", "properties": { "element": {"#": "toggle2"} } },
"toggle3": { "prototype": "ui/toggle.reel", "properties": { "element": {"#": "toggle3"} } },

"inputCheckbox1": { "prototype": "ui/input-checkbox.reel", "properties": { "element": {"#": "inputCheckbox1"} } },
"inputCheckbox2": { "prototype": "ui/input-checkbox.reel", "properties": { "element": {"#": "inputCheckbox2"} } },
"inputCheckbox3": { "prototype": "ui/input-checkbox.reel", "properties": { "element": {"#": "inputCheckbox3"} } },
"checkbox1": { "prototype": "ui/checkbox.reel", "properties": { "element": {"#": "checkbox1"} } },
"checkbox2": { "prototype": "ui/checkbox.reel", "properties": { "element": {"#": "checkbox2"} } },
"checkbox3": { "prototype": "ui/checkbox.reel", "properties": { "element": {"#": "checkbox3"} } },

"radioButtonController1": { "prototype": "montage/core/radio-button-controller", "properties": {"value": 1} },
"radioButton1A": { "prototype": "ui/radio-button.reel", "properties": { "element": {"#": "radioButton1A"}, "radioButtonController": {"@": "radioButtonController1"}, "value": 1 } },
Expand Down
2 changes: 1 addition & 1 deletion test/all.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
require("montage-testing").run(require,[
// Please keep in alphabetical order
"test/button/button-spec",
"test/checkbox/checkbox-spec",
"test/header/header-spec",
"test/input-checkbox/input-checkbox-spec",
"test/input-number/input-number-spec",
"test/slider/slider-spec",
"test/input-text/input-text-spec",
Expand Down
56 changes: 56 additions & 0 deletions test/checkbox/checkbox-spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
var Montage = require("montage").Montage;
var TestPageLoader = require("montage-testing/testpageloader").TestPageLoader;

TestPageLoader.queueTest("checkbox-test", function(testPage) {

describe("test/checkbox/checkbox-spec", function() {
it("should load", function() {
expect(testPage.loaded).toBe(true);
});

describe("Checkbox", function() {
describe("default", function () {
it("can be created", function() {
expect(testPage.test.checkbox).toBeDefined();
});
var checkbox, defaultChecked, defaultRequired;
beforeEach(function() {
if (!checkbox) {
checkbox = testPage.test.checkbox;
//keep default values
defaultChecked = checkbox.checked;
defaultRequired = checkbox.required;
}
//restore default values
checkbox.checked = defaultChecked;
checkbox.required = defaultRequired;
});
describe("property", function() {
describe("checked", function() {
it("should have correct default", function() {
expect(defaultChecked).toEqual(false);
});
it("can be set", function() {
checkbox.checked = true;
expect(checkbox.checked).toEqual(true);
});
});
});
describe("interaction", function () {
describe("press", function () {
it("should check checkbox if not already checked", function () {
checkbox.checked = false;
checkbox.handlePress();
expect(checkbox.checked).toEqual(true);
});
it("should uncheck checkbox if already checked", function () {
checkbox.checked = true;
checkbox.handlePress();
expect(checkbox.checked).toEqual(false);
});
});
});
});
});
});
});
40 changes: 40 additions & 0 deletions test/checkbox/checkbox-test.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Checkbox</title>
<script type="text/javascript" src="../../node_modules/montage/montage.js" data-package="../../"></script>
<script type="text/montage-serialization">
{
"test": {
"prototype": "test/checkbox/checkbox-test[Test]",
"properties": {
"checkbox": {"@": "checkbox"},
"checkboxAttributeChecked": {"@": "checkboxChecked"}
}
},

"checkbox": {
"prototype": "ui/checkbox.reel",
"properties": {
"element": {"#": "checkbox"}
}
},

"checkboxChecked": {
"prototype": "ui/checkbox.reel",
"properties": {
"element": {"#": "checkboxChecked"}
}
}
}
</script>

</head>
<body>
<h1>Checkbox</h1>

<div data-montage-id="checkbox"></div>
<div data-montage-id="checkboxChecked" checked required></div>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,4 @@ var Montage = require("montage").Montage;
var TestController = require("montage-testing/test-controller").TestController;

exports.Test = Montage.create(TestController, {

inputCheckbox: {
value: null
}

});
87 changes: 0 additions & 87 deletions test/input-checkbox/input-checkbox-spec.js

This file was deleted.

40 changes: 0 additions & 40 deletions test/input-checkbox/input-checkbox-test.html

This file was deleted.

36 changes: 36 additions & 0 deletions ui/checkbox.reel/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# Checkbox

![Checkbox](https://raw.github.com/montagejs/montage/edge/checkbox.reel/screenshot.png)

## How to use

```html
<span data-montage-id="checkbox"></span>
```

```json
"checkbox": {
"prototype": "digit/ui/checkbox.reel",
"properties": {
"element": {"#": "checkbox"}
}
}
```


## Available properties

* `checked` - The checked state of the checkbox.
* `value` - The value of the checkbox.
* `enabled` - The state of the checkbox.


## Customizing with CSS

* `.digit-Checkbox` - The checkbox element

```css
.digit-Checkbox {
border-color: blue;
}
```
File renamed without changes
File renamed without changes
Loading

0 comments on commit e342fa9

Please sign in to comment.