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

feat(tabs): use uib- prefix #4449

Closed
wants to merge 4 commits into from
Closed

feat(tabs): use uib- prefix #4449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
99fd073
feat(tabs): use `uib-` prefix
icfantv Sep 23, 2015
c05ed59
chore(tabs): use uib- prefix
icfantv Sep 23, 2015
7368c4c
feat(tabs): use uib- prefix
icfantv Sep 24, 2015
5c1408c
feat(tabs): use uib- prefix
icfantv Sep 25, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions src/tabs/docs/demo.html
View file
Open in desktop
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>
<uib-tabset vertical="true" type="pills">
<uib-tab heading="Vertical 1">Vertical content 1</uib-tab>
<tab heading="Vertical 2">Vertical content 2</tab>
</tabset>
</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
Open in desktop
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
233 changes: 188 additions & 45 deletions src/tabs/tabs.js
View file
Open in desktop
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,155 @@ 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('$tabSuppressWarning', false)

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

if (!$tabSuppressWarning) {
$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', '$tabSuppressWarning', function($parse, $log, $tabSuppressWarning) {
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 (!$tabSuppressWarning) {
$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', '$tabSuppressWarning', function($log, $tabSuppressWarning) {
return {
restrict: 'A',
require: '^tab',
link: function(scope, elm) {
if (!$tabSuppressWarning) {
$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', '$tabSuppressWarning', function($log, $tabSuppressWarning) {
return {
restrict: 'A',
require: '^tabset',
link: function(scope, elm, attrs) {
if (!$tabSuppressWarning) {
$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