adaptlearning / adapt-contrib-graphic Goto Github PK
View Code? Open in Web Editor NEWA graphic component for adapt that displays different image resolutions based upon device width
License: GNU General Public License v3.0
A graphic component for adapt that displays different image resolutions based upon device width
License: GNU General Public License v3.0
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
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
= v5.30.0
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.
The globals need to be nested inside a _components object.
this.setCompletionStatus();
this.setReadyStatus();
_.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
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.
Schema default is "_blank"
so this should be reflected in example.json.
When the graphic image is used as a hyperlink, there is no indication when the link has been visited.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.