packery
Version:
Gapless, draggable grid layouts
322 lines (271 loc) • 9.03 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Packery tests</title>
<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" />
<link rel="stylesheet" href="test.css" />
<script src="../bower_components/qunit/qunit/qunit.js"></script>
</head>
<body>
<h1>Packery tests</h1>
<div id="qunit"></div>
<div id="empty" class="container"></div>
<div id="default">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>
<div id="filtered" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="foobar"></div>
</div>
<div id="found" class="container">
<div><div class="item w2"></div></div>
<div><div class="item h2"></div></div>
<div><div class="item w2"></div></div>
<div><div class="item"></div></div>
</div>
<div id="filter-found" class="container">
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="foobar"></div>
<div><div class="item w2"></div></div>
<div><div class="item"></div></div>
</div>
<div id="layout" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>Layout extra big</h2>
<div id="layout-extra-big" class="container">
<div class="item w5"></div>
<div class="item w2"></div>
<div class="item w5"></div>
<div class="item w2"></div>
<div class="item w2"></div>
</div>
<h2>Consecutive</h2>
<div id="consecutive" class="container">
<div class="item i0"></div>
<div class="item i1"></div>
<div class="item i2"></div>
<div class="item i3"></div>
</div>
<div id="gridded1" class="container gridded">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
</div>
<div id="gridded2" class="container gridded">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
</div>
<div id="container-size" class="container">
<div class="item"></div>
<div class="item h2"></div>
</div>
<div id="add-remove" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item"></div>
</div>
<div id="stamped1" class="container has-stamps place-stamps">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp1"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
</div>
<div id="stamped2" class="container has-stamps">
<div class="item stamp stamp1"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item stamp stamp2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="stamped3" class="container has-stamps place-stamps">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp1"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
</div>
<div id="stamped4" class="container has-stamps place-stamps">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp1"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
</div>
<h2>Placed borders</h2>
<div id="stamped-borders" class="container has-stamps">
<div class="stamp stamp1"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>Adding</h2>
<div id="adding" class="container">
<div class="item"></div>
<div class="item"></div>
</div>
<h2>Prepend</h2>
<div id="prepend" class="container">
<div class="item"></div>
<div class="item"></div>
</div>
<h2>Draggable</h2>
<div id="draggable" class="container">
<div class="item i0"></div>
<div class="item i1"></div>
<div class="item i2"></div>
<div class="item i3 dragger"></div>
<div class="item i4"></div>
<div class="item i5"></div>
<div class="item i6"></div>
<div class="item i7"></div>
</div>
<h2>Fitting</h2>
<div id="fitting" class="container">
<div class="item i0"></div>
<div class="item i1"></div>
<div class="item i2"></div>
<div class="item i3"></div>
<div class="item i4"></div>
<div class="item i5"></div>
<div class="item i6"></div>
<div class="item i7"></div>
</div>
<h2>Declarative</h2>
<div id="declarative" class="container js-packery">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- wrong quote marks for JSON -->
<div id="declarative-bad-json" class="container js-packery" data-packery-options="{ 'columnWidth': 30 }">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="declarative-good-json" class="container js-packery" data-packery-options='{ "columnWidth": 25, "rowHeight": 30, "transitionDuration": "1.2s", "isResizable": false }'>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>jQuery</h2>
<div id="jquery" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>
<h2>isInitLayout option</h2>
<div id="is-init-layout" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>
<!-- <h2>isLayoutInstant option</h2>
<div id="is-layout-instant" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
</div> -->
<div id="hidden-items" class="container">
<div class="item w2 h2 hidden"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>Sub-pixel fit</h2>
<div id="sub-pixel-fit" class="container">
<div class="grid-sizer"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item w2"></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/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/jquery-bridget/jquery-bridget.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 src="helpers.js"></script>
<script src="unit/test-rect.js"></script>
<script src="unit/test-packer.js"></script>
<script src="unit/basics.js"></script>
<script src="unit/defaults-empty.js"></script>
<script src="unit/get-items.js"></script>
<script src="unit/layout.js"></script>
<script src="unit/layout-extra-big.js"></script>
<script src="unit/consecutive.js"></script>
<script src="unit/grid.js"></script>
<script src="unit/container-size.js"></script>
<script src="unit/remove.js"></script>
<script src="unit/stamped.js"></script>
<script src="unit/add-items.js"></script>
<script src="unit/prepend.js"></script>
<script src="unit/draggable.js"></script>
<script src="unit/fit.js"></script>
<script src="unit/jquery-plugin.js"></script>
<script src="unit/declarative.js"></script>
<script src="unit/is-init-layout.js"></script>
<script src="unit/hidden-items.js"></script>
<script src="unit/sub-pixel-fit.js"></script>
</body>
</html>