Accueil/js/calculator.js

537 lines
16 KiB
JavaScript
Raw Normal View History

2010-09-14 23:38:29 +02:00
/**
* Binds a function to a this object for use by callbacks
* @param instance {!Object} The this object to bind to.
* @return A closure that will call the original function bound to the given
* instance parameter.
*/
Function.prototype.bind = function(instance) {
var self = this;
return function() { self.apply(instance, arguments); };
};
/****
** Start of temporary evaling logic
*
* To support expression evaluations in the short term, the strategry is to just
* use 'eval' with sanitized input. Long term, I'm working on using Antlr and
* a custom grammar to generate an appropriate lexer/parser to deal with the
* expressions.
*
* For now, sanitation consists of making sure only whitelisted characters are
* in the input (to restrict what you can do), and that all identifiers get a
* namespace prefix added to them so that they cannot access the global this.
* So "2 + myvar" turns into "2 + symbols.myvar" for evaling.
*
* To point out a more subtle aspect of this validation, periods are in the
* whitelist because of their use in decimals, however there is a special regex
* check to make sure that all uses of periods are just for decimals and not
* attribute access.
*/
/**
* A regex that validates that only whitelisted characters are in the input.
* @type {RegExp}
*/
var textWhitelistValidator = new RegExp("[-a-zA-Z0-9.+*/()= ,]+");
/**
* Validates that the input text only contains whitelisted characters.
* @param text {string} The text to validate.
* @return {boolean} whether the input text is only whitelisted characters or
* not.
*/
function isTextClean(text) {
data = textWhitelistValidator.exec(text);
return data && data[0] && data[0].length > 0 && data[0].length == text.length;
}
/**
* A regex that finds all uses of periods in decimals.
* @type {RegExp}
*/
var validPeriodUse = /\.(?:[0-9]|$)/g;
/**
* Validates that all uses of periods within the input text are for decimals
* and not for attribute access.
* @param text {string} The intput text to validate.
* @return {boolean} Whether all period use is valid or not.
*/
function isPeriodUseValid(text) {
// Remove all valid uses of dot, and if there are any dots left over we know
// they are 'evil' property accesses
return text.replace(validPeriodUse, '').indexOf('.') == -1;
}
/**
* The symbol table namespace all variables and functions are forced to be a
* part of.
* @type {!Object}
*/
var symbols = {
};
/**
* A regex that finds all identifiers within the input.
* @type {RegExp}
*/
var symbolRegex = /([a-zA-Z][a-zA-Z0-9]*)/g;
/**
* Adds the 'symbol' namespace to all symbols within the input and returns
* the modified input.
* @param text {string} The input to namespace.
* @return {string} The input transformed so that all symbols are referenced
* through the 'symbol' namespace.
*/
function addNamespaceToSymbols(text) {
return text.replace(symbolRegex, 'symbols.$1');
}
/**
* A regex that finds all leading and trailing whitespace on a string.
* @type {RegExp}
*/
var trimWhitespaceRegex = /^\s+|\s+$/g;
/**
* Evaluates a string input expression and returns the result.
* @param text {string} The text to evaluate.
* @return {*} the result of evaluating the expression, or the string '...'
* if there was any issue evaluating the input.
*/
function evalExpression(text) {
var result = '';
if (text) {
text = text.replace(trimWhitespaceRegex, '');
if(text != '') {
if (!isTextClean(text) || !isPeriodUseValid(text)) {
result = 'invalid';
} else {
try {
result = eval(addNamespaceToSymbols(text));
if (result === undefined) { //symbol that's never been assigned
result = '';
} else if (isNaN(result)) {
result = '...';
}
} catch (e) {
result = '...';
}
}
}
}
return result;
}
/**
* Registers a javascript function for use within calculator expressions.
* @param name {string} The name calcualtor expressions will use to call this
* function.
* @param func {Function} The function that will be called when the name is
* used in a calcualtor expression.
*/
function registerFunction(name, func) {
symbols[name] = func;
func.toString = function() { return Number.NaN; };
}
/**
* Updates the value of a variable in the symbol table.
* @param name {string} The name of the variable to update.
* @param value {*} The value to set for the variable.
*/
function updateVar(name, value) {
symbols[name] = value;
}
/****
** End of temporary evaling logic
*/
registerFunction('abs', function(number) {
return Math.abs(number);
});
registerFunction('acos', function(number) {
return Math.acos(number);
});
registerFunction('asin', function(number) {
return Math.asin(number);
});
registerFunction('atan', function(number) {
return Math.atan(number);
});
registerFunction('atan2', function(n1, n2) {
return Math.atan2(n1, n2);
});
registerFunction('ceil', function(number) {
return Math.ceil(number);
});
registerFunction('cos', function(number) {
return Math.cos(number);
});
registerFunction('floor', function(number) {
return Math.floor(number);
});
registerFunction('log', function(number) {
return Math.log(number);
});
registerFunction('max', function(n1, n2) {
return Math.max(n1, n2);
});
registerFunction('min', function(n1, n2) {
return Math.min(n1, n2);
});
registerFunction('pow', function(n1, n2) {
return Math.pow(n1, n2);
});
registerFunction('random', function() {
return Math.random();
});
registerFunction('round', function(number) {
return Math.round(number);
});
registerFunction('sin', function(number) {
return Math.sin(number);
});
registerFunction('sqrt', function(number) {
return Math.sqrt(number);
});
registerFunction('tan', function(number) {
return Math.tan(number);
});
/**
* Creates an expression object that manages an expression cell within the
* display area.
* @constructor
*/
function Expression() {
this.editDiv_ = document.createElement('div');
this.editDiv_.className = 'expression_editor';
this.editDiv_.contentEditable = true;
}
/**
* Returns the HTML element that acts as the expression editor.
* @return {!Element} The editor element.
*/
Expression.prototype.getEditor = function() {
return this.editDiv_;
};
/**
* Returns the current expression as a string.
* @return {string} The current expression.
*/
Expression.prototype.getText = function() {
var children = this.editDiv_.childNodes;
if (children.length == 1) {
return children[0].nodeValue;
} else {
var contents = []
for (var x = 0; x < children.length; ++x) {
contents.push(children[x].nodeValue);
}
return contents.join('');
}
};
/**
* Creates a result object that manages a result cell within the display area.
* @constructor.
*/
function Result() {
this.resultSpan_ = document.createElement('span');
this.resultSpan_.className = 'result_display';
this.resultSpan_.appendChild(document.createTextNode(''));
}
/**
* Returns the HTML element that acts as the result display.
* @return {!Element} The display element.
*/
Result.prototype.getDisplay = function() {
return this.resultSpan_;
};
/**
* Returns the currently displayed result text.
* @return {string} The result text.
*/
Result.prototype.getText = function() {
return this.resultSpan_.childNodes[0].nodeValue;
};
/**
* Sets the currently displayed result text.
* @param text {string} The new text to display.
*/
Result.prototype.setText = function(text) {
return this.resultSpan_.childNodes[0].nodeValue = text;
};
/**
* Creates a line in the display, which is composed of an expression and a
* result.
* @param lineNumber {number} The line number of this line.
* @param expressionChangedCallback {function(DisplayLine)} A callback to invoke
* when the expression has been changed by the user. This display line will
* be passed as the only input.
* @constructor
*/
function DisplayLine(lineNumber, expressionChangedCallback) {
this.lineNumber_ = lineNumber;
this.expression_ = new Expression();
this.result_ = new Result();
this.row_ = this.setupLayout_();
this.setupExpressionHandling_(expressionChangedCallback);
}
/**
* Returns the line number of this display line.
* @return {number} the line number.
*/
DisplayLine.prototype.getLineNumber = function() {
return this.lineNumber_;
};
/**
* Returns the expression of this display line.
* @return {Expression} The expression.
*/
DisplayLine.prototype.getExpression = function() {
return this.expression_;
};
/**
* Returns the result of this display line.
* @return {Result} The result.
*/
DisplayLine.prototype.getResult = function() {
return this.result_;
};
/**
* Returns the table row this display line manages.
* @return {Element} the table row element.
*/
DisplayLine.prototype.getRow = function() {
return this.row_;
};
/**
* Sets up detection of the user editing the expression.
* @param changeCallback {function(DisplayLine)} The callback to call when
* the user edits the expression.
* @private
*/
DisplayLine.prototype.setupExpressionHandling_ = function(changeCallback) {
var self = this;
function callback() {
changeCallback(self);
}
this.expression_.getEditor().addEventListener('keyup', callback, true);
this.expression_.getEditor().addEventListener('paste', callback, true);
};
/**
* Creates the table row needed by this display line instance.
* @return {!Element} the new table row this display line will use.
*/
DisplayLine.prototype.setupLayout_ = function() {
var row = document.createElement('tr');
row.className = 'expression_row';
var lineNumberCell = document.createElement('td');
lineNumberCell.className = 'line_number';
lineNumberCell.appendChild(document.createTextNode(this.lineNumber_));
row.appendChild(lineNumberCell);
var editor = this.expression_.getEditor();
var expressionCell = document.createElement('td');
expressionCell.className = 'expression_cell';
expressionCell.appendChild(editor)
row.appendChild(expressionCell);
var resultCell = document.createElement('td');
resultCell.className = 'result_cell';
resultCell.appendChild(this.result_.getDisplay());
resultCell.addEventListener('click', function() {
editor.focus();
}, true);
row.appendChild(resultCell);
return row;
};
/**
* Forces the browser to put cursor focus on this display line.
*/
DisplayLine.prototype.focus = function() {
this.expression_.getEditor().focus();
};
/**
* Creates a new calcualtor that manages the calculator page. Only one of these
* should be created per page.
* @constructor.
*/
function Calculator() {
this.lines_ = [];
this.displayInScrollingMode_ = false;
this.activeLine_ = null;
}
/**
* Initializes the calcualtor once the page is finished loading.
*/
Calculator.prototype.init = function() {
window.addEventListener('resize', this.determineDisplayLayout.bind(this), true);
this.initializeKeypad_();
this.initializeNextLine_();
};
/**
* Configures a keypad button to insert the given text into the active line.
* @param buttonId {string} The DOM ID of the keypad button to configure.
* @param text {string} The text to insert into the active line when the keypad
* button is pressed.
* @private
*/
Calculator.prototype.hookInputButton_ = function(buttonId, text) {
var self = this;
document.getElementById(buttonId).addEventListener('click', function() {
if (self.activeLine_) {
document.execCommand('inserthtml', false, text);
self.handleExpressionChanged_(self.activeLine_);
}
}, true);
}
/**
* Initializes the keypad to have working buttons that insert text into the
* current line.
* @private
*/
Calculator.prototype.initializeKeypad_ = function() {
for (var x = 0; x < 10; ++x) {
this.hookInputButton_('kp_' + x, '' + x);
}
this.hookInputButton_('kp_dot', '.');
this.hookInputButton_('kp_div', '/');
this.hookInputButton_('kp_mul', '*');
this.hookInputButton_('kp_sub', '-');
this.hookInputButton_('kp_add', '+');
document.getElementById('kp_eq').addEventListener(
'click',
this.initializeNextLine_.bind(this),
false);
};
/**
* Creates a new display line and initializes it as the active line.
* @private
*/
Calculator.prototype.initializeNextLine_ = function() {
var nextLineNumber = this.lines_.length + 1;
var line = new DisplayLine(nextLineNumber,
this.handleExpressionChanged_.bind(this));
this.lines_.push(line);
this.hookLine_(line);
document.getElementById('display_grid_body').appendChild(line.getRow());
this.determineDisplayLayout();
line.focus();
};
/**
* Handles live-updating of relevant display lines when the user is updating
* an expression.
* @param changedLine {number} the line number of the display line that is
* being changed.
* @private
*/
Calculator.prototype.handleExpressionChanged_ = function(changedLine) {
for (var x = changedLine.getLineNumber() - 1; x < this.lines_.length; ++x) {
var line = this.lines_[x];
var val = evalExpression(line.getExpression().getText());
updateVar('line' + line.getLineNumber(), val);
line.getResult().setText(val);
}
};
/**
* Hooks various user events on a display line that need to be handled at a
* higher level. Currently this handles making new lines when hitting enter,
* and tracking browser focus for determining the currently active line.
*/
Calculator.prototype.hookLine_ = function(line) {
var expression = line.getExpression();
var self = this;
expression.getEditor().addEventListener('keydown', function(event) {
if (event.which == 13) {
event.preventDefault();
event.stopPropagation();
self.initializeNextLine_();
}
}, true);
expression.getEditor().addEventListener('focus', function(event) {
self.activeLine_ = line;
}, true);
};
/**
* Called when the browser is resized to determine how to flow the display area.
*
* There are two flow modes: If the display is larger than the room the lines
* need, then the lines should be aligned to the bottom of the display. If the
* display is smaller than the room the lines need, then enable a scrolling
* behavior.
*/
Calculator.prototype.determineDisplayLayout = function() {
if (this.displayInScrollingMode_) {
// Determine if we have to take the display out of scrolling mode so that
// the text will align to the bottom
var displayScroll = document.getElementById('display_scroll');
if (displayScroll.clientHeight == displayScroll.scrollHeight) {
// Revert the explicit height so that it shrinks to be only as high as
// needed, which will let the containing cell align it to the bottom.
displayScroll.style.height = 'auto';
this.displayInScrollingMode_ = false;
}
} else {
// Determine if we have to put the display in scrolling mode because the
// content is too large for the cell size
var displayCell = document.getElementById('display_cell');
var displayScroll = document.getElementById('display_scroll');
if (displayScroll.clientHeight == displayCell.clientHeight) {
// Assign an explicit height so that the overflow css property kicks in.
displayScroll.style.height = '100%';
this.displayInScrollingMode_ = true;
}
}
};