File animation.php

  1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  39  40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  55  56  57  58  59  60  61  62  63  64  65  66  67  68  69  70  71  72  73  74  75  76  77  78  79  80  81  82  83  84  85  86  87  88  89  90  91  92  93  94  95  96  97  98  99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167

<?php

namespace SIW;

use SIW\CSS;
use SIW\Util;

/**
 * Class voor animaties
 * 
 * @copyright 2019 SIW Internationale Vrijwilligersprojecten
 * @since     3.0.0
 * 
 * @see       https://mciastek.github.io/sal/
 */
class Animation {

    /**
     * Versie van sal.js
     */
    CONST SAL_VERSION = '0.7.4';

    /**
     * Init
     */
    public static function init() {
        $self = new self();
        add_action( 'wp_enqueue_scripts', [ $self, 'register_styles' ] );
        add_action( 'wp_enqueue_scripts', [ $self, 'register_scripts' ] );
    }

    /**
     * Registreert styles
     */
    public function register_styles() {
        wp_register_style( 'sal', SIW_ASSETS_URL . 'modules/sal/sal.css', null, self::SAL_VERSION );
        wp_enqueue_style( 'sal' );
        $inline_css = [
            "[data-sal|='fade']" => [
                'opacity' => 1,
            ],
            "[data-sal|='slide']"=> [
                'opacity'   => 1,
                'transform' => 'none',
            ],
            "[data-sal|='zoom']" => [
                'opacity'   => 1,
                'transform' => 'none',
            ],
            "[data-sal|='flip']" => [
                'transform' => 'none',
            ],
        ];
        $media_query = [
            'max-width' => Util::get_mobile_breakpoint() . 'px',
        ];
        wp_add_inline_style(
            'sal',
            CSS::generate_inline_css( $inline_css, $media_query )
        );
    }

    /**
     * Registreert scripts
     */
    public function register_scripts() {
        wp_register_script( 'sal', SIW_ASSETS_URL . 'modules/sal/sal.js', [], self::SAL_VERSION, true );
        wp_enqueue_script( 'sal' );
    
        wp_register_script( 'siw-animation', SIW_ASSETS_URL . 'js/siw-animation.js', ['sal'], SIW_PLUGIN_VERSION, true );
        wp_localize_script( 'siw-animation', 'siw_animation', [
            'threshold'  => 0.5,
            'once'       => true,
            'breakpoint' => Util::get_mobile_breakpoint(),
        ]);
        wp_enqueue_script( 'siw-animation' );
    }

    /**
     * Geeft opties voor duur terug
     *
     * @return array
     */
    public static function get_duration_options() {
        for ( $t = 200; $t <= 2000; $t+=50 ) {
            $durations[ $t ] = sprintf( __( '%d ms', 'siw' ), $t );
        }
        return $durations;
    }

    /**
     * Geeft opties voor vertraging terug
     *
     * @return array
     */
    public static function get_delay_options() {
        $delays['none'] = __( 'Geen', 'siw' );
        for ( $t = 100; $t <= 1000; $t+=50 ) {
            $delays[ $t ] = sprintf( __( '%d ms', 'siw' ), $t );
        }
        return $delays;
    }

    /**
     * Geeft opties voor easing terug
     *
     * @return array
     */
    public static function get_easing_options() {
        $easings = [
            'linear'            => 'linear',
            'ease'              => 'ease',
            'ease-in'           => 'easeIn',
            'ease-out'          => 'easeOut',
            'ease-in-out'       => 'easeInOut',
            'ease-in-cubic'     => 'easeInCubic',
            'ease-out-cubic'    => 'easeOutCubic',
            'ease-in-out-cubic' => 'easeInOutCubic',
            'ease-in-circ'      => 'easeInCirc',
            'ease-out-circ'     => 'easeOutCirc',
            'ease-in-out-circ'  => 'easeInOutCirc',
            'ease-in-expo'      => 'easeInExpo',
            'ease-out-expo'     => 'easeOutExpo',
            'ease-in-out-expo'  => 'easeInOutExpo',
            'ease-in-quad'      => 'easeInQuad',
            'ease-out-quad'     => 'easeOutQuad',
            'ease-in-out-quad'  => 'easeInOutQuad',
            'ease-in-quart'     => 'easeInQuart',
            'ease-out-quart'    => 'easeOutQuart',
            'ease-in-out-quart' => 'easeInOutQuart',
            'ease-in-quint'     => 'easeInQuint',
            'ease-out-quint'    => 'easeOutQuint',
            'ease-in-out-quint' => 'easeInOutQuint',
            'ease-in-sine'      => 'easeInSine',
            'ease-out-sine'     => 'easeOutSine',
            'ease-in-out-sine'  => 'easeInOutSine',
            'ease-in-back'      => 'easeInBack',
            'ease-out-back'     => 'easeOutBack',
            'ease-in-out-back'  => 'easeInOutBack',
        ];
        return $easings;
    }

    /**
     * Geeft animatietypes terug
     *
     * @return array
     */
    public static function get_types() {
        $types = [
            'fade'        => __( 'Fade', 'siw' ),
            'slide-up'    => __( 'Slide up', 'siw' ),
            'slide-down'  => __( 'Slide down', 'siw' ),
            'slide-left'  => __( 'Slide left', 'siw' ),
            'slide-right' => __( 'Slide right', 'siw' ),
            'zoom-in'     => __( 'Zoom in', 'siw' ),
            'zoom-out'    => __( 'Zoom out', 'siw' ),
            'flip-up'     => __( 'Flip up', 'siw' ),
            'flip-down'   => __( 'Flip down', 'siw' ),
            'flip-left'   => __( 'Flip left', 'siw' ),
            'flip-right'  => __( 'Flip right', 'siw' ),
        ];
        return $types;
    }

}

Namespaces

Classes

Functions