I want to perform dynamic binded actions on click of buttons and checkbox ticks all together to be reflected in a statement of the class results (name results, box-container)
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
<script src="enyo-master/enyo.js"></script> <link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css>
<link rel="stylesheet" href="button_enyo.css">
<link rel="stylesheet" href="checkbox-sample.css">
<link rel="stylesheet" href="connect .css">
/*connect.css*/
.connect .heading1{
padding-left: 450px;
color: #3BAAFF;
text-transform: uppercase;
font-weight: bolder;
margin-bottom: 31px;
font-size: 31px;
}
.connect .heading2{
padding-left : 512px;
color: #5ED4FF;
text-transform: uppercase;
font-weight: bold;
position: absolute;
}
.connect .results {
padding: 20px;
min-height: 24px;
border-radius: 10px;
color: #FFF;
background-color: #555;
display : inline-block;
width: 786px;
position : relative;
left: 134px;
}
/*button_enyo.css*/
.button-sample {
padding: 0 20px;
font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
font-size: 16px;
margin-top: 85px;
margin-left: 105px;
}
.button-sample .section {
padding-top: 20px;
color: #F49200;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 8px;
}
.button-sample button {
margin: 10px;
}
.button-sample .results {
margin: 20px 0;
padding: 20px;
min-height: 24px;
border-radius: 10px;
color: #FFF;
background-color: #555;
}
.button-sample .image-button {
width: 200px;
height: 100px;
}
/*checkbox-sample.css*/
.checkbox-sample {
padding: 0 20px;
font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
font-size: 16px;
margin-top: 85px;
margin-left: 105px;
}
.checkbox-sample .section {
padding-top: 20px;
color: #F49200;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 8px;
/*position : absolute;*/
}
.checkbox-sample .enyo-checkbox {
margin: 10px;
}
.checkbox-sample .results {
margin: 20px 0;
padding: 20px;
min-height: 24px;
border-radius: 10px;
color: #FFF;
background-color: #555;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Connect 2015</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css">
<link rel="stylesheet" href="button_enyo.css">
<link rel="stylesheet" href="checkbox-sample.css">
<link rel="stylesheet" href="connect .css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
<script src="enyo-master/enyo.js"></script>
<script>
enyo.kind({
name: "enyo.sample.ButtonSample",
classes: "button-sample",
components: [
{content: "Buttons", classes: "section"},
{kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"},
{kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"},
{content: "Grouped Buttons", classes: "section"},
{kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [
{kind: "enyo.Button", content: "Grouped Button 1"},
{kind: "enyo.Button", content: "Grouped Button 2"},
{kind: "enyo.Button", content: "Grouped Button 3"}
]},
{content: "Image Button", classes: "section"},
{kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [
{kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"}
//]},
]}
//{name: "results", classes: "results"}
],
buttonTapped: function(inSender, inEvent) {
//this.updateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."});
this.on("updateResult", {content: "The \"" + inSender.getContent() + "\" button is tapped."});
},
buttonToggleTapped: function(inSender, inEvent) {
this.buttonTapped(inSender, inEvent);
this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button");
},
groupButtonsActivated: function(inSender, inEvent) {
if (inEvent.originator.getParent().getActive()) {
this.updateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."});
}
//},
},
updateResult: function(inComponent) {
this.$.results.destroyClientControls();
this.$.results.createComponent(inComponent);
this.$.results.render();
}
});
enyo.kind({
name: "enyo.sample.CheckboxSample",
classes: "checkbox-sample",
components: [
{content: "Checkboxes", classes: "section"},
{kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"},
{content: "Grouped Checkboxes", classes: "section"},
{kind: "enyo.Group", onActivate: "groupActivated", components: [
{kind: "enyo.Checkbox", content: "Grouped Checkbox 1"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 2"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 3"}
//]},
]}
//{name: "results", classes: "results"}
//],
],
checkboxChanged: function(inSender, inEvent) {
this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."});
},
groupActivated: function(inSender, inEvent) {
if (inEvent.originator.getActive()) {
this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."});
}
//},
}
});
//new enyo.sample.ButtonSample().renderInto(document.body);
enyo.kind({
name: "connect",
classes: "connect ",
components: [
{ content : "CONNECT Signup 2015", classes : "heading1"},
//{ content : "Please signup for Connect", classes : "heading2"},
{name: "results", classes: "results"},
{ kind: "enyo.sample.ButtonSample" },
{ kind: "enyo.sample.CheckboxSample" },
// ]
],
});
new connect().renderInto(document.body);
</script>
</body>
</html>I want to perform dynamic binded actions on click of buttons and checkbox ticks all together to be reflected in a statement of the class results (name results, box-container)
On the click of button1, display should be button1 is clicked, on click of other buttons, display should be they are clicked; For checkbox also i have to combined the actions display triggered to that staement-result box only. on click check of checkbox, checkbox one is clicked i.e. it should be displayed after removal of button action.
one action display on the results at a time for combination of both kinds button and checkbox.
You can achieve the expected behavior using below code, where to pass data between siblings using common parent, event propagation and handling are used.
enyo.kind({
name: "enyo.sample.ButtonSample",
classes: "button-sample",
components: [
{content: "Buttons", classes: "section"},
{kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"},
{kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"},
{content: "Grouped Buttons", classes: "section"},
{kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [
{kind: "enyo.Button", content: "Grouped Button 1"},
{kind: "enyo.Button", content: "Grouped Button 2"},
{kind: "enyo.Button", content: "Grouped Button 3"}
]},
{content: "Image Button", classes: "section"},
{kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [
{kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"}
]}
],
//Custom event
events: {
onUpdateResult: "",
},
buttonTapped: function(inSender, inEvent) {
//Once button tapped, propagate/bubble the event with required data
this.doUpdateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."});
},
buttonToggleTapped: function(inSender, inEvent) {
//button tapped
this.buttonTapped(inSender, inEvent);
this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button");
},
groupButtonsActivated: function(inSender, inEvent) {
if (inEvent.originator.getParent().getActive()) {
this.doUpdateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."});
}
}
});
enyo.kind({
name: "enyo.sample.CheckboxSample",
classes: "checkbox-sample",
components: [
{content: "Checkboxes", classes: "section"},
{kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"},
{content: "Grouped Checkboxes", classes: "section"},
{kind: "enyo.Group", onActivate: "groupActivated", components: [
{kind: "enyo.Checkbox", content: "Grouped Checkbox 1"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 2"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 3"}
]}
],
//Custom event
events: {
onUpdateResult: "",
},
checkboxChanged: function(inSender, inEvent) {
//Propagate the event with required data
this.doUpdateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."});
},
groupActivated: function(inSender, inEvent) {
if (inEvent.originator.getActive()) {
this.doUpdateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."});
}
}
});
enyo.kind({
name: "connect",
classes: "connect ",
components: [
{ content : "CONNECT Signup 2015", classes : "heading1"},
{name: "results", classes: "results"},
{ kind: "enyo.sample.ButtonSample" },
{ kind: "enyo.sample.CheckboxSample" },
],
//Event handled by common parent, callback executed
handlers: {
onUpdateResult: "updateResult"
},
//This callback will update the results
updateResult: function(inSender,inEvent) {
this.$.results.setContent(inEvent.content);
}
});
new connect().renderInto(document.body);
Hope that helps!