bio directive

This commit is contained in:
Alex Wolfe 2015-05-01 07:40:25 -07:00
parent d4086a71bb
commit 6475fb7e51
3 changed files with 16 additions and 18 deletions

View File

@ -2,7 +2,6 @@
script(src="/resources/js/vendor/prettify.js")
script(src="/resources/js/vendor/lang-basic.js")
script(src="/resources/js/vendor/lang-dart.js")
script(src="/resources/js/vendor/jquery.js")
<!-- Angular Material Dependencies -->

View File

@ -19,7 +19,7 @@
<!-- BIO CARDS -->
for person, name in bios
.c3
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)")
md-card(biocard class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}" data-name="#{person.name}")
header
image(src="#{person.picture}" alt="#person.name")

View File

@ -1,28 +1,27 @@
angularIO.directive('bio', function($rootScope, $timeout) {
angularIO.directive('biocard', function($rootScope, $timeout, $mdDialog) {
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.name = element.attr('data-name');
scope.bio = element.attr('data-bio');
scope.pic = element.attr('data-pic');
scope.twitter = element.attr('data-twitter');
scope.website = element.attr('data-website');
scope.$twitter = scope.twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' + element.attr('data-twitter') + '" md-button>Twitter</a>' : '';
scope.$website = scope.website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + element.attr('data-website') + '" md-button>Website</a>' : '';
scope.showBio = function(event) {
element.on('click', 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>' +
' <img class="left" src="' + scope.pic + '" />' +
' <h3 class="text-headline">' + scope.name + '</h3>' +
' <div class="modal-social">' + scope.$twitter + scope.$website + '</div>' +
' <p class="text-body">' + scope.bio + '</p>' +
' </md-content>' +
' <div class="md-actions">' +
' <md-button ng-click="closeDialog()">' +
@ -31,11 +30,11 @@ angularIO.directive('bio', function($rootScope, $timeout) {
' </div>' +
'</md-dialog>',
locals: {
items: $scope.items
items: scope.items
},
controller: DialogController
});
};
});
function DialogController(scope, $mdDialog, items) {
scope.items = items;