From 99c00b5d272739315c63edf521632ba131848b67 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Thu, 3 Oct 2024 12:46:16 -0600 Subject: [PATCH 1/9] Documentation updates --- README.md | 2 +- example.json | 15 ++++++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 6d3c1f0..a47e97d 100644 --- 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. diff --git a/example.json b/example.json index 900a723..ad365a1 100644 --- a/example.json +++ b/example.json @@ -1,4 +1,4 @@ - // Regular hotgraphic + // Standard Hot Graphic // -------------------------------------------------- { "_id": "c-05", @@ -101,9 +101,9 @@ } } - // 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, @@ -149,11 +149,12 @@ ] } - // 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. // -------------------------------------------------- { + "_useGraphicsAsPins": false, "_items": [ { "_left": 25, From 90d540cecc868cbe108894b893abc6293f089456 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Thu, 3 Oct 2024 14:21:41 -0600 Subject: [PATCH 2/9] example.json: Add srcHover and srcVisited --- example.json | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/example.json b/example.json index ad365a1..cc30ac7 100644 --- a/example.json +++ b/example.json @@ -177,7 +177,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": "" } }, @@ -202,7 +204,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": "" } } From 0096da4e2d026e90b71e4a61a27497420db2a334 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Thu, 3 Oct 2024 15:08:23 -0600 Subject: [PATCH 3/9] Add srcHover and srcVisited to schemas --- properties.schema | 23 +++++++++++++++++++++-- schema/component.schema.json | 24 ++++++++++++++++++++++-- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/properties.schema b/properties.schema index 658384c..1724ced 100644 --- a/properties.schema +++ b/properties.schema @@ -347,7 +347,7 @@ "_pin": { "type": "object", "required": false, - "title": "Item Pin", + "title": "Pin", "properties": { "src": { "type": "string", @@ -355,7 +355,26 @@ "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", diff --git a/schema/component.schema.json b/schema/component.schema.json index 0dfd75a..25641fe 100644 --- a/schema/component.schema.json +++ b/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" From f9ff362264c52d36dfc0359f26249fccdeb567bb Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Thu, 3 Oct 2024 15:45:25 -0600 Subject: [PATCH 4/9] Add hover and visited images to template --- templates/hotgraphicLayoutPins.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/templates/hotgraphicLayoutPins.jsx b/templates/hotgraphicLayoutPins.jsx index d5644dd..bb1c8c9 100644 --- a/templates/hotgraphicLayoutPins.jsx +++ b/templates/hotgraphicLayoutPins.jsx @@ -70,7 +70,15 @@ export default function HotgraphicLayoutPins(props) { 'hotgraphic__pin-image-container', `item-${_index}` ])}> - + + + {_pin.srcHover && + + } + + {_pin.srcVisited && + + } } From b372dcd8927eb9276b7749fb835d5e93688bc9f3 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Thu, 3 Oct 2024 15:59:04 -0600 Subject: [PATCH 5/9] Fix pin image class names in template --- templates/hotgraphicLayoutPins.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/hotgraphicLayoutPins.jsx b/templates/hotgraphicLayoutPins.jsx index bb1c8c9..44de22f 100644 --- a/templates/hotgraphicLayoutPins.jsx +++ b/templates/hotgraphicLayoutPins.jsx @@ -73,11 +73,11 @@ export default function HotgraphicLayoutPins(props) { {_pin.srcHover && - + } {_pin.srcVisited && - + } } From 9872eb56f9614454f2a4c5f82ae7329b5e42c61e Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Thu, 3 Oct 2024 16:02:01 -0600 Subject: [PATCH 6/9] Remove nesting in less --- less/hotgraphic.less | 122 +++++++++++++++++++++---------------------- 1 file changed, 60 insertions(+), 62 deletions(-) diff --git a/less/hotgraphic.less b/less/hotgraphic.less index c54a1f3..f59af29 100644 --- a/less/hotgraphic.less +++ b/less/hotgraphic.less @@ -1,80 +1,78 @@ -.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; +} - &__pin-number { - display: block; - } +.hotgraphic__pin-number { + display: block; +} - &__pin-tooltip.is-static { - --adapt-tooltip-distance: 0; - --adapt-tooltip-arrow: false; - - .tooltip__body { - color: @black; - background-color: transparent; - } - } +.hotgraphic__pin-tooltip.is-static { + --adapt-tooltip-distance: 0; + --adapt-tooltip-arrow: false; - // Hotgraphic as tiles - // -------------------------------------------------- - &__tile-item-container { - display: flex; - flex-wrap: wrap; + .tooltip__body { + color: @black; + background-color: transparent; } +} - &__tile-item { - width: 50%; - line-height: 0; - } +// Hotgraphic as tiles +// -------------------------------------------------- +.hotgraphic__tile-item-container { + display: flex; + flex-wrap: wrap; +} - &__tile { - position: relative; - width: 100%; - } +.hotgraphic__tile-item { + width: 50%; + line-height: 0; +} - &__tile .icon { - position: absolute; - bottom: 1.0rem; - right: 1.0rem; - padding: @icon-padding / 2; +.hotgraphic__tile { + position: relative; + width: 100%; +} - @media (min-width: @device-width-medium) { - padding: @icon-padding; - } - } +.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; +} From 32ecd2cccc6329bfc120f7b9ad18f7d7cdaf4d22 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Mon, 7 Oct 2024 13:07:47 -0600 Subject: [PATCH 7/9] Add styles for image states --- less/hotgraphic.less | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/less/hotgraphic.less b/less/hotgraphic.less index f59af29..55f2010 100644 --- a/less/hotgraphic.less +++ b/less/hotgraphic.less @@ -45,6 +45,39 @@ } } +// Pin image states +// -------------------------------------------------- +.pin-state-mixin(default, hover, visited); +.pin-state-mixin(hover, default, visited); +.pin-state-mixin(visited, default, hover); + +.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 { + .pin-state.is-default; + + .no-touch &:hover { + .pin-state.is-hover; + } +} + +.hotgraphic__pin.has-pin-image.is-visited { + .pin-state.is-visited; +} + // Hotgraphic as tiles // -------------------------------------------------- .hotgraphic__tile-item-container { From 3a83f733ffd69bf573fe3754b08ac09a924b74fa Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Tue, 8 Oct 2024 15:21:09 -0600 Subject: [PATCH 8/9] Add has-pin-image-states class --- less/hotgraphic.less | 4 ++-- templates/hotgraphicLayoutPins.jsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/less/hotgraphic.less b/less/hotgraphic.less index 55f2010..331f7b7 100644 --- a/less/hotgraphic.less +++ b/less/hotgraphic.less @@ -66,7 +66,7 @@ // Application of pin image states // -------------------------------------------------- -.hotgraphic__pin.has-pin-image { +.hotgraphic__pin.has-pin-image-states { .pin-state.is-default; .no-touch &:hover { @@ -74,7 +74,7 @@ } } -.hotgraphic__pin.has-pin-image.is-visited { +.hotgraphic__pin.has-pin-image-states.is-visited { .pin-state.is-visited; } diff --git a/templates/hotgraphicLayoutPins.jsx b/templates/hotgraphicLayoutPins.jsx index 44de22f..1664ecf 100644 --- a/templates/hotgraphicLayoutPins.jsx +++ b/templates/hotgraphicLayoutPins.jsx @@ -54,6 +54,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' ])} From 092bf650840043639fb29ca76173bd0e1048cbe7 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Mon, 21 Oct 2024 13:29:52 -0600 Subject: [PATCH 9/9] Tidy up Less file --- less/hotgraphic.less | 92 ++++++++++++++++++++++---------------------- 1 file changed, 46 insertions(+), 46 deletions(-) diff --git a/less/hotgraphic.less b/less/hotgraphic.less index 331f7b7..dbd4fef 100644 --- a/less/hotgraphic.less +++ b/less/hotgraphic.less @@ -13,35 +13,35 @@ @media (min-width: @device-width-medium) { padding: @icon-padding; } -} -.hotgraphic__pin .icon { - .icon-pin; -} + .icon { + .icon-pin; + } -.hotgraphic__pin.is-visited .icon { - .icon-tick; -} + &.is-visited .icon { + .icon-tick; + } -.hotgraphic__pin.offset-origin { - .transform(translate(-50%, -50%)); -} + &.offset-origin { + .transform(translate(-50%, -50%)); + } -.hotgraphic__pin.has-pin-image { - padding: 0; -} + &.has-pin-image { + padding: 0; + } -.hotgraphic__pin-number { - display: block; -} + &-number { + display: block; + } -.hotgraphic__pin-tooltip.is-static { - --adapt-tooltip-distance: 0; - --adapt-tooltip-arrow: false; + &-tooltip.is-static { + --adapt-tooltip-distance: 0; + --adapt-tooltip-arrow: false; - .tooltip__body { - color: @black; - background-color: transparent; + .tooltip__body { + color: @black; + background-color: transparent; + } } } @@ -72,40 +72,40 @@ .no-touch &:hover { .pin-state.is-hover; } -} -.hotgraphic__pin.has-pin-image-states.is-visited { - .pin-state.is-visited; + &.is-visited { + .pin-state.is-visited; + } } // 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; + &-item-container { + display: flex; + flex-wrap: wrap; + } - @media (min-width: @device-width-medium) { - padding: @icon-padding; + &-item { + width: 50%; + line-height: 0; } -} -.hotgraphic__tile.is-visited .icon { - .icon-tick; + .icon { + position: absolute; + bottom: 1.0rem; + right: 1.0rem; + padding: @icon-padding / 2; + + @media (min-width: @device-width-medium) { + padding: @icon-padding; + } + } + + &.is-visited .icon { + .icon-tick; + } }