adaptlearning / adapt-contrib-graphic Goto Github PK

Where it does _graphic.large=_graphic.src?

basically if it's either larger than or the same size (or very nearly) as the viewport it's not possible/quite tricky to complete it on a mobile device

bower.json must have the following attributes:

• displayName
• component

This currently stops plugins from plugging into the inview and _isVisible attribute

Error An img element with no alt attribute must not have any aria-*
attributes other than aria-hidden .
From line 135, column 1793; to line 135, column 1943
ontainer"><img class="component__image graphic__image" src="course/en /images/icon_obj.png" aria-label="Placeholder graphic." ariahidden=" false" loading="eager"></div>

This is to help the authoring tool determine layout styles for this component

Subject of the issue/enhancement/features

Now that e2e tests are run on PR creation we should add to these. This issue is specifically directed at tests for the graphic component

Your environment

• = v5.30.0

• This is due to on full width graphics it should use the large size when on desktop - whilst on the medium sized (single column) layout it should switch to the small image.
• There is no need for the medium image size.
• When using the graphic single width it should only use the small sized graphic

Latest schema format need applying, attribution attribute needs adding, _graphic.medium needs removing.

I think there might be a bug between the device width of 774px and 761px whereby it is changing the image to the medium image size too early.

Testing method:
Set 3 different image sizes, for example I have included web hosted images below for clearer testing:

   {
        "_id":"c-30",
        "_parentId":"b-15",
        "_type":"component",
        "_component":"graphic",
        "_classes":"",
        "_layout":"left",
        "title":"Here is a graphic object",
        "body":"Hi everybody!",
        "graphic": {
            "alt": "alt text",
            "title": "title text",
            "large": "http://placehold.it/467x500",
            "medium": "http://placehold.it/471x200/ffcc00",
            "small": "http://placehold.it/471x300"
        }
    }

When between 774px and 761px you will notice that the yellow image example is showing. I don't think this shouldn't change until below 760px.

Tested on Mac; Chrome, Safari and Firefox

Ln 31 of readme has example.json. Should be example.json.

Subject of the issue/enhancement/features

The globals need to be nested inside a _components object.

• The following should be used to set _isReady and _isComplete on the model inside a view

this.setCompletionStatus();
this.setReadyStatus();

• Image ready function will then need _.bind added to callback to allow this.setReadyStatus();

Should be a select and have a default value of _blank

This should be based upon _isResetOnRevisit

• If set to true - presentation components should reset themselves
• State and model attributes should be reset
• To test this out please change this in the adaptModel.js
• Should be done on the develop branch

Subject of the issue

Schema requires _target to have value of "_blank", "_self", "_parent", or "_top". If example.json is used and subsequently imported into the Adapt Authoring Tool data validation fails.

Expected behaviour

Schema default is "_blank" so this should be reflected in example.json.

• Need to update the templates to have component name prefix. Please look at the text component for an example of this

Subject of the enhancement

When the graphic image is used as a hyperlink, there is no indication when the link has been visited.

Expected behaviour

For consistency with other presentation components, I'd expect the graphic to receive .is-visited class and a tick icon displayed. See other component examples below.

Add _assetFields property

see adaptlearning/adapt_framework#289

Wondering if there would be any appetite to include an additional long description text field to allow adding a "long description" of infographic type graphics.

See this URL for an nice simple implementation. It means the pages are not initially overly long and the additional information is available to all users.

https://psu.instructure.com/courses/2004931/pages/long-description-examples-charts?module_item_id=30603503