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

fixes #139) (#140) * use _imageAlignment condition to deter popup item content order * popup image alignment styles updated inline with core notify * use image partial for popup item image * updated schema _imageAlignment property * updated README _imageAlignment description * bump FW to reflect min core version 6.43.2 required - adaptlearning/adapt-contrib-core@4db5616
cgkineo · Dec 20, 2023 · 1a52332 · 1a52332
1 parent 245d2dc
commit 1a52332
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -54,7 +54,7 @@ The title text for the popup that is shown when the item is selected by the lear
 The main text for the popup that is shown when the item is selected by the learner.
 
 #### \_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/hotgridPopup.less b/less/hotgridPopup.less
@@ -34,29 +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;
-
-      .dir-rtl & {
-        margin-left: inherit;
-        margin-right: @item-padding;
-      }
+      flex-direction: column;
+      row-gap: 1rem;
     }
   }
 
@@ -86,16 +68,23 @@
     .u-display-none;
   }
 
-  // Align hotgrid pop up image to the left
+  // Hotgrid 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/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "adapt-hotgrid",
   "version": "4.4.4",
-  "framework": ">=5.31.2",
+  "framework": ">=5.33.10",
   "homepage": "https://github.com/cgkineo/adapt-hotgrid",
   "issues": "https://github.com/cgkineo/adapt-hotgrid/issues/",
   "component": "hotgrid",

diff --git a/properties.schema b/properties.schema
@@ -151,9 +151,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`."
           },
           "_classes": {
             "type": "string",

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