OLD | NEW |
---|---|
1 /** | 1 /** |
2 * Copyright (c) 2012 The Chromium Authors. All rights reserved. | 2 * Copyright (c) 2012 The Chromium Authors. All rights reserved. |
3 * Use of this source code is governed by a BSD-style license that can be | 3 * Use of this source code is governed by a BSD-style license that can be |
4 * found in the LICENSE file. | 4 * found in the LICENSE file. |
5 **/ | 5 **/ |
6 | 6 |
7 function View(window, model) { | 7 function View(window, model) { |
8 var view = this; | 8 var view = this; |
9 var model = model; | 9 var model = model; |
10 var events = this.defineEvents_(); | 10 var inputs = this.defineInputs_(); |
11 var display = window.document.querySelector('#calculator .display'); | 11 var display = window.document.querySelector('#calculator .display'); |
12 var buttons = window.document.querySelectorAll('#calculator .button'); | 12 var buttons = window.document.querySelectorAll('#calculator .button'); |
13 | 13 |
14 Array.prototype.forEach.call(buttons, function(button) { | 14 Array.prototype.forEach.call(buttons, function(button) { |
15 button.onclick = function(click) { | 15 button.onclick = function(event) { |
dharcourt
2012/10/16 23:15:20
Since "event" isn't used for Calculator inputs, it
| |
16 var button = click.target.getAttribute('class').split(' ')[1]; | 16 var button = event.target.getAttribute('class').split(' ')[1]; |
17 var event = events.byButton[button]; | 17 var input = inputs.byButton[button]; |
18 if (event) { | 18 if (input) { |
19 var values = model.handle(event.name); | 19 var values = model.handle(input.name); |
20 view.updateDisplay_(display, values, event); | 20 view.updateDisplay_(display, values, input); |
21 } | 21 } |
22 }; | 22 }; |
23 }); | 23 }); |
24 | 24 |
25 window.onkeydown = function(keydown) { | 25 window.onkeydown = function(event) { |
26 var key = keydown.shiftKey ? ('^' + keydown.which) : keydown.which; | 26 var key = event.shiftKey ? ('^' + event.which) : event.which; |
27 var event = events.byKey[key]; | 27 var input = inputs.byKey[key]; |
28 if (event) { | 28 if (input) { |
29 var values = model.handle(event.name); | 29 var values = model.handle(input.name); |
30 view.updateDisplay_(display, values, event); | 30 view.updateDisplay_(display, values, input); |
31 } | 31 } |
32 }; | 32 }; |
33 | 33 |
34 } | 34 } |
35 | 35 |
36 /** @private */ | 36 /** @private */ |
37 View.prototype.defineEvents_ = function() { | 37 View.prototype.defineInputs_ = function() { |
38 var events = {byName: {}, byButton: {}, byKey: {}}; | 38 var inputs = {byName: {}, byButton: {}, byKey: {}}; |
39 this.defineEvent_(events, '0', 'zero', '48'); | 39 this.defineInput_(inputs, '0', 'zero', '48'); |
40 this.defineEvent_(events, '1', 'one', '49'); | 40 this.defineInput_(inputs, '1', 'one', '49'); |
41 this.defineEvent_(events, '2', 'two', '50'); | 41 this.defineInput_(inputs, '2', 'two', '50'); |
42 this.defineEvent_(events, '3', 'three', '51'); | 42 this.defineInput_(inputs, '3', 'three', '51'); |
43 this.defineEvent_(events, '4', 'four', '52'); | 43 this.defineInput_(inputs, '4', 'four', '52'); |
44 this.defineEvent_(events, '5', 'five', '53'); | 44 this.defineInput_(inputs, '5', 'five', '53'); |
45 this.defineEvent_(events, '6', 'six', '54'); | 45 this.defineInput_(inputs, '6', 'six', '54'); |
46 this.defineEvent_(events, '7', 'seven', '55'); | 46 this.defineInput_(inputs, '7', 'seven', '55'); |
47 this.defineEvent_(events, '8', 'eight', '56'); | 47 this.defineInput_(inputs, '8', 'eight', '56'); |
48 this.defineEvent_(events, '9', 'nine', '57'); | 48 this.defineInput_(inputs, '9', 'nine', '57'); |
49 this.defineEvent_(events, '.', 'point', '190'); | 49 this.defineInput_(inputs, '.', 'point', '190'); |
50 this.defineEvent_(events, '+', 'add', '^187', true); | 50 this.defineInput_(inputs, '+', 'add', '^187', true); |
51 this.defineEvent_(events, '-', 'subtract', '189', true); | 51 this.defineInput_(inputs, '-', 'subtract', '189', true); |
52 this.defineEvent_(events, '*', 'multiply', '^56', true); | 52 this.defineInput_(inputs, '*', 'multiply', '^56', true); |
53 this.defineEvent_(events, '/', 'divide', '191', true); | 53 this.defineInput_(inputs, '/', 'divide', '191', true); |
54 this.defineEvent_(events, '=', 'equals', '187'); | 54 this.defineInput_(inputs, '=', 'equals', '187'); |
55 this.defineEvent_(events, '=', ' ', '13'); | 55 this.defineInput_(inputs, '=', ' ', '13'); |
56 this.defineEvent_(events, '+ / -', 'negate', '32'); | 56 this.defineInput_(inputs, '+ / -', 'negate', '32'); |
57 this.defineEvent_(events, 'AC', 'clear', '67'); | 57 this.defineInput_(inputs, 'AC', 'clear', '67'); |
58 this.defineEvent_(events, 'back', ' ', '8'); | 58 this.defineInput_(inputs, 'back', ' ', '8'); |
59 return events; | 59 return inputs; |
60 } | 60 } |
61 | 61 |
62 /** @private */ | 62 /** @private */ |
63 View.prototype.defineEvent_ = function(events, name, button, key, operator) { | 63 View.prototype.defineInput_ = function(inputs, name, button, key, operator) { |
64 var event = {name: name, button: button, key: key, operator: !!operator}; | 64 var input = {name: name, button: button, key: key, operator: !!operator}; |
65 events.byButton[button] = event; | 65 inputs.byButton[button] = input; |
66 events.byKey[key] = event; | 66 inputs.byKey[key] = input; |
67 }; | 67 }; |
68 | 68 |
69 /** @private */ | 69 /** @private */ |
70 View.prototype.updateDisplay_ = function(display, values, event) { | 70 View.prototype.updateDisplay_ = function(display, values, input) { |
71 var operation = {operator: values.operator, operand: values.operand}; | 71 var operation = {operator: values.operator, operand: values.operand}; |
72 var result = values.accumulator; | 72 var result = values.accumulator; |
73 if (event.name === 'AC') { | 73 if (input.name === 'AC') { |
74 display.innerHTML = ''; | 74 display.innerHTML = ''; |
75 this.addEquation_(display, {operand: '0'}); | 75 this.addEquation_(display, {operand: '0'}); |
76 } else if (event.name === '=') { | 76 } else if (input.name === '=') { |
77 display.appendChild(this.createDiv_(display, 'hr')); | 77 display.appendChild(this.createDiv_(display, 'hr')); |
78 this.addEquation_(display, {accumulator: result, operand:result}); | 78 this.addEquation_(display, {accumulator: result, operand:result}); |
79 } else if (event.operator) { | 79 } else if (input.operator) { |
80 this.updateEquation_(display.lastElementChild, {accumulator: result}); | 80 this.updateEquation_(display.lastElementChild, {accumulator: result}); |
81 this.addEquation_(display, {operator: operation.operator}); | 81 this.addEquation_(display, {operator: operation.operator}); |
82 } else if (!this.updateEquation_(display.lastElementChild, operation)) { | 82 } else if (!this.updateEquation_(display.lastElementChild, operation)) { |
83 this.addEquation_(display, operation); | 83 this.addEquation_(display, operation); |
84 } | 84 } |
85 } | 85 } |
86 | 86 |
87 /** @private */ | 87 /** @private */ |
88 View.prototype.addEquation_ = function(display, values) { | 88 View.prototype.addEquation_ = function(display, values) { |
89 // The order of the equation children below makes them stack correctly. | 89 // The order of the equation children below makes them stack correctly. |
(...skipping 28 matching lines...) Expand all Loading... | |
118 element.textContent = zero ? (value || '0') : (value || ''); | 118 element.textContent = zero ? (value || '0') : (value || ''); |
119 } | 119 } |
120 } | 120 } |
121 | 121 |
122 /** @private */ | 122 /** @private */ |
123 View.prototype.createDiv_ = function(display, classes) { | 123 View.prototype.createDiv_ = function(display, classes) { |
124 var div = display.ownerDocument.createElement('div'); | 124 var div = display.ownerDocument.createElement('div'); |
125 div.setAttribute('class', classes); | 125 div.setAttribute('class', classes); |
126 return div; | 126 return div; |
127 } | 127 } |
OLD | NEW |