danielstorey / adapt-expose

An Adapt Framework component which displays panels of content hidden behind front covers. Click to expose the content below

adapt-expose

Expose is a presentation component Created by Dan storey.

The Expose component displays panels of content hidden behind front covers. When clicked the cover animates to expose the content below. A range of different animations are available as listed below. When clicked again the cover is restored.

Click here for an interactive demo

##Installation

Run the following from the command line: adapt install adapt-expose

Settings Overview

The attributes listed below are used in components.json to configure Expose, and are properly formatted as JSON in example.json.

Attributes

For core model attributes see core model attributes. The attributes listed below are specific to the Expose component.

_component (string): This value must be: expose (one word).

_columns (string): The number of expose items on one line. Items display full width on smaller screen sizes.

_animationType (string): Possible built-in values are shrink, flipUp, flipLeft, slideUp, slideDown, slideLeft, slideRight. You may also assign your own value and use css to create your own animation. Documentation for this coming soon.

_equalHeights (boolean): Heights of each item are automatically resized to match the tallest one. Set this value to false to override this behaviour.

_items (array): Each item represents a panel of content and its cover.

front (string): The text for item's cover (default ?).

back (object): An image to be used for the expose item (optional).

title (string): The body text for the item (optional).

body (string): The body text for the item.

graphic (object): An image to be used for the expose item (optional).

src (string): path of the image relative to the src folder.

alt (string): This text becomes the image’s alt attribute.

Limitations

No known limitations

---

Framework versions: >=3.0.0 Author / maintainer: Dan Storey

adapt-expose's Issues

Error generating preview, please contact Administrator.

Hi Dan, first of all. Love your work.
I'm really keen to use this component from within the Adapt Authoring Tool, however it appears that when I had this component I am unable to preview.
Other plugins (including your stack plugin) seem to be working ok. I'm working locally from within Chrome.
Any advice to help resolve?

Authoring Tool issues

• 'shrink' animation is not available
• Title for _columns property is wrong

Not appearing as expected when added in trickle

Hi Daniel,
First of all, this component is very nice.

Issue:

When we add this component to the trickled block, it appears incorrectly at first glance but as soon as we click any where on the page or even if we click on the browser URL, it rearranges correctly.

Steps to reproduce:

• Add this component into any trickled block except first one.
• As soon as we reached the component's block the first front cover's height increases.
• Click anywhere on the page the first front cover's height will be automatically adjusted.

We have used Adapt Framework =>2

Please see the screenshot below:

I am sharing my Json for the reference:

{
		"_id": "c-01",
	  	"_parentId": "b-03",
		"_type": "component",
		"_component": "expose",
		"_classes": "",
		"_layout": "full",
		"title": "Lorem ipsom",
		"displayTitle": "Lorem ipsomLorem ipsomLorem ipsom",
		"body": "Lorem ipsom Lorem ipsomLorem ipsomLorem ipsom",
		"instruction": "Select each icon",
		"_columns" : 3,
		"_equalHeights": true,
		"_animationType": "shrink",
		"_items": [
			{
				"front": "<img src='course/en/images/expose1.png'>",
				"back": {
					"title": "",
					"body": "Lorem ipsom"
				}
			},
			{
				"front": "<img src='course/en/images/expose2.png'>",
				"back": {
					"title": "",
					"body": "Lorem ipsom"
				}
			},
			{
				"front": "<img src='course/en/images/expose3.png'>",
				"back": {
					"title": "",
					"body": "Lorem ipsom"
				}
			}
		]
	}

Note: This issue is appearing because of property "_autoScroll": "true" in trickle if we false this property the component works fine.

Can you please help regarding this issue?

Minimum height

Hi Dan,

Is it possible to have an optional minimum height setting as if you have slightly different amounts of text, they look a bit untidy!

Firefox last item animation

When viewed in Firefox, the right-hand expose button doesn't function like the other 2 - the text is displayed when clicked, but only gets hidden again when the user clicks and then moves their mouse away

Cannot click on URLS within the text

If I have a link in the text inside the reveal the user cannot click on it as clicking anywhere in the text block just closes the door!

Vertical Centering on Cover

When the text on the cover extends to two lines it will no longer be vertically centered on the cover, the lines are flush at the top of the cover with no space between the lines.

I am working through the authoring tool and using Internet Explorer 11 just in case it matters.

Animation type must be a number.

No matter which animation type I choose I get the error Animation type must be a number when trying to save the settings.

Animation type change doesn't seem to apply!

I get the same looking transition no matter what I pick.

MathJax

I have the MathJax plugin (for displaying equations) installed in the Authoring Tool along with the Expose Plugin. When I put equations in the body of an Expose component the equations appear above the cover rather than below.

I am working through the authoring tool and using Internet Explorer 11 just in case it matters.

Columns not working

I put 3 for the column width but my 3 items are stacked one on top of the other in full width mode.

Not fully accessible

Does not work in ie8

I realize that not all components are ie8 compatible, but I am using the legacy framework for a client, and it would be nice to use this component.

The issue is that clicking on the covers, they do not disappear.

Probably some incompatible JS relating to the animations.

Image is being ignored

Hi Dan. Really useful component this. Love it.

I've been having an issue whereby if the content being exposed is text and image, the image height is being ignored by the component the first time you load it (see Img01 - the front cover is the bit with the number on it - its height and the entire component's height aren't accommodating the image height). Resizing the browser window fixes it (Img02).

Edge: Jerky animation

When viewed on Edge, the animations for this component is noticeably more jerky than on other browsers.

Error generating preview, please contact an administrator. Adapt Framework V5

trying to use your plugin on Adapt Version 5 but getting this error

Command failed: grunt server-build:prod --outputdir=courses/5ed6ce5976433a0b762f7146/5ed8d1522497f977637296b8/build --theme=5ed6fa4811c1f54278eca1be --menu=adapt-contrib-boxMenu

Fatal error: {
"message": "variable @secondary-color is undefined",
"type": "Name",
"filename": "src/components/adapt-expose/less/expose.less",
"index": 2018,
"line": 142,
"column": 14,
"callLine": null,
"extract": [
"\t\tpadding: 20px;",
"\t\tbackground: @secondary-color;",
"\t\tcolor: #ffffff;"
]
}�