make data-x/y/z supports relative-to-screen size (#804)

src/lib/util.js

@@ -81,6 +81,26 @@
             return isNaN( numeric ) ? ( fallback || 0 ) : Number( numeric );
         };
 
+        /**
+         * Extends toNumber() to correctly compute also relative-to-screen-size values 5w and 5h.
+         *
+         * Returns the computed value in pixels with w/h postfix removed.
+         */
+        var toNumberAdvanced = function( numeric, fallback ) {
+            if ( typeof numeric !== "string" ) {
+                return toNumber( numeric, fallback );
+            }
+            var ratio = numeric.match( /^([+-]*[\d\.]+)([wh])$/ );
+            if ( ratio == null ) {
+                return toNumber( numeric, fallback );
+            } else {
+                var value = parseFloat( ratio[ 1 ] );
+                var config = window.impress.getConfig();
+                var multiplier = ratio[ 2 ] === "w" ? config.width : config.height;
+                return value * multiplier;
+            }
+        };
+
         // `triggerEvent` builds a custom DOM event with given `eventName` and `detail` data
         // and triggers it on element given as `el`.
         var triggerEvent = function( el, eventName, detail ) {
@@ -97,6 +117,7 @@
             getElementFromHash: getElementFromHash,
             throttle: throttle,
             toNumber: toNumber,
+            toNumberAdvanced: toNumberAdvanced,
             triggerEvent: triggerEvent,
             getUrlParamValue: getUrlParamValue
         };