From d3760dfa0a9c3f19150fea4ec253169aefb1b25d Mon Sep 17 00:00:00 2001 From: thawk Date: Sun, 13 Feb 2022 18:35:52 +0800 Subject: [PATCH] make data-x/y/z supports relative-to-screen size (#804) --- js/impress.js | 76 ++++++++++++++++++++---------------------- src/impress.js | 8 ++--- src/lib/util.js | 21 ++++++++++++ src/plugins/rel/rel.js | 36 +++++--------------- 4 files changed, 70 insertions(+), 71 deletions(-) diff --git a/js/impress.js b/js/impress.js index 637da41..a0187df 100644 --- a/js/impress.js +++ b/js/impress.js @@ -283,9 +283,9 @@ var data = el.dataset, step = { translate: { - x: lib.util.toNumber( data.x ), - y: lib.util.toNumber( data.y ), - z: lib.util.toNumber( data.z ) + x: lib.util.toNumberAdvanced( data.x ), + y: lib.util.toNumberAdvanced( data.y ), + z: lib.util.toNumberAdvanced( data.z ) }, rotate: { x: lib.util.toNumber( data.rotateX ), @@ -342,8 +342,7 @@ 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. + // Initialize the configuration object, so it can be used by pre-init plugins. config = buildConfig(); execPreInitPlugins( root ); @@ -356,10 +355,6 @@ document.head.appendChild( meta ); } - // Initialize configuration object. - // Pre-init plugins may make some change, so we calculate it again. - config = buildConfig(); - windowScale = computeWindowScale( config ); // Wrap steps with "canvas" element @@ -880,7 +875,7 @@ var thisLevel = preInitPlugins[ i ]; if ( thisLevel !== undefined ) { for ( var j = 0; j < thisLevel.length; j++ ) { - thisLevel[ j ]( root ); + thisLevel[ j ]( root, roots[ "impress-root-" + root.id ] ); } } } @@ -1253,6 +1248,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 ) { @@ -1269,6 +1284,7 @@ getElementFromHash: getElementFromHash, throttle: throttle, toNumber: toNumber, + toNumberAdvanced: toNumberAdvanced, triggerEvent: triggerEvent, getUrlParamValue: getUrlParamValue }; @@ -3467,7 +3483,9 @@ // Omit steps that are listed as hidden from select widget if ( hideSteps.indexOf( steps[ i ] ) < 0 ) { options = options + '' + '\n'; // jshint ignore:line + ( + steps[ i ].title ? steps[ i ].title : steps[ i ].id + ) + '' + '\n'; } } return options; @@ -3655,33 +3673,9 @@ var startingState = {}; - /** - * Copied from core impress.js. We currently lack a library mechanism to - * to share utility functions like this. - */ - var toNumber = function( numeric, fallback ) { - 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; - } - }; + var api; + var toNumber; + var toNumberAdvanced; var computeRelativePositions = function( el, prev ) { var data = el.dataset; @@ -3755,7 +3749,11 @@ return step; }; - var rel = function( root ) { + var rel = function( root, impressApi ) { + api = impressApi; + toNumber = api.lib.util.toNumber; + toNumberAdvanced = api.lib.util.toNumberAdvanced; + var steps = root.querySelectorAll( ".step" ); var prev; startingState[ root.id ] = []; diff --git a/src/impress.js b/src/impress.js index 5578222..92319cf 100644 --- a/src/impress.js +++ b/src/impress.js @@ -281,9 +281,9 @@ var data = el.dataset, step = { translate: { - x: lib.util.toNumber( data.x ), - y: lib.util.toNumber( data.y ), - z: lib.util.toNumber( data.z ) + x: lib.util.toNumberAdvanced( data.x ), + y: lib.util.toNumberAdvanced( data.y ), + z: lib.util.toNumberAdvanced( data.z ) }, rotate: { x: lib.util.toNumber( data.rotateX ), @@ -873,7 +873,7 @@ var thisLevel = preInitPlugins[ i ]; if ( thisLevel !== undefined ) { for ( var j = 0; j < thisLevel.length; j++ ) { - thisLevel[ j ]( root ); + thisLevel[ j ]( root, roots[ "impress-root-" + root.id ] ); } } } diff --git a/src/lib/util.js b/src/lib/util.js index d9aa38e..680fd74 100644 --- a/src/lib/util.js +++ b/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 }; diff --git a/src/plugins/rel/rel.js b/src/plugins/rel/rel.js index 4f58ba7..4312b23 100644 --- a/src/plugins/rel/rel.js +++ b/src/plugins/rel/rel.js @@ -50,33 +50,9 @@ var startingState = {}; - /** - * Copied from core impress.js. We currently lack a library mechanism to - * to share utility functions like this. - */ - var toNumber = function( numeric, fallback ) { - 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; - } - }; + var api; + var toNumber; + var toNumberAdvanced; var computeRelativePositions = function( el, prev ) { var data = el.dataset; @@ -150,7 +126,11 @@ return step; }; - var rel = function( root ) { + var rel = function( root, impressApi ) { + api = impressApi; + toNumber = api.lib.util.toNumber; + toNumberAdvanced = api.lib.util.toNumberAdvanced; + var steps = root.querySelectorAll( ".step" ); var prev; startingState[ root.id ] = [];