<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script src="https://rawgit.com/christopherthielen/ui-router-extras/0.1.0/release/ct-ui-router-extras.js"></script>
<script src="https://code.angularjs.org/1.4.5/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="container-fluid">
<div ui-view="app"></div>
<state-vis style="position:fixed; bottom: 0;"></state-vis>
<div style="width: 100%; position:fixed; bottom: 0;">
<pre>Browser location: {{$location.absUrl()}}</pre>
</div>
<script type="text/ng-template" id="frontpage.html">
<div>
<a ui-sref="lobby.browser" href>Lobby</a>
<a ui-sref="modal.login" href>Login</a>
</div>
<div ui-view="frontpage"></div>
</script>
<script type="text/ng-template" id="lobby.html">
<div>
<a ui-sref="frontpage.home" href>Home</a>
<a ui-sref="modal.account.dashboard" href>Account</a>
</div>
<div ui-view="lobby"></div>
</script>
<!-- login/login.html TEMPLATE -->
<script type="text/ng-template" id="login/login.html">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="modal.close()">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-3" for="email">
E-Mail
</label>
<div class="col-md-9">
<input class="form-control" type="email" name="email" id="email">
</div>
</div>
<div class="form-group">
<label class="col-md-3" for="password">
Password
</label>
<div class="col-md-9">
<input class="form-control" type="password" name="password" id="password">
</div>
</div>
<button class="btn btn-primary">
Login
</button>
</form>
</div>
</div>
</script>
<script type="text/ng-template" id="account/modal.html">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="modal.close()">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Account</h4>
</div>
<div class="modal-body">
<div ui-view="account"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="modal.close()">Close</button>
</div>
</div>
</script>
<script type="text/ng-template" id="account/account.html">
<div>
<a ui-sref="modal.account.dashboard" href>Dashboard</a>
<a ui-sref="modal.account.edit" href>Edit Profile</a>
<a ui-sref="modal.account.another.view" href>Another Modal</a>
</div>
<div ui-view="viewport"></div>
</script>
<script type="text/ng-template" id="account/edit/modal.html">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="modal.close()">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Edit Account</h4>
</div>
<div class="modal-body">
<div ui-view></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="modal.close()">Close</button>
</div>
</div>
</script>
<script type="text/ng-template" id="account/edit/edit.html">
<div>
<a ui-sref="modal.account.dashboard" href>Back to Dashboard</a>
</div>
<h4>Previous State</h4>
<pre ng-bind="modal.previousState | json"></pre>
</script>
<script type="text/ng-template" id="another/modal.html">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="modal.close()">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Another Modal</h4>
</div>
<div class="modal-body">
<div ui-view="another"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="modal.close()">Close</button>
</div>
</div>
</script>
</body>
</html>
angular
.module('plunker', ['ct.ui.router.extras', 'ui.bootstrap', 'ui.bootstrap.tpls', 'ui.router', 'ngAnimate'])
.config(function($stateProvider, $urlRouterProvider) {
//Frontpage
$stateProvider
.state({
name: 'frontpage',
abstract: true,
sticky: true,
views: {
'app@': {
templateUrl: 'frontpage.html'
}
}
})
.state({
name: 'frontpage.home',
url: '/home',
views: {
'frontpage@frontpage': {
template: '<h1>Home</h1>'
}
}
});
//Lobby
$stateProvider
.state({
name: 'lobby',
abstract: true,
sticky: true,
views: {
'app@': {
templateUrl: 'lobby.html'
}
}
})
.state({
name: 'lobby.browser',
url: '/browser',
views: {
'lobby@lobby': {
template: '<h1>Browser</h1>'
}
}
});
//Modal
$stateProvider
.state({
name: 'modal',
abstract: true,
template: '<div ui-view="modal"></div>'
})
.state({
name: 'modal.login',
onEnter: function($modal, $previousState) {
$previousState.memo("loginInvoker");
$modal.open({
templateUrl: 'login/login.html',
backdrop: 'static',
size: 'sm',
controllerAs: 'modal',
controller: function($scope, $modalInstance, $previousState) {
this.previousState = $previousState.get();
this.close = function () {
$modalInstance.dismiss('close');
$previousState.go("loginInvoker");
};
$scope.$on("$stateChangeStart", function(evt, toState) {
if (!toState.$$state().includes['modal']) {
$modalInstance.dismiss('close');
}
});
}
});
}
})
.state({
name: 'modal.account',
url: '/account',
abstract: true,
views: {
'account@': {
templateUrl: 'account/account.html'
}
},
onEnter: function($modal, $previousState) {
$previousState.memo("accountInvoker");
$modal.open({
templateUrl: 'account/modal.html',
backdrop: 'static',
controllerAs: 'modal',
controller: function($scope, $modalInstance, $previousState) {
this.previousState = $previousState.get();
this.close = function () {
$modalInstance.dismiss('close');
$previousState.go("accountInvoker");
};
$scope.$on("$stateChangeStart", function(evt, toState) {
if (!toState.$$state().includes['modal']) {
$modalInstance.dismiss('close');
}
});
}
});
}
})
.state({
name: 'modal.account.dashboard',
url: '/dashboard',
sticky: true,
views: {
'viewport@modal.account': {
template: '<h1>Dashboard</h1>'
}
}
})
.state({
name: 'modal.account.edit',
url: '/editprofile',
sticky: true,
views: {
'viewport@modal.account': {
template: '<h1>Edit Profile</h1>'
}
}
})
.state({
name: 'modal.account.another',
url: '/another',
abstract: true,
views: {
'another@': {
template: '<a ui-sref="modal.account.dashboard" href>Back</a>' +
'<div ui-view="viewport"></div>'
}
},
onEnter: function($modal, $previousState) {
$previousState.memo("accountAnotherInvoker");
$modal.open({
templateUrl: 'another/modal.html',
backdrop: 'static',
size: 'sm',
controllerAs: 'modal',
controller: function($scope, $modalInstance, $previousState) {
this.previousState = $previousState.get();
this.close = function () {
$modalInstance.dismiss('close');
$previousState.go("accountAnotherInvoker");
};
$scope.$on("$stateChangeStart", function(evt, toState) {
if (!toState.$$state().includes['modal.another']) {
$modalInstance.dismiss('close');
}
});
}
});
}
})
.state({
name: 'modal.account.another.view',
url: '/view',
views: {
'viewport@modal.account.another': {
template: '<h3>Another Modal View</h3>'
}
}
});
$urlRouterProvider.otherwise('/home');
})
.run(function($rootScope, $location) {
$rootScope.$location = $location;
});
circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
text { font: 12px sans-serif; }
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
/* Styles go here */
a { padding: 1em; }
/*.modal-overlay {
position:fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 50;
background-color: rgba(0, 0, 0, 0.3);
transition: background-color 0.15s linear;
}
.modal-content {
background: white;
border: 3px solid black;
border-radius: 6px;
padding: 1em;
margin-left: auto;
margin-right: auto;
max-width: 500px;
position: relative;
top: 30px;
transition: top 0.45s ease;
}
.modal-content h2 {
margin: 0 0 0.5em 0;
}
.modal.ng-enter { /* Required to get .ng-enter added to ui-view */
/*transition: all 0s linear;
}
.modal.ng-enter .modal-overlay {
background-color: rgba(0, 0, 0, 0.0);
}
.modal.ng-enter .modal-content {
top: -100px;
}*/