Skip to content

Instantly share code, notes, and snippets.

@tonyfast

tonyfast/index.html

Created February 23, 2015 20:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tonyfast/8d96c3c0065f97e3496a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tonyfast/8d96c3c0065f97e3496a to your computer and use it in GitHub Desktop.
Download ZIP
interface
Raw
index.html
<head>
<script src="//cdn.jsdelivr.net/g/d3js,riot@2.0(riot.min.js+compiler.min.js),coffeescript,skrollr">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.2.6/js-yaml.min.js"></script>
<style>
@import "http://bootswatch.com/superhero/bootstrap.min.css";
</style>
<!--
Skrollable uses regular expressions to interpolate animations
-->
</head>
<script id="manifest" type="text/yaml">
- heading: An Objective Approach to Data Driven Web Development
tagline: Article Metadata with Authors, Title, and Abstract
content: >
Eu sed molestie signiferumque, quo ei odio deleniti adolescens, eu eligendi mnesarchum est. Vide homero putant id vis, his te nihil suavitate. Cum an maiorum iudicabit imperdiet, saepe indoctum sea ne. Et nonumes sensibus eum, mel habeo everti in. Ea audire prompta fabellas per. An ornatus scaevola patrioque sit, his ullum suscipiantur id.
- sections:
- heading: Further on
id: section-1
tagline: A short blurb
content: >
Eu sed molestie signiferumque, quo ei odio deleniti adolescens, eu eligendi mnesarchum est. Vide homero putant id vis, his te nihil suavitate. Cum an maiorum iudicabit imperdiet, saepe indoctum sea ne. Et nonumes sensibus eum, mel habeo everti in. Ea audire prompta fabellas per. An ornatus scaevola patrioque sit, his ullum suscipiantur id.
Est dolore offendit qualisque te, vivendo officiis iudicabit usu et, ex munere partem propriae nec. Ad duo movet mundi. Pri mucius noluisse mediocritatem id. No tincidunt voluptatum est, suas euripidis est an. Ex malis tritani dissentias pri, integre mentitum prodesset an his.
- heading: Lastly
id: section-2
tagline: It is what it is
content: >
Eu sed molestie signiferumque, quo ei odio deleniti adolescens, eu eligendi mnesarchum est. Vide homero putant id vis, his te nihil suavitate. Cum an maiorum iudicabit imperdiet, saepe indoctum sea ne. Et nonumes sensibus eum, mel habeo everti in. Ea audire prompta fabellas per. An ornatus scaevola patrioque sit, his ullum suscipiantur id.
Est dolore offendit qualisque te, vivendo officiis iudicabit usu et, ex munere partem propriae nec. Ad duo movet mundi. Pri mucius noluisse mediocritatem id. No tincidunt voluptatum est, suas euripidis est an. Ex malis tritani dissentias pri, integre mentitum prodesset an his.
- heading: The Third Section
tagline: It is what it is
id: section-3
content: >
Eu sed molestie signiferumque, quo ei odio deleniti adolescens, eu eligendi mnesarchum est. Vide homero putant id vis, his te nihil suavitate. Cum an maiorum iudicabit imperdiet, saepe indoctum sea ne. Et nonumes sensibus eum, mel habeo everti in. Ea audire prompta fabellas per. An ornatus scaevola patrioque sit, his ullum suscipiantur id.
Est dolore offendit qualisque te, vivendo officiis iudicabit usu et, ex munere partem propriae nec. Ad duo movet mundi. Pri mucius noluisse mediocritatem id. No tincidunt voluptatum est, suas euripidis est an. Ex malis tritani dissentias pri, integre mentitum prodesset an his.
Eu sed molestie signiferumque, quo ei odio deleniti adolescens, eu eligendi mnesarchum est. Vide homero putant id vis, his te nihil suavitate. Cum an maiorum iudicabit imperdiet, saepe indoctum sea ne. Et nonumes sensibus eum, mel habeo everti in. Ea audire prompta fabellas per. An ornatus scaevola patrioque sit, his ullum suscipiantur id.
Est dolore offendit qualisque te, vivendo officiis iudicabit usu et, ex munere partem propriae nec. Ad duo movet mundi. Pri mucius noluisse mediocritatem id. No tincidunt voluptatum est, suas euripidis est an. Ex malis tritani dissentias pri, integre mentitum prodesset an his.
Eu sed molestie signiferumque, quo ei odio deleniti adolescens, eu eligendi mnesarchum est. Vide homero putant id vis, his te nihil suavitate. Cum an maiorum iudicabit imperdiet, saepe indoctum sea ne. Et nonumes sensibus eum, mel habeo everti in. Ea audire prompta fabellas per. An ornatus scaevola patrioque sit, his ullum suscipiantur id.
Est dolore offendit qualisque te, vivendo officiis iudicabit usu et, ex munere partem propriae nec. Ad duo movet mundi. Pri mucius noluisse mediocritatem id. No tincidunt voluptatum est, suas euripidis est an. Ex malis tritani dissentias pri, integre mentitum prodesset an his.
Eu sed molestie signiferumque, quo ei odio deleniti adolescens, eu eligendi mnesarchum est. Vide homero putant id vis, his te nihil suavitate. Cum an maiorum iudicabit imperdiet, saepe indoctum sea ne. Et nonumes sensibus eum, mel habeo everti in. Ea audire prompta fabellas per. An ornatus scaevola patrioque sit, his ullum suscipiantur id.
Est dolore offendit qualisque te, vivendo officiis iudicabit usu et, ex munere partem propriae nec. Ad duo movet mundi. Pri mucius noluisse mediocritatem id. No tincidunt voluptatum est, suas euripidis est an. Ex malis tritani dissentias pri, integre mentitum prodesset an his.
- heading: references
links:
- url: http://google.com
- url: http://github.com
- url: http://github.com
tagline: A place to code
- url: http://github.com
tagline: A place to code
- url: http://github.com
tagline: A place to code
- url: http://github.com
tagline: A place to code
- url: http://github.com
</script>
<script type="text/coffeescript">
colors = d3.scale.category10()
d3.select 'body'
.append 'div'
.classed 'container', true
data = jsyaml.load( d3.select('#manifest').html() )
#{ build dom with d3 mount riot and embed skrollr context }
riot.mountTo( d3.select('.container').node(), 'title-card', data[0] )
riot.mountTo( d3.select('.container').node(), 'table-of-contents', data[1] )
riot.mountTo( d3.select('.container').node(), 'article', data[1] )
riot.mountTo( d3.select('.container').node(), 'references', data[2] )
d3.selectAll '.heading'
.datum (d,i) ->
{
'max-scroll': this.offsetTop
'min-offset': if i == 0 then this.offsetTop else null
'height': this.offsetHeight
}
.style 'z-index',100
.each (d,i) ->
d3.select this
.select 'button'
.style 'background-color', colors(5+i)
d3.selectAll '.content'
.style 'z-index',0
#{ start skrollr}
sk = skrollr.init()
d3.select document
.on 'scroll', ()->
heading = d3.selectAll '.heading'
.each (d,i)->
h = (i)*d['height']
if (sk.getScrollTop()>= ( d['max-scroll'] - h - i*d['height']) )
d3.select this
.classed 'fixed', true
.style 'position','fixed'
.style 'top', h
.call (s) ->
s.select '.badge'
.call (s) ->
s.text ()->
out = ''
d3.selectAll '.section-content,#references'
.each ()->
if (this.offsetTop - i*d['height']) < sk.getScrollTop()
out = d3.select(this).select('.panel-heading,button.references h3').text()
null
out
d3.select this.nextElementSibling
.style 'margin-top', d['height']
else if d3.select(this).classed('fixed')
d3.select this
.classed 'fixed', false
.style 'position','relative'
.style 'top', h
</script>
<script type="riot/tag">
<title-card>
<div class="heading btn-group" role="group">
<button type="button" class="btn btn-xs"><h3><i>{ this.opts.heading }</i></h3></button>
</div>
<div class="content skrollable skrollable-between"
style="font-size:36px;padding:60;">
<p
data-10p-top="opacity:1"
data--100-bottom="opacity:0"
>{ this.opts.content }
</p>
</div>
</title-card>
<table-of-contents>
<div class="heading btn-group" role="group">
<button type="button" class="btn btn-xs"><h3><i>{'Table of Contents'}</i>&nbsp;&nbsp;&nbsp;<span class="badge" style="font-size:28"></span></h3></button>
</div>
<div class="container" class="toc skrollable skrollable-between" style="padding:60">
<div each={ this.opts.sections } class="media">
<div class="media-left">
<a href="#" style='font-size:32px;'>
A
</a>
</div>
<div class="media-body">
<h2 class="media-heading"><a href="#{id}">{heading}</a></h2>
{tagline}
</div>
</div>
<hr>
<div class="media">
<div class="media-heading"><a href="#references"><h4>References</h4></a></div>
</div>
</div>
</table-of-contents>
<article>
<div class="container" >
<div class="row" each={ this.opts.sections} class="skrollable skrollable-between" >
<div id={id} class="section-content panel panel-primary clearfix">
<div class="panel panel-heading">
<h3>{heading}</h3>
</div>
<div class="panel panel-body" style="font-size:24;">
<p>{content}</p>
</div>
</div>
</div>
</div>
</article>
<references>
<div id="references" class="btn-group" role="group">
<button type="button" class="references btn btn-info btn-xs"><h3><i>{this.opts.heading}</i></button>
</div>
<div class="container" class="toc skrollable skrollable-between" style="padding:60">
<div each={ this.opts.links } class="media">
<div class="media-left">
<a href="#" style='font-size:32px;'>
1
</a>
</div>
<div class="media-body">
<h2 class="media-heading"><a href={url}>{url}</a></h2>
{tagline}
</div>
</div>
</div>
</references>
</script>
<body>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment