Meteora's Calculator

Codes to create a Meteora's calculator.

Calculator.html

<html>

<head>

<title>Meteora's Calculator</title>

<script type=“text/javascript” src=“meteora-0.5/src/meteora.js”></script>

<script type=“text/javascript”>

Meteora.uses( “Control.Calculator” ) ;

</script>

<link rel=“stylesheet” type=“text/css” href=“cal.css”/>

</head>

<body>

<input type=“button” value=“Launch Calculator” onclick=“calculator = new Calculator()”>

</body>

</html>

Lines to add on the file /meteora/src/meteora.js

//Add this line after 'Control': {

'Calculator':{

'deps': ['Core.Meteora','Control.Calculator','Control.Dialog']

},

Calculator.js on /meteora/src/lib/Control

/*

Building a simple calculator

@author Josue Gerardo Gutierrez Hdez

@date May - 17 - 2008

*/

var Calculator = Control.extend({

//That funcion load the methods to build the components and their events

initialize: function(){

//Build the components of the calculator

this.__buildComponents();

//Add events to the components

this.__bindEvents();

},

__buildComponents: function(){

//Variable to group all the components

this.components = {

//Display - HTML Input to show the restuls

display : Widget.input({'class':'m-display','value':'0'}),

//A lot of buttons for the numbers and actions

buttonOne: Widget.button({'class':'m-number-button','id':'btn1','value':'1'},__('1')),

buttonTwo: Widget.button({'class':'m-number-button','id':'btn2','value':'2'},__('2')),

buttonThr: Widget.button({'class':'m-number-button','id':'btn3','value':'3'},__('3')),

buttonFou: Widget.button({'class':'m-number-button','id':'btn4','value':'4'},__('4')),

buttonFiv: Widget.button({'class':'m-number-button','id':'btn5','value':'5'},__('5')),

buttonSix: Widget.button({'class':'m-number-button','id':'btn6','value':'6'},__('6')),

buttonSev: Widget.button({'class':'m-number-button','id':'btn7','value':'7'},__('7')),

buttonEig: Widget.button({'class':'m-number-button','id':'btn8','value':'8'},__('8')),

buttonNin: Widget.button({'class':'m-number-button','id':'btn9','value':'9'},__('9')),

buttonZer: Widget.button({'class':'m-number-button','id':'btn0','value':'0'},__('0')),

buttonPoi: Widget.button({'class':'m-option-button','id':'btn.','value':'.'},__('.')),

buttonClr: Widget.button({'class':'m-option-button','id':'btnC','value':'C'},__('C')),

buttonEqu: Widget.button({'class':'m-result-button','id':'btn=','value':'='},__('=')),

buttonDiv: Widget.button({'class':'m-option-button','id':'btn/','value':'/'},__('/')),

buttonAdd: Widget.button({'class':'m-option-button','id':'btn+','value':'+'},__('+')),

buttonRes: Widget.button({'class':'m-option-button','id':'btn-','value':'-'},__('-')),

buttonMul: Widget.button({'class':'m-option-button','id':'btnx','value':'x'},__('x')),

//Div sections identifieds in the design

sectionA : Widget.div({'class':'m-calc-section'}),

sectionB : Widget.div({'class':'m-calc-section'}),

sectionC : Widget.div({'class':'m-calc-section'}),

sectionD : Widget.div({'class':'m-calc-section'}),

sectionE : Widget.div({'class':'m-calc-section'}),

sectionF : Widget.div({'class':'m-calc-section'}),

Calculator: Widget.div({'class':'m-calculator'})

}

//Setting an attribute to the display component

this.components.display.setAttribute('readonly', 'readonly');

//-----Grouping our components into the DIVs---//

this.components.sectionA.appendChildren([

this.components.display

]);

this.components.sectionB.appendChildren([

this.components.buttonSev,

this.components.buttonEig,

this.components.buttonNin,

this.components.buttonDiv

]);

this.components.sectionC.appendChildren([

this.components.buttonFou,

this.components.buttonFiv,

this.components.buttonSix,

this.components.buttonMul

]);

this.components.sectionD.appendChildren([

this.components.buttonOne,

this.components.buttonTwo,

this.components.buttonThr,

this.components.buttonAdd

]);

this.components.sectionE.appendChildren([

this.components.buttonZer,

this.components.buttonPoi,

this.components.buttonClr,

this.components.buttonRes

]);

this.components.sectionF.appendChildren([

this.components.buttonEqu

]);

this.components.Calculator.appendChildren([

this.components.sectionA,

this.components.sectionB,

this.components.sectionC,

this.components.sectionD,

this.components.sectionE,

this.components.sectionF

]);

//Creating a Meteora's Dialog

Meteora.overlay();

this.components.dialog = new Dialog(

this.components.Calculator,

{

'title': __('Meteora\'s Calculator'),

'onClose': function() {

Meteora.removeOverlay();

this.components.dialog = null;

}.bind(this),

'width': 198,

'height': 300

}

);

this.components.dialog.center();

},

//THE CALCULATOR HEART//

__resultValue : null,

__auxiliarValue : null,

__operation : null,

__lastEqual : false,

__operationHistory : null,

__resolve: function(){

if(this.__resultValue==null){

this.__resultValue = parseFloat(this.components.display.value);

}else if(this.__auxiliarValue == null){

this.__auxiliarValue = parseFloat(this.components.display.value);

}

if(this.__operation){

if(this.__operation == '='){

this.__lastEqual = true;

eval = this.__operationHistory;

}else{

if(this.__lastEqual){

eval = null;

this.__operationHistory = this.__operation;

this.__lastEqual = false;

}else{

if(!this.__lastEqual){

eval = this.__operationHistory;

}else{

eval = this.__operation;

}

this.__operationHistory = this.__operation;

}

}

if(this.__auxiliarValue!=null && eval != null){

switch(eval){

case '+':

this.__resultValue = this.__resultValue + this.__auxiliarValue ;

break;

case '-':

this.__resultValue = this.__resultValue - this.__auxiliarValue ;

break;

case 'x':

this.__resultValue = this.__resultValue * this.__auxiliarValue ;

break;

case '/':

this.__resultValue = this.__resultValue / this.__auxiliarValue ;

break;

}

this.__assign();

}

}

},

__assign:function(){

this.components.display.value = this.__resultValue == null ? 0 : this.__resultValue;

},

__number:function( num ){

actual = this.components.display.value;

if(this.__lastEqual){

this.__lastEqual = false;

this.__resultValue = null;

this.__auxiliarValue = null;

}

if(this.__operation){

actual = '';

this.__lastEqual = false;

this.__operation = null;

}

this.components.display.value = ( actual == '0' ? '' : actual ) + num;

if(this.__auxiliarValue != null){

this.__auxiliarValue = parseFloat(this.components.display.value);

}

},

//END OF THE CALCULATOR HEART//

__bindEvents:function(){

//For every button in the Calculator Component is assigned a Click Event.

var buttons = this.components.Calculator.getElementsByTagName('button');

for(var i = 0; i < buttons.length;i++ ){

buttons[i].addEvent(

'click',

function(buttonval){

switch(buttonval){

case 'C':

this.__resultValue = null;

this.__auxiliarValue = null;

this.__operation = null;

this.__assign();

break;

case '+':

this.__operation = '+';

this.__resolve();

break;

case '-':

this.__operation = '-';

this.__resolve();

break;

case 'x':

this.__operation = 'x';

this.__resolve();

break;

case '/':

this.__operation = '/';

this.__resolve();

break;

case '=':

this.__operation = '=';

this.__resolve();

break;

default:

if (buttonval.match(/^[\-0-9]+$/) || buttonval == '.') {

this.__number(buttonval);

}

}

}.bind(this,buttons[i].value)

);

}

}

});