Skip to content

Commit ed8ce8a

Browse files
author
Kevin Schaaf
committed
Samples for use in new Enyo Sampler app.
1 parent b10f188 commit ed8ce8a

26 files changed

+744
-0
lines changed

‎samples/ButtonGroupSample.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Button Group Sample</title>
5+
<!-- -->
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<!-- -->
8+
<script src="../../../enyo/enyo.js" type="text/javascript"></script>
9+
<script src="../../layout/package.js" type="text/javascript"></script>
10+
<script src="../../onyx/package.js" type="text/javascript"></script>
11+
<!-- -->
12+
<link href="sample.css" rel="stylesheet">
13+
<script src="ButtonGroupSample.js" type="text/javascript"></script>
14+
<!-- -->
15+
</head>
16+
<body>
17+
<script type="text/javascript">
18+
new ButtonGroupSample({classes: "enyo-unselectable"}).write();
19+
</script>
20+
</body>
21+
</html>

‎samples/ButtonGroupSample.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
enyo.kind({
2+
name: "ButtonGroupSample",
3+
classes: "onyx onyx-sample",
4+
components: [
5+
{classes: "onyx-sample-divider", content: "RadioGroup"},
6+
{kind: "onyx.RadioGroup", onActivate:"radioActivated", components: [
7+
{content: "Alpha", active: true},
8+
{content: "Beta"},
9+
{content: "Gamma"}
10+
]},
11+
{tag: "br"},
12+
{classes: "onyx-sample-divider", content: "TabGroup"},
13+
{kind: "onyx.RadioGroup", onActivate:"tabActivated", controlClasses: "onyx-tabbutton", components: [
14+
{content: "Alpha", active: true},
15+
{content: "Beta"}
16+
]},
17+
{tag: "br"},
18+
{classes: "onyx-sample-divider", content: "Button Group"},
19+
{kind: "Group", onActivate:"buttonActivated", classes: "onyx-sample-tools group", defaultKind: "onyx.Button", highlander: true, components: [
20+
{content: "Button A", active: true, classes: "onyx-affirmative"},
21+
{content: "Button B", classes: "onyx-negative"},
22+
{content: "Button C", classes: "onyx-blue"}
23+
]},
24+
{tag: "br"},
25+
{kind: "onyx.Groupbox", classes:"onyx-sample-result-box", components: [
26+
{kind: "onyx.GroupboxHeader", content: "Result"},
27+
{name:"result", classes:"onyx-sample-result", content:"No button tapped yet."}
28+
]}
29+
],
30+
radioActivated: function(inSender, inEvent) {
31+
if (inEvent.originator.getActive()) {
32+
this.$.result.setContent("The \"" + inEvent.originator.getContent() + "\" radio button is selected.");
33+
}
34+
},
35+
tabActivated: function(inSender, inEvent) {
36+
if (inEvent.originator.getActive()) {
37+
this.$.result.setContent("The \"" + inEvent.originator.getContent() + "\" tab button is selected.");
38+
}
39+
},
40+
buttonActivated: function(inSender, inEvent) {
41+
if (inEvent.originator.getActive()) {
42+
this.$.result.setContent("The \"" + inEvent.originator.getContent() + "\" button is selected.");
43+
}
44+
}
45+
});

‎samples/ButtonSample.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Button Sample</title>
5+
<!-- -->
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<!-- -->
8+
<script src="../../../enyo/enyo.js" type="text/javascript"></script>
9+
<script src="../../layout/package.js" type="text/javascript"></script>
10+
<script src="../../onyx/package.js" type="text/javascript"></script>
11+
<!-- -->
12+
<link href="sample.css" rel="stylesheet">
13+
<script src="ButtonSample.js" type="text/javascript"></script>
14+
<!-- -->
15+
</head>
16+
<body>
17+
<script type="text/javascript">
18+
new ButtonSample({classes: "enyo-unselectable"}).write();
19+
</script>
20+
</body>
21+
</html>

‎samples/ButtonSample.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
enyo.kind({
2+
name: "ButtonSample",
3+
classes: "onyx onyx-sample",
4+
components: [
5+
{classes: "onyx-sample-divider", content: "Buttons"},
6+
{classes: "onyx-sample-tools", components: [
7+
{kind:"onyx.Button", content: "Button", ontap:"buttonTapped"}
8+
]},
9+
{classes: "onyx-sample-tools", components: [
10+
{kind:"onyx.Button", content: "Affirmative", classes: "onyx-affirmative", ontap:"buttonTapped"},
11+
{kind:"onyx.Button", content: "Negative", classes: "onyx-negative", ontap:"buttonTapped"},
12+
{kind:"onyx.Button", content: "Blue", classes: "onyx-blue", ontap:"buttonTapped"},
13+
{kind:"onyx.Button", content: "Custom", style: "background-color: purple; color: #F1F1F1;", ontap:"buttonTapped"}
14+
]},
15+
{classes: "onyx-sample-tools", components: [
16+
{kind:"onyx.Button", content: "Active", classes: "active", ontap:"buttonTapped"},
17+
{kind:"onyx.Button", content: "Disabled", disabled: true, ontap:"buttonTapped"},
18+
{kind:"onyx.Button", content: "Active Disabled", classes: "active", disabled: true, ontap:"buttonTapped"}
19+
]},
20+
{classes: "onyx-sample-tools", components: [
21+
{kind:"onyx.Button", content: "Tall Button", style: "height: 70px;", ontap:"buttonTapped"}
22+
]},
23+
{kind: "onyx.Groupbox", classes:"onyx-sample-result-box", components: [
24+
{kind: "onyx.GroupboxHeader", content: "Result"},
25+
{name:"result", classes:"onyx-sample-result", content:"No button tapped yet."}
26+
]}
27+
],
28+
buttonTapped: function(inSender, inEvent) {
29+
this.$.result.setContent("The \"" + inSender.getContent() + "\" button was tapped");
30+
}
31+
});

‎samples/CheckboxSample.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Checkbox Sample</title>
5+
<!-- -->
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<!-- -->
8+
<script src="../../../enyo/enyo.js" type="text/javascript"></script>
9+
<script src="../../layout/package.js" type="text/javascript"></script>
10+
<script src="../../onyx/package.js" type="text/javascript"></script>
11+
<!-- -->
12+
<link href="sample.css" rel="stylesheet">
13+
<script src="CheckboxSample.js" type="text/javascript"></script>
14+
<!-- -->
15+
</head>
16+
<body>
17+
<script type="text/javascript">
18+
new CheckboxSample({classes: "enyo-unselectable"}).write();
19+
</script>
20+
</body>
21+
</html>

‎samples/CheckboxSample.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
enyo.kind({
2+
name: "CheckboxSample",
3+
classes: "onyx onyx-sample",
4+
components: [
5+
{classes: "onyx-sample-divider", content: "Checkboxes"},
6+
{classes: "onyx-sample-tools", components: [
7+
{kind:"onyx.Checkbox", onchange:"checkboxChanged"},
8+
{kind:"onyx.Checkbox", onchange:"checkboxChanged"},
9+
{kind:"onyx.Checkbox", onchange:"checkboxChanged", value: true}
10+
]},
11+
{tag: "br"},
12+
{classes: "onyx-sample-divider", content: "Checkboxes Group"},
13+
{kind: "Group", classes: "onyx-sample-tools group", onActivate:"groupActivated", highlander: true, components: [
14+
{kind:"onyx.Checkbox", value: true},
15+
{kind:"onyx.Checkbox"},
16+
{kind:"onyx.Checkbox"}
17+
]},
18+
{tag: "br"},
19+
{kind: "onyx.Groupbox", classes:"onyx-sample-result-box", components: [
20+
{kind: "onyx.GroupboxHeader", content: "Result"},
21+
{name:"result", classes:"onyx-sample-result", content:"No button tapped yet."}
22+
]}
23+
],
24+
checkboxChanged: function(inSender, inEvent) {
25+
this.$.result.setContent(inSender.name + " was " + (inSender.getValue() ? " selected." : "deselected."));
26+
},
27+
ordinals: ["1st", "2nd", "3rd"],
28+
groupActivated: function(inSender, inEvent) {
29+
if (inEvent.originator.getActive()) {
30+
var selected = inEvent.originator.indexInContainer();
31+
this.$.result.setContent("The " + this.ordinals[selected] + " checkbox in the group is selected.");
32+
}
33+
}
34+
});

‎samples/GroupboxSample.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Groupbox Sample</title>
5+
<!-- -->
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<!-- -->
8+
<script src="../../../enyo/enyo.js" type="text/javascript"></script>
9+
<script src="../../layout/package.js" type="text/javascript"></script>
10+
<script src="../../onyx/package.js" type="text/javascript"></script>
11+
<!-- -->
12+
<link href="sample.css" rel="stylesheet">
13+
<script src="GroupboxSample.js" type="text/javascript"></script>
14+
<!-- -->
15+
</head>
16+
<body>
17+
<script type="text/javascript">
18+
new GroupboxSample({classes: "enyo-unselectable"}).write();
19+
</script>
20+
</body>
21+
</html>

‎samples/GroupboxSample.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
enyo.kind({
2+
name: "GroupboxSample",
3+
classes: "onyx onyx-sample",
4+
components: [
5+
{classes: "onyx-sample-divider", content: "Groupboxes"},
6+
{kind: "onyx.Groupbox", components: [
7+
{kind: "onyx.GroupboxHeader", content: "Header"},
8+
{content: "I'm a group item!", style: "padding: 8px;"},
9+
{content: "I'm a group item!", style: "padding: 8px;"}
10+
]},
11+
{tag: "br"},
12+
{kind: "onyx.Groupbox", components: [
13+
{content: "I'm a group item!", style: "padding: 8px;"}
14+
]},
15+
{tag: "br"},
16+
{kind: "onyx.Groupbox", components: [
17+
{kind: "onyx.GroupboxHeader", content: "Header"},
18+
{kind: "onyx.InputDecorator", components: [
19+
{kind: "onyx.Input", style: "width: 100%", placeholder: "Enter text here"}
20+
]},
21+
{kind: "onyx.InputDecorator", components: [
22+
{kind: "onyx.Input", style: "width: 100%", value: "Middle"}
23+
]},
24+
{kind: "onyx.InputDecorator", components: [
25+
{kind: "onyx.Input", style: "width: 100%", value: "Last"}
26+
]}
27+
]},
28+
{tag: "br"},
29+
{kind: "onyx.Groupbox", components: [
30+
{kind: "onyx.InputDecorator", components: [
31+
{kind: "onyx.Input", style: "width: 100%", placeholder: "Enter text here"}
32+
]}
33+
]},
34+
{kind: "onyx.Groupbox", components: [
35+
{kind: "onyx.InputDecorator", components: [
36+
{kind: "onyx.Input", type: "password", style: "width: 100%", placeholder: "Enter Password"}
37+
]}
38+
]}
39+
]
40+
});

‎samples/IconButtonSample.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>IconButton Sample</title>
5+
<!-- -->
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<!-- -->
8+
<script src="../../../enyo/enyo.js" type="text/javascript"></script>
9+
<script src="../../layout/package.js" type="text/javascript"></script>
10+
<script src="../../onyx/package.js" type="text/javascript"></script>
11+
<!-- -->
12+
<link href="sample.css" rel="stylesheet">
13+
<script src="IconButtonSample.js" type="text/javascript"></script>
14+
<!-- -->
15+
</head>
16+
<body>
17+
<script type="text/javascript">
18+
new IconButtonSample({classes: "enyo-unselectable"}).write();
19+
</script>
20+
</body>
21+
</html>

‎samples/IconButtonSample.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
enyo.kind({
2+
name: "IconButtonSample",
3+
classes: "onyx onyx-sample",
4+
components: [
5+
{classes: "onyx-sample-divider", content: "Icon Button"},
6+
{kind: "onyx.IconButton", src: "assets/menu-icon-bookmark.png", ontap:"iconTapped" },
7+
{tag: "br"},
8+
{tag: "br"},
9+
{classes: "onyx-sample-divider", content: "Grouped Icon Buttons"},
10+
{kind: "Group", onActivate:"iconGroupActivated", components: [
11+
{kind: "onyx.IconButton", active: true, src: "assets/menu-icon-bookmark.png"},
12+
{kind: "onyx.IconButton", src: "assets/menu-icon-bookmark.png"},
13+
{kind: "onyx.IconButton", src: "assets/menu-icon-bookmark.png"}
14+
]},
15+
{tag: "br"},
16+
{classes: "onyx-sample-divider", content: "Icon Buttons in Toolbar"},
17+
{kind: "onyx.Toolbar", defaultKind: "onyx.IconButton", components: [
18+
{src: "assets/menu-icon-bookmark.png", ontap:"iconTapped"},
19+
{src: "assets/menu-icon-bookmark.png", ontap:"iconTapped"},
20+
{src: "assets/menu-icon-bookmark.png", ontap:"iconTapped"},
21+
{kind: "Control"},
22+
{kind: "Group", tag: null, onActivate:"iconGroupActivated", defaultKind: "onyx.IconButton", components: [
23+
{src: "assets/menu-icon-bookmark.png", active: true},
24+
{src: "assets/menu-icon-bookmark.png"},
25+
{src: "assets/menu-icon-bookmark.png"}
26+
]}
27+
]},
28+
{tag: "br"},
29+
{kind: "onyx.Groupbox", classes:"onyx-sample-result-box", components: [
30+
{kind: "onyx.GroupboxHeader", content: "Result"},
31+
{name:"result", classes:"onyx-sample-result", content:"No button tapped yet."}
32+
]}
33+
],
34+
iconTappedCounts: {},
35+
iconTapped: function(inSender, inEvent) {
36+
this.iconTappedCounts[inSender.name] = this.iconTappedCounts[inSender.name] || 0;
37+
this.$.result.setContent("The icon button was tapped: " + ++this.iconTappedCounts[inSender.name]);
38+
},
39+
ordinals: ["1st", "2nd", "3rd"],
40+
iconGroupActivated: function(inSender, inEvent) {
41+
if (inEvent.originator.getActive()) {
42+
var selected = inEvent.originator.indexInContainer();
43+
this.$.result.setContent("The " + this.ordinals[selected] + " icon button in the group is selected.");
44+
}
45+
}
46+
});

‎samples/InputSample.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Input Sample</title>
5+
<!-- -->
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<!-- -->
8+
<script src="../../../enyo/enyo.js" type="text/javascript"></script>
9+
<script src="../../layout/package.js" type="text/javascript"></script>
10+
<script src="../../onyx/package.js" type="text/javascript"></script>
11+
<!-- -->
12+
<link href="sample.css" rel="stylesheet">
13+
<script src="InputSample.js" type="text/javascript"></script>
14+
<!-- -->
15+
</head>
16+
<body>
17+
<script type="text/javascript">
18+
new InputSample({classes: "enyo-unselectable"}).write();
19+
</script>
20+
</body>
21+
</html>

‎samples/InputSample.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
enyo.kind({
2+
name: "InputSample",
3+
classes: "onyx onyx-sample",
4+
components: [
5+
{classes: "onyx-sample-divider", content: "Inputs"},
6+
{classes: "onyx-toolbar-inline", components: [
7+
{kind: "onyx.InputDecorator", components: [
8+
{kind: "onyx.Input", placeholder: "Enter text here", onchange:"inputChanged"}
9+
]},
10+
{kind: "onyx.InputDecorator", components: [
11+
{kind: "onyx.Input", placeholder: "Search term", onchange:"inputChanged"},
12+
{kind: "Image", src: "assets/search-input-search.png"}
13+
]},
14+
{kind: "onyx.InputDecorator", components: [
15+
{kind: "onyx.Input", type:"password", placeholder: "Enter password", onchange:"inputChanged"}
16+
]}
17+
]},
18+
{tag: "br"},
19+
{classes: "onyx-sample-divider", content: "RichTexts"},
20+
{classes: "onyx-toolbar-inline", components: [
21+
{kind: "onyx.InputDecorator", components: [
22+
{kind: "onyx.RichText", style: "width: 200px;", placeholder: "Enter text here", onchange:"inputChanged"}
23+
]},
24+
{kind: "onyx.InputDecorator", components: [
25+
{kind: "onyx.RichText", style: "width: 200px;", placeholder: "Search term", onchange:"inputChanged"},
26+
{kind: "Image", src: "assets/search-input-search.png"}
27+
]}
28+
]},
29+
{tag: "br"},
30+
{classes: "onyx-sample-divider", content: "TextAreas"},
31+
{classes: "onyx-toolbar-inline", components: [
32+
{kind: "onyx.InputDecorator", components: [
33+
{kind: "onyx.TextArea", placeholder: "Enter text here", onchange:"inputChanged"}
34+
]},
35+
{kind: "onyx.InputDecorator", components: [
36+
{kind: "onyx.TextArea", placeholder: "Search term", onchange:"inputChanged"},
37+
{kind: "Image", src: "assets/search-input-search.png"}
38+
]}
39+
]},
40+
{tag: "br"},
41+
{kind: "onyx.Groupbox", classes:"onyx-sample-result-box", components: [
42+
{kind: "onyx.GroupboxHeader", content: "Result"},
43+
{name:"result", classes:"onyx-sample-result", content:"No input entered yet."}
44+
]}
45+
],
46+
inputChanged: function(inSender, inEvent) {
47+
this.$.result.setContent("Input: " + inSender.getValue());
48+
}
49+
});

0 commit comments

Comments
 (0)