Update: expand _imageAlignment properties and set popup item DOM order (

fixes #289) (#290) * Use _imageAlignment condition to deter popup item content order * popup image alignment styles updated inline with core notify * update schema _imageAlignment property * update schema _imageAlignment property * update README _imageAlignment description * use image partial for popup item image
adaptlearning · Jan 3, 2024 · 95e03a4 · 95e03a4
1 parent 0a9504a
commit 95e03a4
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -122,7 +122,7 @@ 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 horizontal alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Right: Image aligned to the right of the text area. The default alignment is `right`.
+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`.
 
 #### \_classes (string):
 CSS class name(s) to be applied to the popup item. Classes available by default are:

diff --git a/less/hotgraphicPopup.less b/less/hotgraphicPopup.less
@@ -34,24 +34,11 @@
 
   // Pop up item
   // --------------------------------------------------
-  &__item-image-container {
-    width: 60%;
-    margin: auto;
-  }
-
   @media (min-width: @device-width-medium) {
     &__item {
       display: flex;
-      align-items: flex-start;
-    }
-
-    &__item-content {
-      width: 60%;
-    }
-
-    &__item-image-container {
-      width: 40%;
-      margin-left: @item-padding;
+      flex-direction: column;
+      row-gap: 1rem;
     }
   }
 
@@ -81,16 +68,23 @@
     .u-display-none;
   }
 
-  // Align hotgraphic pop up image to the left
+  // Hotgraphic pop up image alignment
   // --------------------------------------------------
   @media (min-width: @device-width-medium) {
-    &__item.align-image-left {
-      flex-direction: row-reverse;
+    &__item.align-image-left,
+    &__item.align-image-right {
+      flex-direction: row;
+      column-gap: 1rem;
+    }
+
+    &__item.align-image-left &__item-content,
+    &__item.align-image-right &__item-content {
+      width: 60%;
     }
 
-    &__item.align-image-left &__item-image-container {
-      margin-left: inherit;
-      margin-right: @item-padding;
+    &__item.align-image-left &__item-image-container,
+    &__item.align-image-right &__item-image-container {
+      width: 40%;
     }
   }
 

diff --git a/properties.schema b/properties.schema
@@ -230,9 +230,9 @@
             "type": "string",
             "required": false,
             "default": "right",
-            "inputType": {"type":"Select", "options":["left","right"]},
+            "inputType": {"type":"Select", "options":["left","top","right","bottom"]},
             "title": "Image alignment",
-            "help": "Defines the horizontal alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Right: Image aligned to the right of the text area. The default alignment is `right`."
+            "help": "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`."
           },
           "_graphic": {
             "type": "object",

diff --git a/schema/component.schema.json b/schema/component.schema.json
@@ -168,11 +168,13 @@
               "_imageAlignment": {
                 "type": "string",
                 "title": "Image alignment",
-                "description": "Defines the horizontal alignment of the item image in the pop up. Left: Image aligned to the left of the text area. Right: Image aligned to the right of the text area. The default alignment is `right`",
+                "description": "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`.",
                 "default": "right",
                 "enum": [
                   "left",
-                  "right"
+                  "top",
+                  "right",
+                  "bottom"
                 ],
                 "_backboneForms": "Select"
               },

diff --git a/templates/hotgraphicPopup.jsx b/templates/hotgraphicPopup.jsx
@@ -37,6 +37,14 @@ export default function HotgraphicPopup(props) {
         aria-hidden={!_isActive ? true : null}
         >
 
+          {(_imageAlignment === 'left' || _imageAlignment === 'top') &&
+          <templates.image {..._graphic}
+            classNamePrefixSeparator='__item-'
+            classNamePrefixes={['component-item', 'hotgraphic-popup']}
+            attributionClassNamePrefixes={['component', 'hotgraphic-popup']}
+          />
+          }
+
           <div className="hotgraphic-popup__item-content">
             <div className="hotgraphic-popup__item-content-inner">
 
@@ -68,29 +76,13 @@ export default function HotgraphicPopup(props) {
             </div>
           </div>
 
-          <div className={classes([
-            'hotgraphic-popup__item-image-container',
-            _graphic.attribution && 'has-attribution'
-          ])}
-          >
-
-            <img
-              className="hotgraphic-popup__item-image"
-              src={_graphic.src}
-              aria-label={_graphic.alt || null}
-              aria-hidden={!_graphic.alt || null}
-            />
-
-            {_graphic.attribution &&
-            <div className="component__attribution hotgraphic-popup__attribution">
-              <div
-                className="component__attribution-inner hotgraphic-popup__attribution-inner"
-                dangerouslySetInnerHTML={{ __html: _graphic.attribution }}
-              />
-            </div>
-            }
-
-          </div>
+          {(_imageAlignment === 'right' || _imageAlignment === 'bottom') &&
+          <templates.image {..._graphic}
+            classNamePrefixSeparator='__item-'
+            classNamePrefixes={['component-item', 'hotgraphic-popup']}
+            attributionClassNamePrefixes={['component', 'hotgraphic-popup']}
+          />
+          }
 
         </div>
       )}