For the past few days, I've been experimenting with integrating Shuffle.js into my cards within Bootstrap 4. My goal is to achieve a visually pleasing shuffling effect when searching/filtering these cards.
Below is the HTML structure and JavaScript code I am working with. You can also access the full code on JSFiddle.net.
class Card {
constructor(ref) {
this.hmi_ref = ref;
// Bootstrap: container type
this.BS = {}
this.BS.container = document.createElement('div');
this.BS.card = document.createElement('div');
this.BS.image = document.createElement('img');
this.BS.info = document.createElement('div');
this.BS.title = document.createElement('h4');
this.BS.link = document.createElement('a');
this.BS.card.appendChild(this.BS.link);
this.BS.link.appendChild(this.BS.image);
this.BS.card.appendChild(this.BS.title);
this.BS.container.appendChild(this.BS.card);
this.BS.container.className = 'col-4 mb-3';
this.BS.card.className = 'card h-100';
this.BS.image.className = 'card-img-top';
this.BS.title.className = 'card-title text-center align-middle';
}
add(name, image, page_link) {
this.BS.image.src = image;
this.BS.title.textContent = name;
this.BS.link.href = page_link;
let newNode = this.BS.container.cloneNode(true);
this.hmi_ref.appendChild(newNode);
}
}
let myCard = new Card( document.getElementById('card-space') );
[
{title: 'Vacanza studio Londra', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
{title: 'Vacanza studio Roma', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
{title: 'Vacanza studio Bangkok', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
{title: 'Vacanza studio Catania', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanze studio"},
{title: 'Vacanza studio Siracusa', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
{title: 'Vacanza studio Ragusa', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
{title: 'Vacanza studio Trapani', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
].map(e => myCard.add(e.title, e.img, e.link, e.category));
class Shuffler {
constructor(element) {
this.shuffle = new window.Shuffle(element, {
itemSelector: '.card',
sizer: element.querySelector('.sizer'),
});
document.getElementById('searchBox').addEventListener('keyup', this._handleSearchKeyup.bind(this));
}
/**
* Filter the shuffle instance by items with a title that matches the search input.
* @param {Event} evt Event object.
*/
_handleSearchKeyup(evt) {
const searchText = evt.target.value.toLowerCase();
this.shuffle.filter(element => {
console.log('filtering...');
const titleText = element.querySelector('.card-title').textContent.toLowerCase().trim();
return titleText.indexOf(searchText) !== -1;
});
}
}
window.onload = () => {
window.demo = new Shuffler(document.querySelector('#card-space'));
} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container pt-3">
<div class="row">
<div class="col">
<!-- Main column -->
<div class="row pt-4">
<div class="col-9">
<div id="card-space" class="row h-100">
<div class="col-1@sm sizer"></div>
</div>
</div>
<div class="col-3">
<div class="row">
<form class="form-inline" action="javascript:void(0);">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-search" aria-hidden="true"></i></div>
</div>
<input id="searchBox" class="form-control" type="search" placeholder="Cerca" aria-label="Cerca">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/shufflejs@5"></script>
<!-- jQuery first, then Popper.js and then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>One specific area where I'm encountering issues is the following:
this.shuffle.filter(element => {
const titleText = element.querySelector('.card-title').textContent.toLowerCase().trim();
return titleText.indexOf(searchText) !== -1;
});
I'm struggling to debug inside this portion of the code. Does anyone have suggestions or ideas for resolving this problem? Tackling the complexities of Shuffle.js has proven challenging, but the smoothness of the desired end effect makes it worth the effort.