Add JSON export functionality for grid configuration

client/src/components/Element.js

@@ -15,6 +15,7 @@ import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
 import { elementTypeType } from 'types/elementTypeType';
 import { elementType } from 'types/elementType';
 import { elementDragSource, isOverTop } from 'lib/dragHelpers';
+import Modal from 'react-modal';
 
 /**
  * The Element component used in the context of an ElementEditor shows the summary
@@ -35,6 +36,8 @@ class Element extends Component {
     this.updateFormTab = this.updateFormTab.bind(this);
     this.handleChangeSize = this.handleChangeSize.bind(this);
     this.handleChangeOffset = this.handleChangeOffset.bind(this);
+    this.handleExportJSON = this.handleExportJSON.bind(this);
+    this.closeModal = this.closeModal.bind(this);
 
     this.state = {
       previewExpanded: false,
@@ -43,6 +46,8 @@ class Element extends Component {
       childRenderingError: false,
       size: props.element.blockSchema.grid.column.size,
       offset: props.element.blockSchema.grid.column.offset,
+      modalIsOpen: false,
+      jsonRepresentation: '',
     };
   }
 
@@ -243,6 +248,21 @@ class Element extends Component {
     });
   }
 
+  handleExportJSON() {
+    const { element } = this.props;
+    const jsonRepresentation = JSON.stringify(element.blockSchema.grid, null, 2);
+    this.setState({
+      modalIsOpen: true,
+      jsonRepresentation,
+    });
+  }
+
+  closeModal() {
+    this.setState({
+      modalIsOpen: false,
+    });
+  }
+
   render() {
     const {
       element,
@@ -260,7 +280,7 @@ class Element extends Component {
       onDragEnd,
     } = this.props;
 
-    const { childRenderingError, previewExpanded } = this.state;
+    const { childRenderingError, previewExpanded, modalIsOpen, jsonRepresentation } = this.state;
 
     if (!element.id) {
       return null;
@@ -332,7 +352,19 @@ class Element extends Component {
             handleChangeOffset={this.handleChangeOffset}
           />
         }
+
+        <button onClick={this.handleExportJSON}>Export JSON</button>
       </div>
+
+      <Modal
+        isOpen={modalIsOpen}
+        onRequestClose={this.closeModal}
+        contentLabel="JSON Representation"
+      >
+        <h2>JSON Representation</h2>
+        <pre>{jsonRepresentation}</pre>
+        <button onClick={this.closeModal}>Close</button>
+      </Modal>
     </div>);
 
     if (!previewExpanded) {

client/src/components/ElementEditor/Toolbar.js

@@ -12,7 +12,9 @@ class Toolbar extends PureComponent {
       AddBlockToTopButton,
       elementTypes,
       areaId,
-      connectDropTarget } = this.props;
+      connectDropTarget,
+      onExportJSON
+    } = this.props;
     return connectDropTarget(
       <div className="element-editor__toolbar">
         <AddBlockToTopButton
@@ -23,6 +25,7 @@ class Toolbar extends PureComponent {
           elementTypes={elementTypes}
           areaId={areaId}
         />
+        <button onClick={onExportJSON}>Export JSON</button>
       </div>
     );
   }
@@ -37,6 +40,7 @@ Toolbar.propTypes = {
   connectDropTarget: PropTypes.func.isRequired,
   onDragOver: PropTypes.func, // eslint-disable-line react/no-unused-prop-types
   onDragDrop: PropTypes.func, // eslint-disable-line react/no-unused-prop-types
+  onExportJSON: PropTypes.func.isRequired,
 };
 
 const toolbarTarget = {

src/Extensions/BaseElementExtension.php

@@ -288,4 +288,29 @@ public function getAnchorTitle(): string
     {
         return $this->owner->singular_name() . '_' . $this->owner->getTitle() . '_' . $this->owner->ID;
     }
+
+    public function generateGridJSON(): string
+    {
+        $gridData = [
+            'sizeXS' => $this->owner->SizeXS,
+            'sizeSM' => $this->owner->SizeSM,
+            'sizeMD' => $this->owner->SizeMD,
+            'sizeLG' => $this->owner->SizeLG,
+            'sizeXL' => $this->owner->SizeXL,
+            'offsetXS' => $this->owner->OffsetXS,
+            'offsetSM' => $this->owner->OffsetSM,
+            'offsetMD' => $this->owner->OffsetMD,
+            'offsetLG' => $this->owner->OffsetLG,
+            'offsetXL' => $this->owner->OffsetXL,
+            'visibilityXS' => $this->owner->VisibilityXS,
+            'visibilitySM' => $this->owner->VisibilitySM,
+            'visibilityMD' => $this->owner->VisibilityMD,
+            'visibilityLG' => $this->owner->VisibilityLG,
+            'visibilityXL' => $this->owner->VisibilityXL,
+            'titleClass' => $this->owner->TitleClass,
+            'titleTag' => $this->owner->TitleTag,
+        ];
+
+        return json_encode($gridData, JSON_PRETTY_PRINT);
+    }
 }

src/Extensions/ElementalAreaExtension.php

@@ -78,4 +78,15 @@ public function ElementControllersWithRows(): ?ArrayList
 
         return $this->controllers;
     }
+
+    public function generateGridJSON(): string
+    {
+        $gridData = [];
+
+        foreach ($this->controllers as $controller) {
+            $gridData[] = $controller->getElement()->toMap();
+        }
+
+        return json_encode($gridData, JSON_PRETTY_PRINT);
+    }
 }

src/Models/ElementRow.php

@@ -122,4 +122,15 @@ public function getContainerClasses(): string
 
         return implode(' ', $classes);
     }
+
+    public function generateGridJSON(): string
+    {
+        $gridData = [
+            'isFluid' => $this->IsFluid,
+            'customSectionClass' => $this->CustomSectionClass,
+            'extraClass' => $this->ExtraClass,
+        ];
+
+        return json_encode($gridData, JSON_PRETTY_PRINT);
+    }
 }