Commit 79dae4c7 authored by Adrian Cid Almaguer's avatar Adrian Cid Almaguer
Browse files

Resolve #3254526 "Glider js settings"

parent 4ff03093

gliderjs.module

+26 −0
Original line number Diff line number Diff line
@@ -41,16 +41,42 @@ function gliderjs_theme() { 
  return [

    'gliderjs_formatter' => [

      'variables' => [

        'slider_id' => NULL,

        'images' => NULL,

        'slides_to_show' => NULL,

        'slides_to_scroll' => NULL,

        'show_arrows' => NULL,

        'show_dots' => NULL,

        'item_width' => NULL,

        'exact_width' => NULL,

        'scroll_lock' => NULL,

        'scroll_lock_delay' => NULL,

        'resize_lock' => NULL,

        'rewind' => NULL,

        'draggable' => NULL,

        'drag_velocity' => NULL,

        'duration' => NULL,

        'breakpoint_settings' => NULL,

      ],

    ],

    'gliderjs_views' => [

      'file' => 'gliderjs.theme.inc',

      'variables' => [

        'slider_id' => NULL,

        'slides_to_show' => NULL,

        'slides_to_scroll' => NULL,

        'show_arrows' => NULL,

        'show_dots' => NULL,

        'item_width' => NULL,

        'exact_width' => NULL,

        'scroll_lock' => NULL,

        'scroll_lock_delay' => NULL,

        'resize_lock' => NULL,

        'rewind' => NULL,

        'draggable' => NULL,

        'drag_velocity' => NULL,

        'duration' => NULL,

        'breakpoint_settings' => NULL,

      ],

    ],

  ];

gliderjs.theme.inc

+15 −0
Original line number Diff line number Diff line
@@ -17,10 +17,25 @@ function template_preprocess_gliderjs_views(array &$variables) { 
  if (isset($variables['view']) && $variables['view']->style_plugin instanceof Gliderjs) {

    $options = $variables['view']->style_plugin->options;



    $slider_id = 'slider_id_' . $variables['view']->storage->id() . '_' . $variables['view']->current_display;

    $variables['slider_id'] = $slider_id;

    $variables['slides_to_show'] = $options['slides_to_show'];

    $variables['slides_to_scroll'] = $options['slides_to_scroll'];

    $variables['show_arrows'] = $options['show_arrows'];

    $variables['show_dots'] = $options['show_dots'];

    $variables['item_width'] = $options['item_width'];

    $variables['exact_width'] = $options['exact_width'];

    $variables['scroll_lock'] = $options['scroll_lock'];

    $variables['scroll_lock_delay'] = $options['scroll_lock_delay'];

    $variables['resize_lock'] = $options['resize_lock'];

    $variables['rewind'] = $options['rewind'];

    $variables['draggable'] = $options['draggable'];

    $variables['drag_velocity'] = $options['drag_velocity'];

    $variables['duration'] = $options['duration'];

    $variables['breakpoint_settings'] = $options['breakpoint_settings'];

    $variables['#attached']['library'][] = 'gliderjs/gliderjs';

    $variables['#attached']['drupalSettings']['gliderjs'] = [

      'slider_id' => $slider_id,

      'slides_to_show' => $options['slides_to_show'],

      'slides_to_scroll' => $options['slides_to_scroll'],

      'show_arrows' => $options['show_arrows'],

js/gliderjs.config.js

+2 −1
Original line number Diff line number Diff line
@@ -3,6 +3,7 @@ 
 * Javascript for gliderjs configuracion.

 *

 * Available variables:

 * - slider_id: The slider container element id.

 * - slides_to_show: The number of slides to show in container.

 * - slides_to_scroll: The number of slides to scroll with arrow navigation.

 * - show_arrows: Show Arrows.
@@ -20,7 +21,7 @@ 
 *

 **/

window.addEventListener('load', function () {

  window.glides = new Glider(document.getElementById('glider'), {

  window.glides = new Glider(document.getElementById(drupalSettings.gliderjs.slider_id), {

    slidesToShow: drupalSettings.gliderjs.slides_to_show,

    slidesToScroll: drupalSettings.gliderjs.slides_to_scroll,

    dots: '.dots',

src/Plugin/Field/FieldFormatter/GliderjsFormatter.php

+38 −12
Original line number Diff line number Diff line
@@ -116,11 +116,28 @@ class GliderjsFormatter extends FormatterBase implements ContainerFactoryPluginI 
      $elements['#images'][] = $item;

    }



    $slider_id = 'slider_id_' . $this->fieldDefinition->getUniqueIdentifier();

    $elements['#slider_id'] = $slider_id;

    $elements['#show_arrows'] = $this->getSetting('show_arrows');

    $elements['#show_dots'] = $this->getSetting('show_dots');

    $elements['#slides_to_show'] = $this->getSetting('slides_to_show');

    $elements['#slides_to_scroll'] = $this->getSetting('slides_to_scroll');

    $elements['#show_arrows'] = $this->getSetting('show_arrows');

    $elements['#show_dots'] = $this->getSetting('show_dots');

    $elements['#item_width'] = $this->getSetting('item_width');

    $elements['#exact_width'] = $this->getSetting('exact_width');

    $elements['#scroll_lock'] = $this->getSetting('scroll_lock');

    $elements['#scroll_lock_delay'] = $this->getSetting('scroll_lock_delay');

    $elements['#resize_lock'] = $this->getSetting('resize_lock');

    $elements['#rewind'] = $this->getSetting('rewind');

    $elements['#draggable'] = $this->getSetting('draggable');

    $elements['#drag_velocity'] = $this->getSetting('drag_velocity');

    $elements['#duration'] = $this->getSetting('duration');

    $elements['#breakpoint_settings'] = $this->getSetting('breakpoint_settings');

    $elements['#theme'] = 'gliderjs_formatter';

    $elements['#attached']['library'][] = 'gliderjs/gliderjs';

    $elements['#attached']['drupalSettings']['gliderjs'] = [

      'slider_id' => $slider_id,

      'slides_to_show' => $this->getSetting('slides_to_show'),

      'slides_to_scroll' => $this->getSetting('slides_to_scroll'),

      'show_arrows' => $this->getSetting('show_arrows'),
@@ -144,18 +161,18 @@ class GliderjsFormatter extends FormatterBase implements ContainerFactoryPluginI 
   */

  public static function defaultSettings() {

    return [

      'slides_to_show' => 'auto',

      'slides_to_scroll' => 'auto',

      'show_arrows' => FALSE,

      'slides_to_show' => 1,

      'slides_to_scroll' => 1,

      'show_arrows' => TRUE,

      'show_dots' => FALSE,

      'item_width' => 1,

      'exact_width' => 1,

      'scroll_lock' => FALSE,

      'scroll_lock_delay' => 1,

      'resize_lock' => FALSE,

      'scroll_lock_delay' => 250,

      'resize_lock' => TRUE,

      'rewind' => FALSE,

      'draggable' => FALSE,

      'drag_velocity' => 1,

      'drag_velocity' => 3.3,

      'duration' => 0.5,

      'breakpoint_settings' => '',

    ] + parent::defaultSettings();
@@ -202,7 +219,9 @@ class GliderjsFormatter extends FormatterBase implements ContainerFactoryPluginI 
    $form['item_width'] = [

      '#title' => $this->t('Item Width'),

      '#type' => 'number',

      '#min' => '1',

      '#min' => 1,

      '#max' => 9999,

      '#step' => 1,

      '#field_suffix' => 'px',

      '#default_value' => $this->getSetting('item_width'),

      '#states' => [
@@ -215,7 +234,9 @@ class GliderjsFormatter extends FormatterBase implements ContainerFactoryPluginI 
    $form['exact_width'] = [

      '#title' => $this->t('Exact Width'),

      '#type' => 'number',

      '#min' => '1',

      '#min' => 1,

      '#max' => 9999,

      '#step' => 1,

      '#field_suffix' => 'px',

      '#default_value' => $this->getSetting('exact_width'),

      '#description' => $this->t('This prevents resizing items to fit when "Slides to Show" is set to "auto". This will yield fractional slides if your container is not sized appropriately.'),
@@ -236,7 +257,9 @@ class GliderjsFormatter extends FormatterBase implements ContainerFactoryPluginI 
    $form['scroll_lock_delay'] = [

      '#title' => $this->t('Scroll Lock Delay'),

      '#type' => 'number',

      '#min' => '1',

      '#min' => 1,

      '#max' => 99999,

      '#step' => 1,

      '#default_value' => $this->getSetting('scroll_lock_delay'),

      '#description' => $this->t('The delay in milliseconds to wait before the scroll happens.'),

      '#states' => [
@@ -270,7 +293,9 @@ class GliderjsFormatter extends FormatterBase implements ContainerFactoryPluginI 
    $form['drag_velocity'] = [

      '#title' => $this->t('Drag Velocity'),

      '#type' => 'number',

      '#min' => '1',

      '#min' => 0,

      '#max' => 10,

      '#step' => 3.3,

      '#default_value' => $this->getSetting('drag_velocity'),

      '#description' => $this->t('How much to aggravate the velocity of the mouse dragging.'),

      '#states' => [
@@ -283,8 +308,9 @@ class GliderjsFormatter extends FormatterBase implements ContainerFactoryPluginI 
    $form['duration'] = [

      '#title' => $this->t('Duration'),

      '#type' => 'number',

      '#min' => '0',

      '#step' => 0.5,

      '#min' => 0,

      '#max' => 1,

      '#step' => 0.1,

      '#default_value' => $this->getSetting('duration'),

      '#description' => $this->t('An aggravator used to control animation speed. Higher is slower!'),

    ];

src/Plugin/views/style/Gliderjs.php

+21 −12
Original line number Diff line number Diff line
@@ -94,18 +94,18 @@ class Gliderjs extends StylePluginBase { 
   */

  protected function defineOptions() {

    return [

      'slides_to_show' => ['default' => 'auto'],

      'slides_to_scroll' => ['default' => 'auto'],

      'show_arrows' => ['default' => FALSE],

      'slides_to_show' => ['default' => 1],

      'slides_to_scroll' => ['default' => 1],

      'show_arrows' => ['default' => TRUE],

      'show_dots' => ['default' => FALSE],

      'item_width' => ['default' => 1],

      'exact_width' => ['default' => 1],

      'scroll_lock' => ['default' => FALSE],

      'scroll_lock_delay' => ['default' => 1],

      'resize_lock' => ['default' => FALSE],

      'scroll_lock_delay' => ['default' => 250],

      'resize_lock' => ['default' => TRUE],

      'rewind' => ['default' => FALSE],

      'draggable' => ['default' => FALSE],

      'drag_velocity' => ['default' => 1],

      'drag_velocity' => ['default' => 3.3],

      'duration' => ['default' => 0.5],

      'breakpoint_settings' => ['default' => ''],

    ] + parent::defineOptions();
@@ -153,7 +153,9 @@ class Gliderjs extends StylePluginBase { 
    $form['item_width'] = [

      '#title' => $this->t('Item Width'),

      '#type' => 'number',

      '#min' => '1',

      '#min' => 1,

      '#max' => 9999,

      '#step' => 1,

      '#field_suffix' => 'px',

      '#default_value' => $this->options['item_width'],

      '#states' => [
@@ -166,7 +168,9 @@ class Gliderjs extends StylePluginBase { 
    $form['exact_width'] = [

      '#title' => $this->t('Exact Width'),

      '#type' => 'number',

      '#min' => '1',

      '#min' => 1,

      '#max' => 9999,

      '#step' => 1,

      '#field_suffix' => 'px',

      '#default_value' => $this->options['exact_width'],

      '#description' => $this->t('This prevents resizing items to fit when "Slides to Show" is set to "auto". This will yield fractional slides if your container is not sized appropriately.'),
@@ -187,7 +191,9 @@ class Gliderjs extends StylePluginBase { 
    $form['scroll_lock_delay'] = [

      '#title' => $this->t('Scroll Lock Delay'),

      '#type' => 'number',

      '#min' => '1',

      '#min' => 1,

      '#max' => 99999,

      '#step' => 1,

      '#default_value' => $this->options['scroll_lock_delay'],

      '#description' => $this->t('The delay in milliseconds to wait before the scroll happens.'),

      '#states' => [
@@ -221,7 +227,9 @@ class Gliderjs extends StylePluginBase { 
    $form['drag_velocity'] = [

      '#title' => $this->t('Drag Velocity'),

      '#type' => 'number',

      '#min' => '1',

      '#min' => 1,

      '#max' => 10,

      '#step' => 0.1,

      '#default_value' => $this->options['drag_velocity'],

      '#description' => $this->t('How much to aggravate the velocity of the mouse dragging.'),

      '#states' => [
@@ -234,8 +242,9 @@ class Gliderjs extends StylePluginBase { 
    $form['duration'] = [

      '#title' => $this->t('Duration'),

      '#type' => 'number',

      '#min' => '0',

      '#step' => 0.5,

      '#min' => 0,

      '#max' => 1,

      '#step' => 0.1,

      '#default_value' => $this->options['duration'],

      '#description' => $this->t('An aggravator used to control animation speed. Higher is slower!'),

    ];