-**Graphic** displays graphic content that has been optimized for various devices. The component swaps out images based upon the device's screen size. These device widths are specified in *less/generic.less* of the [Vanilla theme](https://github.com/adaptlearning/adapt-contrib-vanilla).
+**Graphic** displays graphic content that has been optimized for various devices. The component swaps out images based upon the device's screen size.
[Visit the **Graphic** wiki](https://github.com/adaptlearning/adapt-contrib-graphic/wiki) for more information about its functionality and for explanations of key properties.
@@ -32,16 +32,16 @@ The attributes listed below are used in *components.json* to configure **Graphic
[**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: `graphic`.
+**\_component** (string): This value must be: `graphic`.
-**_classes** (string): CSS class name to be applied to **Graphic**’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 **Graphic**’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`.
+**\_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `full`, `left` or `right`.
**instruction** (string): This optional text appears above the component. It is frequently used to
guide the learner’s interaction with the component.
-**_graphic** (object): The image that constitutes the component. It contains values for **alt**, **large**, and **small**.
+**\_graphic** (object): The image that constitutes the component. It contains values for **alt**, **large**, and **small**.
>**alt** (string): This text becomes the image’s `alt` attribute.
@@ -54,16 +54,16 @@ guide the learner’s interaction with the component.
## Accessibility
+ Remember to include an **alt** attribute for all your images. Screen readers will read aloud alt text content, so leave the alt text empty (`"alt": ""`) if the image does not contribute significant course content.
+ If the alt text is left empty, the image will *not* be included in the tab order. If the component is configured to display [title or body text]((https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes)), these will remain keyboard accessible.
-+ If the alt text is assigned a value, but the component is not being tracked for course completion, assign the class `"no-state"` to **_classes**. Adapt's accessibility mode reports to the learner the 'state' of the component, whether it is complete or incomplete. It is not common practice to require interaction with (or 'completion' of) an image for course completion. Indeed, a screen reader needlessly announcing the state of an image may be distracting for the learner. Assigning the built-in class `"no-state"` prevents this.
++ If the alt text is assigned a value, but the component is not being tracked for course completion, assign the class `"no-state"` to **\_classes**. Adapt's accessibility mode reports to the learner the 'state' of the component, whether it is complete or incomplete. It is not common practice to require interaction with (or 'completion' of) an image for course completion. Indeed, a screen reader needlessly announcing the state of an image may be distracting for the learner. Assigning the built-in class `"no-state"` prevents this.
## Limitations
-
-No known limitations.
+
+No known limitations.
----------------------------
-**Version number:** 3.0.0
-**Framework versions:** 3.3+
-**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-graphic/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:** 4.0.0
+**Framework versions:** 5+
+**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-graphic/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
diff --git a/bower.json b/bower.json
index 15d40b3..4eea772 100644
--- a/bower.json
+++ b/bower.json
@@ -1,20 +1,20 @@
{
"name": "adapt-contrib-graphic",
- "version": "3.0.0",
- "framework": ">=3.3",
+ "version": "4.0.0",
+ "framework": ">=5",
"homepage": "https://github.com/adaptlearning/adapt-contrib-graphic",
"issues": "https://github.com/adaptlearning/adapt_framework/issues/new",
- "displayName" : "Graphic",
"component" : "graphic",
+ "displayName" : "Graphic",
+ "description": "Graphic component which dynamically displays small and large images of different resolutions based upon device width",
+ "main": "/js/adapt-contrib-graphic.js",
"assetFields" : [
"_graphic.small",
"_graphic.large"
],
- "description": "Graphic component which dynamically displays small and large images of different resolutions based upon device width",
- "main": "/js/adapt-contrib-graphic.js",
"keywords": [
"adapt-plugin",
"adapt-component"
],
- "license": "GPLv3"
+ "license": "GPL-3.0"
}
diff --git a/example.json b/example.json
index 4a33b3d..6d91201 100644
--- a/example.json
+++ b/example.json
@@ -1,18 +1,21 @@
{
- "_id":"c-30",
- "_parentId":"b-15",
- "_type":"component",
- "_component":"graphic",
- "_classes":"",
- "_layout":"left",
- "title":"Here is a graphic object",
- "displayTitle":"Here is a graphic object",
- "body":"Hi everybody!",
- "instruction":"",
+ "_id": "c-05",
+ "_parentId": "b-05",
+ "_type": "component",
+ "_component": "graphic",
+ "_classes": "",
+ "_layout": "left",
+ "title": "Here is a graphic object",
+ "displayTitle": "Here is a graphic object",
+ "body": "Hi everybody!",
+ "instruction": "",
"_graphic": {
- "alt": "alt text",
+ "alt": "Placeholder graphic",
"large": "https://github.com/adaptlearning/documentation/raw/master/04_wiki_assets/adapt_framework/adapt-logo_208x200.gif",
"small": "http://minionslovebananas.com/images/check-in-minion.jpg",
- "attribution":"Copyright © 2015"
+ "attribution": "Copyright © 2019"
+ },
+ "_pageLevelProgress": {
+ "_isEnabled": true
}
}
diff --git a/js/adapt-contrib-graphic.js b/js/adapt-contrib-graphic.js
index 38d9157..72debfd 100644
--- a/js/adapt-contrib-graphic.js
+++ b/js/adapt-contrib-graphic.js
@@ -1,47 +1,47 @@
define([
- 'core/js/adapt',
- 'core/js/views/componentView',
- 'core/js/models/componentModel'
+ 'core/js/adapt',
+ 'core/js/views/componentView',
+ 'core/js/models/componentModel'
], function(Adapt, ComponentView, ComponentModel) {
- var GraphicView = ComponentView.extend({
+ var GraphicView = ComponentView.extend({
- preRender: function() {
- this.listenTo(Adapt, 'device:changed', this.resizeImage);
+ preRender: function() {
+ this.listenTo(Adapt, 'device:changed', this.resizeImage);
- this.checkIfResetOnRevisit();
- },
+ this.checkIfResetOnRevisit();
+ },
- postRender: function() {
- this.resizeImage(Adapt.device.screenSize, true);
- },
+ postRender: function() {
+ this.resizeImage(Adapt.device.screenSize, true);
+ },
- checkIfResetOnRevisit: function() {
- var isResetOnRevisit = this.model.get('_isResetOnRevisit');
+ checkIfResetOnRevisit: function() {
+ var isResetOnRevisit = this.model.get('_isResetOnRevisit');
- if (isResetOnRevisit) {
- this.model.reset(isResetOnRevisit);
- }
- },
+ if (isResetOnRevisit) {
+ this.model.reset(isResetOnRevisit);
+ }
+ },
- resizeImage: function(width, setupInView) {
- var imageWidth = width === 'medium' ? 'small' : width;
- var imageSrc = (this.model.get('_graphic')) ? this.model.get('_graphic')[imageWidth] : '';
- this.$('.graphic-widget img').attr('src', imageSrc);
+ resizeImage: function(width, setupInView) {
+ var imageWidth = width === 'medium' ? 'small' : width;
+ var imageSrc = (this.model.get('_graphic')) ? this.model.get('_graphic')[imageWidth] : '';
+ this.$('.js-graphic-set-image-src').attr('src', imageSrc);
- this.$('.graphic-widget').imageready(function() {
- this.setReadyStatus();
+ this.$('.graphic__widget').imageready(function() {
+ this.setReadyStatus();
- if (setupInView) {
- this.setupInviewCompletion('.component-widget');
- }
- }.bind(this));
+ if (setupInView) {
+ this.setupInviewCompletion('.graphic__widget');
}
- });
-
- return Adapt.register('graphic', {
- model: ComponentModel.extend({}),// create a new class in the inheritance chain so it can be extended per component type if necessary later
- view: GraphicView
- });
+ }.bind(this));
+ }
+ });
+
+ return Adapt.register('graphic', {
+ model: ComponentModel.extend({}),// create a new class in the inheritance chain so it can be extended per component type if necessary later
+ view: GraphicView
+ });
});
diff --git a/less/graphic.less b/less/graphic.less
deleted file mode 100644
index 1b547ae..0000000
--- a/less/graphic.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.graphic-widget-attribution {
- //this could be used to set the position to relative, and then graphic-attribution div to be absolute
-}
-.graphic-attribution {
- font-size:0.75em;
- line-height: 1em;
-}
diff --git a/properties.schema b/properties.schema
index 2c8578a..1a8077a 100644
--- a/properties.schema
+++ b/properties.schema
@@ -1,5 +1,5 @@
{
- "type":"object",
+ "type": "object",
"$schema": "http://json-schema.org/draft-04/schema",
"id": "http://jsonschema.net",
"$ref": "http://localhost/plugins/content/component/model.schema",
@@ -13,7 +13,7 @@
"translatable": true
}
},
- "properties":{
+ "properties": {
"_supportedLayout": {
"type": "string",
"required": true,
@@ -31,13 +31,13 @@
"translatable": true
},
"_graphic": {
- "type":"object",
- "required":true,
+ "type": "object",
+ "required": true,
"title": "Graphic",
- "properties":{
+ "properties": {
"alt": {
- "type":"string",
- "required":false,
+ "type": "string",
+ "required": false,
"default": "",
"title": "Alternative Text",
"inputType": "Text",
@@ -46,24 +46,24 @@
"translatable": true
},
"large": {
- "type":"string",
- "required":true,
+ "type": "string",
+ "required": true,
"default": "",
"inputType": "Asset:image",
"validators": ["required"],
"help": "The large sized image for desktop devices"
},
"small": {
- "type":"string",
- "required":true,
+ "type": "string",
+ "required": true,
"default": "",
"inputType": "Asset:image",
"validators": ["required"],
"help": "The small sized image for mobile devices"
},
"attribution": {
- "type":"string",
- "required":false,
+ "type": "string",
+ "required": false,
"default": "",
"inputType": "Text",
"validators": [],
diff --git a/templates/graphic.hbs b/templates/graphic.hbs
index 1519b6f..01d24fe 100644
--- a/templates/graphic.hbs
+++ b/templates/graphic.hbs
@@ -1,9 +1,23 @@
-