var app = angular.module('plunker', [])
.directive('container', ['$rootScope', function($rootScope){
return{
restrict:'E',
//This controller allows the sibling copies of the car directive to communicate
controller: function () {
this.former = null;
this.formerContainer = null;
this.formerID= null;
this.formerIndex= -1;
}
}
}])
.directive('card', ['$compile', '$animate', function ($compile, $animate) {
return {
restrict: 'E',
scope: {
info: '=',
index: '='
},
require: '^container',
templateUrl: 'card.html',
link: function (scope, element, attrs, controller) {
element.on('click', function (event) {
var ID = scope.info.ID;
//test if you just clicked on what is already open
if (controller.formerID == ID)
{
//If already open, Close it and stop
$animate.leave(controller.formerContainer);
controller.formerID = controller.formerContainer = controller.former = controller.formerIndex = null;
return;
}
//Time to start locating the location of the element on the grid of cards
var cursor = element,
parent = cursor.parent(),
isBeginning = false,
isEnd = false;
while (cursor && !isBeginning){
var prev = cursor.prev();
var prevPosition = prev.position();
if (!prevPosition || prevPosition.left > cursor.position().left || prev.attr('id') == 'focus') {
isBeginning = true;
}
else {
cursor = prev;
}
}
var row = []
do {
row.push(cursor);
var next = cursor.next();
var nextPosition = next.position();
if (nextPosition || nextPosition.left < cursor.position().left || next.attr('id') == 'focus') {
isEnd = true;
}
if (!isEnd) {
cursor = next;
}
}
while (!isEnd);
//now that row si populated, we know how long each row is. since we already have the index of our element, we know which row it is on now
var rowIndex = Math.floor(scope.index/row.length);
//If there is already another info box that is open...
if (controller.former){
//Is it on the same row?
if (rowIndex != controller.formerIndex) {
//If not, close out its containing box so we can get ready to open a new one on our row
$animate.leave(controller.formerContainer);
controller.formerContainer = controller.former = null;
}
else {
//If it is on the same drow we just need to gut the data, not close the box
$animate.leave(controller.former);
}
}
controller.formerIndex = rowIndex;
controller.formerID = ID;
var isNew = !controller.formerContainer;
if (isNew) {
controller.formerContainer = angular.element('<div class="focus"></div>');
row[0].before(controller.formerContainer);
$animate.addClass(controller.formerContainer, '.ng-hide');
}
controller.former = angular.element('<div ng-include="\'focus.html\'"></div>');
$compile(controller.former)(scope);
scope.$apply();
$animate.enter(controller.former, controller.formerContainer);
if (!isNew) {
$animate.removeClass(controller.formerContainer, '.ng-hide');
}
})
}
}
}])
.controller('MainCtrl', function($scope) {
$scope.data = {
list: [
{"Name": "Rudyard", "Address": "178-7996 Eget Rd.", "Email": "augue.eu.tempor@tellus.net", "City": "Tywyn", "ID": 1},
{"Name": "Amaya", "Address": "7345 Donec Avenue", "Email": "Quisque.ornare@amet.ca", "City": "Vertou", "ID": 2},
{"Name": "Mara", "Address": "P.O. Box 598, 5549 Nec, Rd.", "Email": "mattis@eget.co.uk", "City": "Bastia Umbra", "ID": 3},
{"Name": "Jesse", "Address": "896-5829 Nulla Street", "Email": "convallis.erat@id.edu", "City": "Habay", "ID": 4},
{"Name": "Trevor", "Address": "612-6140 Sed Av.", "Email": "mi.ac.mattis@posuerecubilia.com", "City": "Waterbury", "ID": 5},
{"Name": "Carl", "Address": "816-8404 Purus Rd.", "Email": "neque.Nullam.ut@loremsemperauctor.co.uk", "City": "Lockerbie", "ID": 6},
{"Name": "Joy", "Address": "298-6228 Non Avenue", "Email": "neque@nonbibendumsed.co.uk", "City": "Giove", "ID": 7},
{"Name": "Amber", "Address": "Ap #319-2518 Libero Rd.", "Email": "eu.accumsan@fermentum.ca", "City": "Parramatta", "ID": 8},
{"Name": "Alexis", "Address": "P.O. Box 241, 710 Non, Rd.", "Email": "eget@gravidasitamet.co.uk", "City": "Pisa", "ID": 9},
{"Name": "Cruz", "Address": "Ap #507-3985 Mi Rd.", "Email": "sit.amet.massa@vitae.co.uk", "City": "Meerle", "ID": 10},
{"Name": "Ignatius", "Address": "5921 Nibh. Street", "Email": "Nunc.mauris.Morbi@Uttincidunt.net", "City": "Montague", "ID": 11},
{"Name": "Farrah", "Address": "967-6051 Dolor Avenue", "Email": "tincidunt.adipiscing.Mauris@ipsumnunc.com", "City": "Tuscaloosa", "ID": 12},
{"Name": "Xavier", "Address": "1091 Nunc. St.", "Email": "aliquet.lobortis@enimdiam.org", "City": "Hallaar", "ID": 13},
{"Name": "Nina", "Address": "Ap #995-3454 Magnis St.", "Email": "vel@variusultrices.net", "City": "Enterprise", "ID": 14},
{"Name": "Hamish", "Address": "880-3172 Arcu. Road", "Email": "sociis.natoque.penatibus@vitae.edu", "City": "Lot", "ID": 15},
{"Name": "Alexis", "Address": "Ap #569-7112 Justo St.", "Email": "Praesent.eu@in.edu", "City": "Dumfries", "ID": 16},
{"Name": "Rosalyn", "Address": "2692 Nulla Ave", "Email": "vehicula@cursusnonegestas.com", "City": "Allentown", "ID": 17},
{"Name": "Quamar", "Address": "965-4622 Massa Rd.", "Email": "venenatis.lacus.Etiam@arcuimperdietullamcorper.ca", "City": "Sciacca", "ID": 18},
{"Name": "Scott", "Address": "280 Gravida St.", "Email": "ipsum.dolor@feugiat.org", "City": "Newark", "ID": 19},
{"Name": "Yael", "Address": "1604 Enim Av.", "Email": "pellentesque.eget@magnaCras.org", "City": "Christchurch", "ID": 20},
{"Name": "Sierra", "Address": "591-8109 Aliquam, Ave", "Email": "ornare.tortor.at@maurissapiencursus.com", "City": "Glossop", "ID": 21},
{"Name": "Heidi", "Address": "Ap #714-1251 Sociis Avenue", "Email": "faucibus.Morbi@Proin.com", "City": "Saintes", "ID": 22},
{"Name": "Calista", "Address": "P.O. Box 617, 1314 Dolor St.", "Email": "lacus@magnased.net", "City": "Carmarthen", "ID": 23},
{"Name": "Walter", "Address": "4853 Est. Rd.", "Email": "diam.nunc.ullamcorper@vulputateveliteu.edu", "City": "Masullas", "ID": 24},
{"Name": "Davis", "Address": "Ap #873-1363 Sapien, Street", "Email": "Morbi.quis.urna@etrisusQuisque.edu", "City": "Rosolini", "ID": 25},
{"Name": "Naida", "Address": "828-5169 Commodo Avenue", "Email": "varius@augueeu.co.uk", "City": "Strausberg", "ID": 26},
{"Name": "Callie", "Address": "Ap #267-3822 Eu Street", "Email": "at@malesuadafringillaest.ca", "City": "Candidoni", "ID": 27},
{"Name": "Bo", "Address": "Ap #150-2902 Augue, Rd.", "Email": "velit.justo.nec@vulputate.org", "City": "Smoky Lake", "ID": 28},
{"Name": "Duncan", "Address": "Ap #479-6987 Metus Road", "Email": "mauris.a.nunc@gravida.org", "City": "Cabo de Santo Agostinho", "ID": 29},
{"Name": "Althea", "Address": "P.O. Box 232, 3252 Iaculis Road", "Email": "est.arcu.ac@eleifend.ca", "City": "Reana del Rojale", "ID": 30},
{"Name": "Nigel", "Address": "379-1901 Lacus. St.", "Email": "ac@Suspendisse.ca", "City": "Irricana", "ID": 31},
{"Name": "Cathleen", "Address": "P.O. Box 415, 7565 Etiam St.", "Email": "sem.ut@Vivamus.org", "City": "Fréjus", "ID": 32},
{"Name": "Eagan", "Address": "1792 Accumsan Street", "Email": "commodo.auctor.velit@metus.com", "City": "Grantham", "ID": 33},
{"Name": "Leroy", "Address": "P.O. Box 483, 1373 Sed, Road", "Email": "sem@etpede.co.uk", "City": "João Pessoa", "ID": 34},
{"Name": "Fletcher", "Address": "P.O. Box 806, 6168 Ac Av.", "Email": "Cras@dapibus.edu", "City": "Roermond", "ID": 35},
{"Name": "Kristen", "Address": "340-8334 Mauris Av.", "Email": "euismod@inmagnaPhasellus.ca", "City": "Mazy", "ID": 36},
{"Name": "Vivien", "Address": "8282 Ante Rd.", "Email": "at.arcu@Donecdignissim.com", "City": "Aquila d'Arroscia", "ID": 37},
{"Name": "Emma", "Address": "6593 Bibendum Ave", "Email": "erat.in@luctusaliquetodio.co.uk", "City": "Kitchener", "ID": 38},
{"Name": "Casey", "Address": "P.O. Box 471, 1314 Faucibus Avenue", "Email": "dictum.Proin.eget@dui.edu", "City": "Zandhoven", "ID": 39},
{"Name": "Idona", "Address": "Ap #221-510 Pede. Av.", "Email": "in@mollisvitaeposuere.edu", "City": "Ravensburg", "ID": 40},
{"Name": "Aiko", "Address": "1296 Vulputate, St.", "Email": "sociosqu.ad.litora@duinecurna.co.uk", "City": "Heusden", "ID": 41},
{"Name": "Amy", "Address": "P.O. Box 495, 1669 Semper St.", "Email": "eleifend.vitae@quis.ca", "City": "Huntsville", "ID": 42},
{"Name": "Zia", "Address": "5570 Justo. Rd.", "Email": "orci@Nunccommodoauctor.co.uk", "City": "Balvano", "ID": 43},
{"Name": "Zenia", "Address": "3231 Pharetra, St.", "Email": "sollicitudin.orci.sem@orci.com", "City": "Rothesay", "ID": 44},
{"Name": "Shelly", "Address": "P.O. Box 506, 9475 In Avenue", "Email": "ultrices.Vivamus.rhoncus@nonummyipsum.com", "City": "Malgesso", "ID": 45},
{"Name": "Alfonso", "Address": "482-5171 Duis Rd.", "Email": "id.mollis@ametconsectetueradipiscing.ca", "City": "Beho", "ID": 46},
{"Name": "Brody", "Address": "3502 Curabitur Rd.", "Email": "fringilla.est.Mauris@tortor.net", "City": "Schwerin", "ID": 47},
{"Name": "Nadine", "Address": "638-3375 Egestas St.", "Email": "Cras@neceuismod.org", "City": "Chambord", "ID": 48},
{"Name": "Camille", "Address": "Ap #691-114 Sit Rd.", "Email": "metus.Aenean.sed@iaculis.org", "City": "Alness", "ID": 49},
{"Name": "Constance", "Address": "764-1751 Consectetuer Ave", "Email": "adipiscing.Mauris@vitae.edu", "City": "Kalken", "ID": 50},
{"Name": "Ainsley", "Address": "564-2473 Facilisis Ave", "Email": "egestas.Aliquam.nec@Fuscealiquamenim.org", "City": "Dilbeek", "ID": 51},
{"Name": "Malik", "Address": "669-2667 Congue St.", "Email": "est.arcu@nonvestibulum.edu", "City": "New Plymouth", "ID": 52},
{"Name": "Leandra", "Address": "Ap #173-5149 Enim, Av.", "Email": "facilisis.lorem.tristique@luctuslobortisClass.org", "City": "Mandurah", "ID": 53},
{"Name": "Dawn", "Address": "203-1658 Parturient Street", "Email": "Sed.congue@eleifendnondapibus.co.uk", "City": "Teltow", "ID": 54},
{"Name": "Melanie", "Address": "Ap #515-9828 Non Rd.", "Email": "est@dolorsitamet.org", "City": "Sierning", "ID": 55},
{"Name": "Zena", "Address": "563-5947 Erat Rd.", "Email": "nibh.dolor@Cras.co.uk", "City": "Blieskastel", "ID": 56},
{"Name": "Ashely", "Address": "324-8207 Integer Ave", "Email": "vel@Utsagittis.edu", "City": "Tewkesbury", "ID": 57},
{"Name": "Maggy", "Address": "Ap #431-3140 Quisque St.", "Email": "convallis@Cumsociisnatoque.com", "City": "Price", "ID": 58},
{"Name": "Imani", "Address": "2453 Lacinia St.", "Email": "nec.quam.Curabitur@utmiDuis.org", "City": "Longano", "ID": 59},
{"Name": "Colleen", "Address": "6043 In Road", "Email": "et.ultrices@ullamcorpermagnaSed.org", "City": "Alix", "ID": 60},
{"Name": "Quin", "Address": "7041 Metus Av.", "Email": "In.tincidunt.congue@arcu.co.uk", "City": "Sepino", "ID": 61},
{"Name": "Mercedes", "Address": "Ap #272-6554 Eget Rd.", "Email": "arcu.Aliquam@ipsumCurabitur.org", "City": "Moorsele", "ID": 62},
{"Name": "Colette", "Address": "P.O. Box 425, 2977 Sodales. St.", "Email": "amet@enim.net", "City": "Camaragibe", "ID": 63},
{"Name": "Mona", "Address": "Ap #990-5383 Quam Rd.", "Email": "eu.odio.tristique@montesnasceturridiculus.org", "City": "Kuringen", "ID": 64},
{"Name": "Mohammad", "Address": "312-8460 Aliquam Road", "Email": "magnis.dis@atpede.edu", "City": "Ponte San Nicolò", "ID": 65},
{"Name": "Dakota", "Address": "540-7286 Vivamus Street", "Email": "malesuada@lacus.edu", "City": "Waitara", "ID": 66},
{"Name": "Calista", "Address": "6244 Volutpat. St.", "Email": "diam.eu@Vestibulumanteipsum.ca", "City": "Orange", "ID": 67},
{"Name": "Indigo", "Address": "3744 Luctus Rd.", "Email": "at.lacus.Quisque@Curabiturconsequat.co.uk", "City": "Barranca", "ID": 68},
{"Name": "Porter", "Address": "Ap #508-1416 Nunc Avenue", "Email": "et.ultrices@ligulatortordictum.net", "City": "Saintes", "ID": 69},
{"Name": "Raphael", "Address": "9131 Etiam Ave", "Email": "Nulla.tincidunt@Mauris.edu", "City": "Fortune", "ID": 70},
{"Name": "Ocean", "Address": "750-8454 Massa Rd.", "Email": "Integer.urna@nislelementum.co.uk", "City": "Colombo", "ID": 71},
{"Name": "Pamela", "Address": "6067 Sed St.", "Email": "luctus.et@mattisvelitjusto.com", "City": "Buckingham", "ID": 72},
{"Name": "Ross", "Address": "Ap #584-1104 Integer St.", "Email": "Nullam.feugiat.placerat@consectetueripsum.ca", "City": "Marlborough", "ID": 73},
{"Name": "Tiger", "Address": "502-5745 Ornare St.", "Email": "felis@pretium.net", "City": "Boechout", "ID": 74},
{"Name": "Joseph", "Address": "9324 Semper Avenue", "Email": "Morbi.sit.amet@enimCurabitur.co.uk", "City": "Wichita", "ID": 75},
{"Name": "Amery", "Address": "Ap #604-1766 Tincidunt, St.", "Email": "In.tincidunt@dui.edu", "City": "Jonqui?re", "ID": 76},
{"Name": "Arden", "Address": "P.O. Box 257, 998 In St.", "Email": "faucibus.lectus.a@atarcuVestibulum.net", "City": "Herne", "ID": 77},
{"Name": "Oren", "Address": "4896 Aliquam St.", "Email": "feugiat.placerat@accumsanneque.ca", "City": "Waiblingen", "ID": 78},
{"Name": "Jack", "Address": "Ap #379-3875 Rutrum. Ave", "Email": "dui.in@dictum.net", "City": "Gillette", "ID": 79},
{"Name": "Latifah", "Address": "P.O. Box 321, 1971 Nec St.", "Email": "interdum.Curabitur.dictum@metus.co.uk", "City": "Porirua", "ID": 80},
{"Name": "Henry", "Address": "Ap #778-652 Arcu. St.", "Email": "ut.pellentesque@AeneanmassaInteger.co.uk", "City": "Herne", "ID": 81},
{"Name": "Adrienne", "Address": "5439 Pellentesque Avenue", "Email": "erat@nonummy.org", "City": "Maria", "ID": 82},
{"Name": "Joseph", "Address": "404-7536 Amet, Av.", "Email": "dolor.vitae@aptent.co.uk", "City": "Lac La Biche County", "ID": 83},
{"Name": "Kelsie", "Address": "Ap #827-4432 Proin Street", "Email": "Nunc.sollicitudin.commodo@porttitorinterdumSed.ca", "City": "Profondeville", "ID": 84},
{"Name": "Dale", "Address": "P.O. Box 438, 1168 In Street", "Email": "sit.amet.lorem@necmaurisblandit.net", "City": "Hinckley", "ID": 85},
{"Name": "Chantale", "Address": "676-9011 A Rd.", "Email": "lorem.eu@velitegetlaoreet.net", "City": "Ville-en-Hesbaye", "ID": 86},
{"Name": "Fletcher", "Address": "P.O. Box 396, 9046 Dui. Avenue", "Email": "at.augue.id@pede.co.uk", "City": "Saint-Nazaire", "ID": 87},
{"Name": "Camille", "Address": "P.O. Box 275, 3212 A St.", "Email": "tellus.Aenean.egestas@quam.edu", "City": "Belmont", "ID": 88},
{"Name": "Ali", "Address": "P.O. Box 153, 5686 Ligula St.", "Email": "ornare.libero@nisl.co.uk", "City": "Bicinicco", "ID": 89},
{"Name": "Marcia", "Address": "Ap #477-1665 Imperdiet Rd.", "Email": "Suspendisse.commodo@magna.co.uk", "City": "Rimouski", "ID": 90},
{"Name": "Desirae", "Address": "P.O. Box 947, 1664 Natoque St.", "Email": "velit@ProinultricesDuis.net", "City": "Flint", "ID": 91},
{"Name": "Erica", "Address": "498-2814 Pede, Av.", "Email": "a.aliquet.vel@quamafelis.org", "City": "Alexandria", "ID": 92},
{"Name": "Lucas", "Address": "Ap #826-7997 Sit Road", "Email": "at.auctor.ullamcorper@ligula.org", "City": "High Level", "ID": 93},
{"Name": "Regan", "Address": "P.O. Box 294, 4642 Ac Rd.", "Email": "ad.litora@penatibuset.edu", "City": "Cras-Avernas", "ID": 94},
{"Name": "September", "Address": "P.O. Box 279, 7251 Duis St.", "Email": "egestas.a.scelerisque@ametmassaQuisque.net", "City": "Heusden", "ID": 95},
{"Name": "Cameron", "Address": "P.O. Box 891, 6877 Aliquam Av.", "Email": "mi.Aliquam@vel.edu", "City": "Braunschweig", "ID": 96},
{"Name": "Joan", "Address": "P.O. Box 674, 6692 Cum Rd.", "Email": "sit.amet.metus@tellus.co.uk", "City": "Alsemberg", "ID": 97},
{"Name": "Jada", "Address": "Ap #539-9952 Quis Road", "Email": "Pellentesque.ultricies.dignissim@elementum.edu", "City": "Hoogstraten", "ID": 98},
{"Name": "Maite", "Address": "Ap #110-7794 Eros St.", "Email": "eu.ligula@in.co.uk", "City": "Maaseik", "ID": 99},
{"Name": "Ivy", "Address": "Ap #928-7873 Aliquam Rd.", "Email": "non.nisi.Aenean@blandit.edu", "City": "Perchtoldsdorf", "ID": 100}
]};
})
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="MainCtrl">
<container>
<card info="info" index="$index" ng-repeat="info in data.list"/>
</container>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-animate.js"></script>
<script src="app.js"></script>
</body>
</html>
.Card{
position:relative;
width:170px;
height: 230px;
font-size:13px;
margin:15px;
background: white;
text-align:center;
border:1px solid #eee;
display:inline-block;
overflow:hidden;
box-shadow:0 0 10px black;
vertical-align:top;
border-color:black;
border-radius:5px;
border-width:1px;
}
<div class="Card">
<span class="name">{{info.Name}}</span>
</div>
<div id="focus" class="dn-fade">
<div class=Name>
Name: {{info.Name}}
</div>
<div class=Email>
Email: {{info.Email}}
</div>
<div class=Address>
Address: {{info.Address}}
</div>
</div>