Skip to content

Commit

Permalink
Release/v5 (#196)
Browse files Browse the repository at this point in the history
* Converted tabs to spaces, indentation amends

* Naming refactor, less refactor

* Typo fix, added comment, icon definition amend, removed redundant clearfix

* Button class update

* Variable name amend

* Strapline focus fix

* Removed redundant classes

* Attribution support

* Bower, schema, example and readme updates

* Removed unnecessary float, EM to REM conversion

* Updated license and cross platform coverage
  • Loading branch information
guywillis authored Nov 13, 2019
1 parent 7572d7b commit b80e6ef
Show file tree
Hide file tree
Showing 9 changed files with 668 additions and 696 deletions.
28 changes: 14 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,27 +33,27 @@ The attributes listed below are used in *components.json* to configure **Narrati

[**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).

**_component** (string): This value must be: `narrative`.
**\_component** (string): This value must be: `narrative`.

**_classes** (string): CSS class name to be applied to **Narrative**’s containing div. The class must be predefined in one of the Less files. Separate multiple classes with a space.
**\_classes** (string): CSS class name to be applied to **Narrative**’s containing 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`; however, `full` is typically the only option used as `left` or `right` do not allow much room for the component to display.
**\_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `full`, `left` or `right`; however, `full` is typically the only option used as `left` or `right` do not allow much room for the component to display.

**instruction** (string): This optional text appears above the component. It is frequently used to guide the learner’s interaction with the component.

**mobileInstruction** (string): This is optional instruction text that will be shown when viewed on mobile. It may be used to guide the learner’s interaction with the component.

**_hasNavigationInTextArea** (boolean): Determines the location of the arrows (icons) used to navigate from slide to slide. Navigation can overlay the image or the text. Set to `true` to have the navigation controls appear in the text region.
**\_hasNavigationInTextArea** (boolean): Determines the location of the arrows (icons) used to navigate from slide to slide. Navigation can overlay the image or the text. Set to `true` to have the navigation controls appear in the text region.

**_setCompletionOn** (string): This value determines when the component registers as complete. Acceptable values are `"allItems"` and `"inview"`. `"allItems"` requires the learner to navigate to each slide. `"inview"` requires the **Narrative** component to enter the view port completely, top and bottom.
**\_setCompletionOn** (string): This value determines when the component registers as complete. Acceptable values are `"allItems"` and `"inview"`. `"allItems"` requires the learner to navigate to each slide. `"inview"` requires the **Narrative** component to enter the view port completely, top and bottom.

**_items** (array): Multiple items may be created. Each item represents one slide and contains values for the narrative (**title**, **body**), the image (**_graphic**), and the slide's header when viewed on a mobile device (**_strapLine**).
**\_items** (array): Multiple items may be created. Each item represents one slide and contains values for the narrative (**title**, **body**), the image (**\_graphic**), and the slide's header when viewed on a mobile device (**\_strapLine**).

>**title** (string): This value is the title for this narrative element.
>**body** (string): This is the main text for this narrative element.
>**_graphic** (object): The image that appears next to the narrative text. It contains values for **src** and **alt**.
>**\_graphic** (object): The image that appears next to the narrative text. It contains values for **src**, **alt**, and **attribution**.
>>**src** (string): File name (including path) of the image. Path should be relative to the *src* folder (e.g.,*course/en/images/origami-menu-two.jpg*).
Expand All @@ -68,13 +68,13 @@ The attributes listed below are used in *components.json* to configure **Narrati
<div float align=right><a href="#top">Back to Top</a></div>

## Limitations

On mobile devices, the narrative text is collapsed above the image. It is accessed by clicking an icon (+) next the to strapline.

----------------------------
**Version number:** 5.0.2 <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a>
**Framework versions:** 4+
**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-narrative/graphs/contributors)
**Accessibility support:** WAI AA
**RTL support:** yes
**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, IE Mobile 11, Safari 11+12 for macOS+iOS, Opera
**Version number:** 6.0.0 <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a>
**Framework versions:** 5+
**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-narrative/graphs/contributors)
**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
8 changes: 4 additions & 4 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
{
"name": "adapt-contrib-narrative",
"version": "5.0.2",
"framework": ">=4",
"version": "6.0.0",
"framework": ">=5",
"homepage": "https://github.com/adaptlearning/adapt-contrib-narrative",
"issues": "https://github.com/adaptlearning/adapt_framework/issues/new",
"displayName" : "Narrative",
"component" : "narrative",
"displayName" : "Narrative",
"description": "A component that displays an image gallery with accompanying text",
"main": "/js/adapt-contrib-narrative.js",
"keywords": [
"adapt-plugin",
"adapt-component"
],
"license": "GPLv3"
"license": "GPL-3.0"
}
47 changes: 25 additions & 22 deletions example.json
Original file line number Diff line number Diff line change
@@ -1,48 +1,51 @@
{
"_id": "c-35",
"_parentId": "b-15",
{
"_id": "c-05",
"_parentId": "b-05",
"_type": "component",
"_component": "narrative",
"_classes": "",
"_type":"component",
"_layout": "full",
"_component": "narrative",
"title": "Narrative",
"displayTitle": "Narrative",
"body": "This is optional body text. Select the forward arrows to move through the narrative on a desktop, or swipe the images and select the plus icons to do so on mobile.",
"instruction": "",
"_hasNavigationInTextArea": false,
"body": "This is optional body text.",
"instruction": "Select the forward arrows to move through the narrative on a desktop, or swipe the images and select the plus icons to do so on mobile.",
"mobileInstruction": "This is optional instruction text that will be shown when viewed on mobile.",
"_hasNavigationInTextArea": false,
"_comment": "setCompletionOn = inview | allItems",
"_setCompletionOn":"allItems",
"_setCompletionOn": "allItems",
"_items": [
{
"title": "Narrative stage 1 title",
"title": "Narrative item 1 title",
"body": "This is display text 1. If viewing on desktop or tablet, this text will appear to the right of the image. On mobile, you’ll need to select the plus icon to reveal this text.",
"_graphic": {
"src": "course/en/images/image-slider-1.jpg",
"alt": "First graphic",
"attribution":"Copyright © 2015"
"alt": "Placeholder graphic",
"attribution": "Copyright © 2019"
},
"strapline": "Here is the first..."
"strapline": "Narrative item 1 strapline"
},
{
"title": "Narrative stage 2 title",
"title": "Narrative item 2 title",
"body": "This is display text 2.",
"_graphic": {
"src": "course/en/images/image-slider-2.jpg",
"alt": "Second graphic",
"attribution":"Copyright © 2015"
"alt": "",
"attribution": ""
},
"strapline": "Now comes the second..."
"strapline": "Narrative item 2 strapline"
},
{
"title": "Narrative stage 3 title",
"title": "Narrative item 3 title",
"body": "This is display text 3.",
"_graphic": {
"src": "course/en/images/image-slider-3.jpg",
"alt": "Third graphic",
"attribution":"Copyright © 2015"
"alt": "",
"attribution": ""
},
"strapline": "Third here!"
"strapline": "Narrative item 3 strapline"
}
]
],
"_pageLevelProgress": {
"_isEnabled": true
}
}
14 changes: 7 additions & 7 deletions js/adapt-contrib-narrative.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
define([
'core/js/adapt',
'./narrativeView',
'core/js/models/itemsComponentModel'
'core/js/adapt',
'./narrativeView',
'core/js/models/itemsComponentModel'
], function(Adapt, NarrativeView, ItemsComponentModel) {

return Adapt.register('narrative', {
model: ItemsComponentModel,
view: NarrativeView
});
return Adapt.register('narrative', {
model: ItemsComponentModel,
view: NarrativeView
});

});
8 changes: 4 additions & 4 deletions js/modeEnum.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
define(function() {

return new ENUM([
'SMALL',
'LARGE'
]);
return new ENUM([
'SMALL',
'LARGE'
]);

});
Loading

0 comments on commit b80e6ef

Please sign in to comment.