diff --git a/src/dom/dom.js b/src/dom/dom.js index 680064d655..e155030cb1 100644 --- a/src/dom/dom.js +++ b/src/dom/dom.js @@ -54,7 +54,7 @@ import p5 from '../core/main'; * [a, b, c, d, e]; // unused * */ -p5.prototype.select = function(e, p) { +p5.prototype.select = function (e, p) { p5._validateParameters('select', arguments); const container = this._getContainer(p); const res = container.querySelector(e); @@ -79,7 +79,7 @@ p5.prototype.select = function(e, p) { * , or HTML element to search within * @return {p5.Element[]} Array of p5.Elements containing nodes found * @example - *
+ *
* function setup() { * createButton('btn'); * createButton('2nd btn'); @@ -109,7 +109,7 @@ p5.prototype.select = function(e, p) { * console.log(a); *
*/ -p5.prototype.selectAll = function(e, p) { +p5.prototype.selectAll = function (e, p) { p5._validateParameters('selectAll', arguments); const arr = []; const container = this._getContainer(p); @@ -126,7 +126,7 @@ p5.prototype.selectAll = function(e, p) { /** * Helper function for select and selectAll */ -p5.prototype._getContainer = function(p) { +p5.prototype._getContainer = function (p) { let container = document; if (typeof p === 'string') { container = document.querySelector(p) || document; @@ -141,11 +141,11 @@ p5.prototype._getContainer = function(p) { /** * Helper function for getElement and getElements. */ -p5.prototype._wrapElement = function(elt) { +p5.prototype._wrapElement = function (elt) { var children = Array.prototype.slice.call(elt.children); if (elt.tagName === 'INPUT' && elt.type === 'checkbox') { var converted = new p5.Element(elt, this); - converted.checked = function() { + converted.checked = function () { if (arguments.length === 0) { return this.elt.checked; } else if (arguments[0]) { @@ -162,7 +162,7 @@ p5.prototype._wrapElement = function(elt) { return this.createSelect(new p5.Element(elt, this)); } else if ( children.length > 0 && - children.every(function(c) { + children.every(function (c) { return c.tagName === 'INPUT' || c.tagName === 'LABEL'; }) ) { @@ -178,7 +178,7 @@ p5.prototype._wrapElement = function(elt) { * Event handlers are removed, and element is removed from the DOM. * @method removeElements * @example - *
+ *
* function setup() { * createCanvas(100, 100); * createDiv('this is some text'); @@ -189,7 +189,7 @@ p5.prototype._wrapElement = function(elt) { * } *
*/ -p5.prototype.removeElements = function(e) { +p5.prototype.removeElements = function (e) { p5._validateParameters('removeElements', arguments); // el.remove splices from this._elements, so don't mix iteration with it const isNotCanvasElement = el => !(el.elt instanceof HTMLCanvasElement); @@ -259,7 +259,7 @@ p5.prototype.removeElements = function(e) { * @alt * dropdown: pear, kiwi, grape. When selected text "its a" + selection shown. */ -p5.Element.prototype.changed = function(fxn) { +p5.Element.prototype.changed = function (fxn) { p5.Element._adjustListener('change', fxn, this); return this; }; @@ -278,7 +278,7 @@ p5.Element.prototype.changed = function(fxn) { * firing function will no longer fire. * @chainable * @example - *
+ *
* // Open your console to see the output * function setup() { * let inp = createInput(''); @@ -293,7 +293,7 @@ p5.Element.prototype.changed = function(fxn) { * @alt * no display. */ -p5.Element.prototype.input = function(fxn) { +p5.Element.prototype.input = function (fxn) { p5.Element._adjustListener('input', fxn, this); return this; }; @@ -316,11 +316,11 @@ function addElement(elt, pInst, media) { * @param {String} [html] inner HTML for element created * @return {p5.Element} pointer to p5.Element holding created node * @example - *
+ *
* createDiv('this is some text'); *
*/ -p5.prototype.createDiv = function(html = '') { +p5.prototype.createDiv = function (html = '') { let elt = document.createElement('div'); elt.innerHTML = html; return addElement(elt, this); @@ -334,11 +334,11 @@ p5.prototype.createDiv = function(html = '') { * @param {String} [html] inner HTML for element created * @return {p5.Element} pointer to p5.Element holding created node * @example - *
+ *
* createP('this is some text'); *
*/ -p5.prototype.createP = function(html = '') { +p5.prototype.createP = function (html = '') { let elt = document.createElement('p'); elt.innerHTML = html; return addElement(elt, this); @@ -351,11 +351,11 @@ p5.prototype.createP = function(html = '') { * @param {String} [html] inner HTML for element created * @return {p5.Element} pointer to p5.Element holding created node * @example - *
+ *
* createSpan('this is some text'); *
*/ -p5.prototype.createSpan = function(html = '') { +p5.prototype.createSpan = function (html = '') { let elt = document.createElement('span'); elt.innerHTML = html; return addElement(elt, this); @@ -370,7 +370,7 @@ p5.prototype.createSpan = function(html = '') { * @param {String} alt alternate text to be used if image does not load. You can use also an empty string (`""`) if that an image is not intended to be viewed. * @return {p5.Element} pointer to p5.Element holding created node * @example - *
+ *
* createImg( * 'https://p5js.org/assets/img/asterisk-01.png', * 'the p5 magenta asterisk' @@ -385,7 +385,7 @@ p5.prototype.createSpan = function(html = '') { * @param {Function} [successCallback] callback to be called once image data is loaded with the p5.Element as argument * @return {p5.Element} pointer to p5.Element holding created node */ -p5.prototype.createImg = function() { +p5.prototype.createImg = function () { p5._validateParameters('createImg', arguments); var elt = document.createElement('img'); var args = arguments; @@ -398,7 +398,7 @@ p5.prototype.createImg = function() { } elt.src = args[0]; self = addElement(elt, this); - elt.addEventListener('load', function() { + elt.addEventListener('load', function () { self.width = elt.offsetWidth || elt.width; self.height = elt.offsetHeight || elt.height; var last = args[args.length - 1]; @@ -417,11 +417,11 @@ p5.prototype.createImg = function() { * could be _blank, _self, _parent, _top. * @return {p5.Element} pointer to p5.Element holding created node * @example - *
+ *
* createA('http://p5js.org/', 'this is a link'); *
*/ -p5.prototype.createA = function(href, html, target) { +p5.prototype.createA = function (href, html, target) { p5._validateParameters('createA', arguments); var elt = document.createElement('a'); elt.href = href; @@ -472,7 +472,7 @@ p5.prototype.createA = function(href, html, target) { * } *
*/ -p5.prototype.createSlider = function(min, max, value, step) { +p5.prototype.createSlider = function (min, max, value, step) { p5._validateParameters('createSlider', arguments); var elt = document.createElement('input'); elt.type = 'range'; @@ -497,7 +497,7 @@ p5.prototype.createSlider = function(min, max, value, step) { * @param {String} [value] value of the button * @return {p5.Element} pointer to p5.Element holding created node * @example - *
+ *
* let button; * function setup() { * createCanvas(100, 100); @@ -513,7 +513,7 @@ p5.prototype.createSlider = function(min, max, value, step) { * } *
*/ -p5.prototype.createButton = function(label, value) { +p5.prototype.createButton = function (label, value) { p5._validateParameters('createButton', arguments); var elt = document.createElement('button'); elt.innerHTML = label; @@ -530,7 +530,7 @@ p5.prototype.createButton = function(label, value) { * @param {boolean} [value] value of the checkbox; checked is true, unchecked is false * @return {p5.Element} pointer to p5.Element holding created node * @example - *
+ *
* let checkbox; * * function setup() { @@ -547,7 +547,7 @@ p5.prototype.createButton = function(label, value) { * } *
*/ -p5.prototype.createCheckbox = function() { +p5.prototype.createCheckbox = function () { p5._validateParameters('createCheckbox', arguments); var elt = document.createElement('div'); var checkbox = document.createElement('input'); @@ -555,7 +555,7 @@ p5.prototype.createCheckbox = function() { elt.appendChild(checkbox); //checkbox must be wrapped in p5.Element before label so that label appears after var self = addElement(elt, this); - self.checked = function() { + self.checked = function () { var cb = self.elt.getElementsByTagName('input')[0]; if (cb) { if (arguments.length === 0) { @@ -568,7 +568,7 @@ p5.prototype.createCheckbox = function() { } return self; }; - this.value = function(val) { + this.value = function (val) { self.value = val; return this; }; @@ -646,7 +646,7 @@ p5.prototype.createCheckbox = function() { * @return {p5.Element} */ -p5.prototype.createSelect = function() { +p5.prototype.createSelect = function () { p5._validateParameters('createSelect', arguments); let self; let arg = arguments[0]; @@ -665,7 +665,7 @@ p5.prototype.createSelect = function() { self = addElement(elt, this); this.elt = elt; } - self.option = function(name, value) { + self.option = function (name, value) { let index; // if no name is passed, return @@ -698,7 +698,7 @@ p5.prototype.createSelect = function() { } }; - self.selected = function(value) { + self.selected = function (value) { // Update selected status of option if (value !== undefined) { for (let i = 0; i < this.elt.length; i += 1) { @@ -720,7 +720,7 @@ p5.prototype.createSelect = function() { } }; - self.disable = function(value) { + self.disable = function (value) { if (typeof value === 'string') { for (let i = 0; i < this.elt.length; i++) { if (this.elt[i].value.toString() === value) { @@ -804,7 +804,7 @@ p5.prototype.createSelect = function() { * @method createRadio * @return {p5.Element} pointer to p5.Element holding created node */ -p5.prototype.createRadio = function() { +p5.prototype.createRadio = function () { // Creates a div, adds each option as an individual input inside it. // If already given with a containerEl, will search for all input[radio] // it, create a p5.Element out of it, add options to it and return the p5.Element. @@ -829,11 +829,11 @@ p5.prototype.createRadio = function() { el instanceof HTMLInputElement && el.type === 'radio'; const isNextLabel = el => el.nextElementSibling instanceof HTMLLabelElement; - self._getOptionsArray = function() { + self._getOptionsArray = function () { return Array.from(this.elt.children).filter(isRadioInput); }; - self.option = function(value, label) { + self.option = function (value, label) { // return an option with this value, create if not exists. let optionEl; for (const option of self._getOptionsArray()) { @@ -865,7 +865,7 @@ p5.prototype.createRadio = function() { return optionEl; }; - self.remove = function(value) { + self.remove = function (value) { for (const optionEl of self._getOptionsArray()) { if (optionEl.value === value) { if (isNextLabel(optionEl)) optionEl.nextElementSibling.remove(); @@ -875,7 +875,7 @@ p5.prototype.createRadio = function() { } }; - self.value = function() { + self.value = function () { let result = ''; for (const option of self._getOptionsArray()) { if (option.checked) { @@ -886,7 +886,7 @@ p5.prototype.createRadio = function() { return result; }; - self.selected = function(value) { + self.selected = function (value) { let result = null; if (value === undefined) { for (const option of self._getOptionsArray()) { @@ -906,7 +906,7 @@ p5.prototype.createRadio = function() { return result; }; - self.disable = function(shouldDisable = true) { + self.disable = function (shouldDisable = true) { for (const radioInput of self._getOptionsArray()) { radioInput.setAttribute('disabled', shouldDisable); } @@ -967,7 +967,7 @@ p5.prototype.createRadio = function() { * } *
*/ -p5.prototype.createColorPicker = function(value) { +p5.prototype.createColorPicker = function (value) { p5._validateParameters('createColorPicker', arguments); var elt = document.createElement('input'); var self; @@ -989,7 +989,7 @@ p5.prototype.createColorPicker = function(value) { } self = addElement(elt, this); // Method to return a p5.Color object for the given color. - self.color = function() { + self.color = function () { if (value) { if (value.mode) { p5.prototype._colorMode = value.mode; @@ -1013,7 +1013,7 @@ p5.prototype.createColorPicker = function(value) { * Needs a value to be specified first. * @return {p5.Element} pointer to p5.Element holding created node * @example - *
+ *
* function setup() { * let inp = createInput(''); * inp.input(myInputEvent); @@ -1029,7 +1029,7 @@ p5.prototype.createColorPicker = function(value) { * @param {String} [value] * @return {p5.Element} */ -p5.prototype.createInput = function(value = '', type = 'text') { +p5.prototype.createInput = function (value = '', type = 'text') { p5._validateParameters('createInput', arguments); let elt = document.createElement('input'); elt.setAttribute('value', value); @@ -1073,10 +1073,10 @@ p5.prototype.createInput = function(value = '', type = 'text') { * } *
*/ -p5.prototype.createFileInput = function(callback, multiple = false) { +p5.prototype.createFileInput = function (callback, multiple = false) { p5._validateParameters('createFileInput', arguments); - const handleFileSelect = function(event) { + const handleFileSelect = function (event) { for (const file of event.target.files) { p5.File._load(file, callback); } @@ -1185,7 +1185,7 @@ function createMedia(pInst, type, src, callback) { * } *
*/ -p5.prototype.createVideo = function(src, callback) { +p5.prototype.createVideo = function (src, callback) { p5._validateParameters('createVideo', arguments); return createMedia(this, 'video', src, callback); }; @@ -1224,7 +1224,7 @@ p5.prototype.createVideo = function(src, callback) { * } *
*/ -p5.prototype.createAudio = function(src, callback) { +p5.prototype.createAudio = function (src, callback) { p5._validateParameters('createAudio', arguments); return createMedia(this, 'audio', src, callback); }; @@ -1254,7 +1254,7 @@ if (navigator.mediaDevices === undefined) { // with getUserMedia as it would overwrite existing properties. // Here, we will just add the getUserMedia property if it's missing. if (navigator.mediaDevices.getUserMedia === undefined) { - navigator.mediaDevices.getUserMedia = function(constraints) { + navigator.mediaDevices.getUserMedia = function (constraints) { // First get ahold of the legacy getUserMedia, if present var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia; @@ -1268,7 +1268,7 @@ if (navigator.mediaDevices.getUserMedia === undefined) { } // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise - return new Promise(function(resolve, reject) { + return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); }; @@ -1301,7 +1301,7 @@ if (navigator.mediaDevices.getUserMedia === undefined) { * stream has loaded * @return {p5.Element} capture video p5.Element * @example - *
+ *
* * let capture; * @@ -1356,7 +1356,7 @@ if (navigator.mediaDevices.getUserMedia === undefined) { * *
*/ -p5.prototype.createCapture = function() { +p5.prototype.createCapture = function () { p5._validateParameters('createCapture', arguments); // return if getUserMedia is not supported by browser @@ -1374,13 +1374,16 @@ p5.prototype.createCapture = function() { else if (typeof arg === 'object') constraints = arg; else if (typeof arg === 'function') callback = arg; } - if (!constraints) constraints = { video: useVideo, audio: useAudio }; + if (!constraints) constraints = { + video: useVideo, + audio: useAudio + }; const domElement = document.createElement('video'); // required to work in iOS 11 & up: domElement.setAttribute('playsinline', ''); - navigator.mediaDevices.getUserMedia(constraints).then(function(stream) { + navigator.mediaDevices.getUserMedia(constraints).then(function (stream) { try { if ('srcObject' in domElement) { domElement.srcObject = stream; @@ -1395,7 +1398,7 @@ p5.prototype.createCapture = function() { const videoEl = addElement(domElement, this, true); videoEl.loadedmetadata = false; // set width and height onload metadata - domElement.addEventListener('loadedmetadata', function() { + domElement.addEventListener('loadedmetadata', function () { domElement.play(); if (domElement.width) { videoEl.width = domElement.width; @@ -1419,11 +1422,11 @@ p5.prototype.createCapture = function() { * @param {String} [content] html content to be inserted into the element * @return {p5.Element} pointer to p5.Element holding created node * @example - *
+ *
* createElement('h2', 'im an h2 p5.element!'); *
*/ -p5.prototype.createElement = function(tag, content) { +p5.prototype.createElement = function (tag, content) { p5._validateParameters('createElement', arguments); var elt = document.createElement(tag); if (typeof content !== 'undefined') { @@ -1449,7 +1452,7 @@ p5.prototype.createElement = function(tag, content) { * div.addClass('myClass'); *
*/ -p5.Element.prototype.addClass = function(c) { +p5.Element.prototype.addClass = function (c) { if (this.elt.className) { if (!this.hasClass(c)) { this.elt.className = this.elt.className + ' ' + c; @@ -1485,7 +1488,7 @@ p5.Element.prototype.addClass = function(c) { * } *
*/ -p5.Element.prototype.removeClass = function(c) { +p5.Element.prototype.removeClass = function (c) { // Note: Removing a class that does not exist does NOT throw an error in classList.remove method this.elt.classList.remove(c); return this; @@ -1516,7 +1519,7 @@ p5.Element.prototype.removeClass = function(c) { * } *
*/ -p5.Element.prototype.hasClass = function(c) { +p5.Element.prototype.hasClass = function (c) { return this.elt.classList.contains(c); }; @@ -1541,7 +1544,7 @@ p5.Element.prototype.hasClass = function(c) { * } *
*/ -p5.Element.prototype.toggleClass = function(c) { +p5.Element.prototype.toggleClass = function (c) { // classList also has a toggle() method, but we cannot use that yet as support is unclear. // See https://github.com/processing/p5.js/issues/3631 // this.elt.classList.toggle(c); @@ -1587,7 +1590,7 @@ p5.Element.prototype.toggleClass = function(c) { * to add to the current element * @chainable */ -p5.Element.prototype.child = function(childNode) { +p5.Element.prototype.child = function (childNode) { if (typeof childNode === 'undefined') { return this.elt.childNodes; } @@ -1625,11 +1628,14 @@ p5.Element.prototype.child = function(childNode) { * } *
*/ -p5.Element.prototype.center = function(align) { +p5.Element.prototype.center = function (align) { var style = this.elt.style.display; var hidden = this.elt.style.display === 'none'; var parentHidden = this.parent().style.display === 'none'; - var pos = { x: this.elt.offsetLeft, y: this.elt.offsetTop }; + var pos = { + x: this.elt.offsetLeft, + y: this.elt.offsetTop + }; if (hidden) this.show(); if (parentHidden) this.parent().show(); @@ -1684,7 +1690,7 @@ p5.Element.prototype.center = function(align) { * @param {boolean} [append] whether to append HTML to existing * @chainable */ -p5.Element.prototype.html = function() { +p5.Element.prototype.html = function () { if (arguments.length === 0) { return this.elt.innerHTML; } else if (arguments[1]) { @@ -1736,9 +1742,12 @@ p5.Element.prototype.html = function() { * @param {String} positionType it can be static, fixed, relative, sticky, initial or inherit (optional) * @chainable */ -p5.Element.prototype.position = function() { +p5.Element.prototype.position = function () { if (arguments.length === 0) { - return { x: this.elt.offsetLeft, y: this.elt.offsetTop }; + return { + x: this.elt.offsetLeft, + y: this.elt.offsetTop + }; } else { let positionType = 'absolute'; if ( @@ -1761,7 +1770,7 @@ p5.Element.prototype.position = function() { }; /* Helper method called by p5.Element.style() */ -p5.Element.prototype._translate = function() { +p5.Element.prototype._translate = function () { this.elt.style.position = 'absolute'; // save out initial non-translate transform styling var transform = ''; @@ -1793,7 +1802,7 @@ p5.Element.prototype._translate = function() { }; /* Helper method called by p5.Element.style() */ -p5.Element.prototype._rotate = function() { +p5.Element.prototype._rotate = function () { // save out initial non-rotate transform styling var transform = ''; if (this.elt.style.transform) { @@ -1858,7 +1867,7 @@ p5.Element.prototype._rotate = function() { * @return {String} current value of property, if no value is given as second argument * @chainable */ -p5.Element.prototype.style = function(prop, val) { +p5.Element.prototype.style = function (prop, val) { var self = this; if (val instanceof p5.Color) { @@ -1929,7 +1938,7 @@ p5.Element.prototype.style = function(prop, val) { * @param {String} value value to assign to attribute * @chainable */ -p5.Element.prototype.attribute = function(attr, value) { +p5.Element.prototype.attribute = function (attr, value) { //handling for checkboxes and radios to ensure options get //attributes not divs if ( @@ -1983,7 +1992,7 @@ p5.Element.prototype.attribute = function(attr, value) { * } *
*/ -p5.Element.prototype.removeAttribute = function(attr) { +p5.Element.prototype.removeAttribute = function (attr) { if ( this.elt.firstChild != null && (this.elt.firstChild.type === 'checkbox' || @@ -2032,7 +2041,7 @@ p5.Element.prototype.removeAttribute = function(attr) { * @param {String|Number} value * @chainable */ -p5.Element.prototype.value = function() { +p5.Element.prototype.value = function () { if (arguments.length > 0) { this.elt.value = arguments[0]; return this; @@ -2056,7 +2065,7 @@ p5.Element.prototype.value = function() { * div.show(); // turns display to block *
*/ -p5.Element.prototype.show = function() { +p5.Element.prototype.show = function () { this.elt.style.display = 'block'; return this; }; @@ -2072,7 +2081,7 @@ p5.Element.prototype.show = function() { * div.hide(); *
*/ -p5.Element.prototype.hide = function() { +p5.Element.prototype.hide = function () { this.elt.style.display = 'none'; return this; }; @@ -2107,9 +2116,12 @@ p5.Element.prototype.hide = function() { * @param {Number|Constant} [h] height of the element, either AUTO, or a number * @chainable */ -p5.Element.prototype.size = function(w, h) { +p5.Element.prototype.size = function (w, h) { if (arguments.length === 0) { - return { width: this.elt.offsetWidth, height: this.elt.offsetHeight }; + return { + width: this.elt.offsetWidth, + height: this.elt.offsetHeight + }; } else { var aW = w; var aH = h; @@ -2167,12 +2179,12 @@ p5.Element.prototype.size = function(w, h) { * myDiv.remove(); *
*/ -p5.Element.prototype.remove = function() { +p5.Element.prototype.remove = function () { // stop all audios/videos and detach all devices like microphone/camera etc // used as input/output for audios/videos. if (this instanceof p5.MediaElement) { const tracks = this.elt.srcObject.getTracks(); - tracks.forEach(function(track) { + tracks.forEach(function (track) { track.stop(); }); } @@ -2251,13 +2263,13 @@ p5.Element.prototype.remove = function() { * @alt * Canvas turns into whatever image is dragged/dropped onto it. */ -p5.Element.prototype.drop = function(callback, fxn) { +p5.Element.prototype.drop = function (callback, fxn) { // Is the file stuff supported? if (window.File && window.FileReader && window.FileList && window.Blob) { if (!this._dragDisabled) { this._dragDisabled = true; - var preventDefault = function(evt) { + var preventDefault = function (evt) { evt.preventDefault(); }; @@ -2273,7 +2285,7 @@ p5.Element.prototype.drop = function(callback, fxn) { // Deal with the files p5.Element._attachListener( 'drop', - function(evt) { + function (evt) { evt.preventDefault(); // Call the second argument as a callback that receives the raw drop event if (typeof fxn === 'function') { @@ -2311,7 +2323,7 @@ p5.Element.prototype.drop = function(callback, fxn) { * @constructor * @param {String} elt DOM node that is wrapped */ -p5.MediaElement = function(elt, pInst) { +p5.MediaElement = function (elt, pInst) { p5.Element.call(this, elt, pInst); var self = this; @@ -2363,13 +2375,13 @@ p5.MediaElement = function(elt, pInst) { *
*/ Object.defineProperty(self, 'src', { - get: function() { + get: function () { var firstChildSrc = self.elt.children[0].src; var srcVal = self.elt.src === window.location.href ? '' : self.elt.src; var ret = firstChildSrc === window.location.href ? srcVal : firstChildSrc; return ret; }, - set: function(newValue) { + set: function (newValue) { for (var i = 0; i < self.elt.children.length; i++) { self.elt.removeChild(self.elt.children[i]); } @@ -2382,8 +2394,8 @@ p5.MediaElement = function(elt, pInst) { }); // private _onended callback, set by the method: onended(callback) - self._onended = function() {}; - self.elt.onended = function() { + self._onended = function () {}; + self.elt.onended = function () { self._onended(self); }; }; @@ -2427,7 +2439,7 @@ p5.MediaElement.prototype = Object.create(p5.Element.prototype); * } *
*/ -p5.MediaElement.prototype.play = function() { +p5.MediaElement.prototype.play = function () { if (this.elt.currentTime === this.elt.duration) { this.elt.currentTime = 0; } @@ -2440,7 +2452,7 @@ p5.MediaElement.prototype.play = function() { promise = this.elt.play(); } if (promise && promise.catch) { - promise.catch(function(e) { + promise.catch(function (e) { // if it's an autoplay failure error if (e.name === 'NotAllowedError') { p5._friendlyAutoplayError(this.src); @@ -2511,7 +2523,7 @@ p5.MediaElement.prototype.play = function() { * } * */ -p5.MediaElement.prototype.stop = function() { +p5.MediaElement.prototype.stop = function () { this.elt.pause(); this.elt.currentTime = 0; return this; @@ -2574,7 +2586,7 @@ p5.MediaElement.prototype.stop = function() { * } * */ -p5.MediaElement.prototype.pause = function() { +p5.MediaElement.prototype.pause = function () { this.elt.pause(); return this; }; @@ -2630,7 +2642,7 @@ p5.MediaElement.prototype.pause = function() { * } * */ -p5.MediaElement.prototype.loop = function() { +p5.MediaElement.prototype.loop = function () { this.elt.setAttribute('loop', true); this.play(); return this; @@ -2682,7 +2694,7 @@ p5.MediaElement.prototype.loop = function() { * } * */ -p5.MediaElement.prototype.noLoop = function() { +p5.MediaElement.prototype.noLoop = function () { this.elt.removeAttribute('loop'); return this; }; @@ -2693,7 +2705,7 @@ p5.MediaElement.prototype.noLoop = function() { * @method setupAutoplayFailDetection * @private */ -p5.MediaElement.prototype._setupAutoplayFailDetection = function() { +p5.MediaElement.prototype._setupAutoplayFailDetection = function () { const timeout = setTimeout(() => p5._friendlyAutoplayError(this.src), 500); this.elt.addEventListener('play', () => clearTimeout(timeout), { passive: true, @@ -2746,7 +2758,7 @@ p5.MediaElement.prototype._setupAutoplayFailDetection = function() { * An example of a video element which waits for a trigger for playing. */ -p5.MediaElement.prototype.autoplay = function(val) { +p5.MediaElement.prototype.autoplay = function (val) { const oldVal = this.elt.getAttribute('autoplay'); this.elt.setAttribute('autoplay', val); // if we turned on autoplay @@ -2846,7 +2858,7 @@ p5.MediaElement.prototype.autoplay = function(val) { * @param {Number} val volume between 0.0 and 1.0 * @chainable */ -p5.MediaElement.prototype.volume = function(val) { +p5.MediaElement.prototype.volume = function (val) { if (typeof val === 'undefined') { return this.elt.volume; } else { @@ -2931,7 +2943,7 @@ p5.MediaElement.prototype.volume = function(val) { * @param {Number} speed speed multiplier for element playback * @chainable */ -p5.MediaElement.prototype.speed = function(val) { +p5.MediaElement.prototype.speed = function (val) { if (typeof val === 'undefined') { return this.presetPlaybackRate || this.elt.playbackRate; } else { @@ -2993,7 +3005,7 @@ p5.MediaElement.prototype.speed = function(val) { * @param {Number} time time to jump to (in seconds) * @chainable */ -p5.MediaElement.prototype.time = function(val) { +p5.MediaElement.prototype.time = function (val) { if (typeof val === 'undefined') { return this.elt.currentTime; } else { @@ -3030,11 +3042,11 @@ p5.MediaElement.prototype.time = function(val) { * } * */ -p5.MediaElement.prototype.duration = function() { +p5.MediaElement.prototype.duration = function () { return this.elt.duration; }; p5.MediaElement.prototype.pixels = []; -p5.MediaElement.prototype._ensureCanvas = function() { +p5.MediaElement.prototype._ensureCanvas = function () { if (!this.canvas) { this.canvas = document.createElement('canvas'); this.drawingContext = this.canvas.getContext('2d'); @@ -3059,11 +3071,11 @@ p5.MediaElement.prototype._ensureCanvas = function() { this.setModified(true); } }; -p5.MediaElement.prototype.loadPixels = function() { +p5.MediaElement.prototype.loadPixels = function () { this._ensureCanvas(); return p5.Renderer2D.prototype.loadPixels.apply(this, arguments); }; -p5.MediaElement.prototype.updatePixels = function(x, y, w, h) { +p5.MediaElement.prototype.updatePixels = function (x, y, w, h) { if (this.loadedmetadata) { // wait for metadata this._ensureCanvas(); @@ -3072,16 +3084,16 @@ p5.MediaElement.prototype.updatePixels = function(x, y, w, h) { this.setModified(true); return this; }; -p5.MediaElement.prototype.get = function() { +p5.MediaElement.prototype.get = function () { this._ensureCanvas(); return p5.Renderer2D.prototype.get.apply(this, arguments); }; -p5.MediaElement.prototype._getPixel = function() { +p5.MediaElement.prototype._getPixel = function () { this.loadPixels(); return p5.Renderer2D.prototype._getPixel.apply(this, arguments); }; -p5.MediaElement.prototype.set = function(x, y, imgOrCol) { +p5.MediaElement.prototype.set = function (x, y, imgOrCol) { if (this.loadedmetadata) { // wait for metadata this._ensureCanvas(); @@ -3089,11 +3101,11 @@ p5.MediaElement.prototype.set = function(x, y, imgOrCol) { this.setModified(true); } }; -p5.MediaElement.prototype.copy = function() { +p5.MediaElement.prototype.copy = function () { this._ensureCanvas(); p5.prototype.copy.apply(this, arguments); }; -p5.MediaElement.prototype.mask = function() { +p5.MediaElement.prototype.mask = function () { this.loadPixels(); this.setModified(true); p5.Image.prototype.mask.apply(this, arguments); @@ -3107,7 +3119,7 @@ p5.MediaElement.prototype.mask = function() { * @return {boolean} a boolean indicating whether or not the * image has been updated or modified since last texture upload. */ -p5.MediaElement.prototype.isModified = function() { +p5.MediaElement.prototype.isModified = function () { return this._modified; }; /** @@ -3121,7 +3133,7 @@ p5.MediaElement.prototype.isModified = function() { * modified. * @private */ -p5.MediaElement.prototype.setModified = function(value) { +p5.MediaElement.prototype.setModified = function (value) { this._modified = value; }; /** @@ -3150,7 +3162,7 @@ p5.MediaElement.prototype.setModified = function(value) { * } * */ -p5.MediaElement.prototype.onended = function(callback) { +p5.MediaElement.prototype.onended = function (callback) { this._onended = callback; return this; }; @@ -3169,7 +3181,7 @@ p5.MediaElement.prototype.onended = function(callback) { * @param {AudioNode|Object} audioNode AudioNode from the Web Audio API, * or an object from the p5.sound library */ -p5.MediaElement.prototype.connect = function(obj) { +p5.MediaElement.prototype.connect = function (obj) { var audioContext, mainOutput; // if p5.sound exists, same audio context @@ -3213,7 +3225,7 @@ p5.MediaElement.prototype.connect = function(obj) { * * @method disconnect */ -p5.MediaElement.prototype.disconnect = function() { +p5.MediaElement.prototype.disconnect = function () { if (this.audioSourceNode) { this.audioSourceNode.disconnect(); } else { @@ -3248,7 +3260,7 @@ p5.MediaElement.prototype.disconnect = function() { * } * */ -p5.MediaElement.prototype.showControls = function() { +p5.MediaElement.prototype.showControls = function () { // must set style for the element to show on the page this.elt.style['text-align'] = 'inherit'; this.elt.controls = true; @@ -3279,7 +3291,7 @@ p5.MediaElement.prototype.showControls = function() { * } * */ -p5.MediaElement.prototype.hideControls = function() { +p5.MediaElement.prototype.hideControls = function () { this.elt.controls = false; }; @@ -3287,7 +3299,7 @@ p5.MediaElement.prototype.hideControls = function() { // Cue inspired by JavaScript setTimeout, and the // Tone.js Transport Timeline Event, MIT License Yotam Mann 2015 tonejs.org -var Cue = function(callback, time, id, val) { +var Cue = function (callback, time, id, val) { this.callback = callback; this.time = time; this.id = id; @@ -3344,7 +3356,7 @@ var Cue = function(callback, time, id, val) { * } * */ -p5.MediaElement.prototype.addCue = function(time, callback, val) { +p5.MediaElement.prototype.addCue = function (time, callback, val) { var id = this._cueIDCounter++; var cue = new Cue(callback, time, id, val); @@ -3386,7 +3398,7 @@ p5.MediaElement.prototype.addCue = function(time, callback, val) { * } * */ -p5.MediaElement.prototype.removeCue = function(id) { +p5.MediaElement.prototype.removeCue = function (id) { for (var i = 0; i < this._cues.length; i++) { if (this._cues[i].id === id) { console.log(id); @@ -3433,14 +3445,14 @@ p5.MediaElement.prototype.removeCue = function(id) { * } * */ -p5.MediaElement.prototype.clearCues = function() { +p5.MediaElement.prototype.clearCues = function () { this._cues = []; this.elt.ontimeupdate = null; }; // private method that checks for cues to be fired if events // have been scheduled using addCue(callback, time). -p5.MediaElement.prototype._onTimeUpdate = function() { +p5.MediaElement.prototype._onTimeUpdate = function () { var playbackTime = this.time(); for (var i = 0; i < this._cues.length; i++) { @@ -3464,7 +3476,7 @@ p5.MediaElement.prototype._onTimeUpdate = function() { * @constructor * @param {File} file File that is wrapped */ -p5.File = function(file, pInst) { +p5.File = function (file, pInst) { /** * Underlying File object. All normal File methods can be called on this. * @@ -3511,9 +3523,9 @@ p5.File = function(file, pInst) { this.data = undefined; }; -p5.File._createLoader = function(theFile, callback) { +p5.File._createLoader = function (theFile, callback) { var reader = new FileReader(); - reader.onload = function(e) { + reader.onload = function (e) { var p5file = new p5.File(theFile); if (p5file.file.type === 'application/json') { // Parse JSON and store the result in data @@ -3531,7 +3543,7 @@ p5.File._createLoader = function(theFile, callback) { return reader; }; -p5.File._load = function(f, callback) { +p5.File._load = function (f, callback) { // Text or data? // This should likely be improved if (/^text\//.test(f.type) || f.type === 'application/json') {