846 lines
23 KiB
JavaScript
846 lines
23 KiB
JavaScript
angular.module("core-ui", [])
|
|
.factory('CoreDialog', [function() {
|
|
var service = {};
|
|
service['fatal'] = function(title, message) {
|
|
bootbox.dialog({
|
|
"title": title,
|
|
"message": "<div class='alert-icon-container-container'><div class='alert-icon-container'><div class='alert-icon'></div></div></div>" + message,
|
|
"buttons": {},
|
|
"className": "co-dialog fatal-error",
|
|
"closeButton": false
|
|
});
|
|
};
|
|
|
|
return service;
|
|
}])
|
|
|
|
.directive('corLogBox', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-log-box.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'logs': '=logs'
|
|
},
|
|
controller: function($rootScope, $scope, $element, $timeout) {
|
|
$scope.hasNewLogs = false;
|
|
|
|
var scrollHandlerBound = false;
|
|
var isAnimatedScrolling = false;
|
|
var isScrollBottom = true;
|
|
|
|
var scrollHandler = function() {
|
|
if (isAnimatedScrolling) { return; }
|
|
var element = $element.find("#co-log-viewer")[0];
|
|
isScrollBottom = element.scrollHeight - element.scrollTop === element.clientHeight;
|
|
if (isScrollBottom) {
|
|
$scope.hasNewLogs = false;
|
|
}
|
|
};
|
|
|
|
var animateComplete = function() {
|
|
isAnimatedScrolling = false;
|
|
};
|
|
|
|
$scope.moveToBottom = function() {
|
|
$scope.hasNewLogs = false;
|
|
isAnimatedScrolling = true;
|
|
isScrollBottom = true;
|
|
|
|
$element.find("#co-log-viewer").animate(
|
|
{ scrollTop: $element.find("#co-log-content").height() }, "slow", null, animateComplete);
|
|
};
|
|
|
|
$scope.$watch('logs', function(value, oldValue) {
|
|
if (!value) { return; }
|
|
|
|
$timeout(function() {
|
|
if (!scrollHandlerBound) {
|
|
$element.find("#co-log-viewer").on('scroll', scrollHandler);
|
|
scrollHandlerBound = true;
|
|
}
|
|
|
|
if (!isScrollBottom) {
|
|
$scope.hasNewLogs = true;
|
|
return;
|
|
}
|
|
|
|
$scope.moveToBottom();
|
|
}, 500);
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corOptionsMenu', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-options-menu.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corOption', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-option.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'optionClick': '&optionClick'
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
|
|
.directive('corTitle', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-title.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTitleAction', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-title-action.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTitleContent', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-title-content.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTitleLink', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-title-link.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corConfirmDialog', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-confirm-dialog.html',
|
|
replace: false,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'dialogTitle': '@dialogTitle',
|
|
'dialogActionTitle': '@dialogActionTitle',
|
|
'dialogForm': '=dialogForm',
|
|
'dialogButtonClass': '@dialogButtonClass',
|
|
|
|
'dialogContext': '=dialogContext',
|
|
'dialogAction': '&dialogAction'
|
|
},
|
|
|
|
controller: function($rootScope, $scope, $element) {
|
|
$scope.working = false;
|
|
|
|
$scope.$watch('dialogContext', function(dc) {
|
|
if (!dc) { return; }
|
|
$scope.show();
|
|
});
|
|
|
|
$scope.performAction = function() {
|
|
$scope.working = true;
|
|
$scope.dialogAction({
|
|
'info': $scope.dialogContext,
|
|
'callback': function(result) {
|
|
$scope.hide();
|
|
}
|
|
});
|
|
};
|
|
|
|
$scope.show = function() {
|
|
if ($scope.dialogForm) {
|
|
$scope.dialogForm.$setPristine();
|
|
}
|
|
|
|
$scope.working = false;
|
|
$element.find('.modal').modal({});
|
|
};
|
|
|
|
$scope.hide = function() {
|
|
$element.find('.modal').modal('hide');
|
|
};
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTabPanel', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-tab-panel.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTabContent', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 2,
|
|
replace: true,
|
|
transclude: false,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element) {
|
|
$element.addClass('co-tab-content tab-content col-md-11');
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTabs', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 3,
|
|
templateUrl: '/static/directives/cor-tabs.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'rememberCookie': '@rememberCookie'
|
|
},
|
|
controller: function($rootScope, $scope, $element, $timeout, $location, UIService) {
|
|
$scope.isClosed = true;
|
|
|
|
$scope.toggleClosed = function(e) {
|
|
$scope.isClosed = !$scope.isClosed;
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
};
|
|
|
|
UIService.initializeTabs($scope, $element, function() {
|
|
$scope.isClosed = true;
|
|
}, $scope.rememberCookie);
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corFloatingBottomBar', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 3,
|
|
templateUrl: '/static/directives/cor-floating-bottom-bar.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {},
|
|
controller: function($rootScope, $scope, $element, $timeout, $interval) {
|
|
var handler = function() {
|
|
$element.removeClass('floating');
|
|
$element.css('width', $element[0].parentNode.clientWidth + 'px');
|
|
|
|
var windowHeight = $(window).height();
|
|
var rect = $element[0].getBoundingClientRect();
|
|
if (rect.bottom > windowHeight) {
|
|
$element.addClass('floating');
|
|
}
|
|
};
|
|
|
|
$(window).on("scroll", handler);
|
|
$(window).on("resize", handler);
|
|
|
|
var previousHeight = $element[0].parentNode.clientHeight;
|
|
var stop = $interval(function() {
|
|
var currentHeight = $element[0].parentNode.clientWidth;
|
|
if (previousHeight != currentHeight) {
|
|
currentHeight = previousHeight;
|
|
handler();
|
|
}
|
|
}, 100);
|
|
|
|
$scope.$on('$destroy', function() {
|
|
$(window).off("resize", handler);
|
|
$(window).off("scroll", handler);
|
|
$interval.cancel(stop);
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
|
|
})
|
|
|
|
.directive('corLoaderInline', function() {
|
|
var directiveDefinitionObject = {
|
|
templateUrl: '/static/directives/cor-loader-inline.html',
|
|
replace: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corLoader', function() {
|
|
var directiveDefinitionObject = {
|
|
templateUrl: '/static/directives/cor-loader.html',
|
|
replace: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTab', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 4,
|
|
templateUrl: '/static/directives/cor-tab.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'tabActive': '@tabActive',
|
|
'tabTitle': '@tabTitle',
|
|
'tabTarget': '@tabTarget',
|
|
'tabInit': '&tabInit',
|
|
'tabShown': '&tabShown',
|
|
'tabHidden': '&tabHidden'
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
$element.find('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
|
|
$scope.tabHidden({});
|
|
});
|
|
|
|
$element.find('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
|
$scope.tabShown({});
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corStep', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 4,
|
|
templateUrl: '/static/directives/cor-step.html',
|
|
replace: true,
|
|
transclude: false,
|
|
requires: '^corStepBar',
|
|
restrict: 'C',
|
|
scope: {
|
|
'icon': '@icon',
|
|
'title': '@title',
|
|
'text': '@text'
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('realtimeAreaChart', function () {
|
|
var directiveDefinitionObject = {
|
|
priority: 0,
|
|
templateUrl: '/static/directives/realtime-area-chart.html',
|
|
replace: false,
|
|
transclude: false,
|
|
restrict: 'C',
|
|
scope: {
|
|
'data': '=data',
|
|
'labels': '=labels',
|
|
'colors': '=colors',
|
|
'counter': '=counter'
|
|
},
|
|
controller: function($scope, $element) {
|
|
var graph = null;
|
|
var series = [];
|
|
var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );
|
|
var colors = $scope.colors || [];
|
|
|
|
var setupGraph = function() {
|
|
for (var i = 0; i < $scope.labels.length; ++i) {
|
|
series.push({
|
|
name: $scope.labels[i],
|
|
color: i >= colors.length ? palette.color(): $scope.colors[i],
|
|
stroke: 'rgba(0,0,0,0.15)',
|
|
data: []
|
|
});
|
|
}
|
|
|
|
var options = {
|
|
element: $element.find('.chart')[0],
|
|
renderer: 'area',
|
|
stroke: true,
|
|
series: series,
|
|
min: 0,
|
|
padding: {
|
|
'top': 0.3,
|
|
'left': 0,
|
|
'right': 0,
|
|
'bottom': 0.3
|
|
}
|
|
};
|
|
|
|
if ($scope.minimum != null) {
|
|
options['min'] = $scope.minimum == 'auto' ? 'auto' : $scope.minimum * 1;
|
|
} else {
|
|
options['min'] = 0;
|
|
}
|
|
|
|
if ($scope.maximum != null) {
|
|
options['max'] = $scope.maximum == 'auto' ? 'auto' : $scope.maximum * 1;
|
|
}
|
|
|
|
graph = new Rickshaw.Graph(options);
|
|
|
|
xaxes = new Rickshaw.Graph.Axis.Time({
|
|
graph: graph,
|
|
timeFixture: new Rickshaw.Fixtures.Time.Local()
|
|
});
|
|
|
|
yaxes = new Rickshaw.Graph.Axis.Y({
|
|
graph: graph,
|
|
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
|
|
});
|
|
|
|
hoverDetail = new Rickshaw.Graph.HoverDetail({
|
|
graph: graph,
|
|
xFormatter: function(x) {
|
|
return new Date(x * 1000).toString();
|
|
}
|
|
});
|
|
};
|
|
|
|
var refresh = function(data) {
|
|
if (!data || $scope.counter < 0) { return; }
|
|
if (!graph) {
|
|
setupGraph();
|
|
}
|
|
|
|
var timecode = new Date().getTime() / 1000;
|
|
for (var i = 0; i < $scope.data.length; ++i) {
|
|
var arr = series[i].data;
|
|
arr.push(
|
|
{'x': timecode, 'y': $scope.data[i] }
|
|
);
|
|
|
|
if (arr.length > 10) {
|
|
series[i].data = arr.slice(arr.length - 10, arr.length);
|
|
}
|
|
}
|
|
|
|
graph.renderer.unstack = true;
|
|
graph.update();
|
|
};
|
|
|
|
$scope.$watch('counter', function() {
|
|
refresh($scope.data_raw);
|
|
});
|
|
|
|
$scope.$watch('data', function(data) {
|
|
$scope.data_raw = data;
|
|
refresh($scope.data_raw);
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
|
|
.directive('realtimeLineChart', function () {
|
|
var directiveDefinitionObject = {
|
|
priority: 0,
|
|
templateUrl: '/static/directives/realtime-line-chart.html',
|
|
replace: false,
|
|
transclude: false,
|
|
restrict: 'C',
|
|
scope: {
|
|
'data': '=data',
|
|
'labels': '=labels',
|
|
'counter': '=counter',
|
|
'labelTemplate': '@labelTemplate',
|
|
'minimum': '@minimum',
|
|
'maximum': '@maximum'
|
|
},
|
|
controller: function($scope, $element) {
|
|
var graph = null;
|
|
var xaxes = null;
|
|
var yaxes = null;
|
|
var hoverDetail = null;
|
|
var series = [];
|
|
var counter = 0;
|
|
var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );
|
|
|
|
var setupGraph = function() {
|
|
var options = {
|
|
element: $element.find('.chart')[0],
|
|
renderer: 'line',
|
|
series: series,
|
|
padding: {
|
|
'top': 0.3,
|
|
'left': 0,
|
|
'right': 0,
|
|
'bottom': 0.3
|
|
}
|
|
};
|
|
|
|
if ($scope.minimum != null) {
|
|
options['min'] = $scope.minimum == 'auto' ? 'auto' : $scope.minimum * 1;
|
|
} else {
|
|
options['min'] = 0;
|
|
}
|
|
|
|
if ($scope.maximum != null) {
|
|
options['max'] = $scope.maximum == 'auto' ? 'auto' : $scope.maximum * 1;
|
|
}
|
|
|
|
graph = new Rickshaw.Graph(options);
|
|
xaxes = new Rickshaw.Graph.Axis.Time({
|
|
graph: graph,
|
|
timeFixture: new Rickshaw.Fixtures.Time.Local()
|
|
});
|
|
|
|
yaxes = new Rickshaw.Graph.Axis.Y({
|
|
graph: graph,
|
|
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
|
|
});
|
|
|
|
hoverDetail = new Rickshaw.Graph.HoverDetail({
|
|
graph: graph,
|
|
xFormatter: function(x) {
|
|
return new Date(x * 1000).toString();
|
|
}
|
|
});
|
|
};
|
|
|
|
var refresh = function(data) {
|
|
if (data == null) { return; }
|
|
if (!graph) {
|
|
setupGraph();
|
|
}
|
|
|
|
if (typeof data == 'number') {
|
|
data = [data];
|
|
}
|
|
|
|
if ($scope.labels) {
|
|
data = data.slice(0, $scope.labels.length);
|
|
}
|
|
|
|
if (series.length == 0){
|
|
for (var i = 0; i < data.length; ++i) {
|
|
var title = $scope.labels ? $scope.labels[i] : $scope.labelTemplate.replace('{x}', i + 1);
|
|
series.push({
|
|
'color': palette.color(),
|
|
'data': [],
|
|
'name': title
|
|
})
|
|
}
|
|
}
|
|
|
|
counter++;
|
|
var timecode = new Date().getTime() / 1000;
|
|
|
|
for (var i = 0; i < data.length; ++i) {
|
|
var arr = series[i].data;
|
|
arr.push({
|
|
'x': timecode,
|
|
'y': data[i]
|
|
})
|
|
|
|
if (arr.length > 10) {
|
|
series[i].data = arr.slice(arr.length - 10, arr.length);
|
|
}
|
|
}
|
|
|
|
graph.update();
|
|
};
|
|
|
|
$scope.$watch('counter', function(counter) {
|
|
refresh($scope.data_raw);
|
|
});
|
|
|
|
$scope.$watch('data', function(data) {
|
|
$scope.data_raw = data;
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corProgressBar', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 4,
|
|
templateUrl: '/static/directives/cor-progress-bar.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'progress': '=progress'
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corStepBar', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 4,
|
|
templateUrl: '/static/directives/cor-step-bar.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'progress': '=progress'
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
$scope.$watch('progress', function(progress) {
|
|
if (!progress) { return; }
|
|
|
|
var index = 0;
|
|
for (var i = 0; i < progress.length; ++i) {
|
|
if (progress[i]) {
|
|
index = i;
|
|
}
|
|
}
|
|
|
|
$element.find('.transclude').children('.co-step-element').each(function(i, elem) {
|
|
$(elem).removeClass('active');
|
|
if (i <= index) {
|
|
$(elem).addClass('active');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corCheckableMenu', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-checkable-menu.html',
|
|
replace: false,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
scope: {
|
|
'controller': '=controller'
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
$scope.getClass = function(items, checked) {
|
|
if (!checked) {
|
|
return 'none';
|
|
}
|
|
|
|
if (checked.length == 0) {
|
|
return 'none';
|
|
}
|
|
|
|
if (checked.length == items.length) {
|
|
return 'all';
|
|
}
|
|
|
|
return 'some';
|
|
};
|
|
|
|
$scope.toggleItems = function($event) {
|
|
$event.stopPropagation();
|
|
if ($scope.controller) {
|
|
$scope.controller.toggleItems();
|
|
}
|
|
};
|
|
|
|
this.checkByFilter = function(filter) {
|
|
if ($scope.controller) {
|
|
$scope.controller.checkByFilter(function(item) {
|
|
return filter({'item': item});
|
|
});
|
|
}
|
|
};
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corCheckableMenuItem', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-checkable-menu-item.html',
|
|
replace: true,
|
|
transclude: true,
|
|
restrict: 'C',
|
|
require: '^corCheckableMenu',
|
|
scope: {
|
|
'itemFilter': '&itemFilter'
|
|
},
|
|
link: function($scope, $element, $attr, parent) {
|
|
$scope.parent = parent;
|
|
},
|
|
|
|
controller: function($rootScope, $scope, $element) {
|
|
$scope.selected = function() {
|
|
$scope.parent.checkByFilter(this.itemFilter);
|
|
};
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corCheckableItem', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
templateUrl: '/static/directives/cor-checkable-item.html',
|
|
replace: false,
|
|
transclude: false,
|
|
restrict: 'C',
|
|
scope: {
|
|
'item': '=item',
|
|
'controller': '=controller'
|
|
},
|
|
controller: function($rootScope, $scope, $element) {
|
|
$scope.toggleItem = function($event) {
|
|
$event.preventDefault();
|
|
$event.stopPropagation();
|
|
$scope.controller.toggleItem($scope.item, $event.shiftKey);
|
|
};
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
})
|
|
|
|
.directive('corTable', function() {
|
|
var directiveDefinitionObject = {
|
|
priority: 1,
|
|
replace: false,
|
|
transclude: false,
|
|
restrict: 'C',
|
|
scope: {},
|
|
compile: function(tElement, tAttrs, transclude) {
|
|
if (!window.matchMedia('(max-width: 767px)').matches) {
|
|
return;
|
|
}
|
|
|
|
var cloneWithAttr = function(e, kind, opt_fullclone) {
|
|
var clone = $(document.createElement(kind));
|
|
var attributes = $(e).prop("attributes");
|
|
$.each(attributes, function() {
|
|
clone.attr(this.name, this.value);
|
|
});
|
|
|
|
if (opt_fullclone) {
|
|
for (var i = 0; i < e.childNodes.length; ++i) {
|
|
clone.append($(e.childNodes[i]).clone(true));
|
|
}
|
|
}
|
|
|
|
return clone;
|
|
};
|
|
|
|
var appendRepeater = function(div, tr, headers, includeRepeat) {
|
|
// Find all the tds directly under the tr and convert into a header + value span.
|
|
tr.children('td').each(function(idx, td) {
|
|
var displayer = cloneWithAttr(tr, 'div');
|
|
|
|
if (!includeRepeat) {
|
|
displayer.removeAttr('ng-repeat');
|
|
}
|
|
|
|
if (idx < headers.length) {
|
|
displayer.append(headers[idx].clone(true).addClass('mobile-col-header'));
|
|
}
|
|
|
|
displayer.append(cloneWithAttr(td, 'div', true).addClass('mobile-col-value'));
|
|
div.append(displayer);
|
|
});
|
|
};
|
|
|
|
// Find the thead's tds and turn them into header elements.
|
|
var headers = [];
|
|
tElement.find('thead td').each(function(idx, td) {
|
|
headers.push(cloneWithAttr(td, 'div', true));
|
|
});
|
|
|
|
// Find the element with the 'ng-repeat'.
|
|
var repeater = tElement.find('[ng-repeat]')[0];
|
|
|
|
// Convert the repeater into a <div> repeater.
|
|
var divRepeater = cloneWithAttr(repeater, 'div').addClass('mobile-row');
|
|
|
|
// If the repeater is a tbody, then we append each child tr. Otherwise, the repeater
|
|
// itself should be a tr.
|
|
if (repeater.nodeName.toLowerCase() == 'tbody') {
|
|
$(repeater).children().each(function(idx, tr) {
|
|
appendRepeater(divRepeater, $(tr), headers, true);
|
|
});
|
|
} else {
|
|
appendRepeater(divRepeater, $(repeater), headers, false);
|
|
}
|
|
|
|
var repeaterBody = $(document.createElement('tbody'));
|
|
var repeaterTr = $(document.createElement('tr'))
|
|
var repeaterTd = $(document.createElement('td'))
|
|
|
|
repeaterTd.append(divRepeater);
|
|
repeaterTr.append(repeaterTd);
|
|
repeaterBody.append(repeaterTr);
|
|
|
|
// Remove the tbody and thead.
|
|
tElement.find('thead').remove();
|
|
tElement.find('tbody').remove();
|
|
tElement.append(repeaterBody);
|
|
},
|
|
|
|
controller: function($rootScope, $scope, $element) {
|
|
$element.addClass('co-table');
|
|
}
|
|
};
|
|
return directiveDefinitionObject;
|
|
});
|