#adapt-textPlus
A presentation component based on the adapt core contributed text component, with two modifications: an optional graphic and the ability to use popups to present lengthy content when device screensize is small.
##Installation
First, be sure to install the Adapt Command Line Interface, then from the command line run:-
adapt install adapt-textPlus
This component can also be installed by adding the component to the adapt.json file before running adapt install:
"adapt-textPlus": "*"
##Usage
This is a presentation component with optional graphic, displayTitle, body, and instruction elements. The graphic element allows for optimization for various devices, swapping out images based on screen size. (screenSize--small, medium, and large--is specified in theme.json.)
##Settings overview
An complete example of this components settings can be found in the example.json file. A description of the core settings can be found at: Core model attributes
####_component
This value must be: textPlus
####_classes
You can use this setting to add custom classes to your template and LESS file.
####_layout
This defines the position of the component in the block. Values can be full, left or right.
####displayTitle, body, instruction
The _graphic,displayTitle, body, and instruction settings can be left blank. However, in this case the blank component would be better suited: adapt-contrib-blank
####_graphic
The image for this component is defined within this element. The _graphic element should contain only one value for alt, title, large, medium and small. The _graphic element can be used without displayTitle, body, and instruction. However, in this case the graphic component would be better suited: adapt-contrib-graphic.
####alt
The alt setting provides alternative information for the image.
####title
This setting is for the title attribute on the image.
####large
Enter a path to the image for large device width. Paths should be relative to the src folder, e.g., course/en/images/pic8_lg.jpg.
####medium
Enter a path to the image for medium device width. Paths should be relative to the src folder, e.g., course/en/images/pic8_md.jpg.
####small
Enter a path to the image for small device width. Paths should be relative to the src folder, e.g., course/en/images/pic8_sm.jpg.
####_maxBodyCharacters
When device.screenSize equals small (e.g., smartphones), this setting specifies the number of characters of the body content that will be displayed. If the body content exceeds this number, an ellipsis will replace the excess and it will be followed by a link to a popup of the complete body content. If not specified, _maxBodyCharacters defaults to 100. To prevent the use of popups, set _maxBodyCharacters to a number greater than the body's character count.
####moreText
A word, phrase, or other representation in characters that indicate that more content will be displayed in a popup by clicking this link. If not specified, moreText defaults to More.
##Limitations
To be completed.
##Browser spec
To be completed.