Permalink
Browse files

Add support for tabbed help.

  • Loading branch information...
1 parent 3d5579d commit 2e96e100856619f472ef982796f2356b5192590e @fatlotus fatlotus committed Jul 13, 2012
Showing with 94 additions and 49 deletions.
  1. +21 −20 index.php
  2. +69 −26 parameters.yaml
  3. +4 −3 styles.css
View
@@ -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.";
@@ -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">
@@ -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>
View
@@ -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
View
@@ -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;}
@@ -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;}

0 comments on commit 2e96e10

Please sign in to comment.