629f7686f3
The relative position in rel plugin is currently based on the world coordinate. So for the same effect, like fly in from the right-hand side, we must use different `data-rel-x/y/z` value. Why not let the plugin do the hard part? So I introduce a `data-rel-position`, when set to `relative`, all relative attribute is based on the position and rotation of previous slide. So no matter the rotation of previous slide, data-rel-x="1000" always looks like fly in from the right-hand side. We can change the position and rotation of one slide, and the position of all following slides will be changed too. When `data-rel-position` is set to `relative`, relative rotation has a clear meaning. It describes the relative rotations between slides. We don't need to set rotations for all slide, setting the key slides is enough. If `data-rel-position` is not relative, the effect of `data-rel-rotate-x/y/z` is not clear, so they're only used when `data-rel-position="relative"`. After the introduction of relative rotation, there're 6 attribute that will inherit from previous slide. If we want to set a relative X move, we have to set all other 5 attributes to 0. It's boring. So a `data-rel-clear` is used to set all 6 attributes to 0, and then the value specified in current slide is applied. The `examples/3D-positions/index.html` shows some usage. As you can see, the html code of two slide ring is the same, and slides except for the first two in a ring has no position attributes. It work by inheriting the previous one. This PR invokes a lot math calculations. Basically, the rotation of a slide is translated into the coordinate describing the directions of X/Y/Z axes. And `data-rel-x/y/z` can be easily calculated by that. The rotations is the hard part, I mainly use the algorithm in the Quaternions and spatial rotation - Wikipedia to compose two and more rotations. I'm not a math guy, hope I don't make much mistakes.
75 lines
2.6 KiB
JavaScript
75 lines
2.6 KiB
JavaScript
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')
|
|
// 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/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')
|
|
|
|
var filename = 'js/impress.js';
|
|
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 options = {
|
|
sourceMap: {
|
|
filename: 'js/impress.js',
|
|
url: 'js/impress.min.js.map'
|
|
},
|
|
output: {
|
|
comments: /^!/
|
|
}
|
|
};
|
|
var result = Terser.minify({'js/impress.js': code}, options);
|
|
|
|
filename = 'js/impress.min.js';
|
|
fs.writeFileSync(filename, result.code);
|
|
console.log(filename);
|
|
filename = 'js/impress.min.js.map';
|
|
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'
|
|
|
|
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);
|