initial commit

minad · Feb 16, 2010 · f2029a8 · f2029a8
commit f2029a8
Show file tree

Hide file tree

Showing 40 changed files with 7,254 additions and 0 deletions.
diff --git a/Makefile b/Makefile
@@ -0,0 +1,12 @@
+SASS_FILES=$(wildcard ui/*/theme.sass)
+CSS_FILES=$(SASS_FILES:sass=css)
+COMMON_SASS_FILES=$(wildcard ui/common/*.sass)
+
+
+all: $(CSS_FILES)
+
+clean:
+	rm -f $(CSS_FILES)
+
+ui/%/theme.css: ui/%/theme.sass $(COMMON_SASS_FILES)
+	sass -C -t compressed $< > $@
diff --git a/README.md b/README.md
@@ -0,0 +1,40 @@
+S5: A Simple Standards-Based Slide Show System
+==============================================
+
+S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well. The markup used for the slides is very simple, highly semantic, and completely accessible. Anyone with even a smidgen of familiarity with HTML or XHTML can look at the markup and figure out how to adapt it to their particular needs. Anyone familiar with CSS can create their own slide show theme. It's totally simple, and it's totally standards-driven.
+
+The original S5 was developed by [Eric Meyer](http://meyerweb.com/eric/tools/s5/).
+
+S5-suckless
+===========
+
+S5-suckless is a a mostly-S5-compatible implementation which sucks less. It
+is inspired by [s5-reloaded](http://www.netzgesta.de/S5/).
+
+It uses jQuery to handle the javascript peaks and pitfalls. The javascript is therefore
+a lot cleaner and shorter than the original one and at least more maintainable.
+CSS is handled by [SASS](http://sass-lang.com/). The structure of the html files is
+nearly the same as for the original S5. But the organisation of the files has changed a lot.
+There are a lot of shared files in ui/common and the themes consist of only the files "theme.sass", "load.js" and "unload.js".
+
+It also supports live switching of the themes!
+
+Features
+========
+
+* More hackable than original S5
+* Sass is used for css and therefore there is shared css
+* Theme switching
+* Better interface
+* Shared javascript
+* Support for embedded SVG and MathML.
+  This is not possible in original S5 because of the use of innerHTML.
+  jQuery handles this in our case.
+* And most of the original S5 features
+
+License
+=======
+
+All the stuff is in the public domain, but
+jquery is not (MIT license).
+
diff --git a/images/animation01.png b/images/animation01.png
diff --git a/images/animation02.png b/images/animation02.png
diff --git a/images/animation03.png b/images/animation03.png
diff --git a/images/animation04.png b/images/animation04.png
diff --git a/images/animation05.png b/images/animation05.png
diff --git a/index.xhtml b/index.xhtml
@@ -0,0 +1,228 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg-flat.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>S5: An Introduction</title>
+    <!-- metadata -->
+    <meta name="generator" content="S5"/>
+    <meta name="version" content="S5 1.3"/>
+    <meta name="author" content="Daniel Mendler"/>
+    <meta name="company" content="Daniel Mendler"/>
+    <!-- extensions -->
+    <meta name="themes" content="default flower scala advanced nautilus outline template"/>
+    <meta name="transitions" content="yes"/>
+    <!-- embedded styles -->
+    <style type="text/css" media="all">
+      #animation {width: 33%; height: 320px; position: relative;}
+      #animation img {position: absolute; top: 0px; left: 0px;}
+    </style>
+    <!-- scripts -->
+    <script src="ui/common/jquery.js" type="text/javascript"></script>
+    <script src="ui/common/s5.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div class="layout">
+      <div id="header"></div>
+      <div id="footer">
+	<h1>S5 Testbed</h1>
+	<h2>Your computer &#8226; Today's date</h2>
+      </div>
+      <div class="topleft"></div>
+      <div class="topright"></div>
+      <div class="bottomleft"></div>
+      <div class="bottomright"></div>
+    </div>
+    <div class="presentation">
+      <div class="slide">
+        <h1>S5 Testbed</h1>
+        <h3>Daniel Mendler</h3>
+      </div>
+      <div class="slide">
+        <h1>What Is S5?</h1>
+        <ul>
+          <li>It's a <strong>S</strong>imple <strong>S</strong>tandards-based <strong>S</strong>lide <strong>S</strong>how <strong>S</strong>ystem</li>
+          <li>One XHTML document provides all of the slide show's content</li>
+          <li>CSS handles the layout and look of the slides</li>
+          <li>JavaScript handles the dynamic aspects of the show</li>
+          <li>That's all there is to it!  (<a href="#8">skip to summary</a>; demonstrates links internal to the slide show)</li>
+        </ul>
+        <div class="notes">
+          <ul>
+            <li>I have notes here!</li>
+            <li>Keen.</li>
+            <li>Remember to tell people that notes are a new feature in 1.2</li>
+          </ul>
+        </div>
+      </div>
+      <div class="slide">
+        <h1>Operatic Origins</h1>
+        <ul>
+          <li>Opera 4 introduced <a href="http://www.opera.com/support/tutorials/operashow/" rel="external">Opera Show</a>, a projection-mode style sheet technology (link demonstrates external link styling and window spawning)</li>
+          <li>Allows a single XHTML document to be turned into a PowerPoint-like slide show</li>
+          <li>Adding screen and print style sheets allows for multi-medium views of a single document</li>
+          <li>Highly efficient, but highly browser centric...</li>
+        </ul>
+        <div class="notes">
+          <ul>
+            <li>S5 and OperaShow diverged greatly in S5 1.1</li>
+            <li>S5 1.2 should (we hope) bring them into harmony once more</li>
+          </ul>
+        </div>
+      </div>
+      <div class="slide">
+        <h1>Incremental Display</h1>
+        <ul class="incremental show-first">
+          <li>Keep hitting/clicking "next" as long as it isn't the control link (&raquo;)</li>
+          <li>Bullet points are revealed one by one
+<ul class="incremental"><li>All based on class name of <code>inc</code></li><li>Lists can be classed to make items appear individually</li><li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li></ul>
+</li>
+          <li>Let's try it again, but without the first bullet point being pre-highlighted...</li>
+        </ul>
+      </div>
+      <div class="slide">
+        <h1>Incremental Display II</h1>
+        <ul class="incremental fs90">
+          <li>Keep hitting/clicking "next" as long as it isn't the control link (&raquo;)</li>
+          <li>Bullet points are revealed one by one
+<ul><li>All based on class name of <code>incremental</code></li><li>Lists can be classed to make items appear individually</li><li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li></ul>
+</li>
+          <li>Notice how the sub-list was part of the parent bullet point; that was done on purpose</li>
+          <li>Now to move on to other test slides!</li>
+        </ul>
+      </div>
+      <div class="slide">
+        <h1>PNG Alpha Tests</h1>
+        <div style="width: 400px; height: 150px; text-align: center; background: url(ui/common/shade.png)">
+          <p>DIV with PNG background followed by foreground PNG</p>
+          <img class="scale" src="ui/common/shade.png" width="200" height="200" alt="" title="A translucent image"/>
+        </div>
+        <div style="width: 100%; height: 150px; text-align: center; background: url(ui/common/shade.png)">
+          <p>DIV with PNG background followed by foreground PNG</p>
+          <img class="scale" src="ui/common/shade.png" width="200" height="200" alt="" title="A translucent image"/>
+        </div>
+      </div>
+      <div class="slide">
+        <h1>Incremental Animation</h1>
+        <ul>
+          <li>A demonstration of just one of the many ways to accomplish simple animation-like effects <small>(using a diagram from <a href="http://gmpg.org/xfn/and/" rel="external">"XFN and..."</a>)</small></li>
+        </ul>
+        <p id="animation">
+          <img class="scale" src="images/animation01.png" width="270" height="320" alt=""/>
+          <img class="scale incremental" src="images/animation02.png" width="270" height="320" alt=""/>
+          <img class="scale incremental" src="images/animation03.png" width="270" height="320" alt=""/>
+          <img class="scale incremental" src="images/animation04.png" width="270" height="320" alt=""/>
+          <img class="scale incremental" src="images/animation05.png" width="270" height="320" alt=""/>
+        </p>
+      </div>
+      <div class="slide">
+	<h1>Embedded MathML</h1>
+	<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
+	  <mrow>
+	    <mi>x</mi>
+	    <mo>=</mo>
+	    <mfrac>
+	      <mrow>
+		<mo form="prefix">&#x2212;</mo>
+		<mi>b</mi>
+		<mo>&#x00B1;</mo>
+		<msqrt>
+		  <msup>
+		    <mi>b</mi>
+		    <mn>2</mn>
+		  </msup>
+		  <mo>&#x2212;</mo>
+		  <mn>4</mn>
+		  <mo>&#x2062;</mo>
+		  <mi>a</mi>
+		  <mo>&#x2062;</mo>
+		  <mi>c</mi>
+		</msqrt>
+	      </mrow>
+	      <mrow>
+		<mn>2</mn>
+		<mo>&#x2062;</mo>
+		<mi>a</mi>
+	      </mrow>
+	    </mfrac>
+	  </mrow>
+	</math>
+      </div>
+      <div class="slide">
+	<h1>Embedded SVGS</h1>
+	<svg
+	   xmlns='http://www.w3.org/2000/svg'
+	   xml:space='preserve'
+	   xmlns:xlink='http://www.w3.org/1999/xlink'
+	   width='10em'
+	   height='10em'
+	   viewBox='0 0 600 600'>
+	  <title>SVG Icon Full</title>
+	  <desc>Designed for the SVG Logo Contest in 2006 by Harvey Rayner. It is available under the Creative Commons license for those who have an SVG product or who are using SVG on their site.</desc>
+	  <metadata>
+	    <title>Creative Commons License</title>
+	  </metadata>
+	  <defs>
+	    <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="300" y1="600.001" x2="300" y2="0">
+	      <stop offset="0" stop-color="#EDA921"/>
+	      <stop offset="0.501961" stop-color="#EDA921"/>
+	      <stop offset="0.819608" stop-color="#C58B18"/>
+	      <stop offset="1" stop-color="#785206"/>
+	    </linearGradient>
+	    <linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="300.247" y1="585.416" x2="300.247" y2="352.174">
+	      <stop offset="0" stop-color="white"/>
+	      <stop offset="0.458824" stop-color="#EDA921"/>
+	      <stop offset="0.901961" stop-color="black"/>
+	      <stop offset="1" stop-color="black"/>
+	    </linearGradient>
+	    <linearGradient id="id2" gradientUnits="userSpaceOnUse" x1="300" y1="553.421" x2="300" y2="300">
+	      <stop offset="0" stop-color="#FFE4AD"/>
+	      <stop offset="0.0784314" stop-color="#EDA921"/>
+	      <stop offset="0.231373" stop-color="#5E4107"/>
+	      <stop offset="1" stop-color="#2E1F02"/>
+	    </linearGradient>
+	    <linearGradient id="id3" gradientUnits="userSpaceOnUse" x1="300" y1="466.035" x2="300" y2="314.27">
+	      <stop offset="0" stop-color="#C4A058"/>
+	      <stop offset="0.54902" stop-color="#EDA921"/>
+	      <stop offset="1" stop-color="#FFE9BD"/>
+	    </linearGradient>
+	  </defs>
+	  <g>
+	    <rect id="background" fill="url(#id0)" x="0" y="0" width="600" height="600"/>
+	    <g id="node_outline" fill="#000000">
+	      <circle cx="300" cy="300" r="167" />
+	      <circle cx="157.292" cy="157.293" r="83.5969" />
+	      <circle cx="300" cy="98.1819" r="83.5969" />
+	      <circle cx="442.708" cy="157.293" r="83.5969" />
+	      <circle cx="501.819" cy="300" r="83.5954" />
+	      <circle cx="98.1806" cy="300" r="83.5965" />
+	    </g>
+	    <rect id="bottom_grad" fill="url(#id1)" x="39.0699" y="352.175" width="522.353" height="233.242"/>
+	    <g id="connectors" stroke="#ffffff" fill="none" stroke-width="63.9924">
+	      <line x1="300" y1="98.1819" x2="300" y2= "300" />
+	      <line x1="157.292" y1="157.294" x2="300" y2= "300" />
+	      <line x1="442.707" y1="157.293" x2="300" y2= "300" />
+	    </g>
+	    <g id="nodes" fill="#ffffff">
+	      <circle cx="300" cy="98.18" r="45.25" />
+	      <circle cx="442.71" cy="157.29" r="45.25" />
+	      <circle cx="501.82" cy="300" r="45.25" />
+	      <circle cx="98.18" cy="300" r="45.25" />
+	      <circle cx="157.29" cy="157.29" r="45.25" />
+	    </g>
+	    <rect id="svg_textbox_outline" fill="white" x="66.1848" y="268.004" width="467.63" height="317.413"/>
+	    <rect id="svg_textbox_background" fill="url(#id2)" x="98.1806" y="300" width="403.639" height="253.42"/>
+	    <path id="svg_textbox_reflection" fill="url(#id3)" d="M134.812 314.271l330.377 0c12.2989,0 22.3595,10.0619 22.3595,22.3595l0 114.354c-126.726,15.0508 -226.373,-60.325 -358.995,-60.325 -5.39175,0 -10.7563,0.0921263 -16.102,0.250395l0 -54.279c0,-12.2977 10.0619,-22.3595 22.3607,-22.3595z"/>
+	    <path id="svg_text" fill="#ffffff" d="M356.999 333.984l-40.3076 194.65 -33.397 0 -40.3112 -194.65 33.4041 0 23.5997 114.003 23.608 -114.003 33.4041 0zm57.0179 80.6318l57.012 0 0 57.0038 0.00944886 0c0,31.4871 -25.5273,57.0144 -57.0144,57.0144 -31.4824,0 -57.0097,-25.5273 -57.0179,-57.0085l0 -0.00590554 0 -80.6188 -0.00708664 0c0,-31.4836 25.5355,-57.0168 57.0179,-57.0168 31.4836,0 57.012,25.5332 57.012,57.0168l-33.4029 0c0,-13.0335 -10.5685,-23.6056 -23.6091,-23.6056 -13.0323,0 -23.6032,10.5721 -23.6032,23.6056l0 80.6247c0.00354332,13.0288 10.5745,23.5985 23.6032,23.5985 13.0406,0 23.6091,-10.5603 23.6091,-23.5926l0 -0.0118111 0 -23.5973 -23.6091 0 0 -33.4064zm-23.6032 57.0097l0 0zm-244.754 -40.3147c-10.3122,-10.3205 -16.6985,-24.5741 -16.6985,-40.3147 0,-31.4789 25.5344,-57.012 57.0132,-57.012 31.4812,0 57.0085,25.5332 57.0085,57.012l-33.3958 0c0,-13.0441 -10.5745,-23.6151 -23.6127,-23.6151 -13.043,0 -23.6186,10.5709 -23.6186,23.6151 0,6.51617 2.63977,12.4123 6.90593,16.6867l0.01063 0c4.27325,4.27915 10.1776,6.92247 16.702,6.92247l0 0.00472443c15.7383,0 29.9919,6.38625 40.31,16.702l0 0c10.3146,10.3182 16.6985,24.5706 16.6985,40.3135 0,31.4812 -25.5273,57.0085 -57.0085,57.0085 -31.4789,0 -57.0132,-25.5273 -57.0132,-57.0085l33.3946 0c0,13.0382 10.5756,23.6127 23.6186,23.6127 13.0382,0 23.6127,-10.5745 23.6127,-23.6127 0,-6.51735 -2.63859,-12.4123 -6.90475,-16.6879l-0.0165355 0c-4.2697,-4.27679 -10.1717,-6.92365 -16.6914,-6.92365l0 0c-15.743,0 -29.9954,-6.38861 -40.3147,-16.7032l0 0z"/>
+	  </g>
+	</svg>
+      </div>
+      <div class="slide">
+        <h1>In Summary</h1>
+        <ul>
+          <li>With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process</li>
+          <li>The S5 format is OSF 1.0 compatible</li>
+          <li>S5 is a very flexible and lightweight slide show system available for anyone to use</li>
+        </ul>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/ui/.htaccess b/ui/.htaccess
@@ -0,0 +1 @@
+AddType application/xhtml+xml .xhtml
diff --git a/ui/advanced/background.png b/ui/advanced/background.png
diff --git a/ui/advanced/footer.png b/ui/advanced/footer.png
diff --git a/ui/advanced/header.png b/ui/advanced/header.png
diff --git a/ui/advanced/theme.css b/ui/advanced/theme.css
diff --git a/ui/advanced/theme.sass b/ui/advanced/theme.sass
@@ -0,0 +1,44 @@
+@import ../common/common.sass
+
++projection-theme
++link-color(#C93)
+
+body
+  background: #FFF url(background.png) fixed
+  color: #333
+  font-family: Tahoma, Arial, Helvetica, sans-serif
+
+h1, h2, h3, h4, h5, h6
+  text-shadow: 0.1em 0.1em 0.1em #999
+
+.slide
+  padding-top: 4em
+  padding-left: 10%
+  width: 80%
+  height: 75%
+  & > h1
+    position: absolute
+    text-shadow: 0.1em 0.1em 0.1em #333
+    margin-top: -2.25em
+    color: #FFF
+  .current
+    color: #B02
+
+#header
+  background: transparent url(header.png) bottom
+  height: 6em
+
+#footer
+  background: #999 url(footer.png) top
+  color: #FFF
+
+#currentSlide
+  color: #FFF
+
+#slide1 > h1
+  font-size: 2em
+  position: static
+  margin-left: 0
+  margin-top: 1em
+  color: #333
+  text-shadow: 0.1em 0.1em 0.1em #999
diff --git a/ui/common/common.sass b/ui/common/common.sass
@@ -0,0 +1,15 @@
+@import reset.sass
+@import util.sass
+@import controls.sass
+@import layout.sass
+
+=projection-theme
+  +global-reset
+  +slideshow-layout
+  +controls
+  +theme-loaded("Projection")
+
+=outline-theme
+  +outline-layout
+  +controls
+  +theme-loaded("Outline")
diff --git a/ui/common/controls.sass b/ui/common/controls.sass
@@ -0,0 +1,24 @@
+=controls
+  #controls
+    position: fixed
+    right: 0
+    bottom: 0
+    z-index: 100
+    width: 100%
+    a
+      margin-right: 3pt
+      font-size: 14pt
+      color: #FFF
+      text-decoration: none
+    select
+      margin-right: 3pt
+      font-size: 10pt
+      background: #FFF
+      color: #333
+  #controlsContainer
+    margin: 0 auto
+    padding: 2pt
+  #controlsBar
+    background: url(../common/shade.png) transparent repeat
+    width: 100%
+    text-align: center