Kirki - Version 3.0.26

Version Description

Download this release

Release Info

Developer aristath
Plugin Icon 128x128 Kirki
Version 3.0.26
Comparing to
See all releases

Code changes from version 3.0.25 to 3.0.26

Files changed (64) hide show
  1. controls/class-kirki-controls.php +1 -0
  2. controls/css/styles.css +3 -1
  3. controls/js/script.js +584 -479
  4. controls/js/script.min.js +1 -1
  5. controls/php/class-kirki-control-base.php +20 -7
  6. controls/php/class-kirki-control-checkbox.php +57 -0
  7. controls/php/class-kirki-control-dimension.php +1 -1
  8. controls/php/class-kirki-control-multicheck.php +1 -1
  9. controls/php/class-kirki-control-radio-buttonset.php +1 -1
  10. controls/php/class-kirki-control-repeater.php +19 -8
  11. controls/php/class-kirki-control-typography.php +13 -11
  12. controls/views/number.php +37 -0
  13. core/class-kirki-helper.php +37 -29
  14. core/class-kirki-init.php +4 -1
  15. core/class-kirki-modules.php +2 -0
  16. core/class-kirki-sanitize-values.php +2 -2
  17. core/class-kirki.php +5 -0
  18. field/class-kirki-field-dimension.php +1 -1
  19. field/class-kirki-field-dimensions.php +1 -1
  20. field/class-kirki-field-typography.php +8 -8
  21. kirki.php +1 -1
  22. modules/css/class-kirki-css-to-file.php +3 -1
  23. modules/css/class-kirki-modules-css.php +25 -1
  24. modules/css/class-kirki-output.php +3 -1
  25. modules/css/field/class-kirki-output-field-background.php +6 -0
  26. modules/css/field/class-kirki-output-field-dimensions.php +1 -1
  27. modules/css/property/class-kirki-output-property-background-position.php +2 -2
  28. modules/custom-sections/sections.js +31 -31
  29. modules/customizer-branding/branding.js +1 -1
  30. modules/field-dependencies/field-dependencies.js +117 -60
  31. modules/icons/icons.js +1 -1
  32. modules/postmessage/class-kirki-modules-postmessage.php +1 -1
  33. modules/preset/class-kirki-modules-preset.php +68 -0
  34. modules/preset/preset.js +32 -0
  35. modules/tooltips/tooltip.js +7 -7
  36. modules/webfont-loader/class-kirki-modules-webfont-loader.php +83 -0
  37. modules/webfont-loader/vendor-typekit/src/closure.js +2 -0
  38. modules/webfont-loader/vendor-typekit/src/core/cssclassname.js +46 -0
  39. modules/webfont-loader/vendor-typekit/src/core/domhelper.js +405 -0
  40. modules/webfont-loader/vendor-typekit/src/core/eventdispatcher.js +195 -0
  41. modules/webfont-loader/vendor-typekit/src/core/font.js +140 -0
  42. modules/webfont-loader/vendor-typekit/src/core/fontmodule.js +16 -0
  43. modules/webfont-loader/vendor-typekit/src/core/fontmoduleloader.js +47 -0
  44. modules/webfont-loader/vendor-typekit/src/core/fontruler.js +60 -0
  45. modules/webfont-loader/vendor-typekit/src/core/fontwatcher.js +171 -0
  46. modules/webfont-loader/vendor-typekit/src/core/fontwatchrunner.js +249 -0
  47. modules/webfont-loader/vendor-typekit/src/core/initialize.js +97 -0
  48. modules/webfont-loader/vendor-typekit/src/core/nativefontwatchrunner.js +69 -0
  49. modules/webfont-loader/vendor-typekit/src/core/stylesheetwaiter.js +48 -0
  50. modules/webfont-loader/vendor-typekit/src/core/webfont.js +97 -0
  51. modules/webfont-loader/vendor-typekit/src/modules.yml +34 -0
  52. modules/webfont-loader/vendor-typekit/src/modules/custom.js +63 -0
  53. modules/webfont-loader/vendor-typekit/src/modules/fontdeck.js +66 -0
  54. modules/webfont-loader/vendor-typekit/src/modules/google/fontapiparser.js +181 -0
  55. modules/webfont-loader/vendor-typekit/src/modules/google/fontapiurlbuilder.js +77 -0
  56. modules/webfont-loader/vendor-typekit/src/modules/google/googlefontapi.js +54 -0
  57. modules/webfont-loader/vendor-typekit/src/modules/monotype.js +110 -0
  58. modules/webfont-loader/vendor-typekit/src/modules/typekit.js +73 -0
  59. modules/webfont-loader/vendor-typekit/webfontloader.js +17 -0
  60. modules/webfonts/class-kirki-fonts-google.php +11 -11
  61. modules/webfonts/class-kirki-modules-webfonts-async.php +30 -10
  62. modules/webfonts/webfont-names.json +1 -0
  63. modules/webfonts/webfonts.json +1 -1
  64. readme.txt +28 -1
controls/class-kirki-controls.php CHANGED
@@ -25,6 +25,7 @@ class Kirki_Controls {
25
'code',
26
'color',
27
'generic',
28
'radio',
29
'select',
30
'textarea',
25
'code',
26
'color',
27
'generic',
28
+ 'number',
29
'radio',
30
'select',
31
'textarea',
controls/css/styles.css CHANGED
@@ -62,7 +62,7 @@
62
position: relative;
63
left: -25%;
64
top: -25%;
65
- z-index: 99; }
66
.customize-control-kirki-color-palette .colors-wrapper.with-margin label {
67
margin: 3px; }
68
.customize-control-kirki-color-palette .colors-wrapper input {
@@ -73,6 +73,8 @@
73
74
.customize-control-kirki-color input[data-type="hue"] + .iris-strip-horiz .iris-slider {
75
background-image: -webkit-linear-gradient(left, red, #ff7f00, yellow, #80ff00, lime, #00ff80, cyan, #007fff, blue, #7f00ff, magenta, #ff0080, red) !important; }
76
77
.customize-control-kirki-dashicons {
78
position: relative; }
62
position: relative;
63
left: -25%;
64
top: -25%;
65
+ z-index: 1; }
66
.customize-control-kirki-color-palette .colors-wrapper.with-margin label {
67
margin: 3px; }
68
.customize-control-kirki-color-palette .colors-wrapper input {
73
74
.customize-control-kirki-color input[data-type="hue"] + .iris-strip-horiz .iris-slider {
75
background-image: -webkit-linear-gradient(left, red, #ff7f00, yellow, #80ff00, lime, #00ff80, cyan, #007fff, blue, #7f00ff, magenta, #ff0080, red) !important; }
76
+ .customize-control-kirki-color .iris-picker .iris-square-handle {
77
+ z-index: 8; }
78
79
.customize-control-kirki-dashicons {
80
position: relative; }
controls/js/script.js CHANGED
@@ -1,7 +1,7 @@
1
/* jshint -W079 */
2
/* jshint unused:false */
3
if ( _.isUndefined( window.kirkiSetSettingValue ) ) {
4
- var kirkiSetSettingValue = { // jscs:ignore requireVarDeclFirst
5
6
/**
7
* Set the value of the control.
@@ -18,8 +18,8 @@ if ( _.isUndefined( window.kirkiSetSettingValue ) ) {
18
* and determine if we need to do any further work based on those.
19
*/
20
var $this = this,
21
- subControl = wp.customize.settings.controls[ setting ],
22
- valueJSON;
23
24
// If the control doesn't exist then return.
25
if ( _.isUndefined( subControl ) ) {
@@ -37,14 +37,14 @@ if ( _.isUndefined( window.kirkiSetSettingValue ) ) {
37
$this.setColorPicker( $this.findElement( setting, '.kirki-color-control' ), value['background-color'] );
38
}
39
$this.findElement( setting, '.placeholder, .thumbnail' ).removeClass().addClass( 'placeholder' ).html( 'No file selected' );
40
- _.each( ['background-repeat', 'background-position'], function( subVal ) {
41
if ( ! _.isUndefined( value[ subVal ] ) ) {
42
$this.setSelectWoo( $this.findElement( setting, '.' + subVal + ' select' ), value[ subVal ] );
43
}
44
- });
45
- _.each( ['background-size', 'background-attachment'], function( subVal ) {
46
jQuery( $this.findElement( setting, '.' + subVal + ' input[value="' + value + '"]' ) ).prop( 'checked', true );
47
- });
48
valueJSON = JSON.stringify( value ).replace( /'/g, '&#39' );
49
jQuery( $this.findElement( setting, '.background-hidden-value' ).attr( 'value', valueJSON ) ).trigger( 'change' );
50
break;
@@ -86,16 +86,16 @@ if ( _.isUndefined( window.kirkiSetSettingValue ) ) {
86
case 'kirki-multicheck':
87
$this.findElement( setting, 'input' ).each( function() {
88
jQuery( this ).prop( 'checked', false );
89
- });
90
_.each( value, function( subValue, i ) {
91
jQuery( $this.findElement( setting, 'input[value="' + value[ i ] + '"]' ) ).prop( 'checked', true );
92
- });
93
break;
94
95
case 'kirki-multicolor':
96
_.each( value, function( subVal, index ) {
97
$this.setColorPicker( $this.findElement( setting, '.multicolor-index-' + index ), subVal );
98
- });
99
break;
100
101
case 'kirki-radio-buttonset':
@@ -108,16 +108,16 @@ if ( _.isUndefined( window.kirkiSetSettingValue ) ) {
108
break;
109
110
case 'kirki-typography':
111
- _.each( ['font-family', 'variant'], function( subVal ) {
112
if ( ! _.isUndefined( value[ subVal ] ) ) {
113
$this.setSelectWoo( $this.findElement( setting, '.' + subVal + ' select' ), value[ subVal ] );
114
}
115
- });
116
- _.each( ['font-size', 'line-height', 'letter-spacing', 'word-spacing'], function( subVal ) {
117
if ( ! _.isUndefined( value[ subVal ] ) ) {
118
jQuery( $this.findElement( setting, '.' + subVal + ' input' ) ).prop( 'value', value[ subVal ] );
119
}
120
- });
121
122
if ( ! _.isUndefined( value.color ) ) {
123
$this.setColorPicker( $this.findElement( setting, '.kirki-color-control' ), value.color );
@@ -129,7 +129,7 @@ if ( _.isUndefined( window.kirkiSetSettingValue ) ) {
129
case 'kirki-dimensions':
130
_.each( value, function( subValue, id ) {
131
jQuery( $this.findElement( setting, '.' + id + ' input' ) ).prop( 'value', subValue );
132
- });
133
break;
134
135
case 'kirki-repeater':
@@ -202,7 +202,7 @@ if ( _.isUndefined( window.kirkiSetSettingValue ) ) {
202
*/
203
setValue: function( setting, value, timeout ) {
204
timeout = ( _.isUndefined( timeout ) ) ? 100 : parseInt( timeout, 10 );
205
- wp.customize.instance( setting ).set({});
206
setTimeout( function() {
207
wp.customize.instance( setting ).set( value );
208
}, timeout );
@@ -295,7 +295,7 @@ kirki = jQuery.extend( kirki, {
295
description: control.params.description,
296
'data-id': control.id,
297
inputAttrs: control.params.inputAttrs,
298
- 'default': control.params['default'],
299
value: kirki.setting.get( control.id ),
300
choices: control.params.choices
301
} ) );
@@ -355,7 +355,7 @@ kirki = jQuery.extend( kirki, {
355
mode: control.params.mode,
356
inputAttrs: control.params.inputAttrs,
357
'data-palette': control.params.palette,
358
- 'data-default-color': control.params['default'],
359
'data-alpha': control.params.choices.alpha,
360
value: kirki.setting.get( control.id )
361
} ) );
@@ -416,8 +416,8 @@ kirki = jQuery.extend( kirki, {
416
inputAttrs: control.params.inputAttrs,
417
choices: control.params.choices,
418
value: kirki.setting.get( control.id )
419
- },
420
- template;
421
422
if ( ! _.isUndefined( control.params ) && ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.element ) && 'textarea' === control.params.choices.element ) {
423
template = wp.template( 'kirki-input-textarea' );
@@ -429,6 +429,60 @@ kirki = jQuery.extend( kirki, {
429
}
430
},
431
432
'kirki-select': {
433
434
/**
@@ -474,7 +528,7 @@ kirki = jQuery.extend( kirki, {
474
value: kirki.setting.get( control.id ),
475
multiple: control.params.multiple || 1,
476
placeholder: control.params.placeholder
477
- } ) );
478
}
479
}
480
}
@@ -482,6 +536,7 @@ kirki = jQuery.extend( kirki, {
482
/* global kirkiL10n */
483
var kirki = kirki || {};
484
kirki = jQuery.extend( kirki, {
485
/**
486
* An object containing definitions for input fields.
487
*
@@ -510,7 +565,7 @@ kirki = jQuery.extend( kirki, {
510
// Save the value
511
input.on( 'change keyup paste click', function() {
512
kirki.setting.set( control.id, jQuery( this ).val() );
513
- });
514
}
515
},
516
@@ -535,7 +590,7 @@ kirki = jQuery.extend( kirki, {
535
*/
536
init: function( control ) {
537
var picker = jQuery( '.kirki-color-control[data-id="' + control.id + '"]' ),
538
- clear;
539
540
control.choices = control.choices || {};
541
if ( _.isEmpty( control.choices ) && control.params.choices ) {
@@ -553,12 +608,12 @@ kirki = jQuery.extend( kirki, {
553
if ( clear.length ) {
554
clear.click( function() {
555
kirki.setting.set( control.id, '' );
556
- });
557
}
558
}, 200 );
559
560
// Saves our settings to the WP API
561
- picker.wpColorPicker({
562
change: function() {
563
564
// Small hack: the picker needs a small delay
@@ -566,7 +621,7 @@ kirki = jQuery.extend( kirki, {
566
kirki.setting.set( control.id, picker.val() );
567
}, 20 );
568
}
569
- });
570
}
571
},
572
@@ -591,7 +646,7 @@ kirki = jQuery.extend( kirki, {
591
// Save the value
592
input.on( 'change keyup paste click', function() {
593
kirki.setting.set( control.id, jQuery( this ).val() );
594
- });
595
}
596
},
597
@@ -616,7 +671,7 @@ kirki = jQuery.extend( kirki, {
616
// Save the value
617
textarea.on( 'change keyup paste click', function() {
618
kirki.setting.set( control.id, jQuery( this ).val() );
619
- });
620
}
621
},
622
@@ -632,13 +687,13 @@ kirki = jQuery.extend( kirki, {
632
*/
633
init: function( control ) {
634
var element = jQuery( 'select[data-id="' + control.id + '"]' ),
635
- multiple = parseInt( element.data( 'multiple' ), 10 ),
636
- selectValue,
637
- selectWooOptions = {
638
escapeMarkup: function( markup ) {
639
return markup;
640
}
641
- };
642
if ( control.params.placeholder ) {
643
selectWooOptions.placeholder = control.params.placeholder;
644
selectWooOptions.allowClear = true;
@@ -651,10 +706,83 @@ kirki = jQuery.extend( kirki, {
651
selectValue = jQuery( this ).val();
652
selectValue = ( null === selectValue && 1 < multiple ) ? [] : selectValue;
653
kirki.setting.set( control.id, selectValue );
654
- });
655
}
656
},
657
658
image: {
659
660
/**
@@ -666,8 +794,8 @@ kirki = jQuery.extend( kirki, {
666
*/
667
getTemplate: function( data ) {
668
var html = '',
669
- saveAs = 'url',
670
- url;
671
672
data = _.defaults( data, {
673
label: '',
@@ -702,12 +830,12 @@ kirki = jQuery.extend( kirki, {
702
}
703
html += '<div class="actions">';
704
html += '<button class="button image-upload-remove-button' + ( '' === url ? ' hidden' : '' ) + '">' + kirkiL10n.remove + '</button>';
705
- if ( data['default'] && '' !== data['default'] ) {
706
html += '<button type="button" class="button image-default-button"';
707
- if ( data['default'] === data.value || ( ! _.isUndefined( data.value.url ) && data['default'] === data.value.url ) ) {
708
html += ' style="display:none;"';
709
}
710
- html += '>' + kirkiL10n['default'] + '</button>';
711
}
712
html += '<button type="button" class="button image-upload-button">' + kirkiL10n.selectFile + '</button>';
713
html += '</div></div>';
@@ -722,13 +850,14 @@ kirki = jQuery.extend( kirki, {
722
* @param {Object} control - The control object.
723
* @returns {null}
724
*/
725
- init: function( control ) { // jshint ignore:line
726
}
727
}
728
}
729
} );
730
var kirki = kirki || {};
731
kirki = jQuery.extend( kirki, {
732
/**
733
* An object containing definitions for settings.
734
*
@@ -749,9 +878,9 @@ kirki = jQuery.extend( kirki, {
749
*/
750
get: function( setting ) {
751
var parts = setting.split( '[' ),
752
- foundSetting = '',
753
- foundInStep = 0,
754
- currentVal = '';
755
756
_.each( parts, function( part, i ) {
757
part = part.replace( ']', '' );
@@ -772,7 +901,7 @@ kirki = jQuery.extend( kirki, {
772
currentVal = currentVal[ part ];
773
}
774
}
775
- });
776
777
return currentVal;
778
},
@@ -797,13 +926,13 @@ kirki = jQuery.extend( kirki, {
797
*/
798
set: function( element, value, key ) {
799
var setting,
800
- parts,
801
- currentNode = '',
802
- foundNode = '',
803
- subSettingObj = {},
804
- currentVal,
805
- subSetting,
806
- subSettingParts;
807
808
// Get the setting from the element.
809
setting = element;
@@ -820,7 +949,7 @@ kirki = jQuery.extend( kirki, {
820
return;
821
}
822
823
- parts = setting.split( '[' ),
824
825
// Find the setting we're using in the control using the customizer API.
826
_.each( parts, function( part, i ) {
@@ -882,6 +1011,7 @@ kirki = jQuery.extend( kirki, {
882
/* global ajaxurl */
883
var kirki = kirki || {};
884
kirki = jQuery.extend( kirki, {
885
/**
886
* A collection of utility methods.
887
*
@@ -955,7 +1085,7 @@ kirki = jQuery.extend( kirki, {
955
*/
956
getFont: function( family ) {
957
var self = this,
958
- fonts = self.getFonts();
959
960
if ( 'undefined' === typeof fonts[ family ] ) {
961
return false;
@@ -973,9 +1103,9 @@ kirki = jQuery.extend( kirki, {
973
*/
974
getFonts: function( order, category, number ) {
975
var self = this,
976
- ordered = {},
977
- categorized = {},
978
- plucked = {};
979
980
// Make sure order is correct.
981
order = order || 'alpha';
@@ -1025,7 +1155,7 @@ kirki = jQuery.extend( kirki, {
1025
*/
1026
getVariants: function( family ) {
1027
var self = this,
1028
- font = self.getFont( family );
1029
1030
// Early exit if font was not found.
1031
if ( ! font ) {
@@ -1098,8 +1228,8 @@ kirki = jQuery.extend( kirki, {
1098
* @since 3.0.17
1099
* @returns {Array}
1100
*/
1101
- getVariants: function( family ) { // jshint ignore: line
1102
- return ['regular', 'italic', '700', '700italic'];
1103
}
1104
},
1105
@@ -1131,6 +1261,39 @@ kirki = jQuery.extend( kirki, {
1131
}
1132
return false;
1133
}
1134
}
1135
}
1136
} );
@@ -1153,11 +1316,11 @@ kirki = jQuery.extend( kirki, {
1153
* @augments wp.customize.Control
1154
* @augments wp.customize.Class
1155
*/
1156
- wp.customize.kirkiDynamicControl = wp.customize.Control.extend({
1157
1158
initialize: function( id, options ) {
1159
var control = this,
1160
- args = options || {};
1161
1162
args.params = args.params || {};
1163
if ( ! args.params.type ) {
@@ -1184,7 +1347,7 @@ kirki = jQuery.extend( kirki, {
1184
*/
1185
_setUpSettingRootLinks: function() {
1186
var control = this,
1187
- nodes = control.container.find( '[data-customize-setting-link]' );
1188
1189
nodes.each( function() {
1190
var node = jQuery( this );
@@ -1206,7 +1369,7 @@ kirki = jQuery.extend( kirki, {
1206
*/
1207
_setUpSettingPropertyLinks: function() {
1208
var control = this,
1209
- nodes;
1210
1211
if ( ! control.setting ) {
1212
return;
@@ -1216,8 +1379,8 @@ kirki = jQuery.extend( kirki, {
1216
1217
nodes.each( function() {
1218
var node = jQuery( this ),
1219
- element,
1220
- propertyName = node.data( 'customizeSettingPropertyLink' );
1221
1222
element = new wp.customize.Element( node );
1223
control.propertyElements.push( element );
@@ -1267,7 +1430,7 @@ kirki = jQuery.extend( kirki, {
1267
*/
1268
embed: function() {
1269
var control = this,
1270
- sectionId = control.section();
1271
1272
if ( ! sectionId ) {
1273
return;
@@ -1331,42 +1494,14 @@ kirki = jQuery.extend( kirki, {
1331
this.container.on( 'change keyup paste click', 'input', function() {
1332
control.setting.set( jQuery( this ).val() );
1333
} );
1334
- },
1335
-
1336
- kirkiValidateCSSValue: function( value ) {
1337
-
1338
- var validUnits = ['rem', 'em', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'vh', 'vw', 'vmin', 'vmax'],
1339
- numericValue,
1340
- unit;
1341
-
1342
- // 0 is always a valid value, and we can't check calc() values effectively.
1343
- if ( '0' === value || ( 0 <= value.indexOf( 'calc(' ) && 0 <= value.indexOf( ')' ) ) ) {
1344
- return true;
1345
- }
1346
-
1347
- if ( 'auto' === value || 'inherit' === value || 'initial' === value ) {
1348
- return true;
1349
- }
1350
-
1351
- // Get the numeric value.
1352
- numericValue = parseFloat( value );
1353
-
1354
- // Get the unit
1355
- unit = value.replace( numericValue, '' );
1356
-
1357
- // Check the validity of the numeric value and units.
1358
- if ( isNaN( numericValue ) || -1 === jQuery.inArray( unit, validUnits ) ) {
1359
- return false;
1360
- }
1361
- return true;
1362
}
1363
} );
1364
}() );
1365
_.each( kirki.control, function( obj, type ) {
1366
- wp.customize.controlConstructor[ type ] = wp.customize.kirkiDynamicControl.extend({});
1367
} );
1368
/* global kirkiControlLoader */
1369
- wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.extend({
1370
1371
// When we're finished loading continue processing
1372
ready: function() {
@@ -1386,8 +1521,8 @@ wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.exten
1386
initKirkiControl: function() {
1387
1388
var control = this,
1389
- value = control.setting._value,
1390
- picker = control.container.find( '.kirki-color-control' );
1391
1392
// Hide unnecessary controls if the value doesn't have an image.
1393
if ( _.isUndefined( value['background-image'] ) || '' === value['background-image'] ) {
@@ -1398,47 +1533,47 @@ wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.exten
1398
}
1399
1400
// Color.
1401
- picker.wpColorPicker({
1402
change: function() {
1403
setTimeout( function() {
1404
control.saveValue( 'background-color', picker.val() );
1405
}, 100 );
1406
}
1407
- });
1408
1409
// Background-Repeat.
1410
control.container.on( 'change', '.background-repeat select', function() {
1411
control.saveValue( 'background-repeat', jQuery( this ).val() );
1412
- });
1413
1414
// Background-Size.
1415
control.container.on( 'change click', '.background-size input', function() {
1416
control.saveValue( 'background-size', jQuery( this ).val() );
1417
- });
1418
1419
// Background-Position.
1420
control.container.on( 'change', '.background-position select', function() {
1421
control.saveValue( 'background-position', jQuery( this ).val() );
1422
- });
1423
1424
// Background-Attachment.
1425
control.container.on( 'change click', '.background-attachment input', function() {
1426
control.saveValue( 'background-attachment', jQuery( this ).val() );
1427
- });
1428
1429
// Background-Image.
1430
control.container.on( 'click', '.background-image-upload-button', function( e ) {
1431
- var image = wp.media({ multiple: false }).open().on( 'select', function() {
1432
1433
// This will return the selected image from the Media Uploader, the result is an object.
1434
var uploadedImage = image.state().get( 'selection' ).first(),
1435
- previewImage = uploadedImage.toJSON().sizes.full.url,
1436
- imageUrl,
1437
- imageID,
1438
- imageWidth,
1439
- imageHeight,
1440
- preview,
1441
- removeButton;
1442
1443
if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
1444
previewImage = uploadedImage.toJSON().sizes.medium.url;
@@ -1466,15 +1601,15 @@ wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.exten
1466
if ( removeButton.length ) {
1467
removeButton.show();
1468
}
1469
- });
1470
1471
e.preventDefault();
1472
- });
1473
1474
control.container.on( 'click', '.background-image-upload-remove-button', function( e ) {
1475
1476
var preview,
1477
- removeButton;
1478
1479
e.preventDefault();
1480
@@ -1495,7 +1630,7 @@ wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.exten
1495
if ( removeButton.length ) {
1496
removeButton.hide();
1497
}
1498
- });
1499
},
1500
1501
/**
@@ -1504,22 +1639,22 @@ wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.exten
1504
saveValue: function( property, value ) {
1505
1506
var control = this,
1507
- input = jQuery( '#customize-control-' + control.id.replace( '[', '-' ).replace( ']', '' ) + ' .background-hidden-value' ),
1508
- val = control.setting._value;
1509
1510
val[ property ] = value;
1511
1512
jQuery( input ).attr( 'value', JSON.stringify( val ) ).trigger( 'change' );
1513
control.setting.set( val );
1514
}
1515
- });
1516
- wp.customize.controlConstructor['kirki-color-palette'] = wp.customize.kirkiDynamicControl.extend({});
1517
- wp.customize.controlConstructor['kirki-dashicons'] = wp.customize.kirkiDynamicControl.extend({});
1518
- wp.customize.controlConstructor['kirki-date'] = wp.customize.kirkiDynamicControl.extend({
1519
1520
initKirkiControl: function() {
1521
var control = this,
1522
- selector = control.selector + ' input.datepicker';
1523
1524
// Init the datepicker
1525
jQuery( selector ).datepicker( {
@@ -1535,12 +1670,12 @@ wp.customize.controlConstructor['kirki-date'] = wp.customize.kirkiDynamicControl
1535
}
1536
} );
1537
/* global dimensionkirkiL10n */
1538
- wp.customize.controlConstructor['kirki-dimension'] = wp.customize.kirkiDynamicControl.extend({
1539
1540
initKirkiControl: function() {
1541
1542
var control = this,
1543
- value;
1544
1545
// Notifications.
1546
control.kirkiNotifications();
@@ -1550,7 +1685,7 @@ wp.customize.controlConstructor['kirki-dimension'] = wp.customize.kirkiDynamicCo
1550
1551
value = jQuery( this ).val();
1552
control.setting.set( value );
1553
- });
1554
},
1555
1556
/**
@@ -1564,7 +1699,7 @@ wp.customize.controlConstructor['kirki-dimension'] = wp.customize.kirkiDynamicCo
1564
setting.bind( function( value ) {
1565
var code = 'long_title';
1566
1567
- if ( false === control.kirkiValidateCSSValue( value ) ) {
1568
setting.notifications.add( code, new wp.customize.Notification(
1569
code,
1570
{
@@ -1578,17 +1713,17 @@ wp.customize.controlConstructor['kirki-dimension'] = wp.customize.kirkiDynamicCo
1578
} );
1579
} );
1580
}
1581
- });
1582
/* global dimensionskirkiL10n */
1583
- wp.customize.controlConstructor['kirki-dimensions'] = wp.customize.kirkiDynamicControl.extend({
1584
1585
initKirkiControl: function() {
1586
1587
var control = this,
1588
- subControls = control.params.choices.controls,
1589
- value = {},
1590
- subsArray = [],
1591
- i;
1592
1593
_.each( subControls, function( v, i ) {
1594
if ( true === v ) {
@@ -1617,7 +1752,7 @@ wp.customize.controlConstructor['kirki-dimensions'] = wp.customize.kirkiDynamicC
1617
1618
// Save the value
1619
control.saveValue( value );
1620
- });
1621
},
1622
1623
/**
@@ -1626,11 +1761,11 @@ wp.customize.controlConstructor['kirki-dimensions'] = wp.customize.kirkiDynamicC
1626
saveValue: function( value ) {
1627
1628
var control = this,
1629
- newValue = {};
1630
1631
_.each( value, function( newSubValue, i ) {
1632
newValue[ i ] = newSubValue;
1633
- });
1634
1635
control.setting.set( newValue );
1636
},
@@ -1645,13 +1780,13 @@ wp.customize.controlConstructor['kirki-dimensions'] = wp.customize.kirkiDynamicC
1645
wp.customize( control.id, function( setting ) {
1646
setting.bind( function( value ) {
1647
var code = 'long_title',
1648
- subs = {},
1649
- message;
1650
1651
setting.notifications.remove( code );
1652
1653
_.each( value, function( val, direction ) {
1654
- if ( false === control.kirkiValidateCSSValue( val ) ) {
1655
subs[ direction ] = val;
1656
} else {
1657
delete subs[ direction ];
@@ -1670,16 +1805,16 @@ wp.customize.controlConstructor['kirki-dimensions'] = wp.customize.kirkiDynamicC
1670
} );
1671
} );
1672
}
1673
- });
1674
/* global tinyMCE */
1675
- wp.customize.controlConstructor['kirki-editor'] = wp.customize.kirkiDynamicControl.extend({
1676
1677
initKirkiControl: function() {
1678
1679
var control = this,
1680
- element = control.container.find( 'textarea' ),
1681
- id = 'kirki-editor-' + control.id.replace( '[', '' ).replace( ']', '' ),
1682
- editor;
1683
1684
wp.editor.initialize( id, {
1685
tinymce: {
@@ -1687,7 +1822,7 @@ wp.customize.controlConstructor['kirki-editor'] = wp.customize.kirkiDynamicContr
1687
},
1688
quicktags: true,
1689
mediaButtons: true
1690
- });
1691
1692
editor = tinyMCE.get( id );
1693
@@ -1699,20 +1834,20 @@ wp.customize.controlConstructor['kirki-editor'] = wp.customize.kirkiDynamicContr
1699
content = editor.getContent();
1700
element.val( content ).trigger( 'change' );
1701
wp.customize.instance( control.id ).set( content );
1702
- });
1703
}
1704
}
1705
- });
1706
/* global fontAwesomeJSON */
1707
- wp.customize.controlConstructor['kirki-fontawesome'] = wp.customize.kirkiDynamicControl.extend({
1708
1709
initKirkiControl: function() {
1710
1711
var control = this,
1712
- element = this.container.find( 'select' ),
1713
- icons = jQuery.parseJSON( fontAwesomeJSON ),
1714
- selectValue,
1715
- selectWooOptions = {
1716
data: [],
1717
escapeMarkup: function( markup ) {
1718
return markup;
@@ -1723,27 +1858,27 @@ wp.customize.controlConstructor['kirki-fontawesome'] = wp.customize.kirkiDynamic
1723
templateSelection: function( val ) {
1724
return '<i class="fa fa-lg fa-' + val.id + '" aria-hidden="true"></i>' + ' ' + val.text;
1725
}
1726
- },
1727
- select;
1728
1729
_.each( icons.icons, function( icon ) {
1730
- selectWooOptions.data.push({
1731
id: icon.id,
1732
text: icon.name
1733
- });
1734
- });
1735
1736
select = jQuery( element ).selectWoo( selectWooOptions );
1737
1738
select.on( 'change', function() {
1739
selectValue = jQuery( this ).val();
1740
control.setting.set( selectValue );
1741
- });
1742
select.val( control.setting._value ).trigger( 'change' );
1743
}
1744
- });
1745
/* global kirkiControlLoader */
1746
- wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({
1747
1748
// When we're finished loading continue processing
1749
ready: function() {
@@ -1763,12 +1898,12 @@ wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({
1763
initKirkiControl: function() {
1764
1765
var control = this,
1766
- value = control.getValue(),
1767
- saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url',
1768
- preview = control.container.find( '.placeholder, .thumbnail' ),
1769
- previewImage = ( 'array' === saveAs ) ? value.url : value,
1770
- removeButton = control.container.find( '.image-upload-remove-button' ),
1771
- defaultButton = control.container.find( '.image-default-button' );
1772
1773
control.container.find( '.kirki-controls-loading-spinner' ).hide();
1774
@@ -1793,7 +1928,7 @@ wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({
1793
}
1794
1795
// If value is default, hide the default button.
1796
- if ( value === control.params['default'] ) {
1797
control.container.find( 'image-default-button' ).hide();
1798
}
1799
@@ -1802,11 +1937,11 @@ wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({
1802
}
1803
1804
control.container.on( 'click', '.image-upload-button', function( e ) {
1805
- var image = wp.media({ multiple: false }).open().on( 'select', function() {
1806
1807
// This will return the selected image from the Media Uploader, the result is an object.
1808
var uploadedImage = image.state().get( 'selection' ).first(),
1809
- previewImage = uploadedImage.toJSON().sizes.full.url;
1810
1811
if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
1812
previewImage = uploadedImage.toJSON().sizes.medium.url;
@@ -1832,16 +1967,16 @@ wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({
1832
removeButton.show();
1833
defaultButton.hide();
1834
}
1835
- });
1836
1837
e.preventDefault();
1838
- });
1839
1840
control.container.on( 'click', '.image-upload-remove-button', function( e ) {
1841
1842
var preview,
1843
- removeButton,
1844
- defaultButton;
1845
1846
e.preventDefault();
1847
@@ -1863,30 +1998,30 @@ wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({
1863
defaultButton.show();
1864
}
1865
}
1866
- });
1867
1868
control.container.on( 'click', '.image-default-button', function( e ) {
1869
1870
var preview,
1871
- removeButton,
1872
- defaultButton;
1873
1874
e.preventDefault();
1875
1876
- control.saveValue( 'url', control.params['default'] );
1877
1878
preview = control.container.find( '.placeholder, .thumbnail' );
1879
removeButton = control.container.find( '.image-upload-remove-button' );
1880
defaultButton = control.container.find( '.image-default-button' );
1881
1882
if ( preview.length ) {
1883
- preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + control.params['default'] + '" alt="" />' );
1884
}
1885
if ( removeButton.length ) {
1886
removeButton.show();
1887
defaultButton.hide();
1888
}
1889
- });
1890
},
1891
1892
/**
@@ -1894,8 +2029,8 @@ wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({
1894
*/
1895
getValue: function() {
1896
var control = this,
1897
- value = control.setting._value,
1898
- saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';
1899
1900
if ( 'array' === saveAs && _.isString( value ) ) {
1901
value = {
@@ -1910,8 +2045,8 @@ wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({
1910
*/
1911
saveValue: function( property, value ) {
1912
var control = this,
1913
- valueOld = control.setting._value,
1914
- saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';
1915
1916
if ( 'array' === saveAs ) {
1917
if ( _.isString( valueOld ) ) {
@@ -1925,8 +2060,8 @@ wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend({
1925
control.setting.set( value );
1926
control.container.find( 'button' ).trigger( 'change' );
1927
}
1928
- });
1929
- wp.customize.controlConstructor['kirki-multicheck'] = wp.customize.kirkiDynamicControl.extend({
1930
1931
initKirkiControl: function() {
1932
@@ -1935,23 +2070,26 @@ wp.customize.controlConstructor['kirki-multicheck'] = wp.customize.kirkiDynamicC
1935
// Save the value
1936
control.container.on( 'change', 'input', function() {
1937
var value = [],
1938
- i = 0;
1939
1940
// Build the value as an object using the sub-values from individual checkboxes.
1941
jQuery.each( control.params.choices, function( key ) {
1942
if ( control.container.find( 'input[value="' + key + '"]' ).is( ':checked' ) ) {
1943
value[ i ] = key;
1944
i++;
1945
}
1946
- });
1947
1948
// Update the value in the customizer.
1949
control.setting.set( value );
1950
- });
1951
}
1952
- });
1953
/* global kirkiControlLoader */
1954
- wp.customize.controlConstructor['kirki-multicolor'] = wp.customize.Control.extend({
1955
1956
// When we're finished loading continue processing
1957
ready: function() {
@@ -1973,16 +2111,16 @@ wp.customize.controlConstructor['kirki-multicolor'] = wp.customize.Control.exten
1973
'use strict';
1974
1975
var control = this,
1976
- colors = control.params.choices,
1977
- keys = Object.keys( colors ),
1978
- value = this.params.value,
1979
- i = 0;
1980
1981
// Proxy function that handles changing the individual colors
1982
function kirkiMulticolorChangeHandler( control, value, subSetting ) {
1983
1984
var picker = control.container.find( '.multicolor-index-' + subSetting ),
1985
- args = {
1986
change: function() {
1987
1988
// Color controls require a small delay.
@@ -1995,12 +2133,12 @@ wp.customize.controlConstructor['kirki-multicolor'] = wp.customize.Control.exten
1995
control.container.find( '.multicolor-index-' + subSetting ).trigger( 'change' );
1996
}, 100 );
1997
}
1998
- };
1999
2000
if ( _.isObject( colors.irisArgs ) ) {
2001
_.each( colors.irisArgs, function( irisValue, irisKey ) {
2002
args[ irisKey ] = irisValue;
2003
- });
2004
}
2005
2006
// Did we change the value?
@@ -2020,101 +2158,23 @@ wp.customize.controlConstructor['kirki-multicolor'] = wp.customize.Control.exten
2020
saveValue: function( property, value ) {
2021
2022
var control = this,
2023
- input = control.container.find( '.multicolor-hidden-value' ),
2024
- val = control.setting._value;
2025
2026
val[ property ] = value;
2027
2028
jQuery( input ).attr( 'value', JSON.stringify( val ) ).trigger( 'change' );
2029
control.setting.set( val );
2030
}
2031
- });
2032
- wp.customize.controlConstructor['kirki-number'] = wp.customize.kirkiDynamicControl.extend({
2033
-
2034
- initKirkiControl: function() {
2035
-
2036
- var control = this,
2037
- value = control.setting._value,
2038
- html = '',
2039
- input,
2040
- up,
2041
- down;
2042
-
2043
- // Make sure we use default values if none are define for some arguments.
2044
- control.params.choices = _.defaults( control.params.choices, {
2045
- min: 0,
2046
- max: 100,
2047
- step: 1
2048
- } );
2049
-
2050
- // Make sure we have a valid value.
2051
- if ( isNaN( value ) || '' === value ) {
2052
- value = ( 0 > control.params.choices.min && 0 < control.params.choices.max ) ? 0 : control.params.choices.min;
2053
- }
2054
- value = parseFloat( value );
2055
-
2056
- // If step is 'any', set to 0.001.
2057
- control.params.choices.step = ( 'any' === control.params.choices.step ) ? 0.001 : control.params.choices.step;
2058
-
2059
- // Make sure choices are properly formtted as numbers.
2060
- control.params.choices.min = parseFloat( control.params.choices.min );
2061
- control.params.choices.max = parseFloat( control.params.choices.max );
2062
- control.params.choices.step = parseFloat( control.params.choices.step );
2063
-
2064
- // Build the HTML for the control.
2065
- html += '<label>';
2066
- if ( control.params.label ) {
2067
- html += '<span class="customize-control-title">' + control.params.label + '</span>';
2068
- }
2069
- if ( control.params.description ) {
2070
- html += '<span class="description customize-control-description">' + control.params.description + '</span>';
2071
- }
2072
- html += '<div class="customize-control-content">';
2073
- html += '<input ' + control.params.inputAttrs + ' type="text" ' + control.params.link + ' value="' + value + '" />';
2074
- html += '<div class="quantity button minus">-</div>';
2075
- html += '<div class="quantity button plus">+</div>';
2076
- html += '</div>';
2077
- html += '</label>';
2078
-
2079
- control.container.html( html );
2080
-
2081
- input = control.container.find( 'input' );
2082
- up = control.container.find( '.plus' );
2083
- down = control.container.find( '.minus' );
2084
-
2085
- up.click( function() {
2086
- var oldVal = parseFloat( input.val() ),
2087
- newVal;
2088
-
2089
- newVal = ( oldVal >= control.params.choices.max ) ? oldVal : oldVal + control.params.choices.step;
2090
-
2091
- input.val( newVal );
2092
- input.trigger( 'change' );
2093
- } );
2094
-
2095
- down.click( function() {
2096
- var oldVal = parseFloat( input.val() ),
2097
- newVal;
2098
-
2099
- newVal = ( oldVal <= control.params.choices.min ) ? oldVal : oldVal - control.params.choices.step;
2100
-
2101
- input.val( newVal );
2102
- input.trigger( 'change' );
2103
- } );
2104
-
2105
- this.container.on( 'change keyup paste click', 'input', function() {
2106
- control.setting.set( jQuery( this ).val() );
2107
- });
2108
- }
2109
- });
2110
- wp.customize.controlConstructor['kirki-palette'] = wp.customize.kirkiDynamicControl.extend({});
2111
/* global kirkiSetSettingValue */
2112
- wp.customize.controlConstructor['kirki-preset'] = wp.customize.kirkiDynamicControl.extend({
2113
2114
initKirkiControl: function() {
2115
2116
var control = this,
2117
- selectValue;
2118
2119
// Trigger a change
2120
this.container.on( 'change', 'select', function() {
@@ -2137,15 +2197,15 @@ wp.customize.controlConstructor['kirki-preset'] = wp.customize.kirkiDynamicContr
2137
// We'll have to loop through them all and apply the changes needed to them.
2138
jQuery.each( value.settings, function( presetSetting, presetSettingValue ) {
2139
kirkiSetSettingValue.set( presetSetting, presetSettingValue );
2140
- });
2141
}
2142
- });
2143
wp.customize.previewer.refresh();
2144
- });
2145
}
2146
- });
2147
- wp.customize.controlConstructor['kirki-radio-buttonset'] = wp.customize.kirkiDynamicControl.extend({});
2148
- wp.customize.controlConstructor['kirki-radio-image'] = wp.customize.kirkiDynamicControl.extend({});
2149
/* global kirkiControlLoader */
2150
var RepeaterRow = function( rowIndex, container, label, control ) {
2151
@@ -2155,23 +2215,23 @@ var RepeaterRow = function( rowIndex, container, label, control ) {
2155
this.rowIndex = rowIndex;
2156
this.container = container;
2157
this.label = label;
2158
- this.header = this.container.find( '.repeater-row-header' ),
2159
2160
this.header.on( 'click', function() {
2161
self.toggleMinimize();
2162
- });
2163
2164
this.container.on( 'click', '.repeater-row-remove', function() {
2165
self.remove();
2166
- });
2167
2168
this.header.on( 'mousedown', function() {
2169
self.container.trigger( 'row:start-dragging' );
2170
- });
2171
2172
this.container.on( 'keyup change', 'input, select, textarea', function( e ) {
2173
self.container.trigger( 'row:update', [ self.rowIndex, jQuery( e.target ).data( 'field' ), e.target ] );
2174
- });
2175
2176
this.setRowIndex = function( rowIndex ) {
2177
this.rowIndex = rowIndex;
@@ -2190,14 +2250,14 @@ var RepeaterRow = function( rowIndex, container, label, control ) {
2190
this.remove = function() {
2191
this.container.slideUp( 300, function() {
2192
jQuery( this ).detach();
2193
- });
2194
this.container.trigger( 'row:remove', [ this.rowIndex ] );
2195
};
2196
2197
this.updateLabel = function() {
2198
var rowLabelField,
2199
- rowLabel,
2200
- rowLabelSelector;
2201
2202
if ( 'field' === this.label.type ) {
2203
rowLabelField = this.container.find( '.repeater-field [data-field="' + this.label.field + '"]' );
@@ -2226,7 +2286,7 @@ var RepeaterRow = function( rowIndex, container, label, control ) {
2226
this.updateLabel();
2227
};
2228
2229
- wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2230
2231
// When we're finished loading continue processing
2232
ready: function() {
@@ -2248,8 +2308,8 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2248
'use strict';
2249
2250
var control = this,
2251
- limit,
2252
- theNewRow;
2253
2254
// The current value set in Control Class (set in Kirki_Customize_Repeater_Control::to_json() function)
2255
var settingValue = this.params.value;
@@ -2287,56 +2347,57 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2287
} else {
2288
jQuery( control.selector + ' .limit' ).addClass( 'highlight' );
2289
}
2290
- });
2291
2292
this.container.on( 'click', '.repeater-row-remove', function() {
2293
control.currentIndex--;
2294
if ( ! limit || control.currentIndex < limit ) {
2295
jQuery( control.selector + ' .limit' ).removeClass( 'highlight' );
2296
}
2297
- });
2298
2299
this.container.on( 'click keypress', '.repeater-field-image .upload-button,.repeater-field-cropped_image .upload-button,.repeater-field-upload .upload-button', function( e ) {
2300
e.preventDefault();
2301
control.$thisButton = jQuery( this );
2302
control.openFrame( e );
2303
- });
2304
2305
this.container.on( 'click keypress', '.repeater-field-image .remove-button,.repeater-field-cropped_image .remove-button', function( e ) {
2306
e.preventDefault();
2307
control.$thisButton = jQuery( this );
2308
control.removeImage( e );
2309
- });
2310
2311
this.container.on( 'click keypress', '.repeater-field-upload .remove-button', function( e ) {
2312
e.preventDefault();
2313
control.$thisButton = jQuery( this );
2314
control.removeFile( e );
2315
- });
2316
2317
/**
2318
* Function that loads the Mustache template
2319
*/
2320
this.repeaterTemplate = _.memoize( function() {
2321
var compiled,
2322
- /*
2323
- * Underscore's default ERB-style templates are incompatible with PHP
2324
- * when asp_tags is enabled, so WordPress uses Mustache-inspired templating syntax.
2325
- *
2326
- * @see trac ticket #22344.
2327
- */
2328
- options = {
2329
evaluate: /<#([\s\S]+?)#>/g,
2330
interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
2331
escape: /\{\{([^\}]+?)\}\}(?!\})/g,
2332
variable: 'data'
2333
- };
2334
2335
return function( data ) {
2336
compiled = _.template( control.container.find( '.customize-control-repeater-content' ).first().html(), null, options );
2337
return compiled( data );
2338
};
2339
- });
2340
2341
// When we load the control, the fields have not been filled up
2342
// This is the first time that we create all the rows
@@ -2345,18 +2406,18 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2345
theNewRow = control.addRow( subValue );
2346
control.initColorPicker();
2347
control.initSelect( theNewRow, subValue );
2348
- });
2349
}
2350
2351
// Once we have displayed the rows, we cleanup the values
2352
this.setValue( settingValue, true, true );
2353
2354
- this.repeaterFieldsContainer.sortable({
2355
handle: '.repeater-row-header',
2356
update: function() {
2357
control.sort();
2358
}
2359
- });
2360
2361
},
2362
@@ -2386,19 +2447,20 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2386
2387
var libMediaType = this.getMimeType();
2388
2389
- this.frame = wp.media({
2390
states: [
2391
- new wp.media.controller.Library({
2392
- library: wp.media.query({ type: libMediaType }),
2393
multiple: false,
2394
- date: false
2395
- })
2396
]
2397
- });
2398
2399
// When a file is selected, run a callback.
2400
this.frame.on( 'select', this.onSelect, this );
2401
},
2402
/**
2403
* Create a media modal select frame, and store it so the instance can be reused when needed.
2404
* This is mostly a copy/paste of Core api.CroppedImageControl in /wp-admin/js/customize-control.js
@@ -2409,8 +2471,8 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2409
2410
// We get the field id from which this was called
2411
var currentFieldId = this.$thisButton.siblings( 'input.hidden-field' ).attr( 'data-field' ),
2412
- attrs = [ 'width', 'height', 'flex_width', 'flex_height' ], // A list of attributes to look for
2413
- libMediaType = this.getMimeType();
2414
2415
// Make sure we got it
2416
if ( _.isString( currentFieldId ) && '' !== currentFieldId ) {
@@ -2431,25 +2493,25 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2431
}
2432
}
2433
2434
- this.frame = wp.media({
2435
button: {
2436
text: 'Select and Crop',
2437
close: false
2438
},
2439
states: [
2440
- new wp.media.controller.Library({
2441
- library: wp.media.query({ type: libMediaType }),
2442
- multiple: false,
2443
- date: false,
2444
- suggestedWidth: this.params.width,
2445
suggestedHeight: this.params.height
2446
- }),
2447
- new wp.media.controller.CustomizeImageCropper({
2448
imgSelectOptions: this.calculateImageSelectOptions,
2449
control: this
2450
- })
2451
]
2452
- });
2453
2454
this.frame.on( 'select', this.onSelectForCrop, this );
2455
this.frame.on( 'cropped', this.onCropped, this );
@@ -2515,18 +2577,18 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2515
'use strict';
2516
2517
var control = controller.get( 'control' ),
2518
- flexWidth = !! parseInt( control.params.flex_width, 10 ),
2519
- flexHeight = !! parseInt( control.params.flex_height, 10 ),
2520
- realWidth = attachment.get( 'width' ),
2521
- realHeight = attachment.get( 'height' ),
2522
- xInit = parseInt( control.params.width, 10 ),
2523
- yInit = parseInt( control.params.height, 10 ),
2524
- ratio = xInit / yInit,
2525
- xImg = realWidth,
2526
- yImg = realHeight,
2527
- x1,
2528
- y1,
2529
- imgSelectOptions;
2530
2531
controller.set( 'canSkipCrop', ! control.mustBeCropped( flexWidth, flexHeight, xInit, yInit, realWidth, realHeight ) );
2532
@@ -2542,16 +2604,16 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2542
y1 = ( yImg - yInit ) / 2;
2543
2544
imgSelectOptions = {
2545
- handles: true,
2546
- keys: true,
2547
- instance: true,
2548
- persistent: true,
2549
- imageWidth: realWidth,
2550
imageHeight: realHeight,
2551
- x1: x1,
2552
- y1: y1,
2553
- x2: xInit + x1,
2554
- y2: yInit + y1
2555
};
2556
2557
if ( false === flexHeight && false === flexWidth ) {
@@ -2678,7 +2740,7 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2678
'use strict';
2679
2680
var $targetDiv,
2681
- $uploadButton;
2682
2683
if ( wp.customize.utils.isKeydownButNotEnterEvent( event ) ) {
2684
return;
@@ -2689,7 +2751,7 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2689
2690
$targetDiv.find( '.kirki-image-attachment' ).slideUp( 'fast', function() {
2691
jQuery( this ).show().html( jQuery( this ).data( 'placeholder' ) );
2692
- });
2693
$targetDiv.find( '.hidden-field' ).val( '' );
2694
$uploadButton.text( $uploadButton.data( 'label' ) );
2695
this.$thisButton.hide();
@@ -2703,7 +2765,7 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2703
'use strict';
2704
2705
var $targetDiv,
2706
- $uploadButton;
2707
2708
if ( wp.customize.utils.isKeydownButNotEnterEvent( event ) ) {
2709
return;
@@ -2714,7 +2776,7 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2714
2715
$targetDiv.find( '.kirki-file-attachment' ).slideUp( 'fast', function() {
2716
jQuery( this ).show().html( jQuery( this ).data( 'placeholder' ) );
2717
- });
2718
$targetDiv.find( '.hidden-field' ).val( '' );
2719
$uploadButton.text( $uploadButton.data( 'label' ) );
2720
this.$thisButton.hide();
@@ -2749,21 +2811,21 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2749
2750
// We need to filter the values after the first load to remove data requrired for diplay but that we don't want to save in DB
2751
var filteredValue = newValue,
2752
- filter = [];
2753
2754
if ( filtering ) {
2755
jQuery.each( this.params.fields, function( index, value ) {
2756
if ( 'image' === value.type || 'cropped_image' === value.type || 'upload' === value.type ) {
2757
filter.push( index );
2758
}
2759
- });
2760
jQuery.each( newValue, function( index, value ) {
2761
jQuery.each( filter, function( ind, field ) {
2762
if ( ! _.isUndefined( value[ field ] ) && ! _.isUndefined( value[ field ].id ) ) {
2763
filteredValue[index][ field ] = value[ field ].id;
2764
}
2765
- });
2766
- });
2767
}
2768
2769
this.setting.set( encodeURI( JSON.stringify( filteredValue ) ) );
@@ -2786,12 +2848,12 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2786
'use strict';
2787
2788
var control = this,
2789
- template = control.repeaterTemplate(), // The template for the new row (defined on Kirki_Customize_Repeater_Control::render_content() ).
2790
- settingValue = this.getValue(), // Get the current setting value.
2791
- newRowSetting = {}, // Saves the new setting data.
2792
- templateData, // Data to pass to the template
2793
- newRow,
2794
- i;
2795
2796
if ( template ) {
2797
@@ -2804,7 +2866,7 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2804
if ( data ) {
2805
for ( i in data ) {
2806
if ( data.hasOwnProperty( i ) && templateData.hasOwnProperty( i ) ) {
2807
- templateData[ i ]['default'] = data[ i ];
2808
}
2809
}
2810
}
@@ -2824,19 +2886,19 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2824
2825
newRow.container.on( 'row:remove', function( e, rowIndex ) {
2826
control.deleteRow( rowIndex );
2827
- });
2828
2829
newRow.container.on( 'row:update', function( e, rowIndex, fieldName, element ) {
2830
control.updateField.call( control, e, rowIndex, fieldName, element );
2831
newRow.updateLabel();
2832
- });
2833
2834
// Add the row to rows collection
2835
this.rows[ this.currentIndex ] = newRow;
2836
2837
for ( i in templateData ) {
2838
if ( templateData.hasOwnProperty( i ) ) {
2839
- newRowSetting[ i ] = templateData[ i ]['default'];
2840
}
2841
}
2842
@@ -2854,22 +2916,22 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2854
'use strict';
2855
2856
var control = this,
2857
- $rows = this.repeaterFieldsContainer.find( '.repeater-row' ),
2858
- newOrder = [],
2859
- settings = control.getValue(),
2860
- newRows = [],
2861
- newSettings = [];
2862
2863
$rows.each( function( i, element ) {
2864
newOrder.push( jQuery( element ).data( 'row' ) );
2865
- });
2866
2867
jQuery.each( newOrder, function( newPosition, oldPosition ) {
2868
newRows[ newPosition ] = control.rows[ oldPosition ];
2869
newRows[ newPosition ].setRowIndex( newPosition );
2870
2871
newSettings[ newPosition ] = settings[ oldPosition ];
2872
- });
2873
2874
control.rows = newRows;
2875
control.setValue( newSettings );
@@ -2886,9 +2948,9 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2886
'use strict';
2887
2888
var currentSettings = this.getValue(),
2889
- row,
2890
- i,
2891
- prop;
2892
2893
if ( currentSettings[ index ] ) {
2894
@@ -2930,8 +2992,8 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2930
'use strict';
2931
2932
var type,
2933
- row,
2934
- currentSettings;
2935
2936
if ( ! this.rows[ rowIndex ] ) {
2937
return;
@@ -2971,9 +3033,9 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2971
'use strict';
2972
2973
var control = this,
2974
- colorPicker = control.container.find( '.color-picker-hex' ),
2975
- options = {},
2976
- fieldId = colorPicker.data( 'field' );
2977
2978
// We check if the color palette parameter is defined.
2979
if ( ! _.isUndefined( fieldId ) && ! _.isUndefined( control.params.fields[ fieldId ] ) && ! _.isUndefined( control.params.fields[ fieldId ].palettes ) && _.isObject( control.params.fields[ fieldId ].palettes ) ) {
@@ -2984,9 +3046,9 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
2984
options.change = function( event, ui ) {
2985
2986
var currentPicker = jQuery( event.target ),
2987
- row = currentPicker.closest( '.repeater-row' ),
2988
- rowIndex = row.data( 'row' ),
2989
- currentSettings = control.getValue();
2990
2991
currentSettings[ rowIndex ][ currentPicker.data( 'field' ) ] = ui.color.toString();
2992
control.setValue( currentSettings, true );
@@ -3012,11 +3074,11 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
3012
'use strict';
3013
3014
var control = this,
3015
- dropdown = theNewRow.container.find( '.repeater-field select' ),
3016
- $select,
3017
- dataField,
3018
- multiple,
3019
- selectWooOptions = {};
3020
3021
if ( 0 === dropdown.length ) {
3022
return;
@@ -3039,23 +3101,23 @@ wp.customize.controlConstructor.repeater = wp.customize.Control.extend({
3039
this.container.on( 'change', '.repeater-field select', function( event ) {
3040
3041
var currentDropdown = jQuery( event.target ),
3042
- row = currentDropdown.closest( '.repeater-row' ),
3043
- rowIndex = row.data( 'row' ),
3044
- currentSettings = control.getValue();
3045
3046
currentSettings[ rowIndex ][ currentDropdown.data( 'field' ) ] = jQuery( this ).val();
3047
control.setValue( currentSettings );
3048
- });
3049
}
3050
- });
3051
- wp.customize.controlConstructor['kirki-slider'] = wp.customize.kirkiDynamicControl.extend({
3052
3053
initKirkiControl: function() {
3054
var control = this,
3055
- changeAction = ( 'postMessage' === control.setting.transport ) ? 'mousemove change' : 'change',
3056
rangeInput = control.container.find( 'input[type="range"]' ),
3057
textInput = control.container.find( 'input[type="text"]' ),
3058
- value = control.setting._value;
3059
3060
// Set the initial value in the text input.
3061
textInput.attr( 'value', value );
@@ -3086,14 +3148,14 @@ wp.customize.controlConstructor['kirki-slider'] = wp.customize.kirkiDynamicContr
3086
// set slider and text input values to default
3087
// and hen save.
3088
control.container.find( '.slider-reset' ).on( 'click', function() {
3089
- textInput.attr( 'value', control.params['default'] );
3090
- rangeInput.attr( 'value', control.params['default'] );
3091
control.setting.set( textInput.val() );
3092
} );
3093
}
3094
- });
3095
/* global kirkiControlLoader */
3096
- wp.customize.controlConstructor['kirki-sortable'] = wp.customize.Control.extend({
3097
3098
// When we're finished loading continue processing
3099
ready: function() {
@@ -3122,23 +3184,23 @@ wp.customize.controlConstructor['kirki-sortable'] = wp.customize.Control.extend(
3122
control.sortableContainer = control.container.find( 'ul.sortable' ).first();
3123
3124
// Init sortable.
3125
- control.sortableContainer.sortable({
3126
3127
// Update value when we stop sorting.
3128
stop: function() {
3129
control.updateValue();
3130
}
3131
- }).disableSelection().find( 'li' ).each( function() {
3132
3133
// Enable/disable options when we click on the eye of Thundera.
3134
jQuery( this ).find( 'i.visibility' ).click( function() {
3135
jQuery( this ).toggleClass( 'dashicons-visibility-faint' ).parents( 'li:eq(0)' ).toggleClass( 'invisible' );
3136
- });
3137
- }).click( function() {
3138
3139
// Update value on click.
3140
control.updateValue();
3141
- });
3142
},
3143
3144
/**
@@ -3149,91 +3211,91 @@ wp.customize.controlConstructor['kirki-sortable'] = wp.customize.Control.extend(
3149
'use strict';
3150
3151
var control = this,
3152
- newValue = [];
3153
3154
this.sortableContainer.find( 'li' ).each( function() {
3155
if ( ! jQuery( this ).is( '.invisible' ) ) {
3156
newValue.push( jQuery( this ).data( 'value' ) );
3157
}
3158
- });
3159
control.setting.set( newValue );
3160
}
3161
- });
3162
- wp.customize.controlConstructor['kirki-switch'] = wp.customize.kirkiDynamicControl.extend({
3163
3164
initKirkiControl: function() {
3165
3166
'use strict';
3167
3168
var control = this,
3169
- checkboxValue = control.setting._value;
3170
3171
// Save the value
3172
this.container.on( 'change', 'input', function() {
3173
checkboxValue = ( jQuery( this ).is( ':checked' ) ) ? true : false;
3174
control.setting.set( checkboxValue );
3175
- });
3176
}
3177
- });
3178
- wp.customize.controlConstructor['kirki-toggle'] = wp.customize.kirkiDynamicControl.extend({
3179
3180
initKirkiControl: function() {
3181
3182
var control = this,
3183
- checkboxValue = control.setting._value;
3184
3185
// Save the value
3186
this.container.on( 'change', 'input', function() {
3187
checkboxValue = ( jQuery( this ).is( ':checked' ) ) ? true : false;
3188
control.setting.set( checkboxValue );
3189
- });
3190
}
3191
- });
3192
/* global kirkiL10n, kirki */
3193
- wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicControl.extend({
3194
3195
initKirkiControl: function() {
3196
3197
'use strict';
3198
3199
var control = this,
3200
- value = control.setting._value,
3201
- picker;
3202
3203
control.renderFontSelector();
3204
control.renderBackupFontSelector();
3205
control.renderVariantSelector();
3206
3207
// Font-size.
3208
- if ( control.params['default']['font-size'] ) {
3209
this.container.on( 'change keyup paste', '.font-size input', function() {
3210
control.saveValue( 'font-size', jQuery( this ).val() );
3211
} );
3212
}
3213
3214
// Line-height.
3215
- if ( control.params['default']['line-height'] ) {
3216
this.container.on( 'change keyup paste', '.line-height input', function() {
3217
control.saveValue( 'line-height', jQuery( this ).val() );
3218
} );
3219
}
3220
3221
// Margin-top.
3222
- if ( control.params['default']['margin-top'] ) {
3223
this.container.on( 'change keyup paste', '.margin-top input', function() {
3224
control.saveValue( 'margin-top', jQuery( this ).val() );
3225
} );
3226
}
3227
3228
// Margin-bottom.
3229
- if ( control.params['default']['margin-bottom'] ) {
3230
this.container.on( 'change keyup paste', '.margin-bottom input', function() {
3231
control.saveValue( 'margin-bottom', jQuery( this ).val() );
3232
} );
3233
}
3234
3235
// Letter-spacing.
3236
- if ( control.params['default']['letter-spacing'] ) {
3237
value['letter-spacing'] = ( jQuery.isNumeric( value['letter-spacing'] ) ) ? value['letter-spacing'] + 'px' : value['letter-spacing'];
3238
this.container.on( 'change keyup paste', '.letter-spacing input', function() {
3239
value['letter-spacing'] = ( jQuery.isNumeric( jQuery( this ).val() ) ) ? jQuery( this ).val() + 'px' : jQuery( this ).val();
@@ -3242,37 +3304,37 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3242
}
3243
3244
// Word-spacing.
3245
- if ( control.params['default']['word-spacing'] ) {
3246
this.container.on( 'change keyup paste', '.word-spacing input', function() {
3247
control.saveValue( 'word-spacing', jQuery( this ).val() );
3248
} );
3249
}
3250
3251
// Text-align.
3252
- if ( control.params['default']['text-align'] ) {
3253
this.container.on( 'change', '.text-align input', function() {
3254
control.saveValue( 'text-align', jQuery( this ).val() );
3255
} );
3256
}
3257
3258
// Text-transform.
3259
- if ( control.params['default']['text-transform'] ) {
3260
jQuery( control.selector + ' .text-transform select' ).selectWoo().on( 'change', function() {
3261
control.saveValue( 'text-transform', jQuery( this ).val() );
3262
} );
3263
}
3264
3265
// Text-decoration.
3266
- if ( control.params['default']['text-decoration'] ) {
3267
jQuery( control.selector + ' .text-decoration select' ).selectWoo().on( 'change', function() {
3268
control.saveValue( 'text-decoration', jQuery( this ).val() );
3269
} );
3270
}
3271
3272
// Color.
3273
- if ( control.params['default'].color ) {
3274
picker = this.container.find( '.kirki-color-control' );
3275
- picker.wpColorPicker({
3276
change: function() {
3277
setTimeout( function() {
3278
control.saveValue( 'color', picker.val() );
@@ -3289,18 +3351,19 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3289
renderFontSelector: function() {
3290
3291
var control = this,
3292
- selector = control.selector + ' .font-family select',
3293
- data = [],
3294
- standardFonts = [],
3295
- googleFonts = [],
3296
- value = control.setting._value,
3297
- fonts = control.getFonts(),
3298
- fontSelect;
3299
3300
// Format standard fonts as an array.
3301
if ( ! _.isUndefined( fonts.standard ) ) {
3302
_.each( fonts.standard, function( font ) {
3303
- standardFonts.push({
3304
id: font.family.replace( /&quot;/g, '&#39' ),
3305
text: font.label
3306
} );
@@ -3310,22 +3373,48 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3310
// Format google fonts as an array.
3311
if ( ! _.isUndefined( fonts.google ) ) {
3312
_.each( fonts.google, function( font ) {
3313
- googleFonts.push({
3314
id: font.family,
3315
text: font.family
3316
} );
3317
} );
3318
}
3319
3320
// Combine forces and build the final data.
3321
- data = [
3322
- { text: kirkiL10n.defaultCSSValues, children: [{ id: 'inherit', text: 'inherit' }] },
3323
- { text: kirkiL10n.standardFonts, children: standardFonts },
3324
- { text: kirkiL10n.googleFonts, children: googleFonts }
3325
- ];
3326
3327
// Instantiate selectWoo with the data.
3328
- fontSelect = jQuery( selector ).selectWoo({
3329
data: data
3330
} );
3331
@@ -3355,12 +3444,12 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3355
renderBackupFontSelector: function() {
3356
3357
var control = this,
3358
- selector = control.selector + ' .font-backup select',
3359
- standardFonts = [],
3360
- value = control.setting._value,
3361
- fontFamily = value['font-family'],
3362
- fonts = control.getFonts(),
3363
- fontSelect;
3364
3365
if ( _.isUndefined( value['font-backup'] ) || null === value['font-backup'] ) {
3366
value['font-backup'] = '';
@@ -3376,7 +3465,7 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3376
// Format standard fonts as an array.
3377
if ( ! _.isUndefined( fonts.standard ) ) {
3378
_.each( fonts.standard, function( font ) {
3379
- standardFonts.push({
3380
id: font.family.replace( /&quot;/g, '&#39' ),
3381
text: font.label
3382
} );
@@ -3384,7 +3473,7 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3384
}
3385
3386
// Instantiate selectWoo with the data.
3387
- fontSelect = jQuery( selector ).selectWoo({
3388
data: standardFonts
3389
} );
3390
@@ -3408,24 +3497,37 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3408
renderVariantSelector: function() {
3409
3410
var control = this,
3411
- value = control.setting._value,
3412
- fontFamily = value['font-family'],
3413
- selector = control.selector + ' .variant select',
3414
- data = [],
3415
- isValid = false,
3416
- fontType = kirki.util.webfonts.getFontType( fontFamily ),
3417
- variants = ['regular', 'italic', '700', '700italic'],
3418
- fontWeight,
3419
- variantSelector,
3420
- fontStyle;
3421
3422
if ( 'google' === fontType ) {
3423
variants = kirki.util.webfonts.google.getVariants( fontFamily );
3424
}
3425
3426
if ( 'inherit' === fontFamily ) {
3427
value.variant = 'inherit';
3428
- variants = [''];
3429
jQuery( control.selector + ' .variant' ).hide();
3430
}
3431
@@ -3436,7 +3538,7 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3436
3437
control.saveValue( 'variant', value.variant );
3438
3439
- if ( '' === value.variant ) {
3440
fontWeight = '';
3441
fontStyle = '';
3442
} else {
@@ -3458,7 +3560,7 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3458
if ( value.variant === variant ) {
3459
isValid = true;
3460
}
3461
- data.push({
3462
id: variant,
3463
text: variant
3464
} );
@@ -3473,12 +3575,15 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3473
}
3474
3475
// Instantiate selectWoo with the data.
3476
- variantSelector = jQuery( selector ).selectWoo({
3477
data: data
3478
} );
3479
variantSelector.val( value.variant ).trigger( 'change' );
3480
variantSelector.on( 'change', function() {
3481
control.saveValue( 'variant', jQuery( this ).val() );
3482
3483
fontWeight = ( ! _.isString( value.variant ) ) ? '400' : value.variant.match( /\d/g );
3484
fontWeight = ( ! _.isObject( fontWeight ) ) ? '400' : fontWeight.join( '' );
@@ -3494,11 +3599,11 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3494
*/
3495
getFonts: function() {
3496
var control = this,
3497
- initialGoogleFonts = kirki.util.webfonts.google.getFonts(),
3498
- googleFonts = {},
3499
- googleFontsSort = 'alpha',
3500
googleFontsNumber = 0,
3501
- standardFonts = {};
3502
3503
// Get google fonts.
3504
if ( ! _.isEmpty( control.params.choices.fonts.google ) ) {
@@ -3562,8 +3667,8 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3562
saveValue: function( property, value ) {
3563
3564
var control = this,
3565
- input = control.container.find( '.typography-hidden-value' ),
3566
- val = control.setting._value;
3567
3568
val[ property ] = value;
3569
1
/* jshint -W079 */
2
/* jshint unused:false */
3
if ( _.isUndefined( window.kirkiSetSettingValue ) ) {
4
+ var kirkiSetSettingValue = { // eslint-disable-line vars-on-top
5
6
/**
7
* Set the value of the control.
18
* and determine if we need to do any further work based on those.
19
*/
20
var $this = this,
21
+ subControl = wp.customize.settings.controls[ setting ],
22
+ valueJSON;
23
24
// If the control doesn't exist then return.
25
if ( _.isUndefined( subControl ) ) {
37
$this.setColorPicker( $this.findElement( setting, '.kirki-color-control' ), value['background-color'] );
38
}
39
$this.findElement( setting, '.placeholder, .thumbnail' ).removeClass().addClass( 'placeholder' ).html( 'No file selected' );
40
+ _.each( [ 'background-repeat', 'background-position' ], function( subVal ) {
41
if ( ! _.isUndefined( value[ subVal ] ) ) {
42
$this.setSelectWoo( $this.findElement( setting, '.' + subVal + ' select' ), value[ subVal ] );
43
}
44
+ } );
45
+ _.each( [ 'background-size', 'background-attachment' ], function( subVal ) {
46
jQuery( $this.findElement( setting, '.' + subVal + ' input[value="' + value + '"]' ) ).prop( 'checked', true );
47
+ } );
48
valueJSON = JSON.stringify( value ).replace( /'/g, '&#39' );
49
jQuery( $this.findElement( setting, '.background-hidden-value' ).attr( 'value', valueJSON ) ).trigger( 'change' );
50
break;
86
case 'kirki-multicheck':
87
$this.findElement( setting, 'input' ).each( function() {
88
jQuery( this ).prop( 'checked', false );
89
+ } );
90
_.each( value, function( subValue, i ) {
91
jQuery( $this.findElement( setting, 'input[value="' + value[ i ] + '"]' ) ).prop( 'checked', true );
92
+ } );
93
break;
94
95
case 'kirki-multicolor':
96
_.each( value, function( subVal, index ) {
97
$this.setColorPicker( $this.findElement( setting, '.multicolor-index-' + index ), subVal );
98
+ } );
99
break;
100
101
case 'kirki-radio-buttonset':
108
break;
109
110
case 'kirki-typography':
111
+ _.each( [ 'font-family', 'variant' ], function( subVal ) {
112
if ( ! _.isUndefined( value[ subVal ] ) ) {
113
$this.setSelectWoo( $this.findElement( setting, '.' + subVal + ' select' ), value[ subVal ] );
114
}
115
+ } );
116
+ _.each( [ 'font-size', 'line-height', 'letter-spacing', 'word-spacing' ], function( subVal ) {
117
if ( ! _.isUndefined( value[ subVal ] ) ) {
118
jQuery( $this.findElement( setting, '.' + subVal + ' input' ) ).prop( 'value', value[ subVal ] );
119
}
120
+ } );
121
122
if ( ! _.isUndefined( value.color ) ) {
123
$this.setColorPicker( $this.findElement( setting, '.kirki-color-control' ), value.color );
129
case 'kirki-dimensions':
130
_.each( value, function( subValue, id ) {
131
jQuery( $this.findElement( setting, '.' + id + ' input' ) ).prop( 'value', subValue );
132
+ } );
133
break;
134
135
case 'kirki-repeater':
202
*/
203
setValue: function( setting, value, timeout ) {
204
timeout = ( _.isUndefined( timeout ) ) ? 100 : parseInt( timeout, 10 );
205
+ wp.customize.instance( setting ).set( {} );
206
setTimeout( function() {
207
wp.customize.instance( setting ).set( value );
208
}, timeout );
295
description: control.params.description,
296
'data-id': control.id,
297
inputAttrs: control.params.inputAttrs,
298
+ 'default': control.params.default,
299
value: kirki.setting.get( control.id ),
300
choices: control.params.choices
301
} ) );
355
mode: control.params.mode,
356
inputAttrs: control.params.inputAttrs,
357
'data-palette': control.params.palette,
358
+ 'data-default-color': control.params.default,
359
'data-alpha': control.params.choices.alpha,
360
value: kirki.setting.get( control.id )
361
} ) );
416
inputAttrs: control.params.inputAttrs,
417
choices: control.params.choices,
418
value: kirki.setting.get( control.id )
419
+ },
420
+ template;
421
422
if ( ! _.isUndefined( control.params ) && ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.element ) && 'textarea' === control.params.choices.element ) {
423
template = wp.template( 'kirki-input-textarea' );
429
}
430
},
431
432
+ /**
433
+ * The number control.
434
+ *
435
+ * @since 3.0.26
436
+ */
437
+ 'kirki-number': {
438
+
439
+ /**
440
+ * Init the control.
441
+ *
442
+ * @since 3.0.26
443
+ * @param {Object} control - The customizer control object.
444
+ * @returns {null}
445
+ */
446
+ init: function( control ) {
447
+ var self = this;
448
+
449
+ // Render the template.
450
+ self.template( control );
451
+
452
+ // Init the control.
453
+ kirki.input.number.init( control );
454
+ },
455
+
456
+ /**
457
+ * Render the template.
458
+ *
459
+ * @since 3.0.27
460
+ * @param {Object} control - The customizer control object.
461
+ * @param {Object} control.params - The control parameters.
462
+ * @param {string} control.params.label - The control label.
463
+ * @param {string} control.params.description - The control description.
464
+ * @param {string} control.params.inputAttrs - extra input arguments.
465
+ * @param {string} control.params.default - The default value.
466
+ * @param {Object} control.params.choices - Any extra choices we may need.
467
+ * @param {string} control.id - The setting.
468
+ * @returns {null}
469
+ */
470
+ template: function( control ) {
471
+ var template = wp.template( 'kirki-input-number' );
472
+
473
+ control.container.html(
474
+ template( args = {
475
+ label: control.params.label,
476
+ description: control.params.description,
477
+ 'data-id': control.id,
478
+ inputAttrs: control.params.inputAttrs,
479
+ choices: control.params.choices,
480
+ value: kirki.setting.get( control.id )
481
+ } )
482
+ );
483
+ }
484
+ },
485
+
486
'kirki-select': {
487
488
/**
528
value: kirki.setting.get( control.id ),
529
multiple: control.params.multiple || 1,
530
placeholder: control.params.placeholder
531
+ } ) );
532
}
533
}
534
}
536
/* global kirkiL10n */
537
var kirki = kirki || {};
538
kirki = jQuery.extend( kirki, {
539
+
540
/**
541
* An object containing definitions for input fields.
542
*
565
// Save the value
566
input.on( 'change keyup paste click', function() {
567
kirki.setting.set( control.id, jQuery( this ).val() );
568
+ } );
569
}
570
},
571
590
*/
591
init: function( control ) {
592
var picker = jQuery( '.kirki-color-control[data-id="' + control.id + '"]' ),
593
+ clear;
594
595
control.choices = control.choices || {};
596
if ( _.isEmpty( control.choices ) && control.params.choices ) {
608
if ( clear.length ) {
609
clear.click( function() {
610
kirki.setting.set( control.id, '' );
611
+ } );
612
}
613
}, 200 );
614
615
// Saves our settings to the WP API
616
+ picker.wpColorPicker( {
617
change: function() {
618
619
// Small hack: the picker needs a small delay
621
kirki.setting.set( control.id, picker.val() );
622
}, 20 );
623
}
624
+ } );
625
}
626
},
627
646
// Save the value
647
input.on( 'change keyup paste click', function() {
648
kirki.setting.set( control.id, jQuery( this ).val() );
649
+ } );
650
}
651
},
652
671
// Save the value
672
textarea.on( 'change keyup paste click', function() {
673
kirki.setting.set( control.id, jQuery( this ).val() );
674
+ } );
675
}
676
},
677
687
*/
688
init: function( control ) {
689
var element = jQuery( 'select[data-id="' + control.id + '"]' ),
690
+ multiple = parseInt( element.data( 'multiple' ), 10 ),
691
+ selectValue,
692
+ selectWooOptions = {
693
escapeMarkup: function( markup ) {
694
return markup;
695
}
696
+ };
697
if ( control.params.placeholder ) {
698
selectWooOptions.placeholder = control.params.placeholder;
699
selectWooOptions.allowClear = true;
706
selectValue = jQuery( this ).val();
707
selectValue = ( null === selectValue && 1 < multiple ) ? [] : selectValue;
708
kirki.setting.set( control.id, selectValue );
709
+ } );
710
}
711
},
712
713
+ /**
714
+ * Number fields.
715
+ *
716
+ * @since 3.0.26
717
+ */
718
+ number: {
719
+
720
+ /**
721
+ * Init the control.
722
+ *
723
+ * @since 3.0.17
724
+ * @param {Object} control - The control object.
725
+ * @param {Object} control.id - The setting.
726
+ * @returns {null}
727
+ */
728
+ init: function( control ) {
729
+
730
+ var element = jQuery( 'input[data-id="' + control.id + '"]' ),
731
+ value = control.setting._value,
732
+ up,
733
+ down;
734
+
735
+ // Make sure we use default values if none are define for some arguments.
736
+ control.params.choices = _.defaults( control.params.choices, {
737
+ min: 0,
738
+ max: 100,
739
+ step: 1
740
+ } );
741
+
742
+ // Make sure we have a valid value.
743
+ if ( isNaN( value ) || '' === value ) {
744
+ value = ( 0 > control.params.choices.min && 0 < control.params.choices.max ) ? 0 : control.params.choices.min;
745
+ }
746
+ value = parseFloat( value );
747
+
748
+ // If step is 'any', set to 0.001.
749
+ control.params.choices.step = ( 'any' === control.params.choices.step ) ? 0.001 : control.params.choices.step;
750
+
751
+ // Make sure choices are properly formtted as numbers.
752
+ control.params.choices.min = parseFloat( control.params.choices.min );
753
+ control.params.choices.max = parseFloat( control.params.choices.max );
754
+ control.params.choices.step = parseFloat( control.params.choices.step );
755
+
756
+ up = jQuery( '.kirki-input-container[data-id="' + control.id + '"] .plus' );
757
+ down = jQuery( '.kirki-input-container[data-id="' + control.id + '"] .minus' );
758
+
759
+ up.click( function() {
760
+ var oldVal = parseFloat( element.val() ),
761
+ newVal;
762
+
763
+ newVal = ( oldVal >= control.params.choices.max ) ? oldVal : oldVal + control.params.choices.step;
764
+
765
+ element.val( newVal );
766
+ element.trigger( 'change' );
767
+ } );
768
+
769
+ down.click( function() {
770
+ var oldVal = parseFloat( element.val() ),
771
+ newVal;
772
+
773
+ newVal = ( oldVal <= control.params.choices.min ) ? oldVal : oldVal - control.params.choices.step;
774
+
775
+ element.val( newVal );
776
+ element.trigger( 'change' );
777
+ } );
778
+
779
+ element.on( 'change keyup paste click', function() {
780
+ kirki.setting.set( control.id, jQuery( this ).val() );
781
+ } );
782
+ }
783
+
784
+ },
785
+
786
image: {
787
788
/**
794
*/
795
getTemplate: function( data ) {
796
var html = '',
797
+ saveAs = 'url',
798
+ url;
799
800
data = _.defaults( data, {
801
label: '',
830
}
831
html += '<div class="actions">';
832
html += '<button class="button image-upload-remove-button' + ( '' === url ? ' hidden' : '' ) + '">' + kirkiL10n.remove + '</button>';
833
+ if ( data.default && '' !== data.default ) {
834
html += '<button type="button" class="button image-default-button"';
835
+ if ( data.default === data.value || ( ! _.isUndefined( data.value.url ) && data.default === data.value.url ) ) {
836
html += ' style="display:none;"';
837
}
838
+ html += '>' + kirkiL10n.default + '</button>';
839
}
840
html += '<button type="button" class="button image-upload-button">' + kirkiL10n.selectFile + '</button>';
841
html += '</div></div>';
850
* @param {Object} control - The control object.
851
* @returns {null}
852
*/
853
+ init: function( control ) {
854
}
855
}
856
}
857
} );
858
var kirki = kirki || {};
859
kirki = jQuery.extend( kirki, {
860
+
861
/**
862
* An object containing definitions for settings.
863
*
878
*/
879
get: function( setting ) {
880
var parts = setting.split( '[' ),
881
+ foundSetting = '',
882
+ foundInStep = 0,
883
+ currentVal = '';
884
885
_.each( parts, function( part, i ) {
886
part = part.replace( ']', '' );
901
currentVal = currentVal[ part ];
902
}
903
}
904
+ } );
905
906
return currentVal;
907
},
926
*/
927
set: function( element, value, key ) {
928
var setting,
929
+ parts,
930
+ currentNode = '',
931
+ foundNode = '',
932
+ subSettingObj = {},
933
+ currentVal,
934
+ subSetting,
935
+ subSettingParts;
936
937
// Get the setting from the element.
938
setting = element;
949
return;
950
}
951
952
+ parts = setting.split( '[' );
953
954
// Find the setting we're using in the control using the customizer API.
955
_.each( parts, function( part, i ) {
1011
/* global ajaxurl */
1012
var kirki = kirki || {};
1013
kirki = jQuery.extend( kirki, {
1014
+
1015
/**
1016
* A collection of utility methods.
1017
*
1085
*/
1086
getFont: function( family ) {
1087
var self = this,
1088
+ fonts = self.getFonts();
1089
1090
if ( 'undefined' === typeof fonts[ family ] ) {
1091
return false;
1103
*/
1104
getFonts: function( order, category, number ) {
1105
var self = this,
1106
+ ordered = {},
1107
+ categorized = {},
1108
+ plucked = {};
1109
1110
// Make sure order is correct.
1111
order = order || 'alpha';
1155
*/
1156
getVariants: function( family ) {
1157
var self = this,
1158
+ font = self.getFont( family );
1159
1160
// Early exit if font was not found.
1161
if ( ! font ) {
1228
* @since 3.0.17
1229
* @returns {Array}
1230
*/
1231
+ getVariants: function() {
1232
+ return [ 'regular', 'italic', '700', '700italic' ];
1233
}
1234
},
1235
1261
}
1262
return false;
1263
}
1264
+ },
1265
+
1266
+ validate: {
1267
+ cssValue: function( value ) {
1268
+
1269
+ var validUnits = [ 'fr', 'rem', 'em', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'vh', 'vw', 'vmin', 'vmax' ],
1270
+ numericValue,
1271
+ unit;
1272
+
1273
+ // Whitelist values.
1274
+ if ( 0 === value || '0' === value || 'auto' === value || 'inherit' === value || 'initial' === value ) {
1275
+ return true;
1276
+ }
1277
+
1278
+ // Skip checking if calc().
1279
+ if ( 0 <= value.indexOf( 'calc(' ) && 0 <= value.indexOf( ')' ) ) {
1280
+ return true;
1281
+ }
1282
+
1283
+ // Get the numeric value.
1284
+ numericValue = parseFloat( value );
1285
+
1286
+ // Get the unit
1287
+ unit = value.replace( numericValue, '' );
1288
+
1289
+ // Allow unitless.
1290
+ if ( ! value ) {
1291
+ return;
1292
+ }
1293
+
1294
+ // Check the validity of the numeric value and units.
1295
+ return ( ! isNaN( numericValue ) && -1 < jQuery.inArray( unit, validUnits ) );
1296
+ }
1297
}
1298
}
1299
} );
1316
* @augments wp.customize.Control
1317
* @augments wp.customize.Class
1318
*/
1319
+ wp.customize.kirkiDynamicControl = wp.customize.Control.extend( {
1320
1321
initialize: function( id, options ) {
1322
var control = this,
1323
+ args = options || {};
1324
1325
args.params = args.params || {};
1326
if ( ! args.params.type ) {
1347
*/
1348
_setUpSettingRootLinks: function() {
1349
var control = this,
1350
+ nodes = control.container.find( '[data-customize-setting-link]' );
1351
1352
nodes.each( function() {
1353
var node = jQuery( this );
1369
*/
1370
_setUpSettingPropertyLinks: function() {
1371
var control = this,
1372
+ nodes;
1373
1374
if ( ! control.setting ) {
1375
return;
1379
1380
nodes.each( function() {
1381
var node = jQuery( this ),
1382
+ element,
1383
+ propertyName = node.data( 'customizeSettingPropertyLink' );
1384
1385
element = new wp.customize.Element( node );
1386
control.propertyElements.push( element );
1430
*/
1431
embed: function() {
1432
var control = this,
1433
+ sectionId = control.section();
1434
1435
if ( ! sectionId ) {
1436
return;
1494
this.container.on( 'change keyup paste click', 'input', function() {
1495
control.setting.set( jQuery( this ).val() );
1496
} );
1497
}
1498
} );
1499
}() );
1500
_.each( kirki.control, function( obj, type ) {
1501
+ wp.customize.controlConstructor[ type ] = wp.customize.kirkiDynamicControl.extend( {} );
1502
} );
1503
/* global kirkiControlLoader */
1504
+ wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.extend( {
1505
1506
// When we're finished loading continue processing
1507
ready: function() {
1521
initKirkiControl: function() {
1522
1523
var control = this,
1524
+ value = control.setting._value,
1525
+ picker = control.container.find( '.kirki-color-control' );
1526
1527
// Hide unnecessary controls if the value doesn't have an image.
1528
if ( _.isUndefined( value['background-image'] ) || '' === value['background-image'] ) {
1533
}
1534
1535
// Color.
1536
+ picker.wpColorPicker( {
1537
change: function() {
1538
setTimeout( function() {
1539
control.saveValue( 'background-color', picker.val() );
1540
}, 100 );
1541
}
1542
+ } );
1543
1544
// Background-Repeat.
1545
control.container.on( 'change', '.background-repeat select', function() {
1546
control.saveValue( 'background-repeat', jQuery( this ).val() );
1547
+ } );
1548
1549
// Background-Size.
1550
control.container.on( 'change click', '.background-size input', function() {
1551
control.saveValue( 'background-size', jQuery( this ).val() );
1552
+ } );
1553
1554
// Background-Position.
1555
control.container.on( 'change', '.background-position select', function() {
1556
control.saveValue( 'background-position', jQuery( this ).val() );
1557
+ } );
1558
1559
// Background-Attachment.
1560
control.container.on( 'change click', '.background-attachment input', function() {
1561
control.saveValue( 'background-attachment', jQuery( this ).val() );
1562
+ } );
1563
1564
// Background-Image.
1565
control.container.on( 'click', '.background-image-upload-button', function( e ) {
1566
+ var image = wp.media( { multiple: false } ).open().on( 'select', function() {
1567
1568
// This will return the selected image from the Media Uploader, the result is an object.
1569
var uploadedImage = image.state().get( 'selection' ).first(),
1570
+ previewImage = uploadedImage.toJSON().sizes.full.url,
1571
+ imageUrl,
1572
+ imageID,
1573
+ imageWidth,
1574
+ imageHeight,
1575
+ preview,
1576
+ removeButton;
1577
1578
if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
1579
previewImage = uploadedImage.toJSON().sizes.medium.url;
1601
if ( removeButton.length ) {
1602
removeButton.show();
1603
}
1604
+ } );
1605
1606
e.preventDefault();
1607
+ } );
1608
1609
control.container.on( 'click', '.background-image-upload-remove-button', function( e ) {
1610
1611
var preview,
1612
+ removeButton;
1613
1614
e.preventDefault();
1615
1630
if ( removeButton.length ) {
1631
removeButton.hide();
1632
}
1633
+ } );
1634
},
1635
1636
/**
1639
saveValue: function( property, value ) {
1640
1641
var control = this,
1642
+ input = jQuery( '#customize-control-' + control.id.replace( '[', '-' ).replace( ']', '' ) + ' .background-hidden-value' ),
1643
+ val = control.setting._value;
1644
1645
val[ property ] = value;
1646
1647
jQuery( input ).attr( 'value', JSON.stringify( val ) ).trigger( 'change' );
1648
control.setting.set( val );
1649
}
1650
+ } );
1651
+ wp.customize.controlConstructor['kirki-color-palette'] = wp.customize.kirkiDynamicControl.extend( {} );
1652
+ wp.customize.controlConstructor['kirki-dashicons'] = wp.customize.kirkiDynamicControl.extend( {} );
1653
+ wp.customize.controlConstructor['kirki-date'] = wp.customize.kirkiDynamicControl.extend( {
1654
1655
initKirkiControl: function() {
1656
var control = this,
1657
+ selector = control.selector + ' input.datepicker';
1658
1659
// Init the datepicker
1660
jQuery( selector ).datepicker( {
1670
}
1671
} );
1672
/* global dimensionkirkiL10n */
1673
+ wp.customize.controlConstructor['kirki-dimension'] = wp.customize.kirkiDynamicControl.extend( {
1674
1675
initKirkiControl: function() {
1676
1677
var control = this,
1678
+ value;
1679
1680
// Notifications.
1681
control.kirkiNotifications();
1685
1686
value = jQuery( this ).val();
1687
control.setting.set( value );
1688
+ } );
1689
},
1690
1691
/**
1699
setting.bind( function( value ) {
1700
var code = 'long_title';
1701
1702
+ if ( false === kirki.util.validate.cssValue( value ) ) {
1703
setting.notifications.add( code, new wp.customize.Notification(
1704
code,
1705
{
1713
} );
1714
} );
1715
}
1716
+ } );
1717
/* global dimensionskirkiL10n */
1718
+ wp.customize.controlConstructor['kirki-dimensions'] = wp.customize.kirkiDynamicControl.extend( {
1719
1720
initKirkiControl: function() {
1721
1722
var control = this,
1723
+ subControls = control.params.choices.controls,
1724
+ value = {},
1725
+ subsArray = [],
1726
+ i;
1727
1728
_.each( subControls, function( v, i ) {
1729
if ( true === v ) {
1752
1753
// Save the value
1754
control.saveValue( value );
1755
+ } );
1756
},
1757
1758
/**
1761
saveValue: function( value ) {
1762
1763
var control = this,
1764
+ newValue = {};
1765
1766
_.each( value, function( newSubValue, i ) {
1767
newValue[ i ] = newSubValue;
1768
+ } );
1769
1770
control.setting.set( newValue );
1771
},
1780
wp.customize( control.id, function( setting ) {
1781
setting.bind( function( value ) {
1782
var code = 'long_title',
1783
+ subs = {},
1784
+ message;
1785
1786
setting.notifications.remove( code );
1787
1788
_.each( value, function( val, direction ) {
1789
+ if ( false === kirki.util.validate.cssValue( val ) ) {
1790
subs[ direction ] = val;
1791
} else {
1792
delete subs[ direction ];
1805
} );
1806
} );
1807
}
1808
+ } );
1809
/* global tinyMCE */
1810
+ wp.customize.controlConstructor['kirki-editor'] = wp.customize.kirkiDynamicControl.extend( {
1811
1812
initKirkiControl: function() {
1813
1814
var control = this,
1815
+ element = control.container.find( 'textarea' ),
1816
+ id = 'kirki-editor-' + control.id.replace( '[', '' ).replace( ']', '' ),
1817
+ editor;
1818
1819
wp.editor.initialize( id, {
1820
tinymce: {
1822
},
1823
quicktags: true,
1824
mediaButtons: true
1825
+ } );
1826
1827
editor = tinyMCE.get( id );
1828
1834
content = editor.getContent();
1835
element.val( content ).trigger( 'change' );
1836
wp.customize.instance( control.id ).set( content );
1837
+ } );
1838
}
1839
}
1840
+ } );
1841
/* global fontAwesomeJSON */
1842
+ wp.customize.controlConstructor['kirki-fontawesome'] = wp.customize.kirkiDynamicControl.extend( {
1843
1844
initKirkiControl: function() {
1845
1846
var control = this,
1847
+ element = this.container.find( 'select' ),
1848
+ icons = jQuery.parseJSON( fontAwesomeJSON ),
1849
+ selectValue,
1850
+ selectWooOptions = {
1851
data: [],
1852
escapeMarkup: function( markup ) {
1853
return markup;
1858
templateSelection: function( val ) {
1859
return '<i class="fa fa-lg fa-' + val.id + '" aria-hidden="true"></i>' + ' ' + val.text;
1860
}
1861
+ },
1862
+ select;
1863
1864
_.each( icons.icons, function( icon ) {
1865
+ selectWooOptions.data.push( {
1866
id: icon.id,
1867
text: icon.name
1868
+ } );
1869
+ } );
1870
1871
select = jQuery( element ).selectWoo( selectWooOptions );
1872
1873
select.on( 'change', function() {
1874
selectValue = jQuery( this ).val();
1875
control.setting.set( selectValue );
1876
+ } );
1877
select.val( control.setting._value ).trigger( 'change' );
1878
}
1879
+ } );
1880
/* global kirkiControlLoader */
1881
+ wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend( {
1882
1883
// When we're finished loading continue processing
1884
ready: function() {
1898
initKirkiControl: function() {
1899
1900
var control = this,
1901
+ value = control.getValue(),
1902
+ saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url',
1903
+ preview = control.container.find( '.placeholder, .thumbnail' ),
1904
+ previewImage = ( 'array' === saveAs ) ? value.url : value,
1905
+ removeButton = control.container.find( '.image-upload-remove-button' ),
1906
+ defaultButton = control.container.find( '.image-default-button' );
1907
1908
control.container.find( '.kirki-controls-loading-spinner' ).hide();
1909
1928
}
1929
1930
// If value is default, hide the default button.
1931
+ if ( value === control.params.default ) {
1932
control.container.find( 'image-default-button' ).hide();
1933
}
1934
1937
}
1938
1939
control.container.on( 'click', '.image-upload-button', function( e ) {
1940
+ var image = wp.media( { multiple: false } ).open().on( 'select', function() {
1941
1942
// This will return the selected image from the Media Uploader, the result is an object.
1943
var uploadedImage = image.state().get( 'selection' ).first(),
1944
+ previewImage = uploadedImage.toJSON().sizes.full.url;
1945
1946
if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
1947
previewImage = uploadedImage.toJSON().sizes.medium.url;
1967
removeButton.show();
1968
defaultButton.hide();
1969
}
1970
+ } );
1971
1972
e.preventDefault();
1973
+ } );
1974
1975
control.container.on( 'click', '.image-upload-remove-button', function( e ) {
1976
1977
var preview,
1978
+ removeButton,
1979
+ defaultButton;
1980
1981
e.preventDefault();
1982
1998
defaultButton.show();
1999
}
2000
}
2001
+ } );
2002
2003
control.container.on( 'click', '.image-default-button', function( e ) {
2004
2005
var preview,
2006
+ removeButton,
2007
+ defaultButton;
2008
2009
e.preventDefault();
2010
2011
+ control.saveValue( 'url', control.params.default );
2012
2013
preview = control.container.find( '.placeholder, .thumbnail' );
2014
removeButton = control.container.find( '.image-upload-remove-button' );
2015
defaultButton = control.container.find( '.image-default-button' );
2016
2017
if ( preview.length ) {
2018
+ preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + control.params.default + '" alt="" />' );
2019
}
2020
if ( removeButton.length ) {
2021
removeButton.show();
2022
defaultButton.hide();
2023
}
2024
+ } );
2025
},
2026
2027
/**
2029
*/
2030
getValue: function() {
2031
var control = this,
2032
+ value = control.setting._value,
2033
+ saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';
2034
2035
if ( 'array' === saveAs && _.isString( value ) ) {
2036
value = {
2045
*/
2046
saveValue: function( property, value ) {
2047
var control = this,
2048
+ valueOld = control.setting._value,
2049
+ saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';
2050
2051
if ( 'array' === saveAs ) {
2052
if ( _.isString( valueOld ) ) {
2060
control.setting.set( value );
2061
control.container.find( 'button' ).trigger( 'change' );
2062
}
2063
+ } );
2064
+ wp.customize.controlConstructor['kirki-multicheck'] = wp.customize.kirkiDynamicControl.extend( {
2065
2066
initKirkiControl: function() {
2067
2070
// Save the value
2071
control.container.on( 'change', 'input', function() {
2072
var value = [],
2073
+ i = 0;
2074
2075
// Build the value as an object using the sub-values from individual checkboxes.
2076
jQuery.each( control.params.choices, function( key ) {
2077
if ( control.container.find( 'input[value="' + key + '"]' ).is( ':checked' ) ) {
2078
+ control.container.find( 'input[value="' + key + '"]' ).parent().addClass( 'checked' );
2079
value[ i ] = key;
2080
i++;
2081
+ } else {
2082
+ control.container.find( 'input[value="' + key + '"]' ).parent().removeClass( 'checked' );
2083
}
2084
+ } );
2085
2086
// Update the value in the customizer.
2087
control.setting.set( value );
2088
+ } );
2089
}
2090
+ } );
2091
/* global kirkiControlLoader */
2092
+ wp.customize.controlConstructor['kirki-multicolor'] = wp.customize.Control.extend( {
2093
2094
// When we're finished loading continue processing
2095
ready: function() {
2111
'use strict';
2112
2113
var control = this,
2114
+ colors = control.params.choices,
2115
+ keys = Object.keys( colors ),
2116
+ value = this.params.value,
2117
+ i = 0;
2118
2119
// Proxy function that handles changing the individual colors
2120
function kirkiMulticolorChangeHandler( control, value, subSetting ) {
2121
2122
var picker = control.container.find( '.multicolor-index-' + subSetting ),
2123
+ args = {
2124
change: function() {
2125
2126
// Color controls require a small delay.
2133
control.container.find( '.multicolor-index-' + subSetting ).trigger( 'change' );
2134
}, 100 );
2135
}
2136
+ };
2137
2138
if ( _.isObject( colors.irisArgs ) ) {
2139
_.each( colors.irisArgs, function( irisValue, irisKey ) {
2140
args[ irisKey ] = irisValue;
2141
+ } );
2142
}
2143
2144
// Did we change the value?
2158
saveValue: function( property, value ) {
2159
2160
var control = this,
2161
+ input = control.container.find( '.multicolor-hidden-value' ),
2162
+ val = control.setting._value;
2163
2164
val[ property ] = value;
2165
2166
jQuery( input ).attr( 'value', JSON.stringify( val ) ).trigger( 'change' );
2167
control.setting.set( val );
2168
}
2169
+ } );
2170
+ wp.customize.controlConstructor['kirki-palette'] = wp.customize.kirkiDynamicControl.extend( {} );
2171
/* global kirkiSetSettingValue */
2172
+ wp.customize.controlConstructor['kirki-preset'] = wp.customize.kirkiDynamicControl.extend( {
2173
2174
initKirkiControl: function() {
2175
2176
var control = this,
2177
+ selectValue;
2178
2179
// Trigger a change
2180
this.container.on( 'change', 'select', function() {
2197
// We'll have to loop through them all and apply the changes needed to them.
2198
jQuery.each( value.settings, function( presetSetting, presetSettingValue ) {
2199
kirkiSetSettingValue.set( presetSetting, presetSettingValue );
2200
+ } );
2201
}
2202
+ } );
2203
wp.customize.previewer.refresh();
2204
+ } );
2205
}
2206
+ } );
2207
+ wp.customize.controlConstructor['kirki-radio-buttonset'] = wp.customize.kirkiDynamicControl.extend( {} );
2208
+ wp.customize.controlConstructor['kirki-radio-image'] = wp.customize.kirkiDynamicControl.extend( {} );
2209
/* global kirkiControlLoader */
2210
var RepeaterRow = function( rowIndex, container, label, control ) {
2211
2215
this.rowIndex = rowIndex;
2216
this.container = container;
2217
this.label = label;
2218
+ this.header = this.container.find( '.repeater-row-header' );
2219
2220
this.header.on( 'click', function() {
2221
self.toggleMinimize();
2222
+ } );
2223
2224
this.container.on( 'click', '.repeater-row-remove', function() {
2225
self.remove();
2226
+ } );
2227
2228
this.header.on( 'mousedown', function() {
2229
self.container.trigger( 'row:start-dragging' );
2230
+ } );
2231
2232
this.container.on( 'keyup change', 'input, select, textarea', function( e ) {
2233
self.container.trigger( 'row:update', [ self.rowIndex, jQuery( e.target ).data( 'field' ), e.target ] );
2234
+ } );
2235
2236
this.setRowIndex = function( rowIndex ) {
2237
this.rowIndex = rowIndex;
2250
this.remove = function() {
2251
this.container.slideUp( 300, function() {
2252
jQuery( this ).detach();
2253
+ } );
2254
this.container.trigger( 'row:remove', [ this.rowIndex ] );
2255
};
2256
2257
this.updateLabel = function() {
2258
var rowLabelField,
2259
+ rowLabel,
2260
+ rowLabelSelector;
2261
2262
if ( 'field' === this.label.type ) {
2263
rowLabelField = this.container.find( '.repeater-field [data-field="' + this.label.field + '"]' );
2286
this.updateLabel();
2287
};
2288
2289
+ wp.customize.controlConstructor.repeater = wp.customize.Control.extend( {
2290
2291
// When we're finished loading continue processing
2292
ready: function() {
2308
'use strict';
2309
2310
var control = this,
2311
+ limit,
2312
+ theNewRow;
2313
2314
// The current value set in Control Class (set in Kirki_Customize_Repeater_Control::to_json() function)
2315
var settingValue = this.params.value;
2347
} else {
2348
jQuery( control.selector + ' .limit' ).addClass( 'highlight' );
2349
}
2350
+ } );
2351
2352
this.container.on( 'click', '.repeater-row-remove', function() {
2353
control.currentIndex--;
2354
if ( ! limit || control.currentIndex < limit ) {
2355
jQuery( control.selector + ' .limit' ).removeClass( 'highlight' );
2356
}
2357
+ } );
2358
2359
this.container.on( 'click keypress', '.repeater-field-image .upload-button,.repeater-field-cropped_image .upload-button,.repeater-field-upload .upload-button', function( e ) {
2360
e.preventDefault();
2361
control.$thisButton = jQuery( this );
2362
control.openFrame( e );
2363
+ } );
2364
2365
this.container.on( 'click keypress', '.repeater-field-image .remove-button,.repeater-field-cropped_image .remove-button', function( e ) {
2366
e.preventDefault();
2367
control.$thisButton = jQuery( this );
2368
control.removeImage( e );
2369
+ } );
2370
2371
this.container.on( 'click keypress', '.repeater-field-upload .remove-button', function( e ) {
2372
e.preventDefault();
2373
control.$thisButton = jQuery( this );
2374
control.removeFile( e );
2375
+ } );
2376
2377
/**
2378
* Function that loads the Mustache template
2379
*/
2380
this.repeaterTemplate = _.memoize( function() {
2381
var compiled,
2382
+
2383
+ /*
2384
+ * Underscore's default ERB-style templates are incompatible with PHP
2385
+ * when asp_tags is enabled, so WordPress uses Mustache-inspired templating syntax.
2386
+ *
2387
+ * @see trac ticket #22344.
2388
+ */
2389
+ options = {
2390
evaluate: /<#([\s\S]+?)#>/g,
2391
interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
2392
escape: /\{\{([^\}]+?)\}\}(?!\})/g,
2393
variable: 'data'
2394
+ };
2395
2396
return function( data ) {
2397
compiled = _.template( control.container.find( '.customize-control-repeater-content' ).first().html(), null, options );
2398
return compiled( data );
2399
};
2400
+ } );
2401