Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 7x 9x 9x 9x 9x 7x 9x 9x 9x 9x 9x 9x 9x 7x 9x | import { type ComponentGroup, type Options } from "./types";
import { parseOptions } from "./core/setup";
import { type AudioElement, findAudio, getRawData } from "./core/data";
import { generateMarkup, elementHooks } from "./markup";
import { _setupLocalListeners } from "./core/events";
import { loadedmetadata } from "./core/audio-functions";
/**
* ---------------------------------------------------------------------------
* ____ _ _ _ _
* | _ \(_) ___ ___ | |__ ___| | (_)___
* | |_) | |/ __/ _ \| '_ \ / _ \ | | / __|
* | __/| | (_| (_) | |_) | __/ |_ | \__ \
* |_| |_|\___\___/|_.__/ \___|_(_)| |___/
* Picobel.js _/ |
* picobel.tomhazledine.com |__/
*
* ===========================================================================
*
* Replace any native <audio> instances with standard elements (spans,
* buttons & divs) that you can style however you like.
* ---------------------------------------------------------------------------
*/
export const picobel = (rawOptions: Options = {}) => {
/**
* -----------------------------------------------------------------------
* RUN THE CODE
*
* This is where the methods are called. Reading these lines should
* give you a step-by-step overview of what Picobel does.
* -----------------------------------------------------------------------
*/
// Parse the options
const options = parseOptions(rawOptions);
// Declare a `state` variable that will hold the active state
let state = {
audioNodes: [] as AudioElement[],
theme: options.theme,
components: options.components as ComponentGroup[]
};
const _replaceNodes = (audioElements, newMarkup) => {
audioElements.map((element, key) => {
element.parentNode.replaceChild(newMarkup[key], element);
});
};
// Get audio elements from page, and save their details to state.
state.audioNodes = findAudio(options.context);
state.audioNodes = getRawData(state.audioNodes as AudioElement[]);
// Build markup for each element, based on `components`
const markup = generateMarkup(
state.audioNodes as AudioElement[],
state.components,
state.theme
);
// Replace audio elements in DOM with new markup
_replaceNodes(state.audioNodes, markup);
// Save new DOM elements to our node list
state.audioNodes = elementHooks(
state.audioNodes,
options.context,
state.theme
);
// Setup event listeners
state.audioNodes = _setupLocalListeners(state.audioNodes);
// Check status
state.audioNodes.forEach(node => {
Iif (node.readyState >= 1) {
loadedmetadata(node);
}
});
return { state };
};
|