Skip to content

Commit bac39c0

Browse files
committed
Add onyx.custom.SelectDecorator kind
1 parent bcca382 commit bac39c0

File tree

5 files changed

+65
-0
lines changed

5 files changed

+65
-0
lines changed

v2/SelectDecorator/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
## onyx.custom.SelectDecorator
2+
3+
A kind used to provide styling for the enyo.Select kind. It works similar to onyx.InputDecorator:
4+
5+
{kind: "onyx.custom.SelectDecorator", components: [
6+
{kind: "Select", components: [...]}
7+
]}
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.select-decorator {
2+
position: relative;
3+
padding: 0px;
4+
min-height: 30px;
5+
}
6+
7+
.select-decorator select {
8+
width: 100%;
9+
height: 100%;
10+
position: absolute;
11+
left: 0px;
12+
top: 0px;
13+
display: inline;
14+
-webkit-appearance: none;
15+
opacity: 0;
16+
}
17+
18+
.select-decorator .select-decorator-inner {
19+
padding: 8px 10px;
20+
}
21+
22+
.select-decorator-inner-text {
23+
white-space: nowrap;
24+
overflow: hidden;
25+
text-overflow: ellipsis;
26+
text-align: left;
27+
}
28+
29+
.select-decorator-inner-arrow {
30+
width: 21px;
31+
height: 21px;
32+
background: url(menu-arrow.png) no-repeat center center;
33+
}

v2/SelectDecorator/SelectDecorator.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
enyo.kind({
2+
name: "onyx.custom.SelectDecorator",
3+
classes: "onyx-button select-decorator",
4+
handlers: {
5+
onchange: "changedHandler"
6+
},
7+
rendered: function() {
8+
this.inherited(arguments);
9+
this.changedHandler(this.getComponents()[3]);
10+
},
11+
changedHandler: function(sender, event) {
12+
var caption = sender.hasNode().childNodes[sender.getSelected()].innerHTML;
13+
this.$.innerText.setContent(caption);
14+
},
15+
components: [
16+
{kind: "FittableColumns", noStretch: true, classes: "select-decorator-inner", components: [
17+
{name: "innerText", fit: true, classes: "select-decorator-inner-text"},
18+
{classes: "select-decorator-inner-arrow"}
19+
]}
20+
]
21+
});

v2/SelectDecorator/menu-arrow.png

1.4 KB
Loading

v2/SelectDecorator/package.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
enyo.depends(
2+
"SelectDecorator.js",
3+
"SelectDecorator.css"
4+
);

0 commit comments

Comments
 (0)