Skip to content

Commit

Permalink
feat(tab): allow html in tab title attribute
Browse files Browse the repository at this point in the history 
Closes #528
  • Loading branch information
@ajoslin
ajoslin committed Feb 7, 2014
1 parent 2d39418 commit 0facb12
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 49 deletions.
15 changes: 8 additions & 7 deletions js/ext/angular/src/directive/ionicTabBar.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
angular.module('ionic.ui.tabs', ['ionic.service.view'])
angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])

/**
* @description
Expand Down Expand Up @@ -93,7 +93,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
$scope.tabsController = this;

}],

template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',

compile: function(element, attr, transclude, tabsCtrl) {
Expand Down Expand Up @@ -245,8 +245,8 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
transclude: true,
replace: true,
scope: true,
template: '<div class="tabs">' +
'<tab-controller-item icon-title="{{c.title}}" icon="{{c.icon}}" icon-on="{{c.iconOn}}" icon-off="{{c.iconOff}}" badge="c.badge" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' +
template: '<div class="tabs">' +
'<tab-controller-item icon-title="{{c.title}}" icon="{{c.icon}}" icon-on="{{c.iconOn}}" icon-off="{{c.iconOff}}" badge="c.badge" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' +
'</div>',
link: function($scope, $element, $attr, tabsCtrl) {
$element.addClass($scope.tabsType);
Expand Down Expand Up @@ -274,17 +274,18 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
if(attrs.icon) {
scope.iconOn = scope.iconOff = attrs.icon;
}

scope.selectTab = function() {
tabsCtrl.select(scope.index, true);
};
},
template:
template:
'<a ng-class="{active:active, \'has-badge\':badge}" ng-click="selectTab()" class="tab-item">' +
'<i class="badge" ng-if="badge">{{badge}}</i>' +
'<i class="icon {{icon}}" ng-if="icon"></i>' +
'<i class="{{iconOn}}" ng-if="active"></i>' +
'<i class="{{iconOff}}" ng-if="!active"></i> {{iconTitle}}' +
'<i class="{{iconOff}}" ng-if="!active"></i>' +
'<span bind-html-unsafe="iconTitle"></span>' +
'</a>'
};
}]);
Expand Down
66 changes: 25 additions & 41 deletions js/ext/angular/test/directive/ionicTabBar.unit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ describe('Tab Bar Controller', function() {
var compile, element, scope, ctrl;

beforeEach(module('ionic.ui.tabs'));

beforeEach(inject(function($compile, $rootScope, $controller) {
compile = $compile;
scope = $rootScope;
Expand Down Expand Up @@ -63,20 +63,20 @@ describe('Tab Bar Controller', function() {

describe('Tabs directive', function() {
var compile, element, scope;

beforeEach(module('ionic.ui.tabs'));

beforeEach(inject(function($compile, $rootScope) {
compile = $compile;
scope = $rootScope;
}));

it('Has tab class', function() {
element = compile('<tabs></tabs>')(scope);
scope.$digest();
expect(element.find('.tabs').hasClass('tabs')).toBe(true);
});

it('Has tab children', function() {
element = compile('<tabs></tabs>')(scope);
scope = element.scope();
Expand All @@ -90,18 +90,18 @@ describe('Tabs directive', function() {
});

it('Has compiled children', function() {
element = compile('<tabs>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
element = compile('<tabs>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'</tabs>')(scope);
scope.$digest();
expect(element.find('a').length).toBe(2);
});

it('Sets style on child tabs', function() {
element = compile('<tabs tabs-type="tabs-positive" tabs-style="tabs-icon-bottom">' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
element = compile('<tabs tabs-type="tabs-positive" tabs-style="tabs-icon-bottom">' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'</tabs>')(scope);
scope.$digest();
var tabs = element[0].querySelector('.tabs');
Expand All @@ -110,9 +110,9 @@ describe('Tabs directive', function() {
});

it('Has nav-view', function() {
element = compile('<tabs>' +
'<tab active="true" title="Item 1" href="#/page1"><nav-view name="name1"></nav-view></tab>' +
'<tab active="true" title="Item 2" href="/page2">content2</tab>' +
element = compile('<tabs>' +
'<tab active="true" title="Item 1" href="#/page1"><nav-view name="name1"></nav-view></tab>' +
'<tab active="true" title="Item 2" href="/page2">content2</tab>' +
'</tabs>')(scope);
scope = element.scope();
scope.$digest();
Expand All @@ -129,7 +129,7 @@ describe('Tabs directive', function() {

describe('Tab Item directive', function() {
var compile, element, scope, ctrl;

beforeEach(module('ionic.ui.tabs'));

beforeEach(inject(function($compile, $rootScope, $document, $controller) {
Expand All @@ -138,23 +138,16 @@ describe('Tab Item directive', function() {

scope.badgeValue = 3;
element = compile('<tabs>' +
'<tab title="Item" icon="icon-default" badge="badgeValue"></tab>' +
'<tab title="Item" icon="icon-default" badge="badgeValue"></tab>' +
'</tabs>')(scope);
scope.$digest();
$document[0].body.appendChild(element[0]);
}));

it('Default text works', function() {
var title = '';
var a = element.find('a')[0];
for(i = 0, j = a.childNodes.length; i < j; i++) {
child = a.childNodes[i];

if (child.nodeName === "#text") {
title += child.nodeValue.trim();
}
}
expect(title).toEqual('Item');
it('Title works', function() {
//The badge's text gets in the way of just doing .text() on the element itself, so exclude it
var notBadge = angular.element(element[0].querySelectorAll('a >:not(.badge)'));
expect(notBadge.text().trim()).toEqual('Item');
});

it('Default icon works', function() {
Expand Down Expand Up @@ -189,7 +182,7 @@ describe('Tab Item directive', function() {

describe('Tab Controller Item directive', function() {
var compile, element, scope, ctrl;

beforeEach(module('ionic.ui.tabs'));

beforeEach(inject(function($compile, $rootScope, $document, $controller) {
Expand All @@ -198,24 +191,15 @@ describe('Tab Controller Item directive', function() {

scope.badgeValue = 3;
scope.isActive = false;
element = compile('<tabs class="tabs">' +
'<tab-controller-item icon-title="Icon title" icon="icon-class" icon-on="icon-on-class" icon-off="icon-off-class" badge="badgeValue" active="isActive" index="0"></tab-controller-item>' +
element = compile('<tabs class="tabs">' +
'<tab-controller-item icon-title="Icon <b>title</b>" icon="icon-class" icon-on="icon-on-class" icon-off="icon-off-class" badge="badgeValue" active="isActive" index="0"></tab-controller-item>' +
'</tabs>')(scope);
scope.$digest();
$document[0].body.appendChild(element[0]);
}));

it('Icon title works', function() {
var title = '';
var a = element.find('a')[0];
for(var i = 0, j = a.childNodes.length; i < j; i++) {
child = a.childNodes[i];

if (child.nodeName === "#text") {
title += child.nodeValue.trim();
}
}
expect(title).toEqual('Icon title');

it('Icon title works as html', function() {
expect(element.find('a').find('span').html()).toEqual('Icon <b>title</b>');
});

it('Icon classes works', function() {
Expand Down
2 changes: 1 addition & 1 deletion js/ext/angular/test/tabs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
tabs-style="tabs-top tabs-positive"
controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">

<tab title="Tasks" icon-on="icon ion-ios7-filing" icon-off="icon ion-ios7-filing-outline" ng-controller="HomeCtrl">
<tab title="<img src='http://placekitten.com/40/40'>" ng-controller="HomeCtrl">
<header class="bar bar-header bar-positive">
<button class="button button-icon icon ion-plus" ng-click="newTask()"></button>
<h1 class="title">Tasks</h1>
Expand Down

0 comments on commit 0facb12

Please sign in to comment.