v5 version of component (#18)

* Spacing and indentation fixes * Updated class names * hbs restructure * Reverted hbs structure (for accessibility) * Changed more class names, redid mobile tab layout and some styling * Changed a tags to button tags; styled is-top-layout; class name changes; * Styling and indentation changes * IN progress fixes for velocity page jumping * Removed on click velocity animation from js and added CSS transition to prevent page jumping * Removed redundant class from hbs * deleted old less * #16 (#17) Fixes issue #16 * tidy up/modernise code extend from ComponentModel improvements to a11y (based on example here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role) * remove slightly pointless help text * bump version, set correct FW dependency and add cross platform coverage * add support for 'inview' completion * minor amends to README * update naming convention to match style of Adapt OS * re-write to use itemsComponentModel * Update tabs.less - use flex for tabs layout - theme styling applied * min height property added for consistent item heights * replace 'top' and 'left' with 'horizontal' and 'vertical' for RTL support * simplify layout function and update readme * caveat layout for screen width * removed backticks as these have no effect in the help text Co-authored-by: Jennifer Eiss <[email protected]> Co-authored-by: kineojen <[email protected]> Co-authored-by: Simon Date <[email protected]> Co-authored-by: kirsty.hames <[email protected]> Co-authored-by: kirsty-hames <[email protected]>
cgkineo · Jan 25, 2021 · a9be209 · a9be209
1 parent dfcbe19
commit a9be209
Show file tree

Hide file tree

Showing 7 changed files with 371 additions and 505 deletions.
diff --git a/README.md b/README.md
@@ -18,30 +18,24 @@ The attributes listed below are used in *components.json* to configure **Tabs**,
 
 ## Attributes
 
-**_id** (string): A unique identifier.
+[**core model attributes**](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes): These are inherited by every Adapt component. [Read more](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes).
 
-**_parentId** (string): An identifier that links the component to the parent block.
+**\_component** (string): This value must be: `tabs`.
 
-**_type** (string): The type of the particular item. Examples include block and component.
+**\_classes** (string): CSS class name to be applied to the container div. The class must be predefined in one of the Less files. Separate multiple classes with a space.
 
-**_component** (string): This value must be: `tabs`.
+**\_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `"full"`, `"left"` or `"right"`.
 
-**_classes** (string): CSS class name to be applied to the container div. The class must be predefined in one of the Less files. Separate multiple classes with a space.
-
-**_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `full`, `left` or `right`.
-
-**title** (string): The title of the particular item.
-
-**displayTitle** (string): This is the title that Adapt displays when viewing a course.
-
-**body** (string): The body text content of the particular item.
+**\_minHeight** (number): This value defines the minimum height the item container displays. By default, the container is responsive to the content height. You only need to set this value if you want to uniform the content container size across tab items.
 
 **instruction** (string): This optional text appears above the component. It is frequently used to
 guide the learner’s interaction with the component.
 
-**_tabLayout** (string): Defines the layout of the tabs. Acceptable values are `left` and `top`. By default, component displays `left` layout for medium screen size and below.
+**\_setCompletionOn** (string): Determines when the component registers as complete. Acceptable values are `"allItems"` and `"inview"`. `"allItems"` (the default) requires the learner to view every single tab; `"inview"` requires only that the component has been viewed (i.e. passed completely through the browser viewport).
+
+**\_tabLayout** (string): Defines the layout of the tabs. Acceptable values are `"vertical"` and `"horizontal"`. By default, component displays `"vertical"` layout for medium screen size and below.
 
-**_items** (array): Multiple items may be created. Each *_item* represents one element of the tabs component and contains values for **tabTitle**, **title**, **body**, **_classes** and **_graphic**.
+**\_items** (array): Multiple items may be created. Each *\_item* represents one element of the tabs component and contains values for **tabTitle**, **title**, **body**, **\_classes** and **\_graphic**.
 
 >**tabTitle** (string): This text is displayed in the actual tab heading. Recommend keeping this title short.
 
@@ -51,7 +45,7 @@ guide the learner’s interaction with the component.
 
 >**\_classes** (string): An optional class that will be applied to the Tabs Item.
 
->**_graphic** (object): An optional image which is displayed below the item body when the learner opens this content panel. It contains values for *src* and *alt*.
+>**\_graphic** (object): An optional image which is displayed below the item body when the learner opens this content panel. It contains values for *src* and *alt*.
 
 >>**src** (string): File name (including path) of the image. Path should be relative to the *src* folder (e.g., *course/en/images/tabs.jpg*).
 
@@ -65,9 +59,9 @@ guide the learner’s interaction with the component.
 **tabTitle** headings will be replaced by **...** if the heading is too long for the container.
 
 ----------------------------
-**Version number:**  2.1.1  
-**Framework versions:** 2.0+  
-**Author / maintainer:** Kineo  
-**Accessibility support:** WAI AA  
-**RTL support:** Yes  
-**Cross-platform coverage:** To be confirmed
+**Version number:**  3.0.0
+**Framework versions:** 5.0+
+**Author / maintainer:** Kineo
+**Accessibility support:** WAI AA
+**RTL support:** Yes
+**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera
diff --git a/bower.json b/bower.json
@@ -1,16 +1,16 @@
 {
-    "name": "adapt-tabs",
-    "framework": ">=2",
-    "version": "2.1.1",
-    "homepage": "https://github.com/cgkineo/adapt-tabs",
-    "issues": "https://github.com/cgkineo/adapt-tabs/issues/",
-    "displayName": "Tabs",
-    "component": "tabs",
-    "description": "Organise content into tab views",
-    "main": "/js/adapt-tabs.js",
-    "keywords": [
-        "adapt-plugin",
-        "adapt-component"
-    ],
-    "license": "GPLv3"
+  "name": "adapt-tabs",
+  "framework": ">=5",
+  "version": "3.0.0",
+  "homepage": "https://github.com/cgkineo/adapt-tabs",
+  "issues": "https://github.com/cgkineo/adapt-tabs/issues/",
+  "displayName": "Tabs",
+  "component": "tabs",
+  "description": "Organise content into tab views",
+  "main": "/js/adapt-tabs.js",
+  "keywords": [
+    "adapt-plugin",
+    "adapt-component"
+  ],
+  "license": "GPL-3.0"
 }
diff --git a/example.json b/example.json
@@ -1,59 +1,58 @@
-// to go in components.json
-{
-    "_id": "c-05",
-    "_parentId": "b-05",
-    "_type": "component",
-    "_component": "tabs",
-    "_classes": "",
-    "_layout": "full",
-    "title": "Tabs",
-    "displayTitle": "Tabs",
-    "body": "Body text.",
-    "instruction": "Select the tabs to find out more.",
-    "_tabLayout": "left",
-    "_items": [
-        {
-            "tabTitle": "Tab Title 1",
-            "title": "Tab item 1 title",
-            "body": "This is display text 1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.",
-            "_classes": "",
-            "_graphic": {
-                "alt": "alt text",
-                "src": "course/en/images/tabs.jpg"
+    // to go in components.json
+    {
+        "_id": "c-05",
+        "_parentId": "b-05",
+        "_type": "component",
+        "_component": "tabs",
+        "_classes": "",
+        "_layout": "full",
+        "title": "Tabs",
+        "displayTitle": "Tabs",
+        "body": "Body text.",
+        "instruction": "Select the tabs to find out more.",
+        "_tabLayout": "horizontal",
+        "_minHeight": "500px",
+        "_comment": "Only set min height if you want to uniform the content container size across tab items. By default, the container will display at the height of each item's content",
+        "_items": [
+            {
+                "tabTitle": "Tab Title 1",
+                "title": "Tab item 1 title",
+                "body": "This is display text 1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.",
+                "_classes": "",
+                "_graphic": {
+                    "alt": "alt text",
+                    "src": "course/en/images/tabs.jpg"
+                }
+            },
+            {
+                "tabTitle": "Tab Title 2",
+                "title": "Tab item 2 title",
+                "body": "This is display text 2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.",
+                "_classes": "",
+                "_graphic": {
+                    "alt": "alt text",
+                    "src": "course/en/images/tabs.jpg"
+                }
+            },
+            {
+                "tabTitle": "Tab Title 3",
+                "title": "Tab item 3 title",
+                "body": "This is display text 3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.",
+                "_classes": "",
+                "_graphic": {
+                    "alt": "alt text",
+                    "src": "course/en/images/tabs.jpg"
+                }
+            },
+            {
+                "tabTitle": "Tab Title 4",
+                "title": "Tab item 4 title",
+                "body": "This is display text 4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.",
+                "_classes": "",
+                "_graphic": {
+                    "alt": "alt text",
+                    "src": "course/en/images/tabs.jpg"
+                }
             }
-        },
-        {
-            "tabTitle": "Tab Title 2",
-            "title": "Tab item 2 title",
-            "body": "This is display text 2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.",
-            "_classes": "",
-            "_graphic": {
-                "alt": "alt text",
-                "src": "course/en/images/tabs.jpg"
-            }
-        },
-        {
-            "tabTitle": "Tab Title 3",
-            "title": "Tab item 3 title",
-            "body": "This is display text 3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.",
-            "_classes": "",
-            "_graphic": {
-                "alt": "alt text",
-                "src": "course/en/images/tabs.jpg"
-            }
-        },
-        {
-            "tabTitle": "Tab Title 4",
-            "title": "Tab item 4 title",
-            "body": "This is display text 4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.",
-            "_classes": "",
-            "_graphic": {
-                "alt": "alt text",
-                "src": "course/en/images/tabs.jpg"
-            }
-        }
-    ],
-    "_pageLevelProgress": {
-        "_isEnabled": true
+        ]
     }
-}