Added button render position config

cgkineo · Jan 17, 2025 · 4ed3006 · 4ed3006
1 parent 1e650ad
commit 4ed3006
Show file tree

Hide file tree

Showing 9 changed files with 189 additions and 20 deletions.
diff --git a/example.json b/example.json
@@ -3,5 +3,6 @@
   "_scrollPrompt": {
     "_isEnabled": true,
     "instruction": "{{_globals._extensions._scrollPrompt.scrollDown}}",
+    "_buttonPosition": "left",
     "_iconClass": "icon-controls-down"
   }
diff --git a/less/scrollPrompt.less b/less/scrollPrompt.less
@@ -1,12 +1,44 @@
 .scrollPrompt {
-  margin-top: 1.5rem;
+  margin-top: 1rem;
 
   &__inner {
     display: flex;
+  }
+
+  &__inner.align-button-top,
+  &__inner.align-button-bottom {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &__inner.align-button-left,
+  &__inner.align-button-right {
+    flex-direction: row;
     align-items: center;
   }
 
+  &__inner.align-button-top &__instruction {
+    margin-top: @component-instruction-margin;
+  }
+
+  &__inner.align-button-bottom &__instruction {
+    margin-bottom: @component-instruction-margin;
+  }
+
+  &__inner.align-button-left &__instruction {
+    margin-inline-start: @component-instruction-margin;
+  }
+
+  &__inner.align-button-right &__instruction {
+    margin-inline-end: @component-instruction-margin;
+  }
+}
+
+// --------------------------------------------------
+// THEME
+// --------------------------------------------------
+.scrollPrompt {
   &__instruction {
-    margin-inline-start: 1rem;
+    .instruction-text;
   }
 }
diff --git a/properties.schema b/properties.schema
@@ -36,6 +36,19 @@
                   "validators": [],
                   "translatable": true
                 },
+                "_buttonPosition": {
+                  "type": "string",
+                  "required": true,
+                  "enum": ["left", "top", "right", "bottom"],
+                  "default": "left",
+                  "title": "Button position",
+                  "inputType": {
+                    "type": "Select",
+                    "options": ["left", "right", "top", "bottom"]
+                  },
+                  "validators": ["required"],
+                  "help": "Set the button rendering position in relation to the instruction text."
+                },
                 "_iconClass": {
                   "type": "string",
                   "required": false,
@@ -70,6 +83,19 @@
                   "validators": [],
                   "translatable": true
                 },
+                "_buttonPosition": {
+                  "type": "string",
+                  "required": true,
+                  "enum": ["left", "top", "right", "bottom"],
+                  "default": "left",
+                  "title": "Button position",
+                  "inputType": {
+                    "type": "Select",
+                    "options": ["left", "right", "top", "bottom"]
+                  },
+                  "validators": ["required"],
+                  "help": "Set the button rendering position in relation to the instruction text."
+                },
                 "_iconClass": {
                   "type": "string",
                   "required": false,
@@ -104,6 +130,19 @@
                   "validators": [],
                   "translatable": true
                 },
+                "_buttonPosition": {
+                  "type": "string",
+                  "required": true,
+                  "enum": ["left", "top", "right", "bottom"],
+                  "default": "left",
+                  "title": "Button position",
+                  "inputType": {
+                    "type": "Select",
+                    "options": ["left", "right", "top", "bottom"]
+                  },
+                  "validators": ["required"],
+                  "help": "Set the button rendering position in relation to the instruction text."
+                },
                 "_iconClass": {
                   "type": "string",
                   "required": false,
@@ -138,6 +177,19 @@
                   "validators": [],
                   "translatable": true
                 },
+                "_buttonPosition": {
+                  "type": "string",
+                  "required": true,
+                  "enum": ["left", "top", "right", "bottom"],
+                  "default": "left",
+                  "title": "Button position",
+                  "inputType": {
+                    "type": "Select",
+                    "options": ["left", "right", "top", "bottom"]
+                  },
+                  "validators": ["required"],
+                  "help": "Set the button rendering position in relation to the instruction text."
+                },
                 "_iconClass": {
                   "type": "string",
                   "required": false,

diff --git a/schema/block.schema.json b/schema/block.schema.json
@@ -25,6 +25,19 @@
               "title": "Instruction text",
               "default": "{{_globals._extensions._scrollPrompt.scrollDown}}"
             },
+            "_buttonPosition": {
+              "type": "string",
+              "title": "Button position",
+              "description": "Set the button rendering position in relation to the instruction text.",
+              "default": "left",
+              "enum": [
+                "left",
+                "right",
+                "top",
+                "bottom"
+              ],
+              "_backboneForms": "Select"
+            },
             "_iconClass": {
               "type": "string",
               "title": "Button icon class",

diff --git a/schema/component.schema.json b/schema/component.schema.json
@@ -25,6 +25,19 @@
               "title": "Instruction text",
               "default": "{{_globals._extensions._scrollPrompt.scrollDown}}"
             },
+            "_buttonPosition": {
+              "type": "string",
+              "title": "Button position",
+              "description": "Set the button rendering position in relation to the instruction text.",
+              "default": "left",
+              "enum": [
+                "left",
+                "right",
+                "top",
+                "bottom"
+              ],
+              "_backboneForms": "Select"
+            },
             "_iconClass": {
               "type": "string",
               "title": "Button icon class",

diff --git a/schema/contentobject.schema.json b/schema/contentobject.schema.json
@@ -25,6 +25,19 @@
               "title": "Instruction text",
               "default": "{{_globals._extensions._scrollPrompt.scrollDown}}"
             },
+            "_buttonPosition": {
+              "type": "string",
+              "title": "Button position",
+              "description": "Set the button rendering position in relation to the instruction text.",
+              "default": "left",
+              "enum": [
+                "left",
+                "right",
+                "top",
+                "bottom"
+              ],
+              "_backboneForms": "Select"
+            },
             "_iconClass": {
               "type": "string",
               "title": "Button icon class",

diff --git a/schema/course.schema.json b/schema/course.schema.json
@@ -52,6 +52,19 @@
               "title": "Instruction text",
               "default": "{{_globals._extensions._scrollPrompt.scrollDown}}"
             },
+            "_buttonPosition": {
+              "type": "string",
+              "title": "Button position",
+              "description": "Set the button rendering position in relation to the instruction text.",
+              "default": "left",
+              "enum": [
+                "left",
+                "right",
+                "top",
+                "bottom"
+              ],
+              "_backboneForms": "Select"
+            },
             "_iconClass": {
               "type": "string",
               "title": "Button icon class",

diff --git a/templates/scrollPrompt.jsx b/templates/scrollPrompt.jsx
@@ -1,32 +1,31 @@
 import React from 'react';
-import { classes, compile } from 'core/js/reactHelpers';
+import { classes, compile, templates } from 'core/js/reactHelpers';
 
 export default function ScrollPrompt (props) {
   const {
-    _scrollPrompt,
-    onScrollPromptClick
+    _scrollPrompt
   } = props;
 
+  const buttonPosition = _scrollPrompt._buttonPosition;
+  let buttonRenderOrder = 'first';
+
+  if (buttonPosition === 'bottom' || buttonPosition === 'right') {
+    buttonRenderOrder = 'last';
+  }
+
   return (
     <div
-      className='scrollPrompt__inner a11y-ignore'
+      className={classes([
+        'scrollPrompt__inner',
+        buttonPosition && `align-button-${buttonPosition}`,
+        'a11y-ignore'
+      ])}
       aria-hidden='true'
     >
 
-      <button
-        className='btn-icon scrollPrompt__btn'
-        onClick={onScrollPromptClick}
-      >
-        <span
-          className={classes([
-            'icon',
-            _scrollPrompt._iconClass
-              ? _scrollPrompt._iconClass
-              : 'icon-controls-down'
-          ])}
-          aria-hidden='true'
-        />
-      </button>
+      {buttonRenderOrder === 'first' &&
+      <templates.scrollPromptButton {...props} />
+      }
 
       {_scrollPrompt.instruction &&
       <div
@@ -35,6 +34,10 @@ export default function ScrollPrompt (props) {
       />
       }
 
+      {buttonRenderOrder === 'last' &&
+      <templates.scrollPromptButton {...props} />
+      }
+
     </div>
   );
 }
diff --git a/templates/scrollPromptButton.jsx b/templates/scrollPromptButton.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { classes } from 'core/js/reactHelpers';
+
+export default function ScrollPromptButton (props) {
+
+  const {
+    _scrollPrompt,
+    onScrollPromptClick
+  } = props;
+
+  return (
+
+    <button
+      className='btn-icon scrollPrompt__btn'
+      onClick={onScrollPromptClick}
+    >
+      <span
+        className={classes([
+          'icon',
+          _scrollPrompt._iconClass
+            ? _scrollPrompt._iconClass
+            : 'icon-controls-down'
+        ])}
+        aria-hidden='true'
+      />
+    </button>
+
+  );
+}