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", "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.", "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", "main": "js/impress.js",
"repository": { "repository": {

64
src/build.js
View File

@@ -1,13 +1,14 @@
const fs = require('fs'); const fs = require( 'fs' );
var ls = require('ls'); var ls = require( 'ls' );
var path = require('path'); var path = require( 'path' );
var Terser = require("terser"); var Terser = require( 'terser' );
var files = ['src/impress.js']; var files = ['src/impress.js'];
// Libraries from src/lib // 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 // Plugins from src/plugins
files.push('src/plugins/autoplay/autoplay.js', files.push(
'src/plugins/autoplay/autoplay.js',
'src/plugins/blackout/blackout.js', 'src/plugins/blackout/blackout.js',
'src/plugins/extras/extras.js', 'src/plugins/extras/extras.js',
'src/plugins/form/form.js', 'src/plugins/form/form.js',
@@ -28,17 +29,16 @@ files.push('src/plugins/autoplay/autoplay.js',
'src/plugins/stop/stop.js', 'src/plugins/stop/stop.js',
'src/plugins/substep/substep.js', 'src/plugins/substep/substep.js',
'src/plugins/touch/touch.js', 'src/plugins/touch/touch.js',
'src/plugins/toolbar/toolbar.js') 'src/plugins/toolbar/toolbar.js'
var output = files.map((f)=>{ );
return fs.readFileSync(f).toString(); var output = files.map( ( f ) => fs.readFileSync( f ).toString() ).join( '\n' );
}).join('\n')
var filename = 'js/impress.js'; var filename = 'js/impress.js';
fs.writeFileSync(filename, '// This file was automatically generated from files in src/ directory.\n\n' + output) fs.writeFileSync( filename, '// This file was automatically generated from files in src/ directory.\n\n' + output );
console.log(filename); console.log( filename );
// terser --compress --mangle --comments '/^!/' --source-map --output js/impress.min.js js/impress.js // 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 = { var options = {
sourceMap: { sourceMap: {
filename: 'js/impress.js', filename: 'js/impress.js',
@@ -48,28 +48,28 @@ var options = {
comments: /^!/ comments: /^!/
} }
}; };
var result = Terser.minify({'js/impress.js': code}, options); var result = Terser.minify( { 'js/impress.js': code }, options );
filename = 'js/impress.min.js'; filename = 'js/impress.min.js';
fs.writeFileSync(filename, result.code); fs.writeFileSync( filename, result.code );
console.log(filename); console.log( filename );
filename = 'js/impress.min.js.map'; filename = 'js/impress.min.js.map';
fs.writeFileSync(filename, result.map); fs.writeFileSync( filename, result.map );
console.log(filename); console.log( filename );
/* Auto generate an index.html that lists all the directories under examples/ // 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 // This is useful for gh-pages, so you can link to http://impress.github.io/impress.js/examples
*/ //
var html_list = '<ul><br />\n' var html_list = '<ul><br />\n';
ls( 'examples/*', { type: 'dir' }).forEach(function(dir) { ls( 'examples/*', { type: 'dir' } ).forEach( function( dir ) {
html_list += ' <li><a href="' + dir['file'] + '/">' + dir['name'] + '</a></li>\n'; html_list += ' <li><a href="' + dir.file + '/">' + dir.name + '</a></li>\n';
}); } );
html_list += '</ul>\n' html_list += '</ul>\n';
var html = '<html>\n<head>\n<title>Example presentations</title>\n</head>\n<body>' var html = '<html>\n<head>\n<title>Example presentations</title>\n</head>\n<body>';
html += '<h1>Example presentations</h1>\n' + html_list html += '<h1>Example presentations</h1>\n' + html_list;
html += '</body>\n</html>' html += '</body>\n</html>';
filename = path.resolve(__dirname, 'examples', 'index.html'); filename = path.resolve( __dirname, 'examples', 'index.html' );
fs.writeFileSync(filename, html); fs.writeFileSync( filename, html );
console.log(filename); console.log( filename );

30
src/impress.js
View File

@@ -58,6 +58,16 @@ window.impress = ( impressConfig ) => {
// So I had it shut up // So I had it shut up
// eslint-disable-next-line prefer-const // eslint-disable-next-line prefer-const
let initializedElements = {}; 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 // 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 // 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 // eslint-disable-next-line no-warning-comments
// TODO: Add additional required elements to checks as well // 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 ) { if ( !isImpressSupported ) {
// We can't be sure that classList exists, so let's better not use it // We can't be sure that classList exists, so let's better not use it
document.body.className += ' impress-not-supported'; document.body.className += ' impress-not-supported';
@@ -114,6 +128,7 @@ window.impress = ( impressConfig ) => {
console.log( impressMain.dataset ); console.log( impressMain.dataset );
// If config is passed in via argument, don't use the dataset from the main div, otherwise, parse it // If config is passed in via argument, don't use the dataset from the main div, otherwise, parse it
if ( !impressConfig ) { if ( !impressConfig ) {
// TODO: Initialize
impressConfig = new ImpressConfig(); impressConfig = new ImpressConfig();
} }
@@ -149,6 +164,8 @@ window.impress = ( impressConfig ) => {
rotation.x = rotation.x ?? 0; rotation.x = rotation.x ?? 0;
rotation.y = rotation.y ?? 0; rotation.y = rotation.y ?? 0;
rotation.z = rotation.z ?? 0; rotation.z = rotation.z ?? 0;
// Keep track of all elements
initializedElements[ DOMElementID ] = { initializedElements[ DOMElementID ] = {
coordinates: coordinates, coordinates: coordinates,
rotation: rotation, rotation: rotation,
@@ -226,7 +243,7 @@ window.impress = ( impressConfig ) => {
* @returns {object} Returns an object that contains an object of the coordinates and rotation: * @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 } * { 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. * Update the impress config.
* @param {ImpressConfig} impressConfigs The new impress config * @param {ImpressConfig} impressConfigs The new impress config
* @returns {undefined} Returns nothing * @returns {void} Returns nothing
*/ */
const updateConfig = ( impressConfigs ) => { const updateConfig = ( impressConfigs ) => {
impressConfig = 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 all functions that are exposed by impress. This is superior to using classes as we can control what functions we expose.
return { return {
init, init,
@@ -253,6 +274,7 @@ window.impress = ( impressConfig ) => {
addElement, addElement,
getCurrentPos, getCurrentPos,
getCurrentConfig, 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. * 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 * and 70+ other contributors
* *
* Released under the MIT License. * Released under the MIT License.
@@ -63,9 +63,10 @@ window.impressVectorUtil = () => {
* @param {Vector} vec The vector of which to calculate the norm * @param {Vector} vec The vector of which to calculate the norm
* @returns {number} Returns the norm * @returns {number} Returns the norm
*/ */
var norm = function( vec ) { const norm = ( vec ) => Math.sqrt( ( vec.x * vec.x ) + ( vec.y * vec.y ) + ( vec.z * vec.z ) );
return Math.sqrt( ( vec.x * vec.x ) + ( vec.y * vec.y ) + ( vec.z * vec.z ) );
};
const baseChange = ( angle ) => {};
return { return {
norm, norm,

28
test/helpers.js
View File

@@ -26,18 +26,23 @@ var loadIframe = function( src, assert, callback ) {
var iframe = document.getElementById( 'presentation-iframe' ); var iframe = document.getElementById( 'presentation-iframe' );
var onLoad = function() { var onLoad = function() {
assert.ok( true, assert.ok(
'Presentation loaded. iframe.src = ' + iframe.src ); true,
'Presentation loaded. iframe.src = ' + iframe.src
);
try { try {
assert.ok( iframe.contentDocument, assert.ok(
iframe.contentDocument,
'Verifying that tests can access the presentation inside the iframe. ' + 'Verifying that tests can access the presentation inside the iframe. ' +
'Note: On Firefox this fails when using paths with "../" parts for the iframe.' ); 'Note: On Firefox this fails when using paths with "../" parts for the iframe.'
} );
catch ( err ) { } catch ( err ) {
assert.ok( false, assert.ok(
false,
'Error when trying to access presentation in iframe. Note: When using Chrome with ' + 'Error when trying to access presentation in iframe. Note: When using Chrome with ' +
'local files (file:///) this will fail with SecurityError. ' + 'local files (file:///) this will fail with SecurityError. ' +
'You can however use Chrome over Karma.' ); 'You can however use Chrome over Karma.'
);
} }
console.log( 'End loadIframe' ); console.log( 'End loadIframe' );
callback(); callback();
@@ -45,8 +50,10 @@ var loadIframe = function( src, assert, callback ) {
iframe.addEventListener( 'load', onLoad ); iframe.addEventListener( 'load', onLoad );
assert.ok( iframe.src = src, assert.ok(
'Setting iframe.src = ' + src ); iframe.src = src,
'Setting iframe.src = ' + src
);
}; };
var initPresentation = function( assert, callback, rootId ) { var initPresentation = function( assert, callback, rootId ) {
@@ -104,4 +111,3 @@ var _impressSupported = function() {
( document.body.dataset ) && ( document.body.dataset ) &&
( ua.search( /(iphone)|(ipod)|(android)/ ) === -1 ); ( ua.search( /(iphone)|(ipod)|(android)/ ) === -1 );
}; };