Skip to content

Instantly share code, notes, and snippets.

@dawnerd

dawnerd/fidelway.js

Created October 21, 2011 23:46
Show Gist options
  • Save dawnerd/1305287 to your computer and use it in GitHub Desktop.
Save dawnerd/1305287 to your computer and use it in GitHub Desktop.
Download ZIP
Enterprise JS
Raw
fidelway.js
var NumberInput = Fidel.ViewController.extend({
init: function() {
this.el.bind('keyup', this.proxy(this.changeValue));
},
changeValue: function() {
var value = ~~(this.el.val());
this.el.val(value);
this.trigger('valueChanged', [value]);
}
});
var NumberOutput = Fidel.ViewController.extend({
init: function() {
var self = this;
this.value = 0;
this.on('update', this.proxy(this.update));
this.modifier.bind('keyup', function() {
self.update();
});
},
update: function(value) {
this.value = value || this.value;
switch(this.type) {
case 'multiply':
this.output.val(this.value * this.modifier.val());
break;
case 'divide':
this.output.val(this.value / this.modifier.val());
break;
case 'square':
this.output.val(Math.pow(this.value,2));
break;
}
}
});
var CalculatorController = Fidel.ViewController.extend({
equations: [
'multiply',
'divide',
'square'
],
ops: [],
init: function() {
var self = this;
this.input = new NumberInput({el: self.inputValue});
for(var i = 0, c = this.equations.length; i < c; i++) {
this.ops.push(new NumberOutput({el: self.el.find('.'+self.equations[i]), type: self.equations[i]}));
}
this.input.on('valueChanged', function(value) {
for(var i = self.ops.length; i--;) {
self.ops[i].trigger('update', [value]);
}
});
}
});
Raw
main.html
<html>
<head>
<title>Code Football</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="fidel.js"></script>
<style>
body { font-size: 30px; font-family: sans-serif; }
.input { float: left; }
.results { width: 170px; float: left; text-align: right; }
input { width: 50px; font-size: 30px; font-weight: bold; color: #333; border: 1px solid #ccc; padding: 5px 10px; text-align: center; }
</style>
</head>
<body>
<calculator>
<div class="input">
<input type="text" data-element="inputValue" placeholder="0">
</div>
<div class="results">
<div class="multiply">x <input type="text" placeholder="0" data-element="modifier"> = <input type="text" placeholder="0" disabled data-element="result"></div>
<div class="divide">/ <input type="text" placeholder="0" data-element="modifier"> = <input type="text" placeholder="0" disabled data-element="result"></div>
<div class="square"><input type="hidden" placeholder="0" data-element="modifier"><sup>2</sup> = <input type="text" placeholder="0" disabled data-element="result"></div>
</div>
</calculator>
<!--<script src="noobway.js"></script>-->
<script src="fidelway.js"></script>
<script>
var calculator = new CalculatorController({el: $('calculator')});
</script>
</body>
</html>
Raw
noobway.js
$('input[data-element="inputValue"], input[data-element="modifier"]').bind('keyup change', function() {
var modifier = ~~($('input[data-element="inputValue"]').val());
$('.multiply input[data-element="result"]').val(modifier * ($('.multiply input[data-element="modifier"]').val()));
$('.divide input[data-element="result"]').val(modifier / ($('.divide input[data-element="modifier"]').val()));
$('.square input[data-element="result"]').val(Math.pow(modifier,2));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment