Skip to content

Instantly share code, notes, and snippets.

@budparr

budparr/Isotope Issues with Combination Filters and Hash State (solved).markdown

Last active August 29, 2015 14:21
Show Gist options
  • Save budparr/348b3fa810dc298e36f4 to your computer and use it in GitHub Desktop.
Save budparr/348b3fa810dc298e36f4 to your computer and use it in GitHub Desktop.
Download ZIP
Isotope Issues with Combination Filters and Hash State (solved)
Raw
index.html
<div id="filters" class="filters">
<h5>Country</h5>
<div class="option-set button-group" data-filter-group="country">
<button class="button" data-filter=".mexico" data-label=" ‘Mexico’ ">Mexico</button>
<button class="button" data-filter=".china" data-label=" ‘China’ ">China</button>
<button class="button" data-filter=".egypt" data-label=" ‘Egypt’ ">Egypt</button>
<button class="button is-checked" data-filter="">any</button>
</div>
<hr />
<h5>Genre</h5>
<div class="option-set button-group" data-filter-group="genre">
<button class="button" data-filter=".fiction" data-label=" ‘Fiction’ ">Fiction</button>
<button class="button" data-filter=".nonfiction" data-label=" ‘Nonfiction’ ">Nonfiction</button>
<button class="button" data-filter=".poetry" data-label=" ‘Poetry’ ">Poetry</button>
<button class="button" data-filter=".graphic-fiction" data-label=" ‘Graphic Fiction’ ">Graphic Fiction</button>
<button class="button" data-filter=".graphic-nonfiction" data-label=" ‘Graphic Nonfiction’ ">Graphic Nonfiction</button>
<button class="button is-checked" data-filter="">any</button>
</div>
<hr />
<h5>Themes</h5>
<div class="option-set button-group" data-filter-group="theme">
<button class="button" data-filter=".mothers" data-label=" ‘Mothers’ ">Mothers</button>
<button class="button" data-filter=".leaving-home" data-label=" ‘Leaving Home’ ">Leaving Home</button>
<button class="button" data-filter=".drug-wars" data-label=" ‘Drug Wars’ ">Drug Wars</button>
<button class="button" data-filter=".revolution" data-label=" ‘Revolution’ ">Revolution</button>
<button class="button" data-filter=".friendship" data-label=" ‘Friendship’ ">Friendship</button>
<button class="button" data-filter=".love-stories" data-label=" ‘Love Stories’ ">Love Stories</button>
<button class="button" data-filter=".fathers" data-label=" ‘Fathers’ ">Fathers</button>
<button class="button" data-filter=".taboo-topics" data-label=" ‘Taboo Topics’ ">Taboo Topics</button>
<button class="button is-checked" data-filter="">any</button>
</div>
</div>
<ul id="container" class="grid filtered-list list-filter list">
<li class="item poetry friendship egypt">
<a href="http://wwb-campus.dev/article/amina">
<h6>
Poetry from Egypt
</h6>
<div>
<h5>
<strong>
Friendship
</strong>
</h5>
<h2>
Amina
</h2>
<small>
by Iman Mersal
</small>
</div>
<div class="quote">
<p>
My perfect friend,
<br style="box-sizing: inherit; color: rgb(39, 39, 39); font-family: 'Open Sans', Roboto, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; font-size: 16px; line-height: 24px;">why don't you leave now.
<br>
</p>
</div>
</a>
</li>
<li class="item poetry revolution egypt">
<a href="http://wwb-campus.dev/article/sometimes-wisdom-possesses-me">
<h6>
Poetry from Egypt
</h6>
<div>
<h5>
<strong>
Revolution
</strong>
</h5>
<h2>
Sometimes Wisdom Possesses Me
</h2>
<small>
by Iman Mersal
</small>
</div>
<div class="quote">
One day wisdom will possess me
<br style="line-height: 22.3999996185303px;">and I will not go to the party.
</div>
</a>
</li>
<li class="item nonfiction taboo-topics china">
<a href="http://wwb-campus.dev/article/from-prison-memoirs">
<h6>
Nonfiction from China
</h6>
<div>
<h5>
<strong>
Taboo Topics
</strong>
</h5>
<h2>
Prison Memoirs
</h2>
<small>
by Wang Dan
</small>
</div>
<div class="quote">
"If you happen to be behind bars, you should keep talking..."
</div>
</a>
</li>
<li class="item nonfiction taboo-topics china">
<a href="http://wwb-campus.dev/article/an-interview-with-yan-lianke">
<h6>
Nonfiction from China
</h6>
<div>
<h5>
<strong>
Taboo Topics
</strong>
</h5>
<h2>
An Interview with Yan Lianke
</h2>
<small>
by Chenxin Jiang
</small>
</div>
<div class="quote">
...the most chilling thing is the way we censor ourselves.
<br>
</div>
</a>
</li>
<li class="item fiction fathers china">
<a href="http://wwb-campus.dev/article/timid-as-a-mouse">
<h6>
Fiction from China
</h6>
<div>
<h5>
<strong>
Fathers
</strong>
</h5>
<h2>
Timid as a Mouse
</h2>
<small>
by Yu Hua
</small>
</div>
<div class="quote">
"Those who are afraid of tigers, raise your hands."
</div>
</a>
</li>
<li class="item graphic-fiction revolution egypt">
<a href="http://wwb-campus.dev/article/from-proud-beggars">
<h6>
Graphic Fiction from Egypt
</h6>
<div>
<h5>
<strong>
Revolution
</strong>
</h5>
<h2>
Proud Beggars
</h2>
<small>
by Albert Cossery and Golo
</small>
</div>
<div class="quote">
<p>
What does a man need to live? A bit of bread is enough.&nbsp;
</p>
</div>
</a>
</li>
<li class="item fiction love-stories china">
<a href="http://wwb-campus.dev/article/the-old-cicada">
<h6>
Fiction from China
</h6>
<div>
<h5>
<strong>
Love Stories
</strong>
</h5>
<h2>
The Old Cicada
</h2>
<small>
by Can Xue
</small>
</div>
<div class="quote">
“Who is the spider? Isn't it simply me . . . ?"
</div>
</a>
</li>
<li class="item fiction fathers china">
<a href="http://wwb-campus.dev/article/appendix">
<h6>
Fiction from China
</h6>
<div>
<h5>
<strong>
Fathers
</strong>
</h5>
<h2>
Appendix
</h2>
<small>
by Yu Hua
</small>
</div>
<div class="quote">
My father used to be a surgeon. He was strong and healthy, and talked in a resonant voice.
</div>
</a>
</li>
<li class="item fiction love-stories china">
<a href="http://wwb-campus.dev/article/appointment-in-k-city">
<h6>
Fiction from China
</h6>
<div>
<h5>
<strong>
Love Stories
</strong>
</h5>
<h2>
Appointment in K City
</h2>
<small>
by Li Xiao
</small>
</div>
<div class="quote">
"I know all the tricks the likes of you will use to get your hands on a girl. You always begin with a recital of woes and an outpouring of grief…"
</div>
</a>
</li>
<li class="item graphic-fiction friendship egypt">
<a href="http://wwb-campus.dev/article/the-last-of-the-bunch">
<h6>
Graphic Fiction from Egypt
</h6>
<div>
<h5>
<strong>
Friendship
</strong>
</h5>
<h2>
The Last of the Bunch
</h2>
<small>
by Migo Rolzz
</small>
</div>
<div class="quote">
<p>
You're young and I don't want my feelings to get hurt!&nbsp;
</p>
</div>
</a>
</li>
<li class="item nonfiction taboo-topics china">
<a href="http://wwb-campus.dev/article/an-interview-with-wu-wenjian-1">
<h6>
Nonfiction from China
</h6>
<div>
<h5>
<strong>
Taboo Topics
</strong>
</h5>
<h2>
An Interview with Wu Wenjian
</h2>
<small>
by Liao Yiwu
</small>
</div>
<div class="quote">
I was nobody, like a piece of sesame in a big pot of soup.
</div>
</a>
</li>
<li class="item fiction friendship egypt">
<a href="http://wwb-campus.dev/article/the-veiler-of-all-deeds">
<h6>
Fiction from Egypt
</h6>
<div>
<h5>
<strong>
Friendship
</strong>
</h5>
<h2>
The Veiler of All Deeds
</h2>
<small>
by Hamdi Abu Golayyel
</small>
</div>
<div class="quote">
<p>
When Abu Gamal revealed Shaykh Hasan's secret to the residents of Number 36...
</p>
</div>
</a>
</li>
<li class="item fiction love-stories china">
<a href="http://wwb-campus.dev/article/loves-labor">
<h6>
Fiction from China
</h6>
<div>
<h5>
<strong>
Love Stories
</strong>
</h5>
<h2>
Love’s Labor
</h2>
<small>
by Ye Mi
</small>
</div>
<div class="quote">
"You noticed the way she came over, her chest out, eyes narrowed? She's interested."
</div>
</a>
</li>
<li class="item nonfiction drug-wars mexico">
<a href="http://wwb-campus.dev/article/violence-and-drug-trafficking-in-mexico">
<h6>
Nonfiction from Mexico
</h6>
<div>
<h5>
<strong>
Drug Wars
</strong>
</h5>
<h2>
Violence and Drug-Trafficking in Mexico
</h2>
<small>
by Juan Villoro
</small>
</div>
<div class="quote">
<p>
In Mexico, people will pay up to $70,000 dollars for a license to hunt and kill a bighorn sheep. Killing a man is much cheaper...
</p>
</div>
</a>
</li>
<li class="item fiction mothers egypt">
<a href="http://wwb-campus.dev/article/mrs.-saniyas-holiday">
<h6>
Fiction from Egypt
</h6>
<div>
<h5>
<strong>
Mothers
</strong>
</h5>
<h2>
Mrs. Saniya&#039;s Holiday
</h2>
<small>
by Na’am al-Baz
</small>
</div>
<div class="quote">
<p>
"Forget the admirer, Saniya. This guy will not take care of you."
</p>
</div>
</a>
</li>
<li class="item nonfiction leaving-home egypt">
<a href="http://wwb-campus.dev/article/memories-of-chernobyl">
<h6>
Nonfiction from Egypt
</h6>
<div>
<h5>
<strong>
Leaving Home
</strong>
</h5>
<h2>
Memories of Chernobyl
</h2>
<small>
by Mohamed Makhzangi
</small>
</div>
<div class="quote">
<p>
The entire city began to wash itself ceaselessly...
<br>
</p>
</div>
</a>
</li>
<li class="item poetry love-stories china">
<a href="http://wwb-campus.dev/article/poem-to-the-tune-pure-peace-by-li-bai">
<h6>
Poetry from China
</h6>
<div>
<h5>
<strong>
Love Stories
</strong>
</h5>
<h2>
Poem to the Tune &quot;Pure Peace&quot;
</h2>
<small>
by Li Bai
</small>
</div>
<div class="quote">
<p>
A cloud is her dress...
<br>
</p>
</div>
</a>
</li>
<li class="item nonfiction drug-wars mexico">
<a href="http://wwb-campus.dev/article/the-mystery-of-the-parakeet-the-rooster-and-the-nanny-goat">
<h6>
Nonfiction from Mexico
</h6>
<div>
<h5>
<strong>
Drug Wars
</strong>
</h5>
<h2>
The Mystery of the Parakeet, the Rooster, and the Nanny Goat
</h2>
<small>
by Fabrizio Mejía Madrid
</small>
</div>
<div class="quote">
<p>
The parakeet is cocaine, the rooster is the marijuana and the nanny goat is an AK-47 assault rifle.
</p>
</div>
</a>
</li>
<li class="item graphic-fiction leaving-home egypt">
<a href="http://wwb-campus.dev/article/the-apartment-in-bab-el-louk">
<h6>
Graphic Fiction from Egypt
</h6>
<div>
<h5>
<strong>
Leaving Home
</strong>
</h5>
<h2>
The Apartment in Bab el-Louk
</h2>
<small>
by Donia Maher and Ganzeer
</small>
</div>
<div class="quote">
<p>
Outside your window, Cairo's nooks and crannies are lonely and forsaken, like a deserted crime scene.
</p>
</div>
</a>
</li>
<li class="item fiction taboo-topics china">
<a href="http://wwb-campus.dev/article/death-fugue">
<h6>
Fiction from China
</h6>
<div>
<h5>
<strong>
Taboo Topics
</strong>
</h5>
<h2>
Death Fugue
</h2>
<small>
by Sheng Keyi
</small>
</div>
<div class="quote">
<p>
How could anyone separate love from lust, any more than one could separate the flavor of chocolate out of chocolate ice cream?
<br>
</p>
</div>
</a>
</li>
<li class="item graphic-nonfiction revolution egypt">
<a href="http://wwb-campus.dev/article/two-million-people-in-the-square">
<h6>
Graphic Nonfiction from Egypt
</h6>
<div>
<h5>
<strong>
Revolution
</strong>
</h5>
<h2>
Two Million People in the Square
</h2>
<small>
by Magdy El Shafee
</small>
</div>
<div class="quote">
<p>
We're the ones who overturned the riot police trucks.
</p>
</div>
</a>
</li>
<li class="item nonfiction taboo-topics china">
<a href="http://wwb-campus.dev/article/this-country-must-break-apart">
<h6>
Nonfiction from China
</h6>
<div>
<h5>
<strong>
Taboo Topics
</strong>
</h5>
<h2>
This Country Must Break Apart
</h2>
<small>
by Liao Yiwu
</small>
</div>
<div class="quote">
<p>
We are no longer poets; we have become witnesses of history.
</p>
</div>
</a>
</li>
<li class="item fiction mothers egypt">
<a href="http://wwb-campus.dev/article/its-a-chick-not-a-dog">
<h6>
Fiction from Egypt
</h6>
<div>
<h5>
<strong>
Mothers
</strong>
</h5>
<h2>
It’s a Chick, Not a Dog
</h2>
<small>
by Jar al-Nabi al-Hilw
</small>
</div>
<div class="quote">
<p>
My mother knew he was walking after her. Almost certainly she knew. Do you want me to tell you why?
</p>
</div>
</a>
</li>
<li class="item nonfiction taboo-topics china">
<a href="http://wwb-campus.dev/article/the-story-of-a-homosexual-an-interview-with-ni-dongxue">
<h6>
Nonfiction from China
</h6>
<div>
<h5>
<strong>
Taboo Topics
</strong>
</h5>
<h2>
The Story of a Homosexual: An Interview with Ni Dongxue
</h2>
<small>
by Liao Yiwu
</small>
</div>
<div class="quote">
<p>
Just hold my hands tightly. I won't force you to kiss me or do anything.
</p>
</div>
</a>
</li>
<li class="item poetry love-stories china">
<a href="http://wwb-campus.dev/article/poems-for-parting">
<h6>
Poetry from China
</h6>
<div>
<h5>
<strong>
Love Stories
</strong>
</h5>
<h2>
Poems for Parting
</h2>
<small>
by Du Mu
</small>
</div>
<div class="quote">
<p>
Too much love
<br> somehow became
<br> no love at all
</p>
</div>
</a>
</li>
<li class="item poetry leaving-home mexico">
<a href="http://wwb-campus.dev/article/marías-mazahuas">
<h6>
Poetry from Mexico
</h6>
<div>
<h5>
<strong>
Leaving Home
</strong>
</h5>
<h2>
Marías Mazahuas
</h2>
<small>
by Fausto Guadarrama López
</small>
</div>
<div class="quote">
<p>
Where do you go, "Marías," where do you go?
<br>
</p>
<br>
</div>
</a>
</li>
<li class="item poetry leaving-home egypt">
<a href="http://wwb-campus.dev/article/things-elude-me">
<h6>
Poetry from Egypt
</h6>
<div>
<h5>
<strong>
Leaving Home
</strong>
</h5>
<h2>
Things Elude Me
</h2>
<small>
by Iman Mersal
</small>
</div>
<div class="quote">
<p>
One day I will pass by
<br> the house that used to be my home...
</p>
</div>
</a>
</li>
<li class="item graphic-fiction leaving-home egypt">
<a href="http://wwb-campus.dev/article/the-pharaohs-of-egypt">
<h6>
Graphic Fiction from Egypt
</h6>
<div>
<h5>
<strong>
Leaving Home
</strong>
</h5>
<h2>
The Pharaohs of Egypt
</h2>
<small>
by Florent Ruppert and Jérôme Mulot
</small>
</div>
<div class="quote">
<p>
"This way over there, you stupid savage."
</p>
</div>
</a>
</li>
<li class="item poetry fathers china">
<a href="http://wwb-campus.dev/article/two-or-three-things-from-the-past">
<h6>
Poetry from China
</h6>
<div>
<h5>
<strong>
Fathers
</strong>
</h5>
<h2>
Two or Three Things from the Past
</h2>
<small>
by Yu Jian
</small>
</div>
<div class="quote">
<p>
He stood on the side watching everyone play...
</p>
</div>
</a>
</li>
<li class="item poetry drug-wars mexico">
<a href="http://wwb-campus.dev/article/sleepless-homeland">
<h6>
Poetry from Mexico
</h6>
<div>
<h5>
<strong>
Drug Wars
</strong>
</h5>
<h2>
Sleepless Homeland
</h2>
<small>
by Carmen Boullosa
</small>
</div>
<div class="quote">
<p>
Did we lose you in a game of dice?...
</p>
</div>
</a>
</li>
<li class="item fiction leaving-home egypt">
<a href="http://wwb-campus.dev/article/the-guest">
<h6>
Fiction from Egypt
</h6>
<div>
<h5>
<strong>
Leaving Home
</strong>
</h5>
<h2>
The Guest
</h2>
<small>
by Miral Al-Tahawy
</small>
</div>
<div class="quote">
<p>
She undid the dirty belt from her waist so that he could look upon the body that was like a piece of smooth white cheese.
</p>
</div>
</a>
</li>
<li class="item graphic-fiction love-stories china">
<a href="http://wwb-campus.dev/article/sharing">
<h6>
Graphic Fiction from China
</h6>
<div>
<h5>
<strong>
Love Stories
</strong>
</h5>
<h2>
Sharing
</h2>
<small>
by Duncan Jepson and Xie Peng
</small>
</div>
<div class="quote">
<p>
When I first came to the city, I watched the people fall in love.
</p>
</div>
</a>
</li>
<li class="item fiction leaving-home mexico">
<a href="http://wwb-campus.dev/article/a-failed-journey">
<h6>
Fiction from Mexico
</h6>
<div>
<h5>
<strong>
Leaving Home
</strong>
</h5>
<h2>
A Failed Journey
</h2>
<small>
by Aura Estrada
</small>
</div>
<div class="quote">
<p>
They warned her that one more offense against good behavior and the promised trip to the promised land (the United States) would be cancelled...
</p>
</div>
</a>
</li>
<li class="item poetry mothers mexico">
<a href="http://wwb-campus.dev/article/nothing-remains-empty">
<h6>
Poetry from Mexico
</h6>
<div>
<h5>
<strong>
Mothers
</strong>
</h5>
<h2>
Nothing Remains Empty
</h2>
<small>
by Juan Gregorio Regino
</small>
</div>
<div class="quote">
<p>
There is a place in the Universe
<br> where the memory of time
<br> is recorded.
<br>
</p>
</div>
</a>
</li>
<li class="item poetry drug-wars mexico">
<a href="http://wwb-campus.dev/article/notes-on-a-zombie-cataclysm">
<h6>
Poetry from Mexico
</h6>
<div>
<h5>
<strong>
Drug Wars
</strong>
</h5>
<h2>
Notes on a Zombie Cataclysm
</h2>
<small>
by Luis Felipe Fabre
</small>
</div>
<div class="quote">
<p>
Because things
<br> are turning weird: because they found
<br> just the arm...
</p>
</div>
</a>
</li>
<li class="item nonfiction mothers mexico">
<a href="http://wwb-campus.dev/article/my-madre-pure-as-cumulous-clouds">
<h6>
Nonfiction from Mexico
</h6>
<div>
<h5>
<strong>
Mothers
</strong>
</h5>
<h2>
My Madre, Pure as Cumulous Clouds
</h2>
<small>
by Liza Bakewell
</small>
</div>
<div class="quote">
<p>
"It all begins with this.
<em>
Madres
</em> are pure and perfect. In Mexico."
</p>
</div>
</a>
</li>
<li class="item poetry mothers mexico">
<a href="http://wwb-campus.dev/article/purépecha-mother">
<h6>
Poetry from Mexico
</h6>
<div>
<h5>
<strong>
Mothers
</strong>
</h5>
<h2>
Purépecha Mother
</h2>
<small>
by Gilberto Jerónimo Mateo
</small>
</div>
<div class="quote">
<p>
She is not a queen.
<br> Hungry, early in the morning she goes for firewood...
</p>
</div>
</a>
</li>
</ul>
Raw
script.js
// external js: isotope.pkgd.js
$(document).ready(function() {
function getHashFilter() {
var hash = location.hash;
// get filter=filterName
var matches = location.hash.match(/filter=([^&]+)/i);
var hashFilter = matches && matches[1];
return hashFilter && decodeURIComponent(hashFilter);
}
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.item'
});
// store filter for each group
var filters = {};
$('.filters').on('click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[filterGroup] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues(filters);
// set filter for Isotope
///////////////////////////////////$grid.isotope({ filter: filterValue });
location.hash = 'filter=' + encodeURIComponent(filterValue);
});
// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
var isIsotopeInit = false;
function onHashchange() {
var hashFilter = getHashFilter();
if (!hashFilter && isIsotopeInit) {
return;
}
// filter isotope
$grid.isotope({
itemSelector: '.item',
filter: hashFilter
});
// set selected class on button
// only on page load, if isotope hasn't inited yet
if (!isIsotopeInit && hashFilter) {
var buttonsFilterSelector = getButtonsFilterSelector(hashFilter);
// trigger click to make it selected and act normal
// sets correct filter state
$('.filters').find(buttonsFilterSelector).trigger('click');
}
isIsotopeInit = true;
}
$(window).on('hashchange', onHashchange);
// trigger event handler to init Isotope
onHashchange();
});
// flatten object by concatting values
function concatValues(obj) {
var value = '';
for (var prop in obj) {
value += obj[prop];
}
return value;
}
// get filter selectors from hash
function getButtonsFilterSelector(hashFilter){
var filters = hashFilter.substring(1).split(".");
var joinedFilters = filters.join('"], [data-filter=".');
var selector = '[data-filter=".' + joinedFilters + '"]';
return selector;
}
////////////////////////////////////////////////////
Raw
style.css
.is-checked{
background-image: linear-gradient(#f4f4f4, #f8971d) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment