Skip to content

N
nexpie-grafana-theme
Commit f93215f4 by Torkel Ödegaard
Options

feat(timepicker2): more progress

parent 2a52d9bd
Showing with 38 additions and 813 deletions
public/app/core/utils/rangeutil.ts
......@@ -16,8 +16,8 @@ var spans = {
var rangeOptions = [
{ from: 'now/d', to: 'now/d', display: 'Today', section: 2 },
{ from: 'now/w', to: 'now/w', display: 'This week', section: 2 },
{ from: 'now/d', to: 'now', display: 'The day so far', section: 2 },
{ from: 'now/w', to: 'now/w', display: 'This week', section: 2 },
{ from: 'now/w', to: 'now', display: 'Week to date', section: 2 },
{ from: 'now/M', to: 'now/M', display: 'This month', section: 2 },
{ from: 'now/y', to: 'now/y', display: 'This year', section: 2 },
......
public/app/features/dashboard/timeSrv.js
......@@ -23,7 +23,7 @@ define([
this._parseTime();
if(this.dashboard.refresh) {
this.set_interval(this.dashboard.refresh);
this.setAutoRefresh(this.dashboard.refresh);
}
};
......@@ -64,7 +64,7 @@ define([
}
};
this.set_interval = function (interval) {
this.setAutoRefresh = function (interval) {
this.dashboard.refresh = interval;
if (interval) {
var _i = kbn.interval_to_ms(interval);
......@@ -96,10 +96,10 @@ define([
// disable refresh if we have an absolute time
if (_.isString(time.to) && time.to.indexOf('now') === -1) {
this.old_refresh = this.dashboard.refresh || this.old_refresh;
this.set_interval(false);
this.setAutoRefresh(false);
}
else if (this.old_refresh && this.old_refresh !== this.dashboard.refresh) {
this.set_interval(this.old_refresh);
this.setAutoRefresh(this.old_refresh);
this.old_refresh = null;
}
......
public/app/features/dashboard/timepicker/dropdown.html
......@@ -22,9 +22,10 @@
</div>
<label class="small">Refreshing every:</label>
<select ng-model="currentRefresh" class='input-large' ng-options="f for f in refreshOptions"></select>
<select ng-model="refresh.value" class='input-medium' ng-options="f.value as f.text for f in refresh.options">
</select>
<button class="btn btn-inverse pull-right" type="button" ng-click="applyCustomTimeRange()">
<button class="btn btn-inverse gf-timepicker-btn-apply" type="button" ng-click="ctrl.applyCustom()">
Apply
</button>
</div>
......@@ -41,55 +42,3 @@
</div>
<div class="clearfix"></div>
<!-- <tabset> -->
<!-- <tab heading="Relative"> -->
<!-- -->
<!-- <div style="float:right; width: 200px" ng&#45;repeat="group in timeOptions"> -->
<!-- <ul> -->
<!-- <li bindonce ng&#45;repeat='option in group'> -->
<!-- <a ng&#45;click="ctrl.setRelativeFilter(option)" bo&#45;text="option.display"></a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- -->
<!-- </tab> -->
<!-- <tab heading="Absolute"> -->
<!-- -->
<!-- <form name="timeForm" style="margin: 0 20px 20px 20px"> -->
<!-- <div class="gf&#45;timepicker&#45;section"> -->
<!-- <div> -->
<!-- <div class="tight&#45;form last"> -->
<!-- </div> -->
<!-- <label class="small">From:</label> -->
<!-- <input type="text" required class="input&#45;large" ng&#45;model="absolute.from" input&#45;datetime="MMMM Do YYYY, HH:mm:ss.SSS"> -->
<!-- <br> -->
<!-- </div> -->
<!-- <datepicker ng&#45;model="absolute.from" class="gf&#45;timepicker&#45;component" show&#45;weeks="false"></datepicker> -->
<!-- </div> -->
<!-- <div class="gf&#45;timepicker&#45;section"> -->
<!-- <div> -->
<!-- <label class="small">To:</label> -->
<!-- <input type="text" required class="input&#45;large" ng&#45;model="absolute.to" input&#45;datetime="MMMM Do YYYY, HH:mm:ss.SSS"> -->
<!-- <br> -->
<!-- </div> -->
<!-- <datepicker ng&#45;model="absolute.to" class="gf&#45;timepicker&#45;component" show&#45;weeks="false"></datepicker> -->
<!-- </div> -->
<!-- <div class="clearfix"></div> -->
<!-- </form> -->
<!-- </tab> -->
<!-- </tabset> -->
<!-- -->
<!-- <!&#45;&#45; <!&#38;#45;&#38;#45; Auto refresh submenu &#38;#45;&#38;#45;> &#45;&#45;> -->
<!-- <li class="dropdown&#45;submenu"> -->
<!-- <a href="#">Auto&#45;Refresh</a> -->
<!-- <ul class="dropdown&#45;menu" ng&#45;class="{'dropdown&#45;submenu&#45;left': refreshMenuLeftSide}"> -->
<!-- <li> -->
<!-- <a ng&#45;click="timeSrv.set_interval(false)">Off</a> -->
<!-- </li> -->
<!-- <li bindonce ng&#45;repeat="interval in panel.refresh_intervals track by $index"> -->
<!-- <a ng&#45;click="timeSrv.set_interval(interval)" bo&#45;text="'Every ' + interval"></a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </li> -->
<!-- <li><a ng&#45;click="ctrl.customTime()">Custom</a></li> -->
<!-- </div> -->
public/app/features/dashboard/timepicker/timepicker.html
<ul class="nav timepicker-dropdown">
<ul class="nav gf-timepicker-nav">
<li class="grafana-menu-zoom-out">
<a class='small' ng-click='zoom(2)'>
......@@ -7,7 +7,7 @@
</li>
<li>
<a class="timepicker-dropdown" bs-tooltip="tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()">
<a bs-tooltip="tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()">
<i class="fa fa-clock-o"></i>
<span ng-bind="rangeString"></span>
......
public/app/features/dashboard/timepicker/timepicker.ts
......@@ -54,7 +54,7 @@ export class TimePickerCtrl {
this.$scope.dashboard.formatDate(time.to, format);
}
this.$scope.absolute = {form: time.from.toDate(), to: time.to.toDate()};
this.$scope.absoluteJs = {form: time.from.toDate(), to: time.to.toDate()};
this.$scope.timeRaw = timeRaw;
this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from) + ' <br>to<br>';
this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to);
......@@ -66,9 +66,14 @@ export class TimePickerCtrl {
openDropdown() {
this.$scope.timeOptions = rangeUtil.getRelativeTimesList(this.$scope.panel, this.$scope.rangeString);
this.$scope.currentRefresh = this.$scope.dashboard.refresh || 'off';
this.$scope.refreshOptions = this.$scope.panel.refresh_intervals;
this.$scope.refreshOptions.unshift('off');
this.$scope.refresh = {
value: this.$scope.dashboard.refresh,
options: _.map(this.$scope.panel.refresh_intervals, (interval: any) => {
return {text: interval, value: interval};
})
};
this.$scope.refresh.options.unshift({text: 'off'});
this.$scope.appEvent('show-dash-editor', {
src: 'app/features/dashboard/timepicker/dropdown.html',
......@@ -77,36 +82,14 @@ export class TimePickerCtrl {
});
}
customTime() {
// Assume the form is valid since we're setting it to something valid
this.$scope.input.$setValidity("dummy", true);
this.$scope.temptime = angular.copy(this.$scope.time);
this.$scope.temptime.now = this.$scope.panel.now;
// this.$scope.temptime.from.date.setHours(0, 0, 0, 0);
// this.$scope.temptime.to.date.setHours(0, 0, 0, 0);
// Date picker needs the date to be at the start of the day
if (new Date().getTimezoneOffset() < 0) {
this.$scope.temptime.from.date = moment(this.$scope.temptime.from.date).add(1, 'days').toDate();
this.$scope.temptime.to.date = moment(this.$scope.temptime.to.date).add(1, 'days').toDate();
applyCustom() {
console.log(this.$scope.refresh.value);
if (this.$scope.refresh.value !== this.$scope.dashboard.refresh) {
this.timeSrv.setAutoRefresh(this.$scope.refresh.value);
}
this.$scope.appEvent('show-dash-editor', {
src: 'app/features/dashboard/timepicker/custom.html',
scope: this.$scope
});
}
setAbsoluteTimeFilter(time) {
// Create filter object
var _filter = _.clone(time);
if (time.now) {
_filter.to = "now";
}
this.timeSrv.setTime(_filter);
this.timeSrv.setTime(this.$scope.timeRaw);
this.$scope.appEvent('hide-dash-editor');
}
setRelativeFilter(timespan) {
......@@ -122,35 +105,6 @@ export class TimePickerCtrl {
this.$scope.appEvent('hide-dash-editor');
}
validate(time): any {
// Assume the form is valid. There is a hidden dummy input for invalidating it programatically.
this.$scope.input.$setValidity("dummy", true);
var _from = this.datepickerToLocal(time.from.date);
var _to = this.datepickerToLocal(time.to.date);
var _t = time;
if (this.$scope.input.$valid) {
_from.setHours(_t.from.hour, _t.from.minute, _t.from.second, _t.from.millisecond);
_to.setHours(_t.to.hour, _t.to.minute, _t.to.second, _t.to.millisecond);
// Check that the objects are valid and to is after from
if (isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) {
this.$scope.input.$setValidity("dummy", false);
return false;
}
} else {
return false;
}
return { from: _from, to: _to, now: time.now };
}
datepickerToLocal(date) {
date = moment(date).clone().toDate();
return moment(new Date(date.getTime() + date.getTimezoneOffset() * 60000)).toDate();
}
}
export function settingsDirective() {
......
public/less/timepicker.less
.timepicker-to-column {
margin-top: 10px;
}
.timepicker-input input {
outline: 0 !important;
border: 0px !important;
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
position: relative;
}
.timepicker-input input::-webkit-outer-spin-button,
.timepicker-input input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input.timepicker-date {
width: 90px;
}
input.timepicker-hms {
width: 20px;
}
input.timepicker-ms {
width: 25px;
}
div.timepicker-now {
float: right;
.nav.gf-timepicker-nav {
margin-right: 0;
}
.timepicker-timestring {
......@@ -38,7 +7,7 @@ div.timepicker-now {
}
.gf-timepicker-dropdown {
margin: 0px;
margin: 0px 0 15px 0;
padding: 10px 20px;
float: right;
background-color: @grafanaPanelBackground;
......@@ -49,11 +18,19 @@ div.timepicker-now {
width: 300px;
float: left;
border-right: @grafanaTriggerBorder;
padding: 0 20px 0 20px;
padding: 0 0 0 20px;
select {
width: 183px;
margin-bottom: 0;
}
}
.gf-timepicker-btn-apply {
margin: 0 0 0 15px;
}
.gf-timepicker-relative-section {
padding: 0 20px 0 20px;
padding: 0 20px 0 25px;
min-height: 258px;
float: left;
ul {
......
public/vendor/angular-ui/dateparser.js deleted 100644 → 0
angular.module('ui.bootstrap.dateparser', [])
.service('dateParser', ['$log', '$locale', 'orderByFilter', function($log, $locale, orderByFilter) {
// Pulled from https://github.com/mbostock/d3/blob/master/src/format/requote.js
var SPECIAL_CHARACTERS_REGEXP = /[\\\^\$\*\+\?\|\[\]\(\)\.\{\}]/g;
var localeId;
var formatCodeToRegex;
this.init = function() {
localeId = $locale.id;
this.parsers = {};
formatCodeToRegex = {
'yyyy': {
regex: '\\d{4}',
apply: function(value) { this.year = +value; }
},
'yy': {
regex: '\\d{2}',
apply: function(value) { this.year = +value + 2000; }
},
'y': {
regex: '\\d{1,4}',
apply: function(value) { this.year = +value; }
},
'MMMM': {
regex: $locale.DATETIME_FORMATS.MONTH.join('|'),
apply: function(value) { this.month = $locale.DATETIME_FORMATS.MONTH.indexOf(value); }
},
'MMM': {
regex: $locale.DATETIME_FORMATS.SHORTMONTH.join('|'),
apply: function(value) { this.month = $locale.DATETIME_FORMATS.SHORTMONTH.indexOf(value); }
},
'MM': {
regex: '0[1-9]|1[0-2]',
apply: function(value) { this.month = value - 1; }
},
'M': {
regex: '[1-9]|1[0-2]',
apply: function(value) { this.month = value - 1; }
},
'dd': {
regex: '[0-2][0-9]{1}|3[0-1]{1}',
apply: function(value) { this.date = +value; }
},
'd': {
regex: '[1-2]?[0-9]{1}|3[0-1]{1}',
apply: function(value) { this.date = +value; }
},
'EEEE': {
regex: $locale.DATETIME_FORMATS.DAY.join('|')
},
'EEE': {
regex: $locale.DATETIME_FORMATS.SHORTDAY.join('|')
},
'HH': {
regex: '(?:0|1)[0-9]|2[0-3]',
apply: function(value) { this.hours = +value; }
},
'hh': {
regex: '0[0-9]|1[0-2]',
apply: function(value) { this.hours = +value; }
},
'H': {
regex: '1?[0-9]|2[0-3]',
apply: function(value) { this.hours = +value; }
},
'h': {
regex: '[0-9]|1[0-2]',
apply: function(value) { this.hours = +value; }
},
'mm': {
regex: '[0-5][0-9]',
apply: function(value) { this.minutes = +value; }
},
'm': {
regex: '[0-9]|[1-5][0-9]',
apply: function(value) { this.minutes = +value; }
},
'sss': {
regex: '[0-9][0-9][0-9]',
apply: function(value) { this.milliseconds = +value; }
},
'ss': {
regex: '[0-5][0-9]',
apply: function(value) { this.seconds = +value; }
},
's': {
regex: '[0-9]|[1-5][0-9]',
apply: function(value) { this.seconds = +value; }
},
'a': {
regex: $locale.DATETIME_FORMATS.AMPMS.join('|'),
apply: function(value) {
if (this.hours === 12) {
this.hours = 0;
}
if (value === 'PM') {
this.hours += 12;
}
}
}
};
};
this.init();
function createParser(format) {
var map = [], regex = format.split('');
angular.forEach(formatCodeToRegex, function(data, code) {
var index = format.indexOf(code);
if (index > -1) {
format = format.split('');
regex[index] = '(' + data.regex + ')';
format[index] = '$'; // Custom symbol to define consumed part of format
for (var i = index + 1, n = index + code.length; i < n; i++) {
regex[i] = '';
format[i] = '$';
}
format = format.join('');
map.push({ index: index, apply: data.apply });
}
});
return {
regex: new RegExp('^' + regex.join('') + '$'),
map: orderByFilter(map, 'index')
};
}
this.parse = function(input, format, baseDate) {
if (!angular.isString(input) || !format) {
return input;
}
format = $locale.DATETIME_FORMATS[format] || format;
format = format.replace(SPECIAL_CHARACTERS_REGEXP, '\\$&');
if ($locale.id !== localeId) {
this.init();
}
if (!this.parsers[format]) {
this.parsers[format] = createParser(format);
}
var parser = this.parsers[format],
regex = parser.regex,
map = parser.map,
results = input.match(regex);
if (results && results.length) {
var fields, dt;
if (angular.isDate(baseDate) && !isNaN(baseDate.getTime())) {
fields = {
year: baseDate.getFullYear(),
month: baseDate.getMonth(),
date: baseDate.getDate(),
hours: baseDate.getHours(),
minutes: baseDate.getMinutes(),
seconds: baseDate.getSeconds(),
milliseconds: baseDate.getMilliseconds()
};
} else {
if (baseDate) {
$log.warn('dateparser:', 'baseDate is not a valid date');
}
fields = { year: 1900, month: 0, date: 1, hours: 0, minutes: 0, seconds: 0, milliseconds: 0 };
}
for (var i = 1, n = results.length; i < n; i++) {
var mapper = map[i-1];
if (mapper.apply) {
mapper.apply.call(fields, results[i]);
}
}
if (isValid(fields.year, fields.month, fields.date)) {
dt = new Date(fields.year, fields.month, fields.date,
fields.hours, fields.minutes, fields.seconds,
fields.milliseconds || 0);
}
return dt;
}
};
// Check if date is valid for specific month (and year for February).
// Month: 0 = Jan, 1 = Feb, etc
function isValid(year, month, date) {
if (date < 1) {
return false;
}
if (month === 1 && date > 28) {
return date === 29 && ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0);
}
if (month === 3 || month === 5 || month === 8 || month === 10) {
return date < 31;
}
return true;
}
}]);
public/vendor/angular-ui/position.js deleted 100644 → 0
angular.module('ui.bootstrap.position', [])
/**
* A set of utility methods that can be use to retrieve position of DOM elements.
* It is meant to be used where we need to absolute-position DOM elements in
* relation to other, existing elements (this is the case for tooltips, popovers,
* typeahead suggestions etc.).
*/
.factory('$position', ['$document', '$window', function($document, $window) {
function getStyle(el, cssprop) {
if (el.currentStyle) { //IE
return el.currentStyle[cssprop];
} else if ($window.getComputedStyle) {
return $window.getComputedStyle(el)[cssprop];
}
// finally try and get inline style
return el.style[cssprop];
}
/**
* Checks if a given element is statically positioned
* @param element - raw DOM element
*/
function isStaticPositioned(element) {
return (getStyle(element, 'position') || 'static' ) === 'static';
}
/**
* returns the closest, non-statically positioned parentOffset of a given element
* @param element
*/
var parentOffsetEl = function(element) {
var docDomEl = $document[0];
var offsetParent = element.offsetParent || docDomEl;
while (offsetParent && offsetParent !== docDomEl && isStaticPositioned(offsetParent) ) {
offsetParent = offsetParent.offsetParent;
}
return offsetParent || docDomEl;
};
return {
/**
* Provides read-only equivalent of jQuery's position function:
* http://api.jquery.com/position/
*/
position: function(element) {
var elBCR = this.offset(element);
var offsetParentBCR = { top: 0, left: 0 };
var offsetParentEl = parentOffsetEl(element[0]);
if (offsetParentEl != $document[0]) {
offsetParentBCR = this.offset(angular.element(offsetParentEl));
offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
}
var boundingClientRect = element[0].getBoundingClientRect();
return {
width: boundingClientRect.width || element.prop('offsetWidth'),
height: boundingClientRect.height || element.prop('offsetHeight'),
top: elBCR.top - offsetParentBCR.top,
left: elBCR.left - offsetParentBCR.left
};
},
/**
* Provides read-only equivalent of jQuery's offset function:
* http://api.jquery.com/offset/
*/
offset: function(element) {
var boundingClientRect = element[0].getBoundingClientRect();
return {
width: boundingClientRect.width || element.prop('offsetWidth'),
height: boundingClientRect.height || element.prop('offsetHeight'),
top: boundingClientRect.top + ($window.pageYOffset || $document[0].documentElement.scrollTop),
left: boundingClientRect.left + ($window.pageXOffset || $document[0].documentElement.scrollLeft)
};
},
/**
* Provides coordinates for the targetEl in relation to hostEl
*/
positionElements: function(hostEl, targetEl, positionStr, appendToBody) {
var positionStrParts = positionStr.split('-');
var pos0 = positionStrParts[0], pos1 = positionStrParts[1] || 'center';
var hostElPos,
targetElWidth,
targetElHeight,
targetElPos;
hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
targetElWidth = targetEl.prop('offsetWidth');
targetElHeight = targetEl.prop('offsetHeight');
var shiftWidth = {
center: function() {
return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
},
left: function() {
return hostElPos.left;
},
right: function() {
return hostElPos.left + hostElPos.width;
}
};
var shiftHeight = {
center: function() {
return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2;
},
top: function() {
return hostElPos.top;
},
bottom: function() {
return hostElPos.top + hostElPos.height;
}
};
switch (pos0) {
case 'right':
targetElPos = {
top: shiftHeight[pos1](),
left: shiftWidth[pos0]()
};
break;
case 'left':
targetElPos = {
top: shiftHeight[pos1](),
left: hostElPos.left - targetElWidth
};
break;
case 'bottom':
targetElPos = {
top: shiftHeight[pos0](),
left: shiftWidth[pos1]()
};
break;
default:
targetElPos = {
top: hostElPos.top - targetElHeight,
left: shiftWidth[pos1]()
};
break;
}
return targetElPos;
}
};
}]);
public/vendor/angular-ui/tabs.js deleted 100644 → 0
/**
* @ngdoc overview
* @name ui.bootstrap.tabs
*
* @description
* AngularJS version of the tabs directive.
*/
angular.module('ui.bootstrap.tabs', [])
.controller('TabsetController', ['$scope', function TabsetCtrl($scope) {
var ctrl = this,
tabs = ctrl.tabs = $scope.tabs = [];
ctrl.select = function(selectedTab) {
angular.forEach(tabs, function(tab) {
if (tab.active && tab !== selectedTab) {
tab.active = false;
tab.onDeselect();
}
});
selectedTab.active = true;
selectedTab.onSelect();
};
ctrl.addTab = function addTab(tab) {
tabs.push(tab);
// we can't run the select function on the first tab
// since that would select it twice
if (tabs.length === 1 && tab.active !== false) {
tab.active = true;
} else if (tab.active) {
ctrl.select(tab);
}
else {
tab.active = false;
}
};
ctrl.removeTab = function removeTab(tab) {
var index = tabs.indexOf(tab);
//Select a new tab if the tab to be removed is selected and not destroyed
if (tab.active && tabs.length > 1 && !destroyed) {
//If this is the last tab, select the previous tab. else, the next tab.
var newActiveIndex = index == tabs.length - 1 ? index - 1 : index + 1;
ctrl.select(tabs[newActiveIndex]);
}
tabs.splice(index, 1);
};
var destroyed;
$scope.$on('$destroy', function() {
destroyed = true;
});
}])
/**
* @ngdoc directive
* @name ui.bootstrap.tabs.directive:tabset
* @restrict EA
*
* @description
* Tabset is the outer container for the tabs directive
*
* @param {boolean=} vertical Whether or not to use vertical styling for the tabs.
* @param {boolean=} justified Whether or not to use justified styling for the 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>
<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>
</file>
</example>
*/
.directive('tabset', function() {
return {
restrict: 'EA',
transclude: true,
replace: true,
scope: {
type: '@'
},
controller: 'TabsetController',
templateUrl: 'app/partials/bootstrap/tabset.html',
link: function(scope, element, attrs) {
scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : false;
}
};
})
/**
* @ngdoc directive
* @name ui.bootstrap.tabs.directive:tab
* @restrict EA
*
* @param {string=} heading The visible heading, or title, of the tab. Set HTML headings with {@link ui.bootstrap.tabs.directive:tabHeading tabHeading}.
* @param {string=} select An expression to evaluate when the tab is selected.
* @param {boolean=} active A binding, telling whether or not this tab is selected.
* @param {boolean=} disabled A binding, telling whether or not this tab is disabled.
*
* @description
* Creates a tab with a heading and content. Must be placed within a {@link ui.bootstrap.tabs.directive:tabset tabset}.
*
* @example
<example module="ui.bootstrap">
<file name="index.html">
<div ng-controller="TabsDemoCtrl">
<button class="btn btn-small" ng-click="items[0].active = true">
Select item 1, using active binding
</button>
<button class="btn btn-small" ng-click="items[1].disabled = !items[1].disabled">
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>
Second Tab, with alert callback and html heading!
</tab>
<tab ng-repeat="item in items"
heading="{{item.title}}"
disabled="item.disabled"
active="item.active">
{{item.content}}
</tab>
</tabset>
</div>
</file>
<file name="script.js">
function TabsDemoCtrl($scope) {
$scope.items = [
{ title:"Dynamic Title 1", content:"Dynamic Item 0" },
{ title:"Dynamic Title 2", content:"Dynamic Item 1", disabled: true }
];
$scope.alertMe = function() {
setTimeout(function() {
alert("You've selected the alert tab!");
});
};
};
</file>
</example>
*/
/**
* @ngdoc directive
* @name ui.bootstrap.tabs.directive:tabHeading
* @restrict EA
*
* @description
* Creates an HTML heading for a {@link ui.bootstrap.tabs.directive:tab tab}. Must be placed as a child of a tab element.
*
* @example
<example module="ui.bootstrap">
<file name="index.html">
<tabset>
<tab>
<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>
That's right.
</tab>
</tabset>
</file>
</example>
*/
.directive('tab', ['$parse', '$log', function($parse, $log) {
return {
require: '^tabset',
restrict: 'EA',
replace: true,
templateUrl: 'app/partials/bootstrap/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
},
compile: function(elm, attrs, transclude) {
return function postLink(scope, elm, attrs, tabsetCtrl) {
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;
});
}
// Deprecation support of "disabled" parameter
// fix(tab): IE9 disabled attr renders grey text on enabled tab #2677
// This code is duplicated from the lines above to make it easy to remove once
// the feature has been completely deprecated
if ( attrs.disabled ) {
$log.warn('Use of "disabled" attribute has been deprecated, please use "disable"');
scope.$parent.$watch($parse(attrs.disabled), 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', [function() {
return {
restrict: 'A',
require: '^tab',
link: function(scope, elm, attrs, tabCtrl) {
scope.$watch('headingElement', function updateHeadingElement(heading) {
if (heading) {
elm.html('');
elm.append(heading);
}
});
}
};
}])
.directive('tabContentTransclude', function() {
return {
restrict: 'A',
require: '^tabset',
link: function(scope, elm, attrs) {
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.tagName.toLowerCase() === 'tab-heading' ||
node.tagName.toLowerCase() === 'data-tab-heading'
);
}
})
;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment