Move read only config to breast diagram

Author: colinrotherham

manage_breast_screening/assets/js/breast-diagram.js

@@ -38,6 +38,8 @@ export class BreastDiagram extends ConfigurableComponent {
   constructor($root, config = {}) {
     super($root, config)
 
+    const { readOnly } = this.config
+
     const $input = this.$root.querySelector('input[name="features"]')
     if (!($input instanceof HTMLInputElement)) {
       throw new ElementError({
@@ -56,7 +58,6 @@ export class BreastDiagram extends ConfigurableComponent {
       ImageMap,
       {
         imageClass: 'app-breast-diagram__svg',
-        readOnly: $input.readOnly,
         selectors: [
           '.app-breast-diagram__regions path',
           '.app-breast-diagram__regions polygon'
@@ -74,7 +75,7 @@ export class BreastDiagram extends ConfigurableComponent {
 
     this.$imageMap = $imageMaps[0]
 
-    if (!this.$imageMap.config.readOnly) {
+    if (!readOnly) {
       this.$imageMap.addEventListener('click', (event) => this.onClick(event))
       this.$imageMap.addEventListener('hover', (event) => this.log(event))
     }
@@ -282,7 +283,8 @@ export class BreastDiagram extends ConfigurableComponent {
    * @type {BreastDiagramConfig}
    */
   static defaults = Object.freeze({
-    debug: false
+    debug: false,
+    readOnly: false
   })
 
   /**
@@ -293,7 +295,8 @@ export class BreastDiagram extends ConfigurableComponent {
    */
   static schema = Object.freeze({
     properties: {
-      debug: { type: 'boolean' }
+      debug: { type: 'boolean' },
+      readOnly: { type: 'boolean' }
     }
   })
 }
@@ -354,6 +357,7 @@ function isValid(value) {
  * @see {@link BreastDiagram.defaults}
  * @typedef {object} BreastDiagramConfig
  * @property {boolean} debug - Whether to show debug information
+ * @property {boolean} readOnly - Whether image map is read only
  */
 
 /**

manage_breast_screening/assets/js/image-map.js

@@ -8,13 +8,12 @@ import { ConfigurableComponent, ElementError } from 'nhsuk-frontend'
 export class ImageMap extends ConfigurableComponent {
   /**
    * @param {Element | null} $root - HTML element to use for component
-   * @param {Partial<Pick<ImageMapConfig, 'imageClass' | 'readOnly' | 'selectors'>>} [config] - Image map config
+   * @param {Partial<Pick<ImageMapConfig, 'imageClass' | 'selectors'>>} [config] - Image map config
    */
   constructor($root, config = {}) {
     super($root, config)
 
-    const { imageClass, readOnly, selectorsQuery, selectorsFormatted } =
-      this.config
+    const { imageClass, selectorsQuery, selectorsFormatted } = this.config
 
     const $image = this.$root.querySelector(`.${imageClass}`)
     if (!$image || !($image instanceof SVGSVGElement)) {
@@ -39,10 +38,8 @@ export class ImageMap extends ConfigurableComponent {
     this.$paths = Array.from($paths).reverse()
     this.$image = $image
 
-    if (!readOnly) {
-      this.$image.addEventListener('mousemove', this.onMouseMove.bind(this))
-      this.$image.addEventListener('click', this.onClick.bind(this))
-    }
+    this.$image.addEventListener('mousemove', this.onMouseMove.bind(this))
+    this.$image.addEventListener('click', this.onClick.bind(this))
   }
 
   /**
@@ -230,7 +227,6 @@ export class ImageMap extends ConfigurableComponent {
    */
   static defaults = Object.freeze({
     imageClass: 'nhsuk-image__img',
-    readOnly: false,
     selectors: ['path', 'polygon'],
     selectorsQuery: '',
     selectorsFormatted: ''
@@ -245,7 +241,6 @@ export class ImageMap extends ConfigurableComponent {
   static schema = Object.freeze({
     properties: {
       imageClass: { type: 'string' },
-      readOnly: { type: 'boolean' },
       selectors: { type: 'array' },
       selectorsQuery: { type: 'string' },
       selectorsFormatted: { type: 'string' }
@@ -259,7 +254,6 @@ export class ImageMap extends ConfigurableComponent {
  * @see {@link ImageMap.defaults}
  * @typedef {object} ImageMapConfig
  * @property {string} imageClass - Image class
- * @property {boolean} readOnly - Whether image map is read only
  * @property {string[]} selectors - Image map region selectors
  * @property {string} selectorsQuery - Image map region selectors (for DOM query selector)
  * @property {string} selectorsFormatted - Image map region selectors (formatted for error messages)

manage_breast_screening/assets/sass/components/_breast-diagram.scss

@@ -25,52 +25,44 @@ $state-active: nhsuk-tint(nhsuk-colour("blue"), 50%);
 
 .app-breast-diagram__svg {
   display: block;
-}
 
-.app-breast-diagram__regions [data-active] {
-  [data-debug] & {
-    fill: $state-active;
+  .app-breast-diagram:not([data-read-only]) & {
+    pointer-events: all;
+    cursor: crosshair;
   }
 }
 
-.app-breast-diagram__image-map:not([data-read-only]) {
-  .app-breast-diagram__svg {
-    pointer-events: all;
-    cursor: crosshair;
+.app-breast-diagram__diagram {
+  pointer-events: none;
+}
+
+.app-breast-diagram[data-debug] {
+  .app-breast-diagram__regions [data-active] {
+    fill: $state-active;
   }
+}
 
+.app-breast-diagram[data-debug]:not([data-read-only]) {
   .app-breast-diagram__regions path,
   .app-breast-diagram__regions polygon {
-    [data-debug] & {
-      // Slow fade out (default)
-      transition: fill 0.3s ease-in;
-    }
+    // Slow fade out (default)
+    transition: fill 0.3s ease-in;
   }
 
   .app-breast-diagram__regions path:hover,
   .app-breast-diagram__regions polygon:hover,
   .app-breast-diagram__regions [data-active] {
-    [data-debug] & {
-      // Fast fade in (on hover)
-      transition-duration: 0.05s;
-      transition-timing-function: ease-out;
-    }
+    // Fast fade in (on hover)
+    transition-duration: 0.05s;
+    transition-timing-function: ease-out;
   }
 
   .app-breast-diagram__regions path:hover,
   .app-breast-diagram__regions polygon:hover {
-    [data-debug] & {
-      fill: $state-highlight;
-    }
+    fill: $state-highlight;
   }
 
   .app-breast-diagram__regions [data-active]:hover {
-    [data-debug] & {
-      fill: color.adjust(color.mix($state-active, $state-highlight, 75%), $lightness: 10%, $saturation: 25%);
-    }
+    fill: color.adjust(color.mix($state-active, $state-highlight, 75%), $lightness: 10%, $saturation: 25%);
   }
 }
-
-.app-breast-diagram__diagram {
-  pointer-events: none;
-}

manage_breast_screening/core/jinja2/components/breast-diagram/template.jinja

@@ -8,11 +8,7 @@
 <figure
   {{- nhsukAttributes({
     "class": "app-breast-diagram__image-map nhsuk-u-width-full",
-    "data-module": "app-image-map",
-    "data-read-only": {
-      "value": "true" if params.read_only else false,
-      "optional": true
-    }
+    "data-module": "app-image-map"
   }) -}}
 
   {{- nhsukAttributes(params.attributes) -}}>

manage_breast_screening/mammograms/jinja2/mammograms/medical_information/breast_features/form.jinja

@@ -9,13 +9,20 @@
 
 {% from "components/breast-diagram/macro.jinja" import app_breast_diagram %}
 
+{% set diagram_debug = "debug" in request.GET %}
+{% set diagram_read_only = false %}
+
 {% set form_attributes = {
   "class": "app-breast-diagram",
   "action": request.path,
   "method": "post",
   "data-module": "app-breast-diagram",
   "data-debug": {
-    "value": "true" if "debug" in request.GET else false,
+    "value": "true" if diagram_debug else false,
+    "optional": true
+  },
+  "data-read-only": {
+    "value": "true" if diagram_read_only else false,
     "optional": true
   },
   "novalidate": {
@@ -49,8 +56,8 @@
       </div>
 
       {{ app_breast_diagram({
-        "debug": "debug" in request.GET,
-        "read_only": false,
+        "debug": diagram_debug,
+        "read_only": diagram_read_only,
         "version": diagram_version,
         "attributes": {
           "aria-labelledby": "breast-diagram-description"