janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
thawk
2022-01-30 23:17:56 +08:00
committed by GitHub
parent ecbdd43ca8
commit 20f74a8b56
7 changed files with 148 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
js/impress.js
View File

@@ -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
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
)
};
// Initialize configuration object.
// Pre-init plugins may make some change, so we calculate it again.
config = buildConfig();
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;
}
};

1
karma.conf.js
View File

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

1
qunit_test_runner.html
View File

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

41
src/impress.js
View File

@@ -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++ ) {

3
src/plugins/rel/rel.js
View File

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

40
test/plugins/rel/relative_to_screen_size_tests.js Normal file
View File

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

48
test/plugins/rel/relative_to_screen_size_tests_presentation.html Normal file
View File

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