background.php 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. <?php if ( ! defined( 'ABSPATH' ) ) { die; } // Cannot access directly.
  2. /**
  3. *
  4. * Field: background
  5. *
  6. * @since 1.0.0
  7. * @version 1.0.0
  8. *
  9. */
  10. if ( ! class_exists( 'CSF_Field_background' ) ) {
  11. class CSF_Field_background extends CSF_Fields {
  12. public function __construct( $field, $value = '', $unique = '', $where = '', $parent = '' ) {
  13. parent::__construct( $field, $value, $unique, $where, $parent );
  14. }
  15. public function render() {
  16. $args = wp_parse_args( $this->field, array(
  17. 'background_color' => true,
  18. 'background_image' => true,
  19. 'background_position' => true,
  20. 'background_repeat' => true,
  21. 'background_attachment' => true,
  22. 'background_size' => true,
  23. 'background_origin' => false,
  24. 'background_clip' => false,
  25. 'background_blend_mode' => false,
  26. 'background_gradient' => false,
  27. 'background_gradient_color' => true,
  28. 'background_gradient_direction' => true,
  29. 'background_image_preview' => true,
  30. 'background_auto_attributes' => false,
  31. 'compact' => false,
  32. 'background_image_library' => 'image',
  33. 'background_image_placeholder' => esc_html__( 'Not selected', 'sakurairo_csf' ),
  34. ) );
  35. if ( $args['compact'] ) {
  36. $args['background_color'] = false;
  37. $args['background_auto_attributes'] = true;
  38. }
  39. $default_value = array(
  40. 'background-color' => '',
  41. 'background-image' => '',
  42. 'background-position' => '',
  43. 'background-repeat' => '',
  44. 'background-attachment' => '',
  45. 'background-size' => '',
  46. 'background-origin' => '',
  47. 'background-clip' => '',
  48. 'background-blend-mode' => '',
  49. 'background-gradient-color' => '',
  50. 'background-gradient-direction' => '',
  51. );
  52. $default_value = ( ! empty( $this->field['default'] ) ) ? wp_parse_args( $this->field['default'], $default_value ) : $default_value;
  53. $this->value = wp_parse_args( $this->value, $default_value );
  54. echo $this->field_before();
  55. echo '<div class="csf--background-colors">';
  56. //
  57. // Background Color
  58. if ( ! empty( $args['background_color'] ) ) {
  59. echo '<div class="csf--color">';
  60. echo ( ! empty( $args['background_gradient'] ) ) ? '<div class="csf--title">'. esc_html__( 'From', 'sakurairo_csf' ) .'</div>' : '';
  61. Sakurairo_CSF::field( array(
  62. 'id' => 'background-color',
  63. 'type' => 'color',
  64. 'default' => $default_value['background-color'],
  65. ), $this->value['background-color'], $this->field_name(), 'field/background' );
  66. echo '</div>';
  67. }
  68. //
  69. // Background Gradient Color
  70. if ( ! empty( $args['background_gradient_color'] ) && ! empty( $args['background_gradient'] ) ) {
  71. echo '<div class="csf--color">';
  72. echo ( ! empty( $args['background_gradient'] ) ) ? '<div class="csf--title">'. esc_html__( 'To', 'sakurairo_csf' ) .'</div>' : '';
  73. Sakurairo_CSF::field( array(
  74. 'id' => 'background-gradient-color',
  75. 'type' => 'color',
  76. 'default' => $default_value['background-gradient-color'],
  77. ), $this->value['background-gradient-color'], $this->field_name(), 'field/background' );
  78. echo '</div>';
  79. }
  80. //
  81. // Background Gradient Direction
  82. if ( ! empty( $args['background_gradient_direction'] ) && ! empty( $args['background_gradient'] ) ) {
  83. echo '<div class="csf--color">';
  84. echo ( ! empty( $args['background_gradient'] ) ) ? '<div class="csf---title">'. esc_html__( 'Direction', 'sakurairo_csf' ) .'</div>' : '';
  85. Sakurairo_CSF::field( array(
  86. 'id' => 'background-gradient-direction',
  87. 'type' => 'select',
  88. 'options' => array(
  89. '' => esc_html__( 'Gradient Direction', 'sakurairo_csf' ),
  90. 'to bottom' => esc_html__( '&#8659; top to bottom', 'sakurairo_csf' ),
  91. 'to right' => esc_html__( '&#8658; left to right', 'sakurairo_csf' ),
  92. '135deg' => esc_html__( '&#8664; corner top to right', 'sakurairo_csf' ),
  93. '-135deg' => esc_html__( '&#8665; corner top to left', 'sakurairo_csf' ),
  94. ),
  95. ), $this->value['background-gradient-direction'], $this->field_name(), 'field/background' );
  96. echo '</div>';
  97. }
  98. echo '</div>';
  99. //
  100. // Background Image
  101. if ( ! empty( $args['background_image'] ) ) {
  102. echo '<div class="csf--background-image">';
  103. Sakurairo_CSF::field( array(
  104. 'id' => 'background-image',
  105. 'type' => 'media',
  106. 'class' => 'csf-assign-field-background',
  107. 'library' => $args['background_image_library'],
  108. 'preview' => $args['background_image_preview'],
  109. 'placeholder' => $args['background_image_placeholder'],
  110. 'attributes' => array( 'data-depend-id' => $this->field['id'] ),
  111. ), $this->value['background-image'], $this->field_name(), 'field/background' );
  112. echo '</div>';
  113. }
  114. $auto_class = ( ! empty( $args['background_auto_attributes'] ) ) ? ' csf--auto-attributes' : '';
  115. $hidden_class = ( ! empty( $args['background_auto_attributes'] ) && empty( $this->value['background-image']['url'] ) ) ? ' csf--attributes-hidden' : '';
  116. echo '<div class="csf--background-attributes'. esc_attr( $auto_class . $hidden_class ) .'">';
  117. //
  118. // Background Position
  119. if ( ! empty( $args['background_position'] ) ) {
  120. Sakurairo_CSF::field( array(
  121. 'id' => 'background-position',
  122. 'type' => 'select',
  123. 'options' => array(
  124. '' => esc_html__( 'Background Position', 'sakurairo_csf' ),
  125. 'left top' => esc_html__( 'Left Top', 'sakurairo_csf' ),
  126. 'left center' => esc_html__( 'Left Center', 'sakurairo_csf' ),
  127. 'left bottom' => esc_html__( 'Left Bottom', 'sakurairo_csf' ),
  128. 'center top' => esc_html__( 'Center Top', 'sakurairo_csf' ),
  129. 'center center' => esc_html__( 'Center Center', 'sakurairo_csf' ),
  130. 'center bottom' => esc_html__( 'Center Bottom', 'sakurairo_csf' ),
  131. 'right top' => esc_html__( 'Right Top', 'sakurairo_csf' ),
  132. 'right center' => esc_html__( 'Right Center', 'sakurairo_csf' ),
  133. 'right bottom' => esc_html__( 'Right Bottom', 'sakurairo_csf' ),
  134. ),
  135. ), $this->value['background-position'], $this->field_name(), 'field/background' );
  136. }
  137. //
  138. // Background Repeat
  139. if ( ! empty( $args['background_repeat'] ) ) {
  140. Sakurairo_CSF::field( array(
  141. 'id' => 'background-repeat',
  142. 'type' => 'select',
  143. 'options' => array(
  144. '' => esc_html__( 'Background Repeat', 'sakurairo_csf' ),
  145. 'repeat' => esc_html__( 'Repeat', 'sakurairo_csf' ),
  146. 'no-repeat' => esc_html__( 'No Repeat', 'sakurairo_csf' ),
  147. 'repeat-x' => esc_html__( 'Repeat Horizontally', 'sakurairo_csf' ),
  148. 'repeat-y' => esc_html__( 'Repeat Vertically', 'sakurairo_csf' ),
  149. ),
  150. ), $this->value['background-repeat'], $this->field_name(), 'field/background' );
  151. }
  152. //
  153. // Background Attachment
  154. if ( ! empty( $args['background_attachment'] ) ) {
  155. Sakurairo_CSF::field( array(
  156. 'id' => 'background-attachment',
  157. 'type' => 'select',
  158. 'options' => array(
  159. '' => esc_html__( 'Background Attachment', 'sakurairo_csf' ),
  160. 'scroll' => esc_html__( 'Scroll', 'sakurairo_csf' ),
  161. 'fixed' => esc_html__( 'Fixed', 'sakurairo_csf' ),
  162. ),
  163. ), $this->value['background-attachment'], $this->field_name(), 'field/background' );
  164. }
  165. //
  166. // Background Size
  167. if ( ! empty( $args['background_size'] ) ) {
  168. Sakurairo_CSF::field( array(
  169. 'id' => 'background-size',
  170. 'type' => 'select',
  171. 'options' => array(
  172. '' => esc_html__( 'Background Size', 'sakurairo_csf' ),
  173. 'cover' => esc_html__( 'Cover', 'sakurairo_csf' ),
  174. 'contain' => esc_html__( 'Contain', 'sakurairo_csf' ),
  175. 'auto' => esc_html__( 'Auto', 'sakurairo_csf' ),
  176. ),
  177. ), $this->value['background-size'], $this->field_name(), 'field/background' );
  178. }
  179. //
  180. // Background Origin
  181. if ( ! empty( $args['background_origin'] ) ) {
  182. Sakurairo_CSF::field( array(
  183. 'id' => 'background-origin',
  184. 'type' => 'select',
  185. 'options' => array(
  186. '' => esc_html__( 'Background Origin', 'sakurairo_csf' ),
  187. 'padding-box' => esc_html__( 'Padding Box', 'sakurairo_csf' ),
  188. 'border-box' => esc_html__( 'Border Box', 'sakurairo_csf' ),
  189. 'content-box' => esc_html__( 'Content Box', 'sakurairo_csf' ),
  190. ),
  191. ), $this->value['background-origin'], $this->field_name(), 'field/background' );
  192. }
  193. //
  194. // Background Clip
  195. if ( ! empty( $args['background_clip'] ) ) {
  196. Sakurairo_CSF::field( array(
  197. 'id' => 'background-clip',
  198. 'type' => 'select',
  199. 'options' => array(
  200. '' => esc_html__( 'Background Clip', 'sakurairo_csf' ),
  201. 'border-box' => esc_html__( 'Border Box', 'sakurairo_csf' ),
  202. 'padding-box' => esc_html__( 'Padding Box', 'sakurairo_csf' ),
  203. 'content-box' => esc_html__( 'Content Box', 'sakurairo_csf' ),
  204. ),
  205. ), $this->value['background-clip'], $this->field_name(), 'field/background' );
  206. }
  207. //
  208. // Background Blend Mode
  209. if ( ! empty( $args['background_blend_mode'] ) ) {
  210. Sakurairo_CSF::field( array(
  211. 'id' => 'background-blend-mode',
  212. 'type' => 'select',
  213. 'options' => array(
  214. '' => esc_html__( 'Background Blend Mode', 'sakurairo_csf' ),
  215. 'normal' => esc_html__( 'Normal', 'sakurairo_csf' ),
  216. 'multiply' => esc_html__( 'Multiply', 'sakurairo_csf' ),
  217. 'screen' => esc_html__( 'Screen', 'sakurairo_csf' ),
  218. 'overlay' => esc_html__( 'Overlay', 'sakurairo_csf' ),
  219. 'darken' => esc_html__( 'Darken', 'sakurairo_csf' ),
  220. 'lighten' => esc_html__( 'Lighten', 'sakurairo_csf' ),
  221. 'color-dodge' => esc_html__( 'Color Dodge', 'sakurairo_csf' ),
  222. 'saturation' => esc_html__( 'Saturation', 'sakurairo_csf' ),
  223. 'color' => esc_html__( 'Color', 'sakurairo_csf' ),
  224. 'luminosity' => esc_html__( 'Luminosity', 'sakurairo_csf' ),
  225. ),
  226. ), $this->value['background-blend-mode'], $this->field_name(), 'field/background' );
  227. }
  228. echo '</div>';
  229. echo $this->field_after();
  230. }
  231. public function output() {
  232. $output = '';
  233. $bg_image = array();
  234. $important = ( ! empty( $this->field['output_important'] ) ) ? '!important' : '';
  235. $element = ( is_array( $this->field['output'] ) ) ? join( ',', $this->field['output'] ) : $this->field['output'];
  236. // Background image and gradient
  237. $background_color = ( ! empty( $this->value['background-color'] ) ) ? $this->value['background-color'] : '';
  238. $background_gd_color = ( ! empty( $this->value['background-gradient-color'] ) ) ? $this->value['background-gradient-color'] : '';
  239. $background_gd_direction = ( ! empty( $this->value['background-gradient-direction'] ) ) ? $this->value['background-gradient-direction'] : '';
  240. $background_image = ( ! empty( $this->value['background-image']['url'] ) ) ? $this->value['background-image']['url'] : '';
  241. if ( $background_color && $background_gd_color ) {
  242. $gd_direction = ( $background_gd_direction ) ? $background_gd_direction .',' : '';
  243. $bg_image[] = 'linear-gradient('. $gd_direction . $background_color .','. $background_gd_color .')';
  244. unset( $this->value['background-color'] );
  245. }
  246. if ( $background_image ) {
  247. $bg_image[] = 'url('. $background_image .')';
  248. }
  249. if ( ! empty( $bg_image ) ) {
  250. $output .= 'background-image:'. implode( ',', $bg_image ) . $important .';';
  251. }
  252. // Common background properties
  253. $properties = array( 'color', 'position', 'repeat', 'attachment', 'size', 'origin', 'clip', 'blend-mode' );
  254. foreach ( $properties as $property ) {
  255. $property = 'background-'. $property;
  256. if ( ! empty( $this->value[$property] ) ) {
  257. $output .= $property .':'. $this->value[$property] . $important .';';
  258. }
  259. }
  260. if ( $output ) {
  261. $output = $element .'{'. $output .'}';
  262. }
  263. $this->parent->output_css .= $output;
  264. return $output;
  265. }
  266. }
  267. }