public static function ShadowModifier::modification in Modifiers Pack 8

The shadow on pseudo-elements is inspired by http://tobiasahlin.com/blog/how-to-animate-box-shadow.

1 call to ShadowModifier::modification()

ShadowModifierTest::testModification in modules/modifiers_shadow/tests/src/Unit/ShadowModifierTest.php

@covers ::modification

File

modules/modifiers_shadow/src/Plugin/modifiers/ShadowModifier.php, line 25

Class

ShadowModifier

Provides a Modifier to set the shadow on an element.

Namespace

Drupal\modifiers_shadow\Plugin\modifiers

Code

public static function modification($selector, array $config) {
  $media = parent::getMediaQuery($config);
  $shadow = [];
  if (isset($config['shadow_offset_x'])) {
    $shadow[] = $config['shadow_offset_x'] . 'px';
  }
  if (isset($config['shadow_offset_y'])) {
    $shadow[] = $config['shadow_offset_y'] . 'px';
  }
  if (isset($config['shadow_blur'])) {
    $shadow[] = $config['shadow_blur'] . 'px';
  }
  if (isset($config['shadow_spread'])) {
    $shadow[] = $config['shadow_spread'] . 'px';
  }
  if (!empty($config['shadow_color_val'])) {
    $shadow[] = $config['shadow_color_val'];
  }
  if (count($shadow) === 5) {
    $css[$media][$selector . '::before'][] = 'content:""';
    $css[$media][$selector . '::before'][] = 'display:block';
    $css[$media][$selector . '::before'][] = 'position:absolute';
    $css[$media][$selector . '::before'][] = 'z-index:-1';
    $css[$media][$selector . '::before'][] = 'top:0';
    $css[$media][$selector . '::before'][] = 'left:0';
    $css[$media][$selector . '::before'][] = 'width:100%';
    $css[$media][$selector . '::before'][] = 'height:100%';
    $css[$media][$selector . '::before'][] = 'box-shadow:' . $shadow[0] . ' ' . $shadow[1] . ' ' . $shadow[2] . ' ' . $shadow[3] . ' ' . $shadow[4];
    $css[$media][$selector . '::before'][] = 'opacity:1';
  }
  $shadow = [];
  if (isset($config['shadow_h_offset_x'])) {
    $shadow[] = $config['shadow_h_offset_x'] . 'px';
  }
  if (isset($config['shadow_h_offset_y'])) {
    $shadow[] = $config['shadow_h_offset_y'] . 'px';
  }
  if (isset($config['shadow_h_blur'])) {
    $shadow[] = $config['shadow_h_blur'] . 'px';
  }
  if (isset($config['shadow_h_spread'])) {
    $shadow[] = $config['shadow_h_spread'] . 'px';
  }
  if (!empty($config['shadow_h_color_val'])) {
    $shadow[] = $config['shadow_h_color_val'];
  }
  if (!empty($config['shadow_h_duration'])) {
    $shadow[] = $config['shadow_h_duration'];
  }
  if (count($shadow) === 6) {
    $css[$media][$selector][] = 'position:relative';
    $css[$media][$selector][] = 'z-index:0';
    $css[$media][$selector . '::before'][] = 'transition:opacity ' . $shadow[5] . 's ease-in-out';
    $css[$media][$selector . ':hover::before'][] = 'opacity:0';
    $css[$media][$selector . '::after'][] = 'content:""';
    $css[$media][$selector . '::after'][] = 'display:block';
    $css[$media][$selector . '::after'][] = 'position:absolute';
    $css[$media][$selector . '::after'][] = 'z-index:-1';
    $css[$media][$selector . '::after'][] = 'top:0';
    $css[$media][$selector . '::after'][] = 'left:0';
    $css[$media][$selector . '::after'][] = 'width:100%';
    $css[$media][$selector . '::after'][] = 'height:100%';
    $css[$media][$selector . '::after'][] = 'box-shadow:' . $shadow[0] . ' ' . $shadow[1] . ' ' . $shadow[2] . ' ' . $shadow[3] . ' ' . $shadow[4];
    $css[$media][$selector . '::after'][] = 'opacity:0';
    $css[$media][$selector . '::after'][] = 'transition:opacity ' . $shadow[5] . 's ease-in-out';
    $css[$media][$selector . ':hover::after'][] = 'opacity:1';
  }
  if (!empty($css)) {
    $attributes[$media][$selector]['class'][] = 'modifiers-has-background';
    return new Modification($css, [], [], $attributes);
  }
  return NULL;
}