add appendHoles method

ilovezy · Jan 20, 2014 · 1ac8372 · 1ac8372
1 parent 9b0b409
commit 1ac8372
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 25 deletions.
diff --git a/404.html b/404.html
@@ -69,8 +69,13 @@ <h3>Sorry the page you requested may have been moved or deleted.</h3>
 							opacity: 0
 						});
 					}
+				},
+				onComplete: function(item, setting) {
+					console.log(wall);
+					console.log(setting);
 				}
 			});
+
 			wall.setHoles([
 				// 4
 				{
@@ -90,8 +95,11 @@ <h3>Sorry the page you requested may have been moved or deleted.</h3>
 					left: 10,
 					width: 2,
 					height: 6
-				},
-				// 0
+				}
+			]);
+
+			// 0
+			wall.appendHoles([
 				{
 					top: 6,
 					left: 16,
@@ -115,8 +123,11 @@ <h3>Sorry the page you requested may have been moved or deleted.</h3>
 					left: 16,
 					width: 8,
 					height: 2
-				},
-				// 4
+				}
+			]);
+
+			// 4
+			wall.appendHoles([
 				{
 					top: 6,
 					left: 26,
@@ -136,6 +147,7 @@ <h3>Sorry the page you requested may have been moved or deleted.</h3>
 					height: 6
 				}
 			]);
+
 			wall.fitWidth();
 			wall.refresh();
 		</script>

diff --git a/freewall.js b/freewall.js
@@ -824,6 +824,37 @@
                     klass.fireEvent('onBlockShow', item, setting);
                 });
             },
+            /*
+            add one or more blank area (hole) on layout;
+            example:
+                
+                wall.appendHoles({
+                    top: 10,
+                    left: 36,
+                    width: 2,
+                    height: 6
+                });
+
+                wall.appendHoles([
+                    {
+                        top: 16,
+                        left: 16,
+                        width: 8,
+                        height: 2
+                    },
+                    {
+                        top: 10,
+                        left: 36,
+                        width: 2,
+                        height: 6
+                    }
+                ]);
+
+            */
+            appendHoles: function(holes) {
+                runtime.holes = runtime.holes.concat(holes);
+                return this;
+            },
 
             container: container,
 
@@ -1063,22 +1094,21 @@
                 $.extend(setting, option);
                 return this;
             },
-
+            
             /*
-            create blank are on layout;
+            create one or more blank area (hole) on layout;
             example:
                 
-                wall.setHoles([
-                    {
-                        top: 2,
-                        left: 2,
-                        width: 2,
-                        height: 2
-                    }
-                ]);
+                wall.setHoles({
+                    top: 2,
+                    left: 2,
+                    width: 2,
+                    height: 2
+                });
             */
+
             setHoles: function(holes) {
-                runtime.holes = holes;
+                runtime.holes = [].concat(holes);
                 return this;
             },
 
@@ -1087,7 +1117,6 @@
                 this.refresh();
                 return this;
             }
-
         });
 
         container.attr('data-min-width', Math.floor($W.width() / 80) * 80);

diff --git a/index.html b/index.html
@@ -398,6 +398,7 @@ <h2>Methods</h2>
 						<ul>
 							<li> addCustomEvent </li>
 							<li> appendBlock </li>
+							<li> appendHoles </li>
 							<li> fillHoles </li>
 							<li> filter </li>
 							<li> fireEvent </li>
@@ -427,6 +428,10 @@ <h3> addCustomEvent(name, handler) </h3>
 								<h3> appendBlock(items) </h3>
 								<div> Append one or more items into layout</div>
 							</li>
+							<li>
+								<h3> appendHoles(holes) </h3>
+								<div> Add one or more blank area into layout</div>
+							</li>
 							<li>
 								<h3> fillHoles() </h3>
 								<div> Let layout without gaps</div>
@@ -491,15 +496,12 @@ <h5> Example </h5>
 var demo = $(".example");
 ewall.reset({
   selector: '.cell',
-  animate: false,
-  block: {
-    flex: 1
-  },
-  cell: {
-    width: 150,
-    height: 150
-  },
-  fillGap: true
+  animate: true,
+  delay: 20,
+  cellW: 15.5,
+  cellH: 15,
+  gutterX: 2,
+  gutterY: 2
 });
 ewall.fitWidth(cwidth);
 									</code>