Update: Add hover and visited image options for pin images (fixes #318)

example.json

@@ -148,6 +148,7 @@
     // is an image rather than a pin icon.
     // --------------------------------------------------
     {
+        "_useGraphicsAsPins": false,
         "_items": [
             {
                 "_left": 25,
@@ -170,7 +171,9 @@
                     "_position": ""
                 },
                 "_pin": {
-                    "src": "course/en/images/example.jpg",
+                    "src": "course/en/images/pin.png",
+                    "srcHover": "course/en/images/pin-hover.png",
+                    "srcVisited": "course/en/images/pin-visited.png",
                     "alt": ""
                 }
             },
@@ -195,7 +198,9 @@
                     "_position": ""
                 },
                 "_pin": {
-                    "src": "course/en/images/example.jpg",
+                    "src": "course/en/images/pin.png",
+                    "srcHover": "course/en/images/pin-hover.png",
+                    "srcVisited": "course/en/images/pin-visited.png",
                     "alt": ""
                 }
             }

less/hotgraphic.less

@@ -1,69 +1,100 @@
-.hotgraphic {
-  &__widget {
-    position: relative;
-  }
+.hotgraphic__widget {
+  position: relative;
+}
 
-  // Hotgraphic as pins
-  // --------------------------------------------------
-  &__pin {
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: @icon-padding / 2;
+// Hotgraphic as pins
+// --------------------------------------------------
+.hotgraphic__pin {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: @icon-padding / 2;
 
-    @media (min-width: @device-width-medium) {
-      padding: @icon-padding;
-    }
+  @media (min-width: @device-width-medium) {
+    padding: @icon-padding;
   }
 
-  &__pin .icon {
+  .icon {
     .icon-pin;
   }
 
-  &__pin.is-visited .icon {
+  &.is-visited .icon {
     .icon-tick;
   }
 
-  &__pin.offset-origin {
+  &.offset-origin {
     .transform(translate(-50%, -50%));
   }
 
-  &__pin.has-pin-image {
+  &.has-pin-image {
     padding: 0;
   }
 
-  &__pin-number {
+  &-number {
     display: block;
   }
 
-  &__pin-tooltip.is-static {
+  &-tooltip.is-static {
     --adapt-tooltip-distance: 0;
     --adapt-tooltip-arrow: false;
-  
+
     .tooltip__body {
       color: @black;
       background-color: transparent;
     }
   }
+}
+
+// Pin image states
+// --------------------------------------------------
+.pin-state-mixin(default, hover, visited);
+.pin-state-mixin(hover, default, visited);
+.pin-state-mixin(visited, default, hover);
 
-  // Hotgraphic as tiles
-  // --------------------------------------------------
-  &__tile-item-container {
+.pin-state-mixin(@active-state, @inactive-state-one, @inactive-state-two) {
+  .pin-state.is-@{active-state} {
+    .hotgraphic__pin-image.is-@{active-state} {
+      display: block;
+    }
+
+    .hotgraphic__pin-image.is-@{inactive-state-one},
+    .hotgraphic__pin-image.is-@{inactive-state-two} {
+      display: none;
+    }
+  }
+}
+
+// Application of pin image states
+// --------------------------------------------------
+.hotgraphic__pin.has-pin-image-states {
+  .pin-state.is-default;
+
+  .no-touch &:hover {
+    .pin-state.is-hover;
+  }
+
+  &.is-visited {
+    .pin-state.is-visited;
+  }
+}
+
+// Hotgraphic as tiles
+// --------------------------------------------------
+.hotgraphic__tile {
+  position: relative;
+  width: 100%;
+
+  &-item-container {
     display: flex;
     flex-wrap: wrap;
   }
 
-  &__tile-item {
+  &-item {
     width: 50%;
     line-height: 0;
   }
 
-  &__tile {
-    position: relative;
-    width: 100%;
-  }
-
-  &__tile .icon {
+  .icon {
     position: absolute;
     bottom: 1.0rem;
     right: 1.0rem;
@@ -74,7 +105,7 @@
     }
   }
 
-  &__tile.is-visited .icon {
+  &.is-visited .icon {
     .icon-tick;
   }
 }

properties.schema

@@ -347,15 +347,34 @@
           "_pin": {
             "type": "object",
             "required": false,
-            "title": "Item Pin",
+            "title": "Pin",
             "properties": {
               "src": {
                 "type": "string",
                 "required": false,
                 "default": "",
                 "inputType": "Asset:image",
                 "validators": [] ,
-                "help": "This is the pin image, leave blank for default"
+                "title": "Pin image (default)",
+                "help": "This is the pin image. Leave blank to use the default icon."
+              },
+              "srcHover": {
+                "type": "string",
+                "required": false,
+                "default": "",
+                "inputType": "Asset:image",
+                "validators": [] ,
+                "title": "Pin image (hover)",
+                "help": "This is the pin image hover state  (optional)."
+              },
+              "srcVisited": {
+                "type": "string",
+                "required": false,
+                "default": "",
+                "inputType": "Asset:image",
+                "validators": [] ,
+                "title": "Pin image (visited)",
+                "help": "This is the pin image visited state  (optional)."
               },
               "alt": {
                 "type": "string",

schema/component.schema.json

@@ -258,8 +258,28 @@
                   "src": {
                     "type": "string",
                     "isObjectId": true,
-                    "title": "Source",
-                    "description": "This is the pin image, leave blank for default",
+                    "title": "Pin image (default)",
+                    "description": "This is the pin image. Leave blank to use the default icon.",
+                    "_backboneForms": {
+                      "type": "Asset",
+                      "media": "image"
+                    }
+                  },
+                  "srcHover": {
+                    "type": "string",
+                    "isObjectId": true,
+                    "title": "Pin image (hover)",
+                    "description": "This is the pin image hover state (optional).",
+                    "_backboneForms": {
+                      "type": "Asset",
+                      "media": "image"
+                    }
+                  },
+                  "srcVisited": {
+                    "type": "string",
+                    "isObjectId": true,
+                    "title": "Pin image (visited)",
+                    "description": "This is the pin image visited state (optional).",
                     "_backboneForms": {
                       "type": "Asset",
                       "media": "image"

templates/hotgraphicLayoutPins.jsx

@@ -56,6 +56,7 @@ export default function HotgraphicLayoutPins(props) {
                   _graphic?._classes,
                   _isVisited && 'is-visited',
                   _pin.src && 'has-pin-image',
+                  (_pin.src && _pin.srcHover && _pin.srcVisited) && 'has-pin-image-states',
                   _useNumberedPins && 'is-numbered-pin',
                   _pinOffsetOrigin && 'offset-origin'
                 ])}
@@ -72,7 +73,15 @@ export default function HotgraphicLayoutPins(props) {
                   'hotgraphic__pin-image-container',
                   `item-${_index}`
                 ])}>
-                  <img className="hotgraphic__pin-image" src={_pin.src} aria-hidden="true" />
+                  <img className="hotgraphic__pin-image is-default" src={_pin.src} aria-hidden="true" />
+
+                  {_pin.srcHover &&
+                    <img className="hotgraphic__pin-image is-hover" src={_pin.srcHover} />
+                  }
+
+                  {_pin.srcVisited &&
+                    <img className="hotgraphic__pin-image is-visited" src={_pin.srcVisited} />
+                  }
                 </span>
                 }