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