"Try it now"

[Adam D. Ruppe]

Andrei Alexandrescu wrote:
> To take this to pro level:
> * Button shold be on the same like as "Example:" and spell "Try
> now". Maybe a more attractive shape/icon could help too.
> * Once pressed, the subsequent edit should contain a "Cancel" that
> undoes the action.
> * The compilation/running results should come in a nice inline
> variable-height stdout after the edit window


Got partially there. Can't spend too much time on this right now,
got some work projects that need to be finished by friday. I'm
pretty sure I can finish them in a day if I have to... but I don't
want to have to.

Anyway take a look. This is where I'll leave it until the weekend:

http://arsdnet.net/d-web-site/std_algorithm2.html


Changes:
* added some border-radius to the buttons. (this is actually
  controlled in css - button.try-now {}
* Changed the text.
* Added cancel button.
* Added boilerplate code if it can't find "int main" or "void main".
  As a result, several of the examples on that page actually compile
  and run.
* Since most of them don't actually output anything, the program
  now detects output.length == 0 and says "Program run
  successfully." upon completion to give some feedback.
* The output goes into an iframe above the code editor, black on
  green. The background is changed in css (iframe.try-now) and the
  foreground is changed in the javascript (due to how iframes work,
  it sends some desired style to the other server which spits it
  back out.)
* Error messages are modified before being shown to the user so
  the filename is pretty (always "code.d" instead of sha1hash.d)
  and the line numbers match up, even if I add boilerplate.
* Included in the boilerplate are:

import std.stdio;     import std.string;  import std.conv;
import std.algorithm; import std.range;   import std.array

FIXME: it should import the module you're actually looking at
too!



As a side note, the compile is a little slow. It caches results
based on the code's hash so common examples should be fast, but
if you change things, it will take a few seconds. This is by
design - that VM's resources are limited on several levels to
avoid a naughty program from getting out of control. Alas, to
be conservative, it has to assume dmd is potentially naughty too.
dmd gets a little more resources than the programs it generates, but
not much. Hence, it's a little slow.

But I don't think its too bad.



Not done: variable height window. The iframe is always a given
height. I actually think this works pretty well, but if you
strongly disagree I can do some scripts to see about sizing it
to it's contents, to a certain degree.


> * Syntax highlighting in the editor :o)

I'm afraid I'll have to say no here... that's a pretty enormous
effort to get working well, and I hate javascript too much to
spend that kind of time with it. Of course, if someone else
has done it, I'm not above a little copy/paste action.



If you want to try this on your private copy of the docs, it should
be as simple as adding:

<script src="http://arsdnet.net/d-web-site/editable_code.js"></script>

somewhere in the file. Here's the CSS additions in my copy if
you want them too:

button.try-now {
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	border: solid 1px #333;
	float: left;
	margin-right: 0.4em;
}

iframe.try-now {
	display: block;
	width: 100%;
	background-color: black;
}