Fix: Remove unnecessary properties for tile/grid layout (fixes #314) (#…

…323)
adaptlearning · Oct 15, 2024 · 14d062c · 14d062c
1 parent d54b46b
commit 14d062c
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 39 deletions.
diff --git 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
@@ -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
@@ -16,7 +16,7 @@ export default function Hotgraphic(props) {
       <div className={classes([
         'component__widget hotgraphic__widget',
         _useGraphicsAsPins ? 'is-tile' : 'is-pin',
-        _graphic.attribution && 'has-attribution'
+        _graphic?.attribution && 'has-attribution'
       ])}>
 
         {_useGraphicsAsPins &&

diff --git a/templates/hotgraphicLayoutPins.jsx b/templates/hotgraphicLayoutPins.jsx
@@ -18,15 +18,17 @@ export default function HotgraphicLayoutPins(props) {
   return (
     <div className="hotgraphic__pins">
 
+      {_graphic &&
       <img
         className="hotgraphic__image"
         src={_graphic.src}
         aria-label={_graphic.alt || null}
         aria-hidden={!_graphic.alt || null}
         data-tooltip-id={_tooltip?._isEnabled && _tooltip?._id}
       />
+      }
 
-      {_graphic.attribution &&
+      {_graphic?.attribution &&
       <div className="component__attribution hotgraphic__attribution">
         <div className="component__attribution-inner hotgraphic__attribution-inner">
           {_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',