WordPress.org
Get WordPress

Plugin Directory

Changeset 2678158


Ignore:
Timestamp:
02/14/2022 04:55:51 AM (4 years ago)
Author:
jweathe
Message:

added transition duration parameter

Location:
no-bs-image-slider
Files:
4 edited
5 copied

Legend:

Unmodified
Added
Removed

  • no-bs-image-slider/tags/1.8/changelog.txt

    r2607986 r2678158  
     1= 1.7.1 =
     2* PHP 5.4 compatibility patch
     3
     4= 1.7 =
     5* Images loaded eagerly be default.
     6* Image lazy loading parameter.
     7
    18= 1.6.1 =
    29Hotfix

  • no-bs-image-slider/tags/1.8/plugin.php

    r2607986 r2678158  
    55Plugin URI: https://planetjon.ca/projects/no-bs-image-slider/
    66Description: For displaying a light-weight image slider
    7 Version: 1.7.1
     7Version: 1.8
    88Requires at least: 4.7
    9 Tested up to: 5.8.1
     9Tested up to: 5.9
    1010Requires PHP: 5.4
    1111Author: Jonathan Weatherhead
    … …  
    2020
    2121const default_slide_duration = 5;
     22const default_transition_duration = 1.25;
    2223
    2324function renderSlider( $id, array $slides, array $args = [] ) {
    … …  
    2829    $slideCount = count( $slides );
    2930    $showCounter = filter_var( $args['showCounter'], FILTER_VALIDATE_BOOLEAN );
    30     $slideDuration = filter_var( $args['slideDuration'], FILTER_VALIDATE_INT, [
     31    $slideDuration = filter_var( $args['slideDuration'], FILTER_VALIDATE_FLOAT, [
    3132        'options' => [ 'default' => default_slide_duration, 'min_range' => 1 ]
    3233    ] );
     34    $transitionDuration = filter_var( $args['transitionDuration'], FILTER_VALIDATE_FLOAT, [
     35        'options' => [ 'default' => default_transition_duration, 'min_range' => 0 ]
     36    ] );
     37
     38    if( $showCounter ) {
     39        $sliderClass .= ' show-counter';
     40    }
    3341
    3442    $sliderKeyframes = '';
    3543    $sliderAnimationName = $sliderID . '-keyframes';
    3644    $sliderAnimationDuration = $slideCount * $slideDuration;
    37     for( $i = 0; $i < $slideCount; $i++ ) {
     45    $transitionDuration = min( $transitionDuration, $slideDuration );
     46    // Build slider animation keyframes
     47    for( $i = 0; $i < $slideCount; ++$i ) {
     48        // Start stationary keyframe for slide
    3849        $sliderKeyframes .= sprintf(
    3950            '%3.2f%%{transform:translateX(-%d%%)}',
    4051            100 * $i / $slideCount,
    41             $i * 100
    42         );
     52            100 * $i
     53        );
     54
     55        // Start transition keyframe to next slide
    4356        $sliderKeyframes .= sprintf(
    4457            '%3.2f%%{transform:translateX(-%d%%)}',
    45             100 * ($i + .75) / $slideCount,
    46             $i * 100
    47         );
    48     }
     58            100 * ($i + 1 - $transitionDuration / $slideDuration) / $slideCount,
     59            100 * $i
     60        );
     61    }
     62    // Reset slider to neutral position at the end of animation
    4963    $sliderKeyframes .= '100%{transform:translateX(0%)}';
    5064
     65    // Inject generated slider animation
    5166    printf(
    5267        '<style>#%1$s{--slide-count:%2$d}#%1$s .scrollpane{animation-name:%3$s;animation-duration:%4$ds;}@keyframes %3$s{%5$s}</style>',
    … …  
    5873    );
    5974
    60     if( $showCounter ) {
    61         $sliderClass .= ' show-counter';
    62     }
    63 
     75    // Provide opportunity to inject additional styling
    6476    if( is_callable( $args['stylesCallback'] ) ) {
    6577        call_user_func( $args['stylesCallback'], $id );
    … …  
    7183    }
    7284
     85    // Slider container
    7386    printf(
    7487        '<div id="%1$s" class="%2$s" %3$s><div class="scrollpane" aria-live="off">',
    … …  
    7790        join( ' ', $sliderAria )
    7891    );
     92
     93    // Slider slides
    7994    $counter = 0;
    8095    foreach( $slides as $slide ) {
    … …  
    104119        'slider' => '',
    105120        'duration' => default_slide_duration,
     121        'transition' => default_transition_duration,
    106122        'showcounter' => 'no',
    107123        'lazy' => 'no'
    … …  
    112128    $slider = $params['slider'];
    113129    $slideDuration = $params['duration'];
     130    $transitionDuration = $params['transition'];
    114131    $showCounter = $params['showcounter'];
    115132    $loadingAttribute = filter_var( $params['lazy'], FILTER_VALIDATE_BOOLEAN ) ? 'lazy' : false;
    … …  
    160177            'description' => $sliderInfo->name,
    161178            'slideDuration' => $slideDuration,
     179            'transitionDuration' => $transitionDuration,
    162180            'showCounter' => $showCounter,
    163181            'stylesCallback' => function( $slider ) {
    … …  
    192210        $slider = $instance['nbis'];
    193211        $slideDuration = $instance['nbisd'];
     212        $transitionDuration = $instance['nbist'];
    194213        $showCounter = $instance['nbisc'];
    195214        $lazyImages = $instance['nbisl'];
    … …  
    198217            'slider' => $slider,
    199218            'duration' => $slideDuration,
     219            'transition' => $transitionDuration,
    200220            'showcounter' => $showCounter,
    201221            'lazy' => $lazyImages
    … …  
    213233        $slider = $instance['nbis'] ?: '';
    214234        $slideDuration = $instance['nbisd'] ?: default_slide_duration;
     235        $transitionDuration = $instance['nbist'] ?: default_transition_duration;
    215236        $showCounter = $instance['nbisc'];
    216237        $lazyImages = $instance['nbisl'];
    … …  
    238259        printf(
    239260            '<p><label>%s <input type="number" min="1" id="%s" name="%s" value="%s" /></label></p>',
    240             __( 'Slide Duration (seconds)', 'no-bs-image-slider' ),
     261            __( 'Slide duration (seconds)', 'no-bs-image-slider' ),
    241262            esc_attr( $this->get_field_id( 'nbisd' ) ),
    242263            esc_attr( $this->get_field_name( 'nbisd' ) ),
    243264            esc_attr( $slideDuration ),
     265        );
     266
     267        printf(
     268            '<p><label>%s <input type="number" min="1" id="%s" name="%s" value="%s" /></label></p>',
     269            __( 'Slide transition (seconds)', 'no-bs-image-slider' ),
     270            esc_attr( $this->get_field_id( 'nbist' ) ),
     271            esc_attr( $this->get_field_name( 'nbist' ) ),
     272            esc_attr( $transitionDuration ),
    244273        );
    245274
    … …  
    265294    public function update( $new, $old ) {
    266295        $instance = [
    267             'nbis' => !empty( $new['nbis'] ) ? sanitize_text_field( $new['nbis'] ) : false,
    268             'nbisd' => !empty( $new['nbisd'] ) ? sanitize_text_field( $new['nbisd'] ) : false,
    269             'nbisc' => !empty( $new['nbisc'] ) ? sanitize_text_field( $new['nbisc'] ) : false,
    270             'nbisl' => !empty( $new['nbisl'] ) ? sanitize_text_field( $new['nbisl'] ) : false
     296            'nbis' => !empty( $new['nbis'] ) ? sanitize_text_field( $new['nbis'] ) : null,
     297            'nbisd' => !empty( $new['nbisd'] ) ? sanitize_text_field( $new['nbisd'] ) : null,
     298            'nbist' => !empty( $new['nbist'] ) ? sanitize_text_field( $new['nbist'] ) : null,
     299            'nbisc' => !empty( $new['nbisc'] ) ? sanitize_text_field( $new['nbisc'] ) : null,
     300            'nbisl' => !empty( $new['nbisl'] ) ? sanitize_text_field( $new['nbisl'] ) : null
    271301        ];
    272302

  • no-bs-image-slider/tags/1.8/readme.txt

    r2607986 r2678158  
    44Tags: carousel, slideshow, responsive, accessible
    55Requires at least: 4.7
    6 Tested up to: 5.8.1
     6Tested up to: 5.9
    77Requires PHP: 5.4
    8 Stable tag: 1.7.1
     8Stable tag: 1.8
    99License: GPL2
    1010License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    4040
    4141* slider="slug"
    42 * duration="number" (default 5)
     42* duration="number" (seconds, default 5)
     43* transition="number" (seconds, default 1.25)
    4344* showcounter="yes|no" (default no)
    4445* lazy="yes|no" (default no)
    … …  
    7475== Changelog ==
    7576
    76 + 1.7.1 =
    77 * PHP 5.4 compatibility patch
    78 
    79 = 1.7.0 =
    80 * Images loaded eagerly be default.
    81 * Image lazy loading parameter.
     77= 1.8 =
     78* Transition duration parameter added.

  • no-bs-image-slider/tags/1.8/style.css

    r2597622 r2678158  
    55    overflow: hidden;
    66    counter-reset: nbis-slides;
     7    will-change: translate;
    78}
    89

  • no-bs-image-slider/trunk/changelog.txt

    r2607986 r2678158  
     1= 1.7.1 =
     2* PHP 5.4 compatibility patch
     3
     4= 1.7 =
     5* Images loaded eagerly be default.
     6* Image lazy loading parameter.
     7
    18= 1.6.1 =
    29Hotfix

  • no-bs-image-slider/trunk/plugin.php

    r2607986 r2678158  
    55Plugin URI: https://planetjon.ca/projects/no-bs-image-slider/
    66Description: For displaying a light-weight image slider
    7 Version: 1.7.1
     7Version: 1.8
    88Requires at least: 4.7
    9 Tested up to: 5.8.1
     9Tested up to: 5.9
    1010Requires PHP: 5.4
    1111Author: Jonathan Weatherhead
    … …  
    2020
    2121const default_slide_duration = 5;
     22const default_transition_duration = 1.25;
    2223
    2324function renderSlider( $id, array $slides, array $args = [] ) {
    … …  
    2829    $slideCount = count( $slides );
    2930    $showCounter = filter_var( $args['showCounter'], FILTER_VALIDATE_BOOLEAN );
    30     $slideDuration = filter_var( $args['slideDuration'], FILTER_VALIDATE_INT, [
     31    $slideDuration = filter_var( $args['slideDuration'], FILTER_VALIDATE_FLOAT, [
    3132        'options' => [ 'default' => default_slide_duration, 'min_range' => 1 ]
    3233    ] );
     34    $transitionDuration = filter_var( $args['transitionDuration'], FILTER_VALIDATE_FLOAT, [
     35        'options' => [ 'default' => default_transition_duration, 'min_range' => 0 ]
     36    ] );
     37
     38    if( $showCounter ) {
     39        $sliderClass .= ' show-counter';
     40    }
    3341
    3442    $sliderKeyframes = '';
    3543    $sliderAnimationName = $sliderID . '-keyframes';
    3644    $sliderAnimationDuration = $slideCount * $slideDuration;
    37     for( $i = 0; $i < $slideCount; $i++ ) {
     45    $transitionDuration = min( $transitionDuration, $slideDuration );
     46    // Build slider animation keyframes
     47    for( $i = 0; $i < $slideCount; ++$i ) {
     48        // Start stationary keyframe for slide
    3849        $sliderKeyframes .= sprintf(
    3950            '%3.2f%%{transform:translateX(-%d%%)}',
    4051            100 * $i / $slideCount,
    41             $i * 100
    42         );
     52            100 * $i
     53        );
     54
     55        // Start transition keyframe to next slide
    4356        $sliderKeyframes .= sprintf(
    4457            '%3.2f%%{transform:translateX(-%d%%)}',
    45             100 * ($i + .75) / $slideCount,
    46             $i * 100
    47         );
    48     }
     58            100 * ($i + 1 - $transitionDuration / $slideDuration) / $slideCount,
     59            100 * $i
     60        );
     61    }
     62    // Reset slider to neutral position at the end of animation
    4963    $sliderKeyframes .= '100%{transform:translateX(0%)}';
    5064
     65    // Inject generated slider animation
    5166    printf(
    5267        '<style>#%1$s{--slide-count:%2$d}#%1$s .scrollpane{animation-name:%3$s;animation-duration:%4$ds;}@keyframes %3$s{%5$s}</style>',
    … …  
    5873    );
    5974
    60     if( $showCounter ) {
    61         $sliderClass .= ' show-counter';
    62     }
    63 
     75    // Provide opportunity to inject additional styling
    6476    if( is_callable( $args['stylesCallback'] ) ) {
    6577        call_user_func( $args['stylesCallback'], $id );
    … …  
    7183    }
    7284
     85    // Slider container
    7386    printf(
    7487        '<div id="%1$s" class="%2$s" %3$s><div class="scrollpane" aria-live="off">',
    … …  
    7790        join( ' ', $sliderAria )
    7891    );
     92
     93    // Slider slides
    7994    $counter = 0;
    8095    foreach( $slides as $slide ) {
    … …  
    104119        'slider' => '',
    105120        'duration' => default_slide_duration,
     121        'transition' => default_transition_duration,
    106122        'showcounter' => 'no',
    107123        'lazy' => 'no'
    … …  
    112128    $slider = $params['slider'];
    113129    $slideDuration = $params['duration'];
     130    $transitionDuration = $params['transition'];
    114131    $showCounter = $params['showcounter'];
    115132    $loadingAttribute = filter_var( $params['lazy'], FILTER_VALIDATE_BOOLEAN ) ? 'lazy' : false;
    … …  
    160177            'description' => $sliderInfo->name,
    161178            'slideDuration' => $slideDuration,
     179            'transitionDuration' => $transitionDuration,
    162180            'showCounter' => $showCounter,
    163181            'stylesCallback' => function( $slider ) {
    … …  
    192210        $slider = $instance['nbis'];
    193211        $slideDuration = $instance['nbisd'];
     212        $transitionDuration = $instance['nbist'];
    194213        $showCounter = $instance['nbisc'];
    195214        $lazyImages = $instance['nbisl'];
    … …  
    198217            'slider' => $slider,
    199218            'duration' => $slideDuration,
     219            'transition' => $transitionDuration,
    200220            'showcounter' => $showCounter,
    201221            'lazy' => $lazyImages
    … …  
    213233        $slider = $instance['nbis'] ?: '';
    214234        $slideDuration = $instance['nbisd'] ?: default_slide_duration;
     235        $transitionDuration = $instance['nbist'] ?: default_transition_duration;
    215236        $showCounter = $instance['nbisc'];
    216237        $lazyImages = $instance['nbisl'];
    … …  
    238259        printf(
    239260            '<p><label>%s <input type="number" min="1" id="%s" name="%s" value="%s" /></label></p>',
    240             __( 'Slide Duration (seconds)', 'no-bs-image-slider' ),
     261            __( 'Slide duration (seconds)', 'no-bs-image-slider' ),
    241262            esc_attr( $this->get_field_id( 'nbisd' ) ),
    242263            esc_attr( $this->get_field_name( 'nbisd' ) ),
    243264            esc_attr( $slideDuration ),
     265        );
     266
     267        printf(
     268            '<p><label>%s <input type="number" min="1" id="%s" name="%s" value="%s" /></label></p>',
     269            __( 'Slide transition (seconds)', 'no-bs-image-slider' ),
     270            esc_attr( $this->get_field_id( 'nbist' ) ),
     271            esc_attr( $this->get_field_name( 'nbist' ) ),
     272            esc_attr( $transitionDuration ),
    244273        );
    245274
    … …  
    265294    public function update( $new, $old ) {
    266295        $instance = [
    267             'nbis' => !empty( $new['nbis'] ) ? sanitize_text_field( $new['nbis'] ) : false,
    268             'nbisd' => !empty( $new['nbisd'] ) ? sanitize_text_field( $new['nbisd'] ) : false,
    269             'nbisc' => !empty( $new['nbisc'] ) ? sanitize_text_field( $new['nbisc'] ) : false,
    270             'nbisl' => !empty( $new['nbisl'] ) ? sanitize_text_field( $new['nbisl'] ) : false
     296            'nbis' => !empty( $new['nbis'] ) ? sanitize_text_field( $new['nbis'] ) : null,
     297            'nbisd' => !empty( $new['nbisd'] ) ? sanitize_text_field( $new['nbisd'] ) : null,
     298            'nbist' => !empty( $new['nbist'] ) ? sanitize_text_field( $new['nbist'] ) : null,
     299            'nbisc' => !empty( $new['nbisc'] ) ? sanitize_text_field( $new['nbisc'] ) : null,
     300            'nbisl' => !empty( $new['nbisl'] ) ? sanitize_text_field( $new['nbisl'] ) : null
    271301        ];
    272302

  • no-bs-image-slider/trunk/readme.txt

    r2607986 r2678158  
    44Tags: carousel, slideshow, responsive, accessible
    55Requires at least: 4.7
    6 Tested up to: 5.8.1
     6Tested up to: 5.9
    77Requires PHP: 5.4
    8 Stable tag: 1.7.1
     8Stable tag: 1.8
    99License: GPL2
    1010License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    4040
    4141* slider="slug"
    42 * duration="number" (default 5)
     42* duration="number" (seconds, default 5)
     43* transition="number" (seconds, default 1.25)
    4344* showcounter="yes|no" (default no)
    4445* lazy="yes|no" (default no)
    … …  
    7475== Changelog ==
    7576
    76 + 1.7.1 =
    77 * PHP 5.4 compatibility patch
    78 
    79 = 1.7.0 =
    80 * Images loaded eagerly be default.
    81 * Image lazy loading parameter.
     77= 1.8 =
     78* Transition duration parameter added.

  • no-bs-image-slider/trunk/style.css

    r2597622 r2678158  
    55    overflow: hidden;
    66    counter-reset: nbis-slides;
     7    will-change: translate;
    78}
    89
Note: See TracChangeset for help on using the changeset viewer.