Skip to content

Commit

Permalink
Add support for tabbed help.
Browse files Browse the repository at this point in the history
  • Loading branch information
@fatlotus
fatlotus committed Jul 13, 2012
1 parent 3d5579d commit 2e96e10
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 49 deletions.
41 changes: 21 additions & 20 deletions index.php
View file
@@ -1,12 +1,16 @@
<?php

require_once('lib/spyc.php');
require_once('lib/markdown.php');

$configuration = Spyc::YAMLLoad('parameters.yaml');

$parameters = $configuration['parameters'];
$measurements = $configuration['measurements'];
$initial_help = $configuration['initial_help'];

$basic_help = $configuration['basic_help'];
$intermediate_help = $configuration['intermediate_help'];
$advanced_help = $configuration['advanced_help'];

$missing_parameter = "Missing \"%s\" attribute on configuration element.";
Expand Down Expand Up @@ -250,6 +254,13 @@ function format_for_web($text) {
return preg_replace('/^\(([^)]+)\)/', '<sup>$1</sup>',
preg_replace('/_\(([^)]+)\)/', '<sub>$1</sub>', htmlentities($text)));
}

function markdownify($text) {
$formatted = str_replace("\n", "\n\n", $text);

return Markdown($formatted);
}

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Expand Down Expand Up @@ -434,26 +445,16 @@ function format_for_web($text) {
<div id='overlay'>
<div class='slug'></div>
<div class='article' id='advanced-help'>
<?php
$paragraphs = explode("\n", $advanced_help);

foreach ($paragraphs as $paragraph) {
$paragraph = htmlentities($paragraph);

if (preg_match('/^##### (.*)/', $paragraph, $matches))
echo " <h5>{$matches[1]}</h5>\n";
else if (preg_match('/^#### (.*)/', $paragraph, $matches))
echo " <h4>{$matches[1]}</h4>\n";
else if (preg_match('/^### (.*)/', $paragraph, $matches))
echo " <h3>{$matches[1]}</h3>\n";
else if (preg_match('/^## (.*)/', $paragraph, $matches))
echo " <h2>{$matches[1]}</h2>\n";
else if (preg_match('/^# (.*)/', $paragraph, $matches))
echo " <h1>{$matches[1]}</h1>\n";
else
echo " <p>$paragraph</p>\n";
}
?>
<div class='tabs'>
<a href='' class='selected' id='link-to-help-basic'>Basic</a>
<a href='' id='link-to-help-intermediate'>Intermediate</a>
<a href='' id='link-to-help-advanced'>Advanced</a>
</div>

<div id='help-basic' class='tab selected'><?php echo markdownify($basic_help); ?></div>
<div id='help-intermediate' class='tab notselected'><?php echo markdownify("$intermediate_help"); ?></div>
<div id='help-advanced' class='tab notselected'><?php echo markdownify("$advanced_help"); ?></div>

<a href='' id='hide-help'>Hide</a>
</div>
</div>
Expand Down
95 changes: 69 additions & 26 deletions parameters.yaml
View file
Expand Up @@ -31,42 +31,85 @@ initial_help: >
We are continually working to improve the model and the interface. If
you have suggestions, you can contact as at [email].
basic_help: >
## WebDICE Documentation [Small Version]
This block of text is primarily to explain the rationale behind all
the various parameters in WebDICE as well as explain more about the
internal processes of the model.
Here is the quadratic formula:
<p>$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$</p>
<!-- The <p></p> tags are necessary for Markdown -->
And here is the equation for the identity matrix:
<p>$$I_{x,y} = \delta_{xy}$$</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
intermediate_help: >
## WebDICE Documentation [Medium Version]
This block of text is primarily to explain the rationale behind all
the various parameters in WebDICE as well as explain more about the
internal processes of the model.
Here is the quadratic formula:
<p>$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$</p>
<!-- The <p></p> tags are necessary for Markdown -->
And here is the equation for the identity matrix:
<p>$$I_{x,y} = \delta_{xy}$$</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
advanced_help: >
## WebDICE Documentation
## WebDICE Documentation [Large Version]
This block of text is primarily to explain the rationale behind all
the various parameters in WebDICE as well as explain more about the
internal processes of the model.
Here is the quadratic formula:
\[
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\]
And here is the equation for the identity matrix: $$I_{x,y} = \delta_{xy}$$
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
# A Tower of Many Headings
Some text.
## A Tower of Many Headings
Some text.
### A Tower of Many Headings
Some text.
#### A Tower of Many Headings
Some text.
<p>$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$</p>
<!-- The <p></p> tags are necessary for Markdown -->
##### A Tower of Many Headings
And here is the equation for the identity matrix:
Some text.
<p>$$I_{x,y} = \delta_{xy}$$</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
Expand Down
7 changes: 4 additions & 3 deletions styles.css
View file
Expand Up @@ -65,11 +65,10 @@
#graph-controls label{padding:0.5em 1em;font-size:0.9em;}
#graph-controls div.short{width:7.5em;}
#graph-controls .short input,#graph-controls .short select{width:7.5em;}

#overlay{opacity:0;display:none;}
#overlay .slug{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000;}
#overlay .slug{opacity:0.5;z-index:1000;}
#overlay .article{padding:1em 3em;width:40em;margin:0 auto;position:absolute;overflow:auto;}
#overlay .article{padding:3em;width:40em;margin:0 auto;position:absolute;overflow:auto;}
#overlay .article{top:200px;left:0;right:0;bottom:0;border-left:1px solid #999;border-right:1px solid #999;}
#overlay .article{background-color:#fff;font:0.9em/1.7em Helvetica,sans-serif;z-index:2000;}
#overlay .article h1{font:1.5em/2.5em Helvetica,sans-serif;}
Expand All @@ -78,7 +77,9 @@
#overlay .article h4{font:bold 0.9em/2.5em Helvetica,sans-serif;color:#333;}
#overlay .article h5{font:bold 0.8em/2.5em Helvetica,sans-serif;color:#333;}
#overlay .article p{margin-bottom:1em;}
#hide-help{position:absolute;top:1em;right:1em;color:#222;font:0.9em Helvetica,sans-serif;}
#overlay .tabs{background-color:#eee;margin-left:1px;}
#overlay .tabs .selected{background-color:#fff;}
#hide-help{position:absolute;top:0.5em;right:1.5em;color:#222;font:0.9em Helvetica,sans-serif;}
#MathJax_Message{display:none !important;}

.tabs{height:2.4em;font:0.8em/1em Helvetica,sans-serif;position:absolute;top:0;left:0;right:0;}
Expand Down

0 comments on commit 2e96e10

Please sign in to comment.