animation.php 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor animation control.
  8. *
  9. * A base control for creating entrance animation control. Displays a select box
  10. * with the available entrance animation effects @see Control_Animation::get_animations() .
  11. *
  12. * @since 1.0.0
  13. */
  14. class Control_Animation extends Base_Data_Control {
  15. /**
  16. * List of animations.
  17. *
  18. * Holds the list of all the available animations.
  19. *
  20. * @access private
  21. * @static
  22. *
  23. * @var array
  24. */
  25. private static $_animations;
  26. /**
  27. * Get control type.
  28. *
  29. * Retrieve the animation control type.
  30. *
  31. * @since 1.0.0
  32. * @access public
  33. *
  34. * @return string Control type.
  35. */
  36. public function get_type() {
  37. return 'animation';
  38. }
  39. /**
  40. * Get animations list.
  41. *
  42. * Retrieve the list of all the available animations.
  43. *
  44. * @since 1.0.0
  45. * @access public
  46. * @static
  47. *
  48. * @return array Control type.
  49. */
  50. public static function get_animations() {
  51. if ( is_null( self::$_animations ) ) {
  52. self::$_animations = [
  53. 'Fading' => [
  54. 'fadeIn' => 'Fade In',
  55. 'fadeInDown' => 'Fade In Down',
  56. 'fadeInLeft' => 'Fade In Left',
  57. 'fadeInRight' => 'Fade In Right',
  58. 'fadeInUp' => 'Fade In Up',
  59. ],
  60. 'Zooming' => [
  61. 'zoomIn' => 'Zoom In',
  62. 'zoomInDown' => 'Zoom In Down',
  63. 'zoomInLeft' => 'Zoom In Left',
  64. 'zoomInRight' => 'Zoom In Right',
  65. 'zoomInUp' => 'Zoom In Up',
  66. ],
  67. 'Bouncing' => [
  68. 'bounceIn' => 'Bounce In',
  69. 'bounceInDown' => 'Bounce In Down',
  70. 'bounceInLeft' => 'Bounce In Left',
  71. 'bounceInRight' => 'Bounce In Right',
  72. 'bounceInUp' => 'Bounce In Up',
  73. ],
  74. 'Sliding' => [
  75. 'slideInDown' => 'Slide In Down',
  76. 'slideInLeft' => 'Slide In Left',
  77. 'slideInRight' => 'Slide In Right',
  78. 'slideInUp' => 'Slide In Up',
  79. ],
  80. 'Rotating' => [
  81. 'rotateIn' => 'Rotate In',
  82. 'rotateInDownLeft' => 'Rotate In Down Left',
  83. 'rotateInDownRight' => 'Rotate In Down Right',
  84. 'rotateInUpLeft' => 'Rotate In Up Left',
  85. 'rotateInUpRight' => 'Rotate In Up Right',
  86. ],
  87. 'Attention Seekers' => [
  88. 'bounce' => 'Bounce',
  89. 'flash' => 'Flash',
  90. 'pulse' => 'Pulse',
  91. 'rubberBand' => 'Rubber Band',
  92. 'shake' => 'Shake',
  93. 'headShake' => 'Head Shake',
  94. 'swing' => 'Swing',
  95. 'tada' => 'Tada',
  96. 'wobble' => 'Wobble',
  97. 'jello' => 'Jello',
  98. ],
  99. 'Light Speed' => [
  100. 'lightSpeedIn' => 'Light Speed In',
  101. ],
  102. 'Specials' => [
  103. 'rollIn' => 'Roll In',
  104. ],
  105. ];
  106. }
  107. return self::$_animations;
  108. }
  109. /**
  110. * Render animations control template.
  111. *
  112. * Used to generate the control HTML in the editor using Underscore JS
  113. * template. The variables for the class are available using `data` JS
  114. * object.
  115. *
  116. * @since 1.0.0
  117. * @access public
  118. */
  119. public function content_template() {
  120. $control_uid = $this->get_control_uid();
  121. ?>
  122. <div class="elementor-control-field">
  123. <label for="<?php echo $control_uid; ?>" class="elementor-control-title">{{{ data.label }}}</label>
  124. <div class="elementor-control-input-wrapper">
  125. <select id="<?php echo $control_uid; ?>" data-setting="{{ data.name }}">
  126. <option value=""><?php echo __( 'None', 'elementor' ); ?></option>
  127. <?php foreach ( self::get_animations() as $animations_group_name => $animations_group ) : ?>
  128. <optgroup label="<?php echo $animations_group_name; ?>">
  129. <?php foreach ( $animations_group as $animation_name => $animation_title ) : ?>
  130. <option value="<?php echo $animation_name; ?>"><?php echo $animation_title; ?></option>
  131. <?php endforeach; ?>
  132. </optgroup>
  133. <?php endforeach; ?>
  134. </select>
  135. </div>
  136. </div>
  137. <# if ( data.description ) { #>
  138. <div class="elementor-control-field-description">{{{ data.description }}}</div>
  139. <# } #>
  140. <?php
  141. }
  142. }