Make Grid Layout as Default

- Make Grid Layout as Default - Increased buffering timeout when apply grid layout(to layout properly)
OmarElgabry · Nov 24, 2015 · 352b093 · 352b093
1 parent 55053fe
commit 352b093
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -47,8 +47,8 @@ Add CSS Files:
  <link rel="stylesheet" href="css/animations.min.css" type="text/css" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
- <!-- Main CSS File(Animation Layout) - Default -->
- <link id="style" rel="stylesheet" href="css/main.animation.css" type="text/css" />
+ <!-- Main CSS File(Grid Layout) - Default -->
+ <link id="style" rel="stylesheet" href="css/main.grid.css" type="text/css" />
 ```
 
 Add JS Files:

diff --git a/index.html b/index.html
@@ -10,8 +10,8 @@
     <link rel="stylesheet" href="css/animations.min.css" type="text/css" />
     <!-- Font Awesome -->
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-    <!-- Main CSS File(Animation Layout) - Default -->
-    <link id="style" rel="stylesheet" href="css/main.animation.css" type="text/css" />
+    <!-- Main CSS File(Grid Layout) - Default -->
+    <link id="style" rel="stylesheet" href="css/main.grid.css" type="text/css" />
     <!-- GitHub Badge -->
     <style>#forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#c11;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:fixed;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;z-index:9999;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}</style>
 </head>
@@ -41,8 +41,8 @@ <h3>#Hashtegny</h3>
             <button type="button" class="search"><i class="fa fa-search"></i> Search</button>
             <hr>
 
-            <button type="button" class="animation-button"><i class="fa fa-star"></i> Animation</button>
             <button type="button" class="grid-button"><i class="fa fa-th"></i> Grid Layout</button>
+            <button type="button" class="animation-button"><i class="fa fa-star"></i> Animation</button>
         </div>
         <hr>
 

diff --git a/js/hashtegny.js b/js/hashtegny.js
@@ -355,8 +355,11 @@
                 if(plugin.curLayout === "grid"){
 
                     // if current layout is grid, then destroy, then fadeIn new appended posts (if any), and apply grid layout
+                    // in case of first time, just add class 'grid' instead of destroying previous grid layout
                     // this code instead of using: http://masonry.desandro.com/methods.html#prepended
-                    $(targetEle).masonry('destroy');
+                    if(!$(targetEle).hasClass('grid')){
+                            $(targetEle).addClass('grid');
+                    }else   $(targetEle).masonry('destroy');
                     $(targetEle).children('.mainPost').fadeIn();
                     $(targetEle).masonry(_options);
 
@@ -372,7 +375,7 @@
                     // So, empty the targetEle, then setTimeout, then add html again, and apply grid
                     var _html = $(targetEle).html();
                     $(targetEle).html("");
-                    setTimeout(function(){$(targetEle).html(_html).masonry(_options)}, 100);
+                    setTimeout(function(){$(targetEle).html(_html).masonry(_options)}, 1000);
                 }
             },
 
@@ -581,8 +584,8 @@
             // whether the plugin is progress(i.e. waiting for all ajax calls to be loaded)
             inProgress: false,
 
-            // track current layout, default is animation
-            curLayout: "animation",
+            // track current layout, default is grid
+            curLayout: "grid",
 
             // initialization for the plugin
             init: function(){