blallo/presentazione-papero
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

move out additional util methods, use shorthands for api

Browse Source
This commit is contained in:
Hakim El Hattab 2020-03-07 11:50:58 +01:00
parent 313ad46e30
commit 4cfd254086
4 changed files with 266 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demo.html
View File

@ -406,9 +406,14 @@ Reveal.addEventListener( 'customevent', function() {
</div> </div>
<script src="dist/reveal.min.js"></script> <script type="module" src="js/index.js"></script>
<script> <script type="module">
// WIP support for multiple reveal.js instances
// let a = new Reveal(document.querySelector( '.reveal' ), {controls: false});
// let b = new Reveal(document.querySelector( '.reveal' ), {controls: true});
// console.log(a.getConfig().controls,b.getConfig().controls);
// More info https://github.com/hakimel/reveal.js#configuration // More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({ Reveal.initialize({

2
dist/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long

291
js/reveal.js
View File

@ -1,5 +1,17 @@
import Playback from './components/playback.js' import Playback from './components/playback.js'
import defaultConfig from './config.js' import defaultConfig from './config.js'
import {
extend,
toArray,
distanceBetween,
deserialize,
transformElement,
injectStyleSheet,
closestParent,
colorToRgb,
colorBrightness,
enterFullscreen
} from './utils/util.js'
/** /**
* reveal.js * reveal.js
@ -1350,84 +1362,6 @@ export default function( revealElement, options ) {
} }
/**
* Extend object a with the properties of object b.
* If there's a conflict, object b takes precedence.
*
* @param {object} a
* @param {object} b
*/
function extend( a, b ) {
for( var i in b ) {
a[ i ] = b[ i ];
}
return a;
}
/**
* Converts the target object to an array.
*
* @param {object} o
* @return {object[]}
*/
function toArray( o ) {
return Array.prototype.slice.call( o );
}
/**
* Utility for deserializing a value.
*
* @param {*} value
* @return {*}
*/
function deserialize( value ) {
if( typeof value === 'string' ) {
if( value === 'null' ) return null;
else if( value === 'true' ) return true;
else if( value === 'false' ) return false;
else if( value.match( /^-?[\d\.]+$/ ) ) return parseFloat( value );
}
return value;
}
/**
* Measures the distance in pixels between point a
* and point b.
*
* @param {object} a point with x/y properties
* @param {object} b point with x/y properties
*
* @return {number}
*/
function distanceBetween( a, b ) {
var dx = a.x - b.x,
dy = a.y - b.y;
return Math.sqrt( dx*dx + dy*dy );
}
/**
* Applies a CSS transform to the target element.
*
* @param {HTMLElement} element
* @param {string} transform
*/
function transformElement( element, transform ) {
element.style.transform = transform;
}
/** /**
* Applies CSS transforms to the slides container. The container * Applies CSS transforms to the slides container. The container
* is transformed from two separate sources: layout and the overview * is transformed from two separate sources: layout and the overview
@ -1451,139 +1385,6 @@ export default function( revealElement, options ) {
} }
/**
* Injects the given CSS styles into the DOM.
*
* @param {string} value
*/
function injectStyleSheet( value ) {
let tag = document.createElement( 'style' );
tag.type = 'text/css';
if( tag.styleSheet ) {
tag.styleSheet.cssText = value;
}
else {
tag.appendChild( document.createTextNode( value ) );
}
document.getElementsByTagName( 'head' )[0].appendChild( tag );
}
/**
* Find the closest parent that matches the given
* selector.
*
* @param {HTMLElement} target The child element
* @param {String} selector The CSS selector to match
* the parents against
*
* @return {HTMLElement} The matched parent or null
* if no matching parent was found
*/
function closestParent( target, selector ) {
let parent = target.parentNode;
while( parent ) {
// There's some overhead doing this each time, we don't
// want to rewrite the element prototype but should still
// be enough to feature detect once at startup...
let matchesMethod = parent.matches || parent.matchesSelector || parent.msMatchesSelector;
// If we find a match, we're all set
if( matchesMethod && matchesMethod.call( parent, selector ) ) {
return parent;
}
// Keep searching
parent = parent.parentNode;
}
return null;
}
/**
* Converts various color input formats to an {r:0,g:0,b:0} object.
*
* @param {string} color The string representation of a color
* @example
* colorToRgb('#000');
* @example
* colorToRgb('#000000');
* @example
* colorToRgb('rgb(0,0,0)');
* @example
* colorToRgb('rgba(0,0,0)');
*
* @return {{r: number, g: number, b: number, [a]: number}|null}
*/
function colorToRgb( color ) {
let hex3 = color.match( /^#([0-9a-f]{3})$/i );
if( hex3 && hex3[1] ) {
hex3 = hex3[1];
return {
r: parseInt( hex3.charAt( 0 ), 16 ) * 0x11,
g: parseInt( hex3.charAt( 1 ), 16 ) * 0x11,
b: parseInt( hex3.charAt( 2 ), 16 ) * 0x11
};
}
let hex6 = color.match( /^#([0-9a-f]{6})$/i );
if( hex6 && hex6[1] ) {
hex6 = hex6[1];
return {
r: parseInt( hex6.substr( 0, 2 ), 16 ),
g: parseInt( hex6.substr( 2, 2 ), 16 ),
b: parseInt( hex6.substr( 4, 2 ), 16 )
};
}
let rgb = color.match( /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i );
if( rgb ) {
return {
r: parseInt( rgb[1], 10 ),
g: parseInt( rgb[2], 10 ),
b: parseInt( rgb[3], 10 )
};
}
let rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i );
if( rgba ) {
return {
r: parseInt( rgba[1], 10 ),
g: parseInt( rgba[2], 10 ),
b: parseInt( rgba[3], 10 ),
a: parseFloat( rgba[4] )
};
}
return null;
}
/**
* Calculates brightness on a scale of 0-255.
*
* @param {string} color See colorToRgb for supported formats.
* @see {@link colorToRgb}
*/
function colorBrightness( color ) {
if( typeof color === 'string' ) color = colorToRgb( color );
if( color ) {
return ( color.r * 299 + color.g * 587 + color.b * 114 ) / 1000;
}
return null;
}
/** /**
* Returns the remaining height within the parent of the * Returns the remaining height within the parent of the
* target element. * target element.
@ -2293,29 +2094,6 @@ export default function( revealElement, options ) {
} }
/**
* Handling the fullscreen functionality via the fullscreen API
*
* @see http://fullscreen.spec.whatwg.org/
* @see https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode
*/
function enterFullscreen() {
let element = document.documentElement;
// Check which implementation is available
let requestMethod = element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
element.msRequestFullscreen;
if( requestMethod ) {
requestMethod.apply( element );
}
}
/** /**
* Shows the mouse pointer after it has been hidden with * Shows the mouse pointer after it has been hidden with
* #hideCursor. * #hideCursor.
@ -4541,6 +4319,7 @@ export default function( revealElement, options ) {
} }
} }
/** /**
* Retrieves the h/v location and fragment of the current, * Retrieves the h/v location and fragment of the current,
* or specified, slide. * or specified, slide.
@ -6015,24 +5794,16 @@ export default function( revealElement, options ) {
getComputedSlideSize, getComputedSlideSize,
// Returns the previous slide element, may be null // Returns the previous slide element, may be null
getPreviousSlide: () => { getPreviousSlide: () => previousSlide,
return previousSlide;
},
// Returns the current slide element // Returns the current slide element
getCurrentSlide: () => { getCurrentSlide: () => currentSlide,
return currentSlide;
},
// Returns the current scale of the presentation content // Returns the current scale of the presentation content
getScale: () => { getScale: () => scale,
return scale;
},
// Returns the current configuration object // Returns the current configuration object
getConfig: () => { getConfig: () => config,
return config;
},
// Helper method, retrieves query string as a key/value hash // Helper method, retrieves query string as a key/value hash
getQueryHash: () => { getQueryHash: () => {
@ -6053,19 +5824,13 @@ export default function( revealElement, options ) {
}, },
// Returns the top-level DOM element // Returns the top-level DOM element
getRevealElement: () => { getRevealElement: () => dom.wrapper || document.querySelector( '.reveal' ),
return dom.wrapper || document.querySelector( '.reveal' );
},
// Returns a hash with all registered plugins // Returns a hash with all registered plugins
getPlugins: () => { getPlugins: () => plugins,
return plugins;
},
// Returns true if we're currently on the first slide // Returns true if we're currently on the first slide
isFirstSlide: () => { isFirstSlide: () => indexh === 0 && indexv === 0,
return indexh === 0 && indexv === 0;
},
// Returns true if we're currently on the last slide // Returns true if we're currently on the last slide
isLastSlide: () => { isLastSlide: () => {
@ -6096,31 +5861,21 @@ export default function( revealElement, options ) {
}, },
// Checks if reveal.js has been loaded and is ready for use // Checks if reveal.js has been loaded and is ready for use
isReady: () => { isReady: () => loaded,
return loaded;
},
// Forward event binding to the reveal DOM element // Forward event binding to the reveal DOM element
addEventListener: ( type, listener, useCapture ) => { addEventListener: ( type, listener, useCapture ) => {
if( 'addEventListener' in window ) {
Reveal.getRevealElement().addEventListener( type, listener, useCapture ); Reveal.getRevealElement().addEventListener( type, listener, useCapture );
}
}, },
removeEventListener: ( type, listener, useCapture ) => { removeEventListener: ( type, listener, useCapture ) => {
if( 'addEventListener' in window ) {
Reveal.getRevealElement().removeEventListener( type, listener, useCapture ); Reveal.getRevealElement().removeEventListener( type, listener, useCapture );
}
}, },
// Programmatically triggers a keyboard event // Programmatically triggers a keyboard event
triggerKey: keyCode => { triggerKey: keyCode => onDocumentKeyDown( { keyCode } ),
onDocumentKeyDown( { keyCode } );
},
// Registers a new shortcut to include in the help overlay // Registers a new shortcut to include in the help overlay
registerKeyboardShortcut: ( key, value ) => { registerKeyboardShortcut: ( key, value ) => keyboardShortcuts[key] = value
keyboardShortcuts[key] = value;
}
}; };
return init(); return init();

233
js/utils/util.js Normal file
View File

@ -0,0 +1,233 @@
/**
* Extend object a with the properties of object b.
* If there's a conflict, object b takes precedence.
*
* @param {object} a
* @param {object} b
*/
export const extend = ( a, b ) => {
for( var i in b ) {
a[ i ] = b[ i ];
}
return a;
}
/**
* Converts the target object to an array.
*
* @param {object} o
* @return {object[]}
*/
export const toArray = ( o ) => {
return Array.prototype.slice.call( o );
}
/**
* Utility for deserializing a value.
*
* @param {*} value
* @return {*}
*/
export const deserialize = ( value ) => {
if( typeof value === 'string' ) {
if( value === 'null' ) return null;
else if( value === 'true' ) return true;
else if( value === 'false' ) return false;
else if( value.match( /^-?[\d\.]+$/ ) ) return parseFloat( value );
}
return value;
}
/**
* Measures the distance in pixels between point a
* and point b.
*
* @param {object} a point with x/y properties
* @param {object} b point with x/y properties
*
* @return {number}
*/
export const distanceBetween = ( a, b ) => {
var dx = a.x - b.x,
dy = a.y - b.y;
return Math.sqrt( dx*dx + dy*dy );
}
/**
* Applies a CSS transform to the target element.
*
* @param {HTMLElement} element
* @param {string} transform
*/
export const transformElement = ( element, transform ) => {
element.style.transform = transform;
}
/**
* Injects the given CSS styles into the DOM.
*
* @param {string} value
*/
export const injectStyleSheet = ( value ) => {
let tag = document.createElement( 'style' );
tag.type = 'text/css';
if( tag.styleSheet ) {
tag.styleSheet.cssText = value;
}
else {
tag.appendChild( document.createTextNode( value ) );
}
document.getElementsByTagName( 'head' )[0].appendChild( tag );
}
/**
* Find the closest parent that matches the given
* selector.
*
* @param {HTMLElement} target The child element
* @param {String} selector The CSS selector to match
* the parents against
*
* @return {HTMLElement} The matched parent or null
* if no matching parent was found
*/
export const closestParent = ( target, selector ) => {
let parent = target.parentNode;
while( parent ) {
// There's some overhead doing this each time, we don't
// want to rewrite the element prototype but should still
// be enough to feature detect once at startup...
let matchesMethod = parent.matches || parent.matchesSelector || parent.msMatchesSelector;
// If we find a match, we're all set
if( matchesMethod && matchesMethod.call( parent, selector ) ) {
return parent;
}
// Keep searching
parent = parent.parentNode;
}
return null;
}
/**
* Converts various color input formats to an {r:0,g:0,b:0} object.
*
* @param {string} color The string representation of a color
* @example
* colorToRgb('#000');
* @example
* colorToRgb('#000000');
* @example
* colorToRgb('rgb(0,0,0)');
* @example
* colorToRgb('rgba(0,0,0)');
*
* @return {{r: number, g: number, b: number, [a]: number}|null}
*/
export const colorToRgb = ( color ) => {
let hex3 = color.match( /^#([0-9a-f]{3})$/i );
if( hex3 && hex3[1] ) {
hex3 = hex3[1];
return {
r: parseInt( hex3.charAt( 0 ), 16 ) * 0x11,
g: parseInt( hex3.charAt( 1 ), 16 ) * 0x11,
b: parseInt( hex3.charAt( 2 ), 16 ) * 0x11
};
}
let hex6 = color.match( /^#([0-9a-f]{6})$/i );
if( hex6 && hex6[1] ) {
hex6 = hex6[1];
return {
r: parseInt( hex6.substr( 0, 2 ), 16 ),
g: parseInt( hex6.substr( 2, 2 ), 16 ),
b: parseInt( hex6.substr( 4, 2 ), 16 )
};
}
let rgb = color.match( /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i );
if( rgb ) {
return {
r: parseInt( rgb[1], 10 ),
g: parseInt( rgb[2], 10 ),
b: parseInt( rgb[3], 10 )
};
}
let rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i );
if( rgba ) {
return {
r: parseInt( rgba[1], 10 ),
g: parseInt( rgba[2], 10 ),
b: parseInt( rgba[3], 10 ),
a: parseFloat( rgba[4] )
};
}
return null;
}
/**
* Calculates brightness on a scale of 0-255.
*
* @param {string} color See colorToRgb for supported formats.
* @see {@link colorToRgb}
*/
export const colorBrightness = ( color ) => {
if( typeof color === 'string' ) color = colorToRgb( color );
if( color ) {
return ( color.r * 299 + color.g * 587 + color.b * 114 ) / 1000;
}
return null;
}
/**
* Handling the fullscreen functionality via the fullscreen API
*
* @see http://fullscreen.spec.whatwg.org/
* @see https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode
*/
export const enterFullscreen = () => {
let element = document.documentElement;
// Check which implementation is available
let requestMethod = element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
element.msRequestFullscreen;
if( requestMethod ) {
requestMethod.apply( element );
}
}