Lazy ajax calls for virtual area (Complete)

lib/modules/apostrophe-areas/public/js/user.js

@@ -323,6 +323,41 @@ apos.define('apostrophe-areas', {
       return editors;
     };
 
+    // Loads the virtual areas inside a modal.
+    self.loadVirtualArea = function () {
+      var $virtualAreas = $('[data-virtual-area]');
+      var virtualAreaLength = $virtualAreas.length;
+      var virtualAreaLoadedCount = 0;
+      // Do nothing if there are no virtual areas
+      if ($virtualAreas.length > 0) {
+        // Disable the modal controls till every area is loaded. Clicking on Save fails without
+        // loading the virtual area.
+        apos.modalSupport.toggleModalControls(true);
+        $virtualAreas.each(function (index, element) {
+          var $fieldset = $(element);
+          var areaAttribute = $fieldset.attr('data-virtual-area');
+          if (!areaAttribute) return;
+          var area = JSON.parse(areaAttribute);
+          // Remove the data-attribute after extracting data.
+          $fieldset.removeAttr('data-virtual-area');
+          // Call the Virtual Area Route.
+          $.jsonCall(area.action,
+            { dataType: 'html' },
+            { items: area.items, options: area.options }, function (data) {
+              var $editView = apos.schemas.findSafe($fieldset, '[data-' + area.name + '-edit-view]');
+              $editView.append(data);
+              // Make sure slideshows, videos, etc. get their JS
+              apos.emit('enhance', $editView);
+              virtualAreaLoadedCount++;
+              // Enalbe the modal controls once all the virtual areas load.
+              if (virtualAreaLength === virtualAreaLoadedCount) {
+                apos.modalSupport.toggleModalControls(false);
+              }
+            });
+        });
+      }
+    };
+
     // Gives all area editors a chance to save changes,
     // if they need to, before invoking the callback.
     //

lib/modules/apostrophe-modal/public/js/modal.js

@@ -412,6 +412,7 @@ apos.define('apostrophe-modal', {
       });
       self.resizeContentHeight();
       self.focusFirstFormElement();
+      apos.areas.loadVirtualArea();
       self.shown = true;
     };
 
@@ -1064,5 +1065,14 @@ apos.modalSupport = {
     if (topModal.is('[data-modal]')) {
       topModal.trigger('aposModalCancel');
     }
+  },
+  // Function to disable/enable modal controls. In the disabled state
+  // controls won't be clickable.
+  toggleModalControls: function (disable) {
+    if (disable) {
+      $('.apos-modal-controls').children().addClass('apos-container-disabled');
+    } else {
+      $('.apos-modal-controls').children().removeClass('apos-container-disabled');
+    }
   }
 };

lib/modules/apostrophe-pages/public/js/editor.js

@@ -206,6 +206,8 @@ apos.define('apostrophe-pages-editor', {
         apos.emit('enhance', self.$el.find('[data-page-schema-fields]'));
         self.addTypeChangeHandler();
         self.type = type;
+        // When we are populating fields during afterShow or during an AJAX Refresh we need to load the virtual areas again.
+        apos.areas.loadVirtualArea();
       });
     };
   }

lib/modules/apostrophe-schemas/public/js/array-modal.js

@@ -168,6 +168,8 @@ apos.define('apostrophe-array-editor-modal', {
         if (err) {
           apos.utils.error(err);
         }
+        // Load the virtual areas if they are present.
+        apos.areas.loadVirtualArea();
         self.refresh();
         if (self.errorPath && (self.errorPath.length > 1)) {
           apos.schemas.returnToError($form, self.field.schema, self.errorPath.slice(1), self.error, function(err) {

lib/modules/apostrophe-schemas/public/js/user.js

@@ -302,15 +302,15 @@ apos.define('apostrophe-schemas', {
         items = area;
       }
       var $fieldset = self.findFieldset($el, name);
-      $.jsonCall(apos.areas.options.action + '/edit-virtual-area',
-        { dataType: 'html' },
-        { items: items, options: options }, function(data) {
-          var $editView = self.findSafe($fieldset, '[data-' + name + '-edit-view]');
-          $editView.append(data);
-          // Make sure slideshows, videos, etc. get their JS
-          apos.emit('enhance', $editView);
-          return callback(null);
-        });
+      var virtualArea = {
+        action: apos.areas.options.action + '/edit-virtual-area',
+        items: items,
+        options: options,
+        name: name
+      };
+      // Pass it on as a data attribute. Will be consumed inside the modal.
+      $fieldset.attr('data-virtual-area', JSON.stringify(virtualArea));
+      return callback(null);
     };
 
     self.getSingleton = function($el, name) {

lib/modules/apostrophe-ui/public/css/components/fields.less

@@ -308,3 +308,12 @@
 .apos-browse {
   margin-bottom: 16px;
 }
+
+// Disabled Field
+// Wanted to use .apos-disabled but it's been used elsewhere
+.apos-container-disabled {
+  .apos-button-label {
+    color: #ccc !important;
+  }
+  pointer-events: none !important;
+}