Scale down slides instead of cropping

2 files changed, 35 insertions, 1 deletions

diff --git a/js/slide-elastic.js b/js/slide-elastic.js
new file mode 100644
index 0000000..3ac491f
--- /dev/null
+++ b/js/slide-elastic.js
@@ -0,0 +1,30 @@
+/*
+ * Inspired by https://github.com/francescolaffi/elastic-google-io-slides/blob/master/js/slide-elastic.js
+ */
+(function() {
+
+        var container = document.getElementsByTagName('slides')[0];
+        var slide = document.getElementsByTagName('slide')[0];
+
+        var resize = function() {
+                var transform;
+                if (window.innerWidth < slide.offsetWidth
+                                || window.innerHeight < slide.offsetHeight) {
+                        var sx = window.innerWidth / slide.offsetWidth;
+                        var sy = window.innerHeight / slide.offsetHeight;
+                        transform = 'scale(' + Math.min(sx, sy) + ')';
+                } else {
+                        transform = 'none';
+                }
+
+                container.style.MozTransform = transform;
+                container.style.WebkitTransform = transform;
+                container.style.OTransform = transform;
+                container.style.msTransform = transform;
+                container.style.transform = transform;
+        };
+
+        window.addEventListener('resize', resize);
+        resize();
+
+})();
diff --git a/js/slides.js b/js/slides.js
index 3482287..e57faa2 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -3,6 +3,7 @@ require.config({
                 'slide_config' : '../slide_config',
                 'slide-controller' : 'slide-controller',
                 'slide-deck' : 'slide-deck',
+                'slide-elastic' : 'slide-elastic',
 
                 'modernizr' : 'modernizr.custom.56571',
                 'prettify' : 'prettify/prettify',
@@ -18,7 +19,10 @@ require.config({
                 'slide-deck' : {
                         deps : ['slide_config', 'slide-controller', 'modernizr'],
                 },
+                'slide-elastic' : {
+                        deps : ['slide-deck'],
+                },
         },
 });
 
-require(['slide-deck']);
+require(['slide-elastic']);