Last active
May 8, 2019 07:47
-
-
Save kamlekar/dedab7f8cfd8a755dc581abf40bf164c to your computer and use it in GitHub Desktop.
Responsive cards
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body,html{ | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
.parent{ | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: space-between; | |
} | |
.card{ | |
box-shadow: inset 0px 0px 0px 1px red; | |
width: 150px; | |
height: 150px; | |
} | |
.card.dummy-card{ | |
visibility: hidden; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function responsiveCards(){ | |
var parentClass = '.parent'; | |
var cardClass = '.card'; | |
var dummyCardClass = '.dummy-card'; | |
var loadButtonClass = '.refresh-ly-cards'; | |
function fixCardsLayout(){ | |
var $cardParent = $(parentClass); | |
// remove already added dummy accounts | |
$cardParent.find( cardClass + dummyCardClass).remove(); | |
var $cards = $cardParent.find(cardClass); | |
var cardsCount = getNumberOfCards($cards); | |
var cardsInRow = getNumberOfCardsInRow($cards); | |
var numberOfMissingCardsInLastRow = getNumberOfMissingCardsInLastRow(cardsCount, cardsInRow); | |
if(numberOfMissingCardsInLastRow > 0){ | |
addDummyCardsToFixLayout($cardParent, numberOfMissingCardsInLastRow); | |
} | |
} | |
function getNumberOfCards($cards){ | |
// @TODO: check whether each card is hidden or not | |
return $cards.length; | |
} | |
function getNumberOfMissingCardsInLastRow(cardsCount, cardsInRow){ | |
var missingCardsCount = (cardsInRow - (cardsCount % cardsInRow)); | |
if(missingCardsCount === cardsCount){ | |
return 0; | |
} | |
return missingCardsCount; | |
} | |
function getNumberOfCardsInRow($cards){ | |
var obj = {"x": []}; // to cover the case when there are no cards | |
var offset = "x"; // the default dummy property key | |
$cards.each(function(){ | |
var $self = $(this); | |
offset = $self.offset().top; | |
if(!obj[offset]){ | |
obj[offset] = []; | |
} | |
obj[offset].push($self); | |
}); | |
var values = []; | |
for(var key in obj){ | |
values.push(obj[key].length); | |
} | |
return Math.max.apply(null, values); | |
} | |
function addDummyCardsToFixLayout($cardParent, count){ | |
var additionalClasses = $cardParent.attr('ly-card-class') || ""; | |
for(var i = 0; i < count; i++){ | |
$cardParent.append($('<div>', { | |
class: cardClass.substr(1) + " " + dummyCardClass.substr(1) + " " + additionalClasses | |
})); | |
} | |
} | |
$(document).on('click', loadButtonClass, fixCardsLayout); | |
$(window).on('load', fixCardsLayout); | |
$(window).on('resize', fixCardsLayout); | |
}()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment