313 lines
No EOL
6.7 KiB
JavaScript
313 lines
No EOL
6.7 KiB
JavaScript
/**
|
|
* 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( let i in b ) {
|
|
a[ i ] = b[ i ];
|
|
}
|
|
|
|
return a;
|
|
|
|
}
|
|
|
|
/**
|
|
* querySelectorAll but returns an Array.
|
|
*/
|
|
export const queryAll = ( el, selector ) => {
|
|
|
|
return Array.from( el.querySelectorAll( selector ) );
|
|
|
|
}
|
|
|
|
/**
|
|
* classList.toggle() with cross browser support
|
|
*/
|
|
export const toggleClass = ( el, className, value ) => {
|
|
if( value ) {
|
|
el.classList.add( className );
|
|
}
|
|
else {
|
|
el.classList.remove( className );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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 ) => {
|
|
|
|
let 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;
|
|
|
|
}
|
|
|
|
/**
|
|
* Element.matches with IE support.
|
|
*
|
|
* @param {HTMLElement} target The element to match
|
|
* @param {String} selector The CSS selector to match
|
|
* the element against
|
|
*
|
|
* @return {Boolean}
|
|
*/
|
|
export const matches = ( target, selector ) => {
|
|
|
|
let matchesMethod = target.matches || target.matchesSelector || target.msMatchesSelector;
|
|
|
|
return !!( matchesMethod && matchesMethod.call( target, selector ) );
|
|
|
|
}
|
|
|
|
/**
|
|
* 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 closest = ( target, selector ) => {
|
|
|
|
// Native Element.closest
|
|
if( typeof target.closest === 'function' ) {
|
|
return target.closest( selector );
|
|
}
|
|
|
|
// Polyfill
|
|
while( target ) {
|
|
if( matches( target, selector ) ) {
|
|
return target;
|
|
}
|
|
|
|
// Keep searching
|
|
target = target.parentNode;
|
|
}
|
|
|
|
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 = element => {
|
|
|
|
element = 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 );
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Creates an HTML element and returns a reference to it.
|
|
* If the element already exists the existing instance will
|
|
* be returned.
|
|
*
|
|
* @param {HTMLElement} container
|
|
* @param {string} tagname
|
|
* @param {string} classname
|
|
* @param {string} innerHTML
|
|
*
|
|
* @return {HTMLElement}
|
|
*/
|
|
export const createSingletonNode = ( container, tagname, classname, innerHTML='' ) => {
|
|
|
|
// Find all nodes matching the description
|
|
let nodes = container.querySelectorAll( '.' + classname );
|
|
|
|
// Check all matches to find one which is a direct child of
|
|
// the specified container
|
|
for( let i = 0; i < nodes.length; i++ ) {
|
|
let testNode = nodes[i];
|
|
if( testNode.parentNode === container ) {
|
|
return testNode;
|
|
}
|
|
}
|
|
|
|
// If no node was found, create it now
|
|
let node = document.createElement( tagname );
|
|
node.className = classname;
|
|
node.innerHTML = innerHTML;
|
|
container.appendChild( node );
|
|
|
|
return node;
|
|
|
|
}
|
|
|
|
/**
|
|
* Injects the given CSS styles into the DOM.
|
|
*
|
|
* @param {string} value
|
|
*/
|
|
export const createStyleSheet = ( value ) => {
|
|
|
|
let tag = document.createElement( 'style' );
|
|
tag.type = 'text/css';
|
|
|
|
if( value && value.length > 0 ) {
|
|
if( tag.styleSheet ) {
|
|
tag.styleSheet.cssText = value;
|
|
}
|
|
else {
|
|
tag.appendChild( document.createTextNode( value ) );
|
|
}
|
|
}
|
|
|
|
document.head.appendChild( tag );
|
|
|
|
return tag;
|
|
|
|
}
|
|
|
|
/**
|
|
* Returns a key:value hash of all query params.
|
|
*/
|
|
export const getQueryHash = () => {
|
|
|
|
let query = {};
|
|
|
|
location.search.replace( /[A-Z0-9]+?=([\w\.%-]*)/gi, a => {
|
|
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
|
|
} );
|
|
|
|
// Basic deserialization
|
|
for( let i in query ) {
|
|
let value = query[ i ];
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
/**
|
|
* Returns the remaining height within the parent of the
|
|
* target element.
|
|
*
|
|
* remaining height = [ configured parent height ] - [ current parent height ]
|
|
*
|
|
* @param {HTMLElement} element
|
|
* @param {number} [height]
|
|
*/
|
|
export const getRemainingHeight = ( element, height = 0 ) => {
|
|
|
|
if( element ) {
|
|
let newHeight, oldHeight = element.style.height;
|
|
|
|
// Change the .stretch element height to 0 in order find the height of all
|
|
// the other elements
|
|
element.style.height = '0px';
|
|
|
|
// In Overview mode, the parent (.slide) height is set of 700px.
|
|
// Restore it temporarily to its natural height.
|
|
element.parentNode.style.height = 'auto';
|
|
|
|
newHeight = height - element.parentNode.offsetHeight;
|
|
|
|
// Restore the old height, just in case
|
|
element.style.height = oldHeight + 'px';
|
|
|
|
// Clear the parent (.slide) height. .removeProperty works in IE9+
|
|
element.parentNode.style.removeProperty('height');
|
|
|
|
return newHeight;
|
|
}
|
|
|
|
return height;
|
|
|
|
}
|
|
|
|
const fileExtensionToMimeMap = {
|
|
'mp4': 'video/mp4',
|
|
'm4a': 'video/mp4',
|
|
'ogv': 'video/ogg',
|
|
'mpeg': 'video/mpeg',
|
|
'webm': 'video/webm'
|
|
}
|
|
|
|
/**
|
|
* Guess the MIME type for common file formats.
|
|
*/
|
|
export const getMimeTypeFromFile = ( filename='' ) => {
|
|
return fileExtensionToMimeMap[filename.split('.').pop()]
|
|
}
|
|
|
|
/**
|
|
* Encodes a string for RFC3986-compliant URL format.
|
|
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI#encoding_for_rfc3986
|
|
*
|
|
* @param {string} url
|
|
*/
|
|
export const encodeRFC3986URI = ( url='' ) => {
|
|
return encodeURI(url)
|
|
.replace(/%5B/g, "[")
|
|
.replace(/%5D/g, "]")
|
|
.replace(
|
|
/[!'()*]/g,
|
|
(c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`
|
|
);
|
|
} |