← All changes | src/Admin/Framework/fields/border/border.php +49 -109 1.5.1 → 1.3.2 View file →

		@@ -1,45 +1,20 @@
1		-<?php
	1	+<?php if ( ! defined( 'ABSPATH' ) ) {
	2	+ die; } // Cannot access directly.
2	3	/**
3		- * Framework border field.
4	4	*
5		- * @package darkify
6		- * @subpackage darkify/public
	5	+ * Field: border
	6	+ *
	7	+ * @since 1.0.0
	8	+ * @version 1.0.0
7	9	*/
8		-
9		- if ( ! defined( 'ABSPATH' ) ) {
10		- die;
11		-} // Cannot access directly.
12		-
13	10	if ( ! class_exists( 'DarkifyField_border' ) ) {
14		- /**
15		- *
16		- * Field: border
17		- *
18		- * @since 1.0.0
19		- * @version 1.0.0
20		- */
21	11	class DarkifyField_border extends DarkifyFields {
22	12
23		- /**
24		- * Field constructor.
25		- *
26		- * @param array $field The field type.
27		- * @param string $value The values of the field.
28		- * @param string $unique The unique ID for the field.
29		- * @param string $where To where show the output CSS.
30		- * @param string $parent The parent args.
31		- */
32	13	public function __construct( $field, $value = '', $unique = '', $where = '', $parent = '' ) {
33		-
34	14	parent::__construct( $field, $value, $unique, $where, $parent );
35	15	}
36	16
37		- /**
38		- * Render field
39		- *
40		- * @return void
41		- */
42	17	public function render() {
43	18
44	19	$args = wp_parse_args(
45	20	$this->field,
		@@ -45,12 +20,11 @@
45	20	$this->field,
46	21	array(
47	22	'top_icon' => '<i class="icofont-long-arrow-up"></i>',
48	23	'left_icon' => '<i class="icofont-long-arrow-left"></i>',
49		- 'bottom_icon' => '<i class="icofont-long-arrow-down"></i>',
	24	+ 'bottom_icon' => '<i class=""icofont-long-arrow-down"></i>',
50	25	'right_icon' => '<i class="icofont-long-arrow-right"></i>',
51		- 'all_icon' => '<i class="icofont-justify-all"></i>',
52		- 'radius_icon' => '<i class="icofont-expand"></i>',
	26	+ 'all_icon' => '<i class="icofont-expand"></i>',
53	27	'top_placeholder' => esc_html__( 'top', 'darkify' ),
54	28	'right_placeholder' => esc_html__( 'right', 'darkify' ),
55	29	'bottom_placeholder' => esc_html__( 'bottom', 'darkify' ),
56	30	'left_placeholder' => esc_html__( 'left', 'darkify' ),
		@@ -59,12 +33,9 @@
59	33	'left' => true,
60	34	'bottom' => true,
61	35	'right' => true,
62	36	'all' => false,
63		- 'radius' => false,
64	37	'color' => true,
65		- 'color2' => true,
66		- 'color3' => true,
67	38	'style' => true,
68	39	'unit' => 'px',
69	40	)
70	41	);
		@@ -76,9 +47,8 @@
76	47	'left' => '',
77	48	'color' => '',
78	49	'style' => 'solid',
79	50	'all' => '',
80		- 'radius' => '',
81	51	);
82	52
83	53	$border_props = array(
84	54	'solid' => esc_html__( 'Solid', 'darkify' ),
		@@ -96,21 +66,25 @@
96	66
97	67	$value = wp_parse_args( $this->value, $default_value );
98	68
99	69	echo wp_kses_post( $this->field_before() );
100		- echo '<div class="darkify--inputs">';
	70	+
	71	+ echo '<div class="darkify--inputs" data-depend-id="' . esc_attr( $this->field['id'] ) . '">';
	72	+
101	73	if ( ! empty( $args['all'] ) ) {
102	74
103		- $placeholder = ( ! empty( $args['all_placeholder'] ) ) ? ' placeholder="' . $args['all_placeholder'] . '"' : '';
	75	+ $placeholder = ( ! empty( $args['all_placeholder'] ) ) ? ' placeholder="' . esc_attr( $args['all_placeholder'] ) . '"' : '';
104	76
105	77	echo '<div class="darkify--input">';
106		- echo '<div class="darkify--title">Width</div>';
107		- echo ( ! empty( $args['all_icon'] ) ) ? '<span class="darkify--label darkify--icon">' . wp_kses_post( $args['all_icon'] ) . '</span>' : '';
108		- echo '<input type="number" name="' . esc_attr( $this->field_name( '[all]' ) ) . '" value="' . esc_attr( $value['all'] ) . '"' . wp_kses_post( $placeholder ) . ' class="darkify-number darkify--is-unit" />';
109		- echo ( ! empty( $args['unit'] ) ) ? '<span class="darkify--label darkify--unit">' . esc_html( $args['unit'] ) . '</span>' : '';
	78	+ echo ( ! empty( $args['all_icon'] ) ) ? '<span class="darkify--label darkify--icon">' . wp_kses_post($args['all_icon']) . '</span>' : '';
	79	+ echo '<input type="number" name="' . esc_attr( $this->field_name( '[all]' ) ) . '" value="' . esc_attr( $value['all'] ) . '"' . wp_kses_post($placeholder) . ' class="darkify-input-number darkify--is-unit" step="any" />';
	80	+ echo ( ! empty( $args['unit'] ) ) ? '<span class="darkify--label darkify--unit">' . esc_attr( $args['unit'] ) . '</span>' : '';
110	81	echo '</div>';
	82	+
111	83	} else {
	84	+
112	85	$properties = array();
	86	+
113	87	foreach ( array( 'top', 'right', 'bottom', 'left' ) as $prop ) {
114	88	if ( ! empty( $args[ $prop ] ) ) {
115	89	$properties[] = $prop;
116	90	}
		@@ -115,18 +89,18 @@
115	89	$properties[] = $prop;
116	90	}
117	91	}
118	92
119		- $properties = ( array( 'right', 'left' ) === $properties ) ? array_reverse( $properties ) : $properties;
	93	+ $properties = ( $properties === array( 'right', 'left' ) ) ? array_reverse( $properties ) : $properties;
120	94
121	95	foreach ( $properties as $property ) {
122		- $placeholder = ( ! empty( $args[ $property . '_placeholder' ] ) ) ? ' placeholder="' . $args[ $property . '_placeholder' ] . '"' : '';
123	96
	97	+ $placeholder = ( ! empty( $args[ $property . '_placeholder' ] ) ) ? ' placeholder="' . esc_attr( $args[ $property . '_placeholder' ] ) . '"' : '';
	98	+
124	99	echo '<div class="darkify--input">';
125		- echo ( ! empty( $args[ $property . '_icon' ] ) ) ? '<span class="darkify--label darkify--icon">' . wp_kses_post( $args[ $property . '_icon' ] ) . '</span>' : '';
126		- echo '<div class="darkify--title">width</div>';
127		- echo '<input type="number" name="' . esc_attr( $this->field_name( '[' . $property . ']' ) ) . '" value="' . esc_attr( $value[ $property ] ) . '"' . wp_kses_post( $placeholder ) . ' class="darkify-number darkify--is-unit" />';
128		- echo ( ! empty( $args['unit'] ) ) ? '<span class="darkify--label darkify--unit">' . esc_html( $args['unit'] ) . '</span>' : '';
	100	+ echo ( ! empty( $args[ $property . '_icon' ] ) ) ? '<span class="darkify--label darkify--icon">' . wp_kses_post($args[ $property . '_icon' ]) . '</span>' : '';
	101	+ echo '<input type="number" name="' . esc_attr( $this->field_name( '[' . $property . ']' ) ) . '" value="' . esc_attr( $value[ $property ] ) . '"' . wp_kses_post($placeholder) . ' class="darkify-input-number darkify--is-unit" step="any" />';
	102	+ echo ( ! empty( $args['unit'] ) ) ? '<span class="darkify--label darkify--unit">' . esc_attr( $args['unit'] ) . '</span>' : '';
129	103	echo '</div>';
130	104
131	105	}
132	106	}
		@@ -132,13 +106,12 @@
132	106	}
133	107
134	108	if ( ! empty( $args['style'] ) ) {
135	109	echo '<div class="darkify--input">';
136		- echo '<div class="darkify--title">' . esc_html__( 'Style', 'darkify' ) . '</div>';
137	110	echo '<select name="' . esc_attr( $this->field_name( '[style]' ) ) . '">';
138	111	foreach ( $border_props as $border_prop_key => $border_prop_value ) {
139	112	$selected = ( $value['style'] === $border_prop_key ) ? ' selected' : '';
140		- echo '<option value="' . esc_attr( $border_prop_key ) . '"' . esc_attr( $selected ) . '>' . esc_html( $border_prop_value ) . '</option>';
	113	+ echo '<option value="' . esc_attr( $border_prop_key ) . '"' . esc_attr( $selected ) . '>' . esc_attr( $border_prop_value ) . '</option>';
141	114	}
142	115	echo '</select>';
143	116	echo '</div>';
144	117	}
		@@ -143,52 +116,21 @@
143	116	echo '</div>';
144	117	}
145	118
146	119	echo '</div>';
	120	+
147	121	if ( ! empty( $args['color'] ) ) {
148		- $default_color_attr = ( ! empty( $default_value['color'] ) ) ? ' data-default-color="' . $default_value['color'] . '"' : '';
149		- echo '<div class="darkify--left darkify-field-color">';
150		- echo '<div class="darkify--title">' . esc_html__( 'Light Color', 'darkify' ) . '</div>';
151		- echo '<input type="text" name="' . esc_attr( $this->field_name( '[color]' ) ) . '" value="' . esc_attr( $value['color'] ) . '" class="darkify-color"' . wp_kses_post( $default_color_attr ) . ' />';
	122	+ $default_color_attr = ( ! empty( $default_value['color'] ) ) ? ' data-default-color="' . esc_attr( $default_value['color'] ) . '"' : '';
	123	+ echo '<div class="darkify--color">';
	124	+ echo '<div class="darkify-field-color">';
	125	+ echo '<input type="text" name="' . esc_attr( $this->field_name( '[color]' ) ) . '" value="' . esc_attr( $value['color'] ) . '" class="darkify-color"' . wp_kses_post($default_color_attr) . ' />';
152	126	echo '</div>';
153		- }
154		- if ( ! empty( $args['color2'] ) ) {
155		- $default_color_attr = ( ! empty( $default_value['color2'] ) ) ? ' data-default-color="' . $default_value['color'] . '"' : '';
156		- echo '<div class="darkify--left darkify-field-color">';
157		- echo '<div class="darkify--title">' . esc_html__( 'Active', 'darkify' ) . '</div>';
158		- echo '<input type="text" name="' . esc_attr( $this->field_name( '[color2]' ) ) . '" value="' . esc_attr( $value['color2'] ) . '" class="darkify-color"' . wp_kses_post( $default_color_attr ) . ' />';
159	127	echo '</div>';
160	128	}
161		- if ( ! empty( $args['color3'] ) ) {
162		- $default_color_attr = ( ! empty( $default_value['color3'] ) ) ? ' data-default-color="' . $default_value['color3'] . '"' : '';
163		- echo '<div class="darkify--left darkify-field-color">';
164		- echo '<div class="darkify--title">' . esc_html__( 'Dark Color', 'darkify' ) . '</div>';
165		- echo '<input type="text" name="' . esc_attr( $this->field_name( '[color3]' ) ) . '" value="' . esc_attr( $value['color3'] ) . '" class="darkify-color"' . wp_kses_post( $default_color_attr ) . ' />';
166		- echo '</div>';
167		- }
168		- if ( ! empty( $args['radius'] ) ) {
169	129
170		- $placeholder = ( ! empty( $args['all_placeholder'] ) ) ? ' placeholder="' . $args['all_placeholder'] . '"' : '';
171		- echo '<div class="darkify--input">';
172		- echo '<div class="darkify--title">' . esc_html__( 'Radius', 'darkify' ) . '</div>';
173		- echo ( ! empty( $args['all_icon'] ) ) ? '<span class="darkify--label darkify--icon">' . wp_kses_post( $args['radius_icon'] ) . '</span>' : '';
174		-
175		- echo '<input type="number" name="' . esc_attr( $this->field_name( '[radius]' ) ) . '" value="' . esc_attr( $value['radius'] ) . '"' . wp_kses_post( $placeholder ) . ' class="darkify-number darkify--is-unit" />';
176		- echo ( ! empty( $args['unit'] ) ) ? '<span class="darkify--label darkify--unit">' . esc_html( $args['unit'] ) . '</span>' : '';
177		- echo '</div>';
178		-
179		- }
180		- echo '<div class="clear"></div>';
181		-
182	130	echo wp_kses_post( $this->field_after() );
183		-
184	131	}
185	132
186		- /**
187		- * Output
188		- *
189		- * @return statement
190		- */
191	133	public function output() {
192	134
193	135	$output = '';
194	136	$unit = ( ! empty( $this->value['unit'] ) ) ? $this->value['unit'] : 'px';
		@@ -194,34 +136,34 @@
194	136	$unit = ( ! empty( $this->value['unit'] ) ) ? $this->value['unit'] : 'px';
195	137	$important = ( ! empty( $this->field['output_important'] ) ) ? '!important' : '';
196	138	$element = ( is_array( $this->field['output'] ) ) ? join( ',', $this->field['output'] ) : $this->field['output'];
197	139
198		- // properties.
199		- $top = ( isset( $this->value['top'] ) && '' !== $this->value['top'] ) ? $this->value['top'] : '';
200		- $right = ( isset( $this->value['right'] ) && '' !== $this->value['right'] ) ? $this->value['right'] : '';
201		- $bottom = ( isset( $this->value['bottom'] ) && '' !== $this->value['bottom'] ) ? $this->value['bottom'] : '';
202		- $left = ( isset( $this->value['left'] ) && '' !== $this->value['left'] ) ? $this->value['left'] : '';
203		- $style = ( isset( $this->value['style'] ) && '' !== $this->value['style'] ) ? $this->value['style'] : '';
204		- $color = ( isset( $this->value['color'] ) && '' !== $this->value['color'] ) ? $this->value['color'] : '';
205		- $all = ( isset( $this->value['all'] ) && '' !== $this->value['all'] ) ? $this->value['all'] : '';
	140	+ // properties
	141	+ $top = ( isset( $this->value['top'] ) && $this->value['top'] !== '' ) ? $this->value['top'] : '';
	142	+ $right = ( isset( $this->value['right'] ) && $this->value['right'] !== '' ) ? $this->value['right'] : '';
	143	+ $bottom = ( isset( $this->value['bottom'] ) && $this->value['bottom'] !== '' ) ? $this->value['bottom'] : '';
	144	+ $left = ( isset( $this->value['left'] ) && $this->value['left'] !== '' ) ? $this->value['left'] : '';
	145	+ $style = ( isset( $this->value['style'] ) && $this->value['style'] !== '' ) ? $this->value['style'] : '';
	146	+ $color = ( isset( $this->value['color'] ) && $this->value['color'] !== '' ) ? $this->value['color'] : '';
	147	+ $all = ( isset( $this->value['all'] ) && $this->value['all'] !== '' ) ? $this->value['all'] : '';
206	148
207		- if ( ! empty( $this->field['all'] ) && ( '' !== $all || '' !== $color ) ) {
	149	+ if ( ! empty( $this->field['all'] ) && ( $all !== '' || $color !== '' ) ) {
208	150
209	151	$output = $element . '{';
210		- $output .= ( '' !== $all ) ? 'border-width:' . $all . $unit . $important . ';' : '';
211		- $output .= ( '' !== $color ) ? 'border-color:' . $color . $important . ';' : '';
212		- $output .= ( '' !== $style ) ? 'border-style:' . $style . $important . ';' : '';
	152	+ $output .= ( $all !== '' ) ? 'border-width:' . $all . $unit . $important . ';' : '';
	153	+ $output .= ( $color !== '' ) ? 'border-color:' . $color . $important . ';' : '';
	154	+ $output .= ( $style !== '' ) ? 'border-style:' . $style . $important . ';' : '';
213	155	$output .= '}';
214	156
215		- } elseif ( '' !== $top || '' !== $right || '' !== $bottom || '' !== $left || '' !== $color ) {
	157	+ } elseif ( $top !== '' || $right !== '' || $bottom !== '' || $left !== '' || $color !== '' ) {
216	158
217	159	$output = $element . '{';
218		- $output .= ( '' !== $top ) ? 'border-top-width:' . $top . $unit . $important . ';' : '';
219		- $output .= ( '' !== $right ) ? 'border-right-width:' . $right . $unit . $important . ';' : '';
220		- $output .= ( '' !== $bottom ) ? 'border-bottom-width:' . $bottom . $unit . $important . ';' : '';
221		- $output .= ( '' !== $left ) ? 'border-left-width:' . $left . $unit . $important . ';' : '';
222		- $output .= ( '' !== $color ) ? 'border-color:' . $color . $important . ';' : '';
223		- $output .= ( '' !== $style ) ? 'border-style:' . $style . $important . ';' : '';
	160	+ $output .= ( $top !== '' ) ? 'border-top-width:' . $top . $unit . $important . ';' : '';
	161	+ $output .= ( $right !== '' ) ? 'border-right-width:' . $right . $unit . $important . ';' : '';
	162	+ $output .= ( $bottom !== '' ) ? 'border-bottom-width:' . $bottom . $unit . $important . ';' : '';
	163	+ $output .= ( $left !== '' ) ? 'border-left-width:' . $left . $unit . $important . ';' : '';
	164	+ $output .= ( $color !== '' ) ? 'border-color:' . $color . $important . ';' : '';
	165	+ $output .= ( $style !== '' ) ? 'border-style:' . $style . $important . ';' : '';
224	166	$output .= '}';
225	167
226	168	}
227	169
		@@ -227,9 +169,7 @@
227	169
228	170	$this->parent->output_css .= $output;
229	171
230	172	return $output;
231		-
232	173	}
233		-
234	174	}
235	175	}