From c376a7426614613765847837833df857d05094a1 Mon Sep 17 00:00:00 2001
From: Edgar Mueller <emueller@eclipsesource.com>
Date: Mon, 4 Apr 2016 16:54:45 +0200
Subject: [PATCH] Fixes #212: add navbar to navigate examples

---
 examples/app/app.js                    | 30 +++++++------------
 examples/app/index/index.controller.js | 13 ++++++++
 examples/embed-index.html              | 41 ++++++++++++++++++++++----
 3 files changed, 59 insertions(+), 25 deletions(-)
 create mode 100644 examples/app/index/index.controller.js

diff --git a/examples/app/app.js b/examples/app/app.js
index 2bd9813d0..b13048b51 100644
--- a/examples/app/app.js
+++ b/examples/app/app.js
@@ -11,53 +11,43 @@ angular.module('makeithappen', [
             templateUrl: 'app/local/local.html',
             controller: 'LocalController',
             controllerAs: 'vm'
-        });
-        $routeProvider.when('/editor', {
+        }).when('/editor', {
             templateUrl: 'app/editor/editor.html',
             controller: 'EditorController',
             controllerAs: 'vm'
-        });
-        $routeProvider.when('/custom', {
+        }).when('/custom', {
             templateUrl: 'app/custom/custom.html',
             controller: 'CustomController',
             controllerAs: 'vm'
-        });
-        $routeProvider.when('/defaultui', {
+        }).when('/defaultui', {
             templateUrl: 'app/default-ui/defaultui.html',
             controller: 'DefaultUISchemaController',
             controllerAs: 'vm'
-        });
-        $routeProvider.when('/defaultschema', {
+        }).when('/defaultschema', {
             templateUrl: 'app/default/default-schema.html',
             controller: 'DefaultSchemaController',
             controllerAs: 'vm'
-        });
-        $routeProvider.when('/placeholder-posts/:id?', {
+        }).when('/placeholder-posts/:id?', {
             templateUrl: 'app/placeholder/placeholder-posts.html',
             controller: 'PlaceholderController',
             controllerAs: 'vm'
-        });
-        $routeProvider.when('/placeholder-users/:id?', {
+        }).when('/placeholder-users/:id?', {
             templateUrl: 'app/placeholder/placeholder-users.html',
             controller: 'PlaceholderController',
             controllerAs: 'vm'
-        });
-        $routeProvider.when('/placeholder-comments/:id?', {
+        }).when('/placeholder-comments/:id?', {
             templateUrl: 'app/placeholder/placeholder-comments.html',
             controller: 'PlaceholderController',
             controllerAs: 'vm'
-        });
-        $routeProvider.when('/polymer', {
+        }).when('/polymer', {
             templateUrl: 'app/polymer/polymer.html',
             controller: 'PolymerController',
             controllerAs: 'vm'
-        });
-        $routeProvider.when('/arrays', {
+        }).when('/arrays', {
             templateUrl: 'app/arrays/arrays.html',
             controller: 'ArraysController',
             controllerAs: 'vm'
-        });
-        $routeProvider.otherwise({
+        }).otherwise({
             redirectTo: '/local'
         });
     }
diff --git a/examples/app/index/index.controller.js b/examples/app/index/index.controller.js
new file mode 100644
index 000000000..77215978c
--- /dev/null
+++ b/examples/app/index/index.controller.js
@@ -0,0 +1,13 @@
+'use strict';
+
+angular.module('makeithappen').controller('IndexController', function($scope, $location) {
+
+    var vm = this;
+    vm.isActive = function(fragment) {
+        if (fragment == $location.path()) {
+            return 'active';
+        } else {
+            return 'inactive';
+        }
+    }
+});
\ No newline at end of file
diff --git a/examples/embed-index.html b/examples/embed-index.html
index 254310160..bc83cdb2b 100644
--- a/examples/embed-index.html
+++ b/examples/embed-index.html
@@ -15,13 +15,17 @@
     </script>
     <link rel="import" href="bower_components/paper-input/paper-input.html"/>
 
-    <link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.css"/>
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
     <link rel="stylesheet" href="css/jsonforms.css"/>
     <link rel="stylesheet" href="css/main.css"/>
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 
-    <script src="bower_components/tv4/tv4.js"></script>
+    <script src="bower_components/jquery/dist/jquery.min.js"
+            type="text/javascript"></script>
+    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"
+            type="text/javascript"></script>
+    <script src="bower_components/tv4/tv4.js"
+            type="text/javascript"></script>
     <script src="bower_components/ace-builds/src-min-noconflict/ace.js"
             type="text/javascript"></script>
     <script src="bower_components/angular/angular.js"
@@ -53,6 +57,7 @@
     <script src="js/jsonforms.js" type="text/javascript"></script>
 
     <script src="app/app.js" type="text/javascript"></script>
+    <script src="app/index/index.controller.js" type="text/javascript"></script>
     <script src="app/editor/editor.controller.js" type="text/javascript"></script>
     <script src="app/local/local.controller.js" type="text/javascript"></script>
     <script src="app/default-ui/default-ui.controller.js" type="text/javascript"></script>
@@ -67,11 +72,37 @@
 
 </head>
 <body>
-<div class="container">
+<div class="container"  ng-controller="IndexController as index">
+
+    <nav class="navbar navbar-inverse">
+        <div class="container-fluid">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <div class="navbar-header">
+                <a class="navbar-brand" href="#/local">JSON Forms Demo</a>
+            </div>
+
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav navbar-right">
+                    <li class="dropdown">
+                        <a ng-href="{{index.getPath()}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Select example<span class="caret"></span></a>
+                        <ul class="dropdown-menu">
+                            <li ng-class="index.isActive('/local')"><a href="#/local">Person example</a></li>
+                            <li ng-class="index.isActive('/arrays')"><a href="#/arrays">Array controls</a></li>
+                            <li ng-class="index.isActive('/editor')"><a href="#/editor">Live edit</a></li>
+                            <li ng-class="index.isActive('/defaultui')"><a href="#/defaultui">Generated UI</a></li>
+                            <li ng-class="index.isActive('/defaultschema')"><a href="#/defaultschema">Generated schema</a></li>
+                            <li ng-class="index.isActive('/polymer')"><a href="#/polymer">Polymer example</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </div><!-- /.navbar-collapse -->
+        </div><!-- /.container-fluid -->
+    </nav>
+
     <div class="row" id="demo">
         <div class="col-md-12">
-            <h1 style="margin-bottom: 1em"><strong>JSON Forms Demo</strong></h1>
-            <div id="demo-body" ng-view class="jsf"></div>
+            <div id="demo-body" ng-view  class="jsf"></div>
         </div>
     </div>