You are here

Home » API reference » jQuery carousel 8

jquery_carousel.module in jQuery carousel 8

Same filename and directory in other branches
  1. 7 jquery_carousel.module

Provide jquery carousel style plugin for views.

File

jquery_carousel.module
View source 
<?php

/**
 * @file
 * Provide jquery carousel style plugin for views.
 */
use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\Core\Template\Attribute;

/**
 * Implements hook_help().
 */
function jquery_carousel_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    case 'help.page.jquery_carousel':
      $output = '';
      $output .= '<p>' . t('jQuery carousel is based on the jquery plugin http://github.com/richardscarrott/jquery-ui-carousel. It allows developers to create carousels using the data entered through the content types.') . '</p>';
      $output .= '<p>' . t('For more details, check the documentation on the project page(https://www.drupal.org/project/jquery_carousel)') . '</p>';
      $output .= '<p>' . t('@TODO Need to update d8 demo url. Demo available at http://jcarousel.qed42.webfactional.com');
      return [
        '#markup' => $output,
      ];
  }
}

/**
 * Validation logic for carousel config
 */
function _jquery_carousel_config_validate($selector) {
  $error = FALSE;
  preg_match('/[a-zA-Z|-]*/', $selector, $matches);
  if (count($matches) !== 1 || $matches[0] !== $selector) {
    $error = TRUE;
  }
  return $error;
}

/**
 * Implements hook_theme().
 */
function jquery_carousel_theme() {
  return [
    'jquery_carousel_field_formatter' => [
      'variables' => [
        'elements' => [],
        'items' => [],
        'display' => NULL,
        'settings' => [],
      ],
    ],
  ];
}

/**
 * Theme callback for jQuery carousel field formatter.
 */
function template_preprocess_jquery_carousel_field_formatter(&$vars) {
  if (is_array($vars['elements']) && count($vars['elements']) > 1) {
    $items = [];
    $selector_class = new Attribute([
      'class' => $vars['settings']['selector'],
    ]);
    foreach ((array) $vars['elements'] as $key => $elem) {
      if (isset($vars['settings']['style_name'])) {
        $items[$key] = [
          '#theme' => 'image_style',
          '#style_name' => $vars['settings']['style_name'],
        ];
      }
      else {
        $items[$key] = [
          '#theme' => 'image',
        ];
      }
      $items[$key]['#title'] = $elem->title;
      if (($entity = $elem->entity) && empty($elem->uri)) {
        $items[$key]['#uri'] = $entity
          ->getFileUri();
      }
      else {
        $items[$key]['#uri'] = $elem
          ->getFileUri();
      }
      foreach ([
        'width',
        'height',
        'alt',
      ] as $prop) {
        $items[$key]["#{$prop}"] = $elem->{$prop};
      }
    }
    $output = [
      '#theme' => 'item_list',
      '#items' => $items,
    ];
    _jquery_carousel_settings_format($vars['settings']);
    _jquery_carousel_include_css_js($output, $vars['settings']);
    return '<div ' . $selector_class . '>' . \Drupal::service('renderer')
      ->render($output, FALSE) . '</div>';
  }
  else {
    $elem = $vars['elements'][0];
    if (isset($vars['settings']['style_name'])) {
      $output = [
        '#theme' => 'image_style',
        '#style_name' => $vars['settings']['style_name'],
      ];
    }
    else {
      $output = [
        '#theme' => 'image',
      ];
    }
    $output['#title'] = $elem->title;
    if (($entity = $elem->entity) && empty($elem->uri)) {
      $output['#uri'] = $entity
        ->getFileUri();
    }
    else {
      $output['#uri'] = $elem
        ->getFileUri();
    }
    foreach ([
      'width',
      'height',
      'alt',
    ] as $prop) {
      $output["#{$prop}"] = $elem->{$prop};
    }
    return \Drupal::service('renderer')
      ->render($output, FALSE);
  }
}

/**
 * Prepares variables for views jquery_carousel templates.
 *
 * Default template: views-view-jquery_carousel.html.twig.
 *
 * @param array $vars
 *   An associative array containing:
 *   - view: A ViewExecutable object.
 *   - rows: The raw row data.
 */
function template_preprocess_views_view_jquery_carousel(&$vars) {
  _jquery_carousel_settings_format($vars['view']->style_plugin->options);
  _jquery_carousel_include_css_js($vars, $vars['view']->style_plugin->options);
  $vars['selector_class'] = new Attribute([
    'class' => [
      $vars['view']->style_plugin->options['selector'],
    ],
  ]);
}

/**
 * Helper function to create config form. Reusable for field formatter & views.
 */
function jquery_carousel_config_form() {
  $form = $themes = [];
  foreach (jquery_carousel_themes() as $key => $theme) {
    $themes[$key] = $theme['title'];
  }
  $themes[''] = t('None');
  $form['theme'] = [
    '#type' => 'select',
    '#title' => t('jQuery Carousel Theme'),
    '#description' => t('Select the theme to be applied to the carousel'),
    '#options' => $themes,
    '#default_value' => '',
  ];
  $form['selector'] = [
    '#type' => 'textfield',
    '#title' => t('Selector for this carousel configuration'),
    '#description' => t('The carousel will be wrapped in this class & JS with the config below gets applied to this selector. Please make sure the selector contains only alphabets. No special characters or spaces allowed.'),
    '#required' => TRUE,
    '#default_value' => 'rs-carousel',
  ];
  $form['itemsPerTransition'] = [
    '#type' => 'textfield',
    '#title' => t('Items per transition'),
    '#description' => t('number of items moved with each transition, default: auto'),
    '#default_value' => 'auto',
  ];
  $form['orientation'] = [
    '#type' => 'select',
    '#title' => t('Orientation'),
    '#description' => t('Sets the orientation of the carousel, either horizontal or vertical.'),
    '#options' => [
      'horizontal' => t('Horizontal'),
      'vertical' => t('Vertical'),
    ],
    '#default_value' => 1,
  ];
  $form['loop'] = [
    '#type' => 'select',
    '#title' => t('Loop'),
    '#description' => t('If set to true carousel will loop back to first or last page accordingly.'),
    '#options' => [
      0 => t('False'),
      1 => t('True'),
    ],
    '#default_value' => 1,
    '#boolean' => TRUE,
  ];
  $form['whitespace'] = [
    '#type' => 'select',
    '#title' => t('Whitespace'),
    '#description' => t("If set to true the carousel will allow whitespace to be seen when there aren't enough items to fill the last page."),
    '#options' => [
      0 => t('False'),
      1 => t('True'),
    ],
    '#default_value' => 1,
    '#boolean' => TRUE,
  ];
  $form['nextPrevActions'] = [
    '#type' => 'select',
    '#title' => t('Next & Previous Links'),
    '#description' => t('whether next and prev links will be included'),
    '#options' => [
      0 => t('False'),
      1 => t('True'),
    ],
    '#default_value' => 1,
    '#boolean' => TRUE,
  ];
  $form['pagination'] = [
    '#type' => 'select',
    '#title' => t('Pagination'),
    '#description' => t('whether pagination links will be included'),
    '#options' => [
      0 => t('False'),
      1 => t('True'),
    ],
    '#default_value' => 1,
    '#boolean' => TRUE,
  ];
  $form['speed'] = [
    '#type' => 'select',
    '#title' => t('Speed'),
    '#description' => t('Animation speed'),
    '#options' => [
      'normal' => t('Normal'),
      'fast' => t('Fast'),
      'slow' => t('Slow'),
    ],
    '#default_value' => 'normal',
  ];
  $form['easing'] = [
    '#type' => 'select',
    '#title' => t('Easing'),
    '#description' => t('supports the jQuery easing plugin'),
    '#options' => [
      'linear' => t('Linear'),
      'swing' => t('Swing'),
    ],
    '#default_value' => 'linear',
  ];
  $form['autoScroll'] = [
    '#type' => 'select',
    '#title' => t('Autoscroll'),
    '#description' => t("Set to true to invoke auto scrolling, note when the mouse enters the carousel the interval will stop, it'll consequently begin when the mouse leaves."),
    '#options' => [
      0 => t('False'),
      1 => t('True'),
    ],
    '#default_value' => 1,
    '#boolean' => TRUE,
  ];
  $form['interval'] = [
    '#type' => 'textfield',
    '#title' => t('Interval'),
    '#description' => t('Sets the amount of time in milliseconds the carousel waits before it automatically scrolls.'),
    '#default_value' => 8000,
  ];
  $form['continuous'] = [
    '#type' => 'select',
    '#title' => t('Continuous'),
    '#description' => t('If set to true the carousel will continuously loop through its pages rather than scrolling all the way back to the first page.'),
    '#options' => [
      0 => t('False'),
      1 => t('True'),
    ],
    '#default_value' => 1,
    '#boolean' => TRUE,
  ];
  $form['touch'] = [
    '#type' => 'select',
    '#title' => t('Touch'),
    '#description' => t('If set to true the carousel will become draggable allowing you to flick through pages.'),
    '#options' => [
      0 => t('False'),
      1 => t('True'),
    ],
    '#default_value' => 1,
    '#boolean' => TRUE,
  ];
  return $form;
}

/**
 * Helper function to prepare the settings to be exposed in JS.
 *
 * Helps convert boolean 1s & 0s into boolean strings
 */
function _jquery_carousel_settings_format(&$settings) {
  $carousel_form = jquery_carousel_config_form();
  foreach (array_keys($settings) as $key) {
    if (isset($carousel_form[$key]['#boolean']) && $carousel_form[$key]['#boolean']) {
      $settings[$key] = (bool) $settings[$key];
    }
  }
}

/**
 * Helper function to inject required Css & Js.
 */
function _jquery_carousel_include_css_js(&$vars, $settings) {
  $themes = jquery_carousel_themes();
  $vars['#attached']['library'][] = 'system/ui.widget';
  if (isset($settings['theme']) && $settings['theme']) {
    $vars['#attached']['library'][] = $themes[$settings['theme']]['library'];
  }
  $vars['#attached']['library'][] = 'jquery_carousel/jquery_ui_carousel';
  $vars['#attached']['library'][] = 'jquery_carousel/drupal.jquery_carousel';
  if (isset($settings['touch']) && $settings['touch']) {
    $vars['#attached']['library'][] = 'jquery_carousel/jquery_ui_carousel_touch';
  }
  $vars['#attached']['drupalSettings']['jquery_carousel'] = [
    $settings['selector'] => $settings,
  ];
}

/**
 * Implements hook_carousel_theme_info().
 */
function jquery_carousel_carousel_theme_info() {
  $themes = [];
  $themes['default'] = [
    'title' => t('Default'),
    'library' => 'jquery_carousel/jquery_carousel.jcarousel_themes_default',
  ];
  $themes['glass'] = [
    'title' => t('Glass'),
    'library' => 'jquery_carousel/jquery_carousel.jcarousel_themes_glass',
  ];
  return $themes;
}

/**
 * Retrieves a list of all available jQuery Carousel themes.
 */
function jquery_carousel_themes() {
  $themes =& drupal_static(__FUNCTION__);

  // Don't rebuild if we already have a list of themes.
  if (isset($themes)) {
    return $themes;
  }

  // Build a list of themes from other modules.
  $themes = [];
  foreach (\Drupal::moduleHandler()
    ->getImplementations('carousel_theme_info') as $module) {
    $function = $module . '_carousel_theme_info';
    $module_themes = $function();
    foreach ($module_themes as $key => $theme) {
      $theme['module'] = $module;
      $theme['file path'] = isset($theme['file path']) ? $theme['file path'] : drupal_get_path('module', $module);
      $theme['title'] = isset($theme['title']) ? $theme['title'] : $key;
      $themes[$key] = $theme;
    }
  }
  ksort($themes);
  return $themes;
}

Functions

Namesort descending Description
jquery_carousel_carousel_theme_info Implements hook_carousel_theme_info().
jquery_carousel_config_form Helper function to create config form. Reusable for field formatter & views.
jquery_carousel_help Implements hook_help().
jquery_carousel_theme Implements hook_theme().
jquery_carousel_themes Retrieves a list of all available jQuery Carousel themes.
template_preprocess_jquery_carousel_field_formatter Theme callback for jQuery carousel field formatter.
template_preprocess_views_view_jquery_carousel Prepares variables for views jquery_carousel templates.
_jquery_carousel_config_validate Validation logic for carousel config
_jquery_carousel_include_css_js Helper function to inject required Css & Js.
_jquery_carousel_settings_format Helper function to prepare the settings to be exposed in JS.