A helper function to get the setting value stored in CSS

Developers
1

So I’m developing a component that manipulates color value from javascript.

We can access this data with

$controls['test-color'] = [
      'type' => 'color',
      'label' => 'Test color',
      'css' => [
        [
          'property' => 'background-color',
          'selector' => '',
        ],
      ],
    ];

and later to use it in render with

$bgColor = isset($settings['test-color']) ? $settings['test-color'] : null;

And this variable is for us to store f.e in data- attribiute to later use inside our javascript for the given component.

Problem with classes

The issue in bricks is that if we store a setting for this color value inside class and not on the ID lvl there is no access to it (from what I know of). If we f.e copy the component JSON we’ll get smth like this:

{
  "content": [
    {
      "id": "fd0d50",
      "name": "new-widget",
      "parent": 0,
      "settings": {
        "_cssGlobalClasses": [
          "nhxpij"
        ],
        "test-smth-here": true,
        "test-color": {
          "hex": "#e199f0"
        }
      },
      "label": "Test"
    }
  ],
  "source": "bricksCopiedElements",
  "sourceUrl": "http://localhost:10068",
  "version": "1.9.2",
  "globalClasses": [
    {
      "id": "nhxpij",
      "name": "test-class",
      "settings": {
        "test-color": {
          "hex": "#e199f0"
        }
      }
    }
  ],
  "globalElements": []
}

In this example the object inside content is our new widget for bricks we’re developing. We can see that there is test-color inside settings. That’s because it’s been declared on ID lvl. In this example it was also declared on class lvl where we created a “test-class” class and change the value of test-color there. The issue is that if we would remove the value from ID we dont’ have access to test-color value from within the widget we’re building because $this-settings would get us only this:

"settings": {
        "_cssGlobalClasses": [
          "nhxpij"
        ],
        "test-smth-here": true,
      },

To give user possibility to still use class-based approach without loosing our javascript functionality we have to get the value from the global class id we have listed inside _cssGlobalClasses array.

I created a helper function that does exactly that. Might be useful for you guys. Let me know what you think about it!

function getSettingCssValue($element, $setting)
    {
      // Return setting on ID lvl
      if (isset($element->settings[$setting])) {
        return $element->settings[$setting];
      }

      // Access the global classes and the elements global classes list
      $globalClasses = \Bricks\Database::$global_data['globalClasses'];
      $elementCssGlobalClasses = $element->settings['_cssGlobalClasses'];

      // Filter the global classes to only include the ones that are in the elements global classes list
      $filteredClasses = array_filter($globalClasses, function ($class) use ($elementCssGlobalClasses) {
        return in_array($class['id'], $elementCssGlobalClasses);
      });

      $foundSetting = null;

      if (count($filteredClasses) > 0) {
        foreach ($filteredClasses as $class) {
          if (isset($class['settings'][$setting])) {
            $foundSetting = $class['settings'][$setting];
          }
        }
      }

      // Return the last found setting or null if none was found
      return $foundSetting;
    }

Usage:

var_dump(getSettingCssValue($this, 'test-color'))
2

Hi Woji,

I have exported a page and imported it into another build, but the CSS classes did not come through. Would something like this help me keep the classes on the elements and bring the class css over?

Thanks

1 Like