remove tabs dependecy on bootstrap
This commit is contained in:
Mads Rasmussen
@@ -1,14 +0,0 @@
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name umbraco.directives.directive:umbTab
|
||||
* @restrict E
|
||||
**/
|
||||
angular.module("umbraco.directives")
|
||||
.directive('umbTab', function ($parse, $timeout) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: 'true',
|
||||
templateUrl: 'views/components/tabs/umb-tab.html'
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name umbraco.directives.directive:umbTab
|
||||
* @restrict E
|
||||
**/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('umbraco.directives')
|
||||
.component('umbTabContent', {
|
||||
transclude: true,
|
||||
templateUrl: 'views/components/tabs/umb-tab-content.html'
|
||||
});
|
||||
|
||||
})();
|
||||
@@ -1,54 +0,0 @@
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name umbraco.directives.directive:umbTabs
|
||||
* @restrict A
|
||||
* @description Used to bind to bootstrap tab events so that sub directives can use this API to listen to tab changes
|
||||
**/
|
||||
angular.module("umbraco.directives")
|
||||
.directive('umbTabs', function () {
|
||||
return {
|
||||
restrict: 'A',
|
||||
controller: function ($scope, $element, $attrs, eventsService) {
|
||||
|
||||
var callbacks = [];
|
||||
this.onTabShown = function(cb) {
|
||||
callbacks.push(cb);
|
||||
};
|
||||
|
||||
function tabShown(event) {
|
||||
|
||||
var curr = $(event.target); // active tab
|
||||
var prev = $(event.relatedTarget); // previous tab
|
||||
|
||||
// emit tab change event
|
||||
var tabId = Number(curr.context.hash.replace("#tab", ""));
|
||||
var args = { id: tabId, hash: curr.context.hash };
|
||||
|
||||
eventsService.emit("app.tabChange", args);
|
||||
|
||||
$scope.$apply();
|
||||
|
||||
for (var c in callbacks) {
|
||||
callbacks[c].apply(this, [{current: curr, previous: prev}]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//NOTE: it MUST be done this way - binding to an ancestor element that exists
|
||||
// in the DOM to bind to the dynamic elements that will be created.
|
||||
// It would be nicer to create this event handler as a directive for which child
|
||||
// directives can attach to.
|
||||
$element.on('shown', '.nav-tabs a', tabShown);
|
||||
|
||||
//ensure to unregister
|
||||
$scope.$on('$destroy', function () {
|
||||
$element.off('shown', '.nav-tabs a', tabShown);
|
||||
|
||||
for (var c in callbacks) {
|
||||
delete callbacks[c];
|
||||
}
|
||||
callbacks = null;
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -1,25 +0,0 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
function UmbTabsContentDirective() {
|
||||
|
||||
function link(scope, el, attr, ctrl) {
|
||||
|
||||
scope.view = attr.view;
|
||||
|
||||
}
|
||||
|
||||
var directive = {
|
||||
restrict: "E",
|
||||
replace: true,
|
||||
transclude: 'true',
|
||||
templateUrl: "views/components/tabs/umb-tabs-content.html",
|
||||
link: link
|
||||
};
|
||||
|
||||
return directive;
|
||||
}
|
||||
|
||||
angular.module('umbraco.directives').directive('umbTabsContent', UmbTabsContentDirective);
|
||||
|
||||
})();
|
||||
@@ -1,57 +1,33 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
function UmbTabsNavDirective($timeout) {
|
||||
|
||||
function link(scope, el, attr) {
|
||||
|
||||
function activate() {
|
||||
|
||||
$timeout(function () {
|
||||
|
||||
//use bootstrap tabs API to show the first one
|
||||
el.find("a:first").tab('show');
|
||||
|
||||
//enable the tab drop
|
||||
el.tabdrop();
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('umbraco.directives')
|
||||
.component('umbTabsNav', {
|
||||
transclude: true,
|
||||
templateUrl: "views/components/tabs/umb-tabs-nav.html",
|
||||
controller: UmbTabsNavController,
|
||||
controllerAs: 'vm',
|
||||
bindings: {
|
||||
tabs: "<",
|
||||
onTabChange: "&"
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
function UmbTabsNavController(eventsService) {
|
||||
|
||||
var unbindModelWatch = scope.$watch('model', function(newValue, oldValue){
|
||||
var vm = this;
|
||||
|
||||
activate();
|
||||
vm.clickTab = clickTab;
|
||||
|
||||
});
|
||||
|
||||
|
||||
scope.$on('$destroy', function () {
|
||||
|
||||
//ensure to destroy tabdrop (unbinds window resize listeners)
|
||||
el.tabdrop("destroy");
|
||||
|
||||
unbindModelWatch();
|
||||
|
||||
});
|
||||
function clickTab($event, tab) {
|
||||
if (vm.onTabChange) {
|
||||
var args = { "tab": tab, "tabs": vm.tabs };
|
||||
eventsService.emit("app.tabChange", args);
|
||||
vm.onTabChange({ "event": $event, "tab": tab });
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var directive = {
|
||||
restrict: "E",
|
||||
replace: true,
|
||||
templateUrl: "views/components/tabs/umb-tabs-nav.html",
|
||||
scope: {
|
||||
model: "=",
|
||||
tabdrop: "=",
|
||||
idSuffix: "@"
|
||||
},
|
||||
link: link
|
||||
};
|
||||
|
||||
return directive;
|
||||
}
|
||||
|
||||
angular.module('umbraco.directives').directive('umbTabsNav', UmbTabsNavDirective);
|
||||
|
||||
})();
|
||||
})();
|
||||
@@ -1,3 +1,31 @@
|
||||
.umb-nav-tabs {
|
||||
position: relative;
|
||||
.umb-tabs-nav {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.umb-tab {
|
||||
display: inline-flex;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.umb-tab > a {
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: @gray-3;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.umb-tab > a:hover {
|
||||
color: @black;
|
||||
}
|
||||
|
||||
.umb-tab--active > a,
|
||||
.umb-tab--active > a:hover,
|
||||
.umb-tab--active > a:focus {
|
||||
color: @black;
|
||||
border-bottom-color: @turquoise;
|
||||
cursor: default;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class='umb-tab-pane tab-pane'>
|
||||
<div class='umb-tab-pane-inner'>
|
||||
<div ng-transclude></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='umb-tab-pane tab-pane'>
|
||||
<div class='umb-tab-pane-inner'>
|
||||
<div ng-transclude></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1 +0,0 @@
|
||||
<div class="tab-content" ng-class="{'umb-tab-content': !view}" ng-transclude></div>
|
||||
@@ -1,5 +1,5 @@
|
||||
<ul class="nav nav-tabs umb-nav-tabs">
|
||||
<li data-element="tab-{{tab.alias}}" ng-class="{'tab-error': tabHasError}" ng-repeat="tab in model" val-tab>
|
||||
<a data-toggle="tab" href="#tab{{tab.id}}{{idSuffix}}">{{ tab.label }}</a>
|
||||
</li>
|
||||
<ul class="umb-tabs-nav">
|
||||
<li class="umb-tab" data-element="tab-{{tab.alias}}" ng-class="{'umb-tab--active': tab.active, 'tab-error': tabHasError}" ng-repeat="tab in vm.tabs" val-tab>
|
||||
<a ng-href="" ng-click="vm.clickTab($event, tab)">{{ tab.label }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user