code tabs, and code example directive
This commit is contained in:
Alex Wolfe
parent
6475fb7e51
commit
b9386de4f3
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>'
|
||||
};
|
||||
});
|
||||
|
|
@ -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>'
|
||||
};
|
||||
});
|
||||
|
|
@ -1,85 +1,71 @@
|
|||
/*
|
||||
* Code Tabs
|
||||
* Code Tabs Directive
|
||||
*
|
||||
* Creates a tabs code examples that
|
||||
* displayed in the same container
|
||||
*/
|
||||
|
||||
var getTabName = function(name) {
|
||||
var prettyName = name;
|
||||
|
||||
switch(name) {
|
||||
case 'es5': prettyName = 'ES5'; break;
|
||||
case 'typescript': prettyName = 'TypeScript'; break;
|
||||
default: prettyName = name;
|
||||
}
|
||||
|
||||
return prettyName;
|
||||
};
|
||||
|
||||
angularIO.directive('code-tabs', function() {
|
||||
angularIO.directive('codeTabs', function($timeout) {
|
||||
return {
|
||||
template: 'Name: {{customer.name}} Address: {{customer.address}}'
|
||||
};
|
||||
restrict: 'E',
|
||||
scope: {},
|
||||
transclude: true,
|
||||
replace: true,
|
||||
|
||||
controller: function ($scope) {
|
||||
$scope.panes = [];
|
||||
|
||||
|
||||
$scope.language = 'es5';
|
||||
var $codeBoxes = $('.code-box');
|
||||
/*
|
||||
* Add Code Pane List of Panes
|
||||
*
|
||||
*/
|
||||
|
||||
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 = '';
|
||||
this.addPane = function(pane) {
|
||||
if ($scope.panes.length === 0) {
|
||||
$scope.showPane(pane);
|
||||
}
|
||||
|
||||
//HIDE/SHOW CONTENT
|
||||
$examples.addClass('is-hidden');
|
||||
$firstItem.removeClass('is-hidden');
|
||||
$scope.panes.push(pane);
|
||||
};
|
||||
|
||||
//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');
|
||||
/*
|
||||
* Show selected Code Examples
|
||||
*
|
||||
*/
|
||||
|
||||
//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);
|
||||
// SELECT CURRENT EXAMPLE
|
||||
pane.selected = true;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Finish Rendereding then prettify code
|
||||
*
|
||||
*/
|
||||
|
||||
$scope.$watch($scope.panes.$last,function(){
|
||||
$timeout(prettyPrint, 1);
|
||||
});
|
||||
},
|
||||
|
||||
//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;
|
||||
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>'
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue