Skip to content

Commit d33c126

Browse files
committed
Use ResizeObserver to detect container size change
1 parent 58c8b04 commit d33c126

File tree

5 files changed

+2148
-2169
lines changed

5 files changed

+2148
-2169
lines changed

demo/dashboard/script.js

+140-140
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,152 @@
11
angular.module('app')
22

3-
.controller('DashboardCtrl', ['$scope', '$timeout',
4-
function($scope, $timeout) {
5-
$scope.gridsterOptions = {
6-
margins: [20, 20],
7-
columns: 4,
8-
draggable: {
9-
handle: 'h3'
10-
}
11-
};
12-
13-
$scope.dashboards = {
14-
'1': {
15-
id: '1',
16-
name: 'Home',
17-
widgets: [{
18-
col: 0,
19-
row: 0,
20-
sizeY: 1,
21-
sizeX: 1,
22-
name: "Widget 1"
23-
}, {
24-
col: 2,
25-
row: 1,
26-
sizeY: 1,
27-
sizeX: 1,
28-
name: "Widget 2"
29-
}]
30-
},
31-
'2': {
32-
id: '2',
33-
name: 'Other',
34-
widgets: [{
35-
col: 1,
36-
row: 1,
37-
sizeY: 1,
38-
sizeX: 2,
39-
name: "Other Widget 1"
40-
}, {
41-
col: 1,
42-
row: 3,
43-
sizeY: 1,
44-
sizeX: 1,
45-
name: "Other Widget 2"
46-
}]
47-
}
48-
};
3+
.controller('DashboardCtrl', ['$scope', '$timeout',
4+
function($scope, $timeout) {
5+
$scope.gridsterOptions = {
6+
margins: [20, 20],
7+
columns: 4,
8+
draggable: {
9+
handle: 'h3'
10+
}
11+
};
12+
13+
$scope.dashboards = {
14+
'1': {
15+
id: '1',
16+
name: 'Home',
17+
widgets: [{
18+
col: 0,
19+
row: 0,
20+
sizeY: 1,
21+
sizeX: 1,
22+
name: "Widget 1"
23+
}, {
24+
col: 2,
25+
row: 1,
26+
sizeY: 1,
27+
sizeX: 1,
28+
name: "Widget 2"
29+
}]
30+
},
31+
'2': {
32+
id: '2',
33+
name: 'Other',
34+
widgets: [{
35+
col: 1,
36+
row: 1,
37+
sizeY: 1,
38+
sizeX: 2,
39+
name: "Other Widget 1"
40+
}, {
41+
col: 1,
42+
row: 3,
43+
sizeY: 1,
44+
sizeX: 1,
45+
name: "Other Widget 2"
46+
}]
47+
}
48+
};
4949

50-
$scope.clear = function() {
51-
$scope.dashboard.widgets = [];
52-
};
50+
$scope.clear = function() {
51+
$scope.dashboard.widgets = [];
52+
};
5353

54-
$scope.addWidget = function() {
55-
$scope.dashboard.widgets.push({
56-
name: "New Widget",
57-
sizeX: 1,
58-
sizeY: 1
54+
$scope.addWidget = function() {
55+
$scope.dashboard.widgets.push({
56+
name: "New Widget",
57+
sizeX: 1,
58+
sizeY: 1
59+
});
60+
};
61+
62+
$scope.$watch('selectedDashboardId', function(newVal, oldVal) {
63+
if (newVal !== oldVal) {
64+
$scope.dashboard = $scope.dashboards[newVal];
65+
} else {
66+
$scope.dashboard = $scope.dashboards[1];
67+
}
5968
});
60-
};
6169

62-
$scope.$watch('selectedDashboardId', function(newVal, oldVal) {
63-
if (newVal !== oldVal) {
64-
$scope.dashboard = $scope.dashboards[newVal];
65-
} else {
66-
$scope.dashboard = $scope.dashboards[1];
67-
}
68-
});
70+
// init dashboard
71+
$scope.selectedDashboardId = '1';
6972

70-
// init dashboard
71-
$scope.selectedDashboardId = '1';
73+
}
74+
])
75+
76+
.controller('CustomWidgetCtrl', ['$scope', '$modal',
77+
function($scope, $modal) {
78+
79+
$scope.remove = function(widget) {
80+
$scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
81+
};
82+
83+
$scope.openSettings = function(widget) {
84+
$modal.open({
85+
scope: $scope,
86+
templateUrl: 'demo/dashboard/widget_settings.html',
87+
controller: 'WidgetSettingsCtrl',
88+
resolve: {
89+
widget: function() {
90+
return widget;
91+
}
92+
}
93+
});
94+
};
7295

73-
}
74-
])
96+
}
97+
])
7598

76-
.controller('CustomWidgetCtrl', ['$scope', '$modal',
77-
function($scope, $modal) {
99+
.controller('WidgetSettingsCtrl', ['$scope', '$timeout', '$rootScope', '$modalInstance', 'widget',
100+
function($scope, $timeout, $rootScope, $modalInstance, widget) {
101+
$scope.widget = widget;
78102

79-
$scope.remove = function(widget) {
80-
$scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
81-
};
103+
$scope.form = {
104+
name: widget.name,
105+
sizeX: widget.sizeX,
106+
sizeY: widget.sizeY,
107+
col: widget.col,
108+
row: widget.row
109+
};
82110

83-
$scope.openSettings = function(widget) {
84-
$modal.open({
85-
scope: $scope,
86-
templateUrl: 'demo/dashboard/widget_settings.html',
87-
controller: 'WidgetSettingsCtrl',
88-
resolve: {
89-
widget: function() {
90-
return widget;
91-
}
92-
}
93-
});
94-
};
95-
96-
}
97-
])
98-
99-
.controller('WidgetSettingsCtrl', ['$scope', '$timeout', '$rootScope', '$modalInstance', 'widget',
100-
function($scope, $timeout, $rootScope, $modalInstance, widget) {
101-
$scope.widget = widget;
102-
103-
$scope.form = {
104-
name: widget.name,
105-
sizeX: widget.sizeX,
106-
sizeY: widget.sizeY,
107-
col: widget.col,
108-
row: widget.row
109-
};
110-
111-
$scope.sizeOptions = [{
112-
id: '1',
113-
name: '1'
114-
}, {
115-
id: '2',
116-
name: '2'
117-
}, {
118-
id: '3',
119-
name: '3'
120-
}, {
121-
id: '4',
122-
name: '4'
123-
}];
124-
125-
$scope.dismiss = function() {
126-
$modalInstance.dismiss();
127-
};
128-
129-
$scope.remove = function() {
130-
$scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
131-
$modalInstance.close();
132-
};
133-
134-
$scope.submit = function() {
135-
angular.extend(widget, $scope.form);
136-
137-
$modalInstance.close(widget);
138-
};
139-
140-
}
141-
])
142-
143-
// helper code
144-
.filter('object2Array', function() {
145-
return function(input) {
146-
var out = [];
147-
for (i in input) {
148-
out.push(input[i]);
111+
$scope.sizeOptions = [{
112+
id: '1',
113+
name: '1'
114+
}, {
115+
id: '2',
116+
name: '2'
117+
}, {
118+
id: '3',
119+
name: '3'
120+
}, {
121+
id: '4',
122+
name: '4'
123+
}];
124+
125+
$scope.dismiss = function() {
126+
$modalInstance.dismiss();
127+
};
128+
129+
$scope.remove = function() {
130+
$scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
131+
$modalInstance.close();
132+
};
133+
134+
$scope.submit = function() {
135+
angular.extend(widget, $scope.form);
136+
137+
$modalInstance.close(widget);
138+
};
139+
140+
}
141+
])
142+
143+
// helper code
144+
.filter('object2Array', function() {
145+
return function(input) {
146+
var out = [];
147+
for (i in input) {
148+
out.push(input[i]);
149+
}
150+
return out;
149151
}
150-
return out;
151-
}
152-
});
152+
});

0 commit comments

Comments
 (0)