Skip to content

Commit 0751fb2

Browse files
aristatharistath
committed
gradient control WIP
1 parent 4235a85 commit 0751fb2

7 files changed

+159
-38
lines changed

‎controls/gradient/class-kirki-control-gradient.php

+31-12
Original file line numberDiff line numberDiff line change
@@ -178,23 +178,42 @@ protected function content_template() {
178178
<span class="description customize-control-description">{{{ data.description }}}</span>
179179
<# } #>
180180
</label>
181-
<div class="gradient-preview"></div>
182-
<div class="angle">
183-
<h4><?php esc_attr_e( 'Angle', 'kirki' ); ?></h4>
184-
<input type="range" class="angle gradient-{{ data.id }}" value="{{ data.value.angle }}" min="-90" max="90">
181+
<div class="gradient-preview" style="width:{{ data.choices.preview.width }};height:{{ data.choices.preview.height }}"></div>
182+
<div class="global">
183+
<div class="mode">
184+
<h4><?php esc_attr_e( 'Mode', 'kirki' ); ?></h4>
185+
<input class="switch-input screen-reader-text" type="radio" value="linear" name="_customize-gradient-{{{ data.id }}}" id="{{ data.id }}linear" <# if ( ! _.isUndefined( data.value.mode ) && 'linear' === data.value.mode ) { #> checked="checked" <# } #>>
186+
<label class="switch-label switch-label-<# if ( ! _.isUndefined( data.value.mode ) && 'linear' === data.value.mode ) { #>on <# } else { #>off<# } #>" for="{{ data.id }}linear"><span class="dashicons dashicons-minus"></span><span class="screen-reader-text"><?php esc_attr_e( 'Linear', 'kirki' ); ?></span></label>
187+
</input>
188+
<input class="switch-input screen-reader-text" type="radio" value="radial" name="_customize-gradient-{{{ data.id }}}" id="{{ data.id }}radial" <# if ( ! _.isUndefined( data.value.mode ) && 'radial' === data.value.mode ) { #> checked="checked" <# } #>>
189+
<label class="switch-label switch-label-<# if ( ! _.isUndefined( data.value.mode ) && 'radial' === data.value.mode ) { #>on <# } else { #>off<# } #>" for="{{ data.id }}radial"><span class="dashicons dashicons-marker"></span><span class="screen-reader-text"><?php esc_attr_e( 'Radial', 'kirki' ); ?></span></label>
190+
</input>
191+
</div>
192+
<div class="angle">
193+
<h4><?php esc_attr_e( 'Angle', 'kirki' ); ?></h4>
194+
<input type="range" class="angle gradient-{{ data.id }}" value="{{ data.value.angle }}" min="-90" max="90">
195+
</div>
185196
</div>
186197
<div class="colors">
187198
<div class="color-start">
188-
<h4><?php esc_attr_e( 'Start Color', 'kirki' ); ?></h4>
189-
<input type="text" {{{ data.inputAttrs }}} data-palette="{{ data.palette }}" data-default-color="{{ data.default.start.color }}" data-alpha="{{ data.choices['alpha'] }}" value="{{ data.value.start.color }}" class="kirki-gradient-control-start color-picker" />
190-
<h4><?php esc_attr_e( 'Color Stop', 'kirki' ); ?></h4>
191-
<input type="range" class="position gradient-{{ data.id }}-start" value="{{ data.value.start.position }}" min="0" max="100">
199+
<div class="color">
200+
<h4><?php esc_attr_e( 'Start Color', 'kirki' ); ?></h4>
201+
<input type="text" {{{ data.inputAttrs }}} data-palette="{{ data.palette }}" data-default-color="{{ data.default.start.color }}" data-alpha="{{ data.choices['alpha'] }}" value="{{ data.value.start.color }}" class="kirki-gradient-control-start color-picker" />
202+
</div>
203+
<div class="position">
204+
<h4><?php esc_attr_e( 'Color Stop', 'kirki' ); ?></h4>
205+
<input type="range" class="position gradient-{{ data.id }}-start" value="{{ data.value.start.position }}" min="0" max="100">
206+
</div>
192207
</div>
193208
<div class="color-end">
194-
<h4><?php esc_attr_e( 'End Color', 'kirki' ); ?></h4>
195-
<input type="text" {{{ data.inputAttrs }}} data-palette="{{ data.palette }}" data-default-color="{{ data.default.end.color }}" data-alpha="{{ data.choices['alpha'] }}" value="{{ data.value.end.color }}" class="kirki-gradient-control-end color-picker" />
196-
<h4><?php esc_attr_e( 'Color Stop', 'kirki' ); ?></h4>
197-
<input type="range" class="position gradient-{{ data.id }}-end" value="{{ data.value.end.position }}" min="0" max="100">
209+
<div class="color">
210+
<h4><?php esc_attr_e( 'End Color', 'kirki' ); ?></h4>
211+
<input type="text" {{{ data.inputAttrs }}} data-palette="{{ data.palette }}" data-default-color="{{ data.default.end.color }}" data-alpha="{{ data.choices['alpha'] }}" value="{{ data.value.end.color }}" class="kirki-gradient-control-end color-picker" />
212+
</div>
213+
<div class="position">
214+
<h4><?php esc_attr_e( 'Color Stop', 'kirki' ); ?></h4>
215+
<input type="range" class="position gradient-{{ data.id }}-end" value="{{ data.value.end.position }}" min="0" max="100">
216+
</div>
198217
</div>
199218
</div>
200219
<?php

‎controls/gradient/gradient.css

+19-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎controls/gradient/gradient.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎controls/gradient/gradient.js

+65-21
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,16 @@ wp.customize.controlConstructor['kirki-gradient'] = wp.customize.Control.extend(
1919

2020
'use strict';
2121

22-
var control = this,
23-
value = control.getValue(),
24-
pickerStart = control.container.find( '.kirki-gradient-control-start' ),
25-
pickerEnd = control.container.find( '.kirki-gradient-control-end' ),
26-
angleElement = jQuery( '.angle.gradient-' + control.id );
22+
var control = this,
23+
value = control.getValue(),
24+
pickerStart = control.container.find( '.kirki-gradient-control-start' ),
25+
pickerEnd = control.container.find( '.kirki-gradient-control-end' ),
26+
angleElement = jQuery( '.angle.gradient-' + control.id ),
27+
throttledAngleChange,
28+
throttledPositionStartChange,
29+
throttledPositionEndChange,
30+
startPositionElement = jQuery( '.position.gradient-' + control.id + '-start' ),
31+
endPositionElement = jQuery( '.position.gradient-' + control.id + '-end' );
2732

2833
// If we have defined any extra choices, make sure they are passed-on to Iris.
2934
if ( ! _.isUndefined( control.params.choices.iris ) ) {
@@ -56,30 +61,62 @@ wp.customize.controlConstructor['kirki-gradient'] = wp.customize.Control.extend(
5661
});
5762
});
5863

59-
// Angle (-90° - 90°).
60-
angleElement.on( 'change', function() {
64+
jQuery( control.container.find( '.global .angle' ) ).show();
65+
if ( ! _.isUndefined( value.mode && 'radial' === value.mode ) ) {
66+
jQuery( control.container.find( '.global .angle' ) ).hide();
67+
}
68+
69+
// Mode (linear/radial).
70+
jQuery( control.container.find( '.mode .switch-input' ) ).on( 'click input', function() {
71+
value.mode = jQuery( this ).val();
72+
control.updatePreview( value );
73+
control.setValue( value );
74+
jQuery( control.container.find( '.global .angle' ) ).show();
75+
if ( 'radial' === value.mode ) {
76+
jQuery( control.container.find( '.global .angle' ) ).hide();
77+
}
78+
});
79+
80+
// Angle (-90° -to 90°).
81+
throttledAngleChange = _.throttle( function() {
6182
value.angle = angleElement.val();
6283

6384
// Update the preview.
6485
control.updatePreview( value );
6586

6687
// Set the value.
6788
control.setValue( value );
89+
}, 20 );
90+
angleElement.on( 'input change oninput', function() {
91+
throttledAngleChange();
6892
});
6993

70-
// Position( 0% - 100%);
71-
_.each( ['start', 'end'], function( index ) {
72-
var positionElement = jQuery( '.position.gradient-' + control.id + '-' + index );
94+
// Start Position( 0% - 100%);
95+
throttledPositionStartChange = _.throttle( function() {
96+
value.start.position = startPositionElement.val();
7397

74-
positionElement.on( 'change', function() {
75-
value[ index ].position = positionElement.val();
98+
// Update the preview.
99+
control.updatePreview( value );
76100

77-
// Update the preview.
78-
control.updatePreview( value );
101+
// Set the value.
102+
control.setValue( value );
103+
}, 20 );
104+
startPositionElement.on( 'input change oninput', function() {
105+
throttledPositionStartChange();
106+
});
79107

80-
// Set the value.
81-
control.setValue( value );
82-
});
108+
// End Position( 0% - 100%);
109+
throttledPositionEndChange = _.throttle( function() {
110+
value.end.position = endPositionElement.val();
111+
112+
// Update the preview.
113+
control.updatePreview( value );
114+
115+
// Set the value.
116+
control.setValue( value );
117+
}, 20 );
118+
endPositionElement.on( 'input change oninput', function() {
119+
throttledPositionEndChange();
83120
});
84121
},
85122

@@ -115,10 +152,17 @@ wp.customize.controlConstructor['kirki-gradient'] = wp.customize.Control.extend(
115152
var control = this,
116153
previewArea = control.container.find( '.gradient-preview' );
117154

118-
jQuery( previewArea ).css(
119-
'background',
120-
'linear-gradient(' + value.angle + 'deg, ' + value.start.color + ' ' + value.start.position + '%,' + value.end.color + ' ' + value.end.position + '%)'
121-
);
155+
if ( ! _.isUndefined( value.mode ) && 'radial' === value.mode ) {
156+
jQuery( previewArea ).css(
157+
'background',
158+
'radial-gradient(ellipse at center, ' + value.start.color + ' ' + value.start.position + '%,' + value.end.color + ' ' + value.end.position + '%)'
159+
);
160+
} else {
161+
jQuery( previewArea ).css(
162+
'background',
163+
'linear-gradient(' + value.angle + 'deg, ' + value.start.color + ' ' + value.start.position + '%,' + value.end.color + ' ' + value.end.position + '%)'
164+
);
165+
}
122166
},
123167

124168
/**

‎controls/gradient/gradient.scss

+34
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,50 @@
66
width: 100%;
77
height: 100px;
88
margin-bottom: 1em;
9+
border-radius: 3px;
910
}
1011

1112
h4 {
1213
margin: 0.5em 0;
1314
font-weight: 400;
1415
}
1516

17+
.global {
18+
display: flex;
19+
flex-wrap: wrap;
20+
21+
.mode {
22+
display: flex;
23+
flex-wrap: wrap;
24+
25+
h4 {
26+
width: 100%;
27+
}
28+
29+
.switch-label {
30+
color: #555;
31+
margin: 0;
32+
text-align: center;
33+
flex-grow: 1;
34+
35+
&:last-child {}
36+
}
37+
38+
.switch-input {
39+
&:checked {
40+
+ .switch-label {
41+
color: #3498DB;
42+
}
43+
}
44+
}
45+
}
46+
}
47+
1648
.colors {
1749
.color-end,
1850
.color-start {
51+
display: flex;
52+
flex-wrap: wrap;
1953
box-shadow: inset 0 0 4px 1px rgba(0,0,0,.1);
2054
padding: 10px;
2155
border-radius: 3px;

‎field/class-kirki-field-gradient.php

+8-2
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,11 @@ protected function set_choices() {
3737
}
3838

3939
$defaults = array(
40-
'alpha' => true,
41-
'direction' => 'top-to-bottom',
40+
'alpha' => true,
41+
'preview' => array(
42+
'width' => '100%',
43+
'height' => '60px'
44+
),
4245
);
4346
$this->choices = wp_parse_args( $this->choices, $defaults );
4447

@@ -67,6 +70,9 @@ public function sanitize( $value = null ) {
6770
// Make sure value in an array.
6871
$value = ( ! is_array( $value ) ) ? array() : $value;
6972

73+
if ( ! isset( $value['mode'] ) || 'linear' !== $value['mode'] || 'radial' !== $value['mode'] ) {
74+
$value['mode'] = 'linear';
75+
}
7076
foreach ( array( 'start', 'end' ) as $context ) {
7177

7278
// Make sure value is array.

‎modules/webfonts/webfonts.php

+1-1
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)