code tabs, and code example directive

public/_includes/_scripts-include.jade

@@ -16,8 +16,9 @@ script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular
 script(src="/resources/js/site.js")
 script(src="/resources/js/controllers/app-controller.js")
 script(src="/resources/js/directives/bio.js")
-script(src="/resources/js/directives/code.js")
 script(src="/resources/js/directives/code-tabs.js")
+script(src="/resources/js/directives/code-pane.js")
+script(src="/resources/js/directives/code-example.js")
 
 
 <!-- GA -->

public/docs/js/latest/guide/_layout.jade

@@ -9,7 +9,7 @@ html(lang="en" ng-app="angularIOApp")
     != partial("../../../../_includes/_hero")
     != partial("../../../../_includes/_banner")
 
-    article.l-content-small.grid-fluid.docs-content(ng-non-bindable)
+    article.l-content-small.grid-fluid.docs-content
       != yield
       != partial("../../../../_includes/_next-item")
 

public/resources/css/module/_code-box.scss

@@ -2,7 +2,6 @@
   border-radius: 4px;
   background: $steel;
   box-shadow: 0px 2px 5px rgba($coal, .3);
-  display: none;
   margin-bottom: $unit * 2;
 
   header {
@@ -24,7 +23,9 @@
       font-weight: 500;
       text-transform: none;
 
-      &.is-selected {
+      &.is-selected,
+      &.selected
+       {
         background: $blueberry;
         color: $snow;
       }

public/resources/js/directives/code-example.js

@@ -0,0 +1,28 @@
+/*
+* Code Example Directive
+*
+* Formats codes examples and prevents
+* Angular code from being processed.
+*/
+
+angularIO.directive('codeExample', function() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    scope: {
+      name: '@',
+      language: '@',
+      format: '@'
+    },
+
+    link: function(scope, element, attrs, codeSwitchController, transcludeFunc) {
+      transcludeFunc( scope, function( content ) {
+        var code = '<code ng-non-bindable>' + content[0].innerHTML + '</code>';
+        element.append(code);
+      });
+    },
+
+    template:'<pre class="prettyprint {{format}} lang-{{language}}"></pre>'
+  };
+});

public/resources/js/directives/code-pane.js

@@ -0,0 +1,33 @@
+/*
+* Code Pane Directive
+*
+* @requires codeTab Directive
+*
+* Invidiual panes displayed in the the
+* codeTab elements
+*/
+
+angularIO.directive('codePane', function() {
+  return {
+    require: '^codeTabs',
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    scope: {
+      name: '@',
+      language: '@',
+      format: '@'
+    },
+
+    link: function(scope, element, attrs, codeTabController, transcludeFunc) {
+      transcludeFunc( scope, function( content ) {
+        var code = '<code ng-non-bindable>' + content[0].innerHTML + '</code>';
+        element.append(code);
+      });
+
+      codeTabController.addPane(scope);
+    },
+
+    template:'<pre class="prettyprint {{format}} lang-{{language}}" ng-show="selected"></pre>'
+  };
+});

public/resources/js/directives/code-tabs.js

@@ -1,85 +1,71 @@
 /*
-* Code Tabs
+* Code Tabs Directive
+*
+* Creates a tabs code examples that
+* displayed in the same container
+*/
+
+angularIO.directive('codeTabs', function($timeout) {
+  return {
+    restrict: 'E',
+    scope: {},
+    transclude: true,
+    replace: true,
+
+    controller: function ($scope) {
+      $scope.panes = [];
+
+
+      /*
+      * Add Code Pane List of Panes
       *
       */
 
-var getTabName = function(name) {
+      this.addPane = function(pane) {
-  var prettyName = name;
+        if ($scope.panes.length === 0) {
-
+          $scope.showPane(pane);
-  switch(name) {
-    case 'es5':         prettyName = 'ES5';         break;
-    case 'typescript':  prettyName = 'TypeScript';  break;
-    default:            prettyName = name;
         }
 
-  return prettyName;
+        $scope.panes.push(pane);
-};
-
-angularIO.directive('code-tabs', function() {
-  return {
-    template: 'Name: {{customer.name}} Address: {{customer.address}}'
       };
 
 
-  $scope.language = 'es5';
+      /*
-  var $codeBoxes = $('.code-box');
+      * Show selected Code Examples
+      *
+      */
 
-  if($codeBoxes.length) {
+      $scope.showPane = function(pane) {
-    //UPDATE ALL CODE BOXES
+        // RESET ALL EXAMPLES
-    $codeBoxes.each(function(index, codeBox) {
+        angular.forEach($scope.panes, function(pane) {
-      //REGISTER ELEMENTS
+          pane.selected = false;
-      var $codeBox = $(codeBox);
-      var $examples = $codeBox.find('.prettyprint');
-      var $firstItem = $($examples[0]);
-      var $header = $("<header class='code-box-header'></header>");
-      var $nav = $("<nav class='code-box-nav'></nav>");
-      var selectedName = '';
-
-      //HIDE/SHOW CONTENT
-      $examples.addClass('is-hidden');
-      $firstItem.removeClass('is-hidden');
-
-      //UPDATE NAV FOR EACH CODE BOX
-      $examples.each(function(index, example) {
-        var $example = $(example);
-        var name = $example.data('name');
-        var tabName = getTabName(name);
-        var selected = (index === 0) ? 'is-selected' : '';
-        var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + tabName + "</button>");
-
-        // ADD EVENTS FOR CODE SNIPPETS
-        $button.on('click', function(e) {
-          e.preventDefault();
-          var $currentButton = $(e.currentTarget);
-          var $buttons = $nav.find('.button');
-          var selectedName = $currentButton.data('name');
-          $buttons.removeClass('is-selected');
-          $currentButton.addClass('is-selected');
-
-          //UPDAT VIEW ON SELECTTION
-          $examples.addClass('is-hidden');
-          var $currentExample = $codeBox.find(".prettyprint[data-name='" + selectedName + "']");
-          $currentExample.removeClass('is-hidden').addClass('animated fadeIn');
         });
 
-        $nav.append($button);
+        // SELECT CURRENT EXAMPLE
-      });
+        pane.selected = true;
-
-      //ADD HEADER TO DOM
-      $header.append($nav);
-      $codeBox.prepend($header);
-    });
-
-    //FADEIN EXAMPLES
-    $codeBoxes.addClass('is-visible');
-  }
-
-  // TOGGLE CODE LANGUAGE
-  $scope.toggleCodeExample = function(event, name) {
-    event.preventDefault();
-    $scope.language = language;
       };
 
 
-});
+      /*
+      * Finish Rendereding then prettify code
+      *
+      */
 
+      $scope.$watch($scope.panes.$last,function(){
+        $timeout(prettyPrint, 1);
+      });
+    },
+
+    template:
+      '<div class="code-box">' +
+      ' <header class="code-box-header">' +
+      '   <nav class="code-box-nav">' +
+      '    <button ng-repeat="pane in panes" ng-click="showPane(pane)" class="button" ng-class="{selected:pane.selected}">' +
+      '      {{pane.name}}' +
+      '    </button>' +
+      '   </nav>' +
+      ' </header>' +
+      ' <div class="code-box-examples" ng-transclude></div>' +
+      '</div>'
+  };
+});

public/resources/js/directives/code.js

@@ -1,23 +0,0 @@
-/*
-* Code Formatting
-*
-*/
-
-
-angularIO.directive('pre', function() {
-  return {
-    template: 'Name: {{customer.name}} Address: {{customer.address}}'
-  };
-
-
-  if($codeBlocks.length) {
-    $codeBlocks.each(function(index, codeEl) {
-      var $codeEl = $(codeEl);
-
-      if(!$codeEl.hasClass('prettyprint')) {
-        $codeEl.addClass('prettyprint linenums');
-      }
-    });
-  }
-
-});