Revert "Merge pull request #100 from Tamfoolery/implement-packery"

This reverts commit aecb99e, reversing
changes made to 1955cf8.

bower.json

@@ -8,8 +8,7 @@
   ],
   "description": "Live, controllable graphics system rendered in a browser",
   "dependencies": {
-    "draggabilly": "~1.1.2",
-    "packery": "~1.3.2",
+    "masonry": "~3.1.5",
     "imagesloaded": "~3.1.5",
     "bootstrap": "~3.2.0",
     "bsw-yeti": "~3.2.0",

lib/dashboard/public/dashboard.jade

@@ -1,7 +1,6 @@
 mixin panels(bundle)
     each panel in bundle.dashboard.panels
-        div(class='#{ bundle.name } #{ panel.name } panel panel-default panel-span-#{ panel.width }',
-        data-panel=panel.name)
+        div(class='#{ bundle.name } #{ panel.name } panel panel-default panel-span-#{ panel.width }')
             .panel-heading
                 h3.panel-title=panel.title
                 i(class="fa panel-icon #{ panel.faIcon }")
@@ -89,8 +88,7 @@ html(lang="en")
         script(src='/components/bootstrap/dist/js/bootstrap.min.js')
         script(src='/components/bootstrap/js/tooltip.js')
         script(src='/components/bootstrap/js/popover.js')
-        script(src='/components/draggabilly/dist/draggabilly.pkgd.min.js')
-        script(src='/components/packery/dist/packery.pkgd.min.js')
+        script(src='/components/masonry/dist/masonry.pkgd.min.js')
         script(src='/components/imagesloaded/imagesloaded.pkgd.min.js')
         script(src='/components/moment/min/moment.min.js')
         script(src='/components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js')
@@ -113,7 +111,6 @@ html(lang="en")
             window.socket = io.connect('//#{ ncgConfig.host }:#{ ncgConfig.port }/');
         script(src='/nodecg-api.js')
 
-        script(src='/dashboard/panels.dashboard.js')
         script(src='/dashboard/dashboard.js')
 
         //- Bundle javascript

lib/dashboard/public/dashboard.js

@@ -140,13 +140,13 @@ window.onload = function () {
     }
 
     $panelsContainer.imagesLoaded(function () {
-        //Init Packery
-        initPackery($panelsContainer);
+        //Apply initial masonry
+        applyMasonry($panelsContainer);
 
         try {
             //Create a MutationObserver which will watch for changes to the DOM and re-apply masonry
             observer = new MutationObserver(function () {
-                applyPackery();
+                applyMasonry($panelsContainer);
             });
 
             // define what element should be observed by the observer
@@ -167,13 +167,21 @@ window.onload = function () {
 
     // re-apply masonry onClick, useful for checkboxes that toggle controls
     $panelsContainer.click(function () {
-        applyPackery();
+        applyMasonry($panelsContainer);
     });
 
-	// Initialize all panel info popovers
-	$panels.find('.panel-info').popover();
+    // TODO: have masonry re-apply when a textarea is resized
+    function applyMasonry(selector) {
+        selector.masonry({
+            columnWidth: 128 + 16, //.panel-span-1 width = 128, +16 for 8px pad on each side
+            itemSelector: '.dashboard-panels > .panel'
+        });
+    }
+
+    // Initialize all panel info popovers
+    $panels.find('.panel-info').popover();
 
-	// Helper for .btn-file inputs, makes them fire the expected event and display expected filename
+    // Helper for .btn-file inputs, makes them fire the expected event and display expected filename
     $('.btn-file :file').on('change', function() {
         var input = $(this),
             numFiles = input.get(0).files ? input.get(0).files.length : 1,

lib/dashboard/public/dashboard.less

@@ -35,10 +35,6 @@ textarea {
   padding: 0 16px 32px 16px;
 }
 
-.panel {
-	margin-bottom: 0;
-}
-
 .panel-title {
   display: inline-block;
 }