1
0
Fork 0

Began moving examples from trybox to index page

website
Mike Gerwitz 2012-01-08 16:14:38 -05:00
parent d86f5f8d7f
commit d7156405c1
6 changed files with 118 additions and 161 deletions

View File

@ -34,7 +34,8 @@ $(outdir)/%.html: %.html $(header) $(footer) | $(outdir)
cat $(header) \ cat $(header) \
| sed 's/\(<body\)/\1 class="$*"/' \ | sed 's/\(<body\)/\1 class="$*"/' \
| cat - $< $(footer) \ | cat - $< $(footer) \
| sed 's/^ \+//' \ | sed 's/^ \+//;s/^ *#//;' \
| tools/page-parse \
> $@ > $@
# requires git-weblog from mikegerwitz's git-supp package # requires git-weblog from mikegerwitz's git-supp package

View File

@ -4,7 +4,11 @@
Object-Oriented languages. Features include: Object-Oriented languages. Features include:
</p> </p>
<ul> <div class="ex excode">
<!--%inc scripts/ex/class.js -->
</div>
<ul class="features">
<li>Simple and intuitive class definitions</li> <li>Simple and intuitive class definitions</li>
<li>Classical inheritance</li> <li>Classical inheritance</li>
<li>Abstract classes and methods</li> <li>Abstract classes and methods</li>
@ -13,7 +17,7 @@
<li>Static and constant members</li> <li>Static and constant members</li>
</ul> </ul>
<p> <p class="info">
ease.js is a framework, not a compiler. It may be used wherever ease.js is a framework, not a compiler. It may be used wherever
JavaScript may be used, including with other compilers/parsers. ease.js JavaScript may be used, including with other compilers/parsers. ease.js
also provides support for older, pre-ES5 environments by gracefully also provides support for older, pre-ES5 environments by gracefully

View File

@ -26,4 +26,3 @@ Dog( 'Fluffy' ).bark();
// alternatively, we can use the 'new' keyword // alternatively, we can use the 'new' keyword
var inst = new Dog( 'Bob' ); var inst = new Dog( 'Bob' );
inst.bark(); inst.bark();

View File

@ -25,89 +25,28 @@
$( document ).ready( function() $( document ).ready( function()
{ {
appendTry(); var $ex = $( '.ex' ),
content = $ex.text().replace( /^ *\n/, '' ),
$txt;
if ( document.location.href.substr( -6 ) === '#tryit' ) $ex.text( '' )
{ .removeClass( 'excode' )
console.log( 'ok' ); .append( $txt = $( '<textarea>' )
toggleTry(); .addClass( 'excode' )
} .text( content )
} ); )
function appendTry()
{
$trybtn = $( '<div>' )
.attr( 'id', 'try' )
.text( 'Try It' )
.addClass( 'btn large glow' )
.mousedown( function( event )
{
// prevent dragging from highlighting the text (so it looks more
// like an image)
event.preventDefault();
} )
.click( function( event )
{
toggleTry();
} )
.appendTo( '#header-content' );
}
function toggleTry()
{
var $try = getTry();
$trybtn.text(
( $try.is( ':visible' ) )
? 'Try It'
: 'Hide It'
);
$try.slideToggle();
}
function getTry()
{
var $txt;
return $trybox || ( function createTryBox()
{
$txt = $( '<textarea>' );
$.get( 'scripts/ex/class.js', {}, function( data )
{
$txt.text( data );
}, 'html' );
return $trybox = $( '<div>' )
.attr( 'id', 'trybox' )
.hide()
.append( $( '<h2>' ).text( 'Try ease.js' ) )
.append( $( '<p>' ).html(
"Enter or modify a test script below. The common " +
"ease.js modules, such as <tt>Class</tt>, have " +
"already been imported for you. When you are ready, " +
"click <strong>Run</strong> to run the script."
) )
.append( $txt )
.append( $( '<div>' ) .append( $( '<div>' )
.attr( 'id', 'trybtns' ) .addClass( 'btns' )
.append( $( '<div>' ) .append( $( '<div>' )
.attr( 'id', 'run' ) .text( 'try it' )
.text( 'Run' ) .addClass( 'btn go' )
.addClass( 'btn med green' )
.click( function() .click( function()
{ {
runScript( $txt.val() ); runScript( $txt.val() );
} ) } )
) )
) );
.prependTo( '#content' ); } );
} )();
}
function runScript( script ) function runScript( script )

140
style.css
View File

@ -81,6 +81,8 @@ html, body {
border: 2px solid #babdb6; border: 2px solid #babdb6;
border-top: 0px; border-top: 0px;
border-bottom-width: 4px; border-bottom-width: 4px;
border-radius: 0px 0px 0.5em 0.5em;
-moz-border-radius: 0px 0px 0.5em 0.5em;
margin: 0px auto; margin: 0px auto;
padding: 0.5em 1em 1em 1em; padding: 0.5em 1em 1em 1em;
@ -151,15 +153,6 @@ p.copyright a, p.copyright a:link {
color: #2e3436; color: #2e3436;
} }
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0px #ffffff;
}
100% {
-webkit-box-shadow: 0 0 5px #ffffff;
}
}
.btn { .btn {
display: inline-block; display: inline-block;
@ -168,6 +161,7 @@ p.copyright a, p.copyright a:link {
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
text-shadow: black 1px 1px 1px;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
@ -189,7 +183,7 @@ p.copyright a, p.copyright a:link {
); );
} }
.btn.green { .btn.go {
border: 1px solid #4e9a06; border: 1px solid #4e9a06;
background-image: -webkit-gradient( background-image: -webkit-gradient(
@ -220,72 +214,6 @@ p.copyright a, p.copyright a:link {
text-shadow: black 2px 2px 5px; text-shadow: black 2px 2px 5px;
} }
.glow {
-webkit-box-shadow: 0 0 5px #ffffff;
-moz-box-shadow: 0 0 5px #ffffff;
box-shadow: 0 0 5px #ffffff;
-webkit-transition: -webkit-box-shadow 0.25s linear;
-moz-transition-property: -moz-box-shadow;
-moz-transition-duration: 0.25s;
-webkit-animation-name: pulse;
-webkit-animation-duration: 1s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}
.glow:hover {
-webkit-box-shadow: 0 0 10px #ffffff;
-moz-box-shadow: 0 0 10px #ffffff;
box-shadow: 0 0 10px #ffffff;
}
#try {
display: block;
position: relative;
margin: 0px auto;
top: 1.5em;
}
#trybox {
position: relative;
border: 1px solid #eeeeec;
border-radius: 0.5em;
-moz-border-radius: 0.5em;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(186,189,182)),
color-stop(1, rgb(238,238,236))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(186,189,182) 0%,
rgb(238,238,236) 100%
);
padding: 1em;
}
#trybox h2 {
margin: 0px;
}
#trybox textarea {
width: 100%;
height: 20em;
}
#trybox #trybtns {
text-align: right;
}
#try-console { #try-console {
width: 99%; width: 99%;
height: 10em; height: 10em;
@ -306,7 +234,63 @@ span.shell-start {
} }
/** Download **/ /** index **/
.ex {
display: block;
position: relative;
top: -1em;
background-color: white;
border-width: 3px 1px;
border-style: solid;
border-color: #babdb6;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
padding: 0.5em;
float: right;
margin-bottom: 0.5em;
}
.excode {
width: 400px;
height: 10em;
font-family: monospace;
font-size: 0.7em;
white-space: pre;
overflow-y: scroll;
}
.ex textarea {
width: 400px;
height: 10em;
border: none;
margin-bottom: 0.5em;
}
.ex .btns {
border-top: 1px dotted #babdb6;
margin: 0px -0.25em;
padding: 0.25em;
}
.ex .btn {
float: right;
}
.info {
clear: both;
}
/** download **/
span.release-current { span.release-current {
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
@ -316,6 +300,8 @@ span.release-current .version {
font-weight: normal; font-weight: normal;
} }
/** blog **/
h3.git-commit { h3.git-commit {
margin-bottom: 0.1em; margin-bottom: 0.1em;
padding-bottom: 0.1em; padding-bottom: 0.1em;

28
tools/page-parse 100755
View File

@ -0,0 +1,28 @@
#!/bin/bash
#
# Simple parser for static HTML generation
#
# Copyright (C) 2010 Mike Gerwitz
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.
##
# currently, this only replaces %inc commands with the file contents
gawk '
match( $0, /^ *<!--%inc (.*?) *--> *$/, arr ) {
system( "cat " arr[1] )
next
}
{ print }
'