Skip to content

Commit

Permalink
Beginning separating out html from index to maximize portability of t…
Browse files Browse the repository at this point in the history 
…he code #38
  • Loading branch information
@lordscarlet
lordscarlet committed Nov 15, 2012
1 parent 07277c2 commit d50332b
Show file tree
Hide file tree
Showing 5 changed files with 2,035 additions and 90 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Expand Up @@ -8,6 +8,7 @@ BUILDING THE PROJECT
* File::Copy::Recursive
* Template
* CoffeeScript
* Handlebars ( $ npm install handlebars -g )

### Optional Dependencies

Expand Down
30 changes: 26 additions & 4 deletions build
View file
Expand Up @@ -26,14 +26,21 @@ if( !@args ) {

my %vars;
$vars{ css } = _gather_css( $src );
$vars{ javascript } = _gather_js( $src );
$vars{ js } = _gather_js( $src );

my $output;
$tmpl->process( $src->file( 'index.html' )->stringify, \%vars, \$output );
$tmpl->process( $src->file( 'index.html' )->stringify, '', \$output );

if( !$opts{ '--no-minify' } && eval "require HTML::Packer;" ) {
my $packer = HTML::Packer->init();
$packer->minify( \$output, {
$packer->minify( \$vars{ css }, {
remove_comments => 1,
remove_newlines => 1,
do_javascript => 'clean',
do_stylesheet => 'minify',
html5 => 1,
} );
$packer->minify( \$vars{ js }, {
remove_comments => 1,
remove_newlines => 1,
do_javascript => 'clean',
Expand All @@ -42,10 +49,23 @@ if( !@args ) {
} );
}

my $fh = $outdir->file( 'index.html' )->open( 'w' );
my $dir = $outdir->subdir( 'js' );
$dir->mkpath;
my $fh = $dir->file( 'js-textmode-editor.js' )->open( 'w' );
print $fh $vars{ js };
$fh->close;

$dir = $outdir->subdir( 'css' );
$dir->mkpath;
$fh = $dir->file( 'js-textmode-editor.css' )->open( 'w' );
print $fh $vars{ css };
$fh->close;

$fh = $outdir->file( 'index.html' )->open( 'w' );
print $fh $output;
$fh->close;


# favicon
require File::Copy;
File::Copy::copy( $src->file( 'favicon.ico' )->stringify, $outdir );
Expand Down Expand Up @@ -99,5 +119,7 @@ sub _gather_js {
my $temp;
( undef, $temp ) = File::Temp::tempfile();
my $js = `coffee -p -j $temp $src/*.coffee`;
$js .= `handlebars $src/../handlebars/*.handlebars`;
return $js;
}

73 changes: 73 additions & 0 deletions src/handlebars/editor.handlebars
View file
@@ -0,0 +1,73 @@
<div id=splash>
<a class=close href=#>&times;</a>
<h1>{{title}}</h1>
{{{help_header}}}
<h2>Colors</h2>
<dl>
<dt>ctrl + up/ctrl + down</dt>
<dd>Change foreground color</dd>
<dt>ctrl + left/ctrl + right</dt>
<dd>Change background color</dd>
</dl>
<h2>Characters</h2>
<dl>
<dt>alt + [f1..f10]</dt>
<dd>Switch extended character set</dd>
<dt>[f1..f10]</dt>
<dd>Place extended character</dd>
</dl>
{{{help_footer}}}
</div>
<div id=drawings>
<div>
<a class=close href=#>&times;</a>
<h2>Your Drawings</h2>
<p class="alert"><strong>Warning:</strong> clearing your cache will empty this list</p>
<ol></ol>
</div>
<div>
<h2>Upload Drawing</h2>
<form id="upload" method="post" enctype="multipart/form-data">
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
<label for="fileselect">Drawing to upload: </label>
<input type="file" id="fileselect" name="fileselect" />
</div>
</form>
</div>
</div>
<div id=SaveDialog>
<a class=close href=#>&times;</a>
<h2>Save</h2>
<label for="name">Name (Optional)</label> <input id=name type="text" />
<ul>
<li><a href="#" id="PNGSave">Save as PNG</a></li>
<li><a href="#" id="html5Save">Save to Browser</a></li>
</ul>
</div>
<div id=toolbar>
<ul id=menu>
<li id=save>Save</li>
<li id=load>Load</li>
<li id=clear>Clear</li>
</ul>
<div id=cursorpos>(1, 1)</div>
<div id=palette>
<div id=fg class=selected>FG</div>
<div id=bg>BG</div>
<div id=colors></div>
<div style="clear:both"></div>
</div>
<div id=charsets>
<ul id=sets></ul>
<div id=prev-set>&#9668;</div>
<div id=next-set>&#9658;</div>
<div id=char-lock>Lock</div>
</div>
</div>
<div id=canvaswrapper>
<div id=highlight></div>
<div id=cursor></div>
<canvas id=canvas></canvas>
<canvas id="vga"></canvas>
</div>
101 changes: 15 additions & 86 deletions src/index.html
View file
Expand Up @@ -3,12 +3,12 @@
<head>
<title>Sixteen Colors Draw - ANSI Editor</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/js-textmode-editor.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.Storage.js" type="text/javascript"></script>
<script src="js/jquery.DateFormat-1.0.js" type="text/javascript"></script>
<script src=js/textmode.min.js type=text/javascript></script>
<script>[% javascript %]</script>
<style type=text/css>[% css %]</style>
<script src="js/handlebars-1.0.rc.1.js"></script>
<script type="text/javascript">
var addthis_config = {"data_track_clickback":true};
</script>
Expand All @@ -18,92 +18,21 @@
<meta name="og:title" content="Sixteen Colors Draw - ANSI Editor"/>
<meta name="og:type" content="website"/>
<meta name="og:description" content="Create and edit ANSI and ASCII art in your browser!" />
<script type="text/javascript">
$(document).ready(function() {
var source = $("#editor-template").html();
var template = Handlebars.templates['editor'];
var data = {
title: "Sixteen Colors Draw",
help_header: "<p>Welcome to Sixteen Colors Draw, an <a href=http://en.wikipedia.org/wiki/ANSI_art>ANSI Art</a> editor, brought to you by the <a href=http://sixteencolors.net>Sixteen Colors ANSI Art and ASCII Art Archive</a>.</p><p>Press <b>alt + h</b> at any time to return to this screen.</p>",
help_footer: "<p>Please visit our other sites as well: </p><ul><li><a href=\"http://sixteencolors.net\">Sixteen Colors ANSI Art and ASCII Art Archive</a></li><li><a href=\"http://paste.sixteencolors.net\">Sixteen Colors Paste</a></li></ul><div class=\"addthis_toolbox addthis_default_style\"><a class=\"addthis_button_facebook_like\" fb:like:layout=\"button_count\" fb:like:href=\"http://draw.sixteencolors.net/\"></a><a class=\"addthis_button_tweet\" tw:url=\"http://draw.sixteencolors.net/\"></a><a class=\"addthis_button_google_plusone\" g:plusone:size=\"medium\" g:plusone:href=\"http://draw.sixteencolors.net/\"></a><a class=\"addthis_counter addthis_pill_style\" addthis:url=\"http://draw.sixteencolors.net/\" addthis:title=\"Sixteen Colors Draw - ANSI Editor\"></a></div>" };
$("#editor").html(template(data));
});
</script>
<script src="js/js-textmode-editor.js"></script>

</head>
<body>
<div id=splash>
<a class=close href=#>&times;</a>
<h1>Sixteen Colors Draw</h1>
<p>Welcome to Sixteen Colors Draw, an <a href=http://en.wikipedia.org/wiki/ANSI_art>ANSI Art</a> editor, brought to you by the <a href=http://sixteencolors.net>Sixteen Colors ANSI Art and ASCII Art Archive</a>.</p>
<p>Press <b>alt + h</b> at any time to return to this screen.</p>
<h2>Colors</h2>
<dl>
<dt>ctrl + up/ctrl + down</dt>
<dd>Change foreground color</dd>
<dt>ctrl + left/ctrl + right</dt>
<dd>Change background color</dd>
</dl>
<h2>Characters</h2>
<dl>
<dt>alt + [f1..f10]</dt>
<dd>Switch extended character set</dd>
<dt>[f1..f10]</dt>
<dd>Place extended character</dd>
</dl>
<p>Please visit our other sites as well: </p>
<ul>
<li><a href="http://sixteencolors.net">Sixteen Colors ANSI Art and ASCII Art Archive</a></li>
<li><a href="http://paste.sixteencolors.net">Sixteen Colors Paste</a></li>
</ul>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:href="http://draw.sixteencolors.net/"></a>
<a class="addthis_button_tweet" tw:url="http://draw.sixteencolors.net/"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium" g:plusone:href="http://draw.sixteencolors.net/"></a>
<a class="addthis_counter addthis_pill_style" addthis:url="http://draw.sixteencolors.net/" addthis:title="Sixteen Colors Draw - ANSI Editor"></a>
</div>
</div>
<div id=drawings>
<div>
<a class=close href=#>&times;</a>
<h2>Your Drawings</h2>
<p class="alert"><strong>Warning:</strong> clearing your cache will empty this list</p>
<ol></ol>
</div>
<div>
<h2>Upload Drawing</h2>
<form id="upload" method="post" enctype="multipart/form-data">
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
<label for="fileselect">Drawing to upload: </label>
<input type="file" id="fileselect" name="fileselect" />
</div>
</form>
</div>
</div>
<div id=SaveDialog>
<a class=close href=#>&times;</a>
<h2>Save</h2>
<label for="name">Name (Optional)</label> <input id=name type="text" />
<ul>
<li><a href="#" id="PNGSave">Save as PNG</a></li>
<li><a href="#" id="html5Save">Save to Browser</a></li>
</ul>
</div>
<div id=toolbar>
<ul id=menu>
<li id=save>Save</li>
<li id=load>Load</li>
<li id=clear>Clear</li>
</ul>
<div id=cursorpos>(1, 1)</div>
<div id=palette>
<div id=fg class=selected>FG</div>
<div id=bg>BG</div>
<div id=colors></div>
<div style="clear:both"></div>
</div>
<div id=charsets>
<ul id=sets></ul>
<div id=prev-set>&#9668;</div>
<div id=next-set>&#9658;</div>
<div id=char-lock>Lock</div>
</div>
</div>
<div id=canvaswrapper>
<div id=highlight></div>
<div id=cursor></div>
<canvas id=canvas></canvas>
<canvas id="vga"></canvas>
</div>
<div id="editor"></div>
</body>
</html>

0 comments on commit d50332b

Please sign in to comment.