Update the pencil tool to work with latest browsers

client-data/board.html

@@ -41,9 +41,7 @@
 </div>
 
 
-<!--[if lt IE 10]>
-<script type="text/javascript" src="js/classList.js"></script>
-<![endif]-->
+<script type="text/javascript" src="js/path-data-polyfill.js"></script>
 <script type="text/javascript" src="js/minitpl.js"></script>
 <script type="text/javascript" src="js/board.js"></script>
 <script type="text/javascript" src="tools/pencil/pencil.js"></script>

client-data/js/classList.js

@@ -1,238 +0,0 @@
-/*
- * classList.js: Cross-browser full element.classList implementation.
- * 1.1.20150312
- *
- * By Eli Grey, http://eligrey.com
- * License: Dedicated to the public domain.
- *   See https://github.com/eligrey/classList.js/blob/master/LICENSE.md
- */
-
-/*global self, document, DOMException */
-
-/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
-
-if ("document" in self) {
-
-// Full polyfill for browsers with no classList support
-if (!("classList" in document.createElement("_"))) {
-
-(function (view) {
-
-"use strict";
-
-if (!('Element' in view)) return;
-
-var
-	  classListProp = "classList"
-	, protoProp = "prototype"
-	, elemCtrProto = view.Element[protoProp]
-	, objCtr = Object
-	, strTrim = String[protoProp].trim || function () {
-		return this.replace(/^\s+|\s+$/g, "");
-	}
-	, arrIndexOf = Array[protoProp].indexOf || function (item) {
-		var
-			  i = 0
-			, len = this.length
-		;
-		for (; i < len; i++) {
-			if (i in this && this[i] === item) {
-				return i;
-			}
-		}
-		return -1;
-	}
-	// Vendors: please allow content code to instantiate DOMExceptions
-	, DOMEx = function (type, message) {
-		this.name = type;
-		this.code = DOMException[type];
-		this.message = message;
-	}
-	, checkTokenAndGetIndex = function (classList, token) {
-		if (token === "") {
-			throw new DOMEx(
-				  "SYNTAX_ERR"
-				, "An invalid or illegal string was specified"
-			);
-		}
-		if (/\s/.test(token)) {
-			throw new DOMEx(
-				  "INVALID_CHARACTER_ERR"
-				, "String contains an invalid character"
-			);
-		}
-		return arrIndexOf.call(classList, token);
-	}
-	, ClassList = function (elem) {
-		var
-			  trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
-			, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
-			, i = 0
-			, len = classes.length
-		;
-		for (; i < len; i++) {
-			this.push(classes[i]);
-		}
-		this._updateClassName = function () {
-			elem.setAttribute("class", this.toString());
-		};
-	}
-	, classListProto = ClassList[protoProp] = []
-	, classListGetter = function () {
-		return new ClassList(this);
-	}
-;
-// Most DOMException implementations don't allow calling DOMException's toString()
-// on non-DOMExceptions. Error's toString() is sufficient here.
-DOMEx[protoProp] = Error[protoProp];
-classListProto.item = function (i) {
-	return this[i] || null;
-};
-classListProto.contains = function (token) {
-	token += "";
-	return checkTokenAndGetIndex(this, token) !== -1;
-};
-classListProto.add = function () {
-	var
-		  tokens = arguments
-		, i = 0
-		, l = tokens.length
-		, token
-		, updated = false
-	;
-	do {
-		token = tokens[i] + "";
-		if (checkTokenAndGetIndex(this, token) === -1) {
-			this.push(token);
-			updated = true;
-		}
-	}
-	while (++i < l);
-
-	if (updated) {
-		this._updateClassName();
-	}
-};
-classListProto.remove = function () {
-	var
-		  tokens = arguments
-		, i = 0
-		, l = tokens.length
-		, token
-		, updated = false
-		, index
-	;
-	do {
-		token = tokens[i] + "";
-		index = checkTokenAndGetIndex(this, token);
-		while (index !== -1) {
-			this.splice(index, 1);
-			updated = true;
-			index = checkTokenAndGetIndex(this, token);
-		}
-	}
-	while (++i < l);
-
-	if (updated) {
-		this._updateClassName();
-	}
-};
-classListProto.toggle = function (token, force) {
-	token += "";
-
-	var
-		  result = this.contains(token)
-		, method = result ?
-			force !== true && "remove"
-		:
-			force !== false && "add"
-	;
-
-	if (method) {
-		this[method](token);
-	}
-
-	if (force === true || force === false) {
-		return force;
-	} else {
-		return !result;
-	}
-};
-classListProto.toString = function () {
-	return this.join(" ");
-};
-
-if (objCtr.defineProperty) {
-	var classListPropDesc = {
-		  get: classListGetter
-		, enumerable: true
-		, configurable: true
-	};
-	try {
-		objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
-	} catch (ex) { // IE 8 doesn't support enumerable:true
-		if (ex.number === -0x7FF5EC54) {
-			classListPropDesc.enumerable = false;
-			objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
-		}
-	}
-} else if (objCtr[protoProp].__defineGetter__) {
-	elemCtrProto.__defineGetter__(classListProp, classListGetter);
-}
-
-}(self));
-
-} else {
-// There is full or partial native classList support, so just check if we need
-// to normalize the add/remove and toggle APIs.
-
-(function () {
-	"use strict";
-
-	var testElement = document.createElement("_");
-
-	testElement.classList.add("c1", "c2");
-
-	// Polyfill for IE 10/11 and Firefox <26, where classList.add and
-	// classList.remove exist but support only one argument at a time.
-	if (!testElement.classList.contains("c2")) {
-		var createMethod = function(method) {
-			var original = DOMTokenList.prototype[method];
-
-			DOMTokenList.prototype[method] = function(token) {
-				var i, len = arguments.length;
-
-				for (i = 0; i < len; i++) {
-					token = arguments[i];
-					original.call(this, token);
-				}
-			};
-		};
-		createMethod('add');
-		createMethod('remove');
-	}
-
-	testElement.classList.toggle("c3", false);
-
-	// Polyfill for IE 10 and Firefox <24, where classList.toggle does not
-	// support the second argument.
-	if (testElement.classList.contains("c3")) {
-		var _toggle = DOMTokenList.prototype.toggle;
-
-		DOMTokenList.prototype.toggle = function(token, force) {
-			if (1 in arguments && !this.contains(token) === !force) {
-				return force;
-			} else {
-				return _toggle.call(this, token);
-			}
-		};
-
-	}
-
-	testElement = null;
-}());
-
-}
-
-}
-

client-data/tools/pencil/pencil.js

@@ -104,46 +104,59 @@
 
 	var svg = Tools.svg;
 	function addPoint (line, x,y) {
-		var nbr = line.pathSegList.numberOfItems, //The number of points already in the line
-			pts = line.pathSegList, //The points that are already in the line as a SVGPathSegList
-			npoint;
+		var pts = line.getPathData(), //The points that are already in the line as a PathData
+			nbr = pts.length; //The number of points already in the line
 		switch (nbr) {
 			case 0: //The first point in the line
 				//If there is no point, we have to start the line with a moveTo statement
-				npoint = line.createSVGPathSegMovetoAbs(x,y);
+				npoint = {type:"M", values:[x,y]};
 				break;
 			case 1: //There is only one point.
 				//Draw a curve that is segment between the old point and the new one
-				npoint = line.createSVGPathSegCurvetoCubicAbs(
-							x,y, pts.getItem(0).x,pts.getItem(0).y, x,y);
+				npoint = {type:"C", values:[
+					pts[0].values[0], pts[0].values[1],
+					x,y,
+					x,y,
+				]};
 				break;
 			default: //There are at least two points in the line
 				//We add the new point, and smoothen the line
 				var ANGULARITY = 3; //The lower this number, the smoother the line
-				var prev = [pts.getItem(nbr-2), pts.getItem(nbr-1)]; //The last two points that are already in the line
+				var prev_values = pts[nbr-1].values; // Previous point
+				var ante_values = pts[nbr-2].values; // Point before the previous one
+				var prev_x = prev_values[prev_values.length - 2];
+				var prev_y = prev_values[prev_values.length - 1];
+				var ante_x = ante_values[ante_values.length - 2];
+				var ante_y = ante_values[ante_values.length - 1];
+
 
 				//We don't want to add the same point twice consecutively
-				if ((prev[1].x==x && prev[1].y==y)
-					|| (prev[0].x==x && prev[0].y==y) ) return;
+				if ((prev_x==x && prev_y==y)
+					|| (ante_x==x && ante_y==y) ) return;
 
-				var vectx = x-prev[0].x,
-					vecty = y-prev[0].y;
+				var vectx = x-ante_x,
+					vecty = y-ante_y;
 				var norm = Math.hypot(vectx,vecty);
-				var dist1 = dist(prev[0].x,prev[0].y,prev[1].x,prev[1].y)/norm,
-					dist2 = dist(x,y,prev[1].x,prev[1].y)/norm;
+				var dist1 = dist(ante_x,ante_y,prev_x,prev_y)/norm,
+					dist2 = dist(x,y,prev_x,prev_y)/norm;
 				vectx /= ANGULARITY;
 				vecty /= ANGULARITY;
 				//Create 2 control points around the last point
-				var cx1 = prev[1].x - dist1*vectx,
-					cy1 = prev[1].y - dist1*vecty, //First control point
-					cx2 = prev[1].x + dist2*vectx,
-					cy2 = prev[1].y + dist2*vecty; //Second control point
-				prev[1].x2 = cx1;
-				prev[1].y2 = cy1;
-
-				npoint = line.createSVGPathSegCurvetoCubicAbs(x,y,cx2,cy2,x,y);
+				var cx1 = prev_x - dist1*vectx,
+					cy1 = prev_y - dist1*vecty, //First control point
+					cx2 = prev_x + dist2*vectx,
+					cy2 = prev_y + dist2*vecty; //Second control point
+				prev_values[2] = cx1;
+				prev_values[3] = cy1;
+
+				npoint = {type:"C", values:[
+					cx2,cy2,
+					x,y,
+					x,y,
+				]};
 		}
-		line.pathSegList.appendItem(npoint);
+		pts.push(npoint);
+		line.setPathData(pts);
 	}
 
 	function createLine(lineData) {