Update: component vertical alignment property (fixes adaptlearning#353)…

… (adaptlearning#354)

* component vertical alignment property

* Updated example.json

* Updated block schema

* Optimised class application

* Amended schema defaults

example.json

@@ -83,9 +83,19 @@ blocks.json
         "_small": "class-small"
     },
     // Divider Block - adds class to `.block` element
-    "_isDividerBlock": false
+    "_isDividerBlock": false,
+    // Defines the vertical alignment of the child component(s) in relation to the block.
+    // Top: Aligns descendents to the top of the block. Center: Aligns descendents to the center of the block. Bottom: Aligns descendents to the bottom of the block.
+    // The default alignment is `top`.
+    "_componentVerticalAlignment": "center"
 }
 
+"_classes": "align-vert-center",
+"_comment": "Aligns the blocks child components centrally on the vertical axis.",
+
+"_classes": "align-vert-bottom",
+"_comment": "Aligns child components to the bottom of the parent block on the vertical axis.",
+
 On screen animation json config
 --------------------------------------------------
 
@@ -142,12 +152,6 @@ Content Object classes
 Block classes
 --------------------------------------------------
 
-"_classes": "align-vert-center",
-"_comment": "Aligns the blocks child components centrally on the vertical axis.",
-
-"_classes": "align-vert-bottom",
-"_comment": "Aligns child components to the bottom of the parent block on the vertical axis.",
-
 "_classes": "reverse-desktop-order",
 "_comment": "Reverses the visual layout of the components above the medium breakpoint (default is 760px). e.g. Left layout components would still render first in the DOM order but visually appear on the right-hand side above the medium breakpoint. The components would vertically stack as per the DOM order below the breakpoint.",
 

js/themeBlockView.js

@@ -6,7 +6,15 @@ export default class ThemeBlockView extends ThemeView {
     return this.model.get('_isDividerBlock') ? 'is-divider-block' : '';
   }
 
-  setCustomStyles() {}
+  setCustomStyles() {
+    this.setComponentVerticalAlignment();
+  }
+
+  setComponentVerticalAlignment() {
+    const componentVerticalAlignment = this.model.get('_componentVerticalAlignment');
+    if (!componentVerticalAlignment) return;
+    this.$el.addClass(`align-vert-${componentVerticalAlignment}`);
+  }
 
   onRemove() {}
 

less/core/block.less

@@ -36,4 +36,14 @@
   &__instruction a {
     .link-text;
   }
+
+  // Aligns child components centrally on the vertical axis
+  &.align-vert-center .component__container {
+    align-items: center;
+  }
+
+  // Aligns child components to the bottom of the parent block on the vertical axis
+  &.align-vert-bottom .component__container {
+    align-items: flex-end;
+  }
 }

less/project/theme-extras.less

@@ -54,19 +54,6 @@
 // Block
 // --------------------------------------------------
 
-// Custom class added to block
-// Aligns child components centrally on the vertical axis
-// --------------------------------------------------
-.block.align-vert-center .component__container {
-  align-items: center;
-}
-
-// Aligns child components to the bottom of the parent block on the vertical axis
-// --------------------------------------------------
-.block.align-vert-bottom .component__container {
-  align-items: flex-end;
-}
-
 // Reverses the visual layout of the components above the medium breakpoint
 // e.g. Left layout components would still render first in the DOM order
 // but visually appear on the right hand side above the medium breakpoint. The

properties.schema

@@ -1146,6 +1146,14 @@
                   "inputType": "Checkbox",
                   "validators": [],
                   "help": "If enabled, applies a divider class to the block"
+                },
+                "_componentVerticalAlignment": {
+                  "type": "string",
+                  "required": false,
+                  "default": "top",
+                  "inputType": {"type":"Select", "options":["top","center","bottom"]},
+                  "title": "Set the vertical alignment of the child component(s).",
+                  "help": "Defines the vertical alignment of the child component(s) in relation to the block. Top: Aligns descendents to the top of the block. Center: Aligns descendents to the center of the block. Bottom: Aligns descendents to the bottom of the block. The default alignment is `top`."
                 }
               }
             }

schema/block.schema.json

@@ -159,6 +159,18 @@
               "title": "Set this block as a divider",
               "description": "If enabled, applies a divider class to the block",
               "default": false
+            },
+            "_componentVerticalAlignment": {
+              "type": "string",
+              "title": "Set the vertical alignment of the child component(s).",
+              "description": "Defines the vertical alignment of the child component(s) in relation to the block. Top: Aligns descendents to the top of the block. Center: Aligns descendents to the center of the block. Bottom: Aligns descendents to the bottom of the block. The default alignment is `top`.",
+              "default": "top",
+              "enum": [
+                "top",
+                "center",
+                "bottom"
+              ],
+              "_backboneForms": "Select"
             }
           }
         }