listen to resize events of manage places/events dialogs

static/js/pandora/ui/eventsDialog.js

@@ -15,7 +15,20 @@ pandora.ui.eventsDialog = function() {
                 })
             ],
             closeButton: true,
-            content: Ox.Element(),
+            content: Ox.Element().append(
+                $('<img>')
+                    .attr({src: Ox.UI.getImageURL('symbolLoadingAnimated')})
+                    .css({
+                        position: 'absolute',
+                        width: '32px',
+                        height: '32px',
+                        left: 0,
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        margin: 'auto'
+                    })
+            ),
             height: height,
             maximizeButton: true,
             minHeight: 256,
@@ -23,7 +36,17 @@ pandora.ui.eventsDialog = function() {
             padding: 0,
             title: 'Manage Events',
             width: width
-        });
+        })
+        .bindEvent({
+            resize: function(data) {
+                // setting width would cause an expensive calendar redraw
+                $content && $content.options({height: data.height});
+            },
+            resizeend: function(data) {
+                $content && $content.options(data);
+            }
+        }),
+        $content;
 
     pandora.api.findEvents({
         query: {conditions: [], operator: '&'}        
@@ -35,7 +58,7 @@ pandora.ui.eventsDialog = function() {
             sort: [{key: 'name', operator: '+'}]
         }, function(result) {
             that.options({
-                content: Ox.ListCalendar({
+                content: $content = Ox.ListCalendar({
                     addEvent: function(event, callback) {
                         pandora.api.addEvent(event, function(result) {
                             Ox.Request.clearCache(); // fixme: remove

static/js/pandora/ui/placesDialog.js

@@ -3,19 +3,7 @@
 pandora.ui.placesDialog = function() {
     var height = Math.round((window.innerHeight - 48) * 0.9),
         width = Math.round(window.innerWidth * 0.9),
-        that = Ox.Dialog({
+        $content = Ox.ListMap({
-            buttons: [
-                Ox.Button({
-                    id: 'done',
-                    title: 'Done'
-                }).bindEvent({
-                    click: function() {
-                        that.close();
-                    }
-                })
-            ],
-            closeButton: true,
-            content: Ox.ListMap({
             height: height - 48,
             places: function(data, callback) {
                 return pandora.api.findPlaces(Ox.extend({
@@ -43,6 +31,19 @@ pandora.ui.placesDialog = function() {
             showTypes: true,
             width: width
         }),
+        that = Ox.Dialog({
+            buttons: [
+                Ox.Button({
+                    id: 'done',
+                    title: 'Done'
+                }).bindEvent({
+                    click: function() {
+                        that.close();
+                    }
+                })
+            ],
+            closeButton: true,
+            content: $content,
             height: height,
             maximizeButton: true,
             minHeight: 256,
@@ -51,6 +52,12 @@ pandora.ui.placesDialog = function() {
             padding: 0,
             title: 'Manage Places',
             width: width
+        })
+        .bindEvent({
+            resize: function(data) {
+                // data is {width: ..., height: ...}
+                $content.options(data);
+            }
         });
     return that;
 };