dimensions.php 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor dimension control.
  8. *
  9. * A base control for creating dimension control. Displays input fields for top,
  10. * right, bottom, left and the option to link them together.
  11. *
  12. * @since 1.0.0
  13. */
  14. class Control_Dimensions extends Control_Base_Units {
  15. /**
  16. * Get dimensions control type.
  17. *
  18. * Retrieve the control type, in this case `dimensions`.
  19. *
  20. * @since 1.0.0
  21. * @access public
  22. *
  23. * @return string Control type.
  24. */
  25. public function get_type() {
  26. return 'dimensions';
  27. }
  28. /**
  29. * Get dimensions control default values.
  30. *
  31. * Retrieve the default value of the dimensions control. Used to return the
  32. * default values while initializing the dimensions control.
  33. *
  34. * @since 1.0.0
  35. * @access public
  36. *
  37. * @return array Control default value.
  38. */
  39. public function get_default_value() {
  40. return array_merge(
  41. parent::get_default_value(), [
  42. 'top' => '',
  43. 'right' => '',
  44. 'bottom' => '',
  45. 'left' => '',
  46. 'isLinked' => true,
  47. ]
  48. );
  49. }
  50. /**
  51. * Get dimensions control default settings.
  52. *
  53. * Retrieve the default settings of the dimensions control. Used to return the
  54. * default settings while initializing the dimensions control.
  55. *
  56. * @since 1.0.0
  57. * @access protected
  58. *
  59. * @return array Control default settings.
  60. */
  61. protected function get_default_settings() {
  62. return array_merge(
  63. parent::get_default_settings(), [
  64. 'label_block' => true,
  65. 'allowed_dimensions' => 'all',
  66. 'placeholder' => '',
  67. ]
  68. );
  69. }
  70. /**
  71. * Render dimensions control output in the editor.
  72. *
  73. * Used to generate the control HTML in the editor using Underscore JS
  74. * template. The variables for the class are available using `data` JS
  75. * object.
  76. *
  77. * @since 1.0.0
  78. * @access public
  79. */
  80. public function content_template() {
  81. $dimensions = [
  82. 'top' => __( 'Top', 'elementor' ),
  83. 'right' => __( 'Right', 'elementor' ),
  84. 'bottom' => __( 'Bottom', 'elementor' ),
  85. 'left' => __( 'Left', 'elementor' ),
  86. ];
  87. ?>
  88. <div class="elementor-control-field">
  89. <label class="elementor-control-title">{{{ data.label }}}</label>
  90. <?php $this->print_units_template(); ?>
  91. <div class="elementor-control-input-wrapper">
  92. <ul class="elementor-control-dimensions">
  93. <?php
  94. foreach ( $dimensions as $dimension_key => $dimension_title ) :
  95. $control_uid = $this->get_control_uid( $dimension_key );
  96. ?>
  97. <li class="elementor-control-dimension">
  98. <input id="<?php echo $control_uid; ?>" type="number" data-setting="<?php echo esc_attr( $dimension_key ); ?>"
  99. placeholder="<#
  100. if ( _.isObject( data.placeholder ) ) {
  101. if ( ! _.isUndefined( data.placeholder.<?php echo $dimension_key; ?> ) ) {
  102. print( data.placeholder.<?php echo $dimension_key; ?> );
  103. }
  104. } else {
  105. print( data.placeholder );
  106. } #>"
  107. <# if ( -1 === _.indexOf( allowed_dimensions, '<?php echo $dimension_key; ?>' ) ) { #>
  108. disabled
  109. <# } #>
  110. />
  111. <label for="<?php echo esc_attr( $control_uid ); ?>" class="elementor-control-dimension-label"><?php echo $dimension_title; ?></label>
  112. </li>
  113. <?php endforeach; ?>
  114. <li>
  115. <button class="elementor-link-dimensions tooltip-target" data-tooltip="<?php echo esc_attr__( 'Link values together', 'elementor' ); ?>">
  116. <span class="elementor-linked">
  117. <i class="fa fa-link" aria-hidden="true"></i>
  118. <span class="elementor-screen-only"><?php echo __( 'Link values together', 'elementor' ); ?></span>
  119. </span>
  120. <span class="elementor-unlinked">
  121. <i class="fa fa-chain-broken" aria-hidden="true"></i>
  122. <span class="elementor-screen-only"><?php echo __( 'Unlinked values', 'elementor' ); ?></span>
  123. </span>
  124. </button>
  125. </li>
  126. </ul>
  127. </div>
  128. </div>
  129. <# if ( data.description ) { #>
  130. <div class="elementor-control-field-description">{{{ data.description }}}</div>
  131. <# } #>
  132. <?php
  133. }
  134. }