Fix ability to set progressbar color

coldbox-modules · Jan 3, 2025 · 147a597 · 147a597
1 parent be3105e
commit 147a597
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/ModuleConfig.cfc b/ModuleConfig.cfc
@@ -38,7 +38,15 @@ component {
             /**
              * Trims string properties if set to true
              */
-            "trimStringValues" : false
+            "trimStringValues" : false,
+            /**
+             * Enables or disables the progress bar when using wire:navigate
+             */
+            "showProgressBar": true,
+            /** 
+             * The color of the progress bar when using wire:navigate
+             */
+            "progressBarColor": "##2299dd"
         };
 
         routes = [

diff --git a/models/CBWIREController.cfc b/models/CBWIREController.cfc
@@ -354,8 +354,8 @@ component singleton {
      * 
      * @return string
      */
-    function getStyles() {
-        if (structKeyExists(variables, "styles")) {
+    function getStyles( cache=true ) {
+        if (structKeyExists(variables, "styles") && arguments.cache ) {
             return variables.styles;
         }
 

diff --git a/models/styles.cfm b/models/styles.cfm
@@ -1,4 +1,4 @@
 <cfoutput>
 <!-- CBWIRE Styles -->
-<style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: ##2299dd;}[x-cloak] {display: none !important;}</style>
+<style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #moduleSettings.progressBarColor#;}[x-cloak] {display: none !important;}</style>
 </cfoutput>
diff --git a/test-harness/tests/specs/CBWIRESpec.cfc b/test-harness/tests/specs/CBWIRESpec.cfc
@@ -41,6 +41,20 @@ component extends="coldbox.system.testing.BaseTestCase" {
                 expect( reMatchNoCase( "CBWIRE Scripts", html ).len() ).toBe( 0 );
             } );
 
+            it( "should use default display bar color", function() {
+                var CBWIREController = getInstance( "CBWIREController@cbwire" );
+                var html = CBWIREController.getStyles( cache=false );
+                expect( html ).toInclude( "--livewire-progress-bar-color: ##2299dd;" );
+            } );
+
+            it( "should be able to change the display bar color", function() {
+                var CBWIREController = getInstance( "CBWIREController@cbwire" );
+                var settings = getInstance( "coldbox:modulesettings:cbwire" );
+                settings.progressBarColor = "##cc0000";
+                var html = CBWIREController.getStyles( cache=false );
+                expect( html ).toInclude( "--livewire-progress-bar-color: ##cc0000;" );
+            } );
+
             it( "should have default updateEndpoint", function() {
                 var CBWIREController = getInstance( "CBWIREController@cbwire" );
                 var settings = getInstance( "coldbox:modulesettings:cbwire" );