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

14
js-compiled.js
View File

@ -452,19 +452,23 @@ W.prototype.o = function() {
$(window).resize(function() { $(window).resize(function() {
A(a.view); A(a.view);
}); });
$("button.tool").click(function(a) { $("#draw-tools > button.tool").click(function(a) {
a = a.target.id; a = a.target.id;
$("button.tool").removeClass("active"); $("#draw-tools > button.tool").removeClass("active");
$(".dialog").removeClass("visible");
$("#" + a).toggleClass("active"); $("#" + a).toggleClass("active");
$("#" + a + "-dialog").toggleClass("visible"); $(".dialog").removeClass("visible");
"box-button" == a && (this.d = new I(this.state)); "box-button" == a && (this.d = new I(this.state));
"line-button" == a && (this.d = new M(this.state)); "line-button" == a && (this.d = new M(this.state));
"freeform-button" == a && (this.d = new N(this.state, "+")); "freeform-button" == a && (this.d = new N(this.state, "+"));
"erase-button" == a && (this.d = new Q(this.state)); "erase-button" == a && (this.d = new Q(this.state));
"move-button" == a && (this.d = new R(this.state)); "move-button" == a && (this.d = new R(this.state));
"text-button" == a && (this.d = new P(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(); "clear-button" == a && this.state.clear();
"undo-button" == a && U(this.state); "undo-button" == a && U(this.state);
}.bind(this)); }.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() }); $(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) { $('#file-tools > button.tool').click(function(e) {
this.updateButtons(e.target.id); this.handleFileButton(e.target.id);
}.bind(this)); }.bind(this));
$('button.close-dialog-button').click(function(e) { $('button.close-dialog-button').click(function(e) {
@ -123,6 +125,7 @@ ascii.Controller.prototype.installBindings = function() {
this.view.useLines = true; this.view.useLines = true;
this.view.dirty = true; this.view.dirty = true;
}.bind(this)); }.bind(this));
$('#use-ascii-button').click(function(e) { $('#use-ascii-button').click(function(e) {
$('.dialog').removeClass('visible'); $('.dialog').removeClass('visible');
this.view.useLines = false; this.view.useLines = false;
@ -142,12 +145,10 @@ ascii.Controller.prototype.installBindings = function() {
* Handles the buttons in the UI. * Handles the buttons in the UI.
* @param {string} id The ID of the element clicked. * @param {string} id The ID of the element clicked.
*/ */
ascii.Controller.prototype.updateButtons = function(id) { ascii.Controller.prototype.handleDrawButton = function(id) {
$('button.tool').removeClass('active'); $('#draw-tools > button.tool').removeClass('active');
$('.dialog').removeClass('visible');
$('#' + id).toggleClass('active'); $('#' + id).toggleClass('active');
$('#' + id + '-dialog').toggleClass('visible'); $('.dialog').removeClass('visible');
// Install the right draw tool based on button pressed. // Install the right draw tool based on button pressed.
if (id == 'box-button') { if (id == 'box-button') {
@ -168,8 +169,20 @@ ascii.Controller.prototype.updateButtons = function(id) {
if (id == 'text-button') { if (id == 'text-button') {
this.drawFunction = new ascii.DrawText(this.state); 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') { if (id == 'export-button') {
$('#export-area').val(this.state.outputText()); $('#export-area').val(this.state.outputText());
$('#export-area').focus();
$('#export-area').select();
} }
if (id == 'clear-button') { if (id == 'clear-button') {
this.state.clear(); this.state.clear();