diff --git a/index.html b/index.html
index 07f82ba..f415283 100644
--- a/index.html
+++ b/index.html
@@ -13,18 +13,20 @@
left: 0px;
right: 0px;
z-index: 100;
- width: 320px;
+ width: 400px;
text-align: center;
}
#dialog {
- transition: height 1.5s;
- height: 0px;
+ transition: height 0.3s;
background: #DDD;
+ border-radius: 5px;
+ margin-top: 10px;
}
-#dialog.expanded {
- height: 400px;
+#dialog.hidden {
+ height: 0px;
+ display: none;
}
button {
@@ -32,6 +34,10 @@ button {
height: 30px;
text-align: center;
cursor: pointer;
+ border-radius: 5px;
+ background: #DEF;
+ outline: 0 !important;
+ border: 0px;
}
button.active {
@@ -39,11 +45,17 @@ button.active {
}
#ascii-canvas {
- position: absolute;
+ position: fixed;
left: 0px;
top: 0px;
cursor: crosshair;
};
+
+#export-area {
+ width: 100%;
+ height: 100px;
+}
+
@@ -56,7 +68,9 @@ button.active {
-
+
+
+
diff --git a/js-lib/controller.js b/js-lib/controller.js
index 9869d3d..7c2be41 100644
--- a/js-lib/controller.js
+++ b/js-lib/controller.js
@@ -146,23 +146,36 @@ ascii.Controller.prototype.installBindings = function() {
});
// TODO: Handle pinch to zoom.
- $('#box-button').click(function(e) {
- this.drawFunction = new ascii.DrawBox(this.state);
- }.bind(this));
-
- $('#line-button').click(function(e) {
- this.drawFunction = new ascii.DrawLine(this.state);
- }.bind(this));
-
- $('#freeform-button').click(function(e) {
- this.drawFunction = new ascii.DrawFreeform(this.state, '+');
- }.bind(this));
-
- $('#erase-button').click(function(e) {
- this.drawFunction = new ascii.DrawFreeform(this.state, null);
- }.bind(this));
-
- $('#move-button').click(function(e) {
- this.drawFunction = new ascii.DrawMove(this.state);
+ $('#buttons > button').click(function(e) {
+ this.updateButtons(e.target.id);
}.bind(this));
};
+
+/**
+ * Handles the buttons in the UI.
+ * @param {string} id The ID of the element clicked.
+ */
+ascii.Controller.prototype.updateButtons = function(id) {
+ $('#buttons > button').removeClass();
+ $('#dialog').addClass('hidden');
+ $('#' + id).addClass('active');
+ if (id == 'menu-button') {
+ $('#dialog').removeClass('hidden');
+ }
+ // Install the right draw tool based on button pressed.
+ if (id == 'box-button') {
+ this.drawFunction = new ascii.DrawBox(this.state);
+ }
+ if (id == 'line-button') {
+ this.drawFunction = new ascii.DrawLine(this.state);
+ }
+ if (id == 'freeform-button') {
+ this.drawFunction = new ascii.DrawFreeform(this.state, '+');
+ }
+ if (id == 'erase-button') {
+ this.drawFunction = new ascii.DrawFreeform(this.state, null);
+ }
+ if (id == 'move-button') {
+ this.drawFunction = new ascii.DrawMove(this.state);
+ }
+};