Added masonry javascript to profile page to layout tiles.

Author: lmarini

app/views/home.scala.html

@@ -466,57 +466,9 @@ <h4><a href="@routes.Collections.collection(collectionInfo._1)">@collectionInfo.
         </div>
     </div>
 
-    <script src="@routes.Assets.at("javascripts/lib/masonry.pkgd.min.js")" type="text/javascript"></script>
-    <script src="@routes.Assets.at("javascripts/lib/imagesloaded.pkgd.min.js")" type="text/javascript"></script>
+    @* Use masonry javascript library to layout the tiles within each tab *@
+    @util.masonryTabbed()
 
-    <script>
-        var removeIndicator=true;
-        function activateOne(id) {
-            // initialize Masonry
-            var $container = $('#'+id).masonry();
-            // layout Masonry again after all images have loaded
-            imagesLoaded( '#masonry', function() {
-                $container.masonry({
-                itemSelector: '.post-box',
-                columnWidth: '.post-box',
-                transitionDuration: 4
-                });
-            });
-        }
-
-        function activate(){
-            activateOne("masonry-datasets");
-            activateOne("masonry-collections");
-            activateOne("masonry-spaces");
-        }
-
-        $(document).ready(function() {
-            activate();
-            $('.nav-tabs').stickyTabs();
-        });
-
-        // fire when showing from tab
-        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-            activate();
-        })
-
-        var eventCount = 3;
-        function moreEvents(){
-            var request = jsRoutes.controllers.Events.getEvents(eventCount).ajax({
-                type: 'GET'
-            });
-
-            request.done(function (response, textStatus, jqXHR) {
-                eventCount = eventCount + 1;
-                $("#moreevent").append(response);
-            });
-
-            request.fail(function (jqXHR, textStatus, errorThrown){
-                console.error("The following error occured: " + textStatus, errorThrown);
-                notify("Could not get moe events: " + errorThrown, "error");
-            });
-        }
-    </script>
     <script src="@routes.Assets.at("javascripts/follow-button.js")" type="text/javascript"></script>
     <script src="@routes.Assets.at("javascripts/select.js")" type="text/javascript"></script>
 

app/views/profile.scala.html

@@ -211,6 +211,11 @@ <h4 id="userkeys">User API Keys</h4>
         </div>
     </div>
 
+    @* Required by next script *@
+    <script src="@routes.Assets.at("javascripts/stickytabs/jquery.stickytabs.js")" type="text/javascript"></script>
+    @* Use masonry javascript library to layout the tiles within each tab *@
+    @util.masonryTabbed()
+
     <script language="javascript">
             var profileMail = "@profile.email.getOrElse("")";
             var firstName = $('#first-name-title').text();

app/views/util/masonryTabbed.scala.html

@@ -0,0 +1,51 @@
+<script src="@routes.Assets.at("javascripts/lib/masonry.pkgd.min.js")" type="text/javascript"></script>
+<script src="@routes.Assets.at("javascripts/lib/imagesloaded.pkgd.min.js")" type="text/javascript"></script>
+
+<script>
+        var removeIndicator=true;
+        function activateOne(id) {
+            // initialize Masonry
+            var $container = $('#'+id).masonry();
+            // layout Masonry again after all images have loaded
+            imagesLoaded( '#masonry', function() {
+                $container.masonry({
+                    itemSelector: '.post-box',
+                    columnWidth: '.post-box',
+                    transitionDuration: 4
+                });
+            });
+        }
+
+        function activate(){
+            activateOne("masonry-datasets");
+            activateOne("masonry-collections");
+            activateOne("masonry-spaces");
+        }
+
+        $(document).ready(function() {
+            activate();
+            $('.nav-tabs').stickyTabs();
+        });
+
+        // fire when showing from tab
+        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+            activate();
+        })
+
+        var eventCount = 3;
+        function moreEvents(){
+            var request = jsRoutes.controllers.Events.getEvents(eventCount).ajax({
+                type: 'GET'
+            });
+
+            request.done(function (response, textStatus, jqXHR) {
+                eventCount = eventCount + 1;
+                $("#moreevent").append(response);
+            });
+
+            request.fail(function (jqXHR, textStatus, errorThrown){
+                console.error("The following error occured: " + textStatus, errorThrown);
+                notify("Could not get moe events: " + errorThrown, "error");
+            });
+        }
+</script>

app/views/util/multimasonry.scala.html

@@ -1,3 +1,4 @@
+@* TODO: Delete? I don't think this is being used anywhere in the code right now *@
 <script src="@routes.Assets.at("javascripts/lib/masonry.pkgd.min.js")" type="text/javascript"></script>
 <script src="@routes.Assets.at("javascripts/lib/imagesloaded.pkgd.min.js")" type="text/javascript"></script>