Began moving examples from trybox to index page
Mike Gerwitz
parent
d86f5f8d7f
commit
d7156405c1
3
Makefile
3
Makefile
|
|
@ -34,7 +34,8 @@ $(outdir)/%.html: %.html $(header) $(footer) | $(outdir)
|
|||
cat $(header) \
|
||||
| sed 's/\(<body\)/\1 class="$*"/' \
|
||||
| cat - $< $(footer) \
|
||||
| sed 's/^ \+//' \
|
||||
| sed 's/^ \+//;s/^ *#//;' \
|
||||
| tools/page-parse \
|
||||
> $@
|
||||
|
||||
# requires git-weblog from mikegerwitz's git-supp package
|
||||
|
|
|
|||
|
|
@ -4,7 +4,11 @@
|
|||
Object-Oriented languages. Features include:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<div class="ex excode">
|
||||
<!--%inc scripts/ex/class.js -->
|
||||
</div>
|
||||
|
||||
<ul class="features">
|
||||
<li>Simple and intuitive class definitions</li>
|
||||
<li>Classical inheritance</li>
|
||||
<li>Abstract classes and methods</li>
|
||||
|
|
@ -13,7 +17,7 @@
|
|||
<li>Static and constant members</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<p class="info">
|
||||
ease.js is a framework, not a compiler. It may be used wherever
|
||||
JavaScript may be used, including with other compilers/parsers. ease.js
|
||||
also provides support for older, pre-ES5 environments by gracefully
|
||||
|
|
|
|||
|
|
@ -26,4 +26,3 @@ Dog( 'Fluffy' ).bark();
|
|||
// alternatively, we can use the 'new' keyword
|
||||
var inst = new Dog( 'Bob' );
|
||||
inst.bark();
|
||||
|
||||
|
|
|
|||
|
|
@ -25,89 +25,28 @@
|
|||
|
||||
$( document ).ready( function()
|
||||
{
|
||||
appendTry();
|
||||
var $ex = $( '.ex' ),
|
||||
content = $ex.text().replace( /^ *\n/, '' ),
|
||||
$txt;
|
||||
|
||||
if ( document.location.href.substr( -6 ) === '#tryit' )
|
||||
{
|
||||
console.log( 'ok' );
|
||||
toggleTry();
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
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 )
|
||||
$ex.text( '' )
|
||||
.removeClass( 'excode' )
|
||||
.append( $txt = $( '<textarea>' )
|
||||
.addClass( 'excode' )
|
||||
.text( content )
|
||||
)
|
||||
.append( $( '<div>' )
|
||||
.addClass( 'btns' )
|
||||
.append( $( '<div>' )
|
||||
.attr( 'id', 'trybtns' )
|
||||
.append( $( '<div>' )
|
||||
.attr( 'id', 'run' )
|
||||
.text( 'Run' )
|
||||
.addClass( 'btn med green' )
|
||||
.click( function()
|
||||
{
|
||||
runScript( $txt.val() );
|
||||
} )
|
||||
)
|
||||
.text( 'try it' )
|
||||
.addClass( 'btn go' )
|
||||
.click( function()
|
||||
{
|
||||
runScript( $txt.val() );
|
||||
} )
|
||||
)
|
||||
.prependTo( '#content' );
|
||||
} )();
|
||||
}
|
||||
);
|
||||
} );
|
||||
|
||||
|
||||
function runScript( script )
|
||||
|
|
|
|||
140
style.css
140
style.css
|
|
@ -81,6 +81,8 @@ html, body {
|
|||
border: 2px solid #babdb6;
|
||||
border-top: 0px;
|
||||
border-bottom-width: 4px;
|
||||
border-radius: 0px 0px 0.5em 0.5em;
|
||||
-moz-border-radius: 0px 0px 0.5em 0.5em;
|
||||
|
||||
margin: 0px auto;
|
||||
padding: 0.5em 1em 1em 1em;
|
||||
|
|
@ -151,15 +153,6 @@ p.copyright a, p.copyright a:link {
|
|||
color: #2e3436;
|
||||
}
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
-webkit-box-shadow: 0 0 0px #ffffff;
|
||||
}
|
||||
100% {
|
||||
-webkit-box-shadow: 0 0 5px #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
|
||||
|
|
@ -168,6 +161,7 @@ p.copyright a, p.copyright a:link {
|
|||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-shadow: black 1px 1px 1px;
|
||||
|
||||
padding: 0.25em 0.5em;
|
||||
|
||||
|
|
@ -189,7 +183,7 @@ p.copyright a, p.copyright a:link {
|
|||
);
|
||||
}
|
||||
|
||||
.btn.green {
|
||||
.btn.go {
|
||||
border: 1px solid #4e9a06;
|
||||
|
||||
background-image: -webkit-gradient(
|
||||
|
|
@ -220,72 +214,6 @@ p.copyright a, p.copyright a:link {
|
|||
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 {
|
||||
width: 99%;
|
||||
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 {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
|
|
@ -316,6 +300,8 @@ span.release-current .version {
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/** blog **/
|
||||
h3.git-commit {
|
||||
margin-bottom: 0.1em;
|
||||
padding-bottom: 0.1em;
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
'
|
||||
Loading…
Reference in New Issue