mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 15:31:52 +00:00
config redirect
This commit is contained in:
Nuno Coração
+102
@@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>add/remove</title>
|
||||
|
||||
<link rel="stylesheet" href="css/examples.css" />
|
||||
<link rel="stylesheet" href="css/basics.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>add/remove</h1>
|
||||
|
||||
<p>
|
||||
<button id="append">Append items</button>
|
||||
<button id="prepend">Prepend items</button>
|
||||
</p>
|
||||
|
||||
<div class="container">
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w4"></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 src="examples.js"></script>
|
||||
<script>
|
||||
|
||||
function getItemFragment() {
|
||||
var fragment = document.createDocumentFragment();
|
||||
var items = [];
|
||||
|
||||
for ( var i=0; i < 3; i++ ) {
|
||||
var item = document.createElement('div');
|
||||
var wRand = Math.random();
|
||||
var widthClass = wRand > 0.85 ? 'w4' :
|
||||
wRand > 0.7 ? 'w2' : '';
|
||||
var hRand = Math.random();
|
||||
var heightClass = hRand > 0.85 ? 'h4' :
|
||||
hRand > 0.7 ? 'h2' : '';
|
||||
item.className = 'item ' + widthClass + ' ' + heightClass;
|
||||
fragment.appendChild( item );
|
||||
items.push( item )
|
||||
}
|
||||
|
||||
return {
|
||||
items: items,
|
||||
fragment: fragment
|
||||
};
|
||||
}
|
||||
|
||||
var container = document.querySelector('.container');
|
||||
var pckry = window.packery7 = new Packery( container );
|
||||
|
||||
var appendButton = document.querySelector('#append');
|
||||
|
||||
appendButton.addEventListener( 'click', function( event ) {
|
||||
var itemFrag = getItemFragment();
|
||||
container.appendChild( itemFrag.fragment );
|
||||
pckry.appended( itemFrag.items );
|
||||
});
|
||||
|
||||
var prependButton = document.querySelector('#prepend');
|
||||
|
||||
prependButton.addEventListener( 'click', function( event ) {
|
||||
var itemFrag = getItemFragment();
|
||||
container.insertBefore( itemFrag.fragment, container.firstChild );
|
||||
pckry.prepended( itemFrag.items );
|
||||
});
|
||||
|
||||
container.addEventListener( 'click', function( event ) {
|
||||
var elem = event.target;
|
||||
if ( !matchesSelector( elem, '.item' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
pckry.remove( elem );
|
||||
pckry.layout();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+189
@@ -0,0 +1,189 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Packery basic examples</title>
|
||||
|
||||
<link rel="stylesheet" href="css/examples.css" />
|
||||
<link rel="stylesheet" href="css/basics.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Packery basic examples</h1>
|
||||
|
||||
<div id="ex1" class="container">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
<div id="ex2" class="container">
|
||||
</div>
|
||||
|
||||
<div id="ex3" class="container">
|
||||
</div>
|
||||
|
||||
<div id="ex4" class="container fluid has-padding">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
<div id="ex5" class="container fluid">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
<div id="ex6" class="container fluid has-padding">
|
||||
<div class="bogey bogey1"></div>
|
||||
<div class="bogey bogey2"></div>
|
||||
</div>
|
||||
|
||||
<div id="fit-demo" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h2"></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-style-property/get-style-property.js"></script>
|
||||
<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 src="examples.js"></script>
|
||||
<script>
|
||||
|
||||
var ex1 = document.getElementById('ex1');
|
||||
var packery1 = new Packery( ex1 );
|
||||
|
||||
var ex2 = document.getElementById('ex2');
|
||||
appendRandomSizedItems( ex2 );
|
||||
var packery2 = new Packery( ex2 );
|
||||
|
||||
var ex3 = document.getElementById('ex3');
|
||||
appendRandomSizedItems( ex3 );
|
||||
var packery3 = new Packery( ex3, {
|
||||
columnWidth: 50,
|
||||
rowHeight: 50
|
||||
});
|
||||
|
||||
var ex4 = document.getElementById('ex4');
|
||||
var packery4 = new Packery( ex4 );
|
||||
|
||||
var ex5 = document.getElementById('ex5');
|
||||
var packery5 = new Packery( ex5 );
|
||||
|
||||
var ex6 = document.getElementById('ex6');
|
||||
appendRandomSizedItems( ex6 );
|
||||
var packery6 = new Packery( ex6, {
|
||||
itemSelector: '.item',
|
||||
stamp: ex6.querySelectorAll('.bogey')
|
||||
});
|
||||
|
||||
// ----- fit demo ----- //
|
||||
|
||||
( function() {
|
||||
var container = document.querySelector('#fit-demo');
|
||||
var pckry = new Packery( container );
|
||||
pckry.on( 'fitComplete', function( pckryInstance, item ) {
|
||||
console.log('fit was completed ', item );
|
||||
});
|
||||
|
||||
container.addEventListener( 'click', function( event ) {
|
||||
// only care about item
|
||||
var elem = event.target;
|
||||
if ( !matchesSelector( elem, '.item' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( !matchesSelector( elem, '.gigante') ) {
|
||||
elem.classList.add('gigante' );
|
||||
pckry.fit( elem );
|
||||
} else {
|
||||
elem.classList.remove('gigante' );
|
||||
pckry.layout();
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Browserify</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/examples.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Browserify</h1>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+14790
File diff suppressed because it is too large
Load Diff
+24
@@ -0,0 +1,24 @@
|
||||
// ----- jQuery ----- //
|
||||
|
||||
var Packery = require('../../js/packery');
|
||||
var Draggabilly = require('draggabilly');
|
||||
var $ = require('jquery');
|
||||
var jQBridget = require('jquery-bridget');
|
||||
|
||||
$.bridget( 'packery', Packery );
|
||||
|
||||
var $container = $('#basic').packery({
|
||||
columnWidth: 50,
|
||||
rowHeight: 50
|
||||
});
|
||||
|
||||
var pckry = $container.data('packery');
|
||||
|
||||
$.each( pckry.items, function( i, item ) {
|
||||
var draggie = new Draggabilly( item.element );
|
||||
$container.packery( 'bindDraggabillyEvents', draggie );
|
||||
});
|
||||
|
||||
$container.packery( 'on', 'dragItemPositioned', function( pckry, item ) {
|
||||
console.log( 'drag item positioned', item.position.x, item.position.y );
|
||||
});
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
// ----- vanilla JS ----- //
|
||||
|
||||
var Packery = require('../../js/packery');
|
||||
var Draggabilly = require('draggabilly');
|
||||
|
||||
var pckry = new Packery( '#basic', {
|
||||
columnWidth: 50,
|
||||
rowHeight: 50
|
||||
});
|
||||
|
||||
var draggies = [];
|
||||
var item, draggie;
|
||||
|
||||
for ( var i=0, len = pckry.items.length; i < len; i++ ) {
|
||||
item = pckry.items[i].element;
|
||||
draggie = new Draggabilly( item );
|
||||
pckry.bindDraggabillyEvents( draggie );
|
||||
draggies.push( draggie );
|
||||
}
|
||||
|
||||
pckry.on( 'dragItemPositioned', function( pckry, item ) {
|
||||
console.log( 'drag item positioned', item.position.x, item.position.y );
|
||||
});
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
|
||||
#ex5 .item {
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
width: 7.9%;
|
||||
}
|
||||
|
||||
#ex5 .item.w2 { width: 17.9%; }
|
||||
#ex5 .item.w4 { width: 37.9%; }
|
||||
|
||||
@media ( max-width: 800px ) {
|
||||
body { background: red ;}
|
||||
|
||||
#ex5 .item { width: 17.9%; }
|
||||
#ex5 .item.w2 { width: 37.9%; }
|
||||
#ex5 .item.w4 { width: 57.9%; }
|
||||
|
||||
}
|
||||
|
||||
.bogey {
|
||||
background: red;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#ex6 .bogey1 {
|
||||
width: 30%;
|
||||
height: 140px;
|
||||
left: 20%;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
#ex6 .bogey2 {
|
||||
width: 140px;
|
||||
height: 180px;
|
||||
right: 20px;
|
||||
top: 140px;
|
||||
}
|
||||
|
||||
#fit-demo {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/*
|
||||
#fit-demo .item {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
*/
|
||||
|
||||
#fit-demo .item.gigante {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 500px;
|
||||
margin-bottom: 20px;
|
||||
background: #EEE;
|
||||
}
|
||||
|
||||
.item {
|
||||
float: left;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 1px solid;
|
||||
background: #ACE;
|
||||
}
|
||||
|
||||
.item.w2 { width: 100px; }
|
||||
.item.h2 { height: 100px; }
|
||||
.item.w4 { width: 200px; }
|
||||
.item.h4 { height: 200px; }
|
||||
|
||||
.fluid {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.has-padding {
|
||||
padding: 10px 20px 30px 40px;
|
||||
}
|
||||
|
||||
/* dragging */
|
||||
.is-dragging,
|
||||
.is-positioning-post-drag,
|
||||
.ui-draggable-dragging {
|
||||
z-index: 10;
|
||||
background: orange;
|
||||
}
|
||||
+187
@@ -0,0 +1,187 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Draggabilly</title>
|
||||
|
||||
<link rel="stylesheet" href="css/examples.css" />
|
||||
<style>
|
||||
.item.expanded {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#horiz {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.packery-drop-placeholder {
|
||||
border: 3px dashed #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Draggabilly</h1>
|
||||
|
||||
<div id="ex4" class="container fluid has-padding">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="ex6" class="container fluid has-padding"></div>
|
||||
|
||||
<div id="horiz" class="container has-padding">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></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/unipointer/unipointer.js"></script>
|
||||
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||
<script src="../bower_components/draggabilly/draggabilly.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="examples.js"></script>
|
||||
<script>
|
||||
|
||||
function bindDraggies( packery ) {
|
||||
var draggies = [];
|
||||
var item, draggie;
|
||||
|
||||
for ( var i=0, len = packery.items.length; i < len; i++ ) {
|
||||
item = packery.items[i].element;
|
||||
draggie = new Draggabilly( item );
|
||||
packery.bindDraggabillyEvents( draggie );
|
||||
draggies.push( draggie );
|
||||
|
||||
}
|
||||
packery.on( 'dragItemPositioned', function( item ) {
|
||||
console.log( 'drag item positioned', item.position.x, item.position.y );
|
||||
});
|
||||
return draggies;
|
||||
|
||||
}
|
||||
|
||||
|
||||
var ex4 = document.getElementById('ex4');
|
||||
var packery4 = new Packery( ex4, {
|
||||
columnWidth: 50,
|
||||
rowHeight: 50,
|
||||
transitionDuration: '0.6s'
|
||||
});
|
||||
|
||||
var layoutCount4 = 0;
|
||||
|
||||
packery4.on( 'layoutComplete', function( packery ) {
|
||||
console.log( 'completed layouts', ++layoutCount4 );
|
||||
});
|
||||
|
||||
var ex6 = document.getElementById('ex6');
|
||||
appendRandomSizedItems( ex6 );
|
||||
var packery6 = new Packery( ex6, {
|
||||
itemSelector: '.item',
|
||||
transitionDuration: '0.6s',
|
||||
gutter: 10
|
||||
});
|
||||
|
||||
window.packery4 = packery4;
|
||||
|
||||
( function() {
|
||||
var draggies = bindDraggies( packery4 );
|
||||
|
||||
// when clicked toggle expanded
|
||||
function onDragEnd() {
|
||||
var p1 = this.position;
|
||||
var p2 = this.startPosition;
|
||||
// only proceed if stuff has moved
|
||||
if ( p1.x !== p2.x || p1.y !== p2.y ) {
|
||||
return;
|
||||
}
|
||||
// dragger didn't move
|
||||
var isExpanded = this.element.classList.contains('expanded' );
|
||||
this.element.classList.toggle('expanded');
|
||||
if ( !isExpanded ) {
|
||||
// HACK unplace first
|
||||
packery4.unplace( this.element );
|
||||
packery4.fit( this.element );
|
||||
} else {
|
||||
packery4.layout();
|
||||
}
|
||||
}
|
||||
|
||||
for ( var i=0, len = draggies.length; i < len; i++ ) {
|
||||
var draggie = draggies[i];
|
||||
draggie.on( 'dragEnd', onDragEnd );
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
bindDraggies( packery6 );
|
||||
|
||||
( function() {
|
||||
var pckry = new Packery( '#horiz', {
|
||||
columnWidth: 50,
|
||||
rowHeight: 50,
|
||||
horizontal: true,
|
||||
transitionDuration: '0.8s'
|
||||
});
|
||||
bindDraggies( pckry );
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
function appendRandomSizedItems( container ) {
|
||||
var frag = document.createDocumentFragment();
|
||||
for ( var i=0; i < 35; i++ ) {
|
||||
var item = document.createElement('div');
|
||||
item.className = 'item';
|
||||
var w = Math.floor( Math.random() * Math.random() * 180 ) + 20;
|
||||
var h = Math.floor( Math.random() * Math.random() * 180 ) + 20;
|
||||
item.style.width = w + 'px';
|
||||
item.style.height = h + 'px';
|
||||
frag.appendChild( item );
|
||||
}
|
||||
|
||||
container.appendChild( frag );
|
||||
}
|
||||
+120
@@ -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>
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>fluid</title>
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
/* force scrollbar */
|
||||
html { overflow-y: scroll; }
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.grid {
|
||||
margin-bottom: 20px;
|
||||
background: #EEE;
|
||||
/*padding: 20px 5%;*/
|
||||
}
|
||||
|
||||
.grid-item,
|
||||
.grid-sizer {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
float: left;
|
||||
height: 80px;
|
||||
border: 1px solid;
|
||||
background: #ACE;
|
||||
}
|
||||
|
||||
.grid-item.w2 { width: 50%; }
|
||||
.grid-item.w3 { width: 75%; }
|
||||
|
||||
.grid-item.h2 { height: 160px; }
|
||||
.grid-item.h3 { height: 240px; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>fluid</h1>
|
||||
|
||||
<div class="grid js-packery" data-packery-options='{ "percentPosition": true }'>
|
||||
<div class="grid-item w2"></div>
|
||||
<div class="grid-item h2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item w3"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item h3"></div>
|
||||
<div class="grid-item w2 h2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
</div>
|
||||
|
||||
<h2>Draggable</h2>
|
||||
|
||||
<div class="grid grid--draggable">
|
||||
<div class="grid-sizer"></div>
|
||||
<div class="grid-item w2"></div>
|
||||
<div class="grid-item h2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item w3"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item h3"></div>
|
||||
<div class="grid-item w2 h2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-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="../bower_components/unipointer/unipointer.js"></script>
|
||||
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||
<script src="../bower_components/draggabilly/draggabilly.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>
|
||||
var pckry = new Packery( '.grid--draggable', {
|
||||
itemSelector: '.grid-item',
|
||||
columnWidth: '.grid-sizer',
|
||||
percentPosition: true,
|
||||
});
|
||||
|
||||
var dragElems = document.querySelectorAll('.grid--draggable .grid-item');
|
||||
|
||||
for ( var i=0; i < dragElems.length; i++ ) {
|
||||
var dragElem = dragElems[i];
|
||||
var draggie = new Draggabilly( dragElem );
|
||||
pckry.bindDraggabillyEvents( draggie );
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+191
@@ -0,0 +1,191 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Packery horizontal examples</title>
|
||||
|
||||
<link rel="stylesheet" href="css/examples.css" />
|
||||
<link rel="stylesheet" href="css/basics.css" />
|
||||
<style>
|
||||
html, body { height: 100%; }
|
||||
|
||||
.container {
|
||||
width: auto;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.container.fluid {
|
||||
width: auto;
|
||||
height: 80%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#ex6 .bogey1 {
|
||||
top: 40%;
|
||||
left: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#ex6 .bogey2 {
|
||||
right: auto;
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
#fit-demo {
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>horizontal examples</h1>
|
||||
|
||||
<div id="ex1" class="container">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
<div id="ex2" class="container">
|
||||
</div>
|
||||
|
||||
<div id="ex3" class="container">
|
||||
</div>
|
||||
|
||||
<div id="ex4" class="container fluid has-padding">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
<div id="ex6" class="container fluid has-padding">
|
||||
<div class="bogey bogey1"></div>
|
||||
<div class="bogey bogey2"></div>
|
||||
</div>
|
||||
|
||||
<div id="fit-demo" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h2"></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 src="examples.js"></script>
|
||||
<script>
|
||||
// everything horizontal on this page
|
||||
Packery.defaults.isHorizontal = true;
|
||||
|
||||
var ex1 = document.getElementById('ex1');
|
||||
var packery1 = new Packery( ex1 );
|
||||
|
||||
var ex2 = document.getElementById('ex2');
|
||||
appendRandomSizedItems( ex2 );
|
||||
var packery2 = new Packery( ex2 );
|
||||
|
||||
var ex3 = document.getElementById('ex3');
|
||||
appendRandomSizedItems( ex3 );
|
||||
var packery3 = new Packery( ex3, {
|
||||
columnWidth: 50,
|
||||
rowHeight: 50
|
||||
});
|
||||
|
||||
var ex4 = document.getElementById('ex4');
|
||||
var packery4 = new Packery( ex4 );
|
||||
|
||||
var ex6 = document.getElementById('ex6');
|
||||
appendRandomSizedItems( ex6 );
|
||||
var packery6 = new Packery( ex6, {
|
||||
itemSelector: '.item',
|
||||
stamp: ex6.querySelectorAll('.bogey')
|
||||
});
|
||||
|
||||
// ----- fit demo ----- //
|
||||
|
||||
( function() {
|
||||
var container = document.querySelector('#fit-demo');
|
||||
var pckry = new Packery( container );
|
||||
pckry.on( 'fitComplete', function( pckryInstance, item ) {
|
||||
console.log('fit was completed ', item );
|
||||
});
|
||||
|
||||
container.addEventListener( 'click', function( event ) {
|
||||
// only care about item
|
||||
var elem = event.target;
|
||||
if ( !matchesSelector( elem, '.item' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( !matchesSelector( elem, '.gigante') ) {
|
||||
elem.classList.add('gigante' );
|
||||
pckry.fit( elem );
|
||||
} else {
|
||||
elem.classList.remove('gigante' );
|
||||
pckry.layout();
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>jQuery UI Draggable</title>
|
||||
|
||||
<link rel="stylesheet" href="css/examples.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>jQuery UI Draggable</h1>
|
||||
|
||||
<div id="ex4" class="container fluid has-padding">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="ex6" class="container fluid has-padding"></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-ui-draggable/jquery-ui-draggable.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="examples.js"></script>
|
||||
<script>
|
||||
$( function() {
|
||||
|
||||
// ----- grid ----- //
|
||||
|
||||
var $ex4 = $('#ex4');
|
||||
$ex4.packery({
|
||||
columnWidth: 50,
|
||||
rowHeight: 50,
|
||||
transitionDuration: '0.6s'
|
||||
});
|
||||
|
||||
// get item elements and make them draggaable
|
||||
var itemElems = $ex4.packery('getItemElements');
|
||||
var $itemElems = $( itemElems ).draggable();
|
||||
|
||||
function orderItems( event ) {
|
||||
// console.log( event.type, arguments );
|
||||
var itemElems = $ex4.packery('getItemElements');
|
||||
$( itemElems ).each( function( i, elem ) {
|
||||
$(elem).text( i+1 );
|
||||
});
|
||||
}
|
||||
|
||||
$ex4.packery( 'bindUIDraggableEvents', $itemElems );
|
||||
$ex4.on( 'dragItemPositioned', orderItems );
|
||||
$ex4.on( 'layoutComplete', orderItems );
|
||||
|
||||
// ----- random sized ----- //
|
||||
|
||||
var $ex6 = $('#ex6');
|
||||
appendRandomSizedItems( $ex6[0] );
|
||||
$ex6.packery({
|
||||
itemSelector: '.item',
|
||||
transitionDuration: '1.6s'
|
||||
});
|
||||
|
||||
// get item elements and make them draggaable
|
||||
itemElems = $ex6.packery('getItemElements');
|
||||
$itemElems = $( itemElems ).draggable();
|
||||
$ex6.packery( 'bindUIDraggableEvents', $itemElems );
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+228
@@ -0,0 +1,228 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Packery with jQuery</title>
|
||||
|
||||
<link rel="stylesheet" href="css/examples.css" />
|
||||
<link rel="stylesheet" href="css/basics.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Packery with jQuery</h1>
|
||||
|
||||
<div id="ex1" class="container">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
<div id="ex2" class="container">
|
||||
</div>
|
||||
|
||||
<div id="ex3" class="container">
|
||||
</div>
|
||||
|
||||
<div id="ex4" class="container fluid has-padding">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
<div id="ex5" class="container fluid">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
<div id="ex6" class="container fluid has-padding">
|
||||
<div class="bogey bogey1"></div>
|
||||
<div class="bogey bogey2"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p><button id="add-to-7">Add items</button></p>
|
||||
|
||||
<div id="ex7" class="container">
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w4"></div>
|
||||
</div>
|
||||
|
||||
<div id="fit-demo" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h2"></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/jquery/dist/jquery.min.js"></script>
|
||||
<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-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="examples.js"></script>
|
||||
<script>
|
||||
$( function() {
|
||||
|
||||
$('#ex1').packery();
|
||||
|
||||
var $ex2 = $('#ex2');
|
||||
appendRandomSizedItems( $ex2[0] );
|
||||
$ex2.packery();
|
||||
|
||||
var $ex3 = $('#ex3');
|
||||
appendRandomSizedItems( $ex3[0] );
|
||||
$ex3.packery({
|
||||
columnWidth: 50,
|
||||
rowHeight: 50
|
||||
});
|
||||
|
||||
$('#ex4').packery();
|
||||
|
||||
$('#ex5').packery()
|
||||
|
||||
var $ex6 = $('#ex6');
|
||||
appendRandomSizedItems( $ex6[0] );
|
||||
$ex6.packery({
|
||||
itemSelector: '.item',
|
||||
stamp: '.bogey'
|
||||
});
|
||||
|
||||
// ----- append and remove ----- //
|
||||
|
||||
var $ex7 = $('#ex7');
|
||||
$ex7.packery();
|
||||
|
||||
$('#add-to-7').click( function() {
|
||||
var items = '';
|
||||
for ( var i=0; i < 3; i++ ) {
|
||||
|
||||
var wRand = Math.random();
|
||||
var widthClass = wRand > 0.85 ? 'w4' :
|
||||
wRand > 0.7 ? 'w2' : '';
|
||||
var hRand = Math.random();
|
||||
var heightClass = hRand > 0.85 ? 'h4' :
|
||||
hRand > 0.7 ? 'h2' : '';
|
||||
var className = 'item ' + widthClass + ' ' + heightClass;
|
||||
var item = '<div class="' + className + '"></div>';
|
||||
items += item;
|
||||
}
|
||||
var $items = $( items );
|
||||
$ex7.append( $items ).packery( 'appended', $items );
|
||||
});
|
||||
|
||||
$ex7.on( 'click', '.item', function() {
|
||||
$ex7.packery( 'remove', this ).packery();
|
||||
});
|
||||
|
||||
// ----- fit demo ----- //
|
||||
|
||||
( function() {
|
||||
var $elem = $('#fit-demo');
|
||||
$elem.packery();
|
||||
|
||||
$elem.packery( 'on', 'fitComplete', function( pckryInstance, item ) {
|
||||
console.log('fit was completed ');
|
||||
});
|
||||
|
||||
$elem.on( 'click', '.item', function() {
|
||||
var $this = $(this)
|
||||
if ( !$this.hasClass('gigante') ) {
|
||||
$this.addClass('gigante');
|
||||
$elem.packery( 'fit', this );
|
||||
} else {
|
||||
$this.removeClass('gigante');
|
||||
$elem.packery();
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>merge rects</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>merge rects</h1>
|
||||
|
||||
<p>
|
||||
<button class="make-rects-button" onclick="makeRects();">make rects</button>
|
||||
<button class="merge-rects-button" onclick="mergeRects();">merge rects</button>
|
||||
</p>
|
||||
|
||||
<canvas width="400" height="400"></canvas>
|
||||
|
||||
<script src="../js/rect.js"></script>
|
||||
<script src="../js/packer.js"></script>
|
||||
|
||||
<script>
|
||||
function makeRect() {
|
||||
var size = Math.floor( Math.random() * 12 ) + 1;
|
||||
// var height = Math.floor( Math.random() * 9 ) + 1;
|
||||
var x = Math.floor( Math.random() * ( 20 - size ) );
|
||||
var y = Math.floor( Math.random() * ( 20 - size ) );
|
||||
return new Packery.Rect({
|
||||
x: x * 20,
|
||||
y: y * 20,
|
||||
width: size * 20,
|
||||
height: size * 20,
|
||||
hue: Math.floor( Math.random() * 6 ) * 360 / 6
|
||||
});
|
||||
}
|
||||
|
||||
var canvas = document.querySelector('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
var rects;
|
||||
|
||||
function makeRects() {
|
||||
rects = [];
|
||||
for ( var i=0; i < 10; i++ ) {
|
||||
rects.push( makeRect() );
|
||||
}
|
||||
render();
|
||||
}
|
||||
|
||||
function renderRect( rect) {
|
||||
var x = rect.x + 0.5;
|
||||
var y = rect.y + 0.5;
|
||||
ctx.lineWidth = 3;
|
||||
ctx.strokeStyle = 'hsla(' + rect.hue + ', 100%, 40%, 0.8)';
|
||||
ctx.strokeRect( x, y, rect.width, rect.height );
|
||||
ctx.fillStyle = 'hsla(' + rect.hue + ', 100%, 50%, 0.2)';
|
||||
ctx.fillRect( x, y, rect.width, rect.height );
|
||||
}
|
||||
|
||||
function render() {
|
||||
ctx.clearRect( 0, 0, 400, 400 );
|
||||
rects.forEach( renderRect );
|
||||
}
|
||||
|
||||
makeRects();
|
||||
|
||||
function mergeRects() {
|
||||
rects = Packery.Packer.mergeRects( rects );
|
||||
render();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+168
@@ -0,0 +1,168 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Packery basic examples</title>
|
||||
|
||||
<link rel="stylesheet" href="css/examples.css" />
|
||||
<link rel="stylesheet" href="css/basics.css" />
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
counter-reset: item;
|
||||
}
|
||||
|
||||
.container .item:before {
|
||||
counter-increment: item;
|
||||
content: counter(item);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
position: absolute;
|
||||
background: red;
|
||||
border: 1px solid;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.stamp1 {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
left: 130px;
|
||||
}
|
||||
|
||||
.stamp2 {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
right: 30%;
|
||||
}
|
||||
|
||||
#top-right .stamp1 { top: 10px; }
|
||||
#bottom-right .stamp1,
|
||||
#bottom-left .stamp1 { bottom: 10px; }
|
||||
|
||||
#top-right .stamp2 { top: 20px; }
|
||||
#bottom-right .stamp2,
|
||||
#bottom-left .stamp2 { bottom: 20px; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Packery basic examples</h1>
|
||||
|
||||
<div id="top-right" class="container">
|
||||
<div class="stamp stamp1"></div>
|
||||
<div class="stamp stamp2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
</div>
|
||||
|
||||
<div id="bottom-left" class="container">
|
||||
<div class="stamp stamp1"></div>
|
||||
<div class="stamp stamp2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
</div>
|
||||
|
||||
<div id="bottom-right" class="container">
|
||||
<div class="stamp stamp1"></div>
|
||||
<div class="stamp stamp2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></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/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../bower_components/outlayer/item.js"></script>
|
||||
<script src="../bower_components/outlayer/outlayer.js"></script>
|
||||
<script src="../bower_components/draggabilly/draggabilly.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="examples.js"></script>
|
||||
<script>
|
||||
new Packery( '#top-right', {
|
||||
itemSelector: '.item',
|
||||
stamp: '.stamp',
|
||||
originLeft: false
|
||||
});
|
||||
|
||||
new Packery( '#bottom-left', {
|
||||
itemSelector: '.item',
|
||||
stamp: '.stamp',
|
||||
originTop: false
|
||||
});
|
||||
|
||||
( function() {
|
||||
var pckry = new Packery( '#bottom-right', {
|
||||
itemSelector: '.item',
|
||||
stamp: '.stamp',
|
||||
originLeft: false,
|
||||
originTop: false
|
||||
});
|
||||
|
||||
for ( var i=0, len = pckry.items.length; i < len; i++ ) {
|
||||
var item = pckry.items[i];
|
||||
var draggie = new Draggabilly( item.element );
|
||||
pckry.bindDraggabillyEvents( draggie );
|
||||
}
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>require js</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/examples.css" />
|
||||
<script data-main="main" src="https://unpkg.com/requirejs@2.1/require.js"></script>
|
||||
<!-- <script data-main="main" src="require.js"></script> -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>require js</h1>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item w4"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h2"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
/*global requirejs: false*/
|
||||
|
||||
/*
|
||||
// bower components
|
||||
requirejs.config({
|
||||
baseUrl: '../../bower_components'
|
||||
});
|
||||
|
||||
requirejs( [ '../../js/packery' ], function( Packery ) {
|
||||
|
||||
new Packery( document.querySelector('#basic') );
|
||||
|
||||
});
|
||||
// */
|
||||
|
||||
/*
|
||||
// packery.pkgd.js
|
||||
requirejs( [
|
||||
'./../dist/packery.pkgd.js',
|
||||
'require'
|
||||
], function( pkgd, require ) {
|
||||
require( ['packery/js/packery'], function ( Packery ) {
|
||||
new Packery('#basic');
|
||||
});
|
||||
});
|
||||
// */
|
||||
|
||||
requirejs( [
|
||||
'../../dist/packery.pkgd.js'
|
||||
], function( Packery ) {
|
||||
new Packery('#basic');
|
||||
});
|
||||
+2129
File diff suppressed because it is too large
Load Diff
+163
@@ -0,0 +1,163 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>save positions</title>
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
/* force scrollbar */
|
||||
html { overflow-y: scroll; }
|
||||
|
||||
.grid {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.grid.is-img-loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.grid-sizer, .grid-item {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.grid-item.is-dragging,
|
||||
.grid-item.is-positioning-post-drag {
|
||||
opacity: 0.8;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.grid-item--width2 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.grid-item img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.packery-drop-placeholder {
|
||||
background: white;
|
||||
opacity: 0.5;
|
||||
outline: 3px dashed black;
|
||||
outline-offset: -6px;
|
||||
-webkit-transition: -webkit-transform 0.2s;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>save positions</h1>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-sizer"></div>
|
||||
<div class="grid-item grid-item--width2" data-item-id="1"><img src="http://i.imgur.com/9xYjgCk.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="2"><img src="http://i.imgur.com/OZmQIVL.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="3"><img src="http://i.imgur.com/lBKi66i.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="4"><img src="http://i.imgur.com/LFelADP.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="5"><img src="http://i.imgur.com/ERMbVdn.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="6"><img src="http://i.imgur.com/4ifgQaR.jpg" /></div>
|
||||
<div class="grid-item grid-item--width2" data-item-id="7"><img src="http://i.imgur.com/8lEJtbg.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="8"><img src="http://i.imgur.com/LkmcILl.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="9"><img src="http://i.imgur.com/aboaFoB.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="10"><img src="http://i.imgur.com/PgmEBSB.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="11"><img src="http://i.imgur.com/bAZWoqx.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="12"><img src="http://i.imgur.com/UORFJ3w.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="13"><img src="http://i.imgur.com/hODreXI.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="14"><img src="http://i.imgur.com/bwy74ok.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="15"><img src="http://i.imgur.com/q9zO6tw.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="16"><img src="http://i.imgur.com/r8p3Xgq.jpg" /></div>
|
||||
<div class="grid-item" data-item-id="17"><img src="http://i.imgur.com/4O7U1Ob.jpg" /></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 src="http://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
|
||||
|
||||
|
||||
<script src="../bower_components/unipointer/unipointer.js"></script>
|
||||
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||
<script src="../bower_components/draggabilly/draggabilly.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var grid = document.querySelector('.grid');
|
||||
var pckry = new Packery( grid, {
|
||||
itemSelector: '.grid-item',
|
||||
columnWidth: '.grid-sizer',
|
||||
transitionDuration: '0.3s',
|
||||
shiftPercentResize: true,
|
||||
percentPosition: true,
|
||||
initLayout: false
|
||||
});
|
||||
|
||||
var itemElems = grid.querySelectorAll('.grid-item');
|
||||
|
||||
for ( var i=0; i < itemElems.length; i++ ) {
|
||||
var itemElem = itemElems[i];
|
||||
var draggie = new Draggabilly( itemElem );
|
||||
pckry.bindDraggabillyEvents( draggie );
|
||||
}
|
||||
|
||||
imagesLoaded( grid, function() {
|
||||
grid.classList.add('is-img-loaded');
|
||||
var itemPositions = localStorage.getItem( 'itemsShiftPositions' );
|
||||
if ( itemPositions ) {
|
||||
itemPositions = JSON.parse( itemPositions );
|
||||
pckry._resetLayout();
|
||||
// set item order and horizontal position from saved positions
|
||||
pckry.items = itemPositions.map( function( itemPosition ) {
|
||||
var itemElem = grid.querySelector('[data-item-id="' + itemPosition.id + '"]');
|
||||
var item = pckry.getItem( itemElem );
|
||||
item.rect.x = parseFloat( itemPosition.x ) * pckry.packer.width;
|
||||
return item;
|
||||
});
|
||||
pckry.shiftLayout();
|
||||
} else {
|
||||
// if no initial positions, run packery layout
|
||||
pckry.layout();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
pckry.on( 'layoutComplete', savePositions );
|
||||
pckry.on( 'dragItemPositioned', savePositions );
|
||||
|
||||
function savePositions() {
|
||||
var positions = getItemsShiftPositions();
|
||||
localStorage.setItem( 'itemsShiftPositions', JSON.stringify( positions ) );
|
||||
}
|
||||
|
||||
function getItemsShiftPositions() {
|
||||
return pckry.items.map( function( item ) {
|
||||
return {
|
||||
id: item.element.getAttribute('data-item-id'),
|
||||
x: item.rect.x / pckry.packer.width
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>shift drag uneven</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.grid {
|
||||
background: #EEE;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
border: 1px solid;
|
||||
background: #8BE;
|
||||
}
|
||||
|
||||
.grid-item.is-dragging,
|
||||
.grid-item.is-positioning-post-drag {
|
||||
z-index: 2;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.grid-item.w2 { width: 200px; }
|
||||
.grid-item.h2 { height: 100px; }
|
||||
.grid-item.h3 { height: 140px; }
|
||||
.grid-item.h4 { height: 240px; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>shift drag uneven</h1>
|
||||
|
||||
<p><button class="button-layout">Layout</button></p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-item w2 h4"></div>
|
||||
<div class="grid-item w2 h2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item h3"></div>
|
||||
<div class="grid-item h2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item w2 h3"></div>
|
||||
<div class="grid-item h2"></div>
|
||||
<div class="grid-item h3"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item h2"></div>
|
||||
<div class="grid-item w2 h2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-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/unipointer/unipointer.js"></script>
|
||||
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||
<script src="../bower_components/draggabilly/draggabilly.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>
|
||||
var gridElem = document.querySelector('.grid');
|
||||
var pckry = new Packery( gridElem, {
|
||||
columnWidth: 100,
|
||||
// gutter: 20
|
||||
});
|
||||
|
||||
var itemElems = gridElem.querySelectorAll('.grid-item');
|
||||
|
||||
for ( var i=0; i < itemElems.length; i++ ) {
|
||||
var itemElem = itemElems[i];
|
||||
var draggie = new Draggabilly( itemElem );
|
||||
pckry.bindDraggabillyEvents( draggie );
|
||||
}
|
||||
|
||||
document.querySelector('.button-layout').onclick = function() {
|
||||
pckry.layout();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>shift drag</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.grid {
|
||||
background: #EEE;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid;
|
||||
background: #8BE;
|
||||
}
|
||||
|
||||
.grid-item.is-dragging,
|
||||
.grid-item.is-positioning-post-drag {
|
||||
z-index: 2;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.grid-item.w2 { width: 200px; }
|
||||
.grid-item.h2 { height: 200px; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>shift drag</h1>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-item w2 h2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item h2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item w2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item h2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item w2"></div>
|
||||
<div class="grid-item w2 h2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-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/unipointer/unipointer.js"></script>
|
||||
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||
<script src="../bower_components/draggabilly/draggabilly.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>
|
||||
var gridElem = document.querySelector('.grid');
|
||||
var pckry = new Packery( gridElem, {
|
||||
columnWidth: 100,
|
||||
rowHeight: 100
|
||||
});
|
||||
|
||||
var itemElems = gridElem.querySelectorAll('.grid-item');
|
||||
|
||||
for ( var i=0; i < itemElems.length; i++ ) {
|
||||
var itemElem = itemElems[i];
|
||||
var draggie = new Draggabilly( itemElem );
|
||||
pckry.bindDraggabillyEvents( draggie );
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>single</title>
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.grid {
|
||||
background: #DDD;
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin: 2px;
|
||||
border: 1px solid;
|
||||
background: #09F;
|
||||
}
|
||||
|
||||
.grid-item--width2 {
|
||||
width: 96px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>single</h1>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item grid-item--width2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-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 src="../bower_components/unipointer/unipointer.js"></script>
|
||||
<script src="../bower_components/unidragger/unidragger.js"></script>
|
||||
<script src="../bower_components/draggabilly/draggabilly.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var pckry = new Packery('.grid', {
|
||||
columnWidth: 50
|
||||
});
|
||||
|
||||
pckry.getItemElements().forEach( function( itemElem ) {
|
||||
var draggie = new Draggabilly( itemElem );
|
||||
pckry.bindDraggabillyEvents( draggie );
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user