New: Text alignment update (fixes #362)

README.md

@@ -37,6 +37,18 @@ The **Vanilla** theme also exposes [*colour variables*](https://github.com/adapt
 
 **\_vanilla** (object): The following attributes configure the defaults for **Vanilla**. These include **\_backgroundImage**, **\_backgroundStyles** and **\_minimumHeights**. Global attributes are available at page, article and block level.
 
+#### Global text alignment
+>**\_textAlignment** (object): The text alignment object that contains values for **\_title**, **\_bodyy**, and **\_instruction**.
+
+>>**\_title**: (string): This attribute defines the alignment of the title element. Properties include **left**, **center**, and **right**.
+Left: Aligns the title to the left of the container. Center: Aligns the title to the center of the container. Right: Aligns the title to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction.
+
+>>**\_body**: (string): This attribute defines the alignment of the body element. Properties include **left**, **center**, and **right**.
+Left: Aligns the body to the left of the container. Center: Aligns the body to the center of the container. Right: Aligns the body to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction.
+
+>>**\_instruction**: (string): This attribute defines the alignment of the instruction element. Properties include **left**, **center**, and **right**.
+Left: Aligns the instruction to the left of the container. Center: Aligns the instruction to the center of the container. Right: Aligns the instruction to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction.
+
 #### Global background image
 >**\_backgroundImage** (object): The backgroundImage object that contains values for **\_large**, **\_medium** and **\_small**.
 
@@ -55,6 +67,9 @@ Repeat-x: The background image is repeated only horizontally. Repeat-y: The back
 >>**\_backgroundSize** (string): This attribute defines the size the background image display. Properties include **auto**, **cover**, **contain**, and **100% 100%**.
 Auto: The background image is displayed in its original size. Cover: Resize the background image to cover the entire container, even if it has to stretch or crop the image. Contain: Resize the background image to make sure the image is fully visible. 100% 100%: Resize the background image to match the dimensions of the container.
 
+>>**\_backgroundPosition** (string): This attribute defines the size the background image position. Properties include **left top**, **left center**, **left bottom**, **center top**, **center center**, **center bottom**, **right top**, **right center**, and **right bottom**.
+The first value is the horizontal position and the second value is the vertical
+
 #### Global minimum heights
 >**_minimumHeights** (object): The minimum heights attribute group specifies the minimum height of the image container at different device widths (`_large`, `_medium`, and `_small`).
 
@@ -74,13 +89,15 @@ Auto: The background image is displayed in its original size. Cover: Resize the
 >>**\_small** (string): Custom CSS class that is applied at the small device width.
 
 #### **contentObject.json**
->**\_pageHeader** (object): The backgroundImage object that contains values for **\_large**, **\_medium** and **\_small**.
+>**\_pageHeader** (object): The page header object that contains objects for **\_textAlignment**, **\_backgroundImage**, **\_backgroundStyles**, and **\_minimumHeights**.
 
->>**\_large** (string): File name (including path) of the image used with large device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*).
+>>**\_textAlignment** (object): See global text alignment for more details.
 
->>**\_medium** (string): File name (including path) of the image used with medium device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*).
+>>**\_backgroundImage** (object): See global background image for more details.
 
->>**\_small** (string): File name (including path) of the image used with small device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-one.jpg*).
+>>**\_backgroundStyles** (object): See global background image styles for more details.
+
+>>**\_minimumHeights** (object): See global minimum heights for more details.
 
 #### **blocks.json**
 >**\_isDividerBlock** (boolean): - Determines whether the CSS class `is-divider-block` will be applied. Acceptable values are `true` and `false`.

example.json

@@ -23,6 +23,11 @@ contentObjects.json
         "_small": "class-small"
     },
     "_pageHeader": {
+        "_textAlignment": {
+            "_title": "left",
+            "_body": "center",
+            "_instruction": "right",
+        },
         "_backgroundImage": {
             "_large": "course/en/images/example.jpg",
             "_medium": "course/en/images/example.jpg",
@@ -43,6 +48,11 @@ contentObjects.json
 
 articles.json
 "_vanilla": {
+    "_textAlignment": {
+        "_title": "left",
+        "_body": "center",
+        "_instruction": "right",
+    },
     "_backgroundImage": {
         "_large": "course/en/images/example.jpg",
         "_medium": "course/en/images/example.jpg",
@@ -62,6 +72,11 @@ articles.json
 
 blocks.json
 "_vanilla": {
+    "_textAlignment": {
+        "_title": "left",
+        "_body": "center",
+        "_instruction": "right",
+    },
     "_backgroundImage": {
         "_large": "course/en/images/example.jpg",
         "_medium": "course/en/images/example.jpg",
@@ -90,6 +105,15 @@ blocks.json
     "_componentVerticalAlignment": "center"
 }
 
+components.json
+"_vanilla": {
+    "_textAlignment": {
+        "_title": "left",
+        "_body": "center",
+        "_instruction": "right",
+    }
+}
+
 "_classes": "align-vert-center",
 "_comment": "Aligns the blocks child components centrally on the vertical axis.",
 

js/theme.js

@@ -2,14 +2,15 @@ import Adapt from 'core/js/adapt';
 import ThemePageView from './themePageView';
 import ThemeArticleView from './themeArticleView';
 import ThemeBlockView from './themeBlockView';
+import ThemeComponentView from './themeComponentView';
 import ThemeView from './themeView';
 
 class Theme extends Backbone.Controller {
 
   initialize() {
     this.listenTo(Adapt, {
       'app:dataReady': this.onDataReady,
-      'pageView:postRender articleView:postRender blockView:postRender': this.onPostRender
+      'pageView:postRender articleView:postRender blockView:postRender componentView:postRender': this.onPostRender
     });
   }
 
@@ -33,6 +34,9 @@ class Theme extends Backbone.Controller {
       case 'block':
         new ThemeBlockView({ model, el });
         break;
+      case 'component':
+        new ThemeComponentView({ model, el });
+        break;
       default:
         new ThemeView({ model, el });
     }

js/themeComponentView.js

@@ -0,0 +1,11 @@
+import ThemeView from './themeView';
+
+export default class ThemeComponentView extends ThemeView {
+
+  className() {}
+
+  setCustomStyles() {}
+
+  onRemove() {}
+
+}

js/themePageView.js

@@ -11,17 +11,26 @@ export default class ThemePageView extends ThemeView {
 
   processHeader() {
     const header = this.model.get('_pageHeader');
-
     if (!header) return;
 
     const $header = this.$('.page__header');
 
+    this.setHeaderTextAlignment(header);
     this.addHeaderBackgroundLayer($header);
     this.setHeaderBackgroundImage(header, $header);
     this.setHeaderBackgroundStyles(header, $header);
     this.setHeaderMinimumHeight(header, $header);
   }
 
+  setHeaderTextAlignment(config) {
+    const textAlignment = config._textAlignment;
+    if (!textAlignment) return;
+
+    if (textAlignment._title) this.$el.addClass(`title-align-${textAlignment._title}`);
+    if (textAlignment._body) this.$el.addClass(`body-align-${textAlignment._body}`);
+    if (textAlignment._instruction) this.$el.addClass(`instruction-align-${textAlignment._instruction}`);
+  }
+
   addHeaderBackgroundLayer($header) {
     if ($header.find(' > .background').length) return;
     this.$headerBackground = $('<div class="background" aria-hidden="true"></div>')
@@ -30,7 +39,6 @@ export default class ThemePageView extends ThemeView {
 
   setHeaderBackgroundImage(config, $header) {
     const backgroundImages = config._backgroundImage;
-
     if (!backgroundImages) return;
 
     let backgroundImage;
@@ -60,6 +68,7 @@ export default class ThemePageView extends ThemeView {
   setHeaderBackgroundStyles(config, $header) {
     const styles = config._backgroundStyles;
     if (!styles) return;
+
     this.$headerBackground
       .css({
         'background-repeat': styles._backgroundRepeat,
@@ -70,7 +79,6 @@ export default class ThemePageView extends ThemeView {
 
   setHeaderMinimumHeight(config, $header) {
     const minimumHeights = config._minimumHeights;
-
     if (!minimumHeights) return;
 
     let minimumHeight;

js/themeView.js

@@ -26,6 +26,7 @@ export default class ThemeView extends Backbone.View {
 
   setStyles() {
     this.setClasses();
+    this.setTextAlignment();
     this.addBackgroundLayer();
     this.setBackgroundImage();
     this.setBackgroundStyles();
@@ -38,6 +39,15 @@ export default class ThemeView extends Backbone.View {
     this.$el.addClass(this.className());
   }
 
+  setTextAlignment() {
+    const textAlignment = this.model.get('_textAlignment');
+    if (!textAlignment) return;
+
+    if (textAlignment._title) this.$el.addClass(`title-align-${textAlignment._title}`);
+    if (textAlignment._body) this.$el.addClass(`body-align-${textAlignment._body}`);
+    if (textAlignment._instruction) this.$el.addClass(`instruction-align-${textAlignment._instruction}`);
+  }
+
   addBackgroundLayer() {
     if (this.$el.find(' > .background').length) return;
     this.$background = $('<div class="background" aria-hidden="true"></div>')
@@ -46,7 +56,6 @@ export default class ThemeView extends Backbone.View {
 
   setBackgroundImage() {
     const backgroundImages = this.model.get('_backgroundImage');
-
     if (!backgroundImages) return;
 
     let backgroundImage;
@@ -76,6 +85,7 @@ export default class ThemeView extends Backbone.View {
   setBackgroundStyles() {
     const styles = this.model.get('_backgroundStyles');
     if (!styles) return;
+
     this.$background
       .css({
         'background-repeat': styles._backgroundRepeat,
@@ -86,7 +96,6 @@ export default class ThemeView extends Backbone.View {
 
   setMinimumHeight() {
     const minimumHeights = this.model.get('_minimumHeights');
-
     if (!minimumHeights) return;
 
     let minimumHeight;

less/core/global.less

@@ -2,3 +2,40 @@
   display: inline-block;
   vertical-align: middle;
 }
+
+.text-align-mixin(page);
+.text-align-mixin(article);
+.text-align-mixin(block);
+.text-align-mixin(component);
+
+.text-align-mixin(@selector) {
+
+.@{selector} {
+  &.title-align-left &__title,
+  &.body-align-left &__body,
+  &.instruction-align-left &__instruction {
+    text-align: left;
+
+    .dir-rtl & {
+      text-align: right;
+    }
+  }
+
+  &.title-align-center &__title,
+  &.body-align-center &__body,
+  &.instruction-align-center &__instruction {
+    text-align: center;
+  }
+
+  &.title-align-right &__title,
+  &.body-align-right &__body,
+  &.instruction-align-right &__instruction {
+    text-align: right;
+
+    .dir-rtl & {
+      text-align: left;
+    }
+  }
+}
+
+}