haskal
/
asciiflow2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updated buttons, started to fix up UI

This commit is contained in:
Lewis Hemens 2014-01-19 23:21:53 +00:00
parent 7aca5737a4
commit e73ba39e13
2 changed files with 52 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@ -13,18 +13,20 @@
left: 0px; left: 0px;
right: 0px; right: 0px;
z-index: 100; z-index: 100;
width: 320px; width: 400px;
text-align: center; text-align: center;
} }
#dialog { #dialog {
transition: height 1.5s; transition: height 0.3s;
height: 0px;
background: #DDD; background: #DDD;
border-radius: 5px;
margin-top: 10px;
} }
#dialog.expanded { #dialog.hidden {
height: 400px; height: 0px;
display: none;
} }
button { button {
@ -32,6 +34,10 @@ button {
height: 30px; height: 30px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
border-radius: 5px;
background: #DEF;
outline: 0 !important;
border: 0px;
} }
button.active { button.active {
@ -39,11 +45,17 @@ button.active {
} }
#ascii-canvas { #ascii-canvas {
position: absolute; position: fixed;
left: 0px; left: 0px;
top: 0px; top: 0px;
cursor: crosshair; cursor: crosshair;
}; };
#export-area {
width: 100%;
height: 100px;
}
</style> </style>
</head> </head>
<body> <body>
@ -56,7 +68,9 @@ button.active {
<button id="move-button">Resize</button> <button id="move-button">Resize</button>
<button id="menu-button">Menu</button> <button id="menu-button">Menu</button>
</div> </div>
<div id="dialog"></div> <div id="dialog" class="hidden">
<textarea id="export-area"></textarea>
</div>
</div> </div>
<canvas id="ascii-canvas"></canvas> <canvas id="ascii-canvas"></canvas>
<script src="jquery-1.9.1.min.js"></script> <script src="jquery-1.9.1.min.js"></script>

49
js-lib/controller.js
View File

@ -146,23 +146,36 @@ ascii.Controller.prototype.installBindings = function() {
}); });
// TODO: Handle pinch to zoom. // TODO: Handle pinch to zoom.
$('#box-button').click(function(e) { $('#buttons > button').click(function(e) {
this.drawFunction = new ascii.DrawBox(this.state); this.updateButtons(e.target.id);
}.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);
}.bind(this)); }.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);
}
};