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

This commit is contained in:
thawk
2022-02-13 18:35:52 +08:00
committed by GitHub
parent 20f74a8b56
commit d3760dfa0a
4 changed files with 70 additions and 71 deletions

View File

@@ -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 ] );
}
}
}

View File

@@ -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
};

View File

@@ -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 ] = [];