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

Some ideas on API

Browse Source 
probably not going to continue, as there is nowhere near enough need for
it
This commit is contained in:
Janis Hutz
2025-10-24 14:29:51 +02:00
parent ef80cf45dc
commit 77a83f6a4e
9 changed files with 937 additions and 969 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1496
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "impress.js",
"version": "1.1.0",
"version": "3.0.0",
"description": "It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.",
"main": "js/impress.js",
"repository": {

118
src/build.js
View File

@@ -1,75 +1,75 @@
const fs = require('fs');
var ls = require('ls');
var path = require('path');
var Terser = require("terser");
const fs = require( 'fs' );
var ls = require( 'ls' );
var path = require( 'path' );
var Terser = require( 'terser' );
var files = ['src/impress.js'];
// Libraries from src/lib
files.push('src/lib/gc.js', 'src/lib/util.js', 'src/lib/rotation.js')
files.push( 'src/lib/gc.js', 'src/lib/util.js', 'src/lib/rotation.js' );
// Plugins from src/plugins
files.push('src/plugins/autoplay/autoplay.js',
'src/plugins/blackout/blackout.js',
'src/plugins/extras/extras.js',
'src/plugins/form/form.js',
'src/plugins/fullscreen/fullscreen.js',
'src/plugins/goto/goto.js',
'src/plugins/bookmark/bookmark.js',
'src/plugins/help/help.js',
'src/plugins/impressConsole/impressConsole.js',
'src/plugins/media/media.js',
'src/plugins/mobile/mobile.js',
'src/plugins/mouse-timeout/mouse-timeout.js',
'src/plugins/navigation/navigation.js',
'src/plugins/navigation-ui/navigation-ui.js',
'src/plugins/progress/progress.js',
'src/plugins/rel/rel.js',
'src/plugins/resize/resize.js',
'src/plugins/skip/skip.js',
'src/plugins/stop/stop.js',
'src/plugins/substep/substep.js',
'src/plugins/touch/touch.js',
'src/plugins/toolbar/toolbar.js')
var output = files.map((f)=>{
return fs.readFileSync(f).toString();
}).join('\n')
files.push(
'src/plugins/autoplay/autoplay.js',
'src/plugins/blackout/blackout.js',
'src/plugins/extras/extras.js',
'src/plugins/form/form.js',
'src/plugins/fullscreen/fullscreen.js',
'src/plugins/goto/goto.js',
'src/plugins/bookmark/bookmark.js',
'src/plugins/help/help.js',
'src/plugins/impressConsole/impressConsole.js',
'src/plugins/media/media.js',
'src/plugins/mobile/mobile.js',
'src/plugins/mouse-timeout/mouse-timeout.js',
'src/plugins/navigation/navigation.js',
'src/plugins/navigation-ui/navigation-ui.js',
'src/plugins/progress/progress.js',
'src/plugins/rel/rel.js',
'src/plugins/resize/resize.js',
'src/plugins/skip/skip.js',
'src/plugins/stop/stop.js',
'src/plugins/substep/substep.js',
'src/plugins/touch/touch.js',
'src/plugins/toolbar/toolbar.js'
);
var output = files.map( ( f ) => fs.readFileSync( f ).toString() ).join( '\n' );
var filename = 'js/impress.js';
fs.writeFileSync(filename, '// This file was automatically generated from files in src/ directory.\n\n' + output)
console.log(filename);
fs.writeFileSync( filename, '// This file was automatically generated from files in src/ directory.\n\n' + output );
console.log( filename );
// terser --compress --mangle --comments '/^!/' --source-map --output js/impress.min.js js/impress.js
var code = fs.readFileSync('js/impress.js').toString();
var code = fs.readFileSync( 'js/impress.js' ).toString();
var options = {
sourceMap: {
filename: 'js/impress.js',
url: 'js/impress.min.js.map'
},
output: {
comments: /^!/
}
sourceMap: {
filename: 'js/impress.js',
url: 'js/impress.min.js.map'
},
output: {
comments: /^!/
}
};
var result = Terser.minify({'js/impress.js': code}, options);
var result = Terser.minify( { 'js/impress.js': code }, options );
filename = 'js/impress.min.js';
fs.writeFileSync(filename, result.code);
console.log(filename);
fs.writeFileSync( filename, result.code );
console.log( filename );
filename = 'js/impress.min.js.map';
fs.writeFileSync(filename, result.map);
console.log(filename);
fs.writeFileSync( filename, result.map );
console.log( filename );
/* Auto generate an index.html that lists all the directories under examples/
* This is useful for gh-pages, so you can link to http://impress.github.io/impress.js/examples
*/
var html_list = '<ul><br />\n'
ls( 'examples/*', { type: 'dir' }).forEach(function(dir) {
html_list += ' <li><a href="' + dir['file'] + '/">' + dir['name'] + '</a></li>\n';
});
html_list += '</ul>\n'
// Auto generate an index.html that lists all the directories under examples/
// This is useful for gh-pages, so you can link to http://impress.github.io/impress.js/examples
//
var html_list = '<ul><br />\n';
ls( 'examples/*', { type: 'dir' } ).forEach( function( dir ) {
html_list += ' <li><a href="' + dir.file + '/">' + dir.name + '</a></li>\n';
} );
html_list += '</ul>\n';
var html = '<html>\n<head>\n<title>Example presentations</title>\n</head>\n<body>'
html += '<h1>Example presentations</h1>\n' + html_list
html += '</body>\n</html>'
var html = '<html>\n<head>\n<title>Example presentations</title>\n</head>\n<body>';
html += '<h1>Example presentations</h1>\n' + html_list;
html += '</body>\n</html>';
filename = path.resolve(__dirname, 'examples', 'index.html');
fs.writeFileSync(filename, html);
console.log(filename);
filename = path.resolve( __dirname, 'examples', 'index.html' );
fs.writeFileSync( filename, html );
console.log( filename );

30
src/impress.js
View File

@@ -58,6 +58,16 @@ window.impress = ( impressConfig ) => {
// So I had it shut up
// eslint-disable-next-line prefer-const
let initializedElements = {};
const cameraPosition = {
'x': 0,
'y': 0,
'z': 0
};
const cameraRotation = {
'x': 0,
'y': 0,
'z': 0
};
// Check if impress is supported. We use the CSS.supports API which is supported in all
// browsers except IE, for which we dropped support with V3 to move forward with state-of-the-art
@@ -65,7 +75,11 @@ window.impress = ( impressConfig ) => {
// eslint-disable-next-line no-warning-comments
// TODO: Add additional required elements to checks as well
const isImpressSupported = ( CSS !== undefined ) && CSS.supports( 'perspective', '100px' ) && ( document.body.classList ) && document.body.dataset;
const isImpressSupported = ( CSS !== undefined ) &&
CSS.supports( 'perspective', '100px' ) &&
( document.body.classList ) &&
document.body.dataset;
if ( !isImpressSupported ) {
// We can't be sure that classList exists, so let's better not use it
document.body.className += ' impress-not-supported';
@@ -114,6 +128,7 @@ window.impress = ( impressConfig ) => {
console.log( impressMain.dataset );
// If config is passed in via argument, don't use the dataset from the main div, otherwise, parse it
if ( !impressConfig ) {
// TODO: Initialize
impressConfig = new ImpressConfig();
}
@@ -149,6 +164,8 @@ window.impress = ( impressConfig ) => {
rotation.x = rotation.x ?? 0;
rotation.y = rotation.y ?? 0;
rotation.z = rotation.z ?? 0;
// Keep track of all elements
initializedElements[ DOMElementID ] = {
coordinates: coordinates,
rotation: rotation,
@@ -226,7 +243,7 @@ window.impress = ( impressConfig ) => {
* @returns {object} Returns an object that contains an object of the coordinates and rotation:
* { coordinates: { x: number, y: number, z: number }, rotation: { x: number, y: number, z: number }
*/
const getCurrentPos = () => ( { coordinates: { x: 0, y: 0, z: 0 }, rotation: { x: 0, y: 0, z: 0 } } );
const getCurrentPos = () => ( { coordinates: cameraPosition, rotation: cameraRotation } );
/**
@@ -238,12 +255,16 @@ window.impress = ( impressConfig ) => {
/**
* Update the impress config.
* @param {ImpressConfig} impressConfigs The new impress config
* @returns {undefined} Returns nothing
* @returns {void} Returns nothing
*/
const updateConfig = ( impressConfigs ) => {
impressConfig = impressConfigs;
};
const tear = () => {
// TODO: Implement
};
// Return all functions that are exposed by impress. This is superior to using classes as we can control what functions we expose.
return {
init,
@@ -253,6 +274,7 @@ window.impress = ( impressConfig ) => {
addElement,
getCurrentPos,
getCurrentConfig,
updateConfig
updateConfig,
tear
};
};

7
src/lib/position.js
View File

@@ -0,0 +1,7 @@
// File name: position.js
// Author: Janis Hutz
// Date created: 2025-10-24 13:54:52
// Date modified: 2025-10-24 13:54:53
// ------

85
src/lib/render.js Normal file
View File

@@ -0,0 +1,85 @@
// File name: render.js
// Author: Janis Hutz
// Date created: 2025-10-24 14:04:37
// Date modified: 2025-10-24 14:26:50
// ------
class ImpressCamera {
constructor () {
this.position = {
'x': 0,
'y': 0,
'z': 0
};
this.rotation = {
'x': 0,
'y': 0,
'z': 0
};
}
setPosition ( x, y, z ) {
this.position.x = x;
this.position.y = y;
this.position.z = z;
}
setRotation ( x, y, z ) {
this.rotation.x = x;
this.rotation.y = y;
this.rotation.z = z;
}
getState () {
return {
'position': this.position,
'rotation': this.rotation
};
}
}
class ImpressElement {
// eslint-disable-next-line max-params
constructor ( element, x, y, z, rotationX, rotationY, rotationZ ) {
this.element = element;
this.position = {
'x': x,
'y': y,
'z': z
};
this.rotation = {
'x': rotationX,
'y': rotationY,
'z': rotationZ
};
}
}
const renderer = () => {
const camera = new ImpressCamera();
const addElement = ( HTMLElement ) => {
// Element will need data-x, data-y, data-z, etc dataset
};
const removeElement = ( HTMLElement ) => {
};
const render = () => {
};
const moveTo = ( x, y, z, rotationX, rotationY, rotationZ ) => {
};
return {
addElement,
removeElement,
moveTo
};
};

7
src/lib/rotation.js
View File

@@ -0,0 +1,7 @@
// File name: rotation.js
// Author: Janis Hutz
// Date created: 2025-10-24 13:54:49
// Date modified: 2025-10-24 13:54:50
// ------

9
src/lib/vectorUtil.js
View File

@@ -6,7 +6,7 @@
* in modern browsers and inspired by the idea behind prezi.com.
*
*
* Copyright 2011-2012 Bartek Szopka (@bartaz), 2016-2024 Henrik Ingo (@henrikingo), 2024 Janis Hutz
* Copyright 2011-2012 Bartek Szopka (@bartaz), 2016-present Henrik Ingo (@henrikingo), 2025-present Janis Hutz
* and 70+ other contributors
*
* Released under the MIT License.
@@ -63,9 +63,10 @@ window.impressVectorUtil = () => {
* @param {Vector} vec The vector of which to calculate the norm
* @returns {number} Returns the norm
*/
var norm = function( vec ) {
return Math.sqrt( ( vec.x * vec.x ) + ( vec.y * vec.y ) + ( vec.z * vec.z ) );
};
const norm = ( vec ) => Math.sqrt( ( vec.x * vec.x ) + ( vec.y * vec.y ) + ( vec.z * vec.z ) );
const baseChange = ( angle ) => {};
return {
norm,

152
test/helpers.js
View File

@@ -5,103 +5,109 @@
// Log all QUnit assertions to console.log(), so that they are visible in karma output
QUnit.log( function( details ) {
console.log( 'QUnit.log: ', details.result, details.message );
console.log( 'QUnit.log: ', details.result, details.message );
} );
var loadIframe = function( src, assert, callback ) {
console.log( 'Begin loadIframe' );
console.log( 'Begin loadIframe' );
// When running in Karma, the #qunit-fixture appears from somewhere and we can't set its
// contents in advance, so we set it now.
var fix = document.getElementById( 'qunit-fixture' );
fix.innerHTML = [
'\n',
' <iframe id="presentation-iframe"\n',
' width="595" height="485"\n',
' frameborder="0" marginwidth="0" marginheight="0" scrolling="no"\n',
' style="border:1px solid #CCC; max-width: 100%;">\n',
' </iframe>'
// When running in Karma, the #qunit-fixture appears from somewhere and we can't set its
// contents in advance, so we set it now.
var fix = document.getElementById( 'qunit-fixture' );
fix.innerHTML = [
'\n',
' <iframe id="presentation-iframe"\n',
' width="595" height="485"\n',
' frameborder="0" marginwidth="0" marginheight="0" scrolling="no"\n',
' style="border:1px solid #CCC; max-width: 100%;">\n',
' </iframe>'
].join( '' );
var iframe = document.getElementById( 'presentation-iframe' );
var iframe = document.getElementById( 'presentation-iframe' );
var onLoad = function() {
assert.ok( true,
'Presentation loaded. iframe.src = ' + iframe.src );
try {
assert.ok( iframe.contentDocument,
'Verifying that tests can access the presentation inside the iframe. ' +
'Note: On Firefox this fails when using paths with "../" parts for the iframe.' );
}
catch ( err ) {
assert.ok( false,
'Error when trying to access presentation in iframe. Note: When using Chrome with ' +
var onLoad = function() {
assert.ok(
true,
'Presentation loaded. iframe.src = ' + iframe.src
);
try {
assert.ok(
iframe.contentDocument,
'Verifying that tests can access the presentation inside the iframe. ' +
'Note: On Firefox this fails when using paths with "../" parts for the iframe.'
);
} catch ( err ) {
assert.ok(
false,
'Error when trying to access presentation in iframe. Note: When using Chrome with ' +
'local files (file:///) this will fail with SecurityError. ' +
'You can however use Chrome over Karma.' );
}
console.log( 'End loadIframe' );
callback();
};
'You can however use Chrome over Karma.'
);
}
console.log( 'End loadIframe' );
callback();
};
iframe.addEventListener( 'load', onLoad );
iframe.addEventListener( 'load', onLoad );
assert.ok( iframe.src = src,
'Setting iframe.src = ' + src );
assert.ok(
iframe.src = src,
'Setting iframe.src = ' + src
);
};
var initPresentation = function( assert, callback, rootId ) {
console.log( 'Begin initPresentation' );
var iframe = document.getElementById( 'presentation-iframe' );
var iframeDoc = iframe.contentDocument;
var iframeWin = iframe.contentWindow;
console.log( 'Begin initPresentation' );
var iframe = document.getElementById( 'presentation-iframe' );
var iframeDoc = iframe.contentDocument;
var iframeWin = iframe.contentWindow;
// Impress:stepenter is the last event triggered in init(), so we wait for that.
var waitForStepEnter = function( event ) {
assert.ok( true, 'impress (' + event.target.id + ') is now initialized.' );
iframeDoc.removeEventListener( 'impress:stepenter', waitForStepEnterWrapper );
console.log( 'End initPresentation' );
callback();
};
// Impress:stepenter is the last event triggered in init(), so we wait for that.
var waitForStepEnter = function( event ) {
assert.ok( true, 'impress (' + event.target.id + ') is now initialized.' );
iframeDoc.removeEventListener( 'impress:stepenter', waitForStepEnterWrapper );
console.log( 'End initPresentation' );
callback();
};
// Unfortunately, impress.js uses the impress:stepenter event internally to
// do some things related to entering a step. This causes a race condition when
// we listen for the same event and expect it to be done with everything.
// We wait 5 ms to resolve the race condition, then it's safe to start testing.
var waitForStepEnterWrapper = function( event ) {
setTimeout( function() { waitForStepEnter( event ); }, 5 );
};
iframeDoc.addEventListener( 'impress:stepenter', waitForStepEnterWrapper );
// Unfortunately, impress.js uses the impress:stepenter event internally to
// do some things related to entering a step. This causes a race condition when
// we listen for the same event and expect it to be done with everything.
// We wait 5 ms to resolve the race condition, then it's safe to start testing.
var waitForStepEnterWrapper = function( event ) {
setTimeout( function() { waitForStepEnter( event ); }, 5 );
};
iframeDoc.addEventListener( 'impress:stepenter', waitForStepEnterWrapper );
assert.strictEqual( iframeWin.impress( rootId ).init(), undefined, 'Initializing impress.' );
assert.strictEqual( iframeWin.impress( rootId ).init(), undefined, 'Initializing impress.' );
};
// Helper function to determine whether this browser is supported by
// impress.js or not. Copied from impress.js itself.
var _impressSupported = function() {
var pfx = ( function() {
var style = document.createElement( 'dummy' ).style,
prefixes = 'Webkit Moz O ms Khtml'.split( ' ' ),
memory = {};
return function( prop ) {
if ( typeof memory[ prop ] === 'undefined' ) {
var ucProp = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ),
props = ( prop + ' ' + prefixes.join( ucProp + ' ' ) + ucProp ).split( ' ' );
memory[ prop ] = null;
for ( var i in props ) {
if ( style[ props[ i ] ] !== undefined ) {
memory[ prop ] = props[ i ];
break;
var pfx = ( function() {
var style = document.createElement( 'dummy' ).style,
prefixes = 'Webkit Moz O ms Khtml'.split( ' ' ),
memory = {};
return function( prop ) {
if ( typeof memory[ prop ] === 'undefined' ) {
var ucProp = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ),
props = ( prop + ' ' + prefixes.join( ucProp + ' ' ) + ucProp ).split( ' ' );
memory[ prop ] = null;
for ( var i in props ) {
if ( style[ props[ i ] ] !== undefined ) {
memory[ prop ] = props[ i ];
break;
}
}
}
}
}
return memory[ prop ];
};
} )();
return memory[ prop ];
};
} )();
var ua = navigator.userAgent.toLowerCase();
return ( pfx( 'perspective' ) !== null ) &&
var ua = navigator.userAgent.toLowerCase();
return ( pfx( 'perspective' ) !== null ) &&
( document.body.classList ) &&
( document.body.dataset ) &&
( ua.search( /(iphone)|(ipod)|(android)/ ) === -1 );
};