restructure directories
This commit is contained in:
Alex Wolfe
parent
2bb004c44a
commit
feabd268fc
|
|
@ -13,8 +13,13 @@ script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.
|
|||
script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js")
|
||||
|
||||
|
||||
|
||||
<!-- Angular.io Site JS -->
|
||||
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")
|
||||
|
||||
|
||||
<!-- GA -->
|
||||
script.
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<!-- BIO CARDS -->
|
||||
for person, name in bios
|
||||
.c3
|
||||
md-card(class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}" data-name="#{person.name}" ng-click="showBio($event)")
|
||||
md-card(bio class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}" data-name="#{person.name}" ng-click="showBio($event)")
|
||||
header
|
||||
image(src="#{person.picture}" alt="#person.name")
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
/*
|
||||
* Apllication Controller
|
||||
*
|
||||
*/
|
||||
|
||||
angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
|
||||
|
||||
$scope.showDocsNav = false;
|
||||
$scope.showMainNav = false;
|
||||
$scope.showMenu = false;
|
||||
|
||||
// TOGGLE MAIN NAV (TOP) ON MOBILE
|
||||
$scope.toggleDocsMenu = function(event) {
|
||||
event.preventDefault();
|
||||
$scope.showDocsNav = !$scope.showDocsNav;
|
||||
};
|
||||
|
||||
// TOGGLE DOCS NAV
|
||||
$scope.toggleMainMenu = function(event) {
|
||||
event.preventDefault();
|
||||
$scope.showMainNav = !$scope.showMainNav;
|
||||
};
|
||||
|
||||
// TOGGLE DOCS VERSION & LANGUAGE
|
||||
$scope.toggleVersionMenu = function(event) {
|
||||
event.preventDefault();
|
||||
$scope.showMenu = !$scope.showMenu;
|
||||
};
|
||||
|
||||
// INITIALIZE PRETTY PRINT
|
||||
prettyPrint();
|
||||
}]);
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
angularIO.directive('bio', function($rootScope, $timeout) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
replace: true,
|
||||
scope: {},
|
||||
link: function (scope, element, attrs) {
|
||||
var name = element.attr('data-name');
|
||||
var bio = element.attr('data-bio');
|
||||
var pic = element.attr('data-pic');
|
||||
var twitter = element.attr('data-twitter');
|
||||
var website = element.attr('data-website');
|
||||
var $twitter = twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' + element.attr('data-twitter') + '" md-button>Twitter</a>' : '';
|
||||
var $website = website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + element.attr('data-website') + '" md-button>Website</a>' : '';
|
||||
|
||||
scope.showBio = function(event) {
|
||||
$mdDialog.show({
|
||||
parent: angular.element(document.body),
|
||||
targetEvent: $event,
|
||||
template:
|
||||
'<md-dialog class="modal" aria-label="List dialog">' +
|
||||
' <md-content>' +
|
||||
' <img class="left" src="' + pic + '" />' +
|
||||
' <h3 class="text-headline">' + name + '</h3>' +
|
||||
' <div class="modal-social">' + $twitter + $website + '</div>' +
|
||||
' <p class="text-body">' + bio + '</p>' +
|
||||
' </md-content>' +
|
||||
' <div class="md-actions">' +
|
||||
' <md-button ng-click="closeDialog()">' +
|
||||
' Close Bio' +
|
||||
' </md-button>' +
|
||||
' </div>' +
|
||||
'</md-dialog>',
|
||||
locals: {
|
||||
items: $scope.items
|
||||
},
|
||||
controller: DialogController
|
||||
});
|
||||
};
|
||||
|
||||
function DialogController(scope, $mdDialog, items) {
|
||||
scope.items = items;
|
||||
scope.closeDialog = function() {
|
||||
$mdDialog.hide();
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
/*
|
||||
* Code Tabs
|
||||
*
|
||||
*/
|
||||
|
||||
angularIO.directive('code-tabs', function() {
|
||||
return {
|
||||
template: 'Name: {{customer.name}} Address: {{customer.address}}'
|
||||
};
|
||||
|
||||
|
||||
$scope.language = 'es5';
|
||||
var $codeBoxes = $('.code-box');
|
||||
|
||||
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 selected = (index === 0) ? 'is-selected' : '';
|
||||
var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + name+ "</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);
|
||||
});
|
||||
|
||||
//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;
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
/*
|
||||
* 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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -1,183 +0,0 @@
|
|||
/*
|
||||
* Apllication Module
|
||||
*
|
||||
*/
|
||||
|
||||
var angularIO = angular.module('angularIOApp', ['ngMaterial', 'ngTouch'])
|
||||
.config(function($mdThemingProvider) {
|
||||
$mdThemingProvider.theme('default')
|
||||
.primaryPalette('blue', {
|
||||
'default': '700', // by default use shade 400 from the pink palette for primary intentions
|
||||
'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
|
||||
'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
|
||||
'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
|
||||
})
|
||||
// If you specify less than all of the keys, it will inherit from the
|
||||
// default shades
|
||||
.accentPalette('purple', {
|
||||
'default': '200' // use shade 200 for default, and keep all other shades the same
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
* Apllication Controller
|
||||
*
|
||||
*/
|
||||
|
||||
angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
|
||||
|
||||
$scope.showDocsNav = false;
|
||||
$scope.showMainNav = false;
|
||||
$scope.showMenu = false;
|
||||
|
||||
// TOGGLE MAIN NAV (TOP) ON MOBILE
|
||||
$scope.toggleDocsMenu = function(event) {
|
||||
event.preventDefault();
|
||||
$scope.showDocsNav = !$scope.showDocsNav;
|
||||
};
|
||||
|
||||
// TOGGLE DOCS NAV
|
||||
$scope.toggleMainMenu = function(event) {
|
||||
event.preventDefault();
|
||||
$scope.showMainNav = !$scope.showMainNav;
|
||||
};
|
||||
|
||||
// TOGGLE DOCS VERSION & LANGUAGE
|
||||
$scope.toggleVersionMenu = function(event) {
|
||||
event.preventDefault();
|
||||
$scope.showMenu = !$scope.showMenu;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Code Switcher
|
||||
*
|
||||
*/
|
||||
|
||||
$scope.language = 'es5';
|
||||
var $codeBoxes = $('.code-box');
|
||||
|
||||
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 selected = (index === 0) ? 'is-selected' : '';
|
||||
var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + name+ "</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);
|
||||
});
|
||||
|
||||
//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;
|
||||
};
|
||||
|
||||
/*
|
||||
* Code Formatting
|
||||
*
|
||||
*/
|
||||
|
||||
var $codeBlocks = $('pre');
|
||||
|
||||
if($codeBlocks.length) {
|
||||
$codeBlocks.each(function(index, codeEl) {
|
||||
var $codeEl = $(codeEl);
|
||||
|
||||
if(!$codeEl.hasClass('prettyprint')) {
|
||||
$codeEl.addClass('prettyprint linenums');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// BIO MODAL
|
||||
$scope.showBio = function($event) {
|
||||
var parentEl = angular.element(document.body);
|
||||
var person = angular.element($event.currentTarget);
|
||||
var name = person.attr('data-name');
|
||||
var bio = person.attr('data-bio');
|
||||
var pic = person.attr('data-pic');
|
||||
var twitter = person.attr('data-twitter');
|
||||
var website = person.attr('data-website');
|
||||
var $twitter = twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' + person.attr('data-twitter') + '" md-button>Twitter</a>' : '';
|
||||
var $website = website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + person.attr('data-website') + '" md-button>Website</a>' : '';
|
||||
|
||||
$mdDialog.show({
|
||||
parent: parentEl,
|
||||
targetEvent: $event,
|
||||
template:
|
||||
'<md-dialog class="modal" aria-label="List dialog">' +
|
||||
' <md-content>' +
|
||||
' <img class="left" src="' + pic + '" />' +
|
||||
' <h3 class="text-headline">' + name + '</h3>' +
|
||||
' <div class="modal-social">' + $twitter + $website + '</div>' +
|
||||
' <p class="text-body">' + bio + '</p>' +
|
||||
' </md-content>' +
|
||||
' <div class="md-actions">' +
|
||||
' <md-button ng-click="closeDialog()">' +
|
||||
' Close Bio' +
|
||||
' </md-button>' +
|
||||
' </div>' +
|
||||
'</md-dialog>',
|
||||
locals: {
|
||||
items: $scope.items
|
||||
},
|
||||
controller: DialogController
|
||||
});
|
||||
|
||||
function DialogController(scope, $mdDialog, items) {
|
||||
scope.items = items;
|
||||
scope.closeDialog = function() {
|
||||
$mdDialog.hide();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// INITIALIZE PRETTY PRINT
|
||||
prettyPrint();
|
||||
}]);
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue