Skip to content

Update dom to ES6 #4914

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
limzykenneth merged 1 commit into from
Nov 22, 2020
Merged

Update dom to ES6 #4914

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 68 additions & 65 deletions src/dom/dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,9 +142,9 @@ p5.prototype._getContainer = function(p) {
* Helper function for getElement and getElements.
*/
p5.prototype._wrapElement = function(elt) {
var children = Array.prototype.slice.call(elt.children);
const children = Array.prototype.slice.call(elt.children);
if (elt.tagName === 'INPUT' && elt.type === 'checkbox') {
var converted = new p5.Element(elt, this);
let converted = new p5.Element(elt, this);
converted.checked = function() {
if (arguments.length === 0) {
return this.elt.checked;
Expand Down Expand Up @@ -302,9 +302,11 @@ p5.Element.prototype.input = function(fxn) {
* Helpers for create methods.
*/
function addElement(elt, pInst, media) {
var node = pInst._userNode ? pInst._userNode : document.body;
const node = pInst._userNode ? pInst._userNode : document.body;
node.appendChild(elt);
var c = media ? new p5.MediaElement(elt, pInst) : new p5.Element(elt, pInst);
const c = media
? new p5.MediaElement(elt, pInst)
: new p5.Element(elt, pInst);
pInst._elements.push(c);
return c;
}
Expand Down Expand Up @@ -387,9 +389,9 @@ p5.prototype.createSpan = function(html = '') {
*/
p5.prototype.createImg = function() {
p5._validateParameters('createImg', arguments);
var elt = document.createElement('img');
var args = arguments;
var self;
const elt = document.createElement('img');
const args = arguments;
let self;
if (args.length > 1 && typeof args[1] === 'string') {
elt.alt = args[1];
}
Expand All @@ -401,7 +403,7 @@ p5.prototype.createImg = function() {
elt.addEventListener('load', function() {
self.width = elt.offsetWidth || elt.width;
self.height = elt.offsetHeight || elt.height;
var last = args[args.length - 1];
const last = args[args.length - 1];
if (typeof last === 'function') last(self);
});
return self;
Expand All @@ -423,7 +425,7 @@ p5.prototype.createImg = function() {
*/
p5.prototype.createA = function(href, html, target) {
p5._validateParameters('createA', arguments);
var elt = document.createElement('a');
const elt = document.createElement('a');
elt.href = href;
elt.innerHTML = html;
if (target) elt.target = target;
Expand Down Expand Up @@ -474,7 +476,7 @@ p5.prototype.createA = function(href, html, target) {
*/
p5.prototype.createSlider = function(min, max, value, step) {
p5._validateParameters('createSlider', arguments);
var elt = document.createElement('input');
const elt = document.createElement('input');
elt.type = 'range';
elt.min = min;
elt.max = max;
Expand Down Expand Up @@ -515,7 +517,7 @@ p5.prototype.createSlider = function(min, max, value, step) {
*/
p5.prototype.createButton = function(label, value) {
p5._validateParameters('createButton', arguments);
var elt = document.createElement('button');
const elt = document.createElement('button');
elt.innerHTML = label;
if (value) elt.value = value;
return addElement(elt, this);
Expand Down Expand Up @@ -549,14 +551,14 @@ p5.prototype.createButton = function(label, value) {
*/
p5.prototype.createCheckbox = function() {
p5._validateParameters('createCheckbox', arguments);
var elt = document.createElement('div');
var checkbox = document.createElement('input');
const elt = document.createElement('div');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
elt.appendChild(checkbox);
//checkbox must be wrapped in p5.Element before label so that label appears after
var self = addElement(elt, this);
const self = addElement(elt, this);
self.checked = function() {
var cb = self.elt.getElementsByTagName('input')[0];
const cb = self.elt.getElementsByTagName('input')[0];
if (cb) {
if (arguments.length === 0) {
return cb.checked;
Expand All @@ -573,10 +575,10 @@ p5.prototype.createCheckbox = function() {
return this;
};
if (arguments[0]) {
var ran = Math.random()
const ran = Math.random()
.toString(36)
.slice(2);
var label = document.createElement('label');
const label = document.createElement('label');
checkbox.setAttribute('id', ran);
label.htmlFor = ran;
self.value(arguments[0]);
Expand Down Expand Up @@ -969,8 +971,8 @@ p5.prototype.createRadio = function() {
*/
p5.prototype.createColorPicker = function(value) {
p5._validateParameters('createColorPicker', arguments);
var elt = document.createElement('input');
var self;
const elt = document.createElement('input');
let self;
elt.type = 'color';
if (value) {
if (value instanceof p5.Color) {
Expand Down Expand Up @@ -1256,7 +1258,7 @@ if (navigator.mediaDevices === undefined) {
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
// First get ahold of the legacy getUserMedia, if present
var getUserMedia =
const getUserMedia =
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

// Some browsers just don't implement it - return a rejected promise with an error
Expand Down Expand Up @@ -1425,7 +1427,7 @@ p5.prototype.createCapture = function() {
*/
p5.prototype.createElement = function(tag, content) {
p5._validateParameters('createElement', arguments);
var elt = document.createElement(tag);
const elt = document.createElement(tag);
if (typeof content !== 'undefined') {
elt.innerHTML = content;
}
Expand Down Expand Up @@ -1626,18 +1628,18 @@ p5.Element.prototype.child = function(childNode) {
* </code></div>
*/
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 };
const style = this.elt.style.display;
const hidden = this.elt.style.display === 'none';
const parentHidden = this.parent().style.display === 'none';
const pos = { x: this.elt.offsetLeft, y: this.elt.offsetTop };

if (hidden) this.show();
if (parentHidden) this.parent().show();
this.elt.style.display = 'block';

this.position(0, 0);
var wOffset = Math.abs(this.parent().offsetWidth - this.elt.offsetWidth);
var hOffset = Math.abs(this.parent().offsetHeight - this.elt.offsetHeight);
const wOffset = Math.abs(this.parent().offsetWidth - this.elt.offsetWidth);
const hOffset = Math.abs(this.parent().offsetHeight - this.elt.offsetHeight);

if (align === 'both' || align === undefined) {
this.position(
Expand Down Expand Up @@ -1764,7 +1766,7 @@ p5.Element.prototype.position = function() {
p5.Element.prototype._translate = function() {
this.elt.style.position = 'absolute';
// save out initial non-translate transform styling
var transform = '';
let transform = '';
if (this.elt.style.transform) {
transform = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
transform = transform.replace(/translate[X-Z]?\(.*\)/g, '');
Expand Down Expand Up @@ -1795,7 +1797,7 @@ p5.Element.prototype._translate = function() {
/* Helper method called by p5.Element.style() */
p5.Element.prototype._rotate = function() {
// save out initial non-rotate transform styling
var transform = '';
let transform = '';
if (this.elt.style.transform) {
transform = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
transform = transform.replace(/rotate[X-Z]?\(.*\)/g, '');
Expand Down Expand Up @@ -1859,7 +1861,7 @@ p5.Element.prototype._rotate = function() {
* @chainable
*/
p5.Element.prototype.style = function(prop, val) {
var self = this;
const self = this;

if (val instanceof p5.Color) {
val =
Expand All @@ -1882,9 +1884,9 @@ p5.Element.prototype.style = function(prop, val) {
return style;
} else {
// value set using `:` in a single line string
var attrs = prop.split(';');
for (var i = 0; i < attrs.length; i++) {
var parts = attrs[i].split(':');
const attrs = prop.split(';');
for (let i = 0; i < attrs.length; i++) {
const parts = attrs[i].split(':');
if (parts[0] && parts[1]) {
this.elt.style[parts[0].trim()] = parts[1].trim();
}
Expand Down Expand Up @@ -1940,7 +1942,7 @@ p5.Element.prototype.attribute = function(attr, value) {
if (typeof value === 'undefined') {
return this.elt.firstChild.getAttribute(attr);
} else {
for (var i = 0; i < this.elt.childNodes.length; i++) {
for (let i = 0; i < this.elt.childNodes.length; i++) {
this.elt.childNodes[i].setAttribute(attr, value);
}
}
Expand Down Expand Up @@ -1989,7 +1991,7 @@ p5.Element.prototype.removeAttribute = function(attr) {
(this.elt.firstChild.type === 'checkbox' ||
this.elt.firstChild.type === 'radio')
) {
for (var i = 0; i < this.elt.childNodes.length; i++) {
for (let i = 0; i < this.elt.childNodes.length; i++) {
this.elt.childNodes[i].removeAttribute(attr);
}
}
Expand Down Expand Up @@ -2111,9 +2113,9 @@ p5.Element.prototype.size = function(w, h) {
if (arguments.length === 0) {
return { width: this.elt.offsetWidth, height: this.elt.offsetHeight };
} else {
var aW = w;
var aH = h;
var AUTO = p5.prototype.AUTO;
let aW = w;
let aH = h;
const AUTO = p5.prototype.AUTO;
if (aW !== AUTO || aH !== AUTO) {
if (aW === AUTO) {
aW = h * this.width / this.height;
Expand All @@ -2122,9 +2124,9 @@ p5.Element.prototype.size = function(w, h) {
}
// set diff for cnv vs normal div
if (this.elt instanceof HTMLCanvasElement) {
var j = {};
var k = this.elt.getContext('2d');
var prop;
const j = {};
const k = this.elt.getContext('2d');
let prop;
for (prop in k) {
j[prop] = k[prop];
}
Expand Down Expand Up @@ -2257,7 +2259,7 @@ p5.Element.prototype.drop = function(callback, fxn) {
if (!this._dragDisabled) {
this._dragDisabled = true;

var preventDefault = function(evt) {
const preventDefault = function(evt) {
evt.preventDefault();
};

Expand All @@ -2280,11 +2282,11 @@ p5.Element.prototype.drop = function(callback, fxn) {
fxn.call(this, evt);
}
// A FileList
var files = evt.dataTransfer.files;
const files = evt.dataTransfer.files;

// Load each one and trigger the callback
for (var i = 0; i < files.length; i++) {
var f = files[i];
for (let i = 0; i < files.length; i++) {
const f = files[i];
p5.File._load(f, callback);
}
},
Expand Down Expand Up @@ -2314,7 +2316,7 @@ p5.Element.prototype.drop = function(callback, fxn) {
p5.MediaElement = function(elt, pInst) {
p5.Element.call(this, elt, pInst);

var self = this;
const self = this;
this.elt.crossOrigin = 'anonymous';

this._prevTime = 0;
Expand Down Expand Up @@ -2364,16 +2366,17 @@ p5.MediaElement = function(elt, pInst) {
*/
Object.defineProperty(self, 'src', {
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;
const firstChildSrc = self.elt.children[0].src;
const srcVal = self.elt.src === window.location.href ? '' : self.elt.src;
const ret =
firstChildSrc === window.location.href ? srcVal : firstChildSrc;
return ret;
},
set: function(newValue) {
for (var i = 0; i < self.elt.children.length; i++) {
for (let i = 0; i < self.elt.children.length; i++) {
self.elt.removeChild(self.elt.children[i]);
}
var source = document.createElement('source');
const source = document.createElement('source');
source.src = newValue;
elt.appendChild(source);
self.elt.src = newValue;
Expand Down Expand Up @@ -2431,7 +2434,7 @@ p5.MediaElement.prototype.play = function() {
if (this.elt.currentTime === this.elt.duration) {
this.elt.currentTime = 0;
}
var promise;
let promise;
if (this.elt.readyState > 1) {
promise = this.elt.play();
} else {
Expand Down Expand Up @@ -3170,7 +3173,7 @@ p5.MediaElement.prototype.onended = function(callback) {
* or an object from the p5.sound library
*/
p5.MediaElement.prototype.connect = function(obj) {
var audioContext, mainOutput;
let audioContext, mainOutput;

// if p5.sound exists, same audio context
if (typeof p5.prototype.getAudioContext === 'function') {
Expand Down Expand Up @@ -3287,7 +3290,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) {
const Cue = function(callback, time, id, val) {
this.callback = callback;
this.time = time;
this.id = id;
Expand Down Expand Up @@ -3345,9 +3348,9 @@ var Cue = function(callback, time, id, val) {
* </code></div>
*/
p5.MediaElement.prototype.addCue = function(time, callback, val) {
var id = this._cueIDCounter++;
const id = this._cueIDCounter++;

var cue = new Cue(callback, time, id, val);
const cue = new Cue(callback, time, id, val);
this._cues.push(cue);

if (!this.elt.ontimeupdate) {
Expand Down Expand Up @@ -3387,7 +3390,7 @@ p5.MediaElement.prototype.addCue = function(time, callback, val) {
* </code></div>
*/
p5.MediaElement.prototype.removeCue = function(id) {
for (var i = 0; i < this._cues.length; i++) {
for (let i = 0; i < this._cues.length; i++) {
if (this._cues[i].id === id) {
console.log(id);
this._cues.splice(i, 1);
Expand Down Expand Up @@ -3441,11 +3444,11 @@ p5.MediaElement.prototype.clearCues = function() {
// private method that checks for cues to be fired if events
// have been scheduled using addCue(callback, time).
p5.MediaElement.prototype._onTimeUpdate = function() {
var playbackTime = this.time();
const playbackTime = this.time();

for (var i = 0; i < this._cues.length; i++) {
var callbackTime = this._cues[i].time;
var val = this._cues[i].val;
for (let i = 0; i < this._cues.length; i++) {
const callbackTime = this._cues[i].time;
const val = this._cues[i].val;

if (this._prevTime < callbackTime && callbackTime <= playbackTime) {
// pass the scheduled callbackTime as parameter to the callback
Expand Down Expand Up @@ -3476,7 +3479,7 @@ p5.File = function(file, pInst) {

// Splitting out the file type into two components
// This makes determining if image or text etc simpler
var typeList = file.type.split('/');
const typeList = file.type.split('/');
/**
* File type (image, text, etc.)
*
Expand Down Expand Up @@ -3512,9 +3515,9 @@ p5.File = function(file, pInst) {
};

p5.File._createLoader = function(theFile, callback) {
var reader = new FileReader();
const reader = new FileReader();
reader.onload = function(e) {
var p5file = new p5.File(theFile);
const p5file = new p5.File(theFile);
if (p5file.file.type === 'application/json') {
// Parse JSON and store the result in data
p5file.data = JSON.parse(e.target.result);
Expand All @@ -3539,7 +3542,7 @@ p5.File._load = function(f, callback) {
} else if (!/^(video|audio)\//.test(f.type)) {
p5.File._createLoader(f, callback).readAsDataURL(f);
} else {
var file = new p5.File(f);
const file = new p5.File(f);
file.data = URL.createObjectURL(f);
callback(file);
}
Expand Down