Skip to content

Instantly share code, notes, and snippets.

@mjromper

mjromper/controllers.js

Last active August 29, 2015 14:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mjromper/1cdc5be4f6a72ab82c82 to your computer and use it in GitHub Desktop.
Save mjromper/1cdc5be4f6a72ab82c82 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Navigation
Raw
controllers.js
function getQueryParams(qs) {
qs = qs.split('+').join(' ');
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params;
}
var app = angular.module('myApp', []);
app.controller('landingController', function ($scope) {
$scope.data = Data;
$scope.activeSectionId = getQueryParams(document.location.search).section;
$scope.activeCardId = getQueryParams(document.location.search).card;
getCard($scope.activeCardId);
$scope.goToSection = function (id) {
$scope.activeSectionId = id;
console.log(document.location.search);
document.location.search = '?section=' + id;
}
$scope.goToCard = function (id) {
$scope.activeCardId = id;
document.location.search = '?section=' + $scope.activeSectionId + '&card=' + id;
}
function getCard(id) {
if (!$scope.data || !$scope.activeSectionId || !id){
return;
}
$scope.selectedCard = null;
var selectedCard = $scope.data[$scope.activeSectionId - 1].cards.filter(function (d) {
return (d.id+"") === id+"";
});
console.log('selected', selectedCard);
if (selectedCard.length > 0) {
$scope.selectedCard = selectedCard[0];
}
}
});
Raw
data.js
var Data = [
{
"idSection": 1,
"name": "Section One",
"cards": [
{
"id": 1,
"title": "Titulo 1",
"flashUrl": "path de url al index del flash",
"thumbnail": "https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3.jpg"
},
{
"id": 2,
"title": "Titulo 2",
"flashUrl": "path de url al index del flash",
"thumbnail": "http://pngimg.com/upload/banana_PNG817.png"
},
{
"id": 3,
"title": "Titulo 3",
"flashUrl": "path de url al index del flash",
"thumbnail": "https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3.jpg"
},
{
"id": 4,
"title": "Titulo 4",
"flashUrl": "path de url al index del flash",
"thumbnail": "https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3.jpg"
},
{
"id": 5,
"title": "Titulo 5",
"flashUrl": "path de url al index del flash",
"thumbnail": "https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3.jpg"
}
]
},
{
"idSection": 2,
"name": "Section Two",
"cards": [
{
"id": 1,
"title": "Titulo 1",
"flashUrl": "path de url al index del flash",
"thumbnail": "https://upload.wikimedia.org/wikipedia/commons/b/bc/Banana_(partially_peeled).jpg"
},
{
"id": 2,
"title": "Titulo 2",
"flashUrl": "path de url al index del flash",
"thumbnail": "https://upload.wikimedia.org/wikipedia/commons/b/bc/Banana_(partially_peeled).jpg"
},
{
"id": 3,
"title": "Titulo 3",
"flashUrl": "path de url al index del flash",
"thumbnail": "http://pngimg.com/upload/banana_PNG817.png"
}
]
},
{
"idSection": 3,
"name": "Section Three",
"cards": [
{
"id": 1,
"title": "Titulo 1",
"flashUrl": "path de url al index del flash",
"thumbnail": "https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3.jpg"
},
{
"id": 2,
"title": "Titulo 2",
"flashUrl": "path de url al index del flash",
"thumbnail": "https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3.jpg"
},
{
"id": 3,
"title": "Titulo 3",
"flashUrl": "path de url al index del flash",
"thumbnail": "https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3.jpg"
}
]
},
{
"idSection": 4,
"name": "Senction Four",
"cards": [
{
"id": 1,
"title": "Titulo 1",
"flashUrl": "path de url al index del flash",
"thumbnail": "https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3.jpg"
},
{
"id": 2,
"title": "Titulo 2",
"flashUrl": "path de url al index del flash",
"thumbnail": "http://vignette4.wikia.nocookie.net/mariokart/images/4/45/Mkdd_giant_banana.jpg/revision/latest?cb=20080802142032"
},
{
"id": 3,
"title": "Titulo 3",
"flashUrl": "path de url al index del flash",
"thumbnail": "http://vignette4.wikia.nocookie.net/mariokart/images/4/45/Mkdd_giant_banana.jpg/revision/latest?cb=20080802142032"
}
]
}
];
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>TEST</title>
<script src="data.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script defer src="controllers.js"></script>
</head>
<body>
<div ng-app="myApp" class="container">
<div ng-controller="landingController">
<ul class="landing-nav">
<li ng-click="goToSection(d.idSection)" ng-class="{'active': activeSectionId == d.idSection }" ng-repeat="d in data" >{{d.name}} {{d.idSection}}</li>
</ul>
<div class="landing-content">
<div class="cards-container" ng-if="!activeCardId">
<div ng-click="goToCard(card.id)" ng-repeat="card in data[activeSectionId-1].cards" class="card">
<img height="100%" width="100%" ng-src="{{card.thumbnail}}" />
</div>
</div>
<div class="card-view-container" ng-if="activeCardId" >
<a href="?section={{activeSectionId}}">Volver a listado</a>
<h2>{{selectedCard.title}}</h2>
<div class="card-view">
<img height="100%" width="100%" ng-src="{{selectedCard.thumbnail}}" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
styles.css
.container {
background: #ceffed;
height: 100%;
width: 90%;
margin: 0 auto;
min-height: 600px;
}
ul.landing-nav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
border-bottom: 1px solid #ccc;
padding: 0;
list-style-type: none;
}
ul.landing-nav li {
-webkit-flex: 1;
flex: 1;
height: 100px;
list-style: none;
cursor: pointer;
}
ul.landing-nav li:hover{
opacity: 0.6;
}
ul.landing-nav li:not(:last-child) {
border-right: 1px solid #ccc;
}
ul.landing-nav li.active {
background: red;
}
.landing-content {
}
.cards-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.landing-content .card {
width: 300px;
height: 250px;
margin: 20px;
border: 1px solid #bbb;
cursor: pointer;
}
.card-view-container {
width: 100%;
}
.card-view {
width: 80%;
margin: 0 auto;
height: 400px;
border: 1px solid #bbb;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment