present: Scale down slides on smaller displays

On mobile and tablets, it was very difficult to view slides because the
slides were not designed to be smaller than 1250x750.

This adds a function to the JS that uses CSS scaling to make the slides
fit on smaller displays.

Fixes golang/go#21643

Change-Id: I68e9e2c1274aaf6396bf01d19ca023cddf76e2ec
Reviewed-on: https://go-review.googlesource.com/60270
Reviewed-by: Andrew Bonventre <andybons@golang.org>
Reviewed-by: Francesc Campoy Flores <campoy@golang.org>
Reviewed-by: Rob Pike <r@golang.org>
Run-TryBot: Francesc Campoy Flores <campoy@golang.org>
TryBot-Result: Gobot Gobot <gobot@golang.org>

cmd/present/static/slides.js

@@ -441,9 +441,34 @@ function handleBodyKeyDown(event) {
   }
 };
 
+function scaleSmallViewports() {
+  var el = document.querySelector('.slides');
+  var transform = '';
+  var sWidthPx = 1250;
+  var sHeightPx = 750;
+  var sAspectRatio = sWidthPx / sHeightPx;
+  var wAspectRatio = window.innerWidth / window.innerHeight;
+
+  if (wAspectRatio <= sAspectRatio && window.innerWidth < sWidthPx) {
+    transform = 'scale(' + window.innerWidth / sWidthPx + ')';
+  } else if (window.innerHeight < sHeightPx) {
+    transform = 'scale(' + window.innerHeight / sHeightPx + ')';
+  }
+  el.style.transform = transform;
+}
+
 function addEventListeners() {
   document.addEventListener('keydown', handleBodyKeyDown, false);
-};
+  var resizeTimeout;
+  window.addEventListener('resize', function() {
+    // throttle resize events
+    window.clearTimeout(resizeTimeout);
+    resizeTimeout = window.setTimeout(function() {
+      resizeTimeout = null;
+      scaleSmallViewports();
+    }, 50);
+  });
+}
 
 /* Initialization */
 
@@ -466,13 +491,15 @@ function addGeneralStyle() {
 
   var el = document.createElement('meta');
   el.name = 'viewport';
-  el.content = 'width=1100,height=750';
+  el.content = 'width=device-width,height=device-height,initial-scale=1';
   document.querySelector('head').appendChild(el);
 
   var el = document.createElement('meta');
   el.name = 'apple-mobile-web-app-capable';
   el.content = 'yes';
   document.querySelector('head').appendChild(el);
+
+  scaleSmallViewports();
 };
 
 function handleDomLoaded() {

cmd/present/static/styles.css

@@ -11,10 +11,9 @@
     display: block !important;
 
     height: 100%;
-    min-height: 740px;
+    height: 100vh;
 
-    overflow-x: hidden;
+    overflow: hidden;
-    overflow-y: auto;
 
     background: rgb(215, 215, 215);
     background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));