fixed active state

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.5.0.4 - 2021-12-13
+
+### Fixed
+- Fixed issue where active class was not showing up correctly [#78](https://github.com/percipioglobal/craft-colour-swatches/issues/78)
+
 ## 1.5.0.3 - 2021-12-13
 
 ### Changed

composer.json

@@ -2,7 +2,7 @@
     "name": "percipioglobal/craft-colour-swatches",
     "description": "Let clients choose from a predefined set of colours and utilise associated colour codes and class names in your templates.",
     "type": "craft-plugin",
-    "version": "1.5.0.3",
+    "version": "1.5.0.4",
     "keywords": [
         "craft",
         "cms",

src/assetbundles/colourswatchesfield/dist/css/ColourSwatches.css

@@ -80,8 +80,8 @@
     outline: none;
 }
 
-.reduce-focus-visibility .color-swatches button.active,
-.color-swatches .button-active {
+.color-swatches .button-active,
+.color-swatches .button-active:focus {
     box-shadow: 0 0 0 3px #F2842D;
 }
 

src/assetbundles/colourswatchesfield/dist/js/ColourSwatches.js

@@ -9,7 +9,7 @@ ColourSelectInput = Garnish.Base.extend({
     {
         this.$container = $('#'+id);
         this.$options = this.$container.find('.option');
-        this.$selectedOption = this.$options.filter('.active');
+        this.$selectedOption = this.$options.filter('.button-active');
         this.$input = this.$container.next('input');
 
         this.addListener(this.$options, 'click', 'onOptionSelect');
@@ -20,18 +20,18 @@ ColourSelectInput = Garnish.Base.extend({
         var $option = $(ev.currentTarget);
 
         // enables toggle on/off function of color buttons
-        if ($option.hasClass('active'))
+        if ($option.hasClass('button-active'))
         {
-            $option.removeClass('active');
+            $option.removeClass('button-active');
             this.$selectedOption = null;
-            this.$input.val("");
+            this.$input.val('');
             return;
         }
 
         if (this.$selectedOption) {
-            this.$selectedOption.removeClass('active');
+            this.$selectedOption.removeClass('button-active');
         }
-        this.$selectedOption = $option.addClass('active');
+        this.$selectedOption = $option.addClass('button-active');
         this.$input.val(JSON.stringify($option.data('value')));
     }
 

src/templates/colourOption.twig

@@ -12,7 +12,7 @@
         label: option.label,
         color: colours,
     } %}
-    <button type="button" title="{{ option.label }}" data-value="{{ value | json_encode }}" class="option {% if (isDefault and active is null) or (active is not empty and (value.label == active)) %} active{% endif %}" style="
+    <button type="button" title="{{ option.label }}" data-value="{{ value | json_encode }}" class="option {% if (isDefault and active is null) or (active is not empty and (value.label == active)) %} button-active{% endif %}" style="
         {% switch colours | length %}
             {% case 1 %}
                 --color: {{ value.color[0].color is defined ? value.color[0].color : value.color[0].colour |parseRefs|raw }};
@@ -34,7 +34,7 @@
     {% else %}
         {% set colours = value.color | split(',') %}
     {% endif %}
-    <button type="button" title="{{ option.label }}" data-value="{{ value | json_encode }}" class="option {% if (isDefault and active is null) or (active is not empty and (value.label == active)) %} active{% endif %}" style="
+    <button type="button" title="{{ option.label }}" data-value="{{ value | json_encode }}" class="option {% if (isDefault and active is null) or (active is not empty and (value.label == active)) %} button-active{% endif %}" style="
         {% switch colours | length %}
         {% case 1 %}
             --color: {{ value.color|parseRefs|raw }};