[Pkg-javascript-commits] [leaflet-markercluster] 83/479: Tidy ups, comments. Probably works with canvas now (not tested)

[Jonas Smedegaard]

This is an automated email from the git hooks/post-receive script.

js pushed a commit to branch master
in repository leaflet-markercluster.

commit 94176bcf665915bae76150a5176c61efcff312f3
Author: danzel <danzel at localhost.geek.nz>
Date:   Tue Jul 24 11:37:28 2012 +1200

    Tidy ups, comments. Probably works with canvas now (not tested)
---
 src/MarkerCluster.Spiderfier.js | 37 +++++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/MarkerCluster.Spiderfier.js b/src/MarkerCluster.Spiderfier.js
index 3adf082..2816d43 100644
--- a/src/MarkerCluster.Spiderfier.js
+++ b/src/MarkerCluster.Spiderfier.js
@@ -138,6 +138,11 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
 
 		setTimeout(function () {
 			group._animationStart();
+
+			var initialLegOpacity = L.Browser.svg ? 0 : 0.3,
+				xmlns = L.Path.SVG_NS;
+
+
 			for (i = childMarkers.length - 1; i >= 0; i--) {
 				m = childMarkers[i];
 
@@ -145,21 +150,23 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
 				m.setOpacity(1);
 				//Add Legs. TODO: Fade this in!
 
-				leg = new L.Polyline([me._latlng, m._latlng], { weight: 1.5, color: '#222', opacity: 0 });
+				leg = new L.Polyline([me._latlng, m._latlng], { weight: 1.5, color: '#222', opacity: initialLegOpacity });
 				map.addLayer(leg);
 				m._spiderLeg = leg;
 
-				//Chrome bug that prevents this working:
-				//  http://stackoverflow.com/questions/8455200/svg-animate-with-dynamically-added-elements
+				//Following animations don't work for canvas
+				if (!L.Browser.svg) {
+					continue;
+				}
 
+				//How this works:
 				//http://stackoverflow.com/questions/5924238/how-do-you-animate-an-svg-path-in-ios
 				//http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
 
+				//Animate length
 				var length = leg._path.getTotalLength();
 				leg._path.setAttribute("stroke-dasharray", length + "," + length);
 
-				var xmlns = "http://www.w3.org/2000/svg";
-
 				var anim = document.createElementNS(xmlns, "animate");
 				anim.setAttribute("attributeName", "stroke-dashoffset");
 				anim.setAttribute("begin", "indefinite");
@@ -169,6 +176,7 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
 				leg._path.appendChild(anim);
 				anim.beginElement();
 
+				//Animate opacity
 				anim = document.createElementNS(xmlns, "animate");
 				anim.setAttribute("attributeName", "stroke-opacity");
 				anim.setAttribute("attributeName", "stroke-opacity");
@@ -178,7 +186,6 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
 				anim.setAttribute("dur", 0.25);
 				leg._path.appendChild(anim);
 				anim.beginElement();
-
 			}
 			me.setOpacity(0.3);
 
@@ -186,14 +193,16 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
 			// The animations above override this until they complete.
 			// Doing this at 250ms causes some minor flickering on FF, so just do it immediately
 			// If the initial opacity of the spiderlegs isn't 0 then they appear before the animation starts.
-			setTimeout(function () {
-				for (i = childMarkers.length - 1; i >= 0; i--) {
-					m = childMarkers[i]._spiderLeg;
-
-					m.options.opacity = 0.5;
-					m._path.setAttribute('stroke-opacity', 0.5);
-				}
-			}, 0);
+			if (L.Browser.svg) {
+				setTimeout(function() {
+					for (i = childMarkers.length - 1; i >= 0; i--) {
+						m = childMarkers[i]._spiderLeg;
+
+						m.options.opacity = 0.5;
+						m._path.setAttribute('stroke-opacity', 0.5);
+					}
+				}, 0);
+			}
 
 			setTimeout(function () {
 

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/leaflet-markercluster.git