add color, constant and loader modules
Hakim El Hattab
parent
7f94a79c27
commit
49bb498d9d
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
import { loadScript } from './../utils/util.js'
|
||||
import { loadScript } from '../utils/loader.js'
|
||||
|
||||
/**
|
||||
* Manages loading and registering of reveal.js plugins.
|
||||
|
|
|
|||
35
js/reveal.js
35
js/reveal.js
|
|
@ -1,6 +1,12 @@
|
|||
import Plugins from './controllers/plugins.js'
|
||||
import Playback from './components/playback.js'
|
||||
import defaultConfig from './config.js'
|
||||
import {
|
||||
SLIDES_SELECTOR,
|
||||
HORIZONTAL_SLIDES_SELECTOR,
|
||||
VERTICAL_SLIDES_SELECTOR,
|
||||
POST_MESSAGE_METHOD_BLACKLIST
|
||||
} from './utils/constants.js'
|
||||
import {
|
||||
extend,
|
||||
toArray,
|
||||
|
|
@ -9,10 +15,9 @@ import {
|
|||
transformElement,
|
||||
injectStyleSheet,
|
||||
closestParent,
|
||||
colorToRgb,
|
||||
colorBrightness,
|
||||
enterFullscreen
|
||||
} from './utils/util.js'
|
||||
import { colorToRgb, colorBrightness } from './utils/color.js'
|
||||
|
||||
/**
|
||||
* reveal.js
|
||||
|
|
@ -28,16 +33,8 @@ export default function( revealElement, options ) {
|
|||
// The reveal.js version
|
||||
const VERSION = '4.0.0-dev';
|
||||
|
||||
const SLIDES_SELECTOR = '.slides section';
|
||||
const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';
|
||||
const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';
|
||||
const HOME_SLIDE_SELECTOR = '.slides>section:first-of-type';
|
||||
|
||||
const UA = navigator.userAgent;
|
||||
|
||||
// Methods that may not be invoked via the postMessage API
|
||||
const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener/;
|
||||
|
||||
// Configuration defaults, can be overridden at initialization time
|
||||
let config,
|
||||
|
||||
|
|
@ -147,7 +144,7 @@ export default function( revealElement, options ) {
|
|||
function initialize() {
|
||||
|
||||
if( !revealElement ) {
|
||||
console.warn( 'reveal.js must be instantiated with a valid .reveal element' );
|
||||
console.warn( 'reveal.js can not initialize without a valid .reveal element.' );
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -160,16 +157,10 @@ export default function( revealElement, options ) {
|
|||
// Force a layout when the whole page, incl fonts, has loaded
|
||||
window.addEventListener( 'load', layout, false );
|
||||
|
||||
let query = Reveal.getQueryHash();
|
||||
|
||||
// Do not accept new dependencies via query config to avoid
|
||||
// the potential of malicious script injection
|
||||
if( typeof query['dependencies'] !== 'undefined' ) delete query['dependencies'];
|
||||
|
||||
// Copy options over to our config object
|
||||
config = { ...defaultConfig, ...options, ...query };
|
||||
config = { ...defaultConfig, ...options, ...Reveal.getQueryHash() };
|
||||
|
||||
// Load plugins and move on to #start() once done
|
||||
// Load plugins then move on to #start()
|
||||
plugins.load( config.dependencies ).then( start )
|
||||
|
||||
return Reveal;
|
||||
|
|
@ -5471,7 +5462,7 @@ export default function( revealElement, options ) {
|
|||
|
||||
|
||||
Reveal = {
|
||||
VERSION: VERSION,
|
||||
VERSION,
|
||||
|
||||
initialize,
|
||||
configure,
|
||||
|
|
@ -5623,6 +5614,10 @@ export default function( revealElement, options ) {
|
|||
query[ i ] = deserialize( unescape( value ) );
|
||||
}
|
||||
|
||||
// Do not accept new dependencies via query config to avoid
|
||||
// the potential of malicious script injection
|
||||
if( typeof query['dependencies'] !== 'undefined' ) delete query['dependencies'];
|
||||
|
||||
return query;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
/**
|
||||
* 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;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
|
||||
export const SLIDES_SELECTOR = '.slides section';
|
||||
export const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';
|
||||
export const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';
|
||||
|
||||
// Methods that may not be invoked via the postMessage API
|
||||
export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener/;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* Loads a JavaScript file from the given URL and executes it.
|
||||
*
|
||||
* @param {string} url Address of the .js file to load
|
||||
* @param {function} callback Method to invoke when the script
|
||||
* has loaded and executed
|
||||
*/
|
||||
export const loadScript = ( url, callback ) => {
|
||||
|
||||
const script = document.createElement( 'script' );
|
||||
script.type = 'text/javascript';
|
||||
script.async = false;
|
||||
script.defer = false;
|
||||
script.src = url;
|
||||
|
||||
if( typeof callback === 'function' ) {
|
||||
|
||||
// Success callback
|
||||
script.onload = script.onreadystatechange = event => {
|
||||
if( event.type === 'load' || /loaded|complete/.test( script.readyState ) ) {
|
||||
|
||||
// Kill event listeners
|
||||
script.onload = script.onreadystatechange = script.onerror = null;
|
||||
|
||||
callback();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// Error callback
|
||||
script.onerror = err => {
|
||||
|
||||
// Kill event listeners
|
||||
script.onload = script.onreadystatechange = script.onerror = null;
|
||||
|
||||
callback( new Error( 'Failed loading script: ' + script.src + '\n' + err ) );
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// Append the script at the end of <head>
|
||||
const head = document.querySelector( 'head' );
|
||||
head.insertBefore( script, head.lastChild );
|
||||
|
||||
}
|
||||
125
js/utils/util.js
125
js/utils/util.js
|
|
@ -112,84 +112,6 @@ export const closestParent = ( target, selector ) => {
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*
|
||||
|
|
@ -230,51 +152,4 @@ export const injectStyleSheet = ( value ) => {
|
|||
}
|
||||
document.getElementsByTagName( 'head' )[0].appendChild( tag );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads a JavaScript file from the given URL and executes it.
|
||||
*
|
||||
* @param {string} url Address of the .js file to load
|
||||
* @param {function} callback Method to invoke when the script
|
||||
* has loaded and executed
|
||||
*/
|
||||
export const loadScript = ( url, callback ) => {
|
||||
|
||||
const script = document.createElement( 'script' );
|
||||
script.type = 'text/javascript';
|
||||
script.async = false;
|
||||
script.defer = false;
|
||||
script.src = url;
|
||||
|
||||
if( typeof callback === 'function' ) {
|
||||
|
||||
// Success callback
|
||||
script.onload = script.onreadystatechange = event => {
|
||||
if( event.type === 'load' || /loaded|complete/.test( script.readyState ) ) {
|
||||
|
||||
// Kill event listeners
|
||||
script.onload = script.onreadystatechange = script.onerror = null;
|
||||
|
||||
callback();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// Error callback
|
||||
script.onerror = err => {
|
||||
|
||||
// Kill event listeners
|
||||
script.onload = script.onreadystatechange = script.onerror = null;
|
||||
|
||||
callback( new Error( 'Failed loading script: ' + script.src + '\n' + err ) );
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// Append the script at the end of <head>
|
||||
const head = document.querySelector( 'head' );
|
||||
head.insertBefore( script, head.lastChild );
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue