Kirki - Version 3.0.10

Version Description

September 21 2017, dev time: 74 hours.

  • Fix: Allow HTML tags in tooltips #1536
  • Fix: Default System Font Stack for Sans Serif Fonts in Typography Fields #1530
  • Fix: HTML entities in repeater text field being encoded on each save? #1523
  • Fix: Some resetting issues #1474
  • Fix: Allow saving image fields as arrays (url,id,width,height) #1529
  • Fix: Allow saving image fields as ID #1498
  • Fix: Inline docs improvements.
  • Fix: $subsets not defined in the Kirki_Modules_Webfonts_Link class.
  • Fix: Coding improvements in the Kirki_Field class.
  • Fix: Performance Improvements in the autoloader see commit
  • Fix: Undefined index notice in the Kirki_Output class.
  • Fix: Sanitization for checkbox, switch and toggle controls.
  • Fix: select2 CSS fix for z-index #1459
  • Fix: Remove button in image controls when there's no image #1469
  • Fix: Background control styling issue when no other color control exists #1472
  • Fix: Checkbox and Toggle don't respect "value_pattern" #1467
  • Fix: Array to string conversion when clicking reset button #1477
  • Fix: Input Field Validation Issue #1486
  • Fix: Typography: output property not working #1484
  • Fix: postMessage does not work properly when using prefix #1479
  • Fix: Use wp_json_encode instead of json_encode.
  • Fix: Use rawurlencode instead of urlencode.
  • New: Added warnings for deprecated functions/methods.
  • New: code control now loads dynamically (performance improvement).
  • New: color-palette control now loads dynamically (performance improvement).
  • New: color control now loads dynamically (performance improvement).
  • New: dashicons control now loads dynamically (performance improvement).
  • New: date control now loads dynamically (performance improvement).
  • New: dimension control now loads dynamically (performance improvement).
  • New: dimensions control now loads dynamically (performance improvement).
  • New: editor control now loads dynamically (performance improvement).
  • New: fontawesome control now loads dynamically (performance improvement).
  • New: generic control now loads dynamically (performance improvement).
  • New: gradient control now loads dynamically (performance improvement).
  • New: multicheck control now loads dynamically (performance improvement).
  • New: number control now loads dynamically (performance improvement).
  • New: palette control now loads dynamically (performance improvement).
  • New: preset control now loads dynamically (performance improvement).
  • New: radio-buttonset control now loads dynamically (performance improvement).
  • New: radio-image control now loads dynamically (performance improvement).
  • New: radio control now loads dynamically (performance improvement).
  • New: select control now loads dynamically (performance improvement).
  • New: slider control now loads dynamically (performance improvement).
  • New: switch control now loads dynamically (performance improvement).
  • New: toggle control now loads dynamically (performance improvement).
Download this release

Release Info

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

Code changes from version 3.0.9 to 3.0.10

Files changed (155) hide show
  1. assets/js/dynamic-control.js +215 -0
  2. assets/vendor/select2/kirki.css +3 -1
  3. autoloader.php +0 -82
  4. class-kirki-autoload.php +131 -0
  5. controls/background/background.css +0 -42
  6. controls/background/background.js +37 -40
  7. controls/background/class-kirki-control-background.php +1 -1
  8. controls/code/class-kirki-control-code.php +2 -2
  9. controls/code/code.css +2 -46
  10. controls/code/code.js +1 -75
  11. controls/color-palette/class-kirki-control-color-palette.php +2 -2
  12. controls/color-palette/color-palette.css +0 -42
  13. controls/color-palette/color-palette.js +1 -31
  14. controls/color-palette/dashicons.css.map +0 -7
  15. controls/color/class-kirki-control-color.php +2 -2
  16. controls/color/color.css +0 -43
  17. controls/color/color.js +4 -22
  18. controls/dashicons/class-kirki-control-dashicons.php +1 -1
  19. controls/dashicons/dashicons.css +0 -42
  20. controls/dashicons/dashicons.js +1 -31
  21. controls/date/class-kirki-control-date.php +2 -2
  22. controls/date/date.css +0 -45
  23. controls/date/date.js +1 -20
  24. controls/dimension/class-kirki-control-dimension.php +3 -3
  25. controls/dimension/dimension.css +0 -43
  26. controls/dimension/dimension.js +1 -44
  27. controls/dimensions/class-kirki-control-dimensions.php +4 -4
  28. controls/dimensions/dimensions.css +0 -42
  29. controls/dimensions/dimensions.js +2 -46
  30. controls/editor/class-kirki-control-editor.php +2 -2
  31. controls/editor/editor.css +0 -44
  32. controls/editor/editor.js +30 -61
  33. controls/fontawesome/class-kirki-control-fontawesome.php +2 -2
  34. controls/fontawesome/fontawesome.css +0 -43
  35. controls/fontawesome/fontawesome.js +2 -22
  36. controls/generic/class-kirki-control-generic.php +2 -2
  37. controls/generic/generic.css +5 -49
  38. controls/generic/generic.js +1 -31
  39. controls/gradient/class-kirki-control-gradient.php +2 -2
  40. controls/gradient/gradient.css +0 -43
  41. controls/gradient/gradient.js +2 -21
  42. controls/image/class-kirki-control-image.php +11 -6
  43. controls/image/image.css +0 -43
  44. controls/image/image.js +41 -33
  45. controls/multicheck/class-kirki-control-multicheck.php +2 -2
  46. controls/multicheck/multicheck.css +0 -48
  47. controls/multicheck/multicheck.js +1 -21
  48. controls/multicolor/class-kirki-control-multicolor.php +0 -1
  49. controls/multicolor/multicolor.css +0 -42
  50. controls/multicolor/multicolor.js +1 -4
  51. controls/number/class-kirki-control-number.php +2 -2
  52. controls/number/number.css +0 -44
  53. controls/number/number.js +5 -25
  54. controls/palette/class-kirki-control-palette.php +2 -2
  55. controls/palette/palette.css +0 -42
  56. controls/palette/palette.js +1 -31
  57. controls/preset/class-kirki-control-preset.php +2 -2
  58. controls/preset/preset.css +0 -43
  59. controls/preset/preset.js +1 -20
  60. controls/radio-buttonset/class-kirki-control-radio-buttonset.php +3 -7
  61. controls/radio-buttonset/radio-buttonset.css +12 -56
  62. controls/radio-buttonset/radio-buttonset.js +1 -31
  63. controls/radio-image/class-kirki-control-radio-image.php +2 -2
  64. controls/radio-image/radio-image.css +30 -74
  65. controls/radio-image/radio-image.js +1 -33
  66. controls/radio/class-kirki-control-radio.php +2 -2
  67. controls/radio/radio.css +0 -42
  68. controls/radio/radio.js +1 -31
  69. controls/repeater/class-kirki-control-repeater.php +2 -2
  70. controls/repeater/class-kirki-settings-repeater-setting.php +1 -2
  71. controls/repeater/repeater.css +0 -41
  72. controls/repeater/repeater.js +18 -35
  73. controls/select/class-kirki-control-select.php +2 -2
  74. controls/select/select.css +0 -43
  75. controls/select/select.js +2 -22
  76. controls/slider/class-kirki-control-slider.php +2 -2
  77. controls/slider/slider.css +0 -43
  78. controls/slider/slider.js +2 -22
  79. controls/sortable/class-kirki-control-sortable.php +0 -1
  80. controls/sortable/sortable.css +13 -57
  81. controls/switch/class-kirki-control-switch.php +2 -2
  82. controls/switch/switch.css +1 -44
  83. controls/switch/switch.js +6 -20
  84. controls/toggle/class-kirki-control-toggle.php +2 -2
  85. controls/toggle/toggle.css +0 -42
  86. controls/toggle/toggle.js +1 -20
  87. controls/typography/class-kirki-control-typography.php +15 -16
  88. controls/typography/typography.css +2 -54
  89. controls/typography/typography.js +57 -44
  90. core/class-kirki-config.php +6 -6
  91. core/class-kirki-field.php +52 -236
  92. core/class-kirki-helper.php +16 -11
  93. core/class-kirki-init.php +33 -54
  94. core/class-kirki-modules.php +18 -16
  95. core/class-kirki-sanitize-values.php +2 -1
  96. core/class-kirki-settings.php +17 -13
  97. core/class-kirki-util.php +33 -78
  98. core/class-kirki-values.php +40 -0
  99. core/class-kirki.php +22 -4
  100. core/deprecated.php +6 -17
  101. field/class-kirki-field-checkbox.php +3 -5
  102. field/class-kirki-field-code.php +3 -0
  103. field/class-kirki-field-color-alpha.php +3 -0
  104. field/class-kirki-field-color.php +4 -1
  105. field/class-kirki-field-dashicons.php +0 -3
  106. field/class-kirki-field-dimensions.php +3 -0
  107. field/class-kirki-field-editor.php +15 -13
  108. field/class-kirki-field-gradient.php +3 -0
  109. field/class-kirki-field-image.php +3 -0
  110. field/class-kirki-field-kirki-generic.php +3 -0
  111. field/class-kirki-field-multicolor.php +3 -0
  112. field/class-kirki-field-number.php +34 -25
  113. field/class-kirki-field-radio.php +2 -0
  114. field/class-kirki-field-repeater.php +2 -2
  115. field/class-kirki-field-slider.php +0 -16
  116. field/class-kirki-field-sortable.php +1 -1
  117. field/class-kirki-field-spacing.php +3 -0
  118. field/class-kirki-field-switch.php +10 -16
  119. field/class-kirki-field-text.php +3 -0
  120. field/class-kirki-field-textarea.php +3 -0
  121. field/class-kirki-field-typography.php +44 -7
  122. field/class-kirki-field-url.php +3 -0
  123. kirki.php +10 -14
  124. l10n.php +2 -1
  125. modules/css/class-kirki-css-to-file.php +2 -2
  126. modules/css/class-kirki-modules-css-generator.php +1 -0
  127. modules/css/class-kirki-modules-css.php +1 -0
  128. modules/css/class-kirki-output.php +72 -64
  129. modules/css/field/class-kirki-output-field-background.php +14 -34
  130. modules/css/field/class-kirki-output-field-dimensions.php +18 -8
  131. modules/css/field/class-kirki-output-field-image.php +48 -0
  132. modules/css/field/class-kirki-output-field-typography.php +1 -0
  133. modules/customizer-styling/class-kirki-modules-customizer-styling.php +306 -267
  134. modules/post-meta/class-kirki-modules-post-meta.php +91 -0
  135. modules/post-meta/customize-controls.js +23 -0
  136. modules/post-meta/customize-preview.js +19 -0
  137. modules/postmessage/class-kirki-modules-postmessage.php +34 -11
  138. modules/reset/reset.css +0 -1
  139. modules/reset/reset.css.map +1 -1
  140. modules/reset/reset.scss +0 -1
  141. modules/reset/set-setting-value.js +3 -1
  142. modules/resize/class-kirki-modules-resize.php +0 -65
  143. modules/resize/resize.css +0 -46
  144. modules/resize/resize.css.map +0 -7
  145. modules/resize/resize.js +0 -33
  146. modules/resize/resize.scss +0 -52
  147. modules/tooltips/tooltip.css +0 -2
  148. modules/tooltips/tooltip.css.map +1 -1
  149. modules/tooltips/tooltip.js +47 -35
  150. modules/tooltips/tooltip.scss +0 -4
  151. modules/webfonts/class-kirki-fonts-google.php +1 -1
  152. modules/webfonts/class-kirki-fonts.php +1 -1
  153. modules/webfonts/class-kirki-modules-webfonts-link.php +11 -3
  154. modules/webfonts/class-kirki-modules-webfonts.php +2 -3
  155. modules/webfonts/webfonts.php +1 -1
assets/js/dynamic-control.js ADDED
@@ -0,0 +1,215 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * The majority of the code in this file
3
+ * is derived from the wp-customize-posts plugin
4
+ * and the work of @westonruter to whom I am very grateful.
5
+ *
6
+ * @see https://github.com/xwp/wp-customize-posts
7
+ */
8
+
9
+ ( function() {
10
+ 'use strict';
11
+
12
+ /**
13
+ * A dynamic color-alpha control.
14
+ *
15
+ * @class
16
+ * @augments wp.customize.Control
17
+ * @augments wp.customize.Class
18
+ */
19
+ wp.customize.kirkiDynamicControl = wp.customize.Control.extend({
20
+
21
+ initialize: function( id, options ) {
22
+ var control = this,
23
+ args = options || {};
24
+
25
+ args.params = args.params || {};
26
+ if ( ! args.params.type ) {
27
+ args.params.type = 'kirki-generic';
28
+ }
29
+ if ( ! args.params.content ) {
30
+ args.params.content = jQuery( '<li></li>' );
31
+ args.params.content.attr( 'id', 'customize-control-' + id.replace( /]/g, '' ).replace( /\[/g, '-' ) );
32
+ args.params.content.attr( 'class', 'customize-control customize-control-' + args.params.type );
33
+ }
34
+
35
+ control.propertyElements = [];
36
+ wp.customize.Control.prototype.initialize.call( control, id, args );
37
+ },
38
+
39
+ /**
40
+ * Add bidirectional data binding links between inputs and the setting(s).
41
+ *
42
+ * This is copied from wp.customize.Control.prototype.initialize(). It
43
+ * should be changed in Core to be applied once the control is embedded.
44
+ *
45
+ * @private
46
+ * @returns {void}
47
+ */
48
+ _setUpSettingRootLinks: function() {
49
+ var control = this,
50
+ nodes = control.container.find( '[data-customize-setting-link]' );
51
+
52
+ nodes.each( function() {
53
+ var node = jQuery( this );
54
+
55
+ wp.customize( node.data( 'customizeSettingLink' ), function( setting ) {
56
+ var element = new wp.customize.Element( node );
57
+ control.elements.push( element );
58
+ element.sync( setting );
59
+ element.set( setting() );
60
+ });
61
+ });
62
+ },
63
+
64
+ /**
65
+ * Add bidirectional data binding links between inputs and the setting properties.
66
+ *
67
+ * @private
68
+ * @returns {void}
69
+ */
70
+ _setUpSettingPropertyLinks: function() {
71
+ var control = this,
72
+ nodes;
73
+
74
+ if ( ! control.setting ) {
75
+ return;
76
+ }
77
+
78
+ nodes = control.container.find( '[data-customize-setting-property-link]' );
79
+
80
+ nodes.each( function() {
81
+ var node = jQuery( this ),
82
+ element,
83
+ propertyName = node.data( 'customizeSettingPropertyLink' );
84
+
85
+ element = new wp.customize.Element( node );
86
+ control.propertyElements.push( element );
87
+ element.set( control.setting()[ propertyName ] );
88
+
89
+ element.bind( function( newPropertyValue ) {
90
+ var newSetting = control.setting();
91
+ if ( newPropertyValue === newSetting[ propertyName ] ) {
92
+ return;
93
+ }
94
+ newSetting = _.clone( newSetting );
95
+ newSetting[ propertyName ] = newPropertyValue;
96
+ control.setting.set( newSetting );
97
+ } );
98
+ control.setting.bind( function( newValue ) {
99
+ if ( newValue[ propertyName ] !== element.get() ) {
100
+ element.set( newValue[ propertyName ] );
101
+ }
102
+ } );
103
+ });
104
+ },
105
+
106
+ /**
107
+ * @inheritdoc
108
+ */
109
+ ready: function() {
110
+ var control = this;
111
+
112
+ control._setUpSettingRootLinks();
113
+ control._setUpSettingPropertyLinks();
114
+
115
+ wp.customize.Control.prototype.ready.call( control );
116
+
117
+ control.deferred.embedded.done( function() {
118
+ control.initKirkiControl();
119
+ });
120
+ },
121
+
122
+ /**
123
+ * Embed the control in the document.
124
+ *
125
+ * Override the embed() method to do nothing,
126
+ * so that the control isn't embedded on load,
127
+ * unless the containing section is already expanded.
128
+ *
129
+ * @returns {void}
130
+ */
131
+ embed: function() {
132
+ var control = this,
133
+ sectionId = control.section();
134
+
135
+ if ( ! sectionId ) {
136
+ return;
137
+ }
138
+
139
+ wp.customize.section( sectionId, function( section ) {
140
+ if ( section.expanded() || wp.customize.settings.autofocus.control === control.id ) {
141
+ control.actuallyEmbed();
142
+ } else {
143
+ section.expanded.bind( function( expanded ) {
144
+ if ( expanded ) {
145
+ control.actuallyEmbed();
146
+ }
147
+ } );
148
+ }
149
+ } );
150
+ },
151
+
152
+ /**
153
+ * Deferred embedding of control when actually
154
+ *
155
+ * This function is called in Section.onChangeExpanded() so the control
156
+ * will only get embedded when the Section is first expanded.
157
+ *
158
+ * @returns {void}
159
+ */
160
+ actuallyEmbed: function() {
161
+ var control = this;
162
+ if ( 'resolved' === control.deferred.embedded.state() ) {
163
+ return;
164
+ }
165
+ control.renderContent();
166
+ control.deferred.embedded.resolve(); // This triggers control.ready().
167
+ },
168
+
169
+ /**
170
+ * This is not working with autofocus.
171
+ *
172
+ * @param {object} [args] Args.
173
+ * @returns {void}
174
+ */
175
+ focus: function( args ) {
176
+ var control = this;
177
+ control.actuallyEmbed();
178
+ wp.customize.Control.prototype.focus.call( control, args );
179
+ },
180
+
181
+ initKirkiControl: function() {
182
+
183
+ var control = this;
184
+
185
+ // Save the value
186
+ this.container.on( 'change keyup paste click', 'input', function() {
187
+ control.setting.set( jQuery( this ).val() );
188
+ });
189
+ },
190
+
191
+ kirkiValidateCSSValue: function( value ) {
192
+
193
+ var validUnits = ['rem', 'em', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'vh', 'vw', 'vmin', 'vmax'],
194
+ numericValue,
195
+ unit;
196
+
197
+ // 0 is always a valid value, and we can't check calc() values effectively.
198
+ if ( '0' === value || ( 0 <= value.indexOf( 'calc(' ) && 0 <= value.indexOf( ')' ) ) ) {
199
+ return true;
200
+ }
201
+
202
+ // Get the numeric value.
203
+ numericValue = parseFloat( value );
204
+
205
+ // Get the unit
206
+ unit = value.replace( numericValue, '' );
207
+
208
+ // Check the validity of the numeric value and units.
209
+ if ( isNaN( numericValue ) || -1 === jQuery.inArray( unit, validUnits ) ) {
210
+ return false;
211
+ }
212
+ return true;
213
+ }
214
+ });
215
+ })();
assets/vendor/select2/kirki.css CHANGED
@@ -21,6 +21,8 @@
21
  border-radius: 0; }
22
 
23
  .wp-customizer .select2-container {
24
- z-index: 999999 !important; }
 
 
25
 
26
  /*# sourceMappingURL=kirki.css.map */
21
  border-radius: 0; }
22
 
23
  .wp-customizer .select2-container {
24
+ z-index: 8 !important; }
25
+ .wp-customizer .select2-container.select2-container--open {
26
+ z-index: 999999 !important; }
27
 
28
  /*# sourceMappingURL=kirki.css.map */
autoloader.php DELETED
@@ -1,82 +0,0 @@
1
- <?php
2
- /**
3
- * The Kirki autoloader.
4
- * Handles locating and loading other class-files.
5
- *
6
- * @package Kirki
7
- * @category Core
8
- * @author Aristeides Stathopoulos
9
- * @copyright Copyright (c) 2017, Aristeides Stathopoulos
10
- * @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
11
- * @since 1.0
12
- */
13
-
14
- if ( ! function_exists( 'kirki_autoload_classes' ) ) {
15
- /**
16
- * The Kirki class autoloader.
17
- * Finds the path to a class that we're requiring and includes the file.
18
- *
19
- * @param string $class_name The name of the class we're trying to load.
20
- */
21
- function kirki_autoload_classes( $class_name ) {
22
- $paths = array();
23
- if ( 0 === stripos( $class_name, 'Kirki' ) ) {
24
-
25
- // Build the filename.
26
- $filename = 'class-' . strtolower( str_replace( '_', '-', $class_name ) ) . '.php';
27
-
28
- // Break class-name is parts.
29
- $name_parts = explode( '_', str_replace( 'Kirki_', '', $class_name ) );
30
-
31
- // Handle modules loading.
32
- if ( isset( $name_parts[0] ) && 'Modules' === $name_parts[0] ) {
33
- $path = dirname( __FILE__ ) . '/modules/';
34
- $path .= strtolower( str_replace( '_', '-', str_replace( 'Kirki_Modules_', '', $class_name ) ) ) . '/';
35
-
36
- $paths[] = $path . $filename;
37
- }
38
-
39
- if ( isset( $name_parts[0] ) ) {
40
-
41
- // Handle controls loading.
42
- if ( 'Control' === $name_parts[0] ) {
43
- $path = dirname( __FILE__ ) . '/controls/';
44
- $path .= strtolower( str_replace( '_', '-', str_replace( 'Kirki_Control_', '', $class_name ) ) ) . '/';
45
-
46
- $paths[] = $path . $filename;
47
- }
48
-
49
- // Handle settings loading.
50
- if ( 'Settings' === $name_parts[0] ) {
51
- $path = dirname( __FILE__ ) . '/controls/';
52
- $path .= strtolower( str_replace( '_', '-', str_replace( array( 'Kirki_Settings_', '_Setting' ), '', $class_name ) ) ) . '/';
53
-
54
- $paths[] = $path . $filename;
55
- }
56
- }
57
-
58
- $paths[] = dirname( __FILE__ ) . '/core/' . $filename;
59
- $paths[] = dirname( __FILE__ ) . '/lib/' . $filename;
60
-
61
- $substr = str_replace( 'Kirki_', '', $class_name );
62
- $exploded = explode( '_', $substr );
63
- $levels = count( $exploded );
64
-
65
- $previous_path = '';
66
- for ( $i = 0; $i < $levels; $i++ ) {
67
- $paths[] = dirname( __FILE__ ) . '/' . $previous_path . strtolower( $exploded[ $i ] ) . '/' . $filename;
68
- $previous_path .= strtolower( $exploded[ $i ] ) . '/';
69
- }
70
-
71
- foreach ( $paths as $path ) {
72
- $path = wp_normalize_path( $path );
73
- if ( file_exists( $path ) ) {
74
- include_once $path;
75
- return;
76
- }
77
- }
78
- } // End if().
79
- }
80
- // Run the autoloader.
81
- spl_autoload_register( 'kirki_autoload_classes' );
82
- } // End if().
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
class-kirki-autoload.php ADDED
@@ -0,0 +1,131 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * The Kirki autoloader.
4
+ * Handles locating and loading other class-files.
5
+ *
6
+ * @package Kirki
7
+ * @category Core
8
+ * @author Aristeides Stathopoulos
9
+ * @copyright Copyright (c) 2017, Aristeides Stathopoulos
10
+ * @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
11
+ * @since 1.0
12
+ */
13
+
14
+ /**
15
+ * Autoloader class.
16
+ *
17
+ * @since 3.0.10
18
+ */
19
+ class Kirki_Autoload {
20
+
21
+ /**
22
+ * Cached paths.
23
+ *
24
+ * @access private
25
+ * @since 3.0.10
26
+ * @var array
27
+ */
28
+ private $cached_paths = array();
29
+
30
+ /**
31
+ * Class constructor.
32
+ *
33
+ * @access public
34
+ * @since 3.0.10
35
+ */
36
+ public function __construct() {
37
+
38
+ spl_autoload_register( array( $this, 'autoload' ) );
39
+ }
40
+
41
+ /**
42
+ * The Kirki class autoloader.
43
+ * Finds the path to a class that we're requiring and includes the file.
44
+ *
45
+ * @access protected
46
+ * @since 3.0.10
47
+ * @param string $class_name The name of the class we're trying to load.
48
+ */
49
+ protected function autoload( $class_name ) {
50
+
51
+ // Not a Kirki file, early exit.
52
+ if ( 0 !== stripos( $class_name, 'Kirki' ) ) {
53
+ return;
54
+ }
55
+
56
+ // Check if we've got it cached and ready.
57
+ if ( isset( $this->cached_paths[ $class_name ] ) && file_exists( $this->cached_paths[ $class_name ] ) ) {
58
+ include_once $this->cached_paths[ $class_name ];
59
+ return;
60
+ }
61
+
62
+ $paths = $this->get_paths( $class_name );
63
+
64
+ foreach ( $paths as $path ) {
65
+ $path = wp_normalize_path( $path );
66
+ if ( file_exists( $path ) ) {
67
+ $this->cached_paths[ $class_name ] = $path;
68
+ include_once $path;
69
+ return;
70
+ }
71
+ }
72
+ }
73
+
74
+ /**
75
+ * Get an array of possible paths for the file.
76
+ *
77
+ * @access protected
78
+ * @since 3.0.10
79
+ * @param string $class_name The name of the class we're trying to load.
80
+ * @return array
81
+ */
82
+ protected function get_paths( $class_name ) {
83
+
84
+ $paths = array();
85
+ // Build the filename.
86
+ $filename = 'class-' . strtolower( str_replace( '_', '-', $class_name ) ) . '.php';
87
+
88
+ // Break class-name is parts.
89
+ $name_parts = explode( '_', str_replace( 'Kirki_', '', $class_name ) );
90
+
91
+ // Handle modules loading.
92
+ if ( isset( $name_parts[0] ) && 'Modules' === $name_parts[0] ) {
93
+ $path = dirname( __FILE__ ) . '/modules/';
94
+ $path .= strtolower( str_replace( '_', '-', str_replace( 'Kirki_Modules_', '', $class_name ) ) ) . '/';
95
+ $paths[] = $path . $filename;
96
+ }
97
+
98
+ if ( isset( $name_parts[0] ) ) {
99
+
100
+ // Handle controls loading.
101
+ if ( 'Control' === $name_parts[0] ) {
102
+ $path = dirname( __FILE__ ) . '/controls/';
103
+ $path .= strtolower( str_replace( '_', '-', str_replace( 'Kirki_Control_', '', $class_name ) ) ) . '/';
104
+
105
+ $paths[] = $path . $filename;
106
+ }
107
+
108
+ // Handle settings loading.
109
+ if ( 'Settings' === $name_parts[0] ) {
110
+ $path = dirname( __FILE__ ) . '/controls/';
111
+ $path .= strtolower( str_replace( '_', '-', str_replace( array( 'Kirki_Settings_', '_Setting' ), '', $class_name ) ) ) . '/';
112
+
113
+ $paths[] = $path . $filename;
114
+ }
115
+ }
116
+
117
+ $paths[] = dirname( __FILE__ ) . '/core/' . $filename;
118
+ $paths[] = dirname( __FILE__ ) . '/lib/' . $filename;
119
+
120
+ $substr = str_replace( 'Kirki_', '', $class_name );
121
+ $exploded = explode( '_', $substr );
122
+ $levels = count( $exploded );
123
+
124
+ $previous_path = '';
125
+ for ( $i = 0; $i < $levels; $i++ ) {
126
+ $paths[] = dirname( __FILE__ ) . '/' . $previous_path . strtolower( $exploded[ $i ] ) . '/' . $filename;
127
+ $previous_path .= strtolower( $exploded[ $i ] ) . '/';
128
+ }
129
+ return $paths;
130
+ }
131
+ }
controls/background/background.css CHANGED
@@ -23,47 +23,5 @@
23
  .customize-control-kirki-background .background-size .buttonset .switch-input:checked + .switch-label {
24
  background-color: #3498DB;
25
  color: #fff; }
26
- .customize-control-kirki-background .kirki-controls-loading-spinner {
27
- position: absolute;
28
- top: 0;
29
- left: 0;
30
- margin: 0;
31
- width: 100%;
32
- height: 100%;
33
- z-index: 999;
34
- text-align: center;
35
- background-color: #eee; }
36
- .customize-control-kirki-background .kirki-controls-loading-spinner > div {
37
- margin-top: 20px;
38
- width: 18px;
39
- height: 18px;
40
- background-color: #333;
41
- border-radius: 100%;
42
- display: inline-block;
43
- -webkit-animation: kirkibouncedelay 1.4s infinite ease-in-out both;
44
- animation: kirkibouncedelay 1.4s infinite ease-in-out both; }
45
- .customize-control-kirki-background .kirki-controls-loading-spinner .bounce1 {
46
- -webkit-animation-delay: -0.32s;
47
- animation-delay: -0.32s; }
48
- .customize-control-kirki-background .kirki-controls-loading-spinner .bounce2 {
49
- -webkit-animation-delay: -0.16s;
50
- animation-delay: -0.16s; }
51
-
52
- @-webkit-keyframes kirkibouncedelay {
53
- 0%,
54
- 100%,
55
- 80% {
56
- -webkit-transform: scale(0); }
57
- 40% {
58
- -webkit-transform: scale(1); } }
59
- @keyframes kirkibouncedelay {
60
- 0%,
61
- 100%,
62
- 80% {
63
- -webkit-transform: scale(0);
64
- transform: scale(0); }
65
- 40% {
66
- -webkit-transform: scale(1);
67
- transform: scale(1); } }
68
 
69
  /*# sourceMappingURL=background.css.map */
23
  .customize-control-kirki-background .background-size .buttonset .switch-input:checked + .switch-label {
24
  background-color: #3498DB;
25
  color: #fff; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
 
27
  /*# sourceMappingURL=background.css.map */
controls/background/background.js CHANGED
@@ -21,8 +21,6 @@ wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.exten
21
  value = control.getValue(),
22
  picker = control.container.find( '.kirki-color-control' );
23
 
24
- control.container.find( '.kirki-controls-loading-spinner' ).hide();
25
-
26
  // Hide unnecessary controls if the value doesn't have an image.
27
  if ( _.isUndefined( value['background-image'] ) || '' === value['background-image'] ) {
28
  control.container.find( '.background-wrapper > .background-repeat' ).hide();
@@ -64,43 +62,43 @@ wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.exten
64
  control.container.on( 'click', '.background-image-upload-button', function( e ) {
65
  var image = wp.media({ multiple: false }).open().on( 'select', function() {
66
 
67
- // This will return the selected image from the Media Uploader, the result is an object.
68
- var uploadedImage = image.state().get( 'selection' ).first(),
69
- previewImage = uploadedImage.toJSON().sizes.full.url,
70
- imageUrl,
71
- imageID,
72
- imageWidth,
73
- imageHeight,
74
- preview,
75
- removeButton;
76
-
77
- if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
78
- previewImage = uploadedImage.toJSON().sizes.medium.url;
79
- } else if ( ! _.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) {
80
- previewImage = uploadedImage.toJSON().sizes.thumbnail.url;
81
- }
82
-
83
- imageUrl = uploadedImage.toJSON().sizes.full.url;
84
- imageID = uploadedImage.toJSON().id;
85
- imageWidth = uploadedImage.toJSON().width;
86
- imageHeight = uploadedImage.toJSON().height;
87
-
88
- // Show extra controls if the value has an image.
89
- if ( '' !== imageUrl ) {
90
- control.container.find( '.background-wrapper > .background-repeat, .background-wrapper > .background-position, .background-wrapper > .background-size, .background-wrapper > .background-attachment' ).show();
91
- }
92
-
93
- control.saveValue( 'background-image', imageUrl );
94
- preview = control.container.find( '.placeholder, .thumbnail' );
95
- removeButton = control.container.find( '.background-image-upload-remove-button' );
96
-
97
- if ( preview.length ) {
98
- preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
99
- }
100
- if ( removeButton.length ) {
101
- removeButton.show();
102
- }
103
- });
104
 
105
  e.preventDefault();
106
  });
@@ -172,6 +170,5 @@ wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.exten
172
  valueObj[ property ] = value;
173
  control.setting.set( valueObj );
174
  jQuery( input ).attr( 'value', JSON.stringify( valueObj ) ).trigger( 'change' );
175
-
176
  }
177
  });
21
  value = control.getValue(),
22
  picker = control.container.find( '.kirki-color-control' );
23
 
 
 
24
  // Hide unnecessary controls if the value doesn't have an image.
25
  if ( _.isUndefined( value['background-image'] ) || '' === value['background-image'] ) {
26
  control.container.find( '.background-wrapper > .background-repeat' ).hide();
62
  control.container.on( 'click', '.background-image-upload-button', function( e ) {
63
  var image = wp.media({ multiple: false }).open().on( 'select', function() {
64
 
65
+ // This will return the selected image from the Media Uploader, the result is an object.
66
+ var uploadedImage = image.state().get( 'selection' ).first(),
67
+ previewImage = uploadedImage.toJSON().sizes.full.url,
68
+ imageUrl,
69
+ imageID,
70
+ imageWidth,
71
+ imageHeight,
72
+ preview,
73
+ removeButton;
74
+
75
+ if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
76
+ previewImage = uploadedImage.toJSON().sizes.medium.url;
77
+ } else if ( ! _.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) {
78
+ previewImage = uploadedImage.toJSON().sizes.thumbnail.url;
79
+ }
80
+
81
+ imageUrl = uploadedImage.toJSON().sizes.full.url;
82
+ imageID = uploadedImage.toJSON().id;
83
+ imageWidth = uploadedImage.toJSON().width;
84
+ imageHeight = uploadedImage.toJSON().height;
85
+
86
+ // Show extra controls if the value has an image.
87
+ if ( '' !== imageUrl ) {
88
+ control.container.find( '.background-wrapper > .background-repeat, .background-wrapper > .background-position, .background-wrapper > .background-size, .background-wrapper > .background-attachment' ).show();
89
+ }
90
+
91
+ control.saveValue( 'background-image', imageUrl );
92
+ preview = control.container.find( '.placeholder, .thumbnail' );
93
+ removeButton = control.container.find( '.background-image-upload-remove-button' );
94
+
95
+ if ( preview.length ) {
96
+ preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
97
+ }
98
+ if ( removeButton.length ) {
99
+ removeButton.show();
100
+ }
101
+ });
102
 
103
  e.preventDefault();
104
  });
170
  valueObj[ property ] = value;
171
  control.setting.set( valueObj );
172
  jQuery( input ).attr( 'value', JSON.stringify( valueObj ) ).trigger( 'change' );
 
173
  }
174
  });
controls/background/class-kirki-control-background.php CHANGED
@@ -50,6 +50,7 @@ class Kirki_Control_Background extends WP_Customize_Control {
50
 
51
  wp_enqueue_style( 'wp-color-picker-alpha' );
52
  wp_enqueue_script( 'wp-color-picker-alpha', trailingslashit( Kirki::$url ) . 'assets/vendor/wp-color-picker-alpha/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2', true );
 
53
 
54
  wp_enqueue_script( 'kirki-background', trailingslashit( Kirki::$url ) . 'controls/background/background.js', array( 'jquery', 'wp-color-picker-alpha' ) );
55
  wp_enqueue_style( 'kirki-background', trailingslashit( Kirki::$url ) . 'controls/background/background.css', null );
@@ -105,7 +106,6 @@ class Kirki_Control_Background extends WP_Customize_Control {
105
  */
106
  protected function content_template() {
107
  ?>
108
- <div class="kirki-controls-loading-spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>
109
  <label>
110
  <span class="customize-control-title">{{{ data.label }}}</span>
111
  <# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
50
 
51
  wp_enqueue_style( 'wp-color-picker-alpha' );
52
  wp_enqueue_script( 'wp-color-picker-alpha', trailingslashit( Kirki::$url ) . 'assets/vendor/wp-color-picker-alpha/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2', true );
53
+ wp_enqueue_style( 'wp-color-picker' );
54
 
55
  wp_enqueue_script( 'kirki-background', trailingslashit( Kirki::$url ) . 'controls/background/background.js', array( 'jquery', 'wp-color-picker-alpha' ) );
56
  wp_enqueue_style( 'kirki-background', trailingslashit( Kirki::$url ) . 'controls/background/background.css', null );
106
  */
107
  protected function content_template() {
108
  ?>
 
109
  <label>
110
  <span class="customize-control-title">{{{ data.label }}}</span>
111
  <# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
controls/code/class-kirki-control-code.php CHANGED
@@ -55,6 +55,7 @@ class Kirki_Control_Code extends WP_Customize_Control {
55
 
56
  // Register codemirror.
57
  wp_register_script( 'codemirror', trailingslashit( Kirki::$url ) . 'assets/vendor/codemirror/lib/codemirror.js', array( 'jquery' ) );
 
58
 
59
  // If we're using html mode, we'll also need to include the multiplex addon
60
  // as well as dependencies for XML, JS, CSS languages.
@@ -81,7 +82,7 @@ class Kirki_Control_Code extends WP_Customize_Control {
81
  // Add theme styles.
82
  wp_enqueue_style( 'codemirror-theme-' . $this->choices['theme'], trailingslashit( Kirki::$url ) . 'assets/vendor/codemirror/theme/' . $this->choices['theme'] . '.css' );
83
 
84
- wp_enqueue_script( 'kirki-code', trailingslashit( Kirki::$url ) . 'controls/code/code.js', array( 'jquery', 'customize-base', 'codemirror' ), false, true );
85
  wp_enqueue_style( 'kirki-code-css', trailingslashit( Kirki::$url ) . 'controls/code/code.css', null );
86
 
87
  }
@@ -123,7 +124,6 @@ class Kirki_Control_Code extends WP_Customize_Control {
123
  */
124
  protected function content_template() {
125
  ?>
126
- <div class="kirki-controls-loading-spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>
127
  <label>
128
  <# if ( data.label ) { #><span class="customize-control-title">{{{ data.label }}}</span><# } #>
129
  <# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
55
 
56
  // Register codemirror.
57
  wp_register_script( 'codemirror', trailingslashit( Kirki::$url ) . 'assets/vendor/codemirror/lib/codemirror.js', array( 'jquery' ) );
58
+ wp_enqueue_script( 'kirki-dynamic-control', trailingslashit( Kirki::$url ) . 'assets/js/dynamic-control.js', array( 'jquery', 'customize-base' ), false, true );
59
 
60
  // If we're using html mode, we'll also need to include the multiplex addon
61
  // as well as dependencies for XML, JS, CSS languages.
82
  // Add theme styles.
83
  wp_enqueue_style( 'codemirror-theme-' . $this->choices['theme'], trailingslashit( Kirki::$url ) . 'assets/vendor/codemirror/theme/' . $this->choices['theme'] . '.css' );
84
 
85
+ wp_enqueue_script( 'kirki-code', trailingslashit( Kirki::$url ) . 'controls/code/code.js', array( 'jquery', 'customize-base', 'kirki-dynamic-control', 'codemirror' ), false, true );
86
  wp_enqueue_style( 'kirki-code-css', trailingslashit( Kirki::$url ) . 'controls/code/code.css', null );
87
 
88
  }
124
  */
125
  protected function content_template() {
126
  ?>
 
127
  <label>
128
  <# if ( data.label ) { #><span class="customize-control-title">{{{ data.label }}}</span><# } #>
129
  <# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
controls/code/code.css CHANGED
@@ -3,48 +3,7 @@
3
  .customize-control-kirki-code .CodeMirror {
4
  margin-left: -12px;
5
  margin-right: -12px; }
6
- .customize-control-kirki-code .kirki-controls-loading-spinner {
7
- position: absolute;
8
- top: 0;
9
- left: 0;
10
- margin: 0;
11
- width: 100%;
12
- height: 100%;
13
- z-index: 999;
14
- text-align: center;
15
- background-color: #eee; }
16
- .customize-control-kirki-code .kirki-controls-loading-spinner > div {
17
- margin-top: 20px;
18
- width: 18px;
19
- height: 18px;
20
- background-color: #333;
21
- border-radius: 100%;
22
- display: inline-block;
23
- -webkit-animation: kirkibouncedelay 1.4s infinite ease-in-out both;
24
- animation: kirkibouncedelay 1.4s infinite ease-in-out both; }
25
- .customize-control-kirki-code .kirki-controls-loading-spinner .bounce1 {
26
- -webkit-animation-delay: -0.32s;
27
- animation-delay: -0.32s; }
28
- .customize-control-kirki-code .kirki-controls-loading-spinner .bounce2 {
29
- -webkit-animation-delay: -0.16s;
30
- animation-delay: -0.16s; }
31
-
32
- @-webkit-keyframes kirkibouncedelay {
33
- 0%,
34
- 100%,
35
- 80% {
36
- -webkit-transform: scale(0); }
37
- 40% {
38
- -webkit-transform: scale(1); } }
39
- @keyframes kirkibouncedelay {
40
- 0%,
41
- 100%,
42
- 80% {
43
- -webkit-transform: scale(0);
44
- transform: scale(0); }
45
- 40% {
46
- -webkit-transform: scale(1);
47
- transform: scale(1); } }
48
  .CodeMirror {
49
  /* Set height, width, borders, and global font properties here */
50
  font-family: monospace;
@@ -291,10 +250,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
291
 
292
  .CodeMirror-gutter {
293
  white-space: normal;
294
- margin-bottom: -30px;
295
- /* Hack to make IE7 behave */
296
- *zoom: 1;
297
- *display: inline; }
298
 
299
  .CodeMirror-gutter-wrapper {
300
  position: absolute;
3
  .customize-control-kirki-code .CodeMirror {
4
  margin-left: -12px;
5
  margin-right: -12px; }
6
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  .CodeMirror {
8
  /* Set height, width, borders, and global font properties here */
9
  font-family: monospace;
250
 
251
  .CodeMirror-gutter {
252
  white-space: normal;
253
+ margin-bottom: -30px; }
 
 
 
254
 
255
  .CodeMirror-gutter-wrapper {
256
  position: absolute;
controls/code/code.js CHANGED
@@ -1,79 +1,7 @@
1
- wp.customize.controlConstructor['kirki-code'] = wp.customize.Control.extend({
2
-
3
- // When we're finished loading continue processing
4
- ready: function() {
5
-
6
- 'use strict';
7
-
8
- var control = this;
9
-
10
- // Add to the queue.
11
- control.kirkiLoader();
12
- },
13
-
14
- // Add control to a queue and load when the time is right.
15
- kirkiLoader: function( forceLoad ) {
16
- var control = this,
17
- waitTime = 100,
18
- i;
19
-
20
- if ( _.isUndefined( window.kirkiControlsLoader ) ) {
21
- window.kirkiControlsLoader = {
22
- queue: [],
23
- done: [],
24
- busy: false
25
- };
26
- }
27
-
28
- // No need to proceed if this control has already been initialized.
29
- if ( -1 !== window.kirkiControlsLoader.done.indexOf( control.id ) ) {
30
- return;
31
- }
32
-
33
- // Add this control to the queue if it's not already there.
34
- if ( -1 === window.kirkiControlsLoader.queue.indexOf( control.id ) ) {
35
- window.kirkiControlsLoader.queue.push( control.id );
36
- }
37
-
38
- // If we're busy check back again later.
39
- if ( true === window.kirkiControlsLoader.busy ) {
40
- setTimeout( function() {
41
- control.kirkiLoader();
42
- }, waitTime );
43
- return;
44
- }
45
-
46
- // Run if force-loading and not busy.
47
- if ( true === forceLoad || false === window.kirkiControlsLoader.busy ) {
48
-
49
- // Set to busy.
50
- window.kirkiControlsLoader.busy = true;
51
-
52
- // Init the control JS.
53
- control.initKirkiControl();
54
- jQuery( control.container.find( '.kirki-controls-loading-spinner' ) ).hide();
55
-
56
- // Mark as done and remove from queue.
57
- window.kirkiControlsLoader.done.push( control.id );
58
- i = window.kirkiControlsLoader.queue.indexOf( control.id );
59
- window.kirkiControlsLoader.queue.splice( i, 1 );
60
-
61
- // Set busy to false after waitTime has passed.
62
- setTimeout( function() {
63
- window.kirkiControlsLoader.busy = false;
64
- }, waitTime );
65
- return;
66
- }
67
-
68
- if ( control.id === window.kirkiControlsLoader.queue[0] ) {
69
- control.kirkiLoader( true );
70
- }
71
- },
72
 
73
  initKirkiControl: function() {
74
 
75
- 'use strict';
76
-
77
  var control = this,
78
  element = control.container.find( '.kirki-codemirror-editor' ),
79
  language = ( 'html' === control.params.choices.language ) ? { name: 'htmlmixed' } : control.params.choices.language,
@@ -81,8 +9,6 @@ wp.customize.controlConstructor['kirki-code'] = wp.customize.Control.extend({
81
  container,
82
  height;
83
 
84
- control.container.find( '.kirki-controls-loading-spinner' ).hide();
85
-
86
  editor = CodeMirror.fromTextArea( element[0], {
87
  value: control.setting._value,
88
  mode: language,
1
+ wp.customize.controlConstructor['kirki-code'] = wp.customize.kirkiDynamicControl.extend({
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
 
3
  initKirkiControl: function() {
4
 
 
 
5
  var control = this,
6
  element = control.container.find( '.kirki-codemirror-editor' ),
7
  language = ( 'html' === control.params.choices.language ) ? { name: 'htmlmixed' } : control.params.choices.language,
9
  container,
10
  height;
11
 
 
 
12
  editor = CodeMirror.fromTextArea( element[0], {
13
  value: control.setting._value,
14
  mode: language,
controls/color-palette/class-kirki-control-color-palette.php CHANGED
@@ -51,7 +51,8 @@ class Kirki_Control_Color_Palette extends WP_Customize_Control {
51
  */
52
  public function enqueue() {
53
 
54
- wp_enqueue_script( 'kirki-color-palette', trailingslashit( Kirki::$url ) . 'controls/color-palette/color-palette.js', array( 'jquery', 'customize-base', 'jquery-ui-button' ), false, true );
 
55
  wp_enqueue_style( 'kirki-color-palette-css', trailingslashit( Kirki::$url ) . 'controls/color-palette/color-palette.css', null );
56
  }
57
 
@@ -100,7 +101,6 @@ class Kirki_Control_Color_Palette extends WP_Customize_Control {
100
  */
101
  protected function content_template() {
102
  ?>
103
- <div class="kirki-controls-loading-spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>
104
  <# if ( ! data.choices ) { return; } #>
105
  <span class="customize-control-title">
106
  {{ data.label }}
51
  */
52
  public function enqueue() {
53
 
54
+ wp_enqueue_script( 'kirki-dynamic-control', trailingslashit( Kirki::$url ) . 'assets/js/dynamic-control.js', array( 'jquery', 'customize-base' ), false, true );
55
+ wp_enqueue_script( 'kirki-color-palette', trailingslashit( Kirki::$url ) . 'controls/color-palette/color-palette.js', array( 'jquery', 'customize-base', 'kirki-dynamic-control', 'jquery-ui-button' ), false, true );
56
  wp_enqueue_style( 'kirki-color-palette-css', trailingslashit( Kirki::$url ) . 'controls/color-palette/color-palette.css', null );
57
  }
58
 
101
  */
102
  protected function content_template() {
103
  ?>
 
104
  <# if ( ! data.choices ) { return; } #>
105
  <span class="customize-control-title">
106
  {{ data.label }}
controls/color-palette/color-palette.css CHANGED
@@ -36,47 +36,5 @@
36
  .customize-control-kirki-color-palette .colors-wrapper input:checked + label .color-palette-color {
37
  box-shadow: 1px 1px 10px 1px #333333;
38
  border: 1px solid rgba(0, 0, 0, 0.3); }
39
- .customize-control-kirki-color-palette .kirki-controls-loading-spinner {
40
- position: absolute;
41
- top: 0;
42
- left: 0;
43
- margin: 0;
44
- width: 100%;
45
- height: 100%;
46
- z-index: 999;
47
- text-align: center;
48
- background-color: #eee; }
49
- .customize-control-kirki-color-palette .kirki-controls-loading-spinner > div {
50
- margin-top: 20px;
51
- width: 18px;
52
- height: 18px;
53
- background-color: #333;
54
- border-radius: 100%;
55
- display: inline-block;
56
- -webkit-animation: kirkibouncedelay 1.4s infinite ease-in-out both;
57
- animation: kirkibouncedelay 1.4s infinite ease-in-out both; }
58
- .customize-control-kirki-color-palette .kirki-controls-loading-spinner .bounce1 {
59
- -webkit-animation-delay: -0.32s;
60
- animation-delay: -0.32s; }
61
- .customize-control-kirki-color-palette .kirki-controls-loading-spinner .bounce2 {
62
- -webkit-animation-delay: -0.16s;
63
- animation-delay: -0.16s; }
64
-
65
- @-webkit-keyframes kirkibouncedelay {
66
- 0%,
67
- 100%,
68
- 80% {
69
- -webkit-transform: scale(0); }
70
- 40% {
71
- -webkit-transform: scale(1); } }
72
- @keyframes kirkibouncedelay {
73
- 0%,
74
- 100%,
75
- 80% {
76
- -webkit-transform: scale(0);
77
- transform: scale(0); }
78
- 40% {
79
- -webkit-transform: scale(1);
80
- transform: scale(1); } }
81
 
82
  /*# sourceMappingURL=color-palette.css.map */
36
  .customize-control-kirki-color-palette .colors-wrapper input:checked + label .color-palette-color {
37
  box-shadow: 1px 1px 10px 1px #333333;
38
  border: 1px solid rgba(0, 0, 0, 0.3); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
 
40
  /*# sourceMappingURL=color-palette.css.map */
controls/color-palette/color-palette.js CHANGED
@@ -1,31 +1 @@
1
- wp.customize.controlConstructor['kirki-color-palette'] = wp.customize.Control.extend({
2
-
3
- // When we're finished loading continue processing
4
- ready: function() {
5
-
6
- 'use strict';
7
-
8
- var control = this;
9
-
10
- // Init the control.
11
- if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) {
12
- kirkiControlLoader( control );
13
- } else {
14
- control.initKirkiControl();
15
- }
16
- },
17
-
18
- initKirkiControl: function() {
19
-
20
- 'use strict';
21
-
22
- var control = this;
23
-
24
- control.container.find( '.kirki-controls-loading-spinner' ).hide();
25
-
26
- // Save the value
27
- this.container.on( 'click', 'input', function() {
28
- control.setting.set( jQuery( this ).val() );
29
- });
30
- }
31
- });
1
+ wp.customize.controlConstructor['kirki-color-palette'] = wp.customize.kirkiDynamicControl.extend({});
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
controls/color-palette/dashicons.css.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "mappings": "AACE,wCAAM;EACJ,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,YAAY;AAEvB,iDAAe;EACb,UAAU,EAAE,KAAK;EACjB,UAAU,EAAE,MAAM;EAClB,oDAAG;IACD,WAAW,EAAE,GAAG;IAChB,MAAM,EAAE,OAAO;EAEjB,4DAAW;IACT,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,qBAAqB;EAE/B,uDAAM;IACJ,OAAO,EAAE,IAAI;IAGT,kFAAW;MACT,MAAM,EAAE,iBAAiB;MACzB,KAAK,EAAE,IAAI",
4
- "sources": ["../dashicons/dashicons.scss"],
5
- "names": [],
6
- "file": "dashicons.css"
7
- }
 
 
 
 
 
 
 
controls/color/class-kirki-control-color.php CHANGED
@@ -135,7 +135,8 @@ class Kirki_Control_Color extends WP_Customize_Control {
135
  public function enqueue_scripts() {
136
 
137
  wp_enqueue_script( 'wp-color-picker-alpha', trailingslashit( Kirki::$url ) . 'assets/vendor/wp-color-picker-alpha/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2', true );
138
- wp_enqueue_script( 'kirki-color', trailingslashit( Kirki::$url ) . 'controls/color/color.js', array( 'jquery', 'customize-base', 'wp-color-picker-alpha' ), false, true );
 
139
  wp_enqueue_style( 'kirki-color-css', trailingslashit( Kirki::$url ) . 'controls/color/color.css', null );
140
  wp_enqueue_style( 'wp-color-picker' );
141
  }
@@ -152,7 +153,6 @@ class Kirki_Control_Color extends WP_Customize_Control {
152
  */
153
  protected function content_template() {
154
  ?>
155
- <div class="kirki-controls-loading-spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>
156
  <label>
157
  <span class="customize-control-title">
158
  {{{ data.label }}}
135
  public function enqueue_scripts() {
136
 
137
  wp_enqueue_script( 'wp-color-picker-alpha', trailingslashit( Kirki::$url ) . 'assets/vendor/wp-color-picker-alpha/wp-color-picker-alpha.js', array( 'wp-color-picker' ), '1.2', true );
138
+ wp_enqueue_script( 'kirki-dynamic-control', trailingslashit( Kirki::$url ) . 'assets/js/dynamic-control.js', array( 'jquery', 'customize-base' ), false, true );
139
+ wp_enqueue_script( 'kirki-color', trailingslashit( Kirki::$url ) . 'controls/color/color.js', array( 'jquery', 'customize-base', 'kirki-dynamic-control', 'wp-color-picker-alpha' ), false, true );
140
  wp_enqueue_style( 'kirki-color-css', trailingslashit( Kirki::$url ) . 'controls/color/color.css', null );
141
  wp_enqueue_style( 'wp-color-picker' );
142
  }
153
  */
154
  protected function content_template() {
155
  ?>
 
156
  <label>
157
  <span class="customize-control-title">
158
  {{{ data.label }}}
controls/color/color.css CHANGED
@@ -1,46 +1,3 @@
1
- .customize-control-kirki-color {
2
- position: relative; }
3
- .customize-control-kirki-color .kirki-controls-loading-spinner {
4
- position: absolute;
5
- top: 0;
6
- left: 0;
7
- margin: 0;
8
- width: 100%;
9
- height: 100%;
10
- z-index: 999;
11
- text-align: center;
12
- background-color: #eee; }
13
- .customize-control-kirki-color .kirki-controls-loading-spinner > div {
14
- margin-top: 20px;
15
- width: 18px;
16
- height: 18px;
17
- background-color: #333;
18
- border-radius: 100%;
19
- display: inline-block;
20
- -webkit-animation: kirkibouncedelay 1.4s infinite ease-in-out both;
21
- animation: kirkibouncedelay 1.4s infinite ease-in-out both; }
22
- .customize-control-kirki-color .kirki-controls-loading-spinner .bounce1 {
23
- -webkit-animation-delay: -0.32s;
24
- animation-delay: -0.32s; }
25
- .customize-control-kirki-color .kirki-controls-loading-spinner .bounce2 {
26
- -webkit-animation-delay: -0.16s;
27
- animation-delay: -0.16s; }
28
 
29
- @-webkit-keyframes kirkibouncedelay {
30
- 0%,
31
- 100%,
32
- 80% {
33
- -webkit-transform: scale(0); }
34
- 40% {
35
- -webkit-transform: scale(1); } }
36
- @keyframes kirkibouncedelay {
37
- 0%,
38
- 100%,
39
- 80% {
40
- -webkit-transform: scale(0);
41
- transform: scale(0); }
42
- 40% {
43
- -webkit-transform: scale(1);
44
- transform: scale(1); } }
45
 
46
  /*# sourceMappingURL=color.css.map */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
 
3
  /*# sourceMappingURL=color.css.map */
controls/color/color.js CHANGED
@@ -1,27 +1,10 @@
1
- wp.customize.controlConstructor['kirki-color'] = wp.customize.Control.extend({
2
-
3
- // When we're finished loading continue processing
4
- ready: function() {
5
-
6
- 'use strict';
7
-
8
- var control = this;
9
-
10
- // Init the control.
11
- if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) {
12
- kirkiControlLoader( control );
13
- } else {
14
- control.initKirkiControl();
15
- }
16
- },
17
 
18
  initKirkiControl: function() {
19
  var control = this,
20
- picker = this.container.find( '.kirki-color-control' ),
21
  clear;
22
 
23
- control.container.find( '.kirki-controls-loading-spinner' ).hide();
24
-
25
  // If we have defined any extra choices, make sure they are passed-on to Iris.
26
  if ( ! _.isUndefined( control.params.choices ) ) {
27
  picker.wpColorPicker( control.params.choices );
@@ -33,7 +16,7 @@ wp.customize.controlConstructor['kirki-color'] = wp.customize.Control.extend({
33
  clear.click( function() {
34
  control.setting.set( '' );
35
  });
36
- }, 500 );
37
 
38
  // Saves our settings to the WP API
39
  picker.wpColorPicker({
@@ -42,8 +25,7 @@ wp.customize.controlConstructor['kirki-color'] = wp.customize.Control.extend({
42
  // Small hack: the picker needs a small delay
43
  setTimeout( function() {
44
  control.setting.set( picker.val() );
45
- }, 100 );
46
-
47
  }
48
  });
49
  }
1
+ wp.customize.controlConstructor['kirki-color'] = wp.customize.kirkiDynamicControl.extend({
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
 
3
  initKirkiControl: function() {
4
  var control = this,
5
+ picker = control.container.find( '.kirki-color-control' ),
6
  clear;
7
 
 
 
8
  // If we have defined any extra choices, make sure they are passed-on to Iris.
9
  if ( ! _.isUndefined( control.params.choices ) ) {
10
  picker.wpColorPicker( control.params.choices );
16
  clear.click( function() {
17
  control.setting.set( '' );
18
  });
19
+ }, 200 );
20
 
21
  // Saves our settings to the WP API
22
  picker.wpColorPicker({
25
  // Small hack: the picker needs a small delay
26
  setTimeout( function() {
27
  control.setting.set( picker.val() );
28
+ }, 20 );
 
29
  }
30
  });
31
  }
controls/dashicons/class-kirki-control-dashicons.php CHANGED
@@ -75,6 +75,7 @@ class Kirki_Control_Dashicons extends WP_Customize_Control {
75
  */
76
  public function enqueue() {
77
 
 
78
  wp_enqueue_script( 'kirki-dashicons', trailingslashit( Kirki::$url ) . 'controls/dashicons/dashicons.js', array( 'jquery', 'customize-base' ), false, true );
79
  wp_enqueue_style( 'kirki-dashicons-css', trailingslashit( Kirki::$url ) . 'controls/dashicons/dashicons.css', null );
80
  }
@@ -91,7 +92,6 @@ class Kirki_Control_Dashicons extends WP_Customize_Control {
91
  */
92
  protected function content_template() {
93
  ?>
94
- <div class="kirki-controls-loading-spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>
95
  <# if ( data.label ) { #><span class="customize-control-title">{{ data.label }}</span><# } #>
96
  <# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
97
  <div class="icons-wrapper">
75
  */
76
  public function enqueue() {
77
 
78
+ wp_enqueue_script( 'kirki-dynamic-control', trailingslashit( Kirki::$url ) . 'assets/js/dynamic-control.js', array( 'jquery', 'kirki-dynamic-control', 'customize-base' ), false, true );
79
  wp_enqueue_script( 'kirki-dashicons', trailingslashit( Kirki::$url ) . 'controls/dashicons/dashicons.js', array( 'jquery', 'customize-base' ), false, true );
80
  wp_enqueue_style( 'kirki-dashicons-css', trailingslashit( Kirki::$url ) . 'controls/dashicons/dashicons.css', null );
81
  }
92
  */
93
  protected function content_template() {
94
  ?>
 
95
  <# if ( data.label ) { #><span class="customize-control-title">{{ data.label }}</span><# } #>
96
  <# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
97
  <div class="icons-wrapper">
controls/dashicons/dashicons.css CHANGED
@@ -20,47 +20,5 @@
20
  .customize-control-kirki-dashicons .icons-wrapper input:checked + label .dashicons {
21
  border: 1px solid #3498DB;
22
  color: #000; }
23
- .customize-control-kirki-dashicons .kirki-controls-loading-spinner {
24
- position: absolute;
25
- top: 0;
26
- left: 0;
27
- margin: 0;
28
- width: 100%;
29
- height: 100%;
30
- z-index: 999;
31
- text-align: center;
32
- background-color: #eee; }
33
- .customize-control-kirki-dashicons .kirki-controls-loading-spinner > div {
34
- margin-top: 20px;
35
- width: 18px;
36
- height: 18px;
37
- background-color: #333;
38
- border-radius: 100%;
39
- display: inline-block;
40
- -webkit-animation: kirkibouncedelay 1.4s infinite ease-in-out both;
41
- animation: kirkibouncedelay 1.4s infinite ease-in-out both; }
42
- .customize-control-kirki-dashicons .kirki-controls-loading-spinner .bounce1 {
43
- -webkit-animation-delay: -0.32s;
44
- animation-delay: -0.32s; }
45
- .customize-control-kirki-dashicons .kirki-controls-loading-spinner .bounce2 {
46
- -webkit-animation-delay: -0.16s;
47
- animation-delay: -0.16s; }
48
-
49
- @-webkit-keyframes kirkibouncedelay {
50
- 0%,
51
- 100%,
52
- 80% {
53
- -webkit-transform: scale(0); }
54
- 40% {
55
- -webkit-transform: scale(1); } }
56
- @keyframes kirkibouncedelay {
57
- 0%,
58
- 100%,
59
- 80% {
60
- -webkit-transform: scale(0);
61
- transform: scale(0); }
62
- 40% {
63
- -webkit-transform: scale(1);
64
- transform: scale(1); } }
65
 
66
  /*# sourceMappingURL=dashicons.css.map */
20
  .customize-control-kirki-dashicons .icons-wrapper input:checked + label .dashicons {
21
  border: 1px solid #3498DB;
22
  color: #000; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
 
24
  /*# sourceMappingURL=dashicons.css.map */
controls/dashicons/dashicons.js CHANGED
@@ -1,31 +1 @@
1
- wp.customize.controlConstructor['kirki-dashicons'] = wp.customize.Control.extend({
2
-
3
- // When we're finished loading continue processing
4
- ready: function() {
5
-
6
- 'use strict';
7
-
8
- var control = this;
9
-
10
- // Init the control.
11
- if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) {
12
- kirkiControlLoader( control );
13
- } else {
14
- control.initKirkiControl();
15
- }
16
- },
17
-
18
- initKirkiControl: function() {
19
-
20
- 'use strict';
21
-
22
- var control = this;
23
-
24
- control.container.find( '.kirki-controls-loading-spinner' ).hide();
25
-
26
- // Save the value
27
- this.container.on( 'click', 'input', function() {
28
- control.setting.set( jQuery( this ).val() );
29
- });
30
- }
31
- });
1
+ wp.customize.controlConstructor['kirki-dashicons'] = wp.customize.kirkiDynamicControl.extend({});
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
controls/date/class-kirki-control-date.php CHANGED
@@ -50,7 +50,8 @@ class Kirki_Control_Date extends WP_Customize_Control {
50
  */
51
  public function enqueue() {
52
 
53
- wp_enqueue_script( 'kirki-date', trailingslashit( Kirki::$url ) . 'controls/date/date.js', array( 'jquery', 'customize-base', 'jquery-ui-datepicker' ), false, true );
 
54
  wp_enqueue_style( 'kirki-date-css', trailingslashit( Kirki::$url ) . 'controls/date/date.css', null );
55
  }
56
 
@@ -91,7 +92,6 @@ class Kirki_Control_Date extends WP_Customize_Control {
91
  */
92
  protected function content_template() {
93
  ?>
94
- <div class="kirki-controls-loading-spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>
95
  <label>
96
  <# if ( data.label ) { #><span class="customize-control-title">{{{ data.label }}}</span><# } #>
97
  <# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
50
  */
51
  public function enqueue() {
52
 
53
+ wp_enqueue_script( 'kirki-dynamic-control', trailingslashit( Kirki::$url ) . 'assets/js/dynamic-control.js', array( 'jquery', 'customize-base' ), false, true );
54
+ wp_enqueue_script( 'kirki-date', trailingslashit( Kirki::$url ) . 'controls/date/date.js', array( 'jquery', 'customize-base', 'kirki-dynamic-control', 'jquery-ui-datepicker' ), false, true );
55
  wp_enqueue_style( 'kirki-date-css', trailingslashit( Kirki::$url ) . 'controls/date/date.css', null );
56
  }
57
 
92
  */
93
  protected function content_template() {
94
  ?>
 
95
  <label>
96
  <# if ( data.label ) { #><span class="customize-control-title">{{{ data.label }}}</span><# } #>
97
  <# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
controls/date/date.css CHANGED
@@ -53,49 +53,4 @@
53
  .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td.ui-state-disabled a, .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td.ui-state-disabled .ui-state-default a {
54
  color: #999; }
55
 
56
- .customize-control-kirki-date {
57
- position: relative; }
58
- .customize-control-kirki-date .kirki-controls-loading-spinner {
59
- position: absolute;
60
- top: 0;
61
- left: 0;
62
- margin: 0;
63
- width: 100%;
64
- height: 100%;
65
- z-index: 999;
66
- text-align: center;
67
- background-color: #eee; }
68
- .customize-control-kirki-date .kirki-controls-loading-spinner > div {
69
- margin-top: 20px;
70
- width: 18px;
71
- height: 18px;
72
- background-color: #333;
73
- border-radius: 100%;
74
- display: inline-block;
75
- -webkit-animation: kirkibouncedelay 1.4s infinite ease-in-out both;
76
- animation: kirkibouncedelay 1.4s infinite ease-in-out both; }
77
- .customize-control-kirki-date .kirki-controls-loading-spinner .bounce1 {
78
- -webkit-animation-delay: -0.32s;
79
- animation-delay: -0.32s; }
80
- .customize-control-kirki-date .kirki-controls-loading-spinner .bounce2 {
81
- -webkit-animation-delay: -0.16s;
82
- animation-delay: -0.16s; }
83
-
84
- @-webkit-keyframes kirkibouncedelay {
85
- 0%,
86
- 100%,
87
- 80% {
88
- -webkit-transform: scale(0); }
89
- 40% {
90
- -webkit-transform: scale(1); } }
91
- @keyframes kirkibouncedelay {
92
- 0%,
93
- 100%,
94
- 80% {
95
- -webkit-transform: scale(0);
96
- transform: scale(0); }
97
- 40% {
98
- -webkit-transform: scale(1);
99
- transform: scale(1); } }
100
-
101
  /*# sourceMappingURL=date.css.map */
53
  .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td.ui-state-disabled a, .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td.ui-state-disabled .ui-state-default a {
54
  color: #999; }
55
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  /*# sourceMappingURL=date.css.map */
controls/date/date.js CHANGED
@@ -1,32 +1,13 @@
1
- wp.customize.controlConstructor['kirki-date'] = wp.customize.Control.extend({
2
-
3
- // When we're finished loading continue processing
4
- ready: function() {
5
-
6
- 'use strict';
7
-
8
- var control = this;
9
-
10
- // Init the control.
11
- if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) {
12
- kirkiControlLoader( control );
13
- } else {
14
- control.initKirkiControl();
15
- }
16
- },
17
 
18
  initKirkiControl: function() {
19
 
20
- 'use strict';
21
-
22
  var control = this,
23
  selector = control.selector + ' input.datepicker';
24
 
25
  // Init the datepicker
26
  jQuery( selector ).datepicker();
27
 
28
- control.container.find( '.kirki-controls-loading-spinner' ).hide();
29
-
30
  // Save the changes
31
  this.container.on( 'change keyup paste', 'input.datepicker', function() {
32
  control.setting.set( jQuery( this ).val() );
1
+ wp.customize.controlConstructor['kirki-date'] = wp.customize.kirkiDynamicControl.extend({
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
 
3
  initKirkiControl: function() {
4
 
 
 
5
  var control = this,
6
  selector = control.selector + ' input.datepicker';
7
 
8
  // Init the datepicker
9
  jQuery( selector ).datepicker();
10
 
 
 
11
  // Save the changes
12
  this.container.on( 'change keyup paste', 'input.datepicker', function() {
13
  control.setting.set( jQuery( this ).val() );
controls/dimension/class-kirki-control-dimension.php CHANGED
@@ -58,7 +58,8 @@ class Kirki_Control_Dimension extends WP_Customize_Control {
58
  */
59
  public function enqueue() {
60
 
61
- wp_enqueue_script( 'kirki-dimension', trailingslashit( Kirki::$url ) . 'controls/dimension/dimension.js', array( 'jquery', 'customize-base' ), false, true );
 
62
  wp_enqueue_style( 'kirki-dimension-css', trailingslashit( Kirki::$url ) . 'controls/dimension/dimension.css', null );
63
  wp_localize_script( 'kirki-dimension', 'dimensionkirkiL10n', array(
64
  'invalid-value' => esc_attr__( 'Invalid Value', 'kirki' ),
@@ -102,12 +103,11 @@ class Kirki_Control_Dimension extends WP_Customize_Control {
102
  */
103
  protected function content_template() {
104
  ?>
105
- <div class="kirki-controls-loading-spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>
106
  <label class="customizer-text">
107
  <# if ( data.label ) { #><span class="customize-control-title">{{{ data.label }}}</span><# } #>
108
  <# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
109
  <div class="input-wrapper">
110
- <input {{{ data.inputAttrs }}} type="text" value="{{ data.value }}"/>
111
  </div>
112
  </label>
113
  <?php
58
  */
59
  public function enqueue() {
60
 
61
+ wp_enqueue_script( 'kirki-dynamic-control', trailingslashit( Kirki::$url ) . 'assets/js/dynamic-control.js', array( 'jquery', 'customize-base' ), false, true );
62
+ wp_enqueue_script( 'kirki-dimension', trailingslashit( Kirki::$url ) . 'controls/dimension/dimension.js', array( 'jquery', 'customize-base', 'kirki-dynamic-control' ), false, true );
63
  wp_enqueue_style( 'kirki-dimension-css', trailingslashit( Kirki::$url ) . 'controls/dimension/dimension.css', null );
64
  wp_localize_script( 'kirki-dimension', 'dimensionkirkiL10n', array(
65
  'invalid-value' => esc_attr__( 'Invalid Value', 'kirki' ),
103
  */
104
  protected function content_template() {
105
  ?>
 
106
  <label class="customizer-text">
107
  <# if ( data.label ) { #><span class="customize-control-title">{{{ data.label }}}</span><# } #>
108
  <# if ( data.description ) { #><span class="description customize-control-description">{{{ data.description }}}</span><# } #>
109
  <div class="input-wrapper">
110
+ <input {{{ data.inputAttrs }}} type="text" value="{{ data.value.replace( '%%', '%' ) }}"/>
111
  </div>
112
  </label>
113
  <?php
controls/dimension/dimension.css CHANGED
@@ -1,46 +1,3 @@
1
- .customize-control-kirki-dimension {
2
- position: relative; }
3
- .customize-control-kirki-dimension .kirki-controls-loading-spinner {
4
- position: absolute;
5
- top: 0;
6
- left: 0;
7
- margin: 0;
8
- width: 100%;
9
- height: 100%;
10
- z-index: 999;
11
- text-align: center;
12
- background-color: #eee; }
13
- .customize-control-kirki-dimension .kirki-controls-loading-spinner > div {
14
- margin-top: 20px;
15
- width: 18px;
16
- height: 18px;
17
- background-color: #333;
18
- border-radius: 100%;
19
- display: inline-block;
20
- -webkit-animation: kirkibouncedelay 1.4s infinite ease-in-out both;
21
- animation: kirkibouncedelay 1.4s infinite ease-in-out both; }
22
- .customize-control-kirki-dimension .kirki-controls-loading-spinner .bounce1 {
23
- -webkit-animation-delay: -0.32s;
24
- animation-delay: -0.32s; }
25
- .customize-control-kirki-dimension .kirki-controls-loading-spinner .bounce2 {
26
- -webkit-animation-delay: -0.16s;
27
- animation-delay: -0.16s; }
28
 
29
- @-webkit-keyframes kirkibouncedelay {
30
- 0%,
31
- 100%,
32
- 80% {
33
- -webkit-transform: scale(0); }
34
- 40% {
35
- -webkit-transform: scale(1); } }
36
- @keyframes kirkibouncedelay {
37
- 0%,
38
- 100%,
39
- 80% {
40
- -webkit-transform: scale(0);
41
- transform: scale(0); }
42
- 40% {
43
- -webkit-transform: scale(1);
44
- transform: scale(1); } }
45
 
46
  /*# sourceMappingURL=dimension.css.map */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
 
3
  /*# sourceMappingURL=dimension.css.map */
controls/dimension/dimension.js CHANGED
@@ -1,29 +1,10 @@
1
- wp.customize.controlConstructor['kirki-dimension'] = wp.customize.Control.extend({
2
-
3
- // When we're finished loading continue processing
4
- ready: function() {
5
-
6
- 'use strict';
7
-
8
- var control = this;
9
-
10
- // Init the control.
11
- if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) {
12
- kirkiControlLoader( control );
13
- } else {
14
- control.initKirkiControl();
15
- }
16
- },
17
 
18
  initKirkiControl: function() {
19
 
20
- 'use strict';
21
-
22
  var control = this,
23
  value;
24
 
25
- control.container.find( '.kirki-controls-loading-spinner' ).hide();
26
-
27
  // Notifications.
28
  control.kirkiNotifications();
29
 
@@ -32,7 +13,6 @@ wp.customize.controlConstructor['kirki-dimension'] = wp.customize.Control.extend
32
 
33
  value = jQuery( this ).val();
34
  control.setting.set( value );
35
-
36
  });
37
  },
38
 
@@ -60,28 +40,5 @@ wp.customize.controlConstructor['kirki-dimension'] = wp.customize.Control.extend
60
  }
61
  } );
62
  } );
63
- },
64
- kirkiValidateCSSValue: function( value ) {
65
-
66
- var validUnits = ['rem', 'em', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'vh', 'vw', 'vmin', 'vmax'],
67
- numericValue,
68
- unit;
69
-
70
- // 0 is always a valid value, and we can't check calc() values effectively.
71