Implement support for properly validating 'data-paper-NAME' attribute names, along with the current 'NAME'.

src/browser/DomEvent.js

@@ -122,24 +122,25 @@ DomEvent.requestAnimationFrame = new function() {
 			return request(callback, element);
 		// If not, do the callback handling ourself:
 		callbacks.push([callback, element]);
-		if (!timer) {
-			// Installs interval timer that checks all callbacks. This results
-			// in faster animations than repeatedly installing timout timers.
-			timer = window.setInterval(function() {
-				// Checks all installed callbacks for element visibility and
-				// execute if needed.
-				for (var i = callbacks.length - 1; i >= 0; i--) {
-					var entry = callbacks[i],
-						func = entry[0],
-						element = entry[1];
-					if (!element || (element.getAttribute('keepalive') == 'true'
-							|| focused) && DomElement.isVisible(element)) {
-						// Handle callback and remove it from callbacks list.
-						callbacks.splice(i, 1);
-						func(Date.now());
-					}
+		// We're done if there's already a timer installed
+		if (timer)
+			return;
+		// Installs interval timer that checks all callbacks. This results
+		// in faster animations than repeatedly installing timout timers.
+		timer = window.setInterval(function() {
+			// Checks all installed callbacks for element visibility and
+			// execute if needed.
+			for (var i = callbacks.length - 1; i >= 0; i--) {
+				var entry = callbacks[i],
+					func = entry[0],
+					el = entry[1];
+				if (!el || (PaperScript.getAttribute(el, 'keepalive') == 'true'
+						|| focused) && DomElement.isVisible(el)) {
+					// Handle callback and remove it from callbacks list.
+					callbacks.splice(i, 1);
+					func(Date.now());
 				}
-			}, 1000 / 60);
-		}
+			}
+		}, 1000 / 60);
 	};
 };

src/core/PaperScript.js

@@ -134,7 +134,7 @@ var PaperScript = this.PaperScript = new function() {
 		if (typeof code !== 'string') {
 			// If a canvas id is provided, create a project for it now,
 			// so the active project is defined.
-			var canvas = code.getAttribute('canvas');
+			var canvas = PaperScript.getAttribute(code, 'canvas');
 			if (canvas = canvas && document.getElementById(canvas)) {
 				// Create an empty Project for this scope, and a view for the
 				// canvas, both using the right paper scope
@@ -230,7 +230,7 @@ var PaperScript = this.PaperScript = new function() {
 			// Only load this script if it not loaded already.
 			// TODO: support 'text/x-paperscript':
 			if (script.type === 'text/paperscript'
-					&& !script.getAttribute('loaded')) {
+					&& !script.getAttribute('data-paper-loaded')) {
 				// Produce a new PaperScope for this script now. Scopes are
 				// cheap so let's not worry about the initial one that was
 				// already created.
@@ -244,17 +244,28 @@ var PaperScript = this.PaperScript = new function() {
 				script.setAttribute('id', scope.id);
 				evaluate(script, scope);
 				// Mark script as loaded now.
-				script.setAttribute('loaded', true);
+				script.setAttribute('data-paper-loaded', true);
 			}
 		}
 	}
 
 	DomEvent.add(window, { load: load });
 
+	// Produces helpers to e.g. check for both 'canvas' and 'data-paper-canvas'
+	// attributes:
+	function handleAttribute(name) {
+		name += 'Attribute';
+		return function(el, attr) {
+			return el[name](attr) || el[name]('data-paper-' + attr);
+		}
+	}
+
 	return {
 		compile: compile,
 		evaluate: evaluate,
-		load: load
+		load: load,
+		getAttribute: handleAttribute('get'),
+		hasAttribute: handleAttribute('has')
 	};
 
 //#else // !BROWSER

src/ui/View.js

@@ -39,7 +39,7 @@ var View = this.View = Base.extend(/** @lends View# */{
 			this._canvas = canvas;
 			// If the canvas has the resize attribute, resize the it to fill the
 			// window and resize it again whenever the user resizes the window.
-			if (canvas.attributes.resize) {
+			if (PaperScript.hasAttribute(canvas, 'resize')) {
 				// Subtract canvas' viewport offset from the total size, to
 				// stretch it in
 				var offset = DomElement.getOffset(canvas, false, true),
@@ -66,7 +66,7 @@ var View = this.View = Base.extend(/** @lends View# */{
 					: DomElement.getSize(canvas);
 			}
 			// TODO: Test this on IE:
-			if (canvas.attributes.stats) {
+			if (PaperScript.hasAttribute(canvas, 'stats')) {
 				this._stats = new Stats();
 				// Align top-left to the canvas
 				var element = this._stats.domElement,