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

Commit d25a8c2

Browse files
icfantvFoxandxss
icfantv
authored and
Foxandxss
committed
feat(tabs): use uib- prefix
Close #4449
1 parent 23a312d commit d25a8c2

File tree

6 files changed

+401
-189
lines changed

6 files changed

+401
-189
lines changed

‎src/tabs/docs/demo.html

+18-18
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,31 @@
99
</p>
1010
<hr />
1111

12-
<tabset>
13-
<tab heading="Static title">Static content</tab>
14-
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
12+
<uib-tabset>
13+
<uib-tab heading="Static title">Static content</uib-tab>
14+
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
1515
{{tab.content}}
16-
</tab>
17-
<tab select="alertMe()">
18-
<tab-heading>
16+
</uib-tab>
17+
<uib-tab select="alertMe()">
18+
<uib-tab-heading>
1919
<i class="glyphicon glyphicon-bell"></i> Alert!
20-
</tab-heading>
20+
</uib-tab-heading>
2121
I've got an HTML heading, and a select callback. Pretty cool!
22-
</tab>
23-
</tabset>
22+
</uib-tab>
23+
</uib-tabset>
2424

2525
<hr />
2626

27-
<tabset vertical="true" type="pills">
28-
<tab heading="Vertical 1">Vertical content 1</tab>
29-
<tab heading="Vertical 2">Vertical content 2</tab>
30-
</tabset>
27+
<uib-tabset vertical="true" type="pills">
28+
<uib-tab heading="Vertical 1">Vertical content 1</uib-tab>
29+
<uib-tab heading="Vertical 2">Vertical content 2</uib-tab>
30+
</uib-tabset>
3131

3232
<hr />
3333

34-
<tabset justified="true">
35-
<tab heading="Justified">Justified content</tab>
36-
<tab heading="SJ">Short Labeled Justified content</tab>
37-
<tab heading="Long Justified">Long Labeled Justified content</tab>
38-
</tabset>
34+
<uib-tabset justified="true">
35+
<uib-tab heading="Justified">Justified content</uib-tab>
36+
<uib-tab heading="SJ">Short Labeled Justified content</uib-tab>
37+
<uib-tab heading="Long Justified">Long Labeled Justified content</uib-tab>
38+
</uib-tabset>
3939
</div>

‎src/tabs/docs/readme.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ AngularJS version of the tabs directive.
22

33
### Settings ###
44

5-
#### `<tabset>` ####
5+
#### `<uib-tabset>` ####
66

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

19-
#### `<tab>` ####
19+
#### `<uib-tab>` ####
2020

21-
* `heading` or `<tab-heading>`
21+
* `heading` or `<uib-tab-heading>`
2222
:
2323
Heading text or HTML markup.
2424

‎src/tabs/tabs.js

+189-45
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

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

12-
.controller('TabsetController', ['$scope', function TabsetCtrl($scope) {
12+
.controller('UibTabsetController', ['$scope', function ($scope) {
1313
var ctrl = this,
1414
tabs = ctrl.tabs = $scope.tabs = [];
1515

@@ -73,31 +73,31 @@ angular.module('ui.bootstrap.tabs', [])
7373
* @example
7474
<example module="ui.bootstrap">
7575
<file name="index.html">
76-
<tabset>
77-
<tab heading="Tab 1"><b>First</b> Content!</tab>
78-
<tab heading="Tab 2"><i>Second</i> Content!</tab>
79-
</tabset>
76+
<uib-tabset>
77+
<uib-tab heading="Tab 1"><b>First</b> Content!</uib-tab>
78+
<uib-tab heading="Tab 2"><i>Second</i> Content!</uib-tab>
79+
</uib-tabset>
8080
<hr />
81-
<tabset vertical="true">
82-
<tab heading="Vertical Tab 1"><b>First</b> Vertical Content!</tab>
83-
<tab heading="Vertical Tab 2"><i>Second</i> Vertical Content!</tab>
84-
</tabset>
85-
<tabset justified="true">
86-
<tab heading="Justified Tab 1"><b>First</b> Justified Content!</tab>
87-
<tab heading="Justified Tab 2"><i>Second</i> Justified Content!</tab>
88-
</tabset>
81+
<uib-tabset vertical="true">
82+
<uib-tab heading="Vertical Tab 1"><b>First</b> Vertical Content!</uib-tab>
83+
<uib-tab heading="Vertical Tab 2"><i>Second</i> Vertical Content!</uib-tab>
84+
</uib-tabset>
85+
<uib-tabset justified="true">
86+
<uib-tab heading="Justified Tab 1"><b>First</b> Justified Content!</uib-tab>
87+
<uib-tab heading="Justified Tab 2"><i>Second</i> Justified Content!</uib-tab>
88+
</uib-tabset>
8989
</file>
9090
</example>
9191
*/
92-
.directive('tabset', function() {
92+
.directive('uibTabset', function() {
9393
return {
9494
restrict: 'EA',
9595
transclude: true,
9696
replace: true,
9797
scope: {
9898
type: '@'
9999
},
100-
controller: 'TabsetController',
100+
controller: 'UibTabsetController',
101101
templateUrl: 'template/tabs/tabset.html',
102102
link: function(scope, element, attrs) {
103103
scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
@@ -130,19 +130,19 @@ angular.module('ui.bootstrap.tabs', [])
130130
Enable/disable item 2, using disabled binding
131131
</button>
132132
<br />
133-
<tabset>
134-
<tab heading="Tab 1">First Tab</tab>
135-
<tab select="alertMe()">
136-
<tab-heading><i class="icon-bell"></i> Alert me!</tab-heading>
133+
<uib-tabset>
134+
<uib-tab heading="Tab 1">First Tab</uib-tab>
135+
<uib-tab select="alertMe()">
136+
<uib-tab-heading><i class="icon-bell"></i> Alert me!</tab-heading>
137137
Second Tab, with alert callback and html heading!
138-
</tab>
139-
<tab ng-repeat="item in items"
138+
</uib-tab>
139+
<uib-tab ng-repeat="item in items"
140140
heading="{{item.title}}"
141141
disabled="item.disabled"
142142
active="item.active">
143143
{{item.content}}
144-
</tab>
145-
</tabset>
144+
</uib-tab>
145+
</uib-tabset>
146146
</div>
147147
</file>
148148
<file name="script.js">
@@ -173,22 +173,22 @@ angular.module('ui.bootstrap.tabs', [])
173173
* @example
174174
<example module="ui.bootstrap">
175175
<file name="index.html">
176-
<tabset>
177-
<tab>
178-
<tab-heading><b>HTML</b> in my titles?!</tab-heading>
176+
<uib-tabset>
177+
<uib-tab>
178+
<uib-tab-heading><b>HTML</b> in my titles?!</tab-heading>
179179
And some content, too!
180-
</tab>
181-
<tab>
182-
<tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading>
180+
</uib-tab>
181+
<uib-tab>
182+
<uib-tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading>
183183
That's right.
184-
</tab>
185-
</tabset>
184+
</uib-tab>
185+
</uib-tabset>
186186
</file>
187187
</example>
188188
*/
189-
.directive('tab', ['$parse', function($parse) {
189+
.directive('uibTab', ['$parse', function($parse) {
190190
return {
191-
require: '^tabset',
191+
require: '^uibTabset',
192192
restrict: 'EA',
193193
replace: true,
194194
templateUrl: 'template/tabs/tab.html',
@@ -235,11 +235,11 @@ angular.module('ui.bootstrap.tabs', [])
235235
};
236236
}])
237237

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

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

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

275275
function isTabHeading(node) {
276276
return node.tagName && (
277-
node.hasAttribute('tab-heading') ||
278-
node.hasAttribute('data-tab-heading') ||
279-
node.hasAttribute('x-tab-heading') ||
280-
node.tagName.toLowerCase() === 'tab-heading' ||
281-
node.tagName.toLowerCase() === 'data-tab-heading' ||
282-
node.tagName.toLowerCase() === 'x-tab-heading'
277+
node.hasAttribute('tab-heading') || // TODO: remove after deprecation removal
278+
node.hasAttribute('data-tab-heading') || // TODO: remove after deprecation removal
279+
node.hasAttribute('x-tab-heading') || // TODO: remove after deprecation removal
280+
node.hasAttribute('uib-tab-heading') ||
281+
node.hasAttribute('data-uib-tab-heading') ||
282+
node.hasAttribute('x-uib-tab-heading') ||
283+
node.tagName.toLowerCase() === 'tab-heading' || // TODO: remove after deprecation removal
284+
node.tagName.toLowerCase() === 'data-tab-heading' || // TODO: remove after deprecation removal
285+
node.tagName.toLowerCase() === 'x-tab-heading' || // TODO: remove after deprecation removal
286+
node.tagName.toLowerCase() === 'uib-tab-heading' ||
287+
node.tagName.toLowerCase() === 'data-uib-tab-heading' ||
288+
node.tagName.toLowerCase() === 'x-uib-tab-heading'
283289
);
284290
}
285291
});
292+
293+
/* deprecated tabs below */
294+
295+
angular.module('ui.bootstrap.tabs')
296+
297+
.value('$tabsSuppressWarning', false)
298+
299+
.directive('tabset', ['$log', '$tabsSuppressWarning', function($log, $tabsSuppressWarning) {
300+
return {
301+
restrict: 'EA',
302+
transclude: true,
303+
replace: true,
304+
scope: {
305+
type: '@'
306+
},
307+
controller: 'UibTabsetController',
308+
templateUrl: 'template/tabs/tabset.html',
309+
link: function(scope, element, attrs) {
310+
311+
if (!$tabsSuppressWarning) {
312+
$log.warn('tabset is now deprecated. Use uib-tabset instead.');
313+
}
314+
scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
315+
scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : false;
316+
}
317+
};
318+
}])
319+
320+
.directive('tab', ['$parse', '$log', '$tabsSuppressWarning', function($parse, $log, $tabsSuppressWarning) {
321+
return {
322+
require: '^tabset',
323+
restrict: 'EA',
324+
replace: true,
325+
templateUrl: 'template/tabs/tab.html',
326+
transclude: true,
327+
scope: {
328+
active: '=?',
329+
heading: '@',
330+
onSelect: '&select', //This callback is called in contentHeadingTransclude
331+
//once it inserts the tab's content into the dom
332+
onDeselect: '&deselect'
333+
},
334+
controller: function() {
335+
//Empty controller so other directives can require being 'under' a tab
336+
},
337+
link: function(scope, elm, attrs, tabsetCtrl, transclude) {
338+
if (!$tabsSuppressWarning) {
339+
$log.warn('tab is now deprecated. Use uib-tab instead.');
340+
}
341+
342+
scope.$watch('active', function(active) {
343+
if (active) {
344+
tabsetCtrl.select(scope);
345+
}
346+
});
347+
348+
scope.disabled = false;
349+
if (attrs.disable) {
350+
scope.$parent.$watch($parse(attrs.disable), function(value) {
351+
scope.disabled = !!value;
352+
});
353+
}
354+
355+
scope.select = function() {
356+
if (!scope.disabled) {
357+
scope.active = true;
358+
}
359+
};
360+
361+
tabsetCtrl.addTab(scope);
362+
scope.$on('$destroy', function() {
363+
tabsetCtrl.removeTab(scope);
364+
});
365+
366+
//We need to transclude later, once the content container is ready.
367+
//when this link happens, we're inside a tab heading.
368+
scope.$transcludeFn = transclude;
369+
}
370+
};
371+
}])
372+
373+
.directive('tabHeadingTransclude', ['$log', '$tabsSuppressWarning', function($log, $tabsSuppressWarning) {
374+
return {
375+
restrict: 'A',
376+
require: '^tab',
377+
link: function(scope, elm) {
378+
if (!$tabsSuppressWarning) {
379+
$log.warn('tab-heading-transclude is now deprecated. Use uib-tab-heading-transclude instead.');
380+
}
381+
382+
scope.$watch('headingElement', function updateHeadingElement(heading) {
383+
if (heading) {
384+
elm.html('');
385+
elm.append(heading);
386+
}
387+
});
388+
}
389+
};
390+
}])
391+
392+
.directive('tabContentTransclude', ['$log', '$tabsSuppressWarning', function($log, $tabsSuppressWarning) {
393+
return {
394+
restrict: 'A',
395+
require: '^tabset',
396+
link: function(scope, elm, attrs) {
397+
if (!$tabsSuppressWarning) {
398+
$log.warn('tab-content-transclude is now deprecated. Use uib-tab-content-transclude instead.');
399+
}
400+
401+
var tab = scope.$eval(attrs.tabContentTransclude);
402+
403+
//Now our tab is ready to be transcluded: both the tab heading area
404+
//and the tab content area are loaded. Transclude 'em both.
405+
tab.$transcludeFn(tab.$parent, function(contents) {
406+
angular.forEach(contents, function(node) {
407+
if (isTabHeading(node)) {
408+
//Let tabHeadingTransclude know.
409+
tab.headingElement = node;
410+
}
411+
else {
412+
elm.append(node);
413+
}
414+
});
415+
});
416+
}
417+
};
418+
419+
function isTabHeading(node) {
420+
return node.tagName && (
421+
node.hasAttribute('tab-heading') ||
422+
node.hasAttribute('data-tab-heading') ||
423+
node.hasAttribute('x-tab-heading') ||
424+
node.tagName.toLowerCase() === 'tab-heading' ||
425+
node.tagName.toLowerCase() === 'data-tab-heading' ||
426+
node.tagName.toLowerCase() === 'x-tab-heading'
427+
);
428+
}
429+
}]);

0 commit comments

Comments
 (0)