diff --git a/build.js b/build.js index 52cbc55..9c158b4 100644 --- a/build.js +++ b/build.js @@ -31,18 +31,18 @@ const config = { ...globalConfig, format: "esm", entryPoints: [ - { out: "picobel", in: "src/js/index.js" }, - { out: "picobel-component", in: "src/js/web-component.js" }, + { out: "picobel", in: "src/js/outputs/index.js" }, + { out: "picobel-component", in: "src/js/wc/web-component.js" }, ...components.map(theme => ({ out: `picobel-component-${theme}`, - in: `src/js/web-component.${theme}.js` + in: `src/js/wc/web-component.${theme}.js` })) ], loader: { ".css": "text" } }, legacy: { ...globalConfig, - entryPoints: ["src/js/legacy.js"], + entryPoints: ["src/js/outputs/legacy.js"], entryNames: `picobel.${version}`, format: "iife" }, diff --git a/demo/component-default.html b/demo/component-default.html new file mode 100644 index 0000000..3bc6529 --- /dev/null +++ b/demo/component-default.html @@ -0,0 +1,77 @@ + + + + + Picobel.js Test Page + + + + + + + +
+

Testing Picobel: web component default

+

+ <picobel-player-default> +

+ + + + + +

+ <picobel-player-default> with multiple audio + nodes +

+ + + + + +
+ + + + diff --git a/demo/component.html b/demo/component.html index 4cb6bda..91f8bbd 100644 --- a/demo/component.html +++ b/demo/component.html @@ -21,11 +21,20 @@
  • Types
  • Manual
  • Web Component
    • +
  • + Web Component "default" +

    • Testing Picobel: web component

    + +

    + View experimental + Web Component "default". +

    +

    <picobel-player> loaded with no inbuilt styles @@ -44,11 +53,11 @@

    - <picobel-player-default> loaded (the - "default" theme) + <picobel-player> loaded with + data-theme="skeleton" and external stylesheet

    - + - - -

    - <picobel-player> loaded with - data-theme="skeleton" and external stylesheet -

    - - - + diff --git a/src/js/Picobel.js b/src/js/Picobel.js index 39709aa..9c2d90a 100644 --- a/src/js/Picobel.js +++ b/src/js/Picobel.js @@ -1,7 +1,8 @@ -import _helpers from "./helpers"; -import { parseOptions } from "./PicobelSetup"; -import PicobelData from "./PicobelData"; -import PicobelMarkup from "./PicobelMarkup"; +import { parseOptions } from "./core/setup"; +import { findAudio, getRawData } from "./core/data"; +import { generateMarkup, elementHooks } from "./markup"; +import { _setupLocalListeners } from "./core/events"; +import { canplaythrough } from "./core/audio-functions"; /** * --------------------------------------------------------------------------- @@ -48,243 +49,13 @@ export const picobel = (rawOptions = {}) => { }); }; - const _setupLocalListeners = nodes => - nodes.map((node, key) => { - // Audio event listeners - node.addEventListener( - "timeupdate", - PicobelAudio.triggerUpdateProgress, - false - ); - node.addEventListener( - "canplaythrough", - PicobelAudio.canplaythrough, - false - ); - node.addEventListener( - "error", - () => PicobelAudio.errors(key), - false - ); - - // DOM interaction event listeners - if (node.elements.playPauseButton) { - node.elements.playPauseButton.addEventListener( - "click", - PicobelAudio.triggerPlayPauseAudio, - false - ); - } - if (node.elements.progressBar) { - node.elements.progressBar.addEventListener( - "input", - PicobelAudio.sliderScrub, - false - ); - } - if (node.elements.progressBar) { - node.elements.progressBar.addEventListener( - "focus", - e => PicobelAudio.sliderFocus(e, true), - false - ); - } - if (node.elements.progressBar) { - node.elements.progressBar.addEventListener( - "blur", - e => PicobelAudio.sliderFocus(e, false), - false - ); - } - if (node.elements.volumeControl) { - node.elements.volumeControl.addEventListener( - "input", - PicobelAudio.volume, - false - ); - } - if (node.elements.volumeControl) { - node.elements.volumeControl.addEventListener( - "focus", - e => PicobelAudio.volumeFocus(e, true), - false - ); - } - if (node.elements.volumeControl) { - node.elements.volumeControl.addEventListener( - "blur", - e => PicobelAudio.volumeFocus(e, false), - false - ); - } - if (node.elements.muteButton) { - node.elements.muteButton.addEventListener( - "click", - PicobelAudio.muteUnmuteAudio, - false - ); - } - return node; - }); - - const PicobelAudio = { - pauseAll: () => { - state.audioNodes.forEach(node => { - PicobelAudio.pause(node); - }); - }, - triggerPlayPauseAudio: event => { - let index = _helpers.findParentIndex(event.srcElement); - let node = state.audioNodes.find(node => node.key == index); - PicobelAudio.playPauseAudio(node); - }, - playPauseAudio: node => { - if (node.paused || node.currentTime === 0) { - PicobelAudio.pauseAll(); - PicobelAudio.play(node); - } else { - PicobelAudio.pause(node); - } - }, - play: node => { - node.play(); - const button = node.elements.playPauseButton; - const buttonText = node.elements.playPauseButtonText; - button.classList.remove("paused"); - buttonText.innerHTML = "Pause"; - button.classList.add("playing"); - }, - pause: node => { - node.pause(); - const button = node.elements.playPauseButton; - const buttonText = node.elements.playPauseButtonText; - button.classList.remove("playing"); - buttonText.innerHTML = "Play"; - button.classList.add("paused"); - }, - stop: node => { - node.pause(); - const button = node.elements.playPauseButton; - const buttonText = node.elements.playPauseButtonText; - button.classList.remove("playing"); - buttonText.innerHTML = "Play"; - }, - triggerUpdateProgress: event => - PicobelAudio.updateProgress(event.srcElement), - - updateProgress: node => { - let progress = node.currentTime; - let duration = node.duration; - if (node.elements.playTimer) { - let progressParsed = _helpers.parseTime(progress); - node.elements.playTimer.innerHTML = progressParsed; - } - if (progress >= duration) { - PicobelAudio.stop(node); - } - let progressPercent = ((progress / duration) * 100).toFixed(2); - if (node.elements.progressBar) { - node.elements.progressBar.value = progressPercent; - node.elements.indicator.style.width = progressPercent + "%"; - node.elements.playhead.style.left = progressPercent + "%"; - } - }, - canplaythrough: function () { - PicobelMarkup.setLengthDisplay(this); - this.elements.wrapper.classList.remove("loading"); - let meta = PicobelData.getMeta(this); - PicobelMarkup.setMeta(meta, this.elements); - }, - errors: i => { - const { elements } = state.audioNodes[i]; - elements.wrapper.classList.add("error"); - elements.wrapper.classList.remove("loading"); - elements.wrapper.innerHTML = `
    Error loading audio file
    `; - }, - sliderScrub: event => { - let index = _helpers.findParentIndex(event.srcElement); - let activeNode = state.audioNodes.find(node => node.key == index); - let duration = activeNode.duration; - let targetTime = duration * (event.srcElement.value / 100); - targetTime = targetTime.toFixed(2); - activeNode.currentTime = targetTime; - PicobelAudio.updateProgress(activeNode); - }, - sliderFocus: (event, focus) => { - let index = _helpers.findParentIndex(event.srcElement); - let node = state.audioNodes.find(node => node.key == index); - node.elements.progressWrapper.classList.toggle("focus", focus); - }, - volume: event => { - let index = _helpers.findParentIndex(event.srcElement); - let node = state.audioNodes.find(node => node.key == index); - let volume = event.srcElement.value; - node.tmpVolume = node.volume; - node.mute = false; - PicobelAudio.mute(node); - PicobelAudio.setVolume(node, volume); - }, - volumeFocus: (event, focus) => { - let index = _helpers.findParentIndex(event.srcElement); - let node = state.audioNodes.find(node => node.key == index); - node.elements.volumeWrapper.classList.toggle("focus", focus); - }, - setVolume: (node, value) => { - let valueMapped = value * 10; - let volumePercent = value * 100; - node.volume = value; - console.log; - if (node.elements.volumeDisplay) { - node.elements.volumeDisplay.innerHTML = valueMapped; - } - if (node.elements.volumeControl) { - node.elements.volumeControl.value = value; - } - if (node.elements.volumeIndicator) { - node.elements.volumeIndicator.style.width = volumePercent + "%"; - } - if (node.elements.volumePlayhead) { - node.elements.volumePlayhead.style.left = volumePercent + "%"; - } - }, - muteUnmuteAudio: event => { - let index = _helpers.findParentIndex(event.srcElement); - let node = state.audioNodes.find(node => node.key == index); - node.mute = !node.mute; - PicobelAudio.mute(node); - }, - mute: node => { - const button = node.elements.muteButton; - - if (node.mute) { - node.tmpVolume = node.volume; - PicobelAudio.setVolume(node, 0); - button.classList.add("muted"); - button.classList.remove("unmuted"); - button.innerHTML = "Unmute"; - } else { - if ( - typeof node.tmpVolume != "undefined" && - node.tmpVolume > 0 - ) { - PicobelAudio.setVolume(node, node.tmpVolume); - } else { - PicobelAudio.setVolume(node, 1); - } - button.classList.remove("muted"); - button.classList.add("unmuted"); - button.innerHTML = "Mute"; - } - } - }; - // Get audio elements from page, and save their details to state. - state.audioNodes = PicobelData.findAudio(options.context); + state.audioNodes = findAudio(options.context); - state.audioNodes = PicobelData.getRawData(state.audioNodes); + state.audioNodes = getRawData(state.audioNodes); // Build markup for each element, based on `components` - const markup = PicobelMarkup.generateMarkup( + const markup = generateMarkup( state.audioNodes, state.components, state.theme @@ -294,7 +65,7 @@ export const picobel = (rawOptions = {}) => { _replaceNodes(state.audioNodes, markup); // Save new DOM elements to our node list - state.audioNodes = PicobelMarkup.elementHooks( + state.audioNodes = elementHooks( state.audioNodes, options.context, state.theme @@ -307,12 +78,11 @@ export const picobel = (rawOptions = {}) => { state.audioNodes.forEach(node => { const { readyState } = node; if (readyState === 4) { - PicobelAudio.canplaythrough.call(node); + canplaythrough(node); } }); return { - state, - PicobelAudio + state }; }; diff --git a/src/js/PicobelData.js b/src/js/PicobelData.js deleted file mode 100644 index 6c71dcd..0000000 --- a/src/js/PicobelData.js +++ /dev/null @@ -1,52 +0,0 @@ -import _helpers from "./helpers"; - -const PicobelData = { - // Return an array of all the