public function MasonryService::applyMasonryDisplay in Masonry API 8

Apply Masonry to a container.

Parameters

array $form: The form to which the JS will be attached.

string $container: The CSS selector of the container element to apply Masonry to.

string $item_selector: The CSS selector of the items within the container.

array $options: An associative array of Masonry options. Contains:

• masonry_column_width: The width of each column (in pixels or as a percentage).
• masonry_column_width_units: The units to use for the column width

('px' or '%').

• masonry_gutter_width: The spacing between each column (in pixels).
• masonry_resizable: Automatically rearrange items when the container is resized.
• masonry_animated: Animate item rearrangements.

• masonry_animation_duration: The duration of animations in milliseconds.
  • masonry_fit_width: Sets the width of the container to the nearest column.

Ideal for centering Masonry layouts.

• masonry_rtl: Display items from right-to-left.
• masonry_images_first: Load all images first before triggering Masonry.

string[] $masonry_ids:

File

src/Services/MasonryService.php, line 163

Masonry service file.

Class

MasonryService

Wrapper methods for Masonry API methods.

Namespace

Drupal\masonry\Services

Code

public function applyMasonryDisplay(&$form, $container, $item_selector, $options = [], $masonry_ids = [
  'masonry_default',
]) {
  if (!empty($container)) {

    // For any options not specified, use default options.
    $options += $this
      ->getMasonryDefaultOptions();
    if (!isset($item_selector)) {
      $item_selector = '';
    }

    // Setup Masonry script.
    $masonry = [
      'masonry' => [
        $container => [
          'masonry_ids' => $masonry_ids,
          'item_selector' => $item_selector,
          'column_width' => $options['layoutColumnWidth'],
          'column_width_units' => $options['layoutColumnWidthUnit'],
          'gutter_width' => (int) $options['gutterWidth'],
          'resizable' => (bool) $options['isLayoutResizable'],
          'animated' => (bool) $options['isLayoutAnimated'],
          'animation_duration' => (int) $options['layoutAnimationDuration'],
          'fit_width' => (bool) $options['isLayoutFitsWidth'],
          'rtl' => (bool) $options['isLayoutRtlMode'],
          'images_first' => (bool) $options['isLayoutImagesLoadedFirst'],
          'images_lazyload' => (bool) $options['isLayoutImagesLazyLoaded'],
          'lazyload_selector' => $options['imageLazyloadSelector'],
          'lazyloaded_selector' => $options['imageLazyloadedSelector'],
          'stamp' => $options['stampSelector'],
          'percent_position' => (bool) $options['isItemsPositionInPercent'],
          'extra_options' => $options['extraOptions'],
        ],
      ],
    ];

    // Allow other modules and themes to alter the settings.
    $context = [
      'container' => $container,
      'item_selector' => $item_selector,
      'options' => $options,
    ];
    $this->moduleHandler
      ->alter('masonry_script', $masonry, $context);
    $this->themeManager
      ->alter('masonry_script', $masonry, $context);
    $form['#attached']['library'][] = 'masonry/masonry.layout';
    if (isset($form['#attached']['drupalSettings'])) {
      $form['#attached']['drupalSettings'] += $masonry;
    }
    else {
      $form['#attached']['drupalSettings'] = $masonry;
    }
  }
}