537 lines
16 KiB
JavaScript
537 lines
16 KiB
JavaScript
|
|
/**
|
|
* 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;
|
|
}
|
|
}
|
|
}; |