fix issue several instances kombai#53

ilovezy · Feb 26, 2014 · 8ee56c4 · 8ee56c4
1 parent c9031d5
commit 8ee56c4
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 1 deletion.
diff --git a/example/several-instances.html b/example/several-instances.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Nested grid</title>
+		<meta content="text/html; charset=utf-8" http-equiv="content-type">
+		<meta name="description" content="Nested grid" />
+		<meta name="keywords" content="javascript, dynamic, grid, layout, jquery plugin, nested grid, metro style"/>
+		<link rel="icon" href="favicon.ico" type="image/x-icon" />
+		<link rel="stylesheet" type="text/css" href="css/style.css" />
+		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
+		<script type="text/javascript" src="../freewall.js"></script>
+		<style type="text/css">
+			.layout {
+				margin: 2em 15px;
+				color: #333;
+			}
+			.size320 {
+				width: 320px;
+				height: 320px;
+			}
+			.size44 {
+				width: 100%;
+				height: 100%;
+			}
+			.size22 {
+				width: 50%;
+				height: 50%;
+			}
+			.size14 {
+				width: 25%;
+				height: 100%;
+			}
+			.size41 {
+				width: 100%;
+				height: 25%;
+			}
+			.size24 {
+				width: 50%;
+				height: 100%;
+			}
+			.size42 {
+				width: 100%;
+				height: 50%;
+			}
+		</style>
+	</head>
+	<body>
+		<div class='header'>
+			<div class="clearfix">
+				<div class="float-left">
+						<h1><a href="http://vnjs.net/www/project/freewall/">Free Wall</a></h1>
+						<div class='target'>Creating dynamic grid layouts.</div>
+				</div>
+			</div>
+		</div>
+		<div class="layout">
+			<h2>Grid 1</h2>
+			<div class="free-wall">
+				<div class="brick size320"></div>
+				<div class="brick size320"></div>
+				<div class="brick size320"></div>
+				<div class="brick size320"></div>
+				<div class="brick size320"></div>
+				<div class="brick size320"></div>
+			</div>
+		</div>
+		<div class="layout">
+			<h2>Grid 2</h2>
+			<div class="free-wall">
+				<div class="brick size320"></div>
+				<div class="brick size320"></div>
+				<div class="brick size320"></div>
+				<div class="brick size320"></div>
+				<div class="brick size320"></div>
+				<div class="brick size320"></div>
+			</div>
+		</div>
+		<script type="text/javascript">
+
+			var colour = [
+				"rgb(142, 68, 173)",
+				"rgb(243, 156, 18)",
+				"rgb(211, 84, 0)",
+				"rgb(0, 106, 63)",
+				"rgb(41, 128, 185)",
+				"rgb(192, 57, 43)",
+				"rgb(135, 0, 0)",
+				"rgb(39, 174, 96)"
+			];
+
+			$(".free-wall .size320").each(function() {
+				var backgroundColor = colour[colour.length * Math.random() << 0];
+				var bricks = $(this).find(".brick");
+				!bricks.length && (bricks = $(this));
+				bricks.css({
+					backgroundColor: backgroundColor
+				});
+			});
+
+			$(function() {
+				$(".free-wall").each(function() {
+					var wall = new freewall(this);
+					wall.reset({
+						selector: '.size320',
+						cellW: 320,
+						cellH: 320,
+						fixSize: 0,
+						gutterY: 20,
+						gutterX: 20,
+						onResize: function() {
+							wall.fitWidth();
+						}
+					});
+					wall.fitWidth();
+				});
+				$(window).trigger("resize");
+			});
+
+		</script>
+
+	</body>
+</html>
diff --git a/freewall.js b/freewall.js
@@ -49,7 +49,7 @@
             var gutterX = runtime.gutterX;
             var gutterY = runtime.gutterY;
             var fixSize = parseInt($item.attr('data-fixSize'));
-            var blockId = runtime.lastId++ + '-' + this.totalGrid;
+            var blockId = runtime.lastId++ + '-' + runtime.totalGrid;
 
             //ignore dragging block;
             if ($item.hasClass('fw-float')) return;
@@ -739,6 +739,7 @@
             currentArguments: []
         };
         setting.runtime = runtime;
+        runtime.totalGrid = layoutManager.totalGrid;
 
         // check browser support transition;
         var bodyStyle = document.body.style;