Skip to content

Commit

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

* Naming refactor, spacing amends

* Global attribution class

* Removed empty less file

* Attribution support

* Bower, schema, example and readme updates

* Updated license and cross platform coverage
  • Loading branch information
guywillis authored Nov 13, 2019
1 parent 8c74ab1 commit f1fb198
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 92 deletions.
28 changes: 14 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/graphic01.png" alt="sample graphic component" align="center">

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

Expand Down Expand Up @@ -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.
Expand All @@ -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 <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:** 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 <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-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
12 changes: 6 additions & 6 deletions bower.json
Original file line number Diff line number Diff line change
@@ -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"
}
27 changes: 15 additions & 12 deletions example.json
Original file line number Diff line number Diff line change
@@ -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
}
}
66 changes: 33 additions & 33 deletions js/adapt-contrib-graphic.js
Original file line number Diff line number Diff line change
@@ -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
});

});
7 changes: 0 additions & 7 deletions less/graphic.less

This file was deleted.

26 changes: 13 additions & 13 deletions properties.schema
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -13,7 +13,7 @@
"translatable": true
}
},
"properties":{
"properties": {
"_supportedLayout": {
"type": "string",
"required": true,
Expand All @@ -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",
Expand All @@ -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": [],
Expand Down
28 changes: 21 additions & 7 deletions templates/graphic.hbs
Original file line number Diff line number Diff line change
@@ -1,9 +1,23 @@
<div class="graphic-inner component-inner">
{{> component this}}
<div class="graphic-widget component-widget{{#if _graphic.attribution}} graphic-widget-attribution{{/if}}">
<img src="{{_graphic.src}}" data-large="{{_graphic.large}}" data-small="{{_graphic.small}}" {{#if _graphic.alt}}aria-label="{{_graphic.alt}}"{{else}}aria-hidden="true"{{/if}} />
<div class="component__inner graphic__inner">

{{> component this}}

<div class="component__widget graphic__widget">

<div class="graphic__image-container{{#if _graphic.attribution}} has-attribution{{/if}}">

<img class="graphic__image js-graphic-set-image-src" src="{{_graphic.src}}" data-large="{{_graphic.large}}" data-small="{{_graphic.small}}" {{#if _graphic.alt}}aria-label="{{_graphic.alt}}"{{else}}aria-hidden="true"{{/if}}>

{{#if _graphic.attribution}}
<div class="component__attribution graphic__attribution">
<div class="component__attribution-inner graphic__attribution-inner">
{{{_graphic.attribution}}}
</div>
</div>
{{/if}}

</div>
{{#if _graphic.attribution}}
<div class="graphic-attribution">{{{_graphic.attribution}}}</div>
{{/if}}

</div>

</div>

0 comments on commit f1fb198

Please sign in to comment.