mirror of https://github.com/metafizzy/isotope
Browse Source
Same issue as metafizzy/packery#372 👷 build v3.0.1 ⬆️ update ev-emitter v1.0.3, fizzy-ui-utils v2.0.2pull/1122/head v3.0.1
David DeSandro
9 years ago
7 changed files with 313 additions and 30 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,275 @@
|
||||
<!doctype html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<meta name="viewport" content="width=device-width" /> |
||||
|
||||
<title>v3 release gif</title> |
||||
|
||||
<style> |
||||
|
||||
/* Texta Regular */ |
||||
@font-face { |
||||
font-family: 'Texta'; |
||||
src: url('../../metafizzy.co/assets/fonts/2D333F_2_0.woff2') format('woff2'), |
||||
url('../../metafizzy.co/assets/fonts/2D333F_2_0.woff') format('woff'); |
||||
} |
||||
|
||||
/* Texta Heavy */ |
||||
@font-face { |
||||
font-family: 'Texta'; |
||||
font-weight: bold; |
||||
font-style: normal; |
||||
src: url('../../metafizzy.co/assets/fonts/2D333F_0_0.woff2') format('woff2'), |
||||
url('../../metafizzy.co/assets/fonts/2D333F_0_0.woff') format('woff'); |
||||
} |
||||
|
||||
/* Texta Italic */ |
||||
@font-face { |
||||
font-family: 'Texta'; |
||||
font-weight: normal; |
||||
font-style: italic; |
||||
src: url('../../metafizzy.co/assets/fonts/2D333F_1_0.woff2') format('woff2'), |
||||
url('../../metafizzy.co/assets/fonts/2D333F_1_0.woff') format('woff'); |
||||
} |
||||
|
||||
html { |
||||
font-size: 17px; |
||||
} |
||||
|
||||
body { |
||||
color: #EEE; |
||||
background: #333; |
||||
font-family: Texta; |
||||
width: 800px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
|
||||
|
||||
.grid { |
||||
width: 375px; |
||||
} |
||||
|
||||
.grid-item { |
||||
position: relative; |
||||
float: left; |
||||
width: 60px; |
||||
height: 60px; |
||||
border-radius: 5px; |
||||
color: white; |
||||
font-size: 1.4rem; |
||||
line-height: 1; |
||||
margin: 0 5px 5px 0; |
||||
} |
||||
|
||||
.grid-item--red { background: #C25; } |
||||
.grid-item--gold { background: #EA0; } |
||||
.grid-item--blue { background: #19F; } |
||||
|
||||
.grid-item__letter { |
||||
position: absolute; |
||||
top: 6px; |
||||
left: 6px; |
||||
} |
||||
|
||||
.grid-item__number { |
||||
position: absolute; |
||||
bottom: 6px; |
||||
right: 6px; |
||||
color: #222; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/* button |
||||
------------------------- */ |
||||
|
||||
.button { |
||||
display: block; |
||||
padding: 10px 12px; |
||||
border: none; |
||||
background-color: #EEE; |
||||
color: #333; |
||||
line-height: 1; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
.button:hover { |
||||
background-color: #FFF; |
||||
cursor:pointer; |
||||
} |
||||
|
||||
.button:active { |
||||
background-color: #EEE; |
||||
} |
||||
|
||||
.button:focus { |
||||
outline: none; |
||||
/* outline: 5px auto -webkit-focus-ring-color;*/ |
||||
/* outline-offset: -2px;*/ |
||||
background-color: white; |
||||
} |
||||
|
||||
.button.is-selected { |
||||
background-color: #19F; |
||||
color: white; |
||||
} |
||||
|
||||
/* button group |
||||
------------------------- */ |
||||
|
||||
.button-group { |
||||
margin-bottom: 20px; |
||||
display: -webkit-flex; |
||||
display: flex; |
||||
} |
||||
|
||||
.button-group .button { |
||||
margin-right: 1px; |
||||
} |
||||
|
||||
.button-group .button:first-child { |
||||
border-radius: 8px 0 0 8px; |
||||
} |
||||
|
||||
.button-group .button:last-child { |
||||
border-radius: 0 8px 8px 0; |
||||
border-right: 1px solid #BBB; |
||||
} |
||||
|
||||
|
||||
</style> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<h1>v3 release gif</h1> |
||||
|
||||
<div class="button-group"> |
||||
<button class="button is-selected" data-arrange='{ "filter": "*", "sortBy": "original-order" }'>Original</button> |
||||
<button class="button" data-arrange='{ "filter": ".grid-item--red" }'>Red</button> |
||||
<button class="button" data-arrange='{ "filter": ".grid-item--red, .grid-item--gold" }'>Red & Gold</button> |
||||
<button class="button" data-arrange='{ "filter": ".grid-item--blue" }'>Blue</button> |
||||
<button class="button" data-arrange='{ "sortBy": "number" }'>123</button> |
||||
</div> |
||||
|
||||
<div class="grid"> |
||||
<div class="grid-item grid-item--red"> |
||||
<span class="grid-item__letter">A</span> |
||||
<span class="grid-item__number">8</span> |
||||
</div> |
||||
<div class="grid-item grid-item--blue"> |
||||
<span class="grid-item__letter">B</span> |
||||
<span class="grid-item__number">12</span> |
||||
</div> |
||||
<div class="grid-item grid-item--gold"> |
||||
<span class="grid-item__letter">C</span> |
||||
<span class="grid-item__number">15</span> |
||||
</div> |
||||
<div class="grid-item grid-item--gold"> |
||||
<span class="grid-item__letter">D</span> |
||||
<span class="grid-item__number">10</span> |
||||
</div> |
||||
<div class="grid-item grid-item--red"> |
||||
<span class="grid-item__letter">E</span> |
||||
<span class="grid-item__number">9</span> |
||||
</div> |
||||
<div class="grid-item grid-item--blue"> |
||||
<span class="grid-item__letter">F</span> |
||||
<span class="grid-item__number">3</span> |
||||
</div> |
||||
<div class="grid-item grid-item--red"> |
||||
<span class="grid-item__letter">G</span> |
||||
<span class="grid-item__number">4</span> |
||||
</div> |
||||
<div class="grid-item grid-item--red"> |
||||
<span class="grid-item__letter">H</span> |
||||
<span class="grid-item__number">12</span> |
||||
</div> |
||||
<div class="grid-item grid-item--gold"> |
||||
<span class="grid-item__letter">I</span> |
||||
<span class="grid-item__number">16</span> |
||||
</div> |
||||
<div class="grid-item grid-item--red"> |
||||
<span class="grid-item__letter">J</span> |
||||
<span class="grid-item__number">1</span> |
||||
</div> |
||||
<div class="grid-item grid-item--blue"> |
||||
<span class="grid-item__letter">K</span> |
||||
<span class="grid-item__number">11</span> |
||||
</div> |
||||
<div class="grid-item grid-item--blue"> |
||||
<span class="grid-item__letter">L</span> |
||||
<span class="grid-item__number">7</span> |
||||
</div> |
||||
<div class="grid-item grid-item--red"> |
||||
<span class="grid-item__letter">M</span> |
||||
<span class="grid-item__number">19</span> |
||||
</div> |
||||
<div class="grid-item grid-item--gold"> |
||||
<span class="grid-item__letter">N</span> |
||||
<span class="grid-item__number">13</span> |
||||
</div> |
||||
<div class="grid-item grid-item--blue"> |
||||
<span class="grid-item__letter">O</span> |
||||
<span class="grid-item__number">17</span> |
||||
</div> |
||||
<div class="grid-item grid-item--gold"> |
||||
<span class="grid-item__letter">P</span> |
||||
<span class="grid-item__number">14</span> |
||||
</div> |
||||
<div class="grid-item grid-item--red"> |
||||
<span class="grid-item__letter">Q</span> |
||||
<span class="grid-item__number">20</span> |
||||
</div> |
||||
<div class="grid-item grid-item--blue"> |
||||
<span class="grid-item__letter">R</span> |
||||
<span class="grid-item__number">6</span> |
||||
</div> |
||||
<div class="grid-item grid-item--red"> |
||||
<span class="grid-item__letter">S</span> |
||||
<span class="grid-item__number">2</span> |
||||
</div> |
||||
<div class="grid-item grid-item--red"> |
||||
<span class="grid-item__letter">T</span> |
||||
<span class="grid-item__number">5</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="../bower_components/ev-emitter/ev-emitter.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/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/layout-mode.js"></script> |
||||
<script src="../js/item.js"></script> |
||||
<script src="../js/isotope.js"></script> |
||||
<script src="../js/layout-modes/fit-rows.js"></script> |
||||
|
||||
<script> |
||||
|
||||
var iso = new Isotope( '.grid', { |
||||
layoutMode: 'fitRows', |
||||
// transitionDuration: '0.3s', |
||||
stagger: 30, |
||||
getSortData: { |
||||
letter: '.grid-item__letter', |
||||
number: '.grid-item__number parseInt' |
||||
} |
||||
}); |
||||
|
||||
var buttonGroup = document.querySelector('.button-group'); |
||||
buttonGroup.onclick = function() { |
||||
var arrangeAttr = event.target.getAttribute('data-arrange'); |
||||
iso.arrange( JSON.parse( arrangeAttr ) ); |
||||
// change is-selected class |
||||
buttonGroup.querySelector('.is-selected').classList.remove('is-selected'); |
||||
event.target.classList.add('is-selected'); |
||||
} |
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue