Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Merge branch 'master' of git://github.com/Seldaek/slippy

* 'master' of git://github.com/Seldaek/slippy:
  Add support for data-background for download button, fixes #12
  Fix bug with adjacent slides containing backrgounds
  Adjust overview style
  Added support for full-screen images per slide
  Clean up of index.php
  fixing issues mentioned by sealdek and making web download work again
  tweak image handling: baseWidth: false to disable, noscale to disable single image, add imgScaleTrivial to avoid mini-scaling
  adding cli handling to index.php and explain download in README
  Support spaces in input for pdf conversion
  Updated README
  Speed up PDF rendering by using multiple concurrent renderers
  Update PhantomJS script to 1.3.0
  Remove TAB handler to show the overview (quite annoying when alt-tabbing through apps)
  Fix js execute button to work with html entities in code block
  Some fixes to the PDF rendering
  • Loading branch information...
commit ef59ce240561840addce9a32744297aa91447ea4 2 parents c41d7d3 + 8aabfa7
koko-u authored
59 README.mdown
Source Rendered
@@ -13,7 +13,7 @@ Navigate, double click anywhere, press space or use the left/up and right/down a
13 13
14 14 Go to a slide directly, press number keys and then enter
15 15
16   -Get an overview, press escape, tab or delete then click on a slide to go straight to it
  16 +Get an overview, press escape or delete then click on a slide to go straight to it
17 17
18 18 How to: Make your own slide deck
19 19 --------------------------------
@@ -65,6 +65,11 @@ Finally you should initialize Slippy and the syntax highlighter:
65 65 });
66 66 </script>
67 67
  68 +Images are automatically scaled to fit onto the slide whatever the size of the
  69 +browser window. You can tweak the behaviour with the baseWidth and imgScaleTrivial
  70 +parameters (see below). If one of your images should never be scaled, add the class
  71 +"noscale" to the <img> tag, i.e. <img src="text.png" class="noscale"/>
  72 +
68 73 The slippy() call takes an option object, which accepts the following keys:
69 74
70 75 - animLen, duration for default animations (0 = disabled)
@@ -74,23 +79,66 @@ The slippy() call takes an option object, which accepts the following keys:
74 79 - animOutRewind, receives a slide and animates it
75 80 - baseWidth, defines the base for img resizing, if you don't want only
76 81 full-width images, specify this as the pixel width of a slide so that
77   - images are scaled properly (default is 620px wide)
  82 + images are scaled properly (default is 620px wide). Set to false to not scale images.
  83 +- imgScaleTrivial, defines the limit beneath that images are not scaled to avoid
  84 + unnecessary scaling that renders the image less nice.
78 85 - ratio, defines the width/height ratio of the slides, defaults to 1.3 (620x476)
79 86 - margin, the fraction of screen to use as slide margin, defaults to 0.15
80 87
  88 +How to: Show images fullscreen
  89 +------------------------------
  90 +
  91 +If a slide contains a `data-background` attribute, the referenced image will be
  92 +inserted fullscreen, and the background (if the image is not of the same aspect ratio
  93 +as the screen) will turn black. Example:
  94 +
  95 +```html
  96 +<div class="slide" data-background="foo.jpg">
  97 + <h1>Content</h1>
  98 +</div>
  99 +```
  100 +
  101 +Server
  102 +------
  103 +
  104 +The src/ folder contains an index.php that serves slides.
  105 +
  106 +- Put the src folder inside the webroot of a web server
  107 +- Copy config.php.dist to config.php and adjust to point to the folder containing
  108 + your slides - or just copy/symlink all slides into the src folder. The
  109 + index.php looks for html files in that folder and shows them, using the
  110 + header information for title and author.
  111 +
  112 +Exporting self-contained HTML presentations
  113 +-------------------------------------------
  114 +
  115 +Slippy can generate a presentation in a single file, with all javascript, css
  116 +and images inlined.
  117 +
  118 + php src/index.php <slippy slides> [<output file>]
  119 +
  120 +If you omit the output file, slippy will generate the filename from the input
  121 +file, appending _compiled to the name.
  122 +
  123 +If you set up the slippy webserver (see above), you can also click the download link.
  124 +
  125 +Limitation: If you use images in css statements, they are not included. If you
  126 +need to do that, you should generate a PDF instead (see below).
  127 +
81 128 Exporting PDFs
82 129 --------------
83 130
84 131 To upload your presentation on SlideShare, or to share it with others, it can be convenient to
85 132 export it to a PDF. Slippy comes with a CLI utility that does just that.
86 133
87   -The only requirement is that you download [PhantomJS](http://code.google.com/p/phantomjs/downloads/list) (1.1 only)
  134 +The only requirement is that you download [PhantomJS](http://code.google.com/p/phantomjs/downloads/list) (1.3.0)
88 135 and [pdftk](http://www.pdflabs.com/tools/pdftk-the-pdf-toolkit/) and place the executables in the bin/phantomjs
89   -and bin/pdftk dirs or make them accessible via your PATH environment variable.
  136 +and bin/pdftk dirs or make them accessible via your PATH environment variable. If you're on linux you can
  137 +probably install pdftk with your distro's package manager.
90 138
91 139 Once that is done, you can call the script using `bin/slippy-pdf.sh <path to your html presentation> <path to the pdf file to generate>`.
92 140
93   -It'll take a while and then should output a 4:3 PDF file. If you don't like the aspect ratio or size,
  141 +It will take a while and then should output a 4:3 PDF file. If you don't like the aspect ratio or size,
94 142 you can change the viewport size in the `bin/phantom-slippy-to-pdf.js` file. If you have rendering issues (missing
95 143 images or such), try increasing the delay, or rendering again, sometimes PhantomJS just fails without apparent reason.
96 144
@@ -129,6 +177,7 @@ Changelog
129 177 - Added a template to render the slide repository page
130 178 - Added a packager that embeds everything for easy distribution of slides as one html file
131 179 - Added incremental slides functionality (use the incremental class on any elements to make them appear one by one)
  180 + - Added fullscreen image support on a per-slide basis (`data-background="img url"` on a slide div)
132 181 - JS Alerts are now cleared when changing slide, but stay visible longer
133 182 - Fixed bug preventing "0" to be used to switch to slides
134 183
123 bin/phantom-slippy-to-pdf.js
... ... @@ -1,37 +1,102 @@
1   -var current, slides, viewport, output, delay;
  1 +var viewport, output, delay, renderers = [];
  2 +
  3 +// checks version
  4 +if (phantom.version.major == 1 && phantom.version.minor < 3) {
  5 + console.log('This script requires PhantomJS v1.3.0+, you have v'+phantom.version.major+'.'+phantom.version.minor+'.'+phantom.version.patch);
  6 + phantom.exit(-1);
  7 +}
  8 +
  9 +// check usage
  10 +if (phantom.args.length !== 2) {
  11 + console.log('Usage: phantom-pdf.js URL dirname');
  12 + phantom.exit(-1);
  13 +}
2 14
3 15 // settings
4 16 delay = 500;
5 17 viewport = { width: 1024, height: 768 };
  18 +output = phantom.args[1];
  19 +
  20 +(function init() {
  21 + var i, slides, workers, slidesPerWorker, page;
  22 +
  23 + page = new WebPage()
  24 + page.open(phantom.args[0], function (status) {
  25 + if (status !== 'success') {
  26 + console.log('Unable to load the given URL');
  27 + phantom.exit(-1);
  28 + } else {
  29 + slides = page.evaluate(function () {
  30 + return $('.slideContent').length;
  31 + });
  32 +
  33 + workers = Math.min(4, slides);
  34 + slidesPerWorker = Math.ceil(slides / workers);
  35 + i = 0;
  36 +
  37 + console.log('Initializing renderers');
6 38
7   -// init
8   -if (phantom.state.length === 0) {
9   - if (phantom.args.length !== 2) {
10   - console.log('Usage: phantom-pdf.js URL dirname');
11   - phantom.exit();
12   - } else {
13   - phantom.state = 'rasterize';
14   - console.log('opening page');
15   - phantom.open(phantom.args[0]);
  39 + while (slides > 0) {
  40 + if (i > 0) {
  41 + page = new WebPage();
  42 + }
  43 + page.viewportSize = { width: viewport.width, height: viewport.height };
  44 + page.paperSize = { width: viewport.width * 1.5, height: viewport.height * 1.5 + 30 };
  45 + renderers.push(renderer(page, phantom.args[0], i * slidesPerWorker, Math.min(slidesPerWorker, slides)))
  46 + i++;
  47 + slides -= slidesPerWorker;
  48 + }
  49 + }
  50 + });
  51 +}());
  52 +
  53 +function jobFinished(renderer) {
  54 + renderers.splice(renderers.indexOf(renderer), 1);
  55 + if (renderers.length == 0) {
  56 + console.log('Done.');
  57 + phantom.exit(0);
  58 + }
  59 +}
  60 +
  61 +function renderer(page, url, currentSlide, slides) {
  62 + page.open(url, openHandler);
  63 +
  64 + function openHandler(status) {
  65 + if (status !== 'success') {
  66 + console.log('Unable to load the given URL');
  67 + phantom.exit(-1);
  68 + } else {
  69 + // wait to be sure the page is loaded correctly
  70 + setTimeout(initPage, 1000);
  71 + }
16 72 }
17   -} else {
18   - // run
19   - current = 1;
20   - slides = $('.slideContent').length;
21   - phantom.viewportSize = { width: viewport.width, height: viewport.height };
22   - phantom.paperSize = { width: viewport.width * 1.5, height: viewport.height * 1.5 + 30 };
23   - output = phantom.args[1];
24   -
25   - phantom.sleep(1000);
26   - $('.incremental').css('opacity', '1').removeClass('.incremental');
27   -
28   - for (;current<=slides;current++) {
29   - console.log('rendering slide '+current);
30   - phantom.sleep(delay);
31   - phantom.render(output+'slide'+"000".substring(current.toString().length)+current+'.pdf');
32   - $(document).click();
33   - $(document).click();
  73 +
  74 + function initPage() {
  75 + var i;
  76 + page.evaluate(function () {
  77 + $('.incremental').css('opacity', '1').removeClass('incremental');
  78 + });
  79 + // move to the current slide
  80 + page.evaluate('function () {'+
  81 + '$(document).slippy().showSlide('+currentSlide+');'+
  82 + '}');
  83 + // wait to be sure the slide animation is over
  84 + setTimeout(renderNextSlide, delay);
  85 + };
  86 +
  87 + function renderNextSlide() {
  88 + if (!slides) {
  89 + return jobFinished(this);
  90 + }
  91 +
  92 + console.log('Rendering slide '+currentSlide);
  93 + page.render(output+'slide'+"000".substring(currentSlide.toString().length)+currentSlide+'.pdf');
  94 + page.evaluate(function () {
  95 + $(document).slippy().nextSlide();
  96 + });
  97 + slides--;
  98 + currentSlide++;
  99 + // wait to be sure the slide animation is over
  100 + setTimeout(renderNextSlide, delay);
34 101 }
35   - console.log('done');
36   - phantom.exit();
37 102 }
10 bin/slippy-pdf.sh
@@ -7,6 +7,7 @@ if [ "" = "$2" ]; then
7 7 echo "Usage: ./phantom-pdf.sh <slides URL> <PDF filename>"
8 8 exit 1
9 9 fi
  10 +
10 11 mkdir -p tmp-pdf/
11 12 rm -f tmp-pdf/*.png
12 13 rm -f tmp-pdf/*.pdf
@@ -35,7 +36,12 @@ if [ "" = "$pdftk" ]; then
35 36 fi
36 37 fi
37 38
38   -$phantom $bin/phantom-slippy-to-pdf.js $1 tmp-pdf/
  39 +$phantom $bin/phantom-slippy-to-pdf.js "$1" tmp-pdf/
  40 +if [ "$?" != "0" ]
  41 +then
  42 + echo 'PhantomJS error, aborting.'
  43 + exit
  44 +fi
39 45
40   -$pdftk tmp-pdf/*.pdf cat output $2
  46 +$pdftk tmp-pdf/*.pdf cat output "$2"
41 47 rm -r tmp-pdf/
107 src/index.php
@@ -20,6 +20,39 @@
20 20 $dir = rtrim($dir, '/').'/';
21 21 }
22 22
  23 +// handle CLI mode
  24 +if (PHP_SAPI === 'cli') {
  25 + if (!isset($_SERVER['argv'][1])) {
  26 + echo "USAGE: index.php <name of your slides html file> [<target file>]\n";
  27 + exit(1);
  28 + } elseif (!file_exists($_SERVER['argv'][1])) {
  29 + echo "File not found: ".$_SERVER['argv'][1]."\n";
  30 + exit(1);
  31 + }
  32 +
  33 + $file = $_SERVER['argv'][1];
  34 + if (isset($_SERVER['argv'][2])) {
  35 + $targetfile = $_SERVER['argv'][2];
  36 + } else {
  37 + $targetfile = substr($file, 0, strrpos($file, '.')).'_compiled.html';
  38 + }
  39 +
  40 + if (file_exists($targetfile)) {
  41 + echo "File $targetfile exists. Do you want to overwrite (y/n)? [y]: ";
  42 + $handle = fopen("php://stdin", "r");
  43 + $line = fgets($handle);
  44 + if (strtolower(trim($line)) !== 'y' && trim($line) !== '') {
  45 + echo "Aborting.\n";
  46 + exit(1);
  47 + }
  48 + }
  49 +
  50 + $html = compactDeck(cleanDeck($file));
  51 + file_put_contents($targetfile, $html);
  52 + echo "Successfully saved slides to $targetfile\n";
  53 + exit(0);
  54 +}
  55 +
23 56 // fetch slide deck
24 57 if (isset($_GET['file'])) {
25 58 $file = $dir . basename($_GET['file']);
@@ -34,21 +67,31 @@
34 67 die;
35 68 }
36 69
37   -// prepare slide deck content
38   -$file = file_get_contents($file);
39   -$file = preg_replace_callback('{(<pre[^>]+>)(.+?)(</pre>)}s', 'slippy_recode', $file);
  70 +$html = cleanDeck($file);
40 71
  72 +// handle downloads
41 73 if (isset($_GET['download']) && $_GET['download']) {
42   - downloadDeck($file);
43   - die;
  74 + header('Content-Type: text/html');
  75 + header('Content-Disposition: attachment; filename="'.basename($file).'"');
  76 + echo compactDeck($html);
  77 + exit(0);
44 78 }
45 79
46   -echo $file;
  80 +echo $html;
  81 +
  82 +/**
  83 + * Prepare slide deck content
  84 + */
  85 +function cleanDeck($file)
  86 +{
  87 + $html = file_get_contents($file);
  88 + return preg_replace_callback('{(<pre[^>]+>)(.+?)(</pre>)}s', 'slippyRecode', $html);
  89 +}
47 90
48 91 /**
49 92 * Strips the leading whitespace off <pre> tags and html encodes them
50 93 */
51   -function slippy_recode($match)
  94 +function slippyRecode($match)
52 95 {
53 96 $whitespace = preg_replace('#^\r?\n?([ \t]*).*#s', '$1', $match[2]);
54 97 $output = preg_replace('/^'.preg_quote($whitespace, '/').'/m', '', $match[2]);
@@ -88,14 +131,13 @@ function fetchDecksData($decks)
88 131
89 132 /**
90 133 * Embeds all dependencies (js, css, images) into a slide deck file and serves it as a download
  134 + *
  135 + * @param string $html the content of the slides html file
91 136 */
92   -function downloadDeck($file)
  137 +function compactDeck($html)
93 138 {
94   - header('Content-Type: text/html');
95   - header('Content-Disposition: attachment; filename="'.$_GET['file'].'"');
96   - $baseUrl = ($_SERVER['SERVER_PORT'] === 443 ? 'https':'http') .'://'. $_SERVER['HTTP_HOST'].'/index.php';
97 139 $doc = new DOMDocument();
98   - @$doc->loadHTML($file);
  140 + @$doc->loadHTML($html);
99 141 $xpath = new DOMXPath($doc);
100 142 $jsFiles = $xpath->evaluate('//script[@type="text/javascript"][@src!=""]');
101 143 foreach ($jsFiles as $js) {
@@ -112,17 +154,37 @@ function downloadDeck($file)
112 154 $css->parentNode->replaceChild($node, $css);
113 155 }
114 156 $imgFiles = $xpath->evaluate('//img[@src!=""]');
115   - $types = array(
  157 + $imgAttributes = $xpath->evaluate('//*[@data-background!=""]');
  158 + foreach ($imgFiles as $img) {
  159 + $source = $img->getAttribute('src');
  160 + if ($data = convertImage($source)) {
  161 + $img->setAttribute('src', $data);
  162 + }
  163 + }
  164 + foreach ($imgAttributes as $img) {
  165 + $source = $img->getAttribute('data-background');
  166 + if ($data = convertImage($source)) {
  167 + $img->setAttribute('data-background', $data);
  168 + }
  169 + }
  170 +
  171 + return $doc->saveHTML();
  172 +}
  173 +
  174 +function convertImage($url)
  175 +{
  176 + static $types = array(
116 177 'png' => 'image/png',
117 178 'gif' => 'image/gif',
118 179 'jpg' => 'image/jpeg',
119 180 'jpeg' => 'image/jpeg',
120 181 );
121   - foreach ($imgFiles as $img) {
122   - $source = $img->getAttribute('src');
  182 +
  183 + if (PHP_SAPI !== 'cli') {
  184 + $baseUrl = ($_SERVER['SERVER_PORT'] === 443 ? 'https':'http') .'://'. $_SERVER['HTTP_HOST'].'/index.php';
123 185 $parts = parse_url($baseUrl);
124 186 $imgUrl = $parts['scheme'].'://'.$parts['host'];
125   - if ($source{0} !== '/') {
  187 + if ($url{0} !== '/') {
126 188 if (substr($parts['path'], -1) === '/') {
127 189 $imgUrl .= $parts['path'];
128 190 } elseif (dirname($parts['path']) === '\\') {
@@ -131,10 +193,13 @@ function downloadDeck($file)
131 193 $imgUrl .= dirname($parts['path']);
132 194 }
133 195 }
134   - $imgUrl .= $source;
135   - $ext = strtolower(substr($source, strrpos($source, '.') + 1));
136   - $data = 'data:'.$types[$ext].';base64,'.base64_encode(file_get_contents(str_replace(' ', '%20', $imgUrl)));
137   - $img->setAttribute('src', $data);
  196 + } else {
  197 + // no image path rewriting on cli
  198 + $imgUrl = '';
  199 + }
  200 + $imgUrl .= $url;
  201 + $ext = strtolower(substr($url, strrpos($url, '.') + 1));
  202 + if (isset($types[$ext])) {
  203 + return 'data:'.$types[$ext].';base64,'.base64_encode(file_get_contents(str_replace(' ', '%20', $imgUrl)));
138 204 }
139   - echo $doc->saveHTML();
140 205 }
16 src/slippy-pure.css
@@ -34,14 +34,14 @@ a.eval {
34 34 }
35 35
36 36 /** Overview screen */
37   -.overview .slide {
38   - -moz-border-radius: 2em;
39   - -webkit-border-radius: 2em;
40   - border-radius: 2em;
41   - border: 0.5em solid #ccc;
42   -}
43   -.overview .slide.active {
44   - border: 0.5em solid #888;
  37 +.overviewWrapper {
  38 + -moz-border-radius: .25em;
  39 + -webkit-border-radius: .25em;
  40 + border-radius: .25em;
  41 + border: 1px solid #ccc;
  42 +}
  43 +.overviewWrapper.active {
  44 + border: 1px solid #888;
45 45 }
46 46 .overviewWrapper:hover {
47 47 position: relative;
18 src/slippy.css
@@ -47,6 +47,23 @@ a.eval {
47 47 left: -100%;
48 48 }
49 49
  50 +body.slide-background .footer {
  51 + display: none;
  52 +}
  53 +
  54 +#slippy-slide-background {
  55 + width: 100%;
  56 + height: 100%;
  57 + position: absolute;
  58 + left: 0px;
  59 + top: 0px;
  60 + z-index: 0;
  61 +}
  62 +
  63 +body.overview #slippy-slide-background {
  64 + display: none;
  65 +}
  66 +
50 67 .layout {
51 68 display:none;
52 69 }
@@ -68,7 +85,6 @@ a.eval {
68 85
69 86 .overviewWrapper {
70 87 float: left;
71   - margin: 2%;
72 88 position: relative;
73 89 }
74 90
200 src/slippy.js
@@ -17,7 +17,7 @@
17 17 var slides, curSlide, options, inOverview,
18 18 incrementals, curIncremental = 0,
19 19 // methods
20   - buildSlide, preparePreTags, executeCode, nextSlide, prevSlide, showSlide, setSlide, getCurrentSlide,
  20 + buildSlide, preparePreTags, executeCode, nextSlide, prevSlide, showSlide, setSlide, getCurrentSlide, updateSlideBackground,
21 21 keyboardNav, antiScroll, urlChange, autoSize, clickNav, animInForward, animInRewind, animOutForward, animOutRewind,
22 22 incrementalBefore, incrementalAfter;
23 23
@@ -55,7 +55,7 @@
55 55 if ($(this).hasClass('eval')) {
56 56 $(this)
57 57 .before('<a class="eval">Execute</a>').prev()
58   - .data('src', content);
  58 + .data('src', $("<div/>").html(content).text());
59 59 }
60 60 match = content.match(/\r?\n?([ \t]*)/);
61 61 if (match && match[1]) {
@@ -98,24 +98,36 @@
98 98 $('.slideContent')
99 99 .height(slideH*0.95)
100 100 .css('margin', (slideH*0.05).toString() + "px auto 0");
101   - $('.slideContent img').each(function() {
102   - var ratio, imgWidth, imgHeight;
103   - imgWidth = $.data(this, 'origWidth');
104   - imgHeight = $.data(this, 'origHeight');
105   - if (!imgWidth || !imgHeight) {
106   - imgWidth = $(this).width();
107   - imgHeight = $(this).height();
108   - $.data(this, 'origWidth', imgWidth);
109   - $.data(this, 'origHeight', imgHeight);
110   - }
111   - if (imgWidth >= imgHeight) {
112   - ratio = Math.min(imgWidth, options.baseWidth) / options.baseWidth;
113   - $(this).css('width', Math.round(ratio * slideW * 0.9));
114   - } else {
115   - ratio = Math.min(imgHeight, options.baseWidth / options.ratio) / (options.baseWidth / options.ratio);
116   - $(this).css('height', Math.round(ratio * slideH * 0.9));
117   - }
118   - });
  101 + if (options.baseWidth) {
  102 + $('.slideContent img').each(function() {
  103 + if ($(this).hasClass('noscale')) return;
  104 + var ratio, imgWidth, imgHeight;
  105 + imgWidth = $.data(this, 'origWidth');
  106 + imgHeight = $.data(this, 'origHeight');
  107 + if (!imgWidth || !imgHeight) {
  108 + imgWidth = $(this).width();
  109 + imgHeight = $(this).height();
  110 + $.data(this, 'origWidth', imgWidth);
  111 + $.data(this, 'origHeight', imgHeight);
  112 + }
  113 + if (imgWidth >= imgHeight) {
  114 + ratio = Math.min(imgWidth, options.baseWidth) / options.baseWidth;
  115 + var target = Math.round(ratio * slideW * 0.9);
  116 + if (Math.abs(target - imgWidth) < options.imgScaleTrivial) {
  117 + // avoid useless scaling that just makes the image look ugly
  118 + target = imgWidth;
  119 + }
  120 + $(this).css('width', target);
  121 + } else {
  122 + ratio = Math.min(imgHeight, options.baseWidth / options.ratio) / (options.baseWidth / options.ratio);
  123 + var target = Math.round(ratio * slideH * 0.9);
  124 + if (Math.abs(target - imgHeight) < options.imgScaleTrivial) {
  125 + target = imgHeight;
  126 + }
  127 + $(this).css('height', target);
  128 + }
  129 + });
  130 + }
119 131 $('.slideContent embed').each(function() {
120 132 var ratio, imgWidth, newWidth, $el, $parent, $object;
121 133 $el = $(this);
@@ -145,9 +157,9 @@
145 157
146 158 resizeOverview = function() {
147 159 $('.overviewWrapper')
148   - .height(slideH * 0.13)
149   - .width(slideW * 0.15)
150   - .css('margin', slideH * 0.05);
  160 + .height(slideH * 0.2)
  161 + .width(slideW * 0.2)
  162 + .css('margin', slideH * 0.02);
151 163 };
152 164
153 165 centerVertically = function() {
@@ -246,13 +258,28 @@
246 258 // TODO show help;
247 259 break;
248 260
249   - // handle delete, esc, tab for overview
250   - case 9:
  261 + // handle delete, esc for overview
251 262 case 27:
252 263 case 46:
253 264 if ($.browser.msie && $.browser.version < 9) { break; }
254 265 if (inOverview) { break; }
255 266 slides.wrap($('<div/>').addClass('overviewWrapper'));
  267 +
  268 + slides.each(function (idx, el) {
  269 + var img;
  270 + el = $(el);
  271 + // mark wrapper as active for active slide
  272 + if (el.hasClass('active')) {
  273 + el.parent().addClass('active');
  274 + }
  275 +
  276 + // add slide backgrounds to overview wrappers
  277 + if (img = el.data('background')) {
  278 + el.parent().css('background', '#000 url("' + img + '") center center no-repeat')
  279 + .css('background-size', '100%');
  280 + }
  281 + });
  282 +
256 283 $('body').removeClass('slide-'+(curSlide+1)).addClass('overview');
257 284 slides.bind('click.slippyOverview', function (e) {
258 285 showSlide(slides.index(this));
@@ -413,6 +440,25 @@
413 440 curSlide = num;
414 441 slides.eq(curSlide).addClass('active');
415 442 $('.slideDisplay').text((num+1)+'/'+slides.length);
  443 + updateSlideBackground();
  444 + };
  445 +
  446 + updateSlideBackground = function() {
  447 + var img;
  448 + if (img = slides.eq(curSlide).data('background')) {
  449 + $('#slippy-slide-background').remove();
  450 + $('<div id="slippy-slide-background"></div>')
  451 + .prependTo('body')
  452 + .css('background-size', '100%')
  453 + .css('background-position', 'center center')
  454 + .css('background-image', 'url("' + img + '")')
  455 + .css('background-repeat', 'no-repeat')
  456 + .css('background-color', '#000')
  457 + $('body').addClass('slide-background');
  458 + } else {
  459 + $('#slippy-slide-background').remove();
  460 + $('body').removeClass('slide-background');
  461 + }
416 462 };
417 463
418 464 getCurrentSlide = function() {
@@ -427,59 +473,65 @@
427 473 };
428 474
429 475 $.fn.slippy = function(settings) {
430   - var defaults = {
431   - // animation duration for default anim callbacks, in milliseconds
432   - animLen: 350,
433   - // base width for proportional image scaling
434   - baseWidth: 620,
435   - // define animation callbacks, they receive a slide dom node to animate
436   - animInForward: animInForward,
437   - animInRewind: animInRewind,
438   - animOutForward: animOutForward,
439   - animOutRewind: animOutRewind,
440   - // margin fraction, defaults to 0.15
441   - margin: 0.15,
442   - // width/height ratio of the slides, defaults to 1.3 (620x476)
443   - ratio: 1.3,
444   - incrementalBefore: null,
445   - incrementalAfter: null
446   - };
447   -
448   - options = $.extend(defaults, settings);
449   -
450   - slides = this;
451   - $('<div/>').addClass('slideDisplay').prependTo('body');
452   -
453   - // wrap footer divs
454   - $('.footer').wrapInner($('<div/>').addClass('footerContent'));
455   -
456   - $('.incremental').each(incrementalBefore);
457   -
458   - // prep slides
459   - this.each(buildSlide);
460   - this.last().addClass('lastslide');
461   - $('.layout').remove();
462   -
463   - $(document)
464   - .click(clickNav)
465   - .keyup(keyboardNav);
  476 + if (slides === undefined) {
  477 + var defaults = {
  478 + // animation duration for default anim callbacks, in milliseconds
  479 + animLen: 350,
  480 + // base width for proportional image scaling
  481 + baseWidth: 620,
  482 + // do not scale images by less then this to avoid unncessery scaling (in pixels)
  483 + imgScaleTrivial: 30,
  484 + // define animation callbacks, they receive a slide dom node to animate
  485 + animInForward: animInForward,
  486 + animInRewind: animInRewind,
  487 + animOutForward: animOutForward,
  488 + animOutRewind: animOutRewind,
  489 + // margin fraction, defaults to 0.15
  490 + margin: 0.15,
  491 + // width/height ratio of the slides, defaults to 1.3 (620x476)
  492 + ratio: 1.3,
  493 + incrementalBefore: null,
  494 + incrementalAfter: null
  495 + };
  496 +
  497 + options = $.extend(defaults, settings);
  498 +
  499 + slides = this;
  500 + $('<div/>').addClass('slideDisplay').prependTo('body');
  501 +
  502 + // wrap footer divs
  503 + $('.footer').wrapInner($('<div/>').addClass('footerContent'));
  504 +
  505 + $('.incremental').each(incrementalBefore);
  506 +
  507 + // prep slides
  508 + this.each(buildSlide);
  509 + this.last().addClass('lastslide');
  510 + $('.layout').remove();
  511 +
  512 + $(document)
  513 + .click(clickNav)
  514 + .keyup(keyboardNav);
  515 +
  516 + slides.touch({
  517 + swipeLeft: nextSlide,
  518 + swipeRight: prevSlide,
  519 + tap: clickNav
  520 + });
466 521
467   - slides.touch({
468   - swipeLeft: nextSlide,
469   - swipeRight: prevSlide,
470   - tap: clickNav
471   - });
  522 + $(window)
  523 + .resize(autoSize.all)
  524 + .scroll(antiScroll);
472 525
473   - $(window)
474   - .resize(autoSize.all)
475   - .scroll(antiScroll);
  526 + $('img').load(autoSize.all);
476 527
477   - autoSize.all();
  528 + autoSize.all();
478 529
479   - $.history.init(urlChange);
480   - if (curSlide === undefined) {
481   - curSlide = -1;
482   - nextSlide();
  530 + $.history.init(urlChange);
  531 + if (curSlide === undefined) {
  532 + curSlide = -1;
  533 + nextSlide();
  534 + }
483 535 }
484 536
485 537 return {

0 comments on commit ef59ce2

Please sign in to comment.
Something went wrong with that request. Please try again.