Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(tabs): use uib- prefix
Browse files Browse the repository at this point in the history 
Close #4449
  • Loading branch information
@icfantv @Foxandxss
icfantv authored and Foxandxss committed Sep 26, 2015
1 parent 23a312d commit d25a8c2
Show file tree
Hide file tree
Showing 6 changed files with 401 additions and 189 deletions.
36 changes: 18 additions & 18 deletions src/tabs/docs/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,31 @@
</p>
<hr />

<tabset>
<tab heading="Static title">Static content</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
<uib-tabset>
<uib-tab heading="Static title">Static content</uib-tab>
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
{{tab.content}}
</tab>
<tab select="alertMe()">
<tab-heading>
</uib-tab>
<uib-tab select="alertMe()">
<uib-tab-heading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</tab-heading>
</uib-tab-heading>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
</uib-tab>
</uib-tabset>

<hr />

<tabset vertical="true" type="pills">
<tab heading="Vertical 1">Vertical content 1</tab>
<tab heading="Vertical 2">Vertical content 2</tab>
</tabset>
<uib-tabset vertical="true" type="pills">
<uib-tab heading="Vertical 1">Vertical content 1</uib-tab>
<uib-tab heading="Vertical 2">Vertical content 2</uib-tab>
</uib-tabset>

<hr />

<tabset justified="true">
<tab heading="Justified">Justified content</tab>
<tab heading="SJ">Short Labeled Justified content</tab>
<tab heading="Long Justified">Long Labeled Justified content</tab>
</tabset>
<uib-tabset justified="true">
<uib-tab heading="Justified">Justified content</uib-tab>
<uib-tab heading="SJ">Short Labeled Justified content</uib-tab>
<uib-tab heading="Long Justified">Long Labeled Justified content</uib-tab>
</uib-tabset>
</div>
6 changes: 3 additions & 3 deletions src/tabs/docs/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ AngularJS version of the tabs directive.

### Settings ###

#### `<tabset>` ####
#### `<uib-tabset>` ####

* `vertical`
_(Defaults: false)_ :
Expand All @@ -16,9 +16,9 @@ AngularJS version of the tabs directive.
_(Defaults: 'tabs')_ :
Navigation type. Possible values are 'tabs' and 'pills'.

#### `<tab>` ####
#### `<uib-tab>` ####

* `heading` or `<tab-heading>`
* `heading` or `<uib-tab-heading>`
:
Heading text or HTML markup.

Expand Down
234 changes: 189 additions & 45 deletions src/tabs/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

angular.module('ui.bootstrap.tabs', [])

.controller('TabsetController', ['$scope', function TabsetCtrl($scope) {
.controller('UibTabsetController', ['$scope', function ($scope) {
var ctrl = this,
tabs = ctrl.tabs = $scope.tabs = [];

Expand Down Expand Up @@ -73,31 +73,31 @@ angular.module('ui.bootstrap.tabs', [])
* @example
<example module="ui.bootstrap">
<file name="index.html">
<tabset>
<tab heading="Tab 1"><b>First</b> Content!</tab>
<tab heading="Tab 2"><i>Second</i> Content!</tab>
</tabset>
<uib-tabset>
<uib-tab heading="Tab 1"><b>First</b> Content!</uib-tab>
<uib-tab heading="Tab 2"><i>Second</i> Content!</uib-tab>
</uib-tabset>
<hr />
<tabset vertical="true">
<tab heading="Vertical Tab 1"><b>First</b> Vertical Content!</tab>
<tab heading="Vertical Tab 2"><i>Second</i> Vertical Content!</tab>
</tabset>
<tabset justified="true">
<tab heading="Justified Tab 1"><b>First</b> Justified Content!</tab>
<tab heading="Justified Tab 2"><i>Second</i> Justified Content!</tab>
</tabset>
<uib-tabset vertical="true">
<uib-tab heading="Vertical Tab 1"><b>First</b> Vertical Content!</uib-tab>
<uib-tab heading="Vertical Tab 2"><i>Second</i> Vertical Content!</uib-tab>
</uib-tabset>
<uib-tabset justified="true">
<uib-tab heading="Justified Tab 1"><b>First</b> Justified Content!</uib-tab>
<uib-tab heading="Justified Tab 2"><i>Second</i> Justified Content!</uib-tab>
</uib-tabset>
</file>
</example>
*/
.directive('tabset', function() {
.directive('uibTabset', function() {
return {
restrict: 'EA',
transclude: true,
replace: true,
scope: {
type: '@'
},
controller: 'TabsetController',
controller: 'UibTabsetController',
templateUrl: 'template/tabs/tabset.html',
link: function(scope, element, attrs) {
scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
Expand Down Expand Up @@ -130,19 +130,19 @@ angular.module('ui.bootstrap.tabs', [])
Enable/disable item 2, using disabled binding
</button>
<br />
<tabset>
<tab heading="Tab 1">First Tab</tab>
<tab select="alertMe()">
<tab-heading><i class="icon-bell"></i> Alert me!</tab-heading>
<uib-tabset>
<uib-tab heading="Tab 1">First Tab</uib-tab>
<uib-tab select="alertMe()">
<uib-tab-heading><i class="icon-bell"></i> Alert me!</tab-heading>
Second Tab, with alert callback and html heading!
</tab>
<tab ng-repeat="item in items"
</uib-tab>
<uib-tab ng-repeat="item in items"
heading="{{item.title}}"
disabled="item.disabled"
active="item.active">
{{item.content}}
</tab>
</tabset>
</uib-tab>
</uib-tabset>
</div>
</file>
<file name="script.js">
Expand Down Expand Up @@ -173,22 +173,22 @@ angular.module('ui.bootstrap.tabs', [])
* @example
<example module="ui.bootstrap">
<file name="index.html">
<tabset>
<tab>
<tab-heading><b>HTML</b> in my titles?!</tab-heading>
<uib-tabset>
<uib-tab>
<uib-tab-heading><b>HTML</b> in my titles?!</tab-heading>
And some content, too!
</tab>
<tab>
<tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading>
</uib-tab>
<uib-tab>
<uib-tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading>
That's right.
</tab>
</tabset>
</uib-tab>
</uib-tabset>
</file>
</example>
*/
.directive('tab', ['$parse', function($parse) {
.directive('uibTab', ['$parse', function($parse) {
return {
require: '^tabset',
require: '^uibTabset',
restrict: 'EA',
replace: true,
templateUrl: 'template/tabs/tab.html',
Expand Down Expand Up @@ -235,11 +235,11 @@ angular.module('ui.bootstrap.tabs', [])
};
}])

.directive('tabHeadingTransclude', function() {
.directive('uibTabHeadingTransclude', function() {
return {
restrict: 'A',
require: '^tab',
link: function(scope, elm, attrs, tabCtrl) {
require: ['?^uibTab', '?^tab'], // TODO: change to '^uibTab' after deprecation removal
link: function(scope, elm) {
scope.$watch('headingElement', function updateHeadingElement(heading) {
if (heading) {
elm.html('');
Expand All @@ -250,12 +250,12 @@ angular.module('ui.bootstrap.tabs', [])
};
})

.directive('tabContentTransclude', function() {
.directive('uibTabContentTransclude', function() {
return {
restrict: 'A',
require: '^tabset',
require: ['?^uibTabset', '?^tabset'], // TODO: change to '^uibTabset' after deprecation removal
link: function(scope, elm, attrs) {
var tab = scope.$eval(attrs.tabContentTransclude);
var tab = scope.$eval(attrs.uibTabContentTransclude);

//Now our tab is ready to be transcluded: both the tab heading area
//and the tab content area are loaded. Transclude 'em both.
Expand All @@ -274,12 +274,156 @@ angular.module('ui.bootstrap.tabs', [])

function isTabHeading(node) {
return node.tagName && (
node.hasAttribute('tab-heading') ||
node.hasAttribute('data-tab-heading') ||
node.hasAttribute('x-tab-heading') ||
node.tagName.toLowerCase() === 'tab-heading' ||
node.tagName.toLowerCase() === 'data-tab-heading' ||
node.tagName.toLowerCase() === 'x-tab-heading'
node.hasAttribute('tab-heading') || // TODO: remove after deprecation removal
node.hasAttribute('data-tab-heading') || // TODO: remove after deprecation removal
node.hasAttribute('x-tab-heading') || // TODO: remove after deprecation removal
node.hasAttribute('uib-tab-heading') ||
node.hasAttribute('data-uib-tab-heading') ||
node.hasAttribute('x-uib-tab-heading') ||
node.tagName.toLowerCase() === 'tab-heading' || // TODO: remove after deprecation removal
node.tagName.toLowerCase() === 'data-tab-heading' || // TODO: remove after deprecation removal
node.tagName.toLowerCase() === 'x-tab-heading' || // TODO: remove after deprecation removal
node.tagName.toLowerCase() === 'uib-tab-heading' ||
node.tagName.toLowerCase() === 'data-uib-tab-heading' ||
node.tagName.toLowerCase() === 'x-uib-tab-heading'
);
}
});

/* deprecated tabs below */

angular.module('ui.bootstrap.tabs')

.value('$tabsSuppressWarning', false)

.directive('tabset', ['$log', '$tabsSuppressWarning', function($log, $tabsSuppressWarning) {
return {
restrict: 'EA',
transclude: true,
replace: true,
scope: {
type: '@'
},
controller: 'UibTabsetController',
templateUrl: 'template/tabs/tabset.html',
link: function(scope, element, attrs) {

if (!$tabsSuppressWarning) {
$log.warn('tabset is now deprecated. Use uib-tabset instead.');
}
scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : false;
}
};
}])

.directive('tab', ['$parse', '$log', '$tabsSuppressWarning', function($parse, $log, $tabsSuppressWarning) {
return {
require: '^tabset',
restrict: 'EA',
replace: true,
templateUrl: 'template/tabs/tab.html',
transclude: true,
scope: {
active: '=?',
heading: '@',
onSelect: '&select', //This callback is called in contentHeadingTransclude
//once it inserts the tab's content into the dom
onDeselect: '&deselect'
},
controller: function() {
//Empty controller so other directives can require being 'under' a tab
},
link: function(scope, elm, attrs, tabsetCtrl, transclude) {
if (!$tabsSuppressWarning) {
$log.warn('tab is now deprecated. Use uib-tab instead.');
}

scope.$watch('active', function(active) {
if (active) {
tabsetCtrl.select(scope);
}
});

scope.disabled = false;
if (attrs.disable) {
scope.$parent.$watch($parse(attrs.disable), function(value) {
scope.disabled = !!value;
});
}

scope.select = function() {
if (!scope.disabled) {
scope.active = true;
}
};

tabsetCtrl.addTab(scope);
scope.$on('$destroy', function() {
tabsetCtrl.removeTab(scope);
});

//We need to transclude later, once the content container is ready.
//when this link happens, we're inside a tab heading.
scope.$transcludeFn = transclude;
}
};
}])

.directive('tabHeadingTransclude', ['$log', '$tabsSuppressWarning', function($log, $tabsSuppressWarning) {
return {
restrict: 'A',
require: '^tab',
link: function(scope, elm) {
if (!$tabsSuppressWarning) {
$log.warn('tab-heading-transclude is now deprecated. Use uib-tab-heading-transclude instead.');
}

scope.$watch('headingElement', function updateHeadingElement(heading) {
if (heading) {
elm.html('');
elm.append(heading);
}
});
}
};
}])

.directive('tabContentTransclude', ['$log', '$tabsSuppressWarning', function($log, $tabsSuppressWarning) {
return {
restrict: 'A',
require: '^tabset',
link: function(scope, elm, attrs) {
if (!$tabsSuppressWarning) {
$log.warn('tab-content-transclude is now deprecated. Use uib-tab-content-transclude instead.');
}

var tab = scope.$eval(attrs.tabContentTransclude);

//Now our tab is ready to be transcluded: both the tab heading area
//and the tab content area are loaded. Transclude 'em both.
tab.$transcludeFn(tab.$parent, function(contents) {
angular.forEach(contents, function(node) {
if (isTabHeading(node)) {
//Let tabHeadingTransclude know.
tab.headingElement = node;
}
else {
elm.append(node);
}
});
});
}
};

function isTabHeading(node) {
return node.tagName && (
node.hasAttribute('tab-heading') ||
node.hasAttribute('data-tab-heading') ||
node.hasAttribute('x-tab-heading') ||
node.tagName.toLowerCase() === 'tab-heading' ||
node.tagName.toLowerCase() === 'data-tab-heading' ||
node.tagName.toLowerCase() === 'x-tab-heading'
);
}
}]);
Loading

0 comments on commit d25a8c2

Please sign in to comment.