mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-07-31 20:00:28 +02:00
Code Issues Releases Wiki Activity

migrated utils to ts, exclude filendings in imports

Browse Source
This commit is contained in:
Hakim El Hattab
2025-06-08 21:57:02 +02:00
parent 2cba3fb7db
commit a4130839ee
25 changed files with 1198 additions and 1217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/theme/template/settings.scss
View File

@@ -48,7 +48,7 @@ $selection-color: #fff !default;
$overlay-element-bg-color: 240, 240, 240 !default;
$overlay-element-fg-color: 0, 0, 0 !default;
// Expose all variables to the DOM
// Expose all SCSS variables as CSS custom properties
:root {
// Background of the presentation
--r-background: #{$background};

3
js/controllers/autoanimate.js
View File

@@ -1,5 +1,4 @@
import { queryAll, extend, createStyleSheet, matches, closest } from '../utils/util.js'
import { FRAGMENT_STYLE_REGEX } from '../utils/constants.js'
import { queryAll, extend, createStyleSheet, matches, closest } from '../utils/util'
// Counter used to generate unique IDs for auto-animated elements
let autoAnimateCounter = 0;

4
js/controllers/backgrounds.js
View File

@@ -1,5 +1,5 @@
import { queryAll } from '../utils/util.js'
import { colorToRgb, colorBrightness } from '../utils/color.js'
import { queryAll } from '../utils/util'
import { colorToRgb, colorBrightness } from '../utils/color'
/**
* Creates and updates slide backgrounds.

4
js/controllers/controls.js vendored
View File

@@ -1,5 +1,5 @@
import { queryAll, enterFullscreen } from '../utils/util.js'
import { isAndroid } from '../utils/device.js'
import { queryAll, enterFullscreen } from '../utils/util'
import { isAndroid } from '../utils/device'
/**
* Manages our presentation controls. This includes both

2
js/controllers/focus.js
View File

@@ -1,4 +1,4 @@
import { closest } from '../utils/util.js'
import { closest } from '../utils/util'
/**
* Manages focus when a presentation is embedded. This

2
js/controllers/fragments.js
View File

@@ -1,4 +1,4 @@
import { extend, queryAll } from '../utils/util.js'
import { extend, queryAll } from '../utils/util'
/**
* Handles sorting and navigation of slide fragments.

2
js/controllers/keyboard.js
View File

@@ -1,4 +1,4 @@
import { enterFullscreen } from '../utils/util.js'
import { enterFullscreen } from '../utils/util'
/**
* Handles all reveal.js keyboard interactions.

4
js/controllers/overview.js
View File

@@ -1,5 +1,5 @@
import { SLIDES_SELECTOR } from '../utils/constants.js'
import { extend, queryAll, transformElement } from '../utils/util.js'
import { SLIDES_SELECTOR } from '../utils/constants'
import { extend, queryAll, transformElement } from '../utils/util'
/**
* Handles all logic related to the overview mode

2
js/controllers/plugins.js
View File

@@ -1,4 +1,4 @@
import { loadScript } from '../utils/loader.js'
import { loadScript } from '../utils/loader'
/**
* Manages loading and registering of reveal.js plugins.

4
js/controllers/printview.js
View File

@@ -1,5 +1,5 @@
import { SLIDES_SELECTOR } from '../utils/constants.js'
import { queryAll, createStyleSheet } from '../utils/util.js'
import { SLIDES_SELECTOR } from '../utils/constants'
import { queryAll, createStyleSheet } from '../utils/util'
/**
* Setups up our presentation for printing/exporting to PDF.

4
js/controllers/scrollview.js
View File

@@ -1,5 +1,5 @@
import { HORIZONTAL_SLIDES_SELECTOR, HORIZONTAL_BACKGROUNDS_SELECTOR } from '../utils/constants.js'
import { queryAll } from '../utils/util.js'
import { HORIZONTAL_SLIDES_SELECTOR, HORIZONTAL_BACKGROUNDS_SELECTOR } from '../utils/constants'
import { queryAll } from '../utils/util'
const HIDE_SCROLLBAR_TIMEOUT = 500;
const MAX_PROGRESS_SPACING = 4;

4
js/controllers/slidecontent.js
View File

@@ -1,5 +1,5 @@
import { extend, queryAll, closest, getMimeTypeFromFile, encodeRFC3986URI } from '../utils/util.js'
import { isMobile } from '../utils/device.js'
import { extend, queryAll, closest, getMimeTypeFromFile, encodeRFC3986URI } from '../utils/util'
import { isMobile } from '../utils/device'
import fitty from 'fitty';

4
js/controllers/touch.js
View File

@@ -1,5 +1,5 @@
import { isAndroid } from '../utils/device.js'
import { matches } from '../utils/util.js'
import { isAndroid } from '../utils/device'
import { matches } from '../utils/util'
const SWIPE_THRESHOLD = 40;

2
js/index.ts
View File

@@ -1,6 +1,6 @@
import { Config } from './config.ts';
//@ts-ignore
// @ts-ignore
import Deck, { VERSION } from './reveal.js';
/**

46
js/reveal.js
View File

@@ -1,32 +1,32 @@
import SlideContent from './controllers/slidecontent.js'
import SlideNumber from './controllers/slidenumber.js'
import JumpToSlide from './controllers/jumptoslide.js'
import Backgrounds from './controllers/backgrounds.js'
import AutoAnimate from './controllers/autoanimate.js'
import ScrollView from './controllers/scrollview.js'
import PrintView from './controllers/printview.js'
import Fragments from './controllers/fragments.js'
import Overview from './controllers/overview.js'
import Keyboard from './controllers/keyboard.js'
import Location from './controllers/location.js'
import Controls from './controllers/controls.js'
import Progress from './controllers/progress.js'
import Pointer from './controllers/pointer.js'
import Plugins from './controllers/plugins.js'
import Overlay from './controllers/overlay.js'
import Touch from './controllers/touch.js'
import Focus from './controllers/focus.js'
import Notes from './controllers/notes.js'
import Playback from './components/playback.js'
import SlideContent from './controllers/slidecontent'
import SlideNumber from './controllers/slidenumber'
import JumpToSlide from './controllers/jumptoslide'
import Backgrounds from './controllers/backgrounds'
import AutoAnimate from './controllers/autoanimate'
import ScrollView from './controllers/scrollview'
import PrintView from './controllers/printview'
import Fragments from './controllers/fragments'
import Overview from './controllers/overview'
import Keyboard from './controllers/keyboard'
import Location from './controllers/location'
import Controls from './controllers/controls'
import Progress from './controllers/progress'
import Pointer from './controllers/pointer'
import Plugins from './controllers/plugins'
import Overlay from './controllers/overlay'
import Touch from './controllers/touch'
import Focus from './controllers/focus'
import Notes from './controllers/notes'
import Playback from './components/playback'
import { defaultConfig } from './config.ts'
import * as Util from './utils/util.js'
import * as Device from './utils/device.js'
import * as Util from './utils/util'
import * as Device from './utils/device'
import {
SLIDES_SELECTOR,
HORIZONTAL_SLIDES_SELECTOR,
VERTICAL_SLIDES_SELECTOR,
POST_MESSAGE_METHOD_BLACKLIST
} from './utils/constants.js'
} from './utils/constants'
// The reveal.js version
export const VERSION = '6.0.0-rc.2';

77
js/utils/color.js
View File

@@ -1,77 +0,0 @@
/**
* 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.slice( 0, 2 ), 16 ),
g: parseInt( hex6.slice( 2, 4 ), 16 ),
b: parseInt( hex6.slice( 4, 6 ), 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;
}

75
js/utils/color.ts Normal file
View File

@@ -0,0 +1,75 @@
/**
* 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: string) => {
let hex3 = color.match(/^#([0-9a-f]{3})$/i);
if (hex3 && hex3[1]) {
const hex3Value = hex3[1];
return {
r: parseInt(hex3Value.charAt(0), 16) * 0x11,
g: parseInt(hex3Value.charAt(1), 16) * 0x11,
b: parseInt(hex3Value.charAt(2), 16) * 0x11,
};
}
let hex6 = color.match(/^#([0-9a-f]{6})$/i);
if (hex6 && hex6[1]) {
const hex6Value = hex6[1];
return {
r: parseInt(hex6Value.slice(0, 2), 16),
g: parseInt(hex6Value.slice(2, 4), 16),
b: parseInt(hex6Value.slice(4, 6), 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: string | { r: number; g: number; b: number } | null) => {
if (typeof color === 'string') color = colorToRgb(color);
if (color) {
return (color.r * 299 + color.g * 587 + color.b * 114) / 1000;
}
return null;
};

7
js/utils/constants.js → js/utils/constants.ts
View File

@@ -1,14 +1,15 @@
export const SLIDES_SELECTOR = '.slides section';
export const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';
export const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';
export const HORIZONTAL_BACKGROUNDS_SELECTOR = '.backgrounds>.slide-background';
// Methods that may not be invoked via the postMessage API
export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener|showPreview/;
export const POST_MESSAGE_METHOD_BLACKLIST =
/registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener|showPreview/;
// Regex for retrieving the fragment style from a class attribute
export const FRAGMENT_STYLE_REGEX = /fade-(down|up|right|left|out|in-then-out|in-then-semi-out)|semi-fade-out|current-visible|shrink|grow/;
export const FRAGMENT_STYLE_REGEX =
/fade-(down|up|right|left|out|in-then-out|in-then-semi-out)|semi-fade-out|current-visible|shrink|grow/;
// Slide number formats
export const SLIDE_NUMBER_FORMAT_HORIZONTAL_DOT_VERTICAL = 'h.v';

8
js/utils/device.js
View File

@@ -1,8 +0,0 @@
const UA = navigator.userAgent;
export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) ||
( navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ); // iPadOS
export const isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA );
export const isAndroid = /android/gi.test( UA );

9
js/utils/device.ts Normal file
View File

@@ -0,0 +1,9 @@
const UA = navigator.userAgent;
export const isMobile =
/(iphone|ipod|ipad|android)/gi.test(UA) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); // iPadOS
export const isChrome = /chrome/i.test(UA) && !/edge/i.test(UA);
export const isAndroid = /android/gi.test(UA);

46
js/utils/loader.js
View File

@@ -1,46 +0,0 @@
/**
* 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 );
}

40
js/utils/loader.ts Normal file
View File

@@ -0,0 +1,40 @@
/**
* 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: string, callback?: (error?: Error) => void) => {
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 = (event: Event) => {
if (event.type === 'load') {
// Kill event listeners
script.onload = script.onerror = null;
callback();
}
};
// Error callback
script.onerror = (err: Event | string) => {
// Kill event listeners
script.onload = 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');
if (head) {
head.insertBefore(script, head.lastChild);
}
};

313
js/utils/util.js
View File

@@ -1,313 +0,0 @@
/**
* 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()}`
);
}

301
js/utils/util.ts Normal file
View File

@@ -0,0 +1,301 @@
/**
* 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: Record<string, any>, b: Record<string, any>) => {
for (let i in b) {
a[i] = b[i];
}
return a;
};
/**
* querySelectorAll but returns an Array.
*/
export const queryAll = (el: Element | Document, selector: string): Element[] => {
return Array.from(el.querySelectorAll(selector));
};
/**
* classList.toggle() with cross browser support
*/
export const toggleClass = (el: Element, className: string, value: boolean) => {
if (value) {
el.classList.add(className);
} else {
el.classList.remove(className);
}
};
type DeserializedValue = string | number | boolean | null;
/**
* Utility for deserializing a value.
*
* @param {*} value
* @return {*}
*/
export const deserialize = (value: string): DeserializedValue => {
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: { x: number; y: number },
b: { x: number; y: number }
): number => {
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: HTMLElement, transform: string) => {
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: any, selector: string): boolean => {
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: Element | null, selector: string): Element | null => {
// Native Element.closest
if (target && typeof target.closest === 'function') {
return target.closest(selector);
}
// Polyfill
while (target) {
if (matches(target, selector)) {
return target;
}
// Keep searching
target = target.parentElement;
}
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 = element || document.documentElement;
// Check which implementation is available
let requestMethod =
(element as any).requestFullscreen ||
(element as any).webkitRequestFullscreen ||
(element as any).webkitRequestFullScreen ||
(element as any).mozRequestFullScreen ||
(element as any).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: Element,
tagname: string,
classname: string,
innerHTML: string = ''
): Element => {
// 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: string): HTMLStyleElement => {
let tag = document.createElement('style');
if (value && value.length > 0) {
tag.appendChild(document.createTextNode(value));
}
document.head.appendChild(tag);
return tag;
};
/**
* Returns a key:value hash of all query params.
*/
export const getQueryHash = (): Record<string, DeserializedValue> => {
let query: Record<string, DeserializedValue> = {};
location.search.replace(/[A-Z0-9]+?=([\w\.%-]*)/gi, (a: string) => {
const key = a.split('=').shift();
const value = a.split('=').pop();
if (key && value !== undefined) {
query[key] = value;
}
return a;
});
// Basic deserialization
for (let i in query) {
let value = query[i];
query[i] = deserialize(unescape(value as string));
}
// 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: HTMLElement | null, height: number = 0): number => {
if (element) {
let newHeight: number,
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.
if (element.parentElement) {
element.parentElement.style.height = 'auto';
}
newHeight = height - (element.parentElement?.offsetHeight || 0);
// Restore the old height, just in case
element.style.height = oldHeight + 'px';
// Clear the parent (.slide) height. .removeProperty works in IE9+
if (element.parentElement) {
element.parentElement.style.removeProperty('height');
}
return newHeight;
}
return height;
};
const fileExtensionToMimeMap: Record<string, string> = {
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: string = ''): string | undefined => {
const extension = filename.split('.').pop();
return extension ? fileExtensionToMimeMap[extension] : undefined;
};
/**
* 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: string = ''): string => {
return encodeURI(url)
.replace(/%5B/g, '[')
.replace(/%5D/g, ']')
.replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
};