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

New icons, added click effects, export area selects text automatically

This commit is contained in:
Lewis Hemens 2014-03-22 20:12:04 +00:00
parent 7862f2ebe1
commit 0041363c63
17 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/box-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
images/box-tool.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 950 B

BIN
images/erase-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
images/erase-tool.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
images/freeform-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
images/freeform-tool.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
images/info-button.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
images/info-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
images/line-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
images/line-tool.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 407 B

BIN
images/move-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
images/move-tool.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
images/text-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
images/text-tool.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

60
index.html
View File

@ -25,14 +25,14 @@ body {
width: 100%;
background-color: #FFF;
z-index: 100;
box-shadow:0px 3px 3px #CCC;
box-shadow: 0px 3px 3px #CCC;
}
#file-tools {
text-align: right;
display: inline-block;
position: fixed;
width: 100%;
right: 0px;
z-index: 100;
}
@ -45,13 +45,15 @@ button {
text-align: center;
cursor: pointer;
outline: 0 !important;
background-size: 100% !important;
background-size: 200% 100% !important;
background-color: #FFF;
}
.info-icon {
width: 30px;
height: 30px;
background-size: 100% !important;
background-size: 200% 100% !important;
display: inline-block;
}
@ -62,6 +64,11 @@ button {
height: 30px;
}
#drive-filename {
display: inline-block;
}
/* Mobile overrides */
@media(max-width:600px) {
/* Move file tools to the bottom. */
@ -69,6 +76,10 @@ button {
bottom: 0px;
background-color: #FFF;
box-shadow:0px -3px 3px #CCC;
width: 100%;
}
#drive-filename {
display: block;
}
}
@ -98,8 +109,8 @@ button {
border-width: 0px;
}
#draw-tools > button.active {
/* TODO: Offset background images. */
button.active, .info-icon {
background-position: right;
}
.dialog > button {
@ -113,11 +124,6 @@ button {
top: 0px;
}
#drive-filename {
display: inline-block;
}
textarea {
width: 100%;
height: 100%;
@ -130,31 +136,25 @@ textarea {
white-space: pre;
}
.box-image { background-image: url('images/box-tool.png'); }
.line-image { background-image: url('images/line-tool.png'); }
.freeform-image { background-image: url('images/freeform-tool.png'); }
.erase-image { background-image: url('images/erase-tool.png'); }
.move-image { background-image: url('images/move-tool.png'); }
.text-image { background-image: url('images/text-tool.png'); }
.info-image { background-image: url('images/info-button.png'); }
.box-image { background-image: url('images/box-icon.png'); }
.line-image { background-image: url('images/line-icon.png'); }
.freeform-image { background-image: url('images/freeform-icon.png'); }
.erase-image { background-image: url('images/erase-icon.png'); }
.move-image { background-image: url('images/move-icon.png'); }
.text-image { background-image: url('images/text-icon.png'); }
.info-image { background-image: url('images/info-icon.png'); }
</style>
</head>
<body>
<div id="draw-tools">
<button id="box-button" class="tool active box-image">
</button>
<button id="line-button" class="tool line-image">
</button>
<button id="freeform-button" class="tool freeform-image">
</button>
<button id="erase-button" class="tool erase-image">
</button>
<button id="move-button" class="tool move-image">
</button>
<button id="text-button" class="tool text-image">
</button>
<button id="box-button" class="tool active box-image"></button>
<button id="line-button" class="tool line-image"></button>
<button id="freeform-button" class="tool freeform-image"></button>
<button id="erase-button" class="tool erase-image"></button>
<button id="move-button" class="tool move-image"></button>
<button id="text-button" class="tool text-image"></button>
</div>
<div id="file-tools">
@ -169,7 +169,7 @@ textarea {
</div>
<div id="export-button-dialog" class="dialog">
<textarea id="export-area"></textarea>
<textarea readonly id="export-area"></textarea>
<button class="close-dialog-button">Close</button>
</div>

14
js-compiled.js
View File

@ -452,19 +452,23 @@ W.prototype.o = function() {
$(window).resize(function() {
A(a.view);
});
$("button.tool").click(function(a) {
$("#draw-tools > button.tool").click(function(a) {
a = a.target.id;
$("button.tool").removeClass("active");
$(".dialog").removeClass("visible");
$("#draw-tools > button.tool").removeClass("active");
$("#" + a).toggleClass("active");
$("#" + a + "-dialog").toggleClass("visible");
$(".dialog").removeClass("visible");
"box-button" == a && (this.d = new I(this.state));
"line-button" == a && (this.d = new M(this.state));
"freeform-button" == a && (this.d = new N(this.state, "+"));
"erase-button" == a && (this.d = new Q(this.state));
"move-button" == a && (this.d = new R(this.state));
"text-button" == a && (this.d = new P(this.state));
"export-button" == a && $("#export-area").val(V(this.state));
}.bind(this));
$("#file-tools > button.tool").click(function(a) {
a = a.target.id;
$(".dialog").removeClass("visible");
$("#" + a + "-dialog").toggleClass("visible");
"export-button" == a && ($("#export-area").val(V(this.state)), $("#export-area").focus(), $("#export-area").select());
"clear-button" == a && this.state.clear();
"undo-button" == a && U(this.state);
}.bind(this));

29
js-lib/controller.js
View File

@ -99,10 +99,12 @@ ascii.Controller.prototype.installBindings = function() {
$(window).resize(function(e) { controller.view.resizeCanvas() });
// TODO: Handle pinch to zoom.
$('#draw-tools > button.tool').click(function(e) {
this.handleDrawButton(e.target.id);
}.bind(this));
$('button.tool').click(function(e) {
this.updateButtons(e.target.id);
$('#file-tools > button.tool').click(function(e) {
this.handleFileButton(e.target.id);
}.bind(this));
$('button.close-dialog-button').click(function(e) {
@ -123,6 +125,7 @@ ascii.Controller.prototype.installBindings = function() {
this.view.useLines = true;
this.view.dirty = true;
}.bind(this));
$('#use-ascii-button').click(function(e) {
$('.dialog').removeClass('visible');
this.view.useLines = false;
@ -142,12 +145,10 @@ ascii.Controller.prototype.installBindings = function() {
* Handles the buttons in the UI.
* @param {string} id The ID of the element clicked.
*/
ascii.Controller.prototype.updateButtons = function(id) {
$('button.tool').removeClass('active');
$('.dialog').removeClass('visible');
ascii.Controller.prototype.handleDrawButton = function(id) {
$('#draw-tools > button.tool').removeClass('active');
$('#' + id).toggleClass('active');
$('#' + id + '-dialog').toggleClass('visible');
$('.dialog').removeClass('visible');
// Install the right draw tool based on button pressed.
if (id == 'box-button') {
@ -168,8 +169,20 @@ ascii.Controller.prototype.updateButtons = function(id) {
if (id == 'text-button') {
this.drawFunction = new ascii.DrawText(this.state);
}
};
/**
* Handles the buttons in the UI.
* @param {string} id The ID of the element clicked.
*/
ascii.Controller.prototype.handleFileButton = function(id) {
$('.dialog').removeClass('visible');
$('#' + id + '-dialog').toggleClass('visible');
if (id == 'export-button') {
$('#export-area').val(this.state.outputText());
$('#export-area').focus();
$('#export-area').select();
}
if (id == 'clear-button') {
this.state.clear();