move out additional util methods, use shorthands for api
parent
313ad46e30
commit
4cfd254086
|
@ -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({
|
||||||
|
|
File diff suppressed because one or more lines are too long
291
js/reveal.js
291
js/reveal.js
|
@ -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();
|
||||||
|
|
|
@ -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 );
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue