docs(design): ui-fixes for examples, layout and API components

1 files changed, 50 insertions, 0 deletions

diff --git a/docs/app/assets/js/angular-bootstrap/bootstrap.js b/docs/app/assets/js/angular-bootstrap/bootstrap.js
index b9b5e382..643b5a50 100644
--- a/docs/app/assets/js/angular-bootstrap/bootstrap.js
+++ b/docs/app/assets/js/angular-bootstrap/bootstrap.js
@@ -2,6 +2,56 @@
 
 var directive = {};
 
+directive.runnableExample = ['$templateCache', '$document', function($templateCache, $document) {
+  var exampleClassNameSelector = '.runnable-example-file';
+  var doc = $document[0];
+  var tpl =
+    '<nav class="runnable-example-tabs" ng-if="tabs">' +
+    '  <a ng-class="{active:$index==activeTabIndex}"' +
+         'ng-repeat="tab in tabs track by $index" ' +
+         'href="" ' +
+         'class="btn"' +
+         'ng-click="setTab($index)">' + 
+    '    {{ tab }}' +
+    '  </a>' +
+    '</nav>';
+
+  return {
+    restrict: 'C',
+    controller : ['$scope', function($scope) {
+      $scope.setTab = function(index) {
+        var tab = $scope.tabs[index];
+        $scope.activeTabIndex = index;
+        $scope.$broadcast('tabChange', index, tab);
+      };
+    }],
+    compile : function(element) {
+      element.html(tpl + element.html());
+      return function(scope, element) {
+        var tabs = [], now = Date.now();
+        angular.forEach(doc.querySelectorAll(exampleClassNameSelector),
+          function(child, index) {
+
+          tabs.push(child.getAttribute('name'));
+        });
+
+        if(tabs.length > 0) {
+          scope.tabs = tabs;
+          scope.$on('tabChange', function(e, index, title) {
+            var elements = doc.querySelectorAll(exampleClassNameSelector);
+            angular.forEach(elements, function(child) {
+              child.style.display = 'none';
+            });
+            var selected = elements[index];
+            selected.style.display = 'block';
+          });
+          scope.setTab(0);
+        }
+      }
+    }
+  };
+}];
+
 directive.dropdownToggle =
           ['$document', '$location', '$window',
   function ($document,   $location,   $window) {