CMS Controller now supports form widgets that use AJAX (Yay!)

CHANGELOG.md

@@ -1,5 +1,6 @@
 * **Build 27x** (2015-06-xx)
   - Protected images and their thumbnails are now supported in the back-end.
+  - Editing CMS templates now support form fields that use AJAX.
 
 * **Build 271** (2015-06-20)
   - File Upload form widget can now specify `mimeTypes` to define MIME types that are accepted by the uploader, either as file extension or fully qualified name.

modules/cms/controllers/Index.php

@@ -91,24 +91,19 @@ class Index extends Controller
         $this->addJs('/modules/cms/assets/js/october.cmspage.js', 'core');
         $this->addJs('/modules/cms/assets/js/october.dragcomponents.js', 'core');
         $this->addJs('/modules/cms/assets/js/october.tokenexpander.js', 'core');
-        $this->addJs('/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js', 'core');
-
         $this->addCss('/modules/cms/assets/css/october.components.css', 'core');
 
-        // Preload Ace editor modes explicitly, because they could be changed dynamically
-        // depending on a content block type
-        $this->addJs('/modules/backend/formwidgets/codeeditor/assets/vendor/emmet/emmet.js', 'core');
-        $this->addJs('/modules/backend/formwidgets/codeeditor/assets/vendor/ace/ace.js', 'core');
-        $this->addJs('/modules/backend/formwidgets/codeeditor/assets/vendor/ace/ext-emmet.js', 'core');
-
-        $aceModes = ['markdown', 'plain_text', 'html', 'less', 'css', 'scss', 'sass', 'javascript'];
-        foreach ($aceModes as $mode) {
-            $this->addJs('/modules/backend/formwidgets/codeeditor/assets/vendor/ace/mode-'.$mode.'.js', 'core');
-        }
+        // Preload the code editor class as it could be needed
+        // before it loads dynamically.
+        $this->addJs('/modules/backend/formwidgets/codeeditor/assets/js/build-min.js', 'core');
 
         $this->bodyClass = 'compact-container side-panel-not-fixed';
         $this->pageTitle = 'cms::lang.cms.menu_label';
         $this->pageTitleTemplate = '%s CMS';
+
+        if (Request::ajax() && Request::input('formWidgetAlias')) {
+            $this->bindFormWidgetToController();
+        }
     }
 
     public function index_onOpenTemplate()
@@ -390,7 +385,7 @@ class Index extends Controller
         return $template->getFileName();
     }
 
-    protected function makeTemplateFormWidget($type, $template)
+    protected function makeTemplateFormWidget($type, $template, $alias = null)
     {
         $formConfigs = [
             'page'    => '~/modules/cms/classes/page/fields.yaml',
@@ -406,7 +401,7 @@ class Index extends Controller
 
         $widgetConfig = $this->makeConfig($formConfigs[$type]);
         $widgetConfig->model = $template;
-        $widgetConfig->alias = 'form'.studly_case($type).md5($template->getFileName()).uniqid();
+        $widgetConfig->alias = $alias ?: 'form'.studly_case($type).md5($template->getFileName()).uniqid();
 
         $widget = $this->makeWidget('Backend\Widgets\Form', $widgetConfig);
 
@@ -469,6 +464,16 @@ class Index extends Controller
         return $dataHolder->settings;
     }
 
+    protected function bindFormWidgetToController()
+    {
+        $alias = Request::input('formWidgetAlias');
+        $type = Request::input('templateType');
+        $object = $this->loadTemplate($type, Request::input('templatePath'));
+
+        $widget = $this->makeTemplateFormWidget($type, $object, $alias);
+        $widget->bindToController();
+    }
+
     /**
      * Replaces Windows style (/r/n) line endings with unix style (/n)
      * line endings.

modules/cms/controllers/index/_form_page.htm

@@ -1,14 +1,12 @@
-<?php
-    $formConfig = [
+<?= Form::open([
         'class' => 'layout',
         'data-change-monitor' => 'true',
         'data-window-close-confirm' => e(trans('backend::lang.form.confirm_tab_close')),
         'data-inspector-external-parameters' => true
-    ];
-?>
-<?= Form::open($formConfig) ?>
+]) ?>
     <?= $form->render() ?>
 
+    <input type="hidden" value="<?= e($form->alias) ?>" name="formWidgetAlias" />
     <input type="hidden" value="<?= ($templateType) ?>" name="templateType" />
     <input type="hidden" value="<?= ($templatePath) ?>" name="templatePath" />
     <input type="hidden" value="<?= ($templateTheme) ?>" name="theme" />