Skip to content

Instantly share code, notes, and snippets.

@grapho

grapho/index.html

Created November 18, 2014 21:54
Show Gist options
  • Save grapho/ac516a03c62b10c02451 to your computer and use it in GitHub Desktop.
Save grapho/ac516a03c62b10c02451 to your computer and use it in GitHub Desktop.
Download ZIP
PHONE COMPONENT
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col {
width: 50%;
float: left;
}
.spiff {
padding: 0 5px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2>Phone Components!</h2>
<div class="col">
{{phone-component phones=phones phonesIni=3 phonesMax=6}}
</div>
<div class="col">
<h4>Component 1 Output</h4>
{{#each phone in phones}}
<li>
<span class="spiff">
{{phone.phone_type}}
</span>
<span class="spiff">
{{phone.phone_number}}
</span>
<span class="spiff">
{{phone.phone_extension}}
</span>
<span class="spiff">
{{phone.phone_status}}
</span>
<span class="spiff">
{{phone.phone_description}}
</span>
</li>
{{/each}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="components/phone-component">
<ul class="fa-ul">
{{#each phone in phones}}
<li>
<span>
{{view Ember.Select
content=phone_type_options
optionLabelPath="content.phone_type_description"
optionValuePath="content.id"
value=phone.phone_type}}
</span>
<span class="phone_number">
{{input value=phone.phone_number placeholder="Phone Number" class="form-control"}}
</span>
<span class="phone_ext">
{{input value=phone.phone_extension maxlength=7 placeholder="Ext" class="form-control"}}
</span>
<span>
{{view Ember.Select
content=phone_status_options
optionLabelPath="content.phone_status_description"
optionValuePath="content.id"
value=phone.phone_status}}
</span>
<span class="phone_description">
{{input value=phone.phone_description placeholder="Description" class="form-control"}}
</span>
<button {{action 'trashPhone' phone}} class="phone-trash"><span class="glyphicon glyphicon-trash"></span><span class="sr-only">Delete</span></button>
</li>
{{/each}}
</ul>
<div>
<button {{action 'addPhone' on='click'}} class="btn btn-default btn-xs">+ Add Phone</button>
</div>
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.PhoneComponentComponent = Ember.Component.extend({
phonesIni: null,
phonesMax: 2,
initialPhones: function() {
var phones = this.get('phones'),
phonesIni = this.get('phonesIni'),
phoneObject = Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
});
if (phonesIni) {
for (var i = 0; i < phonesIni; i++) {
phones.pushObject(Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
}));
}
}
}.on('didInsertElement'),
actions: {
addPhone: function() {
var phones = this.get('phones'),
phonesMax = this.get('phonesMax'),
phonesCurrent = phones.length,
phoneObject = Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
});
if (phonesCurrent < phonesMax) {
phones.pushObject(Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
}));
}
},
trashPhone: function(phone) {
var phones = this.get('phones');
phone.setProperties({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
});
phones.removeObject(phone);
}
}
});
App.ApplicationController = Ember.Controller.extend({
phones: [],
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Phone Components!</h2>
<div class="col">
{{phone-component phones=phones phonesIni=3 phonesMax=6}}
</div>
<div class="col">
<h4>Component 1 Output</h4>
{{#each phone in phones}}
<li>
<span class="spiff">
{{phone.phone_type}}
</span>
<span class="spiff">
{{phone.phone_number}}
</span>
<span class="spiff">
{{phone.phone_extension}}
</span>
<span class="spiff">
{{phone.phone_status}}
</span>
<span class="spiff">
{{phone.phone_description}}
</span>
</li>
{{/each}}
</div>
<\/script>
<script type="text/x-handlebars" data-template-name="components/phone-component">
<ul class="fa-ul">
{{#each phone in phones}}
<li>
<span>
{{view Ember.Select
content=phone_type_options
optionLabelPath="content.phone_type_description"
optionValuePath="content.id"
value=phone.phone_type}}
</span>
<span class="phone_number">
{{input value=phone.phone_number placeholder="Phone Number" class="form-control"}}
</span>
<span class="phone_ext">
{{input value=phone.phone_extension maxlength=7 placeholder="Ext" class="form-control"}}
</span>
<span>
{{view Ember.Select
content=phone_status_options
optionLabelPath="content.phone_status_description"
optionValuePath="content.id"
value=phone.phone_status}}
</span>
<span class="phone_description">
{{input value=phone.phone_description placeholder="Description" class="form-control"}}
</span>
<button {{action 'trashPhone' phone}} class="phone-trash"><span class="glyphicon glyphicon-trash"></span><span class="sr-only">Delete</span></button>
</li>
{{/each}}
</ul>
<div>
<button {{action 'addPhone' on='click'}} class="btn btn-default btn-xs">+ Add Phone</button>
</div>
<\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */
html, body {
margin: 20px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col {
width: 50%;
float: left;
}
.spiff {
padding: 0 5px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.PhoneComponentComponent = Ember.Component.extend({
phonesIni: null,
phonesMax: 2,
initialPhones: function() {
var phones = this.get('phones'),
phonesIni = this.get('phonesIni'),
phoneObject = Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
});
if (phonesIni) {
for (var i = 0; i < phonesIni; i++) {
phones.pushObject(Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
}));
}
}
}.on('didInsertElement'),
actions: {
addPhone: function() {
var phones = this.get('phones'),
phonesMax = this.get('phonesMax'),
phonesCurrent = phones.length,
phoneObject = Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
});
if (phonesCurrent < phonesMax) {
phones.pushObject(Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
}));
}
},
trashPhone: function(phone) {
var phones = this.get('phones');
phone.setProperties({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
});
phones.removeObject(phone);
}
}
});
App.ApplicationController = Ember.Controller.extend({
phones: [],
});
</script></body>
</html>
Raw
jsbin.beliji.css
/* Put your CSS here */
html, body {
margin: 20px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col {
width: 50%;
float: left;
}
.spiff {
padding: 0 5px;
}
Raw
jsbin.beliji.js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.PhoneComponentComponent = Ember.Component.extend({
phonesIni: null,
phonesMax: 2,
initialPhones: function() {
var phones = this.get('phones'),
phonesIni = this.get('phonesIni'),
phoneObject = Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
});
if (phonesIni) {
for (var i = 0; i < phonesIni; i++) {
phones.pushObject(Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
}));
}
}
}.on('didInsertElement'),
actions: {
addPhone: function() {
var phones = this.get('phones'),
phonesMax = this.get('phonesMax'),
phonesCurrent = phones.length,
phoneObject = Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
});
if (phonesCurrent < phonesMax) {
phones.pushObject(Ember.Object.create({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
}));
}
},
trashPhone: function(phone) {
var phones = this.get('phones');
phone.setProperties({
phone_type: null,
phone_number: null,
phone_extension: null,
phone_status: null,
phone_description: null
});
phones.removeObject(phone);
}
}
});
App.ApplicationController = Ember.Controller.extend({
phones: [],
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment