ares-ide
Version:
A browser-based code editor and UI designer for Enyo 2 projects
351 lines (349 loc) • 9.25 kB
JavaScript
enyo.kind({
name: "onyx.sample.ContextualPopupSample",
kind: "FittableRows",
classes: "onyx enyo-fit",
handlers: {
ontap: "tapHandler"
},
components: [
{
kind: "onyx.Toolbar",
name: "topToolbar",
classes: "onyx-menu-toolbar",
style: "background-color:lightgray",
components: [
{
kind: "FittableColumns",
style: "width:100%;",
components: [
{
kind: "onyx.MenuDecorator",
components: [
{
kind: onyx.IconButton,
src: "assets/menu-icon-bookmark.png"
},
{
kind: "onyx.ContextualPopup",
title: "Toolbar Button",
floating: true,
actionButtons: [
{ content: "test1", classes: "onyx-button-warning" },
{ content: "test2" }
],
components: [
{ content: "testing 1" },
{ content: "testing 2" }
]
}
]
},
{
kind: "onyx.MenuDecorator",
fit: true,
style: "position:absolute;right:0;",
components: [
{
kind: onyx.IconButton,
src: "assets/menu-icon-bookmark.png"
},
{
kind: "onyx.ContextualPopup",
title: "Toolbar Button",
floating: true,
actionButtons: [
{ content: "test1", classes: "onyx-button-warning" },
{ content: "test2" }
],
components: [
{ content: "testing 1" },
{ content: "testing 2" },
{ content: "testing 3" },
{ content: "testing 4" },
{ content: "testing 5" },
{ content: "testing 6" }
]
}
]
}
]
}
]
},
{
kind: "Scroller",
fit: true,
thumb: false,
components: [
{
name: "buttonContainer",
kind: "FittableRows",
classes: "onyx-contextualpopup-button-container enyo-fit",
components: [
//Top row of buttons
{
components: [
{
kind: "onyx.MenuDecorator",
style: "display:inline-block",
components: [
{ content: "Average" },
{
kind: "onyx.ContextualPopup",
title: "Average",
floating: true,
actionButtons: [
{ content: "Press Me" }
],
components: [
{ content: "Item 1" },
{ content: "Item 2" },
{ content: "Item 3" },
{ content: "Item 4" },
{ content: "Item 5" }
]
}
]
},
{
kind: "onyx.MenuDecorator",
style: "display:inline-block;float:right",
components: [
{ content: "Small" },
{
kind: "onyx.ContextualPopup",
title: "Small",
floating: true
}
]
}
]
},
//Center row of buttons
{
fit: true,
style: "padding-top:15%;padding-bottom:15%;",
components: [
{
kind: "onyx.MenuDecorator",
style: "display:inline-block;",
components: [
{ content: "Wide" },
{
kind: "onyx.ContextualPopup",
style: "width:300px",
floating: true,
actionButtons: [
{ content: "test1", classes: "onyx-button-warning" },
{ content: "test2" }
],
components: [
{
kind: "Scroller",
style: "min-width:150px;",
horizontal: "auto",
touch: true,
thumb: false,
components: [
{ content: "testing 1" },
{ content: "testing 2" }
]
}
]
}
]
},
{
kind: "onyx.MenuDecorator",
style: "display:inline-block;float:right",
components: [
{ content: "Long" },
{
kind: "onyx.ContextualPopup",
maxHeight: "200",
title: "Long",
floating: true,
actionButtons: [
{ content: "Press Me" }
],
components: [
{ content: "testing 1" },
{ content: "testing 2" },
{ content: "testing 3" },
{ content: "testing 4" },
{ content: "testing 5" },
{ content: "testing 6" },
{ content: "testing 7" },
{ content: "testing 8" },
{ content: "testing 9" },
{ content: "testing 10" },
{ content: "testing 11" },
{ content: "testing 12" },
{ content: "testing 13" },
{ content: "testing 14" },
{ content: "testing 15" },
{ content: "testing 16" },
{ content: "testing 17" },
{ content: "testing 18" },
{ content: "testing 19" },
{ content: "testing 20" },
{ content: "testing 21" },
{ content: "testing 22" },
{ content: "testing 23" },
{ content: "testing 24" },
{ content: "testing 25" },
{ content: "testing 26" },
{ content: "testing 27" },
{ content: "testing 28" },
{ content: "testing 29" },
{ content: "testing 30" }
]
}
]
}
]
},
//Bottom row of buttons
{
components: [
{
kind: "onyx.MenuDecorator",
style: "display:inline-block;",
components: [
{ content: "Press Me" },
{
kind: "onyx.ContextualPopup",
title: "Press Me",
floating: true,
style: "width:200px",
actionButtons: [
{ content: "test1", classes: "onyx-button-warning" },
{ content: "test2" }
],
components: [
{ content: "testing 1" },
{ content: "testing 2" },
{ content: "testing 3" },
{ content: "testing 4" },
{ content: "testing 5" },
{ content: "testing 6" },
{ content: "testing 7" },
{ content: "testing 8" },
{ content: "testing 9" },
{ content: "testing 10" }
]
}
]
},
{
kind: "onyx.MenuDecorator",
style: "display:inline-block;float:right",
components: [
{ content: "Try Me" },
{
kind: "onyx.ContextualPopup",
style: "width:250px",
title: "Try Me",
floating: true,
actionButtons: [
{ content: "Do Nothing", classes: "onyx-button-warning" },
{ content: "Dismiss", name: "dismiss_button" }
],
components: [
{ content: "Item 1" },
{ content: "Item 2" },
{ content: "Item 3" },
{ content: "Item 4" },
{ content: "Item 5" }
]
}
]
}
]
}
]
}
]
},
{
kind: "onyx.Toolbar",
name: "bottomToolbar",
classes: "onyx-menu-toolbar",
style: "background-color:lightgray",
components: [
{
kind: "FittableColumns",
style: "width:100%;",
components: [
{
kind: "onyx.MenuDecorator",
components: [
{
kind: onyx.IconButton,
src: "assets/menu-icon-bookmark.png"
},
{
kind: "onyx.ContextualPopup",
title: "Toolbar Button",
floating: true,
actionButtons: [
{ content: "test1", classes: "onyx-button-warning" },
{ content: "test2" }
],
components: [
{ content: "testing 1" },
{ content: "testing 2" },
{ content: "testing 3" },
{ content: "testing 4" },
{ content: "testing 5" },
{ content: "testing 6" }
]
}
]
},
{
kind: "onyx.MenuDecorator",
fit: true,
style: "position:absolute;right:0;",
components: [
{
kind: onyx.IconButton,
src: "assets/menu-icon-bookmark.png"
},
{
kind: "onyx.ContextualPopup",
name: "facebook",
title: "Toolbar Button",
floating: true,
actionButtons: [
{ content: "test1", classes: "onyx-button-warning" },
{ content: "Dismiss", name: "dismiss_button" }
],
components: [
{ content: "testing 1" },
{ content: "testing 2" },
{ content: "testing 3" },
{ content: "testing 4" },
{ content: "testing 5" },
{ content: "testing 6" }
]
}
]
}
]
}
]
}
],
tapHandler: function (inSender, inEvent)
{
if (inEvent.actionButton) {
enyo.log(inEvent.popup); //info about popup it's coming from
enyo.log("action button index: " + inEvent.originator.index); //index of action button
enyo.log("action button name: " + inEvent.originator.name); //name of action button (you can set this - see example use below)
if (inEvent.originator.name == "dismiss_button") {
inEvent.popup.hide();
}
}
}
});