Fix issue that data-x/y/z can't use relative-to-screen-size unit. (#815)

Author: thawk

js/impress.js

@@ -4131,9 +4131,9 @@
 
                 // Test, if it is a previous step that already has some assigned position data
                 if ( el.compareDocumentPosition( ref ) & Node.DOCUMENT_POSITION_PRECEDING ) {
-                    prev.x = toNumber( ref.getAttribute( "data-x" ) );
-                    prev.y = toNumber( ref.getAttribute( "data-y" ) );
-                    prev.z = toNumber( ref.getAttribute( "data-z" ) );
+                    prev.x = toNumberAdvanced( ref.getAttribute( "data-x" ) );
+                    prev.y = toNumberAdvanced( ref.getAttribute( "data-y" ) );
+                    prev.z = toNumberAdvanced( ref.getAttribute( "data-z" ) );
 
                     var prevPosition = ref.getAttribute( "data-rel-position" ) || "absolute";
 
@@ -4214,9 +4214,9 @@
         }
 
         var step = {
-                x: toNumber( data.x, prev.x ),
-                y: toNumber( data.y, prev.y ),
-                z: toNumber( data.z, prev.z ),
+                x: toNumberAdvanced( data.x, prev.x ),
+                y: toNumberAdvanced( data.y, prev.y ),
+                z: toNumberAdvanced( data.z, prev.z ),
                 rotate: {
                     x: toNumber( data.rotateX, 0 ),
                     y: toNumber( data.rotateY, 0 ),

src/plugins/rel/rel.js

@@ -79,9 +79,9 @@
 
                 // Test, if it is a previous step that already has some assigned position data
                 if ( el.compareDocumentPosition( ref ) & Node.DOCUMENT_POSITION_PRECEDING ) {
-                    prev.x = toNumber( ref.getAttribute( "data-x" ) );
-                    prev.y = toNumber( ref.getAttribute( "data-y" ) );
-                    prev.z = toNumber( ref.getAttribute( "data-z" ) );
+                    prev.x = toNumberAdvanced( ref.getAttribute( "data-x" ) );
+                    prev.y = toNumberAdvanced( ref.getAttribute( "data-y" ) );
+                    prev.z = toNumberAdvanced( ref.getAttribute( "data-z" ) );
 
                     var prevPosition = ref.getAttribute( "data-rel-position" ) || "absolute";
 
@@ -162,9 +162,9 @@
         }
 
         var step = {
-                x: toNumber( data.x, prev.x ),
-                y: toNumber( data.y, prev.y ),
-                z: toNumber( data.z, prev.z ),
+                x: toNumberAdvanced( data.x, prev.x ),
+                y: toNumberAdvanced( data.y, prev.y ),
+                z: toNumberAdvanced( data.z, prev.z ),
                 rotate: {
                     x: toNumber( data.rotateX, 0 ),
                     y: toNumber( data.rotateY, 0 ),

test/plugins/rel/relative_to_screen_size_tests.js

@@ -15,6 +15,7 @@ QUnit.test( "relative_to_screen_size", function( assert ) {
       var step1 = iframeDoc.querySelector( "div#step1" );
       var step2 = iframeDoc.querySelector( "div#step2" );
       var step3 = iframeDoc.querySelector( "div#step3" );
+      var overview = iframeDoc.querySelector( "div#overview" );
 
       assert.equal( origin.dataset.x, 0, "origin data-x attribute" );
       assert.equal( origin.dataset.y, 0, "origin data-y attribute" );
@@ -32,6 +33,10 @@ QUnit.test( "relative_to_screen_size", function( assert ) {
       assert.equal( step3.dataset.y, -750, "step3 data-y attribute" );
       assert.equal( step3.dataset.z, 1000, "step3 data-z attribute" );
 
+      assert.equal( overview.dataset.x, 2000,  "overview data-x attribute" );
+      assert.equal( overview.dataset.y, -1500, "overview data-y attribute" );
+      assert.equal( overview.dataset.z, 1500,  "overview data-z attribute" );
+
       done();
       console.log( "End relative_to_screen_size test (sync)" );
     } )

test/plugins/rel/relative_to_screen_size_tests_presentation.html

@@ -37,7 +37,7 @@
       <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 id="overview" class="step overview" data-x="1w" data-y="-1h" data-z="1h" data-scale="4" data-rotate-x="45">
       </div>
 
     </div>