Documentation updates, add new global scrollDown property

cgkineo · Dec 5, 2024 · a7e814c · a7e814c
1 parent 826dbda
commit a7e814c
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,19 @@
 # adapt-scrollPrompt
 
-The **Scroll Prompt** extension is a visual aid that helps users navigate through a course.
+The **Scroll Prompt** extension is a visual aid that helps users navigate through a course. The plugin adds a button that will auto scroll to the next element when clicked.
 
-The plugin adds a button that will auto scroll to the next element. This button can be appended to menu headers, page headers, blocks, and components. For blocks and components, the button will be placed at the end of the block / component to ensure content is not skipped over. Additional instruction text can be applied alongside the button.
+This button can be appended to:
+
+- Menu headers
+- Page headers
+- Blocks
+- Components
+
+For blocks and components, the button will be placed at the end of the block / component to ensure content is not skipped over. Additional instruction text can be applied alongside the button.
 
 ---
 
-**Author / maintainer:** CGKineo <br>
-**Accessibility support:** WAI AA <br>
-**RTL support:** Yes <br>
-**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 14 for macOS/iOS/iPadOS, Opera <br>
+**Author / maintainer:**  Kineo<br>
+**Accessibility support:**  WAI AA<br>
+**RTL support:**  Yes<br>
+**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, Safari for macOS/iOS/iPadOS, Opera<br>
diff --git a/bower.json b/bower.json
@@ -5,7 +5,7 @@
   "displayName": "Scroll Prompt",
   "extension": "scrollPrompt",
   "targetAttribute": "_scrollPrompt",
-  "description": "Apply scroll prompt to course menu and page headers. An icon to add visual aid for scrolling as well as auto scroll functionality.",
+  "description": "A visual aid that helps users navigate through a course. The plugin adds a button that will auto scroll to the next element when clicked.",
   "main": "/js/adapt-scrollPrompt.js",
   "keywords": [
     "adapt-plugin",

diff --git a/example.json b/example.json
@@ -2,5 +2,5 @@
 
   "_scrollPrompt": {
     "_isEnabled": true,
-    "instruction": "Scroll down"
-  }
+    "instruction": "{{_globals._extensions._scrollPrompt.scrollDown}}"
+  }
diff --git a/js/ScrollPromptView.js b/js/ScrollPromptView.js
@@ -18,10 +18,11 @@ export default class ScrollPromptView extends Backbone.View {
   }
 
   render() {
+    const _scrollPrompt = this.model.get('_scrollPrompt');
     const data = {
       ...this,
       model: this.model.toJSON(),
-      _scrollPrompt: this.model.get('_scrollPrompt')
+      _scrollPrompt
     };
     ReactDOM.render(<templates.scrollPrompt {...data} />, this.el);
 

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "displayName": "Scroll Prompt",
   "extension": "scrollPrompt",
   "targetAttribute": "_scrollPrompt",
-  "description": "Apply scroll prompt to course menu and page headers. An icon to add visual aid for scrolling as well as auto scroll functionality.",
+  "description": "A visual aid that helps users navigate through a course. The plugin adds a button that will auto scroll to the next element when clicked.",
   "main": "/js/adapt-scrollPrompt.js",
   "keywords": [
     "adapt-plugin",

diff --git a/properties.schema b/properties.schema
@@ -1,18 +1,28 @@
 {
-  "type":"object",
+  "type": "object",
   "$schema": "http://json-schema.org/draft-04/schema",
   "id": "http://jsonschema.net",
   "required":false,
+  "globals": {
+    "scrollDown": {
+      "type": "string",
+      "required": true,
+      "default": "Scroll down",
+      "inputType": "Text",
+      "validators": [],
+      "translatable": true
+    }
+  },
   "properties":{
     "pluginLocations": {
-      "type":"object",
+      "type": "object",
       "required":true,
       "properties":{
         "config": {
-          "type":"object"
+          "type": "object"
         },
         "course": {
-          "type":"object",
+          "type": "object",
           "properties": {
             "_scrollPrompt": {
               "type": "object",
@@ -38,7 +48,7 @@
           }
         },
         "contentobject": {
-          "type":"object",
+          "type": "object",
           "properties": {
             "_scrollPrompt": {
               "type": "object",
@@ -64,7 +74,7 @@
           }
         },
         "block": {
-          "type":"object",
+          "type": "object",
           "properties": {
             "_scrollPrompt": {
               "type": "object",
@@ -90,7 +100,7 @@
           }
         },
         "component": {
-          "type":"object",
+          "type": "object",
           "properties": {
             "_scrollPrompt": {
               "type": "object",

diff --git a/templates/scrollPrompt.jsx b/templates/scrollPrompt.jsx
@@ -10,7 +10,7 @@ export default function ScrollPrompt (props) {
   return (
     <div className="scrollPrompt__inner a11y-ignore" aria-hidden="true">
       <button className="btn-icon scrollPrompt__btn" onClick={onScrollPromptClick}>
-        <div className="icon" />
+        <span className="icon" />
       </button>
 
       {_scrollPrompt.instruction &&