Fix relative-to-screen-size calculation (h and w) (#799)

js/impress.js

@@ -179,6 +179,9 @@
         transitionDuration: 1000
     };
 
+    // Configuration options
+    var config = null;
+
     // It's just an empty function ... and a useless comment.
     var empty = function() { return false; };
 
@@ -230,9 +233,6 @@
         // Array of step elements
         var steps = null;
 
-        // Configuration options
-        var config = null;
-
         // Scale factor of the browser window
         var windowScale = null;
 
@@ -323,9 +323,28 @@
             steps.forEach( initStep );
         };
 
+        // Build configuration from root and defaults
+        var buildConfig = function() {
+            var rootData = root.dataset;
+            return {
+                width: lib.util.toNumber( rootData.width, defaults.width ),
+                height: lib.util.toNumber( rootData.height, defaults.height ),
+                maxScale: lib.util.toNumber( rootData.maxScale, defaults.maxScale ),
+                minScale: lib.util.toNumber( rootData.minScale, defaults.minScale ),
+                perspective: lib.util.toNumber( rootData.perspective, defaults.perspective ),
+                transitionDuration: lib.util.toNumber(
+                    rootData.transitionDuration, defaults.transitionDuration
+                )
+            };
+        };
+
         // `init` API function that initializes (and runs) the presentation.
         var init = function() {
             if ( initialized ) { return; }
+
+            // Initialize configuration object to be used by pre-init plugins.
+            // Some config may be changed by pre-init plugins.
+            config = buildConfig();
             execPreInitPlugins( root );
 
             // First we set up the viewport for mobile devices.
@@ -337,18 +356,9 @@
                 document.head.appendChild( meta );
             }
 
-            // Initialize configuration object
+            // Initialize configuration object.
-            var rootData = root.dataset;
+            // Pre-init plugins may make some change, so we calculate it again.
-            config = {
+            config = buildConfig();
-                width: lib.util.toNumber( rootData.width, defaults.width ),
-                height: lib.util.toNumber( rootData.height, defaults.height ),
-                maxScale: lib.util.toNumber( rootData.maxScale, defaults.maxScale ),
-                minScale: lib.util.toNumber( rootData.minScale, defaults.minScale ),
-                perspective: lib.util.toNumber( rootData.perspective, defaults.perspective ),
-                transitionDuration: lib.util.toNumber(
-                    rootData.transitionDuration, defaults.transitionDuration
-                )
-            };
 
             windowScale = computeWindowScale( config );
 
@@ -890,6 +900,10 @@
         preStepLeavePlugins[ weight ].push( plugin );
     };
 
+    impress.getConfig = function() {
+        return config;
+    };
+
     // Called at beginning of goto(), to execute all preStepLeave plugins.
     var execPreStepLeavePlugins = function( event ) { //jshint ignore:line
         for ( var i = 0; i < preStepLeavePlugins.length; i++ ) {
@@ -3663,7 +3677,8 @@
             return toNumber( numeric, fallback );
         } else {
             var value = parseFloat( ratio[ 1 ] );
-            var multiplier = ratio[ 2 ] === "w" ? window.innerWidth : window.innerHeight;
+            var config = window.impress.getConfig();
+            var multiplier = ratio[ 2 ] === "w" ? config.width : config.height;
             return value * multiplier;
         }
     };

karma.conf.js

@@ -22,6 +22,7 @@ module.exports = function(config) {
       "test/core_tests.js",
       "test/non_default.js",
       "src/plugins/navigation/navigation_tests.js",
+      "test/plugins/rel/relative_to_screen_size_tests.js",
       // Presentation files, for the iframe
       {pattern: "test/*.html", watched: true, served: true, included: false},
       {pattern: "test/plugins/*/*.html", watched: true, served: true, included: false},

qunit_test_runner.html

@@ -20,5 +20,6 @@
   <script src="test/non_default.js"></script>
   <!-- Plugins -->
   <script src="src/plugins/navigation/navigation_tests.js"></script>
+  <script src="test/plugins/rel/relative_to_screen_size_tests.js"></script>
 </body>
 </html>

src/impress.js

@@ -177,6 +177,9 @@
         transitionDuration: 1000
     };
 
+    // Configuration options
+    var config = null;
+
     // It's just an empty function ... and a useless comment.
     var empty = function() { return false; };
 
@@ -228,9 +231,6 @@
         // Array of step elements
         var steps = null;
 
-        // Configuration options
-        var config = null;
-
         // Scale factor of the browser window
         var windowScale = null;
 
@@ -321,9 +321,27 @@
             steps.forEach( initStep );
         };
 
+        // Build configuration from root and defaults
+        var buildConfig = function() {
+            var rootData = root.dataset;
+            return {
+                width: lib.util.toNumber( rootData.width, defaults.width ),
+                height: lib.util.toNumber( rootData.height, defaults.height ),
+                maxScale: lib.util.toNumber( rootData.maxScale, defaults.maxScale ),
+                minScale: lib.util.toNumber( rootData.minScale, defaults.minScale ),
+                perspective: lib.util.toNumber( rootData.perspective, defaults.perspective ),
+                transitionDuration: lib.util.toNumber(
+                    rootData.transitionDuration, defaults.transitionDuration
+                )
+            };
+        };
+
         // `init` API function that initializes (and runs) the presentation.
         var init = function() {
             if ( initialized ) { return; }
+
+            // Initialize the configuration object, so it can be used by pre-init plugins.
+            config = buildConfig();
             execPreInitPlugins( root );
 
             // First we set up the viewport for mobile devices.
@@ -335,19 +353,6 @@
                 document.head.appendChild( meta );
             }
 
-            // Initialize configuration object
-            var rootData = root.dataset;
-            config = {
-                width: lib.util.toNumber( rootData.width, defaults.width ),
-                height: lib.util.toNumber( rootData.height, defaults.height ),
-                maxScale: lib.util.toNumber( rootData.maxScale, defaults.maxScale ),
-                minScale: lib.util.toNumber( rootData.minScale, defaults.minScale ),
-                perspective: lib.util.toNumber( rootData.perspective, defaults.perspective ),
-                transitionDuration: lib.util.toNumber(
-                    rootData.transitionDuration, defaults.transitionDuration
-                )
-            };
-
             windowScale = computeWindowScale( config );
 
             // Wrap steps with "canvas" element
@@ -888,6 +893,10 @@
         preStepLeavePlugins[ weight ].push( plugin );
     };
 
+    impress.getConfig = function() {
+        return config;
+    };
+
     // Called at beginning of goto(), to execute all preStepLeave plugins.
     var execPreStepLeavePlugins = function( event ) { //jshint ignore:line
         for ( var i = 0; i < preStepLeavePlugins.length; i++ ) {

src/plugins/rel/rel.js

@@ -72,7 +72,8 @@
             return toNumber( numeric, fallback );
         } else {
             var value = parseFloat( ratio[ 1 ] );
-            var multiplier = ratio[ 2 ] === "w" ? window.innerWidth : window.innerHeight;
+            var config = window.impress.getConfig();
+            var multiplier = ratio[ 2 ] === "w" ? config.width : config.height;
             return value * multiplier;
         }
     };

test/plugins/rel/relative_to_screen_size_tests.js

@@ -0,0 +1,40 @@
+QUnit.module( "rel plugin relative to screen size tests" );
+
+QUnit.test( "relative_to_screen_size", function( assert ) {
+  window.console.log( "Begin relative_to_screen_size" );
+  var done = assert.async();
+
+  loadIframe( "test/plugins/rel/relative_to_screen_size_tests_presentation.html", assert, function() {
+    initPresentation( assert, function() {
+      var iframe = document.getElementById( "presentation-iframe" );
+      var iframeDoc = iframe.contentDocument;
+
+      var root  = iframeDoc.querySelector( "div#impress" );
+
+      var origin = iframeDoc.querySelector( "div#origin" );
+      var step1 = iframeDoc.querySelector( "div#step1" );
+      var step2 = iframeDoc.querySelector( "div#step2" );
+      var step3 = iframeDoc.querySelector( "div#step3" );
+
+      assert.equal( origin.dataset.x, 0, "origin data-x attribute" );
+      assert.equal( origin.dataset.y, 0, "origin data-y attribute" );
+      assert.equal( origin.dataset.z, 0, "origin data-z attribute" );
+
+      assert.equal( step1.dataset.x, 2000, "step1 data-x attribute" );
+      assert.equal( step1.dataset.y, 1500, "step1 data-y attribute" );
+      assert.equal( step1.dataset.z, -2000, "step1 data-z attribute" );
+
+      assert.equal( step2.dataset.x, -3000, "step2 data-x attribute" );
+      assert.equal( step2.dataset.y, -4000, "step2 data-y attribute" );
+      assert.equal( step2.dataset.z, 3000, "step2 data-z attribute" );
+
+      assert.equal( step3.dataset.x, 1000, "step3 data-x attribute" );
+      assert.equal( step3.dataset.y, -750, "step3 data-y attribute" );
+      assert.equal( step3.dataset.z, 1000, "step3 data-z attribute" );
+
+      done();
+      console.log( "End relative_to_screen_size test (sync)" );
+    } )
+  } ); // LoadIframe()
+} );
+

test/plugins/rel/relative_to_screen_size_tests_presentation.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>The presentation steps used in an iframe in rel/relative_to_screen_size_tests.js</title>
+    <style type="text/css" media="screen">
+.step {
+    position: relative;
+    width: 500px;
+    height: 500px;
+    padding: 40px 60px;
+    margin: 20px auto;
+
+    box-sizing:         border-box;
+
+    line-height: 1.5;
+
+    background-color: yellow;
+    border-radius: 10px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
+
+    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
+
+    font-family: 'Open Sans', Arial, sans-serif;
+    font-size: 40pt;
+    letter-spacing: -1px;
+    border: solid 1px red;
+    opacity: 50%;
+}
+    </style>
+  </head>
+
+  <body class="impress-not-supported">
+    <div id="impress" data-width="2000" data-height="1500">
+      <div id="origin"   class="step" data-rel-position="relative" data-x="0" data-y="0" data-z="0"></div>
+      <div id="step1" class="step" data-rel-to="origin" data-rel-x="1w" data-rel-y="1h" data-rel-z="-1w"></div>
+      <div id="step2" class="step" data-rel-to="origin" data-rel-x="-2h" data-rel-y="-2w" data-rel-z="2h"></div>
+      <div id="step3" class="step" data-rel-to="origin" data-rel-x="0.5w" data-rel-y="-0.5h" data-rel-z="0.5w"></div>
+
+      <div id="overview" class="step overview" data-x="0" data-y="-1000" data-z="100" data-scale="4" data-rotate-x="45">
+      </div>
+
+    </div>
+
+    <script src="../../../js/impress.js"></script>
+    <!-- <script>impress().init();</script> -->
+  </body>
+<html>