ui-field-dimension.php 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <#
  2. var placeholder = data.field.placeholder;
  3. if ( 'object' !== typeof placeholder ) {
  4. placeholder = {
  5. top : placeholder,
  6. right : placeholder,
  7. bottom : placeholder,
  8. left : placeholder,
  9. };
  10. }
  11. /**
  12. * We need to handle responsive dimension fields like this for backwards
  13. * compatibility with old margin, padding and border fields. If we did not do this
  14. * the keys would be margin_medium_top instead of the existing margin_top_medium.
  15. */
  16. var responsive = data.name.replace( data.rootName, '' );
  17. #>
  18. <div class="fl-dimension-field-units">
  19. <div class="fl-dimension-field-unit">
  20. <input
  21. type="number"
  22. name="{{data.rootName}}_top{{responsive}}"
  23. value="{{data.settings[ data.rootName + '_top' + responsive ]}}"
  24. placeholder="{{placeholder.top}}"
  25. data-unit="top"
  26. />
  27. <label><?php _e( 'Top', 'fl-builder' ); ?></label>
  28. </div>
  29. <div class="fl-dimension-field-unit">
  30. <input
  31. type="number"
  32. name="{{data.rootName}}_right{{responsive}}"
  33. value="{{data.settings[ data.rootName + '_right' + responsive ]}}"
  34. placeholder="{{placeholder.right}}"
  35. data-unit="right"
  36. />
  37. <label><?php _e( 'Right', 'fl-builder' ); ?></label>
  38. </div>
  39. <div class="fl-dimension-field-unit">
  40. <input
  41. type="number"
  42. name="{{data.rootName}}_bottom{{responsive}}"
  43. value="{{data.settings[ data.rootName + '_bottom' + responsive ]}}"
  44. placeholder="{{placeholder.bottom}}"
  45. data-unit="bottom"
  46. />
  47. <label><?php _e( 'Bottom', 'fl-builder' ); ?></label>
  48. </div>
  49. <div class="fl-dimension-field-unit">
  50. <input
  51. type="number"
  52. name="{{data.rootName}}_left{{responsive}}"
  53. value="{{data.settings[ data.rootName + '_left' + responsive ]}}"
  54. placeholder="{{placeholder.left}}"
  55. data-unit="left"
  56. />
  57. <label><?php _e( 'Left', 'fl-builder' ); ?></label>
  58. </div>
  59. </div>