config redirect

2026-01-30 15:31:52 +00:00 · 2023-01-29 22:30:24 +00:00
parent 17557c7d73
commit 5fb4bd8083
9905 changed files with 1258996 additions and 36355 deletions
@@ -0,0 +1,120 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>fit</title>
+
+  <link rel="stylesheet" href="css/examples.css" />
+  <style>
+  #expanding-demo {
+    width: 40%;
+  }
+
+  #expanding-demo .item {
+    height: 40px;
+    width: 25%;
+  }
+
+  #expanding-demo .item.is-expanded {
+    height: 60px;
+    width: 50%;
+    background: #1D6;
+  }
+
+  #position-demo {
+    width: 30%;
+  }
+
+  #position-demo .item {
+    width: 60px;
+    height: 60px;
+  }
+  </style>
+
+</head>
+<body>
+
+  <h1>fit</h1>
+
+<div id="expanding-demo" class="container">
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<div id="position-demo" class="container">
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+<script src="../js/rect.js"></script>
+<script src="../js/packer.js"></script>
+<script src="../js/item.js"></script>
+<script src="../js/packery.js"></script>
+
+<script>
+
+  ( function() {
+    var container = document.querySelector('#expanding-demo');
+    var pckry = new Packery( container );
+
+    container.addEventListener( 'click', function( event ) {
+      // don't proceed if item was not clicked on
+      var target = event.target;
+      if ( !matchesSelector( target, '.item' ) ) {
+        return;
+      }
+
+      var isExpanded = target.classList.contains('is-expanded');
+      target.classList.toggle('is-expanded');
+
+      if ( isExpanded ) {
+        // if shrinking, just layout
+        pckry.shiftLayout();
+      } else {
+        // if expanding, fit it
+        pckry.fit( target );
+      }
+    });
+  })();
+
+
+  ( function() {
+    var container = document.querySelector('#position-demo');
+    var pckry = new Packery( container );
+
+    container.addEventListener( 'click', function( event ) {
+      // don't proceed if item was not clicked on
+      var target = event.target;
+      if ( !matchesSelector( target, '.item' ) ) {
+        return;
+      }
+      // position item at 40, 40
+      pckry.fit( target, 40, 40 );
+    });
+  })();
+
+</script>
+
+</body>
+</html>