playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

get browserify sandbox working 

add missing layout mode require
pull/829/head
David DeSandro 10 years ago
parent
1e11a25921
commit
0937022484
5 changed files with 196 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 1
      js/isotope.js
  3. 2
      package.json
  4. 145
      sandbox/browserify/browserify.html
  5. 47
      sandbox/browserify/main.js

1
.gitignore vendored
Unescape View File

@ -3,3 +3,4 @@ isotope-site.zip
components/ components/
bower_components/ bower_components/
node_modules/ node_modules/
sandbox/**/bundle.js

1
js/isotope.js
Unescape View File

@ -628,6 +628,7 @@ if ( typeof define === 'function' && define.amd ) {
require('get-size'), require('get-size'),
require('desandro-matches-selector'), require('desandro-matches-selector'),
require('./item'), require('./item'),
require('./layout-mode'),
// include default layout modes // include default layout modes
require('./layout-modes/masonry'), require('./layout-modes/masonry'),
require('./layout-modes/fit-rows'), require('./layout-modes/fit-rows'),

2
package.json
Unescape View File

@ -9,7 +9,9 @@
"masonry-layout": "3.2.x" "masonry-layout": "3.2.x"
}, },
"devDependencies": { "devDependencies": {
"desandro-matches-selector": "^1.0.2",
"doc-ready": "1.x", "doc-ready": "1.x",
"eventie": "^1.0.5",
"jquery": ">=1.4.3 <2", "jquery": ">=1.4.3 <2",
"jquery-bridget": "1.1.x", "jquery-bridget": "1.1.x",
"qunitjs": "^1.15", "qunitjs": "^1.15",

145
sandbox/browserify/browserify.html
Unescape View File

@ -0,0 +1,145 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Browserify</title>
<link rel="stylesheet" href="../sandbox.css" />
</head>
<body>
<h1>Browserify</h1>
<div id="options">
<h2>Filter</h2>
<div class="option-set" data-isotope-key="filter">
<button data-isotope-value="*">show all</button>
<button data-isotope-value=".metal">metal</button>
<button data-isotope-value=".post-transition">post-transition</button>
<button data-isotope-value="number-greater-than-50">number > 50</button>
</div>
<h2>Sort</h2>
<div class="option-set" data-isotope-key="sortBy">
<button data-isotope-value="original-order">original-order</button>
<button data-isotope-value="number">number</button>
<button data-isotope-value="name">name</button>
<button data-isotope-value="symbol">symbol</button>
<button data-isotope-value="weight">weight</button>
<button data-isotope-value="category">category</button>
</div>
</div>
<div id="container">
<div class="element transition metal " data-symbol="Hg" data-category="transition">
<p class="number">80</p>
<h3 class="symbol">Hg</h3>
<h2 class="name">Mercury</h2>
<p class="weight">200.59</p>
</div>
<div class="element metalloid " data-symbol="Te" data-category="metalloid">
<p class="number">52</p>
<h3 class="symbol">Te</h3>
<h2 class="name">Tellurium</h2>
<p class="weight">127.6</p>
</div>
<div class="element post-transition metal " data-symbol="Bi" data-category="post-transition">
<p class="number">83</p>
<h3 class="symbol">Bi</h3>
<h2 class="name">Bismuth</h2>
<p class="weight">208.9804</p>
</div>
<div class="element transition metal " data-symbol="Cd" data-category="transition">
<p class="number">48</p>
<h3 class="symbol">Cd</h3>
<h2 class="name">Cadmium</h2>
<p class="weight">112.411</p>
</div>
<div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth">
<p class="number">20</p>
<h3 class="symbol">Ca</h3>
<h2 class="name">Calcium</h2>
<p class="weight">40.078</p>
</div>
<div class="element transition metal " data-symbol="Re" data-category="transition">
<p class="number">75</p>
<h3 class="symbol">Re</h3>
<h2 class="name">Rhenium</h2>
<p class="weight">186.207</p>
</div>
<div class="element post-transition metal " data-symbol="Tl" data-category="post-transition">
<p class="number">81</p>
<h3 class="symbol">Tl</h3>
<h2 class="name">Thallium</h2>
<p class="weight">204.3833</p>
</div>
<div class="element metalloid " data-symbol="Sb" data-category="metalloid">
<p class="number">51</p>
<h3 class="symbol">Sb</h3>
<h2 class="name">Antimony</h2>
<p class="weight">121.76</p>
</div>
<div class="element transition metal " data-symbol="Co" data-category="transition">
<p class="number">27</p>
<h3 class="symbol">Co</h3>
<h2 class="name">Cobalt</h2>
<p class="weight">58.933195</p>
</div>
<div class="element lanthanoid metal inner-transition " data-symbol="Lu" data-category="lanthanoid">
<p class="number">71</p>
<h3 class="symbol">Lu</h3>
<h2 class="name">Lutetium</h2>
<p class="weight">174.9668</p>
</div>
<div class="element noble-gas nonmetal " data-symbol="Ar" data-category="noble-gas">
<p class="number">18</p>
<h3 class="symbol">Ar</h3>
<h2 class="name">Argon</h2>
<p class="weight">39.948</p>
</div>
<div class="element alkali metal " data-symbol="Rb" data-category="alkali">
<p class="number">37</p>
<h3 class="symbol">Rb</h3>
<h2 class="name">Rubidium</h2>
<p class="weight">85.4678</p>
</div>
<div class="element other nonmetal " data-symbol="N" data-category="other">
<p class="number">7</p>
<h3 class="symbol">N</h3>
<h2 class="name">Nitrogen</h2>
<p class="weight">14.0067</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Np" data-category="actinoid">
<p class="number">93</p>
<h3 class="symbol">Np</h3>
<h2 class="name">Neptunium</h2>
<p class="weight">(237)</p>
</div>
<div class="element actinoid metal inner-transition " data-symbol="Ac" data-category="actinoid">
<p class="number">89</p>
<h3 class="symbol">Ac</h3>
<h2 class="name">Actinium</h2>
<p class="weight">(227)</p>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>

47
sandbox/browserify/main.js
Unescape View File

@ -0,0 +1,47 @@
var Isotope = window.Isotope = require('../../js/isotope');
var eventie = require('eventie');
var matchesSelector = require('desandro-matches-selector');
function getText( elem ) {
return elem.textContent || elem.innerText;
}
var iso = window.iso = new Isotope( '#container', {
layoutMode: 'fitRows',
transitionDuration: '0.8s',
cellsByRow: {
columnWidth: 130,
rowHeight: 140
},
getSortData: {
number: '.number parseInt',
symbol: '.symbol',
name: '.name',
category: '[data-category]',
weight: function( itemElem ) {
// remove parenthesis
return parseFloat( getText( itemElem.querySelector('.weight') ).replace( /[\(\)]/g, '') );
}
}
});
var options = document.querySelector('#options');
eventie.bind( options, 'click', function( event ) {
if ( !matchesSelector( event.target, 'button' ) ) {
return;
}
var key = event.target.parentNode.getAttribute('data-isotope-key');
var value = event.target.getAttribute('data-isotope-value');
if ( key === 'filter' && value === 'number-greater-than-50' ) {
value = function( elem ) {
var numberText = getText( elem.querySelector('.number') );
return parseInt( numberText, 10 ) > 40;
};
}
console.log( key, value );
iso.options[ key ] = value;
iso.arrange();
});
Write Preview
Loading…
Cancel
Save