Browse Source

src : move remove callback into removeContent

add add/remove button to remove demo

v1.5.15

Closes #139
pull/166/merge v1.5.15
David DeSandro 13 years ago
parent
commit
40b3232d8d
  1. 33
      _posts/demos/2011-12-22-removing.html
  2. 11
      jquery.isotope.js
  3. 4
      jquery.isotope.min.js

33
_posts/demos/2011-12-22-removing.html

@ -23,7 +23,10 @@ category: demos
<li><a href="#remove" data-option-value=".metalloid">metalloid</a></li> <li><a href="#remove" data-option-value=".metalloid">metalloid</a></li>
</ul> </ul>
<ul id="add-remove">
<li><a href="#add-remove">Add / remove</a></li>
</ul>
</section> <!-- #options --> </section> <!-- #options -->
<div id="container" class="variable-sizes clickable clearfix"> <div id="container" class="variable-sizes clickable clearfix">
@ -34,27 +37,43 @@ category: demos
<script src="../{{ site.jquery_js }}"></script> <script src="../{{ site.jquery_js }}"></script>
<script src="../{{ site.isotope_js }}"></script> <script src="../{{ site.isotope_js }}"></script>
<script src="../js/fake-element.js"></script>
<script> <script>
$(function(){ $(function(){
var $container = $('#container'); var $container = $('#container');
$container.isotope({ $container.isotope({
itemSelector : '.element' itemSelector : '.element'
}); });
$('#removable a').click(function(){ $('#removable a').click( function( jQEvent ) {
var selector = $(this).attr('data-option-value'); var selector = $(this).attr('data-option-value');
var $removable = $container.find( selector ); var $removable = $container.find( selector );
$container.isotope( 'remove', $removable ); $container.isotope( 'remove', $removable );
jQEvent.preventDefault();
}); });
$('#add-remove a').click( function( jQEvent ) {
var $newEls = $( fakeElement.getGroup() );
var $firstTwoElems = $container.data('isotope')
.$filteredAtoms.filter( function( i ) {
return i < 2;
});
$container
.isotope( 'insert', $newEls )
.isotope( 'remove', $firstTwoElems, function() {
// console.log('items removed')
});
jQEvent.preventDefault();
});
// remove item if clicked // remove item if clicked
$container.delegate( '.element', 'click', function(){ $container.delegate( '.element', 'click', function(){
$container.isotope( 'remove', $(this) ); $container.isotope( 'remove', $(this) );
}); });
}); });
</script> </script>

11
jquery.isotope.js

@ -1,5 +1,5 @@
/** /**
* Isotope v1.5.14 * Isotope v1.5.15
* An exquisite jQuery plugin for magical layouts * An exquisite jQuery plugin for magical layouts
* http://isotope.metafizzy.co * http://isotope.metafizzy.co
* *
@ -806,9 +806,13 @@
remove: function( $content, callback ) { remove: function( $content, callback ) {
// remove elements from Isotope instance in callback // remove elements from Isotope instance in callback
var instance = this; var instance = this;
// remove() as a callback, for after transition / animation
var removeContent = function() { var removeContent = function() {
instance.$allAtoms = instance.$allAtoms.not( $content ); instance.$allAtoms = instance.$allAtoms.not( $content );
$content.remove(); $content.remove();
if ( callback ) {
callback.call( this.element );
}
}; };
if ( $content.filter( ':not(.' + this.options.hiddenClass + ')' ).length ) { if ( $content.filter( ':not(.' + this.options.hiddenClass + ')' ).length ) {
@ -816,13 +820,10 @@
this.styleQueue.push({ $el: $content, style: this.options.hiddenStyle }); this.styleQueue.push({ $el: $content, style: this.options.hiddenStyle });
this.$filteredAtoms = this.$filteredAtoms.not( $content ); this.$filteredAtoms = this.$filteredAtoms.not( $content );
this._sort(); this._sort();
this.reLayout( removeContent, callback ); this.reLayout( removeContent );
} else { } else {
// remove it now // remove it now
removeContent(); removeContent();
if ( callback ) {
callback.call( this.element );
}
} }
}, },

4
jquery.isotope.min.js vendored

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save