Fix dashboard layout for non standard columns count.
This commit is contained in:
Igor Kulikov
parent
23f81fe450
commit
c8edbffe43
@ -425,12 +425,26 @@ function DashboardUtils(types, utils, timeService) {
|
|||||||
var prevColumns = prevGridSettings ? prevGridSettings.columns : 24;
|
var prevColumns = prevGridSettings ? prevGridSettings.columns : 24;
|
||||||
var ratio = gridSettings.columns / prevColumns;
|
var ratio = gridSettings.columns / prevColumns;
|
||||||
layout.gridSettings = gridSettings;
|
layout.gridSettings = gridSettings;
|
||||||
|
var maxRow = 0;
|
||||||
for (var w in layout.widgets) {
|
for (var w in layout.widgets) {
|
||||||
var widget = layout.widgets[w];
|
var widget = layout.widgets[w];
|
||||||
|
maxRow = Math.max(maxRow, widget.row + widget.sizeY);
|
||||||
|
}
|
||||||
|
var newMaxRow = Math.round(maxRow * ratio);
|
||||||
|
for (w in layout.widgets) {
|
||||||
|
widget = layout.widgets[w];
|
||||||
|
if (widget.row + widget.sizeY == maxRow) {
|
||||||
|
widget.row = Math.round(widget.row * ratio);
|
||||||
|
widget.sizeY = newMaxRow - widget.row;
|
||||||
|
} else {
|
||||||
|
widget.row = Math.round(widget.row * ratio);
|
||||||
|
widget.sizeY = Math.round(widget.sizeY * ratio);
|
||||||
|
}
|
||||||
widget.sizeX = Math.round(widget.sizeX * ratio);
|
widget.sizeX = Math.round(widget.sizeX * ratio);
|
||||||
widget.sizeY = Math.round(widget.sizeY * ratio);
|
|
||||||
widget.col = Math.round(widget.col * ratio);
|
widget.col = Math.round(widget.col * ratio);
|
||||||
widget.row = Math.round(widget.row * ratio);
|
if (widget.col + widget.sizeX > gridSettings.columns) {
|
||||||
|
widget.sizeX = gridSettings.columns - widget.col;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -235,6 +235,108 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
|
|||||||
removeResizeListener(gridsterParent[0], onGridsterParentResize); // eslint-disable-line no-undef
|
removeResizeListener(gridsterParent[0], onGridsterParentResize); // eslint-disable-line no-undef
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function onGridsterParentResize() {
|
||||||
|
if (gridsterParent.height() && autofillHeight()) {
|
||||||
|
updateMobileOpts();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//TODO: widgets visibility
|
||||||
|
/*gridsterParent.scroll(function () {
|
||||||
|
updateVisibleRect();
|
||||||
|
});
|
||||||
|
|
||||||
|
gridsterParent.resize(function () {
|
||||||
|
updateVisibleRect();
|
||||||
|
});*/
|
||||||
|
|
||||||
|
function updateMobileOpts() {
|
||||||
|
var isMobileDisabled = vm.isMobileDisabled === true;
|
||||||
|
var isMobile = vm.isMobile === true && !isMobileDisabled;
|
||||||
|
var mobileBreakPoint = isMobileDisabled ? 0 : (isMobile ? 20000 : 960);
|
||||||
|
|
||||||
|
if (!isMobile && !isMobileDisabled) {
|
||||||
|
isMobile = !$mdMedia('gt-sm');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (vm.gridsterOpts.isMobile != isMobile) {
|
||||||
|
vm.gridsterOpts.isMobile = isMobile;
|
||||||
|
vm.gridsterOpts.mobileModeEnabled = isMobile;
|
||||||
|
}
|
||||||
|
if (vm.gridsterOpts.mobileBreakPoint != mobileBreakPoint) {
|
||||||
|
vm.gridsterOpts.mobileBreakPoint = mobileBreakPoint;
|
||||||
|
}
|
||||||
|
detectRowSize(isMobile).then(
|
||||||
|
function(rowHeight) {
|
||||||
|
if (vm.gridsterOpts.rowHeight != rowHeight) {
|
||||||
|
vm.gridsterOpts.rowHeight = rowHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
vm.isMobileSize = checkIsMobileSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkIsMobileSize() {
|
||||||
|
var isMobileDisabled = vm.isMobileDisabled === true;
|
||||||
|
var isMobileSize = vm.isMobile === true && !isMobileDisabled;
|
||||||
|
if (!isMobileSize && !isMobileDisabled) {
|
||||||
|
isMobileSize = !$mdMedia('gt-sm');
|
||||||
|
}
|
||||||
|
return isMobileSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.$watch('vm.columns', function () {
|
||||||
|
var columns = vm.columns ? vm.columns : 24;
|
||||||
|
if (vm.gridsterOpts.columns != columns) {
|
||||||
|
vm.gridsterOpts.columns = columns;
|
||||||
|
if (vm.gridster) {
|
||||||
|
vm.gridster.columns = vm.columns;
|
||||||
|
updateGridsterParams();
|
||||||
|
}
|
||||||
|
//TODO: widgets visibility
|
||||||
|
//updateVisibleRect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$scope.$watch(function() {
|
||||||
|
return $mdMedia('gt-sm') + ',' + vm.isMobile + ',' + vm.isMobileDisabled;
|
||||||
|
}, function() {
|
||||||
|
updateMobileOpts();
|
||||||
|
sortWidgets();
|
||||||
|
});
|
||||||
|
|
||||||
|
$scope.$watch(function() {
|
||||||
|
return vm.autofillHeight + ',' + vm.mobileAutofillHeight + ',' + vm.mobileRowHeight;
|
||||||
|
}, function () {
|
||||||
|
updateMobileOpts();
|
||||||
|
});
|
||||||
|
|
||||||
|
$scope.$watch('vm.margins', function () {
|
||||||
|
var margins = vm.margins ? vm.margins : [10, 10];
|
||||||
|
if (!angular.equals(vm.gridsterOpts.margins, margins)) {
|
||||||
|
vm.gridsterOpts.margins = margins;
|
||||||
|
updateMobileOpts();
|
||||||
|
if (vm.gridster) {
|
||||||
|
vm.gridster.margins = vm.margins;
|
||||||
|
updateGridsterParams();
|
||||||
|
}
|
||||||
|
//TODO: widgets visibility
|
||||||
|
//updateVisibleRect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$scope.$watch('vm.isEdit', function () {
|
||||||
|
vm.gridsterOpts.resizable.enabled = vm.isEdit;
|
||||||
|
vm.gridsterOpts.draggable.enabled = vm.isEdit;
|
||||||
|
$scope.$broadcast('toggleDashboardEditMode', vm.isEdit);
|
||||||
|
});
|
||||||
|
|
||||||
|
$scope.$watch('vm.isMobileSize', function (newVal, prevVal) {
|
||||||
|
if (!angular.equals(newVal, prevVal)) {
|
||||||
|
$scope.$broadcast('mobileModeChanged', vm.isMobileSize);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$scope.$watchCollection('vm.widgets', function () {
|
$scope.$watchCollection('vm.widgets', function () {
|
||||||
var ids = [];
|
var ids = [];
|
||||||
for (var i=0;i<vm.widgets.length;i++) {
|
for (var i=0;i<vm.widgets.length;i++) {
|
||||||
@ -290,127 +392,11 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function onGridsterParentResize() {
|
|
||||||
if (gridsterParent.height() && autofillHeight()) {
|
|
||||||
updateMobileOpts();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//TODO: widgets visibility
|
|
||||||
/*gridsterParent.scroll(function () {
|
|
||||||
updateVisibleRect();
|
|
||||||
});
|
|
||||||
|
|
||||||
gridsterParent.resize(function () {
|
|
||||||
updateVisibleRect();
|
|
||||||
});*/
|
|
||||||
|
|
||||||
function updateMobileOpts() {
|
|
||||||
var isMobileDisabled = vm.isMobileDisabled === true;
|
|
||||||
var isMobile = vm.isMobile === true && !isMobileDisabled;
|
|
||||||
var mobileBreakPoint = isMobileDisabled ? 0 : (isMobile ? 20000 : 960);
|
|
||||||
|
|
||||||
if (!isMobile && !isMobileDisabled) {
|
|
||||||
isMobile = !$mdMedia('gt-sm');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (vm.gridsterOpts.isMobile != isMobile) {
|
|
||||||
vm.gridsterOpts.isMobile = isMobile;
|
|
||||||
vm.gridsterOpts.mobileModeEnabled = isMobile;
|
|
||||||
}
|
|
||||||
if (vm.gridsterOpts.mobileBreakPoint != mobileBreakPoint) {
|
|
||||||
vm.gridsterOpts.mobileBreakPoint = mobileBreakPoint;
|
|
||||||
}
|
|
||||||
detectRowSize(isMobile).then(
|
|
||||||
function(rowHeight) {
|
|
||||||
if (vm.gridsterOpts.rowHeight != rowHeight) {
|
|
||||||
vm.gridsterOpts.rowHeight = rowHeight;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
vm.isMobileSize = checkIsMobileSize();
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkIsMobileSize() {
|
|
||||||
var isMobileDisabled = vm.isMobileDisabled === true;
|
|
||||||
var isMobileSize = vm.isMobile === true && !isMobileDisabled;
|
|
||||||
if (!isMobileSize && !isMobileDisabled) {
|
|
||||||
isMobileSize = !$mdMedia('gt-sm');
|
|
||||||
}
|
|
||||||
return isMobileSize;
|
|
||||||
}
|
|
||||||
|
|
||||||
$scope.$watch(function() { return $mdMedia('gt-sm'); }, function() {
|
|
||||||
updateMobileOpts();
|
|
||||||
sortWidgets();
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.$watch('vm.isMobile', function () {
|
|
||||||
updateMobileOpts();
|
|
||||||
sortWidgets();
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.$watch('vm.autofillHeight', function () {
|
|
||||||
updateMobileOpts();
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.$watch('vm.mobileAutofillHeight', function () {
|
|
||||||
updateMobileOpts();
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.$watch('vm.mobileRowHeight', function () {
|
|
||||||
updateMobileOpts();
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.$watch('vm.isMobileDisabled', function () {
|
|
||||||
updateMobileOpts();
|
|
||||||
sortWidgets();
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.$watch('vm.widgetLayouts', function () {
|
$scope.$watch('vm.widgetLayouts', function () {
|
||||||
updateMobileOpts();
|
updateMobileOpts();
|
||||||
sortWidgets();
|
sortWidgets();
|
||||||
});
|
});
|
||||||
|
|
||||||
$scope.$watch('vm.columns', function () {
|
|
||||||
var columns = vm.columns ? vm.columns : 24;
|
|
||||||
if (vm.gridsterOpts.columns != columns) {
|
|
||||||
vm.gridsterOpts.columns = columns;
|
|
||||||
if (vm.gridster) {
|
|
||||||
vm.gridster.columns = vm.columns;
|
|
||||||
updateGridsterParams();
|
|
||||||
}
|
|
||||||
//TODO: widgets visibility
|
|
||||||
//updateVisibleRect();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.$watch('vm.margins', function () {
|
|
||||||
var margins = vm.margins ? vm.margins : [10, 10];
|
|
||||||
if (!angular.equals(vm.gridsterOpts.margins, margins)) {
|
|
||||||
vm.gridsterOpts.margins = margins;
|
|
||||||
updateMobileOpts();
|
|
||||||
if (vm.gridster) {
|
|
||||||
vm.gridster.margins = vm.margins;
|
|
||||||
updateGridsterParams();
|
|
||||||
}
|
|
||||||
//TODO: widgets visibility
|
|
||||||
//updateVisibleRect();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.$watch('vm.isEdit', function () {
|
|
||||||
vm.gridsterOpts.resizable.enabled = vm.isEdit;
|
|
||||||
vm.gridsterOpts.draggable.enabled = vm.isEdit;
|
|
||||||
$scope.$broadcast('toggleDashboardEditMode', vm.isEdit);
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.$watch('vm.isMobileSize', function (newVal, prevVal) {
|
|
||||||
if (!angular.equals(newVal, prevVal)) {
|
|
||||||
$scope.$broadcast('mobileModeChanged', vm.isMobileSize);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.$on('gridster-resized', function (event, sizes, theGridster) {
|
$scope.$on('gridster-resized', function (event, sizes, theGridster) {
|
||||||
if (checkIsLocalGridsterElement(theGridster)) {
|
if (checkIsLocalGridsterElement(theGridster)) {
|
||||||
vm.gridster = theGridster;
|
vm.gridster = theGridster;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user