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": {

64
src/build.js
View File

@@ -1,13 +1,14 @@
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',
files.push(
'src/plugins/autoplay/autoplay.js',
'src/plugins/blackout/blackout.js',
'src/plugins/extras/extras.js',
'src/plugins/form/form.js',
@@ -28,17 +29,16 @@ files.push('src/plugins/autoplay/autoplay.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')
'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',
@@ -48,28 +48,28 @@ var options = {
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,

28
test/helpers.js
View File

@@ -26,18 +26,23 @@ var loadIframe = function( src, assert, callback ) {
var iframe = document.getElementById( 'presentation-iframe' );
var onLoad = function() {
assert.ok( true,
'Presentation loaded. iframe.src = ' + iframe.src );
assert.ok(
true,
'Presentation loaded. iframe.src = ' + iframe.src
);
try {
assert.ok( iframe.contentDocument,
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,
'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.' );
'You can however use Chrome over Karma.'
);
}
console.log( 'End loadIframe' );
callback();
@@ -45,8 +50,10 @@ var loadIframe = function( src, assert, callback ) {
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 ) {
@@ -104,4 +111,3 @@ var _impressSupported = function() {
( document.body.dataset ) &&
( ua.search( /(iphone)|(ipod)|(android)/ ) === -1 );
};