code tabs, and code example directive

This commit is contained in:
Alex Wolfe 2015-05-02 15:34:16 -07:00
parent 6475fb7e51
commit b9386de4f3
7 changed files with 121 additions and 95 deletions

View File

@ -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 -->

View File

@ -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")

View File

@ -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;
}

View File

@ -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>'
};
});

View File

@ -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>'
};
});

View File

@ -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) {
var prettyName = name;
switch(name) {
case 'es5': prettyName = 'ES5'; break;
case 'typescript': prettyName = 'TypeScript'; break;
default: prettyName = name;
this.addPane = function(pane) {
if ($scope.panes.length === 0) {
$scope.showPane(pane);
}
return prettyName;
};
angularIO.directive('code-tabs', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
$scope.panes.push(pane);
};
$scope.language = 'es5';
var $codeBoxes = $('.code-box');
/*
* Show selected Code Examples
*
*/
if($codeBoxes.length) {
//UPDATE ALL CODE BOXES
$codeBoxes.each(function(index, codeBox) {
//REGISTER ELEMENTS
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');
$scope.showPane = function(pane) {
// RESET ALL EXAMPLES
angular.forEach($scope.panes, function(pane) {
pane.selected = false;
});
$nav.append($button);
});
//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;
// SELECT CURRENT EXAMPLE
pane.selected = true;
};
});
/*
* 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>'
};
});

View File

@ -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');
}
});
}
});