var app = angular.module('plunker', ['ui.router', 'ngAnimate', 'ct.ui.router.extras']);
app.config(['$stateProvider', '$urlRouterProvider', '$futureStateProvider',
function($sp, $urlRouterProvider, $fsp) {
var futureStateResolve = function($http, $q, $timeout) {
return $http.get("pages.json").then(function(response) {
angular.forEach(response.data, function(state) {
//console.log(state)
$sp.state(state.namespace, {
url: state.url,
data: {
isSibling: false,
siblingTo: "none"
},
name: state.namespace,
controller: state.controller,
templateUrl: state.templateUrl
});
});
})
}
$fsp.addResolve(futureStateResolve);
$urlRouterProvider.otherwise('/home');
}
]);
app.controller('mainCtrl', function($scope) { $scope.title = "Home Page"; });
app.controller('navController', function($scope, $http) {
$http.get("pages.json").then(function(response) {
var linksObj = [];
angular.forEach(response.data, function(state) {
console.log(state);
var linkObj = {
url: state.namespace,
navName: state.namespace
};
linksObj.push(linkObj);
});
$scope.navItems = linksObj;
});
});
app.controller('imageAccordionController', function($scope) {
var accordionObject = [{
iaSrc: "http://trmmultimedia.com/g5properties.co.za/images/slideshow/home-slide-01.jpg",
iaTitle: "Title One",
iaIndex: 1,
iaClass: "item_left"
}, {
iaSrc: "http://trmmultimedia.com/g5properties.co.za/images/slideshow/home-slide-02.jpg",
iaTitle: "Title Two",
iaIndex: 1,
iaClass: "item_left"
}, {
iaSrc: "http://trmmultimedia.com/g5properties.co.za/images/slideshow/home-slide-03.jpg",
iaTitle: "Title Three",
iaIndex: 1,
iaClass: "item_left"
}, {
iaSrc: "http://trmmultimedia.com/g5properties.co.za/images/slideshow/home-slide-04.jpg",
iaTitle: "Title Four",
iaIndex: 1,
iaClass: "item_right"
}]
$scope.imageAccordionItems = accordionObject;
});
app.directive("imageAccordionParent", function($animate, $rootScope) {
return {
scope: true,
restrict: "A",
link: function(scope, element, attrs) {
},
controller: function($scope) {
//Set initial value to get going
$scope.mouseParentState = false;
$scope.mouseLeaveParent = function(e) {
$scope.mouseParentState = false;
$rootScope.$broadcast('mouseOverParent', false);
}
$scope.mouseEnterParent = function(e) {
$scope.mouseParentState = true;
$rootScope.$broadcast('mouseOverParent', true);
}
}
}
});
app.directive("imageAccordionItem", function($animate) {
return {
scope: true,
restrict: "A",
link: function(scope, element, attrs) {
var first = false;
if (!first) {
$animate.addClass(element, 'item_equal');
first = true;
}
attrs.$observe('imageAccordionItem', function(newVal) {
element.removeClass('item_over');
element.removeClass('item_out');
element.removeClass('item_equal');
if (scope.mouseParentState) {
console.log("Parent Over");
if (newVal == 'item-mouse-enter-true') {
$animate.addClass(element, 'item_over');
$animate.removeClass(element, 'item_out');
$animate.removeClass(element, 'item_equal');
}
if (newVal == 'item-mouse-leave-true') {
$animate.addClass(element, 'item_out');
$animate.removeClass(element, 'item_over');
$animate.removeClass(element, 'item_equal');
}
} else {
console.log("Parent Leave");
$animate.removeClass(element, 'item_over');
$animate.removeClass(element, 'item_out');
$animate.addClass(element, 'item_equal');
}
})
},
controller: function($scope, $element, $animate) {
$scope.mouseItemState = 'item-mouse-leave';
$scope.mouseEnterItem = function(e) {
$scope.mouseItemState = 'item-mouse-enter';
//console.log("over item");
}
$scope.mouseLeaveItem = function(e) {
$scope.mouseItemState = 'item-mouse-leave';
//console.log("leave item");
}
}
}
})
.animation('.accordion_panel', function() {
return {
//animation that can be triggered after the class is added
addClass: function(element, className, done) {
console.log("A: " + className);
if (className == 'item_over') {
TweenMax.to(element, 0.4, {
width: "40%",
opacity: 1,
onComplete: done
});
} else if (className == 'item_out') {
TweenMax.to(element, 0.4, {
width: "20%",
opacity: 0.5,
onComplete: done
});
} else {
if (className == 'item_equal') {
TweenMax.to(element, 0.4, {
width: "25%",
opacity: 0.5,
onComplete: done
});
} else {
done();
}
}
}
}
})
.animation('.pageAnim', function() {
return {
//animation that can be triggered after the class is added
enter: function(element, done) {
TweenMax.set(element, {
opacity: 0
});
TweenMax.to(element, 0.4, {
opacity: 1,
onComplete: done
});
},
leave: function(element, done) {
TweenMax.set(element, {
opacity: 1
});
TweenMax.to(element, 0.4, {
opacity: 0,
onComplete: done
});
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="mainCtrl">
<div id="nav" class="menu" style="width:100%; height:50px; background: rgba(0,0,0,0.5); position:absolute; z-index:8000; top:0;">
<ul ng-controller="navController">
<li ng-repeat="link in navItems" ui-sref="{{link.url}}">{{link.navName}}</li>
</ul>
</div>
<div ui-view ng-animate-children class="pageAnim"></div>
<script data-require="tweenmax@*" data-semver="1.9.7" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.7/TweenMax.min.js"></script>
<script data-require="angular.js@1.3.1" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-animate.js"></script>
<script data-require="ui-router@*" data-semver="0.2.11" src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
<script data-require="ui-router-extras@0.0.10" data-semver="0.0.10" src="https://rawgit.com/christopherthielen/ui-router-extras/0.0.10/release/ct-ui-router-extras.js"></script>
<script src="app.js"></script>
</body>
</html>
/* Put your css in here */
body{
background:black;
color:white;
}
h1{
color:white;
}
ul{
margin:0;
}
#nav li{
display:inline-block;
margin:10px;
color:white;
cursor:pointer;
}
.accordion_wrap.over .accordion_panel.is-out{
/*width: 30% !important;*/
}
ul.accordion_wrap{
overflow: hidden;
margin: 0;
padding:0;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
position: relative;
}
li.accordion_panel{
display: inline-block;
float: left;
height: 100%;
position: relative;
min-height: 100%;
overflow: hidden;
width: 25%;
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
cursor:pointer;
}
.fs-app-fluid{
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
position: absolute;
}
.item_out, .item_equal{
opacity:0.5;
}
<div class="inner_wrap fs-app-fluid" data-ng-controller="imageAccordionController">
<ul
class="accordion_wrap"
data-image-accordion-parent="{{mouseParentState}}"
data-child-count="{{imageAccordionItemsCount}}"
data-ng-mouseenter="mouseEnterParent($event)"
data-ng-mouseleave="mouseLeaveParent($event)"
>
<li
data-ng-repeat="item in imageAccordionItems"
style="background-image: url('{{item.iaSrc}}');"
class="accordion_panel {{item.iaClass}}"
title="{{item.iaTitle}}"
data-parent-state="{{mouseParentState}}"
data-image-accordion-item="{{mouseItemState}}-{{mouseParentState}}"
index="{{item.iaIndex}}"
data-ng-mouseenter="mouseEnterItem($event)"
data-ng-mouseleave="mouseLeaveItem($event)"
>
</li>
</ul>
</div>
<br><br><h1>{{title}}</h1>
[
{
"namespace": "home",
"url":"/home",
"customData":[
{
"isSibling": false,
"parent": "none"
}
],
"templateUrl": "main.html",
"controller": "mainCtrl"
},
{
"namespace": "accordion",
"url":"/accordion",
"customData":[
{
"isSibling": false,
"parent": "none"
}
],
"templateUrl": "accordion.html",
"controller": "imageAccordionController"
}
]