/*! p5.dom.js v0.1.5 November 7, 2014 */ /** *
The web is much more than just canvas and p5.dom makes it easy to interact * with other HTML5 objects, including text, hyperlink, image, input, video, * audio, and webcam.
*There is a set of creation methods, DOM manipulation methods, and * an extended p5.Element that supports a range of HTML elements. See the * * beyond the canvas tutorial for a full overview of how this addon works. * *
Methods and properties shown in black are part of the p5.js core, items in * blue are part of the p5.dom library. You will need to include an extra file * in order to access the blue functions. See the * using a library * section for information on how to include this library. p5.dom comes with * p5 complete or you can download the single file * * here.
*See tutorial: beyond the canvas] * for more info on how to use this libary. * * @module p5.dom * @submodule p5.dom * @for p5.dom * @main */ var p5DOM = (function(){ // ============================================================================= // p5 additions // ============================================================================= /** * Searches the page for an element with given ID and returns it as * a p5.Element. The DOM node itself can be accessed with .elt. * Returns null if none found. * * @method getElement * @param {String} id id of element to search for * @return {Object/p5.Element|Null} p5.Element containing node found */ p5.prototype.getElement = function (e) { var res = document.getElementById(e); if (res) { return new p5.Element(res); } else { return null; } }; /** * Searches the page for elements with given class and returns an * array of p5.Elements. The DOM nodes themselves can be accessed * with .elt. Returns an empty array if none found. * * @method getElements * @param {String} class class name of elements to search for * @return {Array} array of p5.Element wrapped nodes found */ p5.prototype.getElements = function (e) { var arr = []; var res = document.getElementsByClassName(e); if (res) { for (var j = 0; j < res.length; j++) { var obj = new p5.Element(res[j]); arr.push(obj); } } return arr; }; /** * Removes all elements created by p5, except any canvas / graphics * elements created by createCanvas or createGraphics. * Event handlers are removed, and element is removed from the DOM. * @method removeElements * @example *
* function setup() {
* createCanvas(100, 100);
* createDiv('this is some text');
* createP('this is a paragraph');
* }
* function mousePressed() {
* removeElements(); // this will remove the div and p, not canvas
* }
*
* var div0 = createDiv('this is the parent');
* var div1 = createDiv('this is the child');
* div0.child(div1); // use p5.Element
*
* var div0 = createDiv('this is the parent');
* var div1 = createDiv('this is the child');
* div1.id('apples');
* div0.child('apples'); // use id
*
* var div0 = createDiv('this is the parent');
* var elt = document.getElementById('myChildDiv');
* div0.child(elt); // use element from page
*
* function setup() {
* var cnv = createCanvas(100, 100);
* // positions canvas 50px to right and 100px
* // below upper left corner of the window
* cnv.position(50, 100);
* }
*
* var myDiv = createDiv("I like pandas.");
* myDiv.style("color", "#ff0000");
* myDiv.style("font-size", "18px");
*
* var myDiv = createDiv("I like pandas.");
*myDiv.attribute("align", "center");
*
*/
p5.Element.prototype.attribute = function(attr, value) {
if (typeof value === 'undefined') {
return this.elt.getAttribute(attr);
} else {
this.elt.setAttribute(attr, value);
return this;
}
};
/**
* Either returns the value of the element if no arguments
* given, or sets the value of the element.
*
* @method value
* @param {String|Number} [value]
* @return {String|p5.Element} value of element, if no value is
* specified or p5.Element
*/
p5.Element.prototype.value = function() {
if (arguments.length > 0) {
this.elt.value = arguments[0];
return this;
} else {
if (this.elt.type === 'range') {
return parseFloat(this.elt.value);
}
else return this.elt.value;
}
};
/**
*
* Shows the current element. Essentially, setting display:block for the style.
*
* @method show
* @return {p5.Element}
*/
p5.Element.prototype.show = function() {
this.elt.style.display = 'block';
return this;
};
/**
* Hides the current element. Essentially, setting display:none for the style.
*
* @method hide
* @return {p5.Element}
*/
p5.Element.prototype.hide = function() {
this.elt.style.display = 'none';
return this;
};
/**
*
* Sets the width and height of the element. AUTO can be used to
* only adjust one dimension.
*
* @method size
* @param {Number} w width of the element
* @param {Number} h height of the element
* @return {p5.Element}
*/
p5.Element.prototype.size = function(w, h) {
var aW = w;
var aH = h;
var AUTO = p5.prototype.AUTO;
if (aW !== AUTO || aH !== AUTO) {
if (aW === AUTO) {
aW = h * this.elt.width / this.elt.height;
} else if (aH === AUTO) {
aH = w * this.elt.height / this.elt.width;
}
// set diff for cnv vs normal div
if (this.elt instanceof HTMLCanvasElement) {
var j = {};
var k = this.elt.getContext('2d');
for (var prop in k) {
j[prop] = k[prop];
}
this.elt.setAttribute('width', aW * this._pInst._pixelDensity);
this.elt.setAttribute('height', aH * this._pInst._pixelDensity);
this.elt.setAttribute('style', 'width:' + aW + 'px !important; height:' + aH + 'px !important;');
this._pInst.scale(this._pInst._pixelDensity, this._pInst._pixelDensity);
for (var prop in j) {
this.elt.getContext('2d')[prop] = j[prop];
}
} else {
this.elt.style.width = aW+'px';
this.elt.style.height = aH+'px';
this.elt.width = aW;
this.elt.height = aH;
}
this.width = this.elt.offsetWidth;
this.height = this.elt.offsetHeight;
if (this._pInst) { // main canvas associated with p5 instance
if (this._pInst._curElement.elt === this.elt) {
this._pInst._setProperty('width', this.elt.offsetWidth);
this._pInst._setProperty('height', this.elt.offsetHeight);
}
}
}
return this;
};
/**
* Removes the element and deregisters all listeners.
* @method remove
* @example
*
* var myDiv = createDiv('this is some text');
* myDiv.remove();
*