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'))