slideoff 0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/Gemfile +3 -0
- data/MIT-LICENSE +20 -0
- data/README.md +218 -0
- data/bin/slideoff +127 -0
- data/lib/slideoff/config_builder.rb +60 -0
- data/lib/slideoff/flickr_api.rb +50 -0
- data/lib/slideoff/flickr_image.rb +92 -0
- data/lib/slideoff/markdown.rb +145 -0
- data/lib/slideoff/presentation.rb +90 -0
- data/lib/slideoff/remote_api.rb +53 -0
- data/lib/slideoff/routes.rb +20 -0
- data/lib/slideoff/server.rb +50 -0
- data/lib/slideoff/slides_api.rb +59 -0
- data/lib/slideoff/utils.rb +453 -0
- data/lib/slideoff.rb +15 -0
- data/themes/3d_slideshow/README +2 -0
- data/themes/3d_slideshow/css/main.css +232 -0
- data/themes/3d_slideshow/css/reset.css +57 -0
- data/themes/3d_slideshow/index.erb +31 -0
- data/themes/3d_slideshow/js/slideshow.js +288 -0
- data/themes/CSSS/README +2 -0
- data/themes/CSSS/css/slideshow.css +304 -0
- data/themes/CSSS/css/theme.css +250 -0
- data/themes/CSSS/images/rainbow-wood.jpg +0 -0
- data/themes/CSSS/index.erb +36 -0
- data/themes/CSSS/js/classList.js +116 -0
- data/themes/CSSS/js/prefixfree.min.js +5 -0
- data/themes/CSSS/js/slideshow.js +621 -0
- data/themes/common/css/pygments/colorful.css +62 -0
- data/themes/common/css/pygments/manni.css +61 -0
- data/themes/common/css/pygments/native.css +70 -0
- data/themes/common/css/pygments/solarized.css +66 -0
- data/themes/common/fonts/DroidSansMono.svg +626 -0
- data/themes/common/fonts/DroidSansMono.ttf +0 -0
- data/themes/common/fonts/Lato-BoldItalic.woff +0 -0
- data/themes/common/fonts/Lato-Italic.woff +0 -0
- data/themes/common/fonts/Lato-bold.woff +0 -0
- data/themes/common/fonts/Lato.woff +0 -0
- data/themes/common/fonts/OpenSans-Bold.woff +0 -0
- data/themes/common/fonts/OpenSans-BoldItalic.woff +0 -0
- data/themes/common/fonts/OpenSans-Italic.woff +0 -0
- data/themes/common/fonts/OpenSans.woff +0 -0
- data/themes/common/fonts/PTMono.woff +0 -0
- data/themes/common/fonts/PTSans.Bold.Italic.woff +0 -0
- data/themes/common/fonts/PTSans.Bold.woff +0 -0
- data/themes/common/fonts/PTSans.Italic.woff +0 -0
- data/themes/common/fonts/PTSans.Narrow.Bold.woff +0 -0
- data/themes/common/fonts/PTSans.Narrow.woff +0 -0
- data/themes/common/fonts/PTSans.woff +0 -0
- data/themes/common/fonts/TargetBlank.otf +0 -0
- data/themes/common/fonts/TargetBlank.svg +14 -0
- data/themes/common/fonts/YanoneKaffeesatz-Bold.woff +0 -0
- data/themes/common/fonts/YanoneKaffeesatz-Regular.woff +0 -0
- data/themes/common/fonts/crimson_text.ttf +0 -0
- data/themes/common/fonts/crimson_text_bold.ttf +0 -0
- data/themes/common/fonts/crimson_text_semibold.ttf +0 -0
- data/themes/common/fonts/league_gothic-webfont.ttf +0 -0
- data/themes/html5rocks/README +2 -0
- data/themes/html5rocks/css/default.css +501 -0
- data/themes/html5rocks/css/moon.css +543 -0
- data/themes/html5rocks/css/sand.css +508 -0
- data/themes/html5rocks/css/sea_wave.css +492 -0
- data/themes/html5rocks/index.erb +64 -0
- data/themes/html5rocks/js/slides.js +464 -0
- data/themes/io2012/README +2 -0
- data/themes/io2012/css/default.css +1481 -0
- data/themes/io2012/css/fonts.css +24 -0
- data/themes/io2012/css/phone.css +27 -0
- data/themes/io2012/images/google_developers_icon_128.png +0 -0
- data/themes/io2012/images/io2012_logo.png +0 -0
- data/themes/io2012/index.erb +73 -0
- data/themes/io2012/js/hammer.js +586 -0
- data/themes/io2012/js/modernizr.custom.45394.js +4 -0
- data/themes/io2012/js/order.js +8 -0
- data/themes/io2012/js/polyfills/classList.min.js +2 -0
- data/themes/io2012/js/polyfills/dataset.min.js +2 -0
- data/themes/io2012/js/polyfills/history.min.js +1 -0
- data/themes/io2012/js/prettify/lang-apollo.js +2 -0
- data/themes/io2012/js/prettify/lang-clj.js +18 -0
- data/themes/io2012/js/prettify/lang-css.js +2 -0
- data/themes/io2012/js/prettify/lang-go.js +1 -0
- data/themes/io2012/js/prettify/lang-hs.js +2 -0
- data/themes/io2012/js/prettify/lang-lisp.js +3 -0
- data/themes/io2012/js/prettify/lang-lua.js +2 -0
- data/themes/io2012/js/prettify/lang-ml.js +2 -0
- data/themes/io2012/js/prettify/lang-n.js +4 -0
- data/themes/io2012/js/prettify/lang-proto.js +1 -0
- data/themes/io2012/js/prettify/lang-scala.js +2 -0
- data/themes/io2012/js/prettify/lang-sql.js +2 -0
- data/themes/io2012/js/prettify/lang-tex.js +1 -0
- data/themes/io2012/js/prettify/lang-vb.js +2 -0
- data/themes/io2012/js/prettify/lang-vhdl.js +3 -0
- data/themes/io2012/js/prettify/lang-wiki.js +2 -0
- data/themes/io2012/js/prettify/lang-xq.js +3 -0
- data/themes/io2012/js/prettify/lang-yaml.js +2 -0
- data/themes/io2012/js/prettify/prettify.css +1 -0
- data/themes/io2012/js/prettify/prettify.js +28 -0
- data/themes/io2012/js/require-1.0.8.min.js +33 -0
- data/themes/io2012/js/slide-controller.js +109 -0
- data/themes/io2012/js/slide-deck.js +768 -0
- data/themes/io2012/js/slides.js +5 -0
- data/themes/memories/README +5 -0
- data/themes/memories/css/fonts.css +25 -0
- data/themes/memories/css/slideshow.css +286 -0
- data/themes/memories/css/theme.css +183 -0
- data/themes/memories/index.erb +37 -0
- data/themes/memories/js/prefixfree.min.js +13 -0
- data/themes/memories/js/slideshow.js +577 -0
- data/themes/modern/LICENSE +20 -0
- data/themes/modern/README.md +52 -0
- data/themes/modern/css/GENERATED_CONTENT +0 -0
- data/themes/modern/css/defaults.css +0 -0
- data/themes/modern/css/fonts.css +166 -0
- data/themes/modern/css/pygments/colorful.css +215 -0
- data/themes/modern/css/pygments/github.css +208 -0
- data/themes/modern/css/pygments/solarized-dark.css +213 -0
- data/themes/modern/css/pygments/solarized-light.css +213 -0
- data/themes/modern/css/reset.css +41 -0
- data/themes/modern/css/screen.css +1183 -0
- data/themes/modern/fonts/Collegiate.woff +0 -0
- data/themes/modern/fonts/GoudyBookletter.1911.woff +0 -0
- data/themes/modern/fonts/Inconsolata.Bold.woff +0 -0
- data/themes/modern/fonts/Inconsolata.woff +0 -0
- data/themes/modern/fonts/Junction.woff +0 -0
- data/themes/modern/fonts/LiberationMono.Bold.woff +0 -0
- data/themes/modern/fonts/LiberationMono.BoldItalic.woff +0 -0
- data/themes/modern/fonts/LiberationMono.Italic.woff +0 -0
- data/themes/modern/fonts/LiberationMono.Regular.woff +0 -0
- data/themes/modern/fonts/OpenSans.Bold.woff +0 -0
- data/themes/modern/fonts/OpenSans.BoldItalic.woff +0 -0
- data/themes/modern/fonts/OpenSans.ExtraBold.woff +0 -0
- data/themes/modern/fonts/OpenSans.ExtraBoldItalic.woff +0 -0
- data/themes/modern/fonts/OpenSans.Italic.woff +0 -0
- data/themes/modern/fonts/OpenSans.Light.woff +0 -0
- data/themes/modern/fonts/OpenSans.LightItalic.woff +0 -0
- data/themes/modern/fonts/OpenSans.Regular.woff +0 -0
- data/themes/modern/fonts/OpenSans.Semibold.woff +0 -0
- data/themes/modern/fonts/OpenSans.SemiboldItalic.woff +0 -0
- data/themes/modern/fonts/PTMono.woff +0 -0
- data/themes/modern/fonts/PTSans.Bold.Italic.woff +0 -0
- data/themes/modern/fonts/PTSans.Bold.woff +0 -0
- data/themes/modern/fonts/PTSans.Italic.woff +0 -0
- data/themes/modern/fonts/PTSans.Narrow.Bold.woff +0 -0
- data/themes/modern/fonts/PTSans.woff +0 -0
- data/themes/modern/fonts/Raleway.Thin.woff +0 -0
- data/themes/modern/fonts/STIXGeneral.Bold.woff +0 -0
- data/themes/modern/fonts/STIXGeneral.BoldItalic.woff +0 -0
- data/themes/modern/fonts/STIXGeneral.Italic.woff +0 -0
- data/themes/modern/fonts/STIXGeneral.Regular.woff +0 -0
- data/themes/modern/fonts/YanoneKaffeesatz.Bold.woff +0 -0
- data/themes/modern/fonts/YanoneKaffeesatz.ExtraLight.woff +0 -0
- data/themes/modern/fonts/YanoneKaffeesatz.Light.woff +0 -0
- data/themes/modern/fonts/YanoneKaffeesatz.Regular.woff +0 -0
- data/themes/modern/images/cc/by.svg +29 -0
- data/themes/modern/images/cc/cc-white.svg +23 -0
- data/themes/modern/images/cc/cc.svg +23 -0
- data/themes/modern/images/cc/nc-eu.svg +21 -0
- data/themes/modern/images/cc/nc-jp.svg +18 -0
- data/themes/modern/images/cc/nc.svg +23 -0
- data/themes/modern/images/cc/nd.svg +20 -0
- data/themes/modern/images/cc/pd.svg +24 -0
- data/themes/modern/images/cc/remix.svg +20 -0
- data/themes/modern/images/cc/sa.svg +22 -0
- data/themes/modern/images/cc/sampling.plus.svg +33 -0
- data/themes/modern/images/cc/sampling.svg +36 -0
- data/themes/modern/images/cc/share.svg +22 -0
- data/themes/modern/images/cc/zero.svg +24 -0
- data/themes/modern/images/flickr.svg +65 -0
- data/themes/modern/images/mesh.png +0 -0
- data/themes/modern/images/mesh@2x.png +0 -0
- data/themes/modern/images/progress-grayDark.svg +55 -0
- data/themes/modern/images/progress.svg +3 -0
- data/themes/modern/index.erb +76 -0
- data/themes/modern/js/highcharts.js +294 -0
- data/themes/modern/js/jquery-2.1.0.min.js +4 -0
- data/themes/modern/js/script.coffee +480 -0
- data/themes/modern/js/script.js +678 -0
- data/themes/modern/styles/_box.scss +89 -0
- data/themes/modern/styles/_figure.scss +81 -0
- data/themes/modern/styles/_full.scss +74 -0
- data/themes/modern/styles/_increment.scss +38 -0
- data/themes/modern/styles/_list.scss +129 -0
- data/themes/modern/styles/_progress.scss +19 -0
- data/themes/modern/styles/defaults.scss +46 -0
- data/themes/modern/styles/fonts.scss +197 -0
- data/themes/modern/styles/pygments/_solarized.scss +82 -0
- data/themes/modern/styles/pygments/colorful.scss +67 -0
- data/themes/modern/styles/pygments/github.scss +67 -0
- data/themes/modern/styles/pygments/solarized-dark.scss +15 -0
- data/themes/modern/styles/pygments/solarized-light.scss +15 -0
- data/themes/modern/styles/reset.scss +46 -0
- data/themes/modern/styles/screen.scss +841 -0
- data/themes/reveal/README +2 -0
- data/themes/reveal/css/main.css +1029 -0
- data/themes/reveal/css/reset.css +57 -0
- data/themes/reveal/index.erb +102 -0
- data/themes/reveal/js/classList.js +2 -0
- data/themes/reveal/js/head.min.js +8 -0
- data/themes/reveal/js/reveal.js +951 -0
- data/themes/shower/README +2 -0
- data/themes/shower/css/fonts.css +50 -0
- data/themes/shower/css/reset.css +42 -0
- data/themes/shower/css/style.css +418 -0
- data/themes/shower/images/grid.png +0 -0
- data/themes/shower/images/linen.png +0 -0
- data/themes/shower/images/ribbon.svg +4 -0
- data/themes/shower/index.erb +35 -0
- data/themes/shower/js/script.js +325 -0
- data/themes/template/README +5 -0
- data/themes/template/css/reset.css +42 -0
- data/themes/template/index.erb +35 -0
- data/themes/template/js/prefixfree.min.js +13 -0
- metadata +343 -0
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/* http://meyerweb.com/eric/tools/css/reset/
|
|
2
|
+
v2.0 | 20110126
|
|
3
|
+
License: none (public domain)
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
html, body, div, span, applet, object, iframe,
|
|
7
|
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
8
|
+
a, abbr, acronym, address, big, cite, code,
|
|
9
|
+
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
10
|
+
small, strike, strong, sub, sup, tt, var,
|
|
11
|
+
b, u, i, center,
|
|
12
|
+
dl, dt, dd, ol, ul, li,
|
|
13
|
+
fieldset, form, label, legend,
|
|
14
|
+
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
15
|
+
article, aside, canvas, details, embed,
|
|
16
|
+
figure, figcaption, footer, header, hgroup,
|
|
17
|
+
menu, nav, output, ruby, section, summary,
|
|
18
|
+
time, mark, audio, video {
|
|
19
|
+
margin: 0;
|
|
20
|
+
padding: 0;
|
|
21
|
+
border: 0;
|
|
22
|
+
font-size: 100%;
|
|
23
|
+
font: inherit;
|
|
24
|
+
vertical-align: baseline;
|
|
25
|
+
}
|
|
26
|
+
/* HTML5 display-role reset for older browsers */
|
|
27
|
+
article, aside, details, figcaption, figure,
|
|
28
|
+
footer, header, hgroup, menu, nav, section {
|
|
29
|
+
display: block;
|
|
30
|
+
}
|
|
31
|
+
body {
|
|
32
|
+
line-height: 1;
|
|
33
|
+
}
|
|
34
|
+
ol, ul {
|
|
35
|
+
list-style: none;
|
|
36
|
+
}
|
|
37
|
+
blockquote, q {
|
|
38
|
+
quotes: none;
|
|
39
|
+
}
|
|
40
|
+
blockquote:before, blockquote:after,
|
|
41
|
+
q:before, q:after {
|
|
42
|
+
content: '';
|
|
43
|
+
content: none;
|
|
44
|
+
}
|
|
45
|
+
table {
|
|
46
|
+
border-collapse: collapse;
|
|
47
|
+
border-spacing: 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
/* HTML5BP:
|
|
52
|
+
These selection declarations have to be separate.
|
|
53
|
+
No text-shadow: twitter.com/miketaylr/status/12228805301
|
|
54
|
+
Also: hot pink. */
|
|
55
|
+
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
|
|
56
|
+
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
|
|
57
|
+
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title><%= meta.title %></title>
|
|
6
|
+
<% css_files = theme.css + meta.css %>
|
|
7
|
+
<% if css = css_files.delete("css/reset.css") %>
|
|
8
|
+
<link rel="stylesheet" href="<%= css %>">
|
|
9
|
+
<% end %>
|
|
10
|
+
<% css_files.each do |css| %>
|
|
11
|
+
<link rel="stylesheet" href="<%= css %>">
|
|
12
|
+
<% end %>
|
|
13
|
+
<link rel="stylesheet" href="css/pygments/colorful.css">
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<div id="main">
|
|
17
|
+
<% sections.each do |section| %>
|
|
18
|
+
<section id="section-<%= section.number %>">
|
|
19
|
+
<% section.slides.each do |slide| %>
|
|
20
|
+
<section id="slide-<%= section.number %>-<%= slide.number%>" class="<%= slide.classes %>">
|
|
21
|
+
<%= slide.html %>
|
|
22
|
+
</section>
|
|
23
|
+
<% end %>
|
|
24
|
+
</section>
|
|
25
|
+
<% end %>
|
|
26
|
+
</div>
|
|
27
|
+
<% (theme.js + meta.js).each do |js| %>
|
|
28
|
+
<script src="<%= js %>"></script>
|
|
29
|
+
<% end %>
|
|
30
|
+
</body>
|
|
31
|
+
</html>
|
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Handles the very minimal navigation logic involved
|
|
3
|
+
* in the slideshow. Including keyboard navigation, touch
|
|
4
|
+
* interaction and URL history behavior.
|
|
5
|
+
*
|
|
6
|
+
* Slides are given unique hash based URL's so that they can
|
|
7
|
+
* be opened directly. I didn't use the HTML5 History API for
|
|
8
|
+
* this as it would have required the addition of server side
|
|
9
|
+
* rewrite rules and hence require more effort for anyone to
|
|
10
|
+
* set up.
|
|
11
|
+
*
|
|
12
|
+
* This component can be called from other scripts via a
|
|
13
|
+
* tiny API:
|
|
14
|
+
* ● Slideshow.navigateTo( indexh, indexv );
|
|
15
|
+
* ● Slideshow.navigateLeft();
|
|
16
|
+
* ● Slideshow.navigateRight();
|
|
17
|
+
* ● Slideshow.navigateUp();
|
|
18
|
+
* ● Slideshow.navigateDown();
|
|
19
|
+
*
|
|
20
|
+
*
|
|
21
|
+
* version 0.1:
|
|
22
|
+
* ● First release
|
|
23
|
+
*
|
|
24
|
+
* version 0.2:
|
|
25
|
+
* ● Refactored code and added inline documentation
|
|
26
|
+
* ● Slides now have unique URL's
|
|
27
|
+
* ● A basic API to invoke navigation was added
|
|
28
|
+
*
|
|
29
|
+
*
|
|
30
|
+
* @author Hakim El Hattab
|
|
31
|
+
* @version 0.2
|
|
32
|
+
*/
|
|
33
|
+
var Slideshow = (function(){
|
|
34
|
+
|
|
35
|
+
var indexh = 0,
|
|
36
|
+
indexv = 0;
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Activates the main program logic.
|
|
40
|
+
*/
|
|
41
|
+
function initialize() {
|
|
42
|
+
document.addEventListener('keydown', onDocumentKeyDown, false);
|
|
43
|
+
document.addEventListener('touchstart', onDocumentTouchStart, false);
|
|
44
|
+
window.addEventListener('hashchange', onWindowHashChange, false);
|
|
45
|
+
|
|
46
|
+
window.setTimeout(function() {
|
|
47
|
+
startEventSourceHandler('/remote/sub/events');
|
|
48
|
+
}, 100);
|
|
49
|
+
|
|
50
|
+
// Read the initial state of the URL (hash)
|
|
51
|
+
readURL();
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function startEventSourceHandler (uri) {
|
|
55
|
+
if (window['EventSource'] == undefined) return ;
|
|
56
|
+
|
|
57
|
+
var source = new EventSource(uri);
|
|
58
|
+
|
|
59
|
+
source.onmessage = function(e) {
|
|
60
|
+
switch(e.data){
|
|
61
|
+
case 'next':
|
|
62
|
+
Slideshow.navigateRight();
|
|
63
|
+
break;
|
|
64
|
+
case 'prev':
|
|
65
|
+
Slideshow.navigateLeft();
|
|
66
|
+
break;
|
|
67
|
+
case 'up':
|
|
68
|
+
Slideshow.navigateUp();
|
|
69
|
+
break;
|
|
70
|
+
case 'down':
|
|
71
|
+
Slideshow.navigateDown();
|
|
72
|
+
break;
|
|
73
|
+
default:
|
|
74
|
+
console.log(e);
|
|
75
|
+
};
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Handler for the document level 'keydown' event.
|
|
81
|
+
*
|
|
82
|
+
* @param {Object} event
|
|
83
|
+
*/
|
|
84
|
+
function onDocumentKeyDown( event ) {
|
|
85
|
+
|
|
86
|
+
if( event.keyCode >= 37 && event.keyCode <= 40 ) {
|
|
87
|
+
|
|
88
|
+
switch( event.keyCode ) {
|
|
89
|
+
case 37: navigateLeft(); break; // left
|
|
90
|
+
case 39: navigateRight(); break; // right
|
|
91
|
+
case 38: navigateUp(); break; // up
|
|
92
|
+
case 40: navigateDown(); break; // down
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
slide();
|
|
96
|
+
|
|
97
|
+
event.preventDefault();
|
|
98
|
+
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* Handler for the document level 'touchstart' event.
|
|
104
|
+
*
|
|
105
|
+
* This enables very basic tap interaction for touch
|
|
106
|
+
* devices. Added mainly for performance testing of 3D
|
|
107
|
+
* transforms on iOS but was so happily surprised with
|
|
108
|
+
* how smoothly it runs so I left it in here. Apple +1
|
|
109
|
+
*
|
|
110
|
+
* @param {Object} event
|
|
111
|
+
*/
|
|
112
|
+
function onDocumentTouchStart( event ) {
|
|
113
|
+
|
|
114
|
+
// We're only interested in one point taps
|
|
115
|
+
if (event.touches.length == 1) {
|
|
116
|
+
event.preventDefault();
|
|
117
|
+
|
|
118
|
+
var point = {
|
|
119
|
+
x: event.touches[0].clientX,
|
|
120
|
+
y: event.touches[0].clientY
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
// Define the extent of the areas that may be tapped
|
|
124
|
+
// to navigate
|
|
125
|
+
var wt = window.innerWidth * 0.3;
|
|
126
|
+
var ht = window.innerHeight * 0.3;
|
|
127
|
+
|
|
128
|
+
if( point.x < wt ) {
|
|
129
|
+
navigateLeft();
|
|
130
|
+
}
|
|
131
|
+
else if( point.x > window.innerWidth - wt ) {
|
|
132
|
+
navigateRight();
|
|
133
|
+
}
|
|
134
|
+
else if( point.y < ht ) {
|
|
135
|
+
navigateUp();
|
|
136
|
+
}
|
|
137
|
+
else if( point.y > window.innerHeight - ht ) {
|
|
138
|
+
navigateDown();
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
slide();
|
|
142
|
+
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
/**
|
|
148
|
+
* Handler for the window level 'hashchange' event.
|
|
149
|
+
*
|
|
150
|
+
* @param {Object} event
|
|
151
|
+
*/
|
|
152
|
+
function onWindowHashChange( event ) {
|
|
153
|
+
readURL();
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/**
|
|
157
|
+
* Updates one dimension of slides by showing the slide
|
|
158
|
+
* with the specified index.
|
|
159
|
+
*
|
|
160
|
+
* @param {String} selector A CSS selector that will fetch
|
|
161
|
+
* the group of slides we are working with
|
|
162
|
+
* @param {uint} index The index of the slide that should be
|
|
163
|
+
* shown
|
|
164
|
+
*
|
|
165
|
+
* @return {uint} The index of the slide that is now shown,
|
|
166
|
+
* might differ from the passed in index if it was out of
|
|
167
|
+
* bounds.
|
|
168
|
+
*/
|
|
169
|
+
function updateSlides( selector, index ) {
|
|
170
|
+
|
|
171
|
+
// Select all slides and convert the NodeList result to
|
|
172
|
+
// an array
|
|
173
|
+
var slides = Array.prototype.slice.call( document.querySelectorAll( selector ) );
|
|
174
|
+
|
|
175
|
+
if( slides.length ) {
|
|
176
|
+
// Enforce max and minimum index bounds
|
|
177
|
+
index = Math.max(Math.min(index, slides.length - 1), 0);
|
|
178
|
+
|
|
179
|
+
slides[index].setAttribute('class', 'present');
|
|
180
|
+
|
|
181
|
+
// Any element previous to index is given the 'past' class
|
|
182
|
+
slides.slice(0, index).map(function(element){
|
|
183
|
+
element.setAttribute('class', 'past');
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
// Any element subsequent to index is given the 'future' class
|
|
187
|
+
slides.slice(index + 1).map(function(element){
|
|
188
|
+
element.setAttribute('class', 'future');
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
else {
|
|
192
|
+
// Since there are no slides we can't be anywhere beyond the
|
|
193
|
+
// zeroth index
|
|
194
|
+
index = 0;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
return index;
|
|
198
|
+
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
/**
|
|
202
|
+
* Updates the visual slides to represent the currently
|
|
203
|
+
* set indices.
|
|
204
|
+
*/
|
|
205
|
+
function slide() {
|
|
206
|
+
indexh = updateSlides( '#main>section', indexh );
|
|
207
|
+
indexv = updateSlides( 'section.present>section', indexv );
|
|
208
|
+
|
|
209
|
+
writeURL();
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/**
|
|
213
|
+
* Reads the current URL (hash) and navigates accordingly.
|
|
214
|
+
*/
|
|
215
|
+
function readURL() {
|
|
216
|
+
// Break the hash down to separate components
|
|
217
|
+
var bits = window.location.hash.slice(2).split('/');
|
|
218
|
+
|
|
219
|
+
// Read the index components of the hash
|
|
220
|
+
indexh = bits[0] ? parseInt( bits[0] ) : 0;
|
|
221
|
+
indexv = bits[1] ? parseInt( bits[1] ) : 0;
|
|
222
|
+
|
|
223
|
+
navigateTo( indexh, indexv );
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
/**
|
|
227
|
+
* Updates the page URL (hash) to reflect the current
|
|
228
|
+
* navigational state.
|
|
229
|
+
*/
|
|
230
|
+
function writeURL() {
|
|
231
|
+
var url = '/';
|
|
232
|
+
|
|
233
|
+
// Only include the minimum possible number of components in
|
|
234
|
+
// the URL
|
|
235
|
+
if( indexh > 0 || indexv > 0 ) url += indexh
|
|
236
|
+
if( indexv > 0 ) url += '/' + indexv
|
|
237
|
+
|
|
238
|
+
window.location.hash = url;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/**
|
|
242
|
+
* Triggers a navigation to the specified indices.
|
|
243
|
+
*
|
|
244
|
+
* @param {uint} h The horizontal index of the slide to show
|
|
245
|
+
* @param {uint} v The vertical index of the slide to show
|
|
246
|
+
*/
|
|
247
|
+
function navigateTo( h, v ) {
|
|
248
|
+
indexh = h === undefined ? indexh : h;
|
|
249
|
+
indexv = v === undefined ? indexv : v;
|
|
250
|
+
|
|
251
|
+
slide();
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
function navigateLeft() {
|
|
255
|
+
indexh --;
|
|
256
|
+
indexv = 0;
|
|
257
|
+
slide();
|
|
258
|
+
}
|
|
259
|
+
function navigateRight() {
|
|
260
|
+
indexh ++;
|
|
261
|
+
indexv = 0;
|
|
262
|
+
slide();
|
|
263
|
+
}
|
|
264
|
+
function navigateUp() {
|
|
265
|
+
indexv --;
|
|
266
|
+
slide();
|
|
267
|
+
}
|
|
268
|
+
function navigateDown() {
|
|
269
|
+
indexv ++;
|
|
270
|
+
slide();
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
// Initialize the program. Done right before returning to ensure
|
|
274
|
+
// that any inline variable definitions are available to all
|
|
275
|
+
// functions
|
|
276
|
+
initialize();
|
|
277
|
+
|
|
278
|
+
// Expose some methods publicly
|
|
279
|
+
return {
|
|
280
|
+
navigateTo: navigateTo,
|
|
281
|
+
navigateLeft: navigateLeft,
|
|
282
|
+
navigateRight: navigateRight,
|
|
283
|
+
navigateUp: navigateUp,
|
|
284
|
+
navigateDown: navigateDown
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
})();
|
|
288
|
+
|
data/themes/CSSS/README
ADDED
|
@@ -0,0 +1,304 @@
|
|
|
1
|
+
/**
|
|
2
|
+
Basic CSS so that the slideshow script functions as a slideshow
|
|
3
|
+
@author Lea Verou
|
|
4
|
+
@version 1.0
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* "Variables"
|
|
9
|
+
*/
|
|
10
|
+
.slide,
|
|
11
|
+
.delayed,
|
|
12
|
+
.delayed-children > * {
|
|
13
|
+
transition:.5s;
|
|
14
|
+
transition-property: transform, opacity, left, top, right, bottom, background;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Styles
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
html, body {
|
|
22
|
+
height: 100%;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
body {
|
|
26
|
+
margin: 0;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.slide {
|
|
30
|
+
display: none;
|
|
31
|
+
position:absolute;
|
|
32
|
+
top:0;
|
|
33
|
+
right:0;
|
|
34
|
+
bottom:0;
|
|
35
|
+
left:0;
|
|
36
|
+
z-index:1;
|
|
37
|
+
|
|
38
|
+
font-size:250%;
|
|
39
|
+
line-height:1.6;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.slide.previous,
|
|
43
|
+
.slide:target,
|
|
44
|
+
.slide.next {
|
|
45
|
+
display: block;
|
|
46
|
+
visibility: hidden;
|
|
47
|
+
overflow:hidden;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.slide:target {
|
|
51
|
+
z-index:100;
|
|
52
|
+
opacity:1;
|
|
53
|
+
visibility: visible;
|
|
54
|
+
overflow: visible;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
Slide numbers
|
|
59
|
+
*/
|
|
60
|
+
#indicator {
|
|
61
|
+
position: absolute;
|
|
62
|
+
top: .05in;
|
|
63
|
+
right: .5em;
|
|
64
|
+
z-index: 1010;
|
|
65
|
+
|
|
66
|
+
font-size: .15in;
|
|
67
|
+
color: white;
|
|
68
|
+
background: rgba(0,0,0,.25);
|
|
69
|
+
font-weight: 900;
|
|
70
|
+
text-shadow: .05em .05em .1em black;
|
|
71
|
+
text-align: center;
|
|
72
|
+
padding: .1em .3em 0;
|
|
73
|
+
min-width: 1.6em;
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
border-radius: 999px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* If there's nothing selected, show the first */
|
|
79
|
+
.slide:first-child {
|
|
80
|
+
z-index:2;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Delayed items that are shown incrementally after the slide is */
|
|
84
|
+
.delayed,
|
|
85
|
+
.delayed-children > * {
|
|
86
|
+
opacity: 0;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.delayed.displayed,
|
|
90
|
+
.delayed-children > .displayed {
|
|
91
|
+
opacity: .3;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.delayed.current,
|
|
95
|
+
.delayed-children > .current,
|
|
96
|
+
.delayed.displayed.non-dismissable,
|
|
97
|
+
.delayed-children > .displayed.non-dismissable, /* non-dismissable name is deprecated */
|
|
98
|
+
.delayed.displayed.persistent,
|
|
99
|
+
.delayed-children > .displayed.persistent,
|
|
100
|
+
.delayed-children.persistent > .displayed {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
On-screen navigation
|
|
106
|
+
*/
|
|
107
|
+
|
|
108
|
+
button.onscreen-nav {
|
|
109
|
+
position: absolute;
|
|
110
|
+
bottom: 1em;
|
|
111
|
+
right: 1em;
|
|
112
|
+
padding: .2em .4em;
|
|
113
|
+
border: 0;
|
|
114
|
+
border-radius: .3em;
|
|
115
|
+
background: rgba(0,0,0,.5);
|
|
116
|
+
color: white;
|
|
117
|
+
text-shadow: 0 -.05em .05em black;
|
|
118
|
+
text-transform: uppercase;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
iframe slides
|
|
123
|
+
*/
|
|
124
|
+
.iframe.slide {
|
|
125
|
+
padding: 0 !important;
|
|
126
|
+
text-align: center;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.iframe.slide > h1 {
|
|
130
|
+
position: absolute;
|
|
131
|
+
bottom: 0; right: 0; left: 0;
|
|
132
|
+
background: rgba(0,0,0,.5);
|
|
133
|
+
font-size: 100%;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.iframe.slide > h1 > a {
|
|
137
|
+
display: inline-block;
|
|
138
|
+
padding: .2em .5em;
|
|
139
|
+
|
|
140
|
+
color: white;
|
|
141
|
+
text-align: center;
|
|
142
|
+
text-decoration: none;
|
|
143
|
+
text-shadow: 0 -.05em .05em black;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.slide > iframe:only-of-type {
|
|
147
|
+
position: absolute;
|
|
148
|
+
top: 0;
|
|
149
|
+
left: 0;
|
|
150
|
+
border: 0;
|
|
151
|
+
width: 100%;
|
|
152
|
+
height: 100%;
|
|
153
|
+
margin: 0;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/**
|
|
157
|
+
Show thumbnails
|
|
158
|
+
*/
|
|
159
|
+
|
|
160
|
+
.show-thumbnails {
|
|
161
|
+
overflow-x: hidden;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.show-thumbnails .slide,
|
|
165
|
+
.presenter .slide.next {
|
|
166
|
+
width: 1024px;
|
|
167
|
+
height: 768px;
|
|
168
|
+
box-sizing: border-box;
|
|
169
|
+
|
|
170
|
+
float: left;
|
|
171
|
+
overflow: hidden;
|
|
172
|
+
position: static;
|
|
173
|
+
opacity: 1;
|
|
174
|
+
margin:-292px -395px;
|
|
175
|
+
cursor: pointer;
|
|
176
|
+
|
|
177
|
+
transform: scale(.2, .2);
|
|
178
|
+
transition:1s transform;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.show-thumbnails.headers-only .slide {
|
|
182
|
+
display: none;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.show-thumbnails.headers-only header.slide {
|
|
186
|
+
display: block;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.show-thumbnails .slide .delayed,
|
|
190
|
+
.presenter .slide:target + .slide .delayed {
|
|
191
|
+
opacity: 1;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.show-thumbnails .slide:hover,
|
|
195
|
+
.show-thumbnails .slide:target,
|
|
196
|
+
.presenter .slide:target + .slide {
|
|
197
|
+
outline: 20px solid rgba(255, 255, 255, .6);
|
|
198
|
+
outline-radius:5px;
|
|
199
|
+
|
|
200
|
+
box-shadow: 5px 5px 10px black;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.show-thumbnails .slide:target {
|
|
204
|
+
outline-color: rgba(255, 255, 255, .3);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.show-thumbnails .slide:target:hover {
|
|
208
|
+
outline-color: rgba(255, 255, 255, .9);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* Display titles */
|
|
212
|
+
.show-thumbnails .slide[data-title]:after {
|
|
213
|
+
content: attr(data-title);
|
|
214
|
+
position: absolute;
|
|
215
|
+
left: 0;
|
|
216
|
+
right: 0;
|
|
217
|
+
bottom: 0;
|
|
218
|
+
padding: .1em 0;
|
|
219
|
+
background: rgba(0,0,0,.5);
|
|
220
|
+
color: white;
|
|
221
|
+
font-size: 250%;
|
|
222
|
+
text-align: center;
|
|
223
|
+
text-shadow: .05em .05em .1em black;
|
|
224
|
+
transform: none;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/* Hide all elements in slide by hitting Ctrl + J or Shift + J */
|
|
228
|
+
.hide-elements .slide:target > * {
|
|
229
|
+
opacity: 0;
|
|
230
|
+
transition:.5s;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* Timer */
|
|
234
|
+
|
|
235
|
+
#timer {
|
|
236
|
+
position:absolute;
|
|
237
|
+
top:0;
|
|
238
|
+
left:0;
|
|
239
|
+
z-index:101;
|
|
240
|
+
width:0%;
|
|
241
|
+
height:16px;
|
|
242
|
+
line-height: 16px;
|
|
243
|
+
padding: 0 5px;
|
|
244
|
+
background:rgba(0,0,0,.5);
|
|
245
|
+
overflow: hidden;
|
|
246
|
+
text-align: right;
|
|
247
|
+
box-sizing: border-box;
|
|
248
|
+
transition: linear;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
#timer:before {
|
|
252
|
+
content: 'Progress ';
|
|
253
|
+
text-transform: uppercase;
|
|
254
|
+
color: white;
|
|
255
|
+
font-size: 9px;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
#timer.end {
|
|
259
|
+
width: 100%;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
#timer.end.overtime {
|
|
263
|
+
width: 0%;
|
|
264
|
+
left: auto;
|
|
265
|
+
right: 0;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* Presenter & projector views */
|
|
269
|
+
|
|
270
|
+
.projector #timer {
|
|
271
|
+
display: none;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.presenter-notes {
|
|
275
|
+
display: none;
|
|
276
|
+
position: fixed;
|
|
277
|
+
right: 230px;
|
|
278
|
+
bottom: 0;
|
|
279
|
+
left: 0;
|
|
280
|
+
max-height: 6em;
|
|
281
|
+
overflow: auto;
|
|
282
|
+
padding: .6em 1em;
|
|
283
|
+
font-size: 60%;
|
|
284
|
+
line-height: 1.3;
|
|
285
|
+
font-weight: normal;
|
|
286
|
+
resize:vertical;
|
|
287
|
+
background: rgba(255, 255, 255, .5);
|
|
288
|
+
color: black;
|
|
289
|
+
text-shadow: 0 1px white;
|
|
290
|
+
box-shadow: .1em .1em .3em rgba(0,0,0,.5) inset;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.presenter .slide.next {
|
|
294
|
+
position: fixed;
|
|
295
|
+
top: auto;
|
|
296
|
+
right: 0;
|
|
297
|
+
bottom: 0;
|
|
298
|
+
left: auto;
|
|
299
|
+
z-index: 100;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.presenter .slide:target > .presenter-notes {
|
|
303
|
+
display: block;
|
|
304
|
+
}
|