Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
Checking mergeability… Don’t worry, you can still create the pull request.
  • 4 commits
  • 17 files changed
  • 0 commit comments
  • 1 contributor
View
1 .gitignore
@@ -0,0 +1 @@
+.sass-cache
View
7 README.md
@@ -1,3 +1,8 @@
# stack.js
-A presentation library with intuitive, scroll-based navigation.
+A presentation library with intuitive, scroll-based navigation (by [Mike Bostock](http://bost.ocks.org/mike/)).
+
+## Mod
+
+- using haml and sass
+- controller.rb for export with [stasis](http://stasis.me) (see `public` directory for exported files)
View
15 controller.rb
@@ -0,0 +1,15 @@
+require 'haml'
+require 'sass'
+
+ignore '.DS_Store'
+ignore 'LICENSE'
+ignore 'README.md'
+ignore '.git/'
+ignore '.gitignore'
+
+ignore 'partials/.DS_Store'
+ignore 'partials/.DS_Store'
+ignore 'partials/_body.haml'
+ignore 'partials/_head.haml'
+ignore 'partials/_scripts.haml'
+
View
7 index.html.haml
@@ -0,0 +1,7 @@
+!!! 5
+%html
+
+ = render 'partials/_head.haml'
+ %body
+ = render 'partials/_body.haml'
+ = render 'partials/_scripts.haml'
View
89 partials/_body.haml
@@ -0,0 +1,89 @@
+
+%section
+ %h1
+ %a{ :href => "https://github.com/mbostock/stack" } stack.js
+
+ %p A presentation library with intuitive, scroll-based navigation.
+
+ %p.bottom
+ Built with
+ %a{ :href => "http://mbostock.github.com/d3/" } d3.js
+
+%section
+ %h1 Crossfades
+ %p Sneak a peek at the next slide by scrolling down and back.
+
+%section
+ %h1.bottom PEEK-A-BO! I see you!
+
+%section.beach
+ %h1.bottom.white Variable-width Slides
+
+%section
+ %h1
+ Scroll-Happy
+ %p
+ Scroll many slides at once with a flick of the wrist.
+ %br Or, grab the scrollbar on the slide and jump around.
+
+%section.big
+ %h1 9
+
+%section.big
+ %h1 8
+
+%section.big
+ %h1 7
+
+%section.big
+ %h1 6
+
+%section.big
+ %h1 5
+
+%section.big
+ %h1 4
+
+%section.big
+ %h1 3
+
+%section.big
+ %h1 2
+
+%section.big
+ %h1 1
+
+
+%section
+ %h1 Snap-to Scrolling
+
+ %p If you stop between slides, the stack will drift to the closest slide.
+
+%section
+ %h1 Edge Detection
+
+ %p
+ If you scroll up, the previous slide is immediately visible.
+ %br If you scroll down, the next slide is immediately visible.
+ %p
+ (This would be more robust if WebKit supported touch events!)
+
+%section
+ %h1 Keyboard Shortcuts
+
+ %p
+ up / down / left / right
+ %br page up / page down
+ %br home / end
+ %br space / shift-space
+
+ %p Press up or down multiple times, and it does the right thing!
+
+%section
+ %h1 More Features! [to-do]
+
+ %p
+ Zoom-out overview?
+ %br Anchor fragments.
+ %br Auto-loading iframes for resource-expensive slides.
+ %br iOS & non-WebKit browser testing.
View
5 partials/_head.haml
@@ -0,0 +1,5 @@
+%head
+ %meta{ :charset => "utf-8" }/
+ %title Title
+ %link{ :rel => "stylesheet", :href => "stack.css", :type => "text/css" }/
+ %link{ :rel => "stylesheet", :href => "styles.css", :type => "text/css" }/
View
2 partials/_scripts.haml
@@ -0,0 +1,2 @@
+%script{ :src => "d3.v2.js" }
+%script{ :src => "stack.v0.js" }
View
BIN public/beach.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
9,382 public/d3.v2.js
9,382 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
0 index.html → public/example.html
File renamed without changes.
View
102 public/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset='utf-8' />
+ <title>Title</title>
+ <link href='stack.css' rel='stylesheet' type='text/css' />
+ <link href='styles.css' rel='stylesheet' type='text/css' />
+ </head>
+ <body>
+ <section>
+ <h1>
+ <a href='https://github.com/mbostock/stack'>stack.js</a>
+ </h1>
+ <p>A presentation library with intuitive, scroll-based navigation.</p>
+ <p class='bottom'>
+ Built with
+ <a href='http://mbostock.github.com/d3/'>d3.js</a>
+ </p>
+</section>
+<section>
+ <h1>Crossfades</h1>
+ <p>Sneak a peek at the next slide by scrolling down and back.</p>
+</section>
+<section>
+ <h1 class='bottom'>PEEK-A-BO! I see you!</h1>
+</section>
+<section class='beach'>
+ <h1 class='bottom white'>Variable-width Slides</h1>
+</section>
+<section>
+ <h1>
+ Scroll-Happy
+ </h1>
+ <p>
+ Scroll many slides at once with a flick of the wrist.
+ <br>Or, grab the scrollbar on the slide and jump around.</br>
+ </p>
+</section>
+<section class='big'>
+ <h1>9</h1>
+</section>
+<section class='big'>
+ <h1>8</h1>
+</section>
+<section class='big'>
+ <h1>7</h1>
+</section>
+<section class='big'>
+ <h1>6</h1>
+</section>
+<section class='big'>
+ <h1>5</h1>
+</section>
+<section class='big'>
+ <h1>4</h1>
+</section>
+<section class='big'>
+ <h1>3</h1>
+</section>
+<section class='big'>
+ <h1>2</h1>
+</section>
+<section class='big'>
+ <h1>1</h1>
+</section>
+<section>
+ <h1>Snap-to Scrolling</h1>
+ <p>If you stop between slides, the stack will drift to the closest slide.</p>
+</section>
+<section>
+ <h1>Edge Detection</h1>
+ <p>
+ If you scroll up, the previous slide is immediately visible.
+ <br>If you scroll down, the next slide is immediately visible.</br>
+ </p>
+ <p>
+ (This would be more robust if WebKit supported touch events!)
+ </p>
+</section>
+<section>
+ <h1>Keyboard Shortcuts</h1>
+ <p>
+ up / down / left / right
+ <br>page up / page down</br>
+ <br>home / end</br>
+ <br>space / shift-space</br>
+ </p>
+ <p>Press up or down multiple times, and it does the right thing!</p>
+</section>
+<section>
+ <h1>More Features! [to-do]</h1>
+ <p>
+ Zoom-out overview?
+ <br>Anchor fragments.</br>
+ <br>Auto-loading iframes for resource-expensive slides.</br>
+ <br>iOS & non-WebKit browser testing.</br>
+ </p>
+</section>
+ </body>
+ <script src='d3.v2.js'></script>
+ <script src='stack.v0.js'></script>
+</html>
View
47 public/stack.css
@@ -0,0 +1,47 @@
+body {
+ background: #929292;
+ font-family: "Helvetica Neue";
+ margin: auto;
+ width: 1280px; }
+
+a {
+ color: steelblue; }
+
+a:not(:hover) {
+ text-decoration: none; }
+
+.stack {
+ background: white;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+ display: none;
+ font-size: 36px;
+ height: 640px;
+ line-height: 1.5em;
+ margin-bottom: 40px;
+ padding: 40px;
+ width: 1200px;
+ -webkit-transform: translate3d(0, 0, 0); }
+
+.active {
+ display: block;
+ position: fixed; }
+
+h1 {
+ font-size: 72px;
+ margin-top: 0; }
+
+.big h1 {
+ text-align: center;
+ margin-top: 300px;
+ font-size: 256px; }
+
+.bottom {
+ position: absolute;
+ bottom: 0; }
+
+@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-width: 768px) and (max-device-width: 1024px), screen and (max-device-width: 480px) {
+ body {
+ margin: 40px auto 40px auto; }
+
+ .stack {
+ display: block; } }
View
169 public/stack.v0.js
@@ -0,0 +1,169 @@
+var stack = (function() {
+ var stack = {},
+ section = d3.selectAll("section"),
+ self = d3.select(window),
+ body = document.body,
+ root = body,
+ timeout,
+ duration = 750,
+ screenX,
+ screenY,
+ size,
+ yActual,
+ yFloor,
+ yTarget,
+ yMax,
+ yOffset,
+ n = section[0].length;
+
+ // Detect whether to scroll with documentElement or body.
+ body.style.height = window.innerHeight + 1 + "px";
+ body.scrollTop = 1;
+ if (!body.scrollTop) root = document.documentElement;
+ else body.scrollTop = 0;
+ body.style.height = "auto";
+
+ // Invert the z-index so the earliest slides are on top.
+ section.classed("stack", true).style("z-index", function(d, i) { return n - i; });
+
+ // Detect the slide height (by showing an active slide).
+ section.classed("active", true);
+ size = section.node().getBoundingClientRect().height;
+ section.classed("active", false);
+
+ // Sets the stack position.
+ stack.position = function(y1) {
+ var y0 = root.scrollTop / size;
+ if (arguments.length < 1) return y0;
+
+ // clamp and round
+ if (y1 >= n) y1 = n - 1;
+ else if (y1 < 0) y1 = Math.max(0, n + y1);
+ y1 = Math.floor(y1);
+
+ if (y0 - y1) {
+ self.on("scroll.stack", null);
+ leap(y1);
+ d3.select(root).transition()
+ .duration(duration)
+ .tween("scrollTop", tween(yTarget = y1))
+ .each("end", function() { yTarget = null; self.on("scroll.stack", scroll); });
+ }
+
+ return stack;
+ };
+
+ // Don't do anything fancy for iOS.
+ if (section.style("display") == "block") return;
+
+ self
+ .on("keydown.stack", keydown)
+ .on("resize.stack", resize)
+ .on("scroll.stack", scroll)
+ .on("mousemove.stack", snap);
+
+ resize();
+ scroll();
+
+ // if scrolling up, jump to edge of previous slide
+ function leap(yNew) {
+ if ((yActual == yFloor) && (yNew < yActual)) {
+ yFloor--;
+ yActual -= .5 - yOffset / size / 2;
+ root.scrollTop = yActual * size;
+ return true;
+ }
+ }
+
+ function resize() {
+ yOffset = (window.innerHeight - size) / 2;
+ yMax = 1 + yOffset / size;
+
+ d3.select("body")
+ .style("margin-top", yOffset + "px")
+ .style("margin-bottom", yOffset + "px")
+ .style("height", (n - .5) * size + yOffset + "px");
+ }
+
+ function keydown() {
+ var delta;
+ switch (d3.event.keyCode) {
+ case 39: // right arrow
+ if (d3.event.metaKey) return;
+ case 40: // down arrow
+ case 34: // page down
+ delta = d3.event.metaKey ? Infinity : 1; break;
+ case 37: // left arrow
+ if (d3.event.metaKey) return;
+ case 38: // up arrow
+ case 33: // page up
+ delta = d3.event.metaKey ? -Infinity : -1; break;
+ case 32: // space
+ delta = d3.event.shiftKey ? -1 : 1;
+ break;
+ default: return;
+ }
+ if (timeout) timeout = clearTimeout(timeout);
+ if (yTarget == null) yTarget = (delta > 0 ? Math.floor : Math.ceil)(yActual == yFloor ? yFloor : yActual + (.5 - yOffset / size / 2));
+ stack.position(yTarget = Math.max(0, Math.min(n - 1, yTarget + delta)));
+ d3.event.preventDefault();
+ }
+
+ function scroll() {
+ var yNew = Math.max(0, root.scrollTop / size);
+ if (yNew >= n - 1.51 + yOffset / size) yNew = n - 1;
+
+ // if scrolling up, jump to edge of previous slide
+ if (leap(yNew)) return;
+
+ yActual = yNew;
+ yFloor = Math.max(0, Math.floor(yActual));
+ var yError = Math.min(yMax, (yActual % 1) * 2);
+
+ section
+ .classed("active", false);
+
+ d3.select(section[0][yFloor])
+ .style("-webkit-transform", yError ? "translate3d(0," + (-yError * size) + "px,0)" : null)
+ .style("-o-transform", yError ? "translate(0," + (-yError * size) + "px)" : null)
+ .style("-moz-transform", yError ? "translate(0," + (-yError * size) + "px)" : null)
+ .style("transform", yError ? "translate(0," + (-yError * size) + "px)" : null)
+ .classed("active", yError != yMax);
+
+ d3.select(section[0][yFloor + 1])
+ .style("-webkit-transform", yError ? "translate3d(0,0,0)" : null)
+ .style("-o-transform", yError ? "translate(0,0)" : null)
+ .style("-moz-transform", yError ? "translate(0,0)" : null)
+ .style("transform", yError ? "translate(0,0)" : null)
+ .classed("active", yError > 0);
+ }
+
+ function snap() {
+ var x = d3.event.screenX, y = d3.event.screenY;
+ if (x === screenX && y === screenY) return; // ignore move on scroll
+ screenX = x, screenY = y;
+
+ if (yTarget != null) return; // don't snap if already snapping
+
+ var y0 = stack.position(),
+ y1 = Math.max(0, Math.round(y0 + .25));
+
+ // if we're before the first slide, or after the last slide, do nothing
+ if (y0 <= 0 || y0 >= n - 1.51 + yOffset / size) return;
+
+ // if the previous slide is not visible, immediate jump
+ if (y1 > y0 && y1 - y0 < .5 - yOffset / size) root.scrollTop = y1 * size;
+
+ // else transition
+ else stack.position(y1);
+ }
+
+ function tween(y) {
+ return function() {
+ var i = d3.interpolateNumber(this.scrollTop, y * size);
+ return function(t) { this.scrollTop = i(t); scroll(); };
+ };
+ }
+
+ return stack;
+})();
View
9 public/styles.css
@@ -0,0 +1,9 @@
+.beach {
+ background: url(beach.jpg);
+ margin-left: 128px;
+ width: 944px; }
+
+.white {
+ position: absolute;
+ bottom: 0;
+ color: white; }
View
57 stack.css
@@ -1,57 +0,0 @@
-body {
- background: #929292;
- font-family: "Helvetica Neue";
- margin: auto;
- width: 1280px;
-}
-
-a {
- color: steelblue;
-}
-
-a:not(:hover) {
- text-decoration: none;
-}
-
-.stack {
- background: #fff;
- box-shadow: 0px 4px 8px rgba(0,0,0,.5);
- display: none;
- font-size: 36px;
- height: 640px;
- line-height: 1.5em;
- margin-bottom: 40px;
- padding: 40px;
- width: 1200px;
- -webkit-transform: translate3d(0,0,0);
-}
-
-.active {
- display: block;
- position: fixed;
-}
-
-
-h1 {
- font-size: 72px;
- margin-top: 0;
-}
-
-.big h1 {
- text-align: center;
- margin-top: 300px;
- font-size: 256px;
-}
-
-@media
-screen and (-webkit-min-device-pixel-ratio: 2),
-screen and (min-device-width: 768px) and (max-device-width: 1024px),
-screen and (max-device-width: 480px) {
- body {
- margin: 40px auto 40px auto;
- }
-
- .stack {
- display: block;
- }
-}
View
48 stack.css.sass
@@ -0,0 +1,48 @@
+body
+ background: #929292
+ font-family: "Helvetica Neue"
+ margin: auto
+ width: 1280px
+
+a
+ color: steelblue
+
+a:not(:hover)
+ text-decoration: none
+
+.stack
+ background: #fff
+ box-shadow: 0px 4px 8px rgba(0,0,0,.5)
+ display: none
+ font-size: 36px
+ height: 640px
+ line-height: 1.5em
+ margin-bottom: 40px
+ padding: 40px
+ width: 1200px
+ -webkit-transform: translate3d(0,0,0)
+
+.active
+ display: block
+ position: fixed
+
+h1
+ font-size: 72px
+ margin-top: 0
+
+.big h1
+ text-align: center
+ margin-top: 300px
+ font-size: 256px
+
+.bottom
+ position: absolute
+ bottom: 0
+
+@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-width: 768px) and (max-device-width: 1024px), screen and (max-device-width: 480px)
+ body
+ margin: 40px auto 40px auto
+
+ .stack
+ display: block
+
View
11 styles.css.sass
@@ -0,0 +1,11 @@
+styles.css.sass
+
+.beach
+ background: url(beach.jpg)
+ margin-left: 128px
+ width: 944px
+
+.white
+ position: absolute
+ bottom: 0
+ color: white

No commit comments for this range

Something went wrong with that request. Please try again.