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,6 +3,34 @@
 pandora.ui.placesDialog = function() {
     var height = Math.round((window.innerHeight - 48) * 0.9),
         width = Math.round(window.innerWidth * 0.9),
+        $content = Ox.ListMap({
+            height: height - 48,
+            places: function(data, callback) {
+                return pandora.api.findPlaces(Ox.extend({
+                    query: {conditions: [], operator: ''}
+                }, data), callback);
+            },
+            addPlace: function(place, callback) {
+                pandora.api.addPlace(place, function(result) {
+                    Ox.Request.clearCache(); // fixme: remove
+                    callback(result);
+                });
+            },
+            editPlace: function(place, callback) {
+                pandora.api.editPlace(place, function(result) {
+                    Ox.Request.clearCache(); // fixme: remove
+                    callback(result);
+                });
+            },
+            removePlace: function(place, callback) {
+                pandora.api.removePlace(place, function(result) {
+                    Ox.Request.clearCache(); // fixme: remove
+                    callback(result);
+                });
+            },
+            showTypes: true,
+            width: width
+        }),
         that = Ox.Dialog({
             buttons: [
                 Ox.Button({
@@ -15,34 +43,7 @@ pandora.ui.placesDialog = function() {
                 })
             ],
             closeButton: true,
-            content: Ox.ListMap({
+            content: $content,
-                    height: height - 48,
-                    places: function(data, callback) {
-                        return pandora.api.findPlaces(Ox.extend({
-                            query: {conditions: [], operator: ''}
-                        }, data), callback);
-                    },
-                    addPlace: function(place, callback) {
-                        pandora.api.addPlace(place, function(result) {
-                            Ox.Request.clearCache(); // fixme: remove
-                            callback(result);
-                        });
-                    },
-                    editPlace: function(place, callback) {
-                        pandora.api.editPlace(place, function(result) {
-                            Ox.Request.clearCache(); // fixme: remove
-                            callback(result);
-                        });
-                    },
-                    removePlace: function(place, callback) {
-                        pandora.api.removePlace(place, function(result) {
-                            Ox.Request.clearCache(); // fixme: remove
-                            callback(result);
-                        });
-                    },
-                    showTypes: true,
-                    width: width
-                }),
             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;
 };