diff --git a/README.md b/README.md index 6d3c1f0..67ede7a 100644 --- a/README.md +++ b/README.md @@ -84,7 +84,7 @@ If enabled, on mobile, text and images will be stacked vertically. No interactio If set to `true`, the pin icons will be replaced with the item number. Useful if you want pins to be visited in a set order or show steps in a process. The default is `false`. ### \_useGraphicsAsPins (boolean): -If set to `true`, the image specified by `_graphic.src` will be ignored and the popup images specified in `_items[n]._graphic.src` will instead be laid out in a 2 item width grid system. See [example.json](example.json#L79-L115) for a working example. The default is `false`. +If set to `true`, the image specified by `_graphic.src` will be ignored and the popup images specified in `_items[n]._graphic.src` will instead be laid out in a 2 column grid system. See [example.json](example.json) for a working example. The default is `false`. ### \_hasStaticTooltips (boolean): If set to `true`, tooltips (if enabled) will always be shown rather than only on hover. @@ -125,10 +125,10 @@ Optional text to be displayed as an [attribution](https://wiki.creativecommons.o Multiple items may be created. Each entry in the array should be an object, containing the following settings: #### \_top (number): -Each item must contain `_top` and `_left` coordinates to define its position over the main graphic. Enter a percentage value (0-100) that this item should be from the top border of the main graphic. +Each item must contain `_top` and `_left` coordinates to define its position over the main graphic. Enter a percentage value (0-100) that this item should be from the top border of the main graphic. Not required for tile/grid layout. #### \_left (number): -Enter a percentage value (0-100) that this item should be from the left border of the main graphic. +Enter a percentage value (0-100) that this item should be from the left border of the main graphic. Not required for tile/grid layout. #### title (string): This is the title text for the hot spot's pop-up. @@ -140,12 +140,18 @@ This is the main text for a hot spot pop-up. This text is displayed when `device.screenSize` is `small` (i.e. when viewed on mobile devices, except when the [_isNarrativeOnMobile](#_isnarrativeonmobile-boolean) setting is set to `false`). It is presented in a title bar above the image. #### \_imageAlignment (string): -Defines the alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Top: Image aligned above the text area. Right: Image aligned to the right of the text area. Bottom: Image aligned below the text area. The default alignment is `right`. +Defines the alignment of the item image in the pop up. The default alignment is `right`. Not required for tile/grid layout. + +* `"left"`: Image aligned to the left of the text area +* `"top"`: Image aligned above the text area +* `"right"`: Image aligned to the right of the text area +* `"bottom"`: Image aligned below the text area #### \_classes (string): CSS class name(s) to be applied to the popup item. Classes available by default are: -* `"hide-desktop-image"` (hides the pop up image in desktop view) -* `"hide-popup-image"` (hides the pop up image for all screen sizes) + +* `"hide-desktop-image"`: Hides the pop up image in desktop view +* `"hide-popup-image"`: Hides the pop up image for all screen sizes Any other classes need to be predefined in one of the Less files. Separate multiple classes with a space. diff --git a/example.json b/example.json index 900a723..529b345 100644 --- a/example.json +++ b/example.json @@ -1,4 +1,4 @@ - // Regular hotgraphic + // Standard Hot Graphic // -------------------------------------------------- { "_id": "c-05", @@ -26,9 +26,9 @@ "_isRound": false, "_pinOffsetOrigin": false, "_graphic": { - "src": "course/en/images/example.jpg", + "src": "course/en/images/background.jpg", "alt": "", - "attribution": "Copyright © 2019" + "attribution": "Copyright © 2024" }, "_items": [ { @@ -41,9 +41,9 @@ "_comment": "Supported classes = 'hide-desktop-image' | 'hide-popup-image'. Additional classes can be used but they must be predefined in one of the Less files", "_classes": "", "_graphic": { - "src": "course/en/images/example.jpg", + "src": "course/en/images/hotgraphic-1.jpg", "alt": "", - "attribution": "Copyright © 2019", + "attribution": "Copyright © 2024", "_classes": "" }, "_tooltip": { @@ -62,7 +62,7 @@ "_imageAlignment": "left", "_classes": "", "_graphic": { - "src": "course/en/images/example.jpg", + "src": "course/en/images/hotgraphic-2.jpg", "alt": "", "attribution": "", "_classes": "" @@ -78,12 +78,12 @@ "_top": 75, "_left": 75, "title": "Hotspot 3 title", - "body": "This is display text 3.", + "body": "This is display text 3 with a right aligned image.", "strapline": "Hotspot 3 strapline", "_imageAlignment": "right", "_classes": "", "_graphic": { - "src": "course/en/images/example.jpg", + "src": "course/en/images/hotgraphic-3.jpg", "alt": "", "attribution": "", "_classes": "" @@ -101,25 +101,22 @@ } } - // Example using graphics as pins - // The following example lays out the item graphics (_items._graphic) - // in a 2x2 grid. + // Tile / grid layout + // This layout uses graphics as pin "tiles" and lays out the + // item graphics (_items._graphic) in a 2 column grid. // -------------------------------------------------- { "_useGraphicsAsPins": true, "_items": [ { - "_top": 25, - "_left": 25, - "title": "Hotspot 1 title", + "title": "Tile 1 title", "body": "This is display text 1.", - "strapline": "Hotspot 1 strapline", - "_imageAlignment": "right", + "strapline": "Tile 1 strapline", "_classes": "", "_graphic": { - "src": "course/en/images/example.jpg", + "src": "course/en/images/hotgraphic-1.jpg", "alt": "", - "attribution": "Copyright © 2019", + "attribution": "Copyright © 2024", "_classes": "" }, "_tooltip": { @@ -128,15 +125,12 @@ } }, { - "_top": 50, - "_left": 50, - "title": "Hotspot 2 title", + "title": "Tile 2 title", "body": "This is display text 2.", - "strapline": "Hotspot 2 strapline", - "_imageAlignment": "right", + "strapline": "Tile 2 strapline", "_classes": "", "_graphic": { - "src": "course/en/images/example.jpg", + "src": "course/en/images/hotgraphic-2.jpg", "alt": "", "attribution": "", "_classes": "" @@ -149,9 +143,9 @@ ] } - // Example using graphic pins - // In the following example there is a background image and each pin - // is an image rather than a pin icon + // Graphic pins + // This layout uses a background image where each pin item + // is an image rather than a pin icon. // -------------------------------------------------- { "_items": [ @@ -164,9 +158,9 @@ "_imageAlignment": "right", "_classes": "", "_graphic": { - "src": "course/en/images/example.jpg", + "src": "course/en/images/hotgraphic-1.jpg", "alt": "", - "attribution": "Copyright © 2019", + "attribution": "Copyright © 2024", "_classes": "" }, "_tooltip": { @@ -189,7 +183,7 @@ "_imageAlignment": "right", "_classes": "", "_graphic": { - "src": "course/en/images/example.jpg", + "src": "course/en/images/hotgraphic-2.jpg", "alt": "", "attribution": "", "_classes": "" diff --git a/templates/hotgraphic.jsx b/templates/hotgraphic.jsx index 1635bb4..8a49d1f 100644 --- a/templates/hotgraphic.jsx +++ b/templates/hotgraphic.jsx @@ -16,7 +16,7 @@ export default function Hotgraphic(props) {
{_useGraphicsAsPins && diff --git a/templates/hotgraphicLayoutPins.jsx b/templates/hotgraphicLayoutPins.jsx index d5644dd..46ef68b 100644 --- a/templates/hotgraphicLayoutPins.jsx +++ b/templates/hotgraphicLayoutPins.jsx @@ -18,6 +18,7 @@ export default function HotgraphicLayoutPins(props) { return (
+ {_graphic && + } - {_graphic.attribution && + {_graphic?.attribution &&
{_graphic.attribution} @@ -51,7 +53,7 @@ export default function HotgraphicLayoutPins(props) { className={classes([ 'btn-icon hotgraphic__pin', `item-${_index}`, - _graphic._classes, + _graphic?._classes, _isVisited && 'is-visited', _pin.src && 'has-pin-image', _useNumberedPins && 'is-numbered-pin',