experimenting with click/drag in the hero demos

Author: desandro

css/hero.css

@@ -120,6 +120,10 @@
   margin-bottom: 0.5em;
 }
 
+#hero-demos .item.expanded {
+  width: 100% !important;
+}
+
 /* ---- basically ---- */
 
 #hero-demos .basically .item1 { width: 30%; }

js/pages/index.js

@@ -92,14 +92,33 @@ PS.index = function() {
       gutter: 4
     });
     var itemElems = pckry.getItemElements();
+
+    var onDragEnd = function( event, pointer, dragger ) {
+
+      var p1 = dragger.position;
+      var p2 = dragger.startPosition;
+      if ( p1.x === p2.x && p1.y === p2.y ) {
+        // dragger didn't move
+        var isExpanded = classie.has( dragger.element, 'expanded' );
+        classie.toggle( dragger.element, 'expanded' );
+        if ( !isExpanded ) {
+          console.log('fitting');
+          pckry.fit( dragger.element );
+        } else {
+          pckry.layout();
+        }
+      }
+    };
+
     for ( var j=0, len = itemElems.length; j < len; j++ ) {
       var itemElem = itemElems[j];
       var draggie = new Draggabilly( itemElem );
       pckry.bindDraggabillyEvents( draggie );
+      draggie.on( 'dragEnd', onDragEnd );
     }
   })();
 
-  // ----- ridiculous ----- //
+  // ----- meticulous ----- //
 
   ( function() {
     var container = document.querySelector('.meticulous .packery');
@@ -109,10 +128,27 @@ PS.index = function() {
       rowHeight: 44
     });
     var itemElems = pckry.getItemElements();
+    var onDragEnd = function( event, pointer, dragger ) {
+
+      var p1 = dragger.position;
+      var p2 = dragger.startPosition;
+      if ( p1.x === p2.x && p1.y === p2.y ) {
+        // dragger didn't move
+        var isExpanded = classie.has( dragger.element, 'expanded' );
+        classie.toggle( dragger.element, 'expanded' );
+        if ( !isExpanded ) {
+          console.log('fitting');
+          pckry.fit( dragger.element );
+        } else {
+          pckry.layout();
+        }
+      }
+    };
     for ( var j=0, len = itemElems.length; j < len; j++ ) {
       var itemElem = itemElems[j];
       var draggie = new Draggabilly( itemElem );
       pckry.bindDraggabillyEvents( draggie );
+      draggie.on( 'dragEnd', onDragEnd );
     }
   })();