Custom Login Page Customizer by Colorlib - Version 1.2.2

Version Description

  • Added the possibility to change the Remember Me and Log In texts
Download this release

Release Info

Developer colorlibplugins
Plugin Icon wp plugin Custom Login Page Customizer by Colorlib
Version 1.2.2
Comparing to
See all releases

Code changes from version 1.2.1 to 1.2.2

Files changed (13) hide show
  1. assets/css/jquery.minicolors.css +320 -320
  2. assets/js/clc-customizer.js +321 -304
  3. assets/js/clc-preview.js +186 -169
  4. assets/js/jquery.minicolors.js +1109 -1109
  5. assets/js/jquery.minicolors.min.js +8 -8
  6. colorlib-login-customizer.php +2 -2
  7. includes/lib/class-colorlib-login-customizer-css-customization.php +59 -1
  8. includes/lib/class-colorlib-login-customizer-customizer.php +14 -0
  9. includes/lib/controls/class-colorlib-login-customizer-button-group-control.php +117 -117
  10. includes/lib/controls/class-colorlib-login-customizer-control-color-picker.php +92 -92
  11. includes/lib/controls/class-colorlib-login-customizer-control-toggle.php +81 -81
  12. includes/login-template.php +1 -1
  13. readme.txt +32 -18
assets/css/jquery.minicolors.css CHANGED
@@ -1,320 +1,320 @@
1
- .minicolors {
2
- position: relative;
3
- }
4
-
5
- .minicolors-sprite {
6
- background-image: url(../img/minicolors/jquery.minicolors.png);
7
- }
8
-
9
- .minicolors-swatch {
10
- position: absolute;
11
- vertical-align: middle;
12
- background-position: -80px 0;
13
- border: solid 1px #ccc;
14
- cursor: text;
15
- padding: 0;
16
- margin: 0;
17
- display: inline-block;
18
- }
19
-
20
- .minicolors-swatch-color {
21
- position: absolute;
22
- top: 0;
23
- left: 0;
24
- right: 0;
25
- bottom: 0;
26
- }
27
-
28
- .minicolors input[type=hidden] + .minicolors-swatch {
29
- width: 28px;
30
- position: static;
31
- cursor: pointer;
32
- }
33
-
34
- .minicolors input[type=hidden][disabled] + .minicolors-swatch {
35
- cursor: default;
36
- }
37
-
38
- /* Panel */
39
- .minicolors-panel {
40
- position: absolute;
41
- width: 173px;
42
- background: white;
43
- border: solid 1px #CCC;
44
- box-shadow: 0 0 20px rgba(0, 0, 0, .2);
45
- z-index: 99999;
46
- box-sizing: content-box;
47
- display: none;
48
- }
49
-
50
- .minicolors-panel.minicolors-visible {
51
- display: block;
52
- }
53
-
54
- /* Panel positioning */
55
- .minicolors-position-top .minicolors-panel {
56
- top: -154px;
57
- }
58
-
59
- .minicolors-position-right .minicolors-panel {
60
- right: 0;
61
- }
62
-
63
- .minicolors-position-bottom .minicolors-panel {
64
- top: auto;
65
- }
66
-
67
- .minicolors-position-left .minicolors-panel {
68
- left: 0;
69
- }
70
-
71
- .minicolors-with-opacity .minicolors-panel {
72
- width: 194px;
73
- }
74
-
75
- .minicolors .minicolors-grid {
76
- position: relative;
77
- top: 1px;
78
- left: 1px;
79
- width: 150px;
80
- height: 150px;
81
- margin-bottom: 2px;
82
- background-position: -120px 0;
83
- cursor: crosshair;
84
- }
85
-
86
- .minicolors .minicolors-grid-inner {
87
- position: absolute;
88
- top: 0;
89
- left: 0;
90
- width: 150px;
91
- height: 150px;
92
- }
93
-
94
- .minicolors-slider-saturation .minicolors-grid {
95
- background-position: -420px 0;
96
- }
97
-
98
- .minicolors-slider-saturation .minicolors-grid-inner {
99
- background-position: -270px 0;
100
- background-image: inherit;
101
- }
102
-
103
- .minicolors-slider-brightness .minicolors-grid {
104
- background-position: -570px 0;
105
- }
106
-
107
- .minicolors-slider-brightness .minicolors-grid-inner {
108
- background-color: black;
109
- }
110
-
111
- .minicolors-slider-wheel .minicolors-grid {
112
- background-position: -720px 0;
113
- }
114
-
115
- .minicolors-slider,
116
- .minicolors-opacity-slider {
117
- position: absolute;
118
- top: 1px;
119
- left: 152px;
120
- width: 20px;
121
- height: 150px;
122
- background-color: white;
123
- background-position: 0 0;
124
- cursor: row-resize;
125
- }
126
-
127
- .minicolors-slider-saturation .minicolors-slider {
128
- background-position: -60px 0;
129
- }
130
-
131
- .minicolors-slider-brightness .minicolors-slider {
132
- background-position: -20px 0;
133
- }
134
-
135
- .minicolors-slider-wheel .minicolors-slider {
136
- background-position: -20px 0;
137
- }
138
-
139
- .minicolors-opacity-slider {
140
- left: 173px;
141
- background-position: -40px 0;
142
- display: none;
143
- }
144
-
145
- .minicolors-with-opacity .minicolors-opacity-slider {
146
- display: block;
147
- }
148
-
149
- /* Pickers */
150
- .minicolors-grid .minicolors-picker {
151
- position: absolute;
152
- top: 70px;
153
- left: 70px;
154
- width: 12px;
155
- height: 12px;
156
- border: solid 1px black;
157
- border-radius: 10px;
158
- margin-top: -6px;
159
- margin-left: -6px;
160
- background: none;
161
- }
162
-
163
- .minicolors-grid .minicolors-picker > div {
164
- position: absolute;
165
- top: 0;
166
- left: 0;
167
- width: 8px;
168
- height: 8px;
169
- border-radius: 8px;
170
- border: solid 2px white;
171
- box-sizing: content-box;
172
- }
173
-
174
- .minicolors-picker {
175
- position: absolute;
176
- top: 0;
177
- left: 0;
178
- width: 18px;
179
- height: 2px;
180
- background: white;
181
- border: solid 1px black;
182
- margin-top: -2px;
183
- box-sizing: content-box;
184
- }
185
-
186
- /* Swatches */
187
- .minicolors-swatches,
188
- .minicolors-swatches li {
189
- margin: 5px 0 3px 5px;
190
- padding: 0;
191
- list-style: none;
192
- overflow: hidden;
193
- }
194
-
195
- .minicolors-swatches .minicolors-swatch {
196
- position: relative;
197
- float: left;
198
- cursor: pointer;
199
- margin:0 4px 0 0;
200
- }
201
-
202
- .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
203
- margin-right: 7px;
204
- }
205
-
206
- .minicolors-swatch.selected {
207
- border-color: #000;
208
- }
209
-
210
- /* Inline controls */
211
- .minicolors-inline {
212
- display: inline-block;
213
- }
214
-
215
- .minicolors-inline .minicolors-input {
216
- display: none !important;
217
- }
218
-
219
- .minicolors-inline .minicolors-panel {
220
- position: relative;
221
- top: auto;
222
- left: auto;
223
- box-shadow: none;
224
- z-index: auto;
225
- display: inline-block;
226
- }
227
-
228
- /* Default theme */
229
- .minicolors-theme-default .minicolors-swatch {
230
- top: 5px;
231
- left: 5px;
232
- width: 18px;
233
- height: 18px;
234
- }
235
- .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
236
- margin-bottom: 2px;
237
- top: 0;
238
- left: 0;
239
- width: 18px;
240
- height: 18px;
241
- }
242
- .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
243
- left: auto;
244
- right: 5px;
245
- }
246
- .minicolors-theme-default.minicolors {
247
- width: auto;
248
- display: inline-block;
249
- }
250
- .minicolors-theme-default .minicolors-input {
251
- height: 20px;
252
- width: auto;
253
- display: inline-block;
254
- padding-left: 26px;
255
- }
256
- .minicolors-theme-default.minicolors-position-right .minicolors-input {
257
- padding-right: 26px;
258
- padding-left: inherit;
259
- }
260
-
261
- /* Bootstrap theme */
262
- .minicolors-theme-bootstrap .minicolors-swatch {
263
- z-index: 2;
264
- top: 3px;
265
- left: 3px;
266
- width: 28px;
267
- height: 28px;
268
- border-radius: 3px;
269
- }
270
- .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
271
- margin-bottom: 2px;
272
- top: 0;
273
- left: 0;
274
- width: 20px;
275
- height: 20px;
276
- }
277
- .minicolors-theme-bootstrap .minicolors-swatch-color {
278
- border-radius: inherit;
279
- }
280
- .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
281
- left: auto;
282
- right: 3px;
283
- }
284
- .minicolors-theme-bootstrap .minicolors-input {
285
- float: none;
286
- padding-left: 44px;
287
- }
288
- .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
289
- padding-right: 44px;
290
- padding-left: 12px;
291
- }
292
- .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
293
- top: 4px;
294
- left: 4px;
295
- width: 37px;
296
- height: 37px;
297
- border-radius: 5px;
298
- }
299
- .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
300
- width: 24px;
301
- height: 24px;
302
- }
303
- .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
304
- width: 18px;
305
- height: 18px;
306
- }
307
- .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
308
- border-top-left-radius: 0;
309
- border-bottom-left-radius: 0;
310
- }
311
-
312
- /* Semantic Ui theme */
313
- .minicolors-theme-semanticui .minicolors-swatch {
314
- top: 0;
315
- left: 0;
316
- padding: 18px;
317
- }
318
- .minicolors-theme-semanticui input {
319
- text-indent: 30px;
320
- }
1
+ .minicolors {
2
+ position: relative;
3
+ }
4
+
5
+ .minicolors-sprite {
6
+ background-image: url(../img/minicolors/jquery.minicolors.png);
7
+ }
8
+
9
+ .minicolors-swatch {
10
+ position: absolute;
11
+ vertical-align: middle;
12
+ background-position: -80px 0;
13
+ border: solid 1px #ccc;
14
+ cursor: text;
15
+ padding: 0;
16
+ margin: 0;
17
+ display: inline-block;
18
+ }
19
+
20
+ .minicolors-swatch-color {
21
+ position: absolute;
22
+ top: 0;
23
+ left: 0;
24
+ right: 0;
25
+ bottom: 0;
26
+ }
27
+
28
+ .minicolors input[type=hidden] + .minicolors-swatch {
29
+ width: 28px;
30
+ position: static;
31
+ cursor: pointer;
32
+ }
33
+
34
+ .minicolors input[type=hidden][disabled] + .minicolors-swatch {
35
+ cursor: default;
36
+ }
37
+
38
+ /* Panel */
39
+ .minicolors-panel {
40
+ position: absolute;
41
+ width: 173px;
42
+ background: white;
43
+ border: solid 1px #CCC;
44
+ box-shadow: 0 0 20px rgba(0, 0, 0, .2);
45
+ z-index: 99999;
46
+ box-sizing: content-box;
47
+ display: none;
48
+ }
49
+
50
+ .minicolors-panel.minicolors-visible {
51
+ display: block;
52
+ }
53
+
54
+ /* Panel positioning */
55
+ .minicolors-position-top .minicolors-panel {
56
+ top: -154px;
57
+ }
58
+
59
+ .minicolors-position-right .minicolors-panel {
60
+ right: 0;
61
+ }
62
+
63
+ .minicolors-position-bottom .minicolors-panel {
64
+ top: auto;
65
+ }
66
+
67
+ .minicolors-position-left .minicolors-panel {
68
+ left: 0;
69
+ }
70
+
71
+ .minicolors-with-opacity .minicolors-panel {
72
+ width: 194px;
73
+ }
74
+
75
+ .minicolors .minicolors-grid {
76
+ position: relative;
77
+ top: 1px;
78
+ left: 1px;
79
+ width: 150px;
80
+ height: 150px;
81
+ margin-bottom: 2px;
82
+ background-position: -120px 0;
83
+ cursor: crosshair;
84
+ }
85
+
86
+ .minicolors .minicolors-grid-inner {
87
+ position: absolute;
88
+ top: 0;
89
+ left: 0;
90
+ width: 150px;
91
+ height: 150px;
92
+ }
93
+
94
+ .minicolors-slider-saturation .minicolors-grid {
95
+ background-position: -420px 0;
96
+ }
97
+
98
+ .minicolors-slider-saturation .minicolors-grid-inner {
99
+ background-position: -270px 0;
100
+ background-image: inherit;
101
+ }
102
+
103
+ .minicolors-slider-brightness .minicolors-grid {
104
+ background-position: -570px 0;
105
+ }
106
+
107
+ .minicolors-slider-brightness .minicolors-grid-inner {
108
+ background-color: black;
109
+ }
110
+
111
+ .minicolors-slider-wheel .minicolors-grid {
112
+ background-position: -720px 0;
113
+ }
114
+
115
+ .minicolors-slider,
116
+ .minicolors-opacity-slider {
117
+ position: absolute;
118
+ top: 1px;
119
+ left: 152px;
120
+ width: 20px;
121
+ height: 150px;
122
+ background-color: white;
123
+ background-position: 0 0;
124
+ cursor: row-resize;
125
+ }
126
+
127
+ .minicolors-slider-saturation .minicolors-slider {
128
+ background-position: -60px 0;
129
+ }
130
+
131
+ .minicolors-slider-brightness .minicolors-slider {
132
+ background-position: -20px 0;
133
+ }
134
+
135
+ .minicolors-slider-wheel .minicolors-slider {
136
+ background-position: -20px 0;
137
+ }
138
+
139
+ .minicolors-opacity-slider {
140
+ left: 173px;
141
+ background-position: -40px 0;
142
+ display: none;
143
+ }
144
+
145
+ .minicolors-with-opacity .minicolors-opacity-slider {
146
+ display: block;
147
+ }
148
+
149
+ /* Pickers */
150
+ .minicolors-grid .minicolors-picker {
151
+ position: absolute;
152
+ top: 70px;
153
+ left: 70px;
154
+ width: 12px;
155
+ height: 12px;
156
+ border: solid 1px black;
157
+ border-radius: 10px;
158
+ margin-top: -6px;
159
+ margin-left: -6px;
160
+ background: none;
161
+ }
162
+
163
+ .minicolors-grid .minicolors-picker > div {
164
+ position: absolute;
165
+ top: 0;
166
+ left: 0;
167
+ width: 8px;
168
+ height: 8px;
169
+ border-radius: 8px;
170
+ border: solid 2px white;
171
+ box-sizing: content-box;
172
+ }
173
+
174
+ .minicolors-picker {
175
+ position: absolute;
176
+ top: 0;
177
+ left: 0;
178
+ width: 18px;
179
+ height: 2px;
180
+ background: white;
181
+ border: solid 1px black;
182
+ margin-top: -2px;
183
+ box-sizing: content-box;
184
+ }
185
+
186
+ /* Swatches */
187
+ .minicolors-swatches,
188
+ .minicolors-swatches li {
189
+ margin: 5px 0 3px 5px;
190
+ padding: 0;
191
+ list-style: none;
192
+ overflow: hidden;
193
+ }
194
+
195
+ .minicolors-swatches .minicolors-swatch {
196
+ position: relative;
197
+ float: left;
198
+ cursor: pointer;
199
+ margin:0 4px 0 0;
200
+ }
201
+
202
+ .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
203
+ margin-right: 7px;
204
+ }
205
+
206
+ .minicolors-swatch.selected {
207
+ border-color: #000;
208
+ }
209
+
210
+ /* Inline controls */
211
+ .minicolors-inline {
212
+ display: inline-block;
213
+ }
214
+
215
+ .minicolors-inline .minicolors-input {
216
+ display: none !important;
217
+ }
218
+
219
+ .minicolors-inline .minicolors-panel {
220
+ position: relative;
221
+ top: auto;
222
+ left: auto;
223
+ box-shadow: none;
224
+ z-index: auto;
225
+ display: inline-block;
226
+ }
227
+
228
+ /* Default theme */
229
+ .minicolors-theme-default .minicolors-swatch {
230
+ top: 5px;
231
+ left: 5px;
232
+ width: 18px;
233
+ height: 18px;
234
+ }
235
+ .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
236
+ margin-bottom: 2px;
237
+ top: 0;
238
+ left: 0;
239
+ width: 18px;
240
+ height: 18px;
241
+ }
242
+ .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
243
+ left: auto;
244
+ right: 5px;
245
+ }
246
+ .minicolors-theme-default.minicolors {
247
+ width: auto;
248
+ display: inline-block;
249
+ }
250
+ .minicolors-theme-default .minicolors-input {
251
+ height: 20px;
252
+ width: auto;
253
+ display: inline-block;
254
+ padding-left: 26px;
255
+ }
256
+ .minicolors-theme-default.minicolors-position-right .minicolors-input {
257
+ padding-right: 26px;
258
+ padding-left: inherit;
259
+ }
260
+
261
+ /* Bootstrap theme */
262
+ .minicolors-theme-bootstrap .minicolors-swatch {
263
+ z-index: 2;
264
+ top: 3px;
265
+ left: 3px;
266
+ width: 28px;
267
+ height: 28px;
268
+ border-radius: 3px;
269
+ }
270
+ .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
271
+ margin-bottom: 2px;
272
+ top: 0;
273
+ left: 0;
274
+ width: 20px;
275
+ height: 20px;
276
+ }
277
+ .minicolors-theme-bootstrap .minicolors-swatch-color {
278
+ border-radius: inherit;
279
+ }
280
+ .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
281
+ left: auto;
282
+ right: 3px;
283
+ }
284
+ .minicolors-theme-bootstrap .minicolors-input {
285
+ float: none;
286
+ padding-left: 44px;
287
+ }
288
+ .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
289
+ padding-right: 44px;
290
+ padding-left: 12px;
291
+ }
292
+ .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
293
+ top: 4px;
294
+ left: 4px;
295
+ width: 37px;
296
+ height: 37px;
297
+ border-radius: 5px;
298
+ }
299
+ .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
300
+ width: 24px;
301
+ height: 24px;
302
+ }
303
+ .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
304
+ width: 18px;
305
+ height: 18px;
306
+ }
307
+ .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
308
+ border-top-left-radius: 0;
309
+ border-bottom-left-radius: 0;
310
+ }
311
+
312
+ /* Semantic Ui theme */
313
+ .minicolors-theme-semanticui .minicolors-swatch {
314
+ top: 0;
315
+ left: 0;
316
+ padding: 18px;
317
+ }
318
+ .minicolors-theme-semanticui input {
319
+ text-indent: 30px;
320
+ }
assets/js/clc-customizer.js CHANGED
@@ -1,304 +1,321 @@
1
- ( function( $ ) {
2
- 'use strict';
3
-
4
- if ( 'undefined' !== typeof( wp ) && 'undefined' !== typeof( wp.customize ) ) {
5
-
6
- // Detect when the templates section is expanded (or closed) so we can hide the templates shortcut when it's open.
7
- wp.customize.panel( 'clc_main_panel', function( section ) {
8
- section.expanded.bind( function( isExpanding ) {
9
- var loginURL = CLCUrls.siteurl + '?colorlib-login-customizer-customization=true';
10
-
11
- // Value of isExpanding will = true if you're entering the section, false if you're leaving it.
12
- if ( isExpanding ) {
13
- wp.customize.previewer.previewUrl.set( loginURL );
14
- } else {
15
- wp.customize.previewer.previewUrl.set( CLCUrls.siteurl );
16
- }
17
- });
18
- });
19
-
20
- wp.customize.controlConstructor['clc-templates'] = wp.customize.Control.extend({
21
- ready: function() {
22
- var control = this;
23
-
24
- this.container.on( 'change', 'input:radio', function() {
25
- var template = $( this ).val();
26
-
27
- control.loadTemplate( 'default' );
28
-
29
- if ( 'default' !== template ) {
30
- control.loadTemplate( template );
31
- }
32
-
33
- });
34
- },
35
- loadTemplate: function( optionName ) {
36
- var control = this,
37
- options = control.params.options[ optionName ];
38
-
39
- $.each( options, function( index, option ) {
40
- var currentControl = wp.customize.control( option.name );
41
-
42
- if ( 'default' === optionName ) {
43
- currentControl.setting( option.value );
44
- } else {
45
- currentControl.setting( option.value );
46
- }
47
-
48
- });
49
- }
50
- });
51
-
52
- wp.customize.controlConstructor['clc-range-slider'] = wp.customize.Control.extend({
53
- ready: function() {
54
- var control = this,
55
- controlField = control.container.find( 'input.clc-slider' ),
56
- controlSlider = control.container.find( 'div.clc-slider' ),
57
- controlSliderData = control.params.choices,
58
- updating = false;
59
-
60
- controlSlider.slider({
61
- range: 'min',
62
- min: controlSliderData.min,
63
- max: controlSliderData.max,
64
- step: controlSliderData.step,
65
- value: controlField.val(),
66
- slide: function( event, ui ) {
67
- controlField.val( ui.value ).keyup();
68
- },
69
- stop: function( event, ui ) {
70
- controlField.val( ui.value );
71
- updating = true;
72
- control.setting.set( ui.value );
73
- updating = false;
74
- }
75
- });
76
-
77
- // Whenever the setting's value changes, refresh the preview.
78
- control.setting.bind( function( value ) {
79
-
80
- // Bail if the update came from the control itself.
81
- if ( updating ) {
82
- return;
83
- }
84
-
85
- controlField.val( value );
86
- controlSlider.slider( 'value', value );
87
-
88
- });
89
-
90
- }
91
- });
92
-
93
- wp.customize.controlConstructor['clc-button-group'] = wp.customize.Control.extend({
94
- ready: function() {
95
- var control = this,
96
- updating = false;
97
- control.container.on( 'click', '.colorlib-login-customizer-control-group > a', function() {
98
- var value = $( this ).attr( 'data-value' );
99
- $( this ).siblings().removeClass( 'active' );
100
- $( this ).addClass( 'active' );
101
-
102
- updating = true;
103
- control.setting.set( value );
104
- updating = false;
105
- });
106
-
107
- // Whenever the setting's value changes, refresh the preview.
108
- control.setting.bind( function( value ) {
109
-
110
- var options = control.container.find( '.colorlib-login-customizer-control-group > a' );
111
-
112
- // Bail if the update came from the control itself.
113
- if ( updating ) {
114
- return;
115
- }
116
-
117
- options.removeClass( 'active' );
118
- options.filter( '[data-value=' + value + ']' ).addClass( 'active' );
119
-
120
- });
121
-
122
- }
123
- });
124
-
125
- wp.customize.controlConstructor['clc-column-width'] = wp.customize.Control.extend({
126
- ready: function() {
127
- var control = this,
128
- updating = false;
129
-
130
- control.values = control.params.value;
131
-
132
- control.container.on( 'click', '.clc-layouts-setup .clc-column > a', function() {
133
- var currentAction = $( this ).data( 'action' );
134
-
135
- updating = true;
136
- control.updateColumns( currentAction );
137
- updating = false;
138
-
139
- });
140
-
141
- // Whenever the setting's value changes, refresh the preview.
142
- control.setting.bind( function( value ) {
143
-
144
- // Bail if the update came from the control itself.
145
- if ( updating ) {
146
- return;
147
- }
148
-
149
- control.values = value;
150
- control.rederColumns();
151
-
152
- });
153
-
154
- },
155
-
156
- updateColumns: function( increment ) {
157
- var incrementElement,
158
- decrementElement,
159
- control = this;
160
-
161
- if ( 11 === control.values[ increment ] ) {
162
- return;
163
- }
164
-
165
- if ( 'left' == increment ) {
166
- incrementElement = control.container.find( '.clc-column-left' );
167
- decrementElement = control.container.find( '.clc-column-right' );
168
-
169
- control.values['left'] += 1;
170
- control.values['right'] -= 1;
171
-
172
- }else{
173
- incrementElement = control.container.find( '.clc-column-right' );
174
- decrementElement = control.container.find( '.clc-column-left' );
175
-
176
- control.values['right'] += 1;
177
- control.values['left'] -= 1;
178
-
179
- }
180
-
181
- // Update control values
182
- control.setting( '' );
183
- control.setting( control.values );
184
-
185
- control.rederColumns();
186
-
187
- },
188
-
189
- rederColumns: function() {
190
- var control = this,
191
- leftColumn = control.container.find( '.clc-column-left' ),
192
- rightColumn = control.container.find( '.clc-column-right' ),
193
- classes = 'col12 col11 col10 col9 col8 col7 col6 col5 col4 col3 col2 col1';
194
-
195
- leftColumn.removeClass( classes ).addClass( 'col' + control.values['left'] );
196
- rightColumn.removeClass( classes ).addClass( 'col' + control.values['right'] );
197
-
198
- }
199
-
200
-
201
-
202
- });
203
-
204
- wp.customize.controlConstructor['clc-color-picker'] = wp.customize.Control.extend({
205
- ready: function() {
206
- var control = this,
207
- updating = false,
208
- clear = control.container.find( 'a.clc-color-picker-default' ),
209
- input = $( control.container ).find( '.clc-color-picker' );
210
-
211
- input.minicolors({
212
- format: 'hex',
213
- opacity: true,
214
- keywords: 'transparent, initial, inherit',
215
- change: function( value, opacity ) {
216
- updating = true;
217
- control.setting.set( input.minicolors( 'rgbaString' ) );
218
- updating = false;
219
- }
220
- });
221
-
222
- if ( clear.length > 0 ) {
223
- clear.on( 'click', function( e ) {
224
- var defaultValue = $( this ).attr( 'data-default' );
225
- e.preventDefault();
226
-
227
- input.minicolors( 'value', defaultValue );
228
- updating = true;
229
- control.setting.set( defaultValue );
230
- updating = false;
231
- });
232
- }
233
-
234
- // Whenever the setting's value changes, refresh the preview.
235
- control.setting.bind( function( value ) {
236
-
237
- // Bail if the update came from the control itself.
238
- if ( updating ) {
239
- return;
240
- }
241
- input.minicolors( 'value', value );
242
-
243
- });
244
- }
245
- });
246
-
247
- // Listen for previewer events
248
- wp.customize.bind( 'ready', function() {
249
- wp.customize.previewer.bind( 'clc-focus-section', function( sectionName ) {
250
- var section = wp.customize.section( sectionName );
251
-
252
- if ( undefined !== section ) {
253
- section.focus();
254
- }
255
- });
256
-
257
- wp.customize( 'clc-options[columns]', function( value ) {
258
- value.bind( function( to ) {
259
- var alignControl = wp.customize.control( 'clc-options[form-column-align]' ),
260
- backgroundControl = wp.customize.control( 'clc-options[custom-background-form]' ),
261
- columnsWidthControl = wp.customize.control( 'clc-options[columns-width]' ),
262
- backgroundColorControl = wp.customize.control( 'clc-options[custom-background-color-form]' );
263
- if ( '2' === to ) {
264
- alignControl.toggle( true );
265
- backgroundControl.toggle( true );
266
- backgroundColorControl.toggle( true );
267
- columnsWidthControl.toggle( true );
268
- } else {
269
- alignControl.toggle( false );
270
- backgroundControl.toggle( false );
271
- backgroundColorControl.toggle( false );
272
- columnsWidthControl.toggle( false );
273
- }
274
- });
275
- });
276
-
277
- wp.customize( 'clc-options[use-text-logo]', function( value ) {
278
- value.bind( function( to ) {
279
- var logoText = wp.customize.control( 'clc-options[logo-text]' ),
280
- logoTextColor = wp.customize.control( 'clc-options[logo-text-color]' ),
281
- logoTextColorHover = wp.customize.control( 'clc-options[logo-text-color-hover]' ),
282
- logoTextSize = wp.customize.control( 'clc-options[logo-text-size]' ),
283
- logoImage = wp.customize.control( 'clc-options[custom-logo]' );
284
-
285
- if ( '1' == to ) {
286
- logoText.toggle( true );
287
- logoTextColor.toggle( true );
288
- logoTextColorHover.toggle( true );
289
- logoTextSize.toggle( true );
290
- logoImage.toggle( false );
291
- }else{
292
- logoText.toggle( false );
293
- logoTextColor.toggle( false );
294
- logoTextColorHover.toggle( false );
295
- logoTextSize.toggle( false );
296
- logoImage.toggle( true );
297
- }
298
- });
299
- });
300
-
301
- });
302
-
303
- }
304
- })( jQuery );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ( function( $ ) {
2
+ 'use strict';
3
+
4
+ if ( 'undefined' !== typeof( wp ) && 'undefined' !== typeof( wp.customize ) ) {
5
+
6
+ // Detect when the templates section is expanded (or closed) so we can hide the templates shortcut when it's open.
7
+ wp.customize.panel( 'clc_main_panel', function( section ) {
8
+ section.expanded.bind( function( isExpanding ) {
9
+ var loginURL = CLCUrls.siteurl + '?colorlib-login-customizer-customization=true';
10
+
11
+ // Value of isExpanding will = true if you're entering the section, false if you're leaving it.
12
+ if ( isExpanding ) {
13
+ wp.customize.previewer.previewUrl.set( loginURL );
14
+ } else {
15
+ wp.customize.previewer.previewUrl.set( CLCUrls.siteurl );
16
+ }
17
+ });
18
+ });
19
+
20
+ wp.customize.controlConstructor['clc-templates'] = wp.customize.Control.extend({
21
+ ready: function() {
22
+ var control = this;
23
+
24
+ this.container.on( 'change', 'input:radio', function() {
25
+ var template = $( this ).val();
26
+
27
+ control.loadTemplate( 'default' );
28
+
29
+ if ( 'default' !== template ) {
30
+ control.loadTemplate( template );
31
+ }
32
+
33
+ });
34
+ },
35
+ loadTemplate: function( optionName ) {
36
+ var control = this,
37
+ options = control.params.options[ optionName ];
38
+
39
+ $.each( options, function( index, option ) {
40
+ var currentControl = wp.customize.control( option.name );
41
+
42
+ if ( 'default' === optionName ) {
43
+ currentControl.setting( option.value );
44
+ } else {
45
+ currentControl.setting( option.value );
46
+ }
47
+
48
+ });
49
+ }
50
+ });
51
+
52
+ wp.customize.controlConstructor['clc-range-slider'] = wp.customize.Control.extend({
53
+ ready: function() {
54
+ var control = this,
55
+ controlField = control.container.find( 'input.clc-slider' ),
56
+ controlSlider = control.container.find( 'div.clc-slider' ),
57
+ controlSliderData = control.params.choices,
58
+ updating = false;
59
+
60
+ controlSlider.slider({
61
+ range: 'min',
62
+ min: controlSliderData.min,
63
+ max: controlSliderData.max,
64
+ step: controlSliderData.step,
65
+ value: controlField.val(),
66
+ slide: function( event, ui ) {
67
+ controlField.val( ui.value ).keyup();
68
+ },
69
+ stop: function( event, ui ) {
70
+ controlField.val( ui.value );
71
+ updating = true;
72
+ control.setting.set( ui.value );
73
+ updating = false;
74
+ }
75
+ });
76
+
77
+ // Whenever the setting's value changes, refresh the preview.
78
+ control.setting.bind( function( value ) {
79
+
80
+ // Bail if the update came from the control itself.
81
+ if ( updating ) {
82
+ return;
83
+ }
84
+
85
+ controlField.val( value );
86
+ controlSlider.slider( 'value', value );
87
+
88
+ });
89
+
90
+ }
91
+ });
92
+
93
+ wp.customize.controlConstructor['clc-button-group'] = wp.customize.Control.extend({
94
+ ready: function() {
95
+ var control = this,
96
+ updating = false;
97
+ control.container.on( 'click', '.colorlib-login-customizer-control-group > a', function() {
98
+ var value = $( this ).attr( 'data-value' );
99
+ $( this ).siblings().removeClass( 'active' );
100
+ $( this ).addClass( 'active' );
101
+
102
+ updating = true;
103
+ control.setting.set( value );
104
+ updating = false;
105
+ });
106
+
107
+ // Whenever the setting's value changes, refresh the preview.
108
+ control.setting.bind( function( value ) {
109
+
110
+ var options = control.container.find( '.colorlib-login-customizer-control-group > a' );
111
+
112
+ // Bail if the update came from the control itself.
113
+ if ( updating ) {
114
+ return;
115
+ }
116
+
117
+ options.removeClass( 'active' );
118
+ options.filter( '[data-value=' + value + ']' ).addClass( 'active' );
119
+
120
+ });
121
+
122
+ }
123
+ });
124
+
125
+ wp.customize.controlConstructor['clc-column-width'] = wp.customize.Control.extend({
126
+ ready: function() {
127
+ var control = this,
128
+ updating = false;
129
+
130
+ control.values = control.params.value;
131
+
132
+ control.container.on( 'click', '.clc-layouts-setup .clc-column > a', function() {
133
+ var currentAction = $( this ).data( 'action' );
134
+
135
+ updating = true;
136
+ control.updateColumns( currentAction );
137
+ updating = false;
138
+
139
+ });
140
+
141
+ // Whenever the setting's value changes, refresh the preview.
142
+ control.setting.bind( function( value ) {
143
+
144
+ // Bail if the update came from the control itself.
145
+ if ( updating ) {
146
+ return;
147
+ }
148
+
149
+ control.values = value;
150
+ control.rederColumns();
151
+
152
+ });
153
+
154
+ },
155
+
156
+ updateColumns: function( increment ) {
157
+ var incrementElement,
158
+ decrementElement,
159
+ control = this;
160
+
161
+ if ( 11 === control.values[ increment ] ) {
162
+ return;
163
+ }
164
+
165
+ if ( 'left' == increment ) {
166
+ incrementElement = control.container.find( '.clc-column-left' );
167
+ decrementElement = control.container.find( '.clc-column-right' );
168
+
169
+ control.values['left'] += 1;
170
+ control.values['right'] -= 1;
171
+
172
+ }else{
173
+ incrementElement = control.container.find( '.clc-column-right' );
174
+ decrementElement = control.container.find( '.clc-column-left' );
175
+
176
+ control.values['right'] += 1;
177
+ control.values['left'] -= 1;
178
+
179
+ }
180
+
181
+ // Update control values
182
+ control.setting( '' );
183
+ control.setting( control.values );
184
+
185
+ control.rederColumns();
186
+
187
+ },
188
+
189
+ rederColumns: function() {
190
+ var control = this,
191
+ leftColumn = control.container.find( '.clc-column-left' ),
192
+ rightColumn = control.container.find( '.clc-column-right' ),
193
+ classes = 'col12 col11 col10 col9 col8 col7 col6 col5 col4 col3 col2 col1';
194
+
195
+ leftColumn.removeClass( classes ).addClass( 'col' + control.values['left'] );
196
+ rightColumn.removeClass( classes ).addClass( 'col' + control.values['right'] );
197
+
198
+ }
199
+
200
+
201
+
202
+ });
203
+
204
+ wp.customize.controlConstructor['clc-color-picker'] = wp.customize.Control.extend({
205
+ ready: function() {
206
+ var control = this,
207
+ updating = false,
208
+ clear = control.container.find( 'a.clc-color-picker-default' ),
209
+ input = $( control.container ).find( '.clc-color-picker' );
210
+
211
+ input.minicolors({
212
+ format: 'hex',
213
+ opacity: true,
214
+ keywords: 'transparent, initial, inherit',
215
+ change: function( value, opacity ) {
216
+ updating = true;
217
+ control.setting.set( input.minicolors( 'rgbaString' ) );
218
+ updating = false;
219
+ }
220
+ });
221
+
222
+ if ( clear.length > 0 ) {
223
+ clear.on( 'click', function( e ) {
224
+ var defaultValue = $( this ).attr( 'data-default' );
225
+ e.preventDefault();
226
+
227
+ input.minicolors( 'value', defaultValue );
228
+ updating = true;
229
+ control.setting.set( defaultValue );
230
+ updating = false;
231
+ });
232
+ }
233
+
234
+ // Whenever the setting's value changes, refresh the preview.
235
+ control.setting.bind( function( value ) {
236
+
237
+ // Bail if the update came from the control itself.
238
+ if ( updating ) {
239
+ return;
240
+ }
241
+ input.minicolors( 'value', value );
242
+
243
+ });
244
+ }
245
+ });
246
+
247
+ // Listen for previewer events
248
+ wp.customize.bind( 'ready', function() {
249
+ wp.customize.previewer.bind( 'clc-focus-section', function( sectionName ) {
250
+ var section = wp.customize.section( sectionName );
251
+
252
+ if ( undefined !== section ) {
253
+ section.focus();
254
+ }
255
+ });
256
+
257
+ wp.customize( 'clc-options[columns]', function( value ) {
258
+ value.bind( function( to ) {
259
+ var alignControl = wp.customize.control( 'clc-options[form-column-align]' ),
260
+ backgroundControl = wp.customize.control( 'clc-options[custom-background-form]' ),
261
+ columnsWidthControl = wp.customize.control( 'clc-options[columns-width]' ),
262
+ backgroundColorControl = wp.customize.control( 'clc-options[custom-background-color-form]' );
263
+ if ( '2' === to ) {
264
+ alignControl.toggle( true );
265
+ backgroundControl.toggle( true );
266
+ backgroundColorControl.toggle( true );
267
+ columnsWidthControl.toggle( true );
268
+ } else {
269
+ alignControl.toggle( false );
270
+ backgroundControl.toggle( false );
271
+ backgroundColorControl.toggle( false );
272
+ columnsWidthControl.toggle( false );
273
+ }
274
+ });
275
+ });
276
+
277
+ // validation for the login-level setting
278
+ wp.customize( 'clc-options[login-label]', function ( setting ) {
279
+ setting.validate = function ( value ) {
280
+ var code, notification;
281
+
282
+ code = 'required';
283
+ if ( ! value ) {
284
+ notification = new wp.customize.Notification( code, {message: 'value is empty' } );
285
+ setting.notifications.add( code, notification );
286
+ } else {
287
+ setting.notifications.remove( code );
288
+ }
289
+
290
+ return value;
291
+ };
292
+ } );
293
+
294
+ wp.customize( 'clc-options[use-text-logo]', function( value ) {
295
+ value.bind( function( to ) {
296
+ var logoText = wp.customize.control( 'clc-options[logo-text]' ),
297
+ logoTextColor = wp.customize.control( 'clc-options[logo-text-color]' ),
298
+ logoTextColorHover = wp.customize.control( 'clc-options[logo-text-color-hover]' ),
299
+ logoTextSize = wp.customize.control( 'clc-options[logo-text-size]' ),
300
+ logoImage = wp.customize.control( 'clc-options[custom-logo]' );
301
+
302
+ if ( '1' == to ) {
303
+ logoText.toggle( true );
304
+ logoTextColor.toggle( true );
305
+ logoTextColorHover.toggle( true );
306
+ logoTextSize.toggle( true );
307
+ logoImage.toggle( false );
308
+ }else{
309
+ logoText.toggle( false );
310
+ logoTextColor.toggle( false );
311
+ logoTextColorHover.toggle( false );
312
+ logoTextSize.toggle( false );
313
+ logoImage.toggle( true );
314
+ }
315
+ });
316
+ });
317
+
318
+ });
319
+
320
+ }
321
+ })( jQuery );
assets/js/clc-preview.js CHANGED
@@ -1,169 +1,186 @@
1
- ( function( $ ) {
2
-
3
- var clcCustomCSS = {
4
- selectors: {},
5
- settings: {},
6
- style: '',
7
- init: function( settings, selectors ) {
8
- this.selectors = selectors;
9
- this.settings = settings;
10
-
11
- this.style = $( '#clc-style' );
12
- this._binds();
13
- },
14
- _binds: function() {
15
- var self = this;
16
- $.each( self.settings, function( index, setting ) {
17
- wp.customize( setting.name, function( value ) {
18
- value.bind( function( to ) {
19
- self.settings[ index ].value = to;
20
- self.createCSSLines();
21
- } );
22
- } );
23
- });
24
- },
25
- createCSSLines: function() {
26
- var style = '',
27
- self = this;
28
- $.each( self.selectors, function( index, selector ) {
29
- var cssLine = index + '{';
30
- $.each( selector, function( index, option ) {
31
- cssLine = cssLine + self.generateCSSLine( option );
32
- });
33
- style = style + cssLine + '}';
34
- });
35
-
36
- self.style.html( style );
37
-
38
- },
39
- generateCSSLine: function( option ) {
40
- var line = this.settings[ option ].attribute + ':';
41
-
42
- if ( '' === this.settings[ option ].value ) {
43
- return '';
44
- }
45
- if ( undefined === this.settings[ option ].attribute || undefined === this.settings[ option ].value ) {
46
- return '';
47
- }
48
-
49
- if ( $.inArray( this.settings[ option ].attribute, [ 'width', 'min-width', 'max-width', 'background-size', 'height', 'min-height', 'max-height', 'font-size' ] ) >= 0 ) {
50
- line += this.settings[ option ].value + 'px';
51
- }else if ( 'background-image' === this.settings[ option ].attribute ) {
52
- line += 'url(' + this.settings[ option ].value + ')';
53
- }else if ( 'display' === this.settings[ option ].attribute ) {
54
- if ( this.settings[ option ].value ) {
55
- line += 'none';
56
- } else {
57
- line += 'block';
58
- }
59
- } else {
60
- line += this.settings[ option ].value;
61
- }
62
- line += ';';
63
-
64
- return line;
65
- }
66
- };
67
-
68
- clcCustomCSS.init( CLC.settings, CLC.selectors );
69
-
70
- // Live edits
71
- /* Columns */
72
- wp.customize( 'clc-options[columns]', function( value ) {
73
- value.bind( function( to ) {
74
- if ( '2' === to ) {
75
- $( 'body' ).addClass( 'ml-half-screen' );
76
- } else {
77
- $( 'body' ).removeClass( 'ml-half-screen' );
78
- }
79
- } );
80
- } );
81
-
82
- // Add class if we have text logo
83
- wp.customize( 'clc-options[use-text-logo]', function( value ) {
84
- value.bind( function( to ) {
85
- if ( to ) {
86
- $( 'body' ).addClass( 'clc-text-logo' );
87
- } else {
88
- $( 'body' ).removeClass( 'clc-text-logo' );
89
- }
90
- } );
91
- } );
92
-
93
- wp.customize( 'clc-options[logo-text]', function( value ) {
94
- value.bind( function( to ) {
95
- $( '#logo-text' ).text( to );
96
- } );
97
- } );
98
-
99
- /* Column Align */
100
- wp.customize( 'clc-options[form-column-align]', function( value ) {
101
- value.bind( function( to ) {
102
- $( 'body' ).removeClass( 'ml-login-align-1 ml-login-align-2 ml-login-align-3 ml-login-align-4' );
103
- $( 'body' ).addClass( 'ml-login-align-' + to );
104
- } );
105
- } );
106
-
107
- /* Column Vertical Align */
108
- wp.customize( 'clc-options[form-vertical-align]', function( value ) {
109
- value.bind( function( to ) {
110
- $( 'body' ).removeClass( 'ml-login-vertical-align-1 ml-login-vertical-align-2 ml-login-vertical-align-3' );
111
- $( 'body' ).addClass( 'ml-login-vertical-align-' + to );
112
- } );
113
- } );
114
-
115
- /* Column Horizontal Align */
116
- wp.customize( 'clc-options[form-horizontal-align]', function( value ) {
117
- value.bind( function( to ) {
118
- $( 'body' ).removeClass( 'ml-login-horizontal-align-1 ml-login-horizontal-align-2 ml-login-horizontal-align-3' );
119
- $( 'body' ).addClass( 'ml-login-horizontal-align-' + to );
120
- } );
121
- } );
122
-
123
- // Custom CSS
124
- wp.customize( 'clc-options[custom-css]', function( value ) {
125
- value.bind( function( to ) {
126
- $( '#clc-custom-css' ).text( to );
127
- } );
128
- } );
129
-
130
- // Username label
131
- wp.customize( 'clc-options[username-label]', function( value ) {
132
- value.bind( function( to ) {
133
- $( '#clc-username-label' ).text( to );
134
- } );
135
- } );
136
-
137
- // Password label
138
- wp.customize( 'clc-options[password-label]', function( value ) {
139
- value.bind( function( to ) {
140
- $( '#clc-password-label' ).text( to );
141
- } );
142
- } );
143
-
144
- // Columns width
145
- wp.customize( 'clc-options[columns-width]', function( value ) {
146
- value.bind( function( to ) {
147
- var customCSS = '',
148
- leftWidth,
149
- rightWidth;
150
- if ( '' !== to && undefined !== to.left && undefined !== to.right ) {
151
- leftWidth = ( 100 / 12 )*parseInt( to.left, 10 );
152
- rightWidth = ( 100 / 12 )*parseInt( to.right, 10 );
153
- customCSS = '.ml-half-screen.ml-login-align-3 .ml-container .ml-extra-div,.ml-half-screen.ml-login-align-1 .ml-container .ml-form-container{ width:' + leftWidth + '%; }';
154
- customCSS += '.ml-half-screen.ml-login-align-4 .ml-container .ml-extra-div,.ml-half-screen.ml-login-align-2 .ml-container .ml-form-container{ flex-basis:' + leftWidth + '%; }';
155
-
156
- customCSS += '.ml-half-screen.ml-login-align-3 .ml-container .ml-form-container,.ml-half-screen.ml-login-align-1 .ml-container .ml-extra-div{ width:' + rightWidth + '%; }';
157
- customCSS += '.ml-half-screen.ml-login-align-4 .ml-container .ml-form-container,.ml-half-screen.ml-login-align-2 .ml-container .ml-extra-div{ flex-basis:' + rightWidth + '%; }';
158
-
159
- $( '#clc-columns-style' ).text( customCSS );
160
-
161
- }
162
- } );
163
- } );
164
-
165
- $( '.clc-preview-event' ).click( function() {
166
- wp.customize.preview.send( 'clc-focus-section', $( this ).data( 'section' ) );
167
- } );
168
-
169
- })( jQuery );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ( function( $ ) {
2
+
3
+ var clcCustomCSS = {
4
+ selectors: {},
5
+ settings: {},
6
+ style: '',
7
+ init: function( settings, selectors ) {
8
+ this.selectors = selectors;
9
+ this.settings = settings;
10
+
11
+ this.style = $( '#clc-style' );
12
+ this._binds();
13
+ },
14
+ _binds: function() {
15
+ var self = this;
16
+ $.each( self.settings, function( index, setting ) {
17
+ wp.customize( setting.name, function( value ) {
18
+ value.bind( function( to ) {
19
+ self.settings[ index ].value = to;
20
+ self.createCSSLines();
21
+ } );
22
+ } );
23
+ });
24
+ },
25
+ createCSSLines: function() {
26
+ var style = '',
27
+ self = this;
28
+ $.each( self.selectors, function( index, selector ) {
29
+ var cssLine = index + '{';
30
+ $.each( selector, function( index, option ) {
31
+ cssLine = cssLine + self.generateCSSLine( option );
32
+ });
33
+ style = style + cssLine + '}';
34
+ });
35
+
36
+ self.style.html( style );
37
+
38
+ },
39
+ generateCSSLine: function( option ) {
40
+ var line = this.settings[ option ].attribute + ':';
41
+
42
+ if ( '' === this.settings[ option ].value ) {
43
+ return '';
44
+ }
45
+ if ( undefined === this.settings[ option ].attribute || undefined === this.settings[ option ].value ) {
46
+ return '';
47
+ }
48
+
49
+ if ( $.inArray( this.settings[ option ].attribute, [ 'width', 'min-width', 'max-width', 'background-size', 'height', 'min-height', 'max-height', 'font-size' ] ) >= 0 ) {
50
+ line += this.settings[ option ].value + 'px';
51
+ }else if ( 'background-image' === this.settings[ option ].attribute ) {
52
+ line += 'url(' + this.settings[ option ].value + ')';
53
+ }else if ( 'display' === this.settings[ option ].attribute ) {
54
+ if ( this.settings[ option ].value ) {
55
+ line += 'none';
56
+ } else {
57
+ line += 'block';
58
+ }
59
+ } else {
60
+ line += this.settings[ option ].value;
61
+ }
62
+ line += ';';
63
+
64
+ return line;
65
+ }
66
+ };
67
+
68
+ clcCustomCSS.init( CLC.settings, CLC.selectors );
69
+
70
+ // Live edits
71
+ /* Columns */
72
+ wp.customize( 'clc-options[columns]', function( value ) {
73
+ value.bind( function( to ) {
74
+ if ( '2' === to ) {
75
+ $( 'body' ).addClass( 'ml-half-screen' );
76
+ } else {
77
+ $( 'body' ).removeClass( 'ml-half-screen' );
78
+ }
79
+ } );
80
+ } );
81
+
82
+ // Add class if we have text logo
83
+ wp.customize( 'clc-options[use-text-logo]', function( value ) {
84
+ value.bind( function( to ) {
85
+ if ( to ) {
86
+ $( 'body' ).addClass( 'clc-text-logo' );
87
+ } else {
88
+ $( 'body' ).removeClass( 'clc-text-logo' );
89
+ }
90
+ } );
91
+ } );
92
+
93
+ wp.customize( 'clc-options[logo-text]', function( value ) {
94
+ value.bind( function( to ) {
95
+ $( '#logo-text' ).text( to );
96
+ } );
97
+ } );
98
+
99
+ /* Column Align */
100
+ wp.customize( 'clc-options[form-column-align]', function( value ) {
101
+ value.bind( function( to ) {
102
+ $( 'body' ).removeClass( 'ml-login-align-1 ml-login-align-2 ml-login-align-3 ml-login-align-4' );
103
+ $( 'body' ).addClass( 'ml-login-align-' + to );
104
+ } );
105
+ } );
106
+
107
+ /* Column Vertical Align */
108
+ wp.customize( 'clc-options[form-vertical-align]', function( value ) {
109
+ value.bind( function( to ) {
110
+ $( 'body' ).removeClass( 'ml-login-vertical-align-1 ml-login-vertical-align-2 ml-login-vertical-align-3' );
111
+ $( 'body' ).addClass( 'ml-login-vertical-align-' + to );
112
+ } );
113
+ } );
114
+
115
+ /* Column Horizontal Align */
116
+ wp.customize( 'clc-options[form-horizontal-align]', function( value ) {
117
+ value.bind( function( to ) {
118
+ $( 'body' ).removeClass( 'ml-login-horizontal-align-1 ml-login-horizontal-align-2 ml-login-horizontal-align-3' );
119
+ $( 'body' ).addClass( 'ml-login-horizontal-align-' + to );
120
+ } );
121
+ } );
122
+
123
+ // Custom CSS
124
+ wp.customize( 'clc-options[custom-css]', function( value ) {
125
+ value.bind( function( to ) {
126
+ $( '#clc-custom-css' ).text( to );
127
+ } );
128
+ } );
129
+
130
+ // Username label
131
+ wp.customize( 'clc-options[username-label]', function( value ) {
132
+ value.bind( function( to ) {
133
+ $( '#clc-username-label' ).text( to );
134
+ } );
135
+ } );
136
+
137
+ // Password label
138
+ wp.customize( 'clc-options[password-label]', function( value ) {
139
+ value.bind( function( to ) {
140
+ $( '#clc-password-label' ).text( to );
141
+ } );
142
+ } );
143
+
144
+ // Remember Me label
145
+ wp.customize( 'clc-options[rememberme-label]', function( value ) {
146
+ value.bind( function( to ) {
147
+ $( '#clc-rememberme-label' ).text( to );
148
+ } );
149
+ } );
150
+
151
+ // Login label
152
+ wp.customize( 'clc-options[login-label]', function( value ) {
153
+ value.bind( function( to ) {
154
+ if( ! to ) {
155
+ return;
156
+ }
157
+ $( '#wp-submit' ).val( to );
158
+ } );
159
+ } );
160
+
161
+ // Columns width
162
+ wp.customize( 'clc-options[columns-width]', function( value ) {
163
+ value.bind( function( to ) {
164
+ var customCSS = '',
165
+ leftWidth,
166
+ rightWidth;
167
+ if ( '' !== to && undefined !== to.left && undefined !== to.right ) {
168
+ leftWidth = ( 100 / 12 )*parseInt( to.left, 10 );
169
+ rightWidth = ( 100 / 12 )*parseInt( to.right, 10 );
170
+ customCSS = '.ml-half-screen.ml-login-align-3 .ml-container .ml-extra-div,.ml-half-screen.ml-login-align-1 .ml-container .ml-form-container{ width:' + leftWidth + '%; }';
171
+ customCSS += '.ml-half-screen.ml-login-align-4 .ml-container .ml-extra-div,.ml-half-screen.ml-login-align-2 .ml-container .ml-form-container{ flex-basis:' + leftWidth + '%; }';
172
+
173
+ customCSS += '.ml-half-screen.ml-login-align-3 .ml-container .ml-form-container,.ml-half-screen.ml-login-align-1 .ml-container .ml-extra-div{ width:' + rightWidth + '%; }';
174
+ customCSS += '.ml-half-screen.ml-login-align-4 .ml-container .ml-form-container,.ml-half-screen.ml-login-align-2 .ml-container .ml-extra-div{ flex-basis:' + rightWidth + '%; }';
175
+
176
+ $( '#clc-columns-style' ).text( customCSS );
177
+
178
+ }
179
+ } );
180
+ } );
181
+
182
+ $( '.clc-preview-event' ).click( function() {
183
+ wp.customize.preview.send( 'clc-focus-section', $( this ).data( 'section' ) );
184
+ } );
185
+
186
+ })( jQuery );
assets/js/jquery.minicolors.js CHANGED
@@ -1,1109 +1,1109 @@
1
- // jscs:disable
2
-
3
- // jQuery MiniColors: A tiny color picker built on jQuery
4
- //
5
- // Developed by Cory LaViska for A Beautiful Site, LLC
6
- //
7
- // Licensed under the MIT license: http://opensource.org/licenses/MIT
8
- //
9
- (function (factory) {
10
- if(typeof define === 'function' && define.amd) {
11
- // AMD. Register as an anonymous module.
12
- define(['jquery'], factory);
13
- } else if(typeof exports === 'object') {
14
- // Node/CommonJS
15
- module.exports = factory(require('jquery'));
16
- } else {
17
- // Browser globals
18
- factory(jQuery);
19
- }
20
- }(function ($) {
21
- 'use strict';
22
-
23
- // Defaults
24
- $.minicolors = {
25
- defaults: {
26
- animationSpeed: 50,
27
- animationEasing: 'swing',
28
- change: null,
29
- changeDelay: 0,
30
- control: 'hue',
31
- defaultValue: '',
32
- format: 'hex',
33
- hide: null,
34
- hideSpeed: 100,
35
- inline: false,
36
- keywords: '',
37
- letterCase: 'lowercase',
38
- opacity: false,
39
- position: 'bottom left',
40
- show: null,
41
- showSpeed: 100,
42
- theme: 'default',
43
- swatches: []
44
- }
45
- };
46
-
47
- // Public methods
48
- $.extend($.fn, {
49
- minicolors: function(method, data) {
50
-
51
- switch(method) {
52
- // Destroy the control
53
- case 'destroy':
54
- $(this).each(function() {
55
- destroy($(this));
56
- });
57
- return $(this);
58
-
59
- // Hide the color picker
60
- case 'hide':
61
- hide();
62
- return $(this);
63
-
64
- // Get/set opacity
65
- case 'opacity':
66
- // Getter
67
- if(data === undefined) {
68
- // Getter
69
- return $(this).attr('data-opacity');
70
- } else {
71
- // Setter
72
- $(this).each(function() {
73
- updateFromInput($(this).attr('data-opacity', data));
74
- });
75
- }
76
- return $(this);
77
-
78
- // Get an RGB(A) object based on the current color/opacity
79
- case 'rgbObject':
80
- return rgbObject($(this), method === 'rgbaObject');
81
-
82
- // Get an RGB(A) string based on the current color/opacity
83
- case 'rgbString':
84
- case 'rgbaString':
85
- return rgbString($(this), method === 'rgbaString');
86
-
87
- // Get/set settings on the fly
88
- case 'settings':
89
- if(data === undefined) {
90
- return $(this).data('minicolors-settings');
91
- } else {
92
- // Setter
93
- $(this).each(function() {
94
- var settings = $(this).data('minicolors-settings') || {};
95
- destroy($(this));
96
- $(this).minicolors($.extend(true, settings, data));
97
- });
98
- }
99
- return $(this);
100
-
101
- // Show the color picker
102
- case 'show':
103
- show($(this).eq(0));
104
- return $(this);
105
-
106
- // Get/set the hex color value
107
- case 'value':
108
- if(data === undefined) {
109
- // Getter
110
- return $(this).val();
111
- } else {
112
- // Setter
113
- $(this).each(function() {
114
- if(typeof(data) === 'object' && data !== null) {
115
- if(data.opacity) {
116
- $(this).attr('data-opacity', keepWithin(data.opacity, 0, 1));
117
- }
118
- if(data.color) {
119
- $(this).val(data.color);
120
- }
121
- } else {
122
- $(this).val(data);
123
- }
124
- updateFromInput($(this));
125
- });
126
- }
127
- return $(this);
128
-
129
- // Initializes the control
130
- default:
131
- if(method !== 'create') data = method;
132
- $(this).each(function() {
133
- init($(this), data);
134
- });
135
- return $(this);
136
-
137
- }
138
-
139
- }
140
- });
141
-
142
- // Initialize input elements
143
- function init(input, settings) {
144
- var minicolors = $('<div class="minicolors" />');
145
- var defaults = $.minicolors.defaults;
146
- var size;
147
- var swatches;
148
- var swatch;
149
- var panel;
150
- var i;
151
-
152
- // Do nothing if already initialized
153
- if(input.data('minicolors-initialized')) return;
154
-
155
- // Handle settings
156
- settings = $.extend(true, {}, defaults, settings);
157
-
158
- // The wrapper
159
- minicolors
160
- .addClass('minicolors-theme-' + settings.theme)
161
- .toggleClass('minicolors-with-opacity', settings.opacity);
162
-
163
- // Custom positioning
164
- if(settings.position !== undefined) {
165
- $.each(settings.position.split(' '), function() {
166
- minicolors.addClass('minicolors-position-' + this);
167
- });
168
- }
169
-
170
- // Input size
171
- if(settings.format === 'rgb') {
172
- size = settings.opacity ? '25' : '20';
173
- } else {
174
- size = settings.keywords ? '11' : '7';
175
- }
176
-
177
- // The input
178
- input
179
- .addClass('minicolors-input')
180
- .data('minicolors-initialized', false)
181
- .data('minicolors-settings', settings)
182
- .prop('size', size)
183
- .wrap(minicolors)
184
- .after(
185
- '<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
186
- '<div class="minicolors-slider minicolors-sprite">' +
187
- '<div class="minicolors-picker"></div>' +
188
- '</div>' +
189
- '<div class="minicolors-opacity-slider minicolors-sprite">' +
190
- '<div class="minicolors-picker"></div>' +
191
- '</div>' +
192
- '<div class="minicolors-grid minicolors-sprite">' +
193
- '<div class="minicolors-grid-inner"></div>' +
194
- '<div class="minicolors-picker"><div></div></div>' +
195
- '</div>' +
196
- '</div>'
197
- );
198
-
199
- // The swatch
200
- if(!settings.inline) {
201
- input.after('<span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span>');
202
- input.next('.minicolors-input-swatch').on('click', function(event) {
203
- event.preventDefault();
204
- input.focus();
205
- });
206
- }
207
-
208
- // Prevent text selection in IE
209
- panel = input.parent().find('.minicolors-panel');
210
- panel.on('selectstart', function() { return false; }).end();
211
-
212
- // Swatches
213
- if(settings.swatches && settings.swatches.length !== 0) {
214
- panel.addClass('minicolors-with-swatches');
215
- swatches = $('<ul class="minicolors-swatches"></ul>')
216
- .appendTo(panel);
217
- for(i = 0; i < settings.swatches.length; ++i) {
218
- swatch = settings.swatches[i];
219
- swatch = isRgb(swatch) ? parseRgb(swatch, true) : hex2rgb(parseHex(swatch, true));
220
- $('<li class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></li>')
221
- .appendTo(swatches)
222
- .data('swatch-color', settings.swatches[i])
223
- .find('.minicolors-swatch-color')
224
- .css({
225
- backgroundColor: rgb2hex(swatch),
226
- opacity: swatch.a
227
- });
228
- settings.swatches[i] = swatch;
229
- }
230
- }
231
-
232
- // Inline controls
233
- if(settings.inline) input.parent().addClass('minicolors-inline');
234
-
235
- updateFromInput(input, false);
236
-
237
- input.data('minicolors-initialized', true);
238
- }
239
-
240
- // Returns the input back to its original state
241
- function destroy(input) {
242
- var minicolors = input.parent();
243
-
244
- // Revert the input element
245
- input
246
- .removeData('minicolors-initialized')
247
- .removeData('minicolors-settings')
248
- .removeProp('size')
249
- .removeClass('minicolors-input');
250
-
251
- // Remove the wrap and destroy whatever remains
252
- minicolors.before(input).remove();
253
- }
254
-
255
- // Shows the specified dropdown panel
256
- function show(input) {
257
- var minicolors = input.parent();
258
- var panel = minicolors.find('.minicolors-panel');
259
- var settings = input.data('minicolors-settings');
260
-
261
- // Do nothing if uninitialized, disabled, inline, or already open
262
- if(
263
- !input.data('minicolors-initialized') ||
264
- input.prop('disabled') ||
265
- minicolors.hasClass('minicolors-inline') ||
266
- minicolors.hasClass('minicolors-focus')
267
- ) return;
268
-
269
- hide();
270
-
271
- minicolors.addClass('minicolors-focus');
272
- panel
273
- .stop(true, true)
274
- .fadeIn(settings.showSpeed, function() {
275
- if(settings.show) settings.show.call(input.get(0));
276
- });
277
- }
278
-
279
- // Hides all dropdown panels
280
- function hide() {
281
- $('.minicolors-focus').each(function() {
282
- var minicolors = $(this);
283
- var input = minicolors.find('.minicolors-input');
284
- var panel = minicolors.find('.minicolors-panel');
285
- var settings = input.data('minicolors-settings');
286
-
287
- panel.fadeOut(settings.hideSpeed, function() {
288
- if(settings.hide) settings.hide.call(input.get(0));
289
- minicolors.removeClass('minicolors-focus');
290
- });
291
-
292
- });
293
- }
294
-
295
- // Moves the selected picker
296
- function move(target, event, animate) {
297
- var input = target.parents('.minicolors').find('.minicolors-input');
298
- var settings = input.data('minicolors-settings');
299
- var picker = target.find('[class$=-picker]');
300
- var offsetX = target.offset().left;
301
- var offsetY = target.offset().top;
302
- var x = Math.round(event.pageX - offsetX);
303
- var y = Math.round(event.pageY - offsetY);
304
- var duration = animate ? settings.animationSpeed : 0;
305
- var wx, wy, r, phi;
306
-
307
- // Touch support
308
- if(event.originalEvent.changedTouches) {
309
- x = event.originalEvent.changedTouches[0].pageX - offsetX;
310
- y = event.originalEvent.changedTouches[0].pageY - offsetY;
311
- }
312
-
313
- // Constrain picker to its container
314
- if(x < 0) x = 0;
315
- if(y < 0) y = 0;
316
- if(x > target.width()) x = target.width();
317
- if(y > target.height()) y = target.height();
318
-
319
- // Constrain color wheel values to the wheel
320
- if(target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid')) {
321
- wx = 75 - x;
322
- wy = 75 - y;
323
- r = Math.sqrt(wx * wx + wy * wy);
324
- phi = Math.atan2(wy, wx);
325
- if(phi < 0) phi += Math.PI * 2;
326
- if(r > 75) {
327
- r = 75;
328
- x = 75 - (75 * Math.cos(phi));
329
- y = 75 - (75 * Math.sin(phi));
330
- }
331
- x = Math.round(x);
332
- y = Math.round(y);
333
- }
334
-
335
- // Move the picker
336
- if(target.is('.minicolors-grid')) {
337
- picker
338
- .stop(true)
339
- .animate({
340
- top: y + 'px',
341
- left: x + 'px'
342
- }, duration, settings.animationEasing, function() {
343
- updateFromControl(input, target);
344
- });
345
- } else {
346
- picker
347
- .stop(true)
348
- .animate({
349
- top: y + 'px'
350
- }, duration, settings.animationEasing, function() {
351
- updateFromControl(input, target);
352
- });
353
- }
354
- }
355
-
356
- // Sets the input based on the color picker values
357
- function updateFromControl(input, target) {
358
-
359
- function getCoords(picker, container) {
360
- var left, top;
361
- if(!picker.length || !container) return null;
362
- left = picker.offset().left;
363
- top = picker.offset().top;
364
-
365
- return {
366
- x: left - container.offset().left + (picker.outerWidth() / 2),
367
- y: top - container.offset().top + (picker.outerHeight() / 2)
368
- };
369
- }
370
-
371
- var hue, saturation, brightness, x, y, r, phi;
372
- var hex = input.val();
373
- var opacity = input.attr('data-opacity');
374
-
375
- // Helpful references
376
- var minicolors = input.parent();
377
- var settings = input.data('minicolors-settings');
378
- var swatch = minicolors.find('.minicolors-input-swatch');
379
-
380
- // Panel objects
381
- var grid = minicolors.find('.minicolors-grid');
382
- var slider = minicolors.find('.minicolors-slider');
383
- var opacitySlider = minicolors.find('.minicolors-opacity-slider');
384
-
385
- // Picker objects
386
- var gridPicker = grid.find('[class$=-picker]');
387
- var sliderPicker = slider.find('[class$=-picker]');
388
- var opacityPicker = opacitySlider.find('[class$=-picker]');
389
-
390
- // Picker positions
391
- var gridPos = getCoords(gridPicker, grid);
392
- var sliderPos = getCoords(sliderPicker, slider);
393
- var opacityPos = getCoords(opacityPicker, opacitySlider);
394
-
395
- // Handle colors
396
- if(target.is('.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider')) {
397
-
398
- // Determine HSB values
399
- switch(settings.control) {
400
- case 'wheel':
401
- // Calculate hue, saturation, and brightness
402
- x = (grid.width() / 2) - gridPos.x;
403
- y = (grid.height() / 2) - gridPos.y;
404
- r = Math.sqrt(x * x + y * y);
405
- phi = Math.atan2(y, x);
406
- if(phi < 0) phi += Math.PI * 2;
407
- if(r > 75) {
408
- r = 75;
409
- gridPos.x = 69 - (75 * Math.cos(phi));
410
- gridPos.y = 69 - (75 * Math.sin(phi));
411
- }
412
- saturation = keepWithin(r / 0.75, 0, 100);
413
- hue = keepWithin(phi * 180 / Math.PI, 0, 360);
414
- brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
415
- hex = hsb2hex({
416
- h: hue,
417
- s: saturation,
418
- b: brightness
419
- });
420
-
421
- // Update UI
422
- slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
423
- break;
424
-
425
- case 'saturation':
426
- // Calculate hue, saturation, and brightness
427
- hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
428
- saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
429
- brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
430
- hex = hsb2hex({
431
- h: hue,
432
- s: saturation,
433
- b: brightness
434
- });
435
-
436
- // Update UI
437
- slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness }));
438
- minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100);
439
- break;
440
-
441
- case 'brightness':
442
- // Calculate hue, saturation, and brightness
443
- hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
444
- saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
445
- brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
446
- hex = hsb2hex({
447
- h: hue,
448
- s: saturation,
449
- b: brightness
450
- });
451
-
452
- // Update UI
453
- slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
454
- minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100));
455
- break;
456
-
457
- default:
458
- // Calculate hue, saturation, and brightness
459
- hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360);
460
- saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
461
- brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
462
- hex = hsb2hex({
463
- h: hue,
464
- s: saturation,
465
- b: brightness
466
- });
467
-
468
- // Update UI
469
- grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));
470
- break;
471
- }
472
-
473
- // Handle opacity
474
- if(settings.opacity) {
475
- opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
476
- } else {
477
- opacity = 1;
478
- }
479
-
480
- updateInput(input, hex, opacity);
481
- }
482
- else {
483
- // Set swatch color
484
- swatch.find('span').css({
485
- backgroundColor: hex,
486
- opacity: opacity
487
- });
488
-
489
- // Handle change event
490
- doChange(input, hex, opacity);
491
- }
492
- }
493
-
494
- // Sets the value of the input and does the appropriate conversions
495
- // to respect settings, also updates the swatch
496
- function updateInput(input, value, opacity) {
497
- var rgb;
498
-
499
- // Helpful references
500
- var minicolors = input.parent();
501
- var settings = input.data('minicolors-settings');
502
- var swatch = minicolors.find('.minicolors-input-swatch');
503
-
504
- if(settings.opacity) input.attr('data-opacity', opacity);
505
-
506
- // Set color string
507
- if(settings.format === 'rgb') {
508
- // Returns RGB(A) string
509
-
510
- // Checks for input format and does the conversion
511
- if(isRgb(value)) {
512
- rgb = parseRgb(value, true);
513
- }
514
- else {
515
- rgb = hex2rgb(parseHex(value, true));
516
- }
517
-
518
- opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
519
- if(isNaN(opacity) || !settings.opacity) opacity = 1;
520
-
521
- if(input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) {
522
- // Set RGBA string if alpha
523
- value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
524
- } else {
525
- // Set RGB string (alpha = 1)
526
- value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
527
- }
528
- } else {
529
- // Returns hex color
530
-
531
- // Checks for input format and does the conversion
532
- if(isRgb(value)) {
533
- value = rgbString2hex(value);
534
- }
535
-
536
- value = convertCase(value, settings.letterCase);
537
- }
538
-
539
- // Update value from picker
540
- input.val(value);
541
-
542
- // Set swatch color
543
- swatch.find('span').css({
544
- backgroundColor: value,
545
- opacity: opacity
546
- });
547
-
548
- // Handle change event
549
- doChange(input, value, opacity);
550
- }
551
-
552
- // Sets the color picker values from the input
553
- function updateFromInput(input, preserveInputValue) {
554
- var hex, hsb, opacity, keywords, alpha, value, x, y, r, phi;
555
-
556
- // Helpful references
557
- var minicolors = input.parent();
558
- var settings = input.data('minicolors-settings');
559
- var swatch = minicolors.find('.minicolors-input-swatch');
560
-
561
- // Panel objects
562
- var grid = minicolors.find('.minicolors-grid');
563
- var slider = minicolors.find('.minicolors-slider');
564
- var opacitySlider = minicolors.find('.minicolors-opacity-slider');
565
-
566
- // Picker objects
567
- var gridPicker = grid.find('[class$=-picker]');
568
- var sliderPicker = slider.find('[class$=-picker]');
569
- var opacityPicker = opacitySlider.find('[class$=-picker]');
570
-
571
- // Determine hex/HSB values
572
- if(isRgb(input.val())) {
573
- // If input value is a rgb(a) string, convert it to hex color and update opacity
574
- hex = rgbString2hex(input.val());
575
- alpha = keepWithin(parseFloat(getAlpha(input.val())).toFixed(2), 0, 1);
576
- if(alpha) {
577
- input.attr('data-opacity', alpha);
578
- }
579
- } else {
580
- hex = convertCase(parseHex(input.val(), true), settings.letterCase);
581
- }
582
-
583
- if(!hex){
584
- hex = convertCase(parseInput(settings.defaultValue, true), settings.letterCase);
585
- }
586
- hsb = hex2hsb(hex);
587
-
588
- // Get array of lowercase keywords
589
- keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
590
- return $.trim(a.toLowerCase());
591
- });
592
-
593
- // Set color string
594
- if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
595
- value = convertCase(input.val());
596
- } else {
597
- value = isRgb(input.val()) ? parseRgb(input.val()) : hex;
598
- }
599
-
600
- // Update input value
601
- if(!preserveInputValue) input.val(value);
602
-
603
- // Determine opacity value
604
- if(settings.opacity) {
605
- // Get from data-opacity attribute and keep within 0-1 range
606
- opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
607
- if(isNaN(opacity)) opacity = 1;
608
- input.attr('data-opacity', opacity);
609
- swatch.find('span').css('opacity', opacity);
610
-
611
- // Set opacity picker position
612
- y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height());
613
- opacityPicker.css('top', y + 'px');
614
- }
615
-
616
- // Set opacity to zero if input value is transparent
617
- if(input.val().toLowerCase() === 'transparent') {
618
- swatch.find('span').css('opacity', 0);
619
- }
620
-
621
- // Update swatch
622
- swatch.find('span').css('backgroundColor', hex);
623
-
624
- // Determine picker locations
625
- switch(settings.control) {
626
- case 'wheel':
627
- // Set grid position
628
- r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2);
629
- phi = hsb.h * Math.PI / 180;
630
- x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width());
631
- y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height());
632
- gridPicker.css({
633
- top: y + 'px',
634
- left: x + 'px'
635
- });
636
-
637
- // Set slider position
638
- y = 150 - (hsb.b / (100 / grid.height()));
639
- if(hex === '') y = 0;
640
- sliderPicker.css('top', y + 'px');
641
-
642
- // Update panel color
643
- slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
644
- break;
645
-
646
- case 'saturation':
647
- // Set grid position
648
- x = keepWithin((5 * hsb.h) / 12, 0, 150);
649
- y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
650
- gridPicker.css({
651
- top: y + 'px',
652
- left: x + 'px'
653
- });
654
-
655
- // Set slider position
656
- y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height());
657
- sliderPicker.css('top', y + 'px');
658
-
659
- // Update UI
660
- slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b }));
661
- minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100);
662
- break;
663
-
664
- case 'brightness':
665
- // Set grid position
666
- x = keepWithin((5 * hsb.h) / 12, 0, 150);
667
- y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height());
668
- gridPicker.css({
669
- top: y + 'px',
670
- left: x + 'px'
671
- });
672
-
673
- // Set slider position
674
- y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height());
675
- sliderPicker.css('top', y + 'px');
676
-
677
- // Update UI
678
- slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
679
- minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100));
680
- break;
681
-
682
- default:
683
- // Set grid position
684
- x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width());
685
- y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
686
- gridPicker.css({
687
- top: y + 'px',
688
- left: x + 'px'
689
- });
690
-
691
- // Set slider position
692
- y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height());
693
- sliderPicker.css('top', y + 'px');
694
-
695
- // Update panel color
696
- grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 }));
697
- break;
698
- }
699
-
700
- // Fire change event, but only if minicolors is fully initialized
701
- if(input.data('minicolors-initialized')) {
702
- doChange(input, value, opacity);
703
- }
704
- }
705
-
706
- // Runs the change and changeDelay callbacks
707
- function doChange(input, value, opacity) {
708
- var settings = input.data('minicolors-settings');
709
- var lastChange = input.data('minicolors-lastChange');
710
- var obj, sel, i;
711
-
712
- // Only run if it actually changed
713
- if(!lastChange || lastChange.value !== value || lastChange.opacity !== opacity) {
714
-
715
- // Remember last-changed value
716
- input.data('minicolors-lastChange', {
717
- value: value,
718
- opacity: opacity
719
- });
720
-
721
- // Check and select applicable swatch
722
- if(settings.swatches && settings.swatches.length !== 0) {
723
- if(!isRgb(value)) {
724
- obj = hex2rgb(value);
725
- }
726
- else {
727
- obj = parseRgb(value, true);
728
- }
729
- sel = -1;
730
- for(i = 0; i < settings.swatches.length; ++i) {
731
- if(obj.r === settings.swatches[i].r && obj.g === settings.swatches[i].g && obj.b === settings.swatches[i].b && obj.a === settings.swatches[i].a) {
732
- sel = i;
733
- break;
734
- }
735
- }
736
-
737
- input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected');
738
- if(sel !== -1) {
739
- input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected');
740
- }
741
- }
742
-
743
- // Fire change event
744
- if(settings.change) {
745
- if(settings.changeDelay) {
746
- // Call after a delay
747
- clearTimeout(input.data('minicolors-changeTimeout'));
748
- input.data('minicolors-changeTimeout', setTimeout(function() {
749
- settings.change.call(input.get(0), value, opacity);
750
- }, settings.changeDelay));
751
- } else {
752
- // Call immediately
753
- settings.change.call(input.get(0), value, opacity);
754
- }
755
- }
756
- input.trigger('change').trigger('input');
757
- }
758
- }
759
-
760
- // Generates an RGB(A) object based on the input's value
761
- function rgbObject(input) {
762
- var rgb,
763
- opacity = $(input).attr('data-opacity');
764
- if( isRgb($(input).val()) ) {
765
- rgb = parseRgb($(input).val(), true);
766
- } else {
767
- var hex = parseHex($(input).val(), true);
768
- rgb = hex2rgb(hex);
769
- }
770
- if( !rgb ) return null;
771
- if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) });
772
- return rgb;
773
- }
774
-
775
- // Generates an RGB(A) string based on the input's value
776
- function rgbString(input, alpha) {
777
- var rgb,
778
- opacity = $(input).attr('data-opacity');
779
- if( isRgb($(input).val()) ) {
780
- rgb = parseRgb($(input).val(), true);
781
- } else {
782
- var hex = parseHex($(input).val(), true);
783
- rgb = hex2rgb(hex);
784
- }
785
- if( !rgb ) return null;
786
- if( opacity === undefined ) opacity = 1;
787
- if( alpha ) {
788
- return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
789
- } else {
790
- return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
791
- }
792
- }
793
-
794
- // Converts to the letter case specified in settings
795
- function convertCase(string, letterCase) {
796
- return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase();
797
- }
798
-
799
- // Parses a string and returns a valid hex string when possible
800
- function parseHex(string, expand) {
801
- string = string.replace(/^#/g, '');
802
- if(!string.match(/^[A-F0-9]{3,6}/ig)) return '';
803
- if(string.length !== 3 && string.length !== 6) return '';
804
- if(string.length === 3 && expand) {
805
- string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
806
- }
807
- return '#' + string;
808
- }
809
-
810
- // Parses a string and returns a valid RGB(A) string when possible
811
- function parseRgb(string, obj) {
812
- var values = string.replace(/[^\d,.]/g, '');
813
- var rgba = values.split(',');
814
-
815
- rgba[0] = keepWithin(parseInt(rgba[0], 10), 0, 255);
816
- rgba[1] = keepWithin(parseInt(rgba[1], 10), 0, 255);
817
- rgba[2] = keepWithin(parseInt(rgba[2], 10), 0, 255);
818
- if(rgba[3]) {
819
- rgba[3] = keepWithin(parseFloat(rgba[3], 10), 0, 1);
820
- }
821
-
822
- // Return RGBA object
823
- if( obj ) {
824
- if (rgba[3]) {
825
- return {
826
- r: rgba[0],
827
- g: rgba[1],
828
- b: rgba[2],
829
- a: rgba[3]
830
- };
831
- } else {
832
- return {
833
- r: rgba[0],
834
- g: rgba[1],
835
- b: rgba[2]
836
- };
837
- }
838
- }
839
-
840
- // Return RGBA string
841
- if(typeof(rgba[3]) !== 'undefined' && rgba[3] <= 1) {
842
- return 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + rgba[3] + ')';
843
- } else {
844
- return 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')';
845
- }
846
-
847
- }
848
-
849
- // Parses a string and returns a valid color string when possible
850
- function parseInput(string, expand) {
851
- if(isRgb(string)) {
852
- // Returns a valid rgb(a) string
853
- return parseRgb(string);
854
- } else {
855
- return parseHex(string, expand);
856
- }
857
- }
858
-
859
- // Keeps value within min and max
860
- function keepWithin(value, min, max) {
861
- if(value < min) value = min;
862
- if(value > max) value = max;
863
- return value;
864
- }
865
-
866
- // Checks if a string is a valid RGB(A) string
867
- function isRgb(string) {
868
- var rgb = string.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
869
- return (rgb && rgb.length === 4) ? true : false;
870
- }
871
-
872
- // Function to get alpha from a RGB(A) string
873
- function getAlpha(rgba) {
874
- rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i);
875
- return (rgba && rgba.length === 6) ? rgba[4] : '1';
876
- }
877
-
878
- // Converts an HSB object to an RGB object
879
- function hsb2rgb(hsb) {
880
- var rgb = {};
881
- var h = Math.round(hsb.h);
882
- var s = Math.round(hsb.s * 255 / 100);
883
- var v = Math.round(hsb.b * 255 / 100);
884
- if(s === 0) {
885
- rgb.r = rgb.g = rgb.b = v;
886
- } else {
887
- var t1 = v;
888
- var t2 = (255 - s) * v / 255;
889
- var t3 = (t1 - t2) * (h % 60) / 60;
890
- if(h === 360) h = 0;
891
- if(h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }
892
- else if(h < 120) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }
893
- else if(h < 180) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }
894
- else if(h < 240) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }
895
- else if(h < 300) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }
896
- else if(h < 360) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }
897
- else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }
898
- }
899
- return {
900
- r: Math.round(rgb.r),
901
- g: Math.round(rgb.g),
902
- b: Math.round(rgb.b)
903
- };
904
- }
905
-
906
- // Converts an RGB string to a hex string
907
- function rgbString2hex(rgb){
908
- rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
909
- return (rgb && rgb.length === 4) ? '#' +
910
- ('0' + parseInt(rgb[1],10).toString(16)).slice(-2) +
911
- ('0' + parseInt(rgb[2],10).toString(16)).slice(-2) +
912
- ('0' + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
913
- }
914
-
915
- // Converts an RGB object to a hex string
916
- function rgb2hex(rgb) {
917
- var hex = [
918
- rgb.r.toString(16),
919
- rgb.g.toString(16),
920
- rgb.b.toString(16)
921
- ];
922
- $.each(hex, function(nr, val) {
923
- if(val.length === 1) hex[nr] = '0' + val;
924
- });
925
- return '#' + hex.join('');
926
- }
927
-
928
- // Converts an HSB object to a hex string
929
- function hsb2hex(hsb) {
930
- return rgb2hex(hsb2rgb(hsb));
931
- }
932
-
933
- // Converts a hex string to an HSB object
934
- function hex2hsb(hex) {
935
- var hsb = rgb2hsb(hex2rgb(hex));
936
- if(hsb.s === 0) hsb.h = 360;
937
- return hsb;
938
- }
939
-
940
- // Converts an RGB object to an HSB object
941
- function rgb2hsb(rgb) {
942
- var hsb = { h: 0, s: 0, b: 0 };
943
- var min = Math.min(rgb.r, rgb.g, rgb.b);
944
- var max = Math.max(rgb.r, rgb.g, rgb.b);
945
- var delta = max - min;
946
- hsb.b = max;
947
- hsb.s = max !== 0 ? 255 * delta / max : 0;
948
- if(hsb.s !== 0) {
949
- if(rgb.r === max) {
950
- hsb.h = (rgb.g - rgb.b) / delta;
951
- } else if(rgb.g === max) {
952
- hsb.h = 2 + (rgb.b - rgb.r) / delta;
953
- } else {
954
- hsb.h = 4 + (rgb.r - rgb.g) / delta;
955
- }
956
- } else {
957
- hsb.h = -1;
958
- }
959
- hsb.h *= 60;
960
- if(hsb.h < 0) {
961
- hsb.h += 360;
962
- }
963
- hsb.s *= 100/255;
964
- hsb.b *= 100/255;
965
- return hsb;
966
- }
967
-
968
- // Converts a hex string to an RGB object
969
- function hex2rgb(hex) {
970
- hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
971
- return {
972
- r: hex >> 16,
973
- g: (hex & 0x00FF00) >> 8,
974
- b: (hex & 0x0000FF)
975
- };
976
- }
977
-
978
- // Handle events
979
- $([document])
980
- // Hide on clicks outside of the control
981
- .on('mousedown.minicolors touchstart.minicolors', function(event) {
982
- if(!$(event.target).parents().add(event.target).hasClass('minicolors')) {
983
- hide();
984
- }
985
- })
986
- // Start moving
987
- .on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) {
988
- var target = $(this);
989
- event.preventDefault();
990
- $(event.delegateTarget).data('minicolors-target', target);
991
- move(target, event, true);
992
- })
993
- // Move pickers
994
- .on('mousemove.minicolors touchmove.minicolors', function(event) {
995
- var target = $(event.delegateTarget).data('minicolors-target');
996
- if(target) move(target, event);
997
- })
998
- // Stop moving
999
- .on('mouseup.minicolors touchend.minicolors', function() {
1000
- $(this).removeData('minicolors-target');
1001
- })
1002
- // Selected a swatch
1003
- .on('click.minicolors', '.minicolors-swatches li', function(event) {
1004
- event.preventDefault();
1005
- var target = $(this), input = target.parents('.minicolors').find('.minicolors-input'), color = target.data('swatch-color');
1006
- updateInput(input, color, getAlpha(color));
1007
- updateFromInput(input);
1008
- })
1009
- // Show panel when swatch is clicked
1010
- .on('mousedown.minicolors touchstart.minicolors', '.minicolors-input-swatch', function(event) {
1011
- var input = $(this).parent().find('.minicolors-input');
1012
- event.preventDefault();
1013
- show(input);
1014
- })
1015
- // Show on focus
1016
- .on('focus.minicolors', '.minicolors-input', function() {
1017
- var input = $(this);
1018
- if(!input.data('minicolors-initialized')) return;
1019
- show(input);
1020
- })
1021
- // Update value on blur
1022
- .on('blur.minicolors', '.minicolors-input', function() {
1023
- var input = $(this);
1024
- var settings = input.data('minicolors-settings');
1025
- var keywords;
1026
- var hex;
1027
- var rgba;
1028
- var swatchOpacity;
1029
- var value;
1030
-
1031
- if(!input.data('minicolors-initialized')) return;
1032
-
1033
- // Get array of lowercase keywords
1034
- keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
1035
- return $.trim(a.toLowerCase());
1036
- });
1037
-
1038
- // Set color string
1039
- if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
1040
- value = input.val();
1041
- } else {
1042
- // Get RGBA values for easy conversion
1043
- if(isRgb(input.val())) {
1044
- rgba = parseRgb(input.val(), true);
1045
- } else {
1046
- hex = parseHex(input.val(), true);
1047
- rgba = hex ? hex2rgb(hex) : null;
1048
- }
1049
-
1050
- // Convert to format
1051
- if(rgba === null) {
1052
- value = settings.defaultValue;
1053
- } else if(settings.format === 'rgb') {
1054
- value = settings.opacity ?
1055
- parseRgb('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + input.attr('data-opacity') + ')') :
1056
- parseRgb('rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')');
1057
- } else {
1058
- value = rgb2hex(rgba);
1059
- }
1060
- }
1061
-
1062
- // Update swatch opacity
1063
- swatchOpacity = settings.opacity ? input.attr('data-opacity') : 1;
1064
- if(value.toLowerCase() === 'transparent') swatchOpacity = 0;
1065
- input
1066
- .closest('.minicolors')
1067
- .find('.minicolors-input-swatch > span')
1068
- .css('opacity', swatchOpacity);
1069
-
1070
- // Set input value
1071
- input.val(value);
1072
-
1073
- // Is it blank?
1074
- if(input.val() === '') input.val(parseInput(settings.defaultValue, true));
1075
-
1076
- // Adjust case
1077
- input.val(convertCase(input.val(), settings.letterCase));
1078
-
1079
- })
1080
- // Handle keypresses
1081
- .on('keydown.minicolors', '.minicolors-input', function(event) {
1082
- var input = $(this);
1083
- if(!input.data('minicolors-initialized')) return;
1084
- switch(event.keyCode) {
1085
- case 9: // tab
1086
- hide();
1087
- break;
1088
- case 13: // enter
1089
- case 27: // esc
1090
- hide();
1091
- input.blur();
1092
- break;
1093
- }
1094
- })
1095
- // Update on keyup
1096
- .on('keyup.minicolors', '.minicolors-input', function() {
1097
- var input = $(this);
1098
- if(!input.data('minicolors-initialized')) return;
1099
- updateFromInput(input, true);
1100
- })
1101
- // Update on paste
1102
- .on('paste.minicolors', '.minicolors-input', function() {
1103
- var input = $(this);
1104
- if(!input.data('minicolors-initialized')) return;
1105
- setTimeout(function() {
1106
- updateFromInput(input, true);
1107
- }, 1);
1108
- });
1109
- }));
1
+ // jscs:disable
2
+
3
+ // jQuery MiniColors: A tiny color picker built on jQuery
4
+ //
5
+ // Developed by Cory LaViska for A Beautiful Site, LLC
6
+ //
7
+ // Licensed under the MIT license: http://opensource.org/licenses/MIT
8
+ //
9
+ (function (factory) {
10
+ if(typeof define === 'function' && define.amd) {
11
+ // AMD. Register as an anonymous module.
12
+ define(['jquery'], factory);
13
+ } else if(typeof exports === 'object') {
14
+ // Node/CommonJS
15
+ module.exports = factory(require('jquery'));
16
+ } else {
17
+ // Browser globals
18
+ factory(jQuery);
19
+ }
20
+ }(function ($) {
21
+ 'use strict';
22
+
23
+ // Defaults
24
+ $.minicolors = {
25
+ defaults: {
26
+ animationSpeed: 50,
27
+ animationEasing: 'swing',
28
+ change: null,
29
+ changeDelay: 0,
30
+ control: 'hue',
31
+ defaultValue: '',
32
+ format: 'hex',
33
+ hide: null,
34
+ hideSpeed: 100,
35
+ inline: false,
36
+ keywords: '',
37
+ letterCase: 'lowercase',
38
+ opacity: false,
39
+ position: 'bottom left',
40
+ show: null,
41
+ showSpeed: 100,
42
+ theme: 'default',
43
+ swatches: []
44
+ }
45
+ };
46
+
47
+ // Public methods
48
+ $.extend($.fn, {
49
+ minicolors: function(method, data) {
50
+
51
+ switch(method) {
52
+ // Destroy the control
53
+ case 'destroy':
54
+ $(this).each(function() {
55
+ destroy($(this));
56
+ });
57
+ return $(this);
58
+
59
+ // Hide the color picker
60
+ case 'hide':
61
+ hide();
62
+ return $(this);
63
+
64
+ // Get/set opacity
65
+ case 'opacity':
66
+ // Getter
67
+ if(data === undefined) {
68
+ // Getter
69
+ return $(this).attr('data-opacity');
70
+ } else {
71
+ // Setter
72
+ $(this).each(function() {
73
+ updateFromInput($(this).attr('data-opacity', data));
74
+ });
75
+ }
76
+ return $(this);
77
+
78
+ // Get an RGB(A) object based on the current color/opacity
79
+ case 'rgbObject':
80
+ return rgbObject($(this), method === 'rgbaObject');
81
+
82
+ // Get an RGB(A) string based on the current color/opacity
83
+ case 'rgbString':
84
+ case 'rgbaString':
85
+ return rgbString($(this), method === 'rgbaString');
86
+
87
+ // Get/set settings on the fly
88
+ case 'settings':
89
+ if(data === undefined) {
90
+ return $(this).data('minicolors-settings');
91
+ } else {
92
+ // Setter
93
+ $(this).each(function() {
94
+ var settings = $(this).data('minicolors-settings') || {};
95
+ destroy($(this));
96
+ $(this).minicolors($.extend(true, settings, data));
97
+ });
98
+ }
99
+ return $(this);
100
+
101
+ // Show the color picker
102
+ case 'show':
103
+ show($(this).eq(0));
104
+ return $(this);
105
+
106
+ // Get/set the hex color value
107
+ case 'value':
108
+ if(data === undefined) {
109
+ // Getter
110
+ return $(this).val();
111
+ } else {
112
+ // Setter
113
+ $(this).each(function() {
114
+ if(typeof(data) === 'object' && data !== null) {
115
+ if(data.opacity) {
116
+ $(this).attr('data-opacity', keepWithin(data.opacity, 0, 1));
117
+ }
118
+ if(data.color) {
119
+ $(this).val(data.color);
120
+ }
121
+ } else {
122
+ $(this).val(data);
123
+ }
124
+ updateFromInput($(this));
125
+ });
126
+ }
127
+ return $(this);
128
+
129
+ // Initializes the control
130
+ default:
131
+ if(method !== 'create') data = method;
132
+ $(this).each(function() {
133
+ init($(this), data);
134
+ });
135
+ return $(this);
136
+
137
+ }
138
+
139
+ }
140
+ });
141
+
142
+ // Initialize input elements
143
+ function init(input, settings) {
144
+ var minicolors = $('<div class="minicolors" />');
145
+ var defaults = $.minicolors.defaults;
146
+ var size;
147
+ var swatches;
148
+ var swatch;
149
+ var panel;
150
+ var i;
151
+
152
+ // Do nothing if already initialized
153
+ if(input.data('minicolors-initialized')) return;
154
+
155
+ // Handle settings
156
+ settings = $.extend(true, {}, defaults, settings);
157
+
158
+ // The wrapper
159
+ minicolors
160
+ .addClass('minicolors-theme-' + settings.theme)
161
+ .toggleClass('minicolors-with-opacity', settings.opacity);
162
+
163
+ // Custom positioning
164
+ if(settings.position !== undefined) {
165
+ $.each(settings.position.split(' '), function() {
166
+ minicolors.addClass('minicolors-position-' + this);
167
+ });
168
+ }
169
+
170
+ // Input size
171
+ if(settings.format === 'rgb') {
172
+ size = settings.opacity ? '25' : '20';
173
+ } else {
174
+ size = settings.keywords ? '11' : '7';
175
+ }
176
+
177
+ // The input
178
+ input
179
+ .addClass('minicolors-input')
180
+ .data('minicolors-initialized', false)
181
+ .data('minicolors-settings', settings)
182
+ .prop('size', size)
183
+ .wrap(minicolors)
184
+ .after(
185
+ '<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
186
+ '<div class="minicolors-slider minicolors-sprite">' +
187
+ '<div class="minicolors-picker"></div>' +
188
+ '</div>' +
189
+ '<div class="minicolors-opacity-slider minicolors-sprite">' +
190
+ '<div class="minicolors-picker"></div>' +
191
+ '</div>' +
192
+ '<div class="minicolors-grid minicolors-sprite">' +
193
+ '<div class="minicolors-grid-inner"></div>' +
194
+ '<div class="minicolors-picker"><div></div></div>' +
195
+ '</div>' +
196
+ '</div>'
197
+ );
198
+
199
+ // The swatch
200
+ if(!settings.inline) {
201
+ input.after('<span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span>');
202
+ input.next('.minicolors-input-swatch').on('click', function(event) {
203
+ event.preventDefault();
204
+ input.focus();
205
+ });
206
+ }
207
+
208
+ // Prevent text selection in IE
209
+ panel = input.parent().find('.minicolors-panel');
210
+ panel.on('selectstart', function() { return false; }).end();
211
+
212
+ // Swatches
213
+ if(settings.swatches && settings.swatches.length !== 0) {
214
+ panel.addClass('minicolors-with-swatches');
215
+ swatches = $('<ul class="minicolors-swatches"></ul>')
216
+ .appendTo(panel);
217
+ for(i = 0; i < settings.swatches.length; ++i) {
218
+ swatch = settings.swatches[i];
219
+ swatch = isRgb(swatch) ? parseRgb(swatch, true) : hex2rgb(parseHex(swatch, true));
220
+ $('<li class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></li>')
221
+ .appendTo(swatches)
222
+ .data('swatch-color', settings.swatches[i])
223
+ .find('.minicolors-swatch-color')
224
+ .css({
225
+ backgroundColor: rgb2hex(swatch),
226
+ opacity: swatch.a
227
+ });
228
+ settings.swatches[i] = swatch;
229
+ }
230
+ }
231
+
232
+ // Inline controls
233
+ if(settings.inline) input.parent().addClass('minicolors-inline');
234
+
235
+ updateFromInput(input, false);
236
+
237
+ input.data('minicolors-initialized', true);
238
+ }
239
+
240
+ // Returns the input back to its original state
241
+ function destroy(input) {
242
+ var minicolors = input.parent();
243
+
244
+ // Revert the input element
245
+ input
246
+ .removeData('minicolors-initialized')
247
+ .removeData('minicolors-settings')
248
+ .removeProp('size')
249
+ .removeClass('minicolors-input');
250
+
251
+ // Remove the wrap and destroy whatever remains
252
+ minicolors.before(input).remove();
253
+ }
254
+
255
+ // Shows the specified dropdown panel
256
+ function show(input) {
257
+ var minicolors = input.parent();
258
+ var panel = minicolors.find('.minicolors-panel');
259
+ var settings = input.data('minicolors-settings');
260
+
261
+ // Do nothing if uninitialized, disabled, inline, or already open
262
+ if(
263
+ !input.data('minicolors-initialized') ||
264
+ input.prop('disabled') ||
265
+ minicolors.hasClass('minicolors-inline') ||
266
+ minicolors.hasClass('minicolors-focus')
267
+ ) return;
268
+
269
+ hide();
270
+
271
+ minicolors.addClass('minicolors-focus');
272
+ panel
273
+ .stop(true, true)
274
+ .fadeIn(settings.showSpeed, function() {
275
+ if(settings.show) settings.show.call(input.get(0));
276
+ });
277
+ }
278
+
279
+ // Hides all dropdown panels
280
+ function hide() {
281
+ $('.minicolors-focus').each(function() {
282
+ var minicolors = $(this);
283
+ var input = minicolors.find('.minicolors-input');
284
+ var panel = minicolors.find('.minicolors-panel');
285
+ var settings = input.data('minicolors-settings');
286
+
287
+ panel.fadeOut(settings.hideSpeed, function() {
288
+ if(settings.hide) settings.hide.call(input.get(0));
289
+ minicolors.removeClass('minicolors-focus');
290
+ });
291
+
292
+ });
293
+ }
294
+
295
+ // Moves the selected picker
296
+ function move(target, event, animate) {
297
+ var input = target.parents('.minicolors').find('.minicolors-input');
298
+ var settings = input.data('minicolors-settings');
299
+ var picker = target.find('[class$=-picker]');
300
+ var offsetX = target.offset().left;
301
+ var offsetY = target.offset().top;
302
+ var x = Math.round(event.pageX - offsetX);
303
+ var y = Math.round(event.pageY - offsetY);
304
+ var duration = animate ? settings.animationSpeed : 0;
305
+ var wx, wy, r, phi;
306
+
307
+ // Touch support
308
+ if(event.originalEvent.changedTouches) {
309
+ x = event.originalEvent.changedTouches[0].pageX - offsetX;
310
+ y = event.originalEvent.changedTouches[0].pageY - offsetY;
311
+ }
312
+
313
+ // Constrain picker to its container
314
+ if(x < 0) x = 0;
315
+ if(y < 0) y = 0;
316
+ if(x > target.width()) x = target.width();
317
+ if(y > target.height()) y = target.height();
318
+
319
+ // Constrain color wheel values to the wheel
320
+ if(target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid')) {
321
+ wx = 75 - x;
322
+ wy = 75 - y;
323
+ r = Math.sqrt(wx * wx + wy * wy);
324
+ phi = Math.atan2(wy, wx);
325
+ if(phi < 0) phi += Math.PI * 2;
326
+ if(r > 75) {
327
+ r = 75;
328
+ x = 75 - (75 * Math.cos(phi));
329
+ y = 75 - (75 * Math.sin(phi));
330
+ }
331
+ x = Math.round(x);
332
+ y = Math.round(y);
333
+ }
334
+
335
+ // Move the picker
336
+ if(target.is('.minicolors-grid')) {
337
+ picker
338
+ .stop(true)
339
+ .animate({
340
+ top: y + 'px',
341
+ left: x + 'px'
342
+ }, duration, settings.animationEasing, function() {
343
+ updateFromControl(input, target);
344
+ });
345
+ } else {
346
+ picker
347
+ .stop(true)
348
+ .animate({
349
+ top: y + 'px'
350
+ }, duration, settings.animationEasing, function() {
351
+ updateFromControl(input, target);
352
+ });
353
+ }
354
+ }
355
+
356
+ // Sets the input based on the color picker values
357
+ function updateFromControl(input, target) {
358
+
359
+ function getCoords(picker, container) {
360
+ var left, top;
361
+ if(!picker.length || !container) return null;
362
+ left = picker.offset().left;
363
+ top = picker.offset().top;
364
+
365
+ return {
366
+ x: left - container.offset().left + (picker.outerWidth() / 2),
367
+ y: top - container.offset().top + (picker.outerHeight() / 2)
368
+ };
369
+ }
370
+
371
+ var hue, saturation, brightness, x, y, r, phi;
372
+ var hex = input.val();
373
+ var opacity = input.attr('data-opacity');
374
+
375
+ // Helpful references
376
+ var minicolors = input.parent();
377
+ var settings = input.data('minicolors-settings');
378
+ var swatch = minicolors.find('.minicolors-input-swatch');
379
+
380
+ // Panel objects
381
+ var grid = minicolors.find('.minicolors-grid');
382
+ var slider = minicolors.find('.minicolors-slider');
383
+ var opacitySlider = minicolors.find('.minicolors-opacity-slider');
384
+
385
+ // Picker objects
386
+ var gridPicker = grid.find('[class$=-picker]');
387
+ var sliderPicker = slider.find('[class$=-picker]');
388
+ var opacityPicker = opacitySlider.find('[class$=-picker]');
389
+
390
+ // Picker positions
391
+ var gridPos = getCoords(gridPicker, grid);
392
+ var sliderPos = getCoords(sliderPicker, slider);
393
+ var opacityPos = getCoords(opacityPicker, opacitySlider);
394
+
395
+ // Handle colors
396
+ if(target.is('.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider')) {
397
+
398
+ // Determine HSB values
399
+ switch(settings.control) {
400
+ case 'wheel':
401
+ // Calculate hue, saturation, and brightness
402
+ x = (grid.width() / 2) - gridPos.x;
403
+ y = (grid.height() / 2) - gridPos.y;
404
+ r = Math.sqrt(x * x + y * y);
405
+ phi = Math.atan2(y, x);
406
+ if(phi < 0) phi += Math.PI * 2;
407
+ if(r > 75) {
408
+ r = 75;
409
+ gridPos.x = 69 - (75 * Math.cos(phi));
410
+ gridPos.y = 69 - (75 * Math.sin(phi));
411
+ }
412
+ saturation = keepWithin(r / 0.75, 0, 100);
413
+ hue = keepWithin(phi * 180 / Math.PI, 0, 360);
414
+ brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
415
+ hex = hsb2hex({
416
+ h: hue,
417
+ s: saturation,
418
+ b: brightness
419
+ });
420
+
421
+ // Update UI
422
+ slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
423
+ break;
424
+
425
+ case 'saturation':
426
+ // Calculate hue, saturation, and brightness
427
+ hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
428
+ saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
429
+ brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
430
+ hex = hsb2hex({
431
+ h: hue,
432
+ s: saturation,
433
+ b: brightness
434
+ });
435
+
436
+ // Update UI
437
+ slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness }));
438
+ minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100);
439
+ break;
440
+
441
+ case 'brightness':
442
+ // Calculate hue, saturation, and brightness
443
+ hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
444
+ saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
445
+ brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
446
+ hex = hsb2hex({
447
+ h: hue,
448
+ s: saturation,
449
+ b: brightness
450
+ });
451
+
452
+ // Update UI
453
+ slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
454
+ minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100));
455
+ break;
456
+
457
+ default:
458
+ // Calculate hue, saturation, and brightness
459
+ hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360);
460
+ saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
461
+ brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
462
+ hex = hsb2hex({
463
+ h: hue,
464
+ s: saturation,
465
+ b: brightness
466
+ });
467
+
468
+ // Update UI
469
+ grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));
470
+ break;
471
+ }
472
+
473
+ // Handle opacity
474
+ if(settings.opacity) {
475
+ opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
476
+ } else {
477
+ opacity = 1;
478
+ }
479
+
480
+ updateInput(input, hex, opacity);
481
+ }
482
+ else {
483
+ // Set swatch color
484
+ swatch.find('span').css({
485
+ backgroundColor: hex,
486
+ opacity: opacity
487
+ });
488
+
489
+ // Handle change event
490
+ doChange(input, hex, opacity);
491
+ }
492
+ }
493
+
494
+ // Sets the value of the input and does the appropriate conversions
495
+ // to respect settings, also updates the swatch
496
+ function updateInput(input, value, opacity) {
497
+ var rgb;
498
+
499
+ // Helpful references
500
+ var minicolors = input.parent();
501
+ var settings = input.data('minicolors-settings');
502
+ var swatch = minicolors.find('.minicolors-input-swatch');
503
+
504
+ if(settings.opacity) input.attr('data-opacity', opacity);
505
+
506
+ // Set color string
507
+ if(settings.format === 'rgb') {
508
+ // Returns RGB(A) string
509
+
510
+ // Checks for input format and does the conversion
511
+ if(isRgb(value)) {
512
+ rgb = parseRgb(value, true);
513
+ }
514
+ else {
515
+ rgb = hex2rgb(parseHex(value, true));
516
+ }
517
+
518
+ opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
519
+ if(isNaN(opacity) || !settings.opacity) opacity = 1;
520
+
521
+ if(input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) {
522
+ // Set RGBA string if alpha
523
+ value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
524
+ } else {
525
+ // Set RGB string (alpha = 1)
526
+ value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
527
+ }
528
+ } else {
529
+ // Returns hex color
530
+
531
+ // Checks for input format and does the conversion
532
+ if(isRgb(value)) {
533
+ value = rgbString2hex(value);
534
+ }
535
+
536
+ value = convertCase(value, settings.letterCase);
537
+ }
538
+
539
+ // Update value from picker
540
+ input.val(value);
541
+
542
+ // Set swatch color
543
+ swatch.find('span').css({
544
+ backgroundColor: value,
545
+ opacity: opacity
546
+ });
547
+
548
+ // Handle change event
549
+ doChange(input, value, opacity);
550
+ }
551
+
552
+ // Sets the color picker values from the input
553
+ function updateFromInput(input, preserveInputValue) {
554
+ var hex, hsb, opacity, keywords, alpha, value, x, y, r, phi;
555
+
556
+ // Helpful references
557
+ var minicolors = input.parent();
558
+ var settings = input.data('minicolors-settings');
559
+ var swatch = minicolors.find('.minicolors-input-swatch');
560
+
561
+ // Panel objects
562
+ var grid = minicolors.find('.minicolors-grid');
563
+ var slider = minicolors.find('.minicolors-slider');
564
+ var opacitySlider = minicolors.find('.minicolors-opacity-slider');
565
+
566
+ // Picker objects
567
+ var gridPicker = grid.find('[class$=-picker]');
568
+ var sliderPicker = slider.find('[class$=-picker]');
569
+ var opacityPicker = opacitySlider.find('[class$=-picker]');
570
+
571
+ // Determine hex/HSB values
572
+ if(isRgb(input.val())) {
573
+ // If input value is a rgb(a) string, convert it to hex color and update opacity
574
+ hex = rgbString2hex(input.val());
575
+ alpha = keepWithin(parseFloat(getAlpha(input.val())).toFixed(2), 0, 1);
576
+ if(alpha) {
577
+ input.attr('data-opacity', alpha);
578
+ }
579
+ } else {
580
+ hex = convertCase(parseHex(input.val(), true), settings.letterCase);
581
+ }
582
+
583
+ if(!hex){
584
+ hex = convertCase(parseInput(settings.defaultValue, true), settings.letterCase);
585
+ }
586
+ hsb = hex2hsb(hex);
587
+
588
+ // Get array of lowercase keywords
589
+ keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
590
+ return $.trim(a.toLowerCase());
591
+ });
592
+
593
+ // Set color string
594
+ if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
595
+ value = convertCase(input.val());
596
+ } else {
597
+ value = isRgb(input.val()) ? parseRgb(input.val()) : hex;
598
+ }
599
+
600
+ // Update input value
601
+ if(!preserveInputValue) input.val(value);
602
+
603
+ // Determine opacity value
604
+ if(settings.opacity) {
605
+ // Get from data-opacity attribute and keep within 0-1 range
606
+ opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
607
+ if(isNaN(opacity)) opacity = 1;
608
+ input.attr('data-opacity', opacity);
609
+ swatch.find('span').css('opacity', opacity);
610
+
611
+ // Set opacity picker position
612
+ y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height());
613
+ opacityPicker.css('top', y + 'px');
614
+ }
615
+
616
+ // Set opacity to zero if input value is transparent
617
+ if(input.val().toLowerCase() === 'transparent') {
618
+ swatch.find('span').css('opacity', 0);
619
+ }
620
+
621
+ // Update swatch
622
+ swatch.find('span').css('backgroundColor', hex);
623
+
624
+ // Determine picker locations
625
+ switch(settings.control) {
626
+ case 'wheel':
627
+ // Set grid position
628
+ r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2);
629
+ phi = hsb.h * Math.PI / 180;
630
+ x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width());
631
+ y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height());
632
+ gridPicker.css({
633
+ top: y + 'px',
634
+ left: x + 'px'
635
+ });
636
+
637
+ // Set slider position
638
+ y = 150 - (hsb.b / (100 / grid.height()));
639
+ if(hex === '') y = 0;
640
+ sliderPicker.css('top', y + 'px');
641
+
642
+ // Update panel color
643
+ slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
644
+ break;
645
+
646
+ case 'saturation':
647
+ // Set grid position
648
+ x = keepWithin((5 * hsb.h) / 12, 0, 150);
649
+ y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
650
+ gridPicker.css({
651
+ top: y + 'px',
652
+ left: x + 'px'
653
+ });
654
+
655
+ // Set slider position
656
+ y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height());
657
+ sliderPicker.css('top', y + 'px');
658
+
659
+ // Update UI
660
+ slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b }));
661
+ minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100);
662
+ break;
663
+
664
+ case 'brightness':
665
+ // Set grid position
666
+ x = keepWithin((5 * hsb.h) / 12, 0, 150);
667
+ y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height());
668
+ gridPicker.css({
669
+ top: y + 'px',
670
+ left: x + 'px'
671
+ });
672
+
673
+ // Set slider position
674
+ y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height());
675
+ sliderPicker.css('top', y + 'px');
676
+
677
+ // Update UI
678
+ slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
679
+ minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100));
680
+ break;
681
+
682
+ default:
683
+ // Set grid position
684
+ x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width());
685
+ y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
686
+ gridPicker.css({
687
+ top: y + 'px',
688
+ left: x + 'px'
689
+ });
690
+
691
+ // Set slider position
692
+ y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height());
693
+ sliderPicker.css('top', y + 'px');
694
+
695
+ // Update panel color
696
+ grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 }));
697
+ break;
698
+ }
699
+
700
+ // Fire change event, but only if minicolors is fully initialized
701
+ if(input.data('minicolors-initialized')) {
702
+ doChange(input, value, opacity);
703
+ }
704
+ }
705
+
706
+ // Runs the change and changeDelay callbacks
707
+ function doChange(input, value, opacity) {
708
+ var settings = input.data('minicolors-settings');
709
+ var lastChange = input.data('minicolors-lastChange');
710
+ var obj, sel, i;
711
+
712
+ // Only run if it actually changed
713
+ if(!lastChange || lastChange.value !== value || lastChange.opacity !== opacity) {
714
+
715
+ // Remember last-changed value
716
+ input.data('minicolors-lastChange', {
717
+ value: value,
718
+ opacity: opacity
719
+ });
720
+
721
+ // Check and select applicable swatch
722
+ if(settings.swatches && settings.swatches.length !== 0) {
723
+ if(!isRgb(value)) {
724
+ obj = hex2rgb(value);
725
+ }
726
+ else {
727
+ obj = parseRgb(value, true);
728
+ }
729
+ sel = -1;
730
+ for(i = 0; i < settings.swatches.length; ++i) {
731
+ if(obj.r === settings.swatches[i].r && obj.g === settings.swatches[i].g && obj.b === settings.swatches[i].b && obj.a === settings.swatches[i].a) {
732
+ sel = i;
733
+ break;
734
+ }
735
+ }
736
+
737
+ input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected');
738
+ if(sel !== -1) {
739
+ input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected');
740
+ }
741
+ }
742
+
743
+ // Fire change event
744
+ if(settings.change) {
745
+ if(settings.changeDelay) {
746
+ // Call after a delay
747
+ clearTimeout(input.data('minicolors-changeTimeout'));
748
+ input.data('minicolors-changeTimeout', setTimeout(function() {
749
+ settings.change.call(input.get(0), value, opacity);
750
+ }, settings.changeDelay));
751
+ } else {
752
+ // Call immediately
753
+ settings.change.call(input.get(0), value, opacity);
754
+ }
755
+ }
756
+ input.trigger('change').trigger('input');
757
+ }
758
+ }
759
+
760
+ // Generates an RGB(A) object based on the input's value
761
+ function rgbObject(input) {
762
+ var rgb,
763
+ opacity = $(input).attr('data-opacity');
764
+ if( isRgb($(input).val()) ) {
765
+ rgb = parseRgb($(input).val(), true);
766
+ } else {
767
+ var hex = parseHex($(input).val(), true);
768
+ rgb = hex2rgb(hex);
769
+ }
770
+ if( !rgb ) return null;
771
+ if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) });
772
+ return rgb;
773
+ }
774
+
775
+ // Generates an RGB(A) string based on the input's value
776
+ function rgbString(input, alpha) {
777
+ var rgb,
778
+ opacity = $(input).attr('data-opacity');
779
+ if( isRgb($(input).val()) ) {
780
+ rgb = parseRgb($(input).val(), true);
781
+ } else {
782
+ var hex = parseHex($(input).val(), true);
783
+ rgb = hex2rgb(hex);
784
+ }
785
+ if( !rgb ) return null;
786
+ if( opacity === undefined ) opacity = 1;
787
+ if( alpha ) {
788
+ return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
789
+ } else {
790
+ return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
791
+ }
792
+ }
793
+
794
+ // Converts to the letter case specified in settings
795
+ function convertCase(string, letterCase) {
796
+ return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase();
797
+ }
798
+
799
+ // Parses a string and returns a valid hex string when possible
800
+ function parseHex(string, expand) {
801
+ string = string.replace(/^#/g, '');
802
+ if(!string.match(/^[A-F0-9]{3,6}/ig)) return '';
803
+ if(string.length !== 3 && string.length !== 6) return '';
804
+ if(string.length === 3 && expand) {
805
+ string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
806
+ }
807
+ return '#' + string;
808
+ }
809
+
810
+ // Parses a string and returns a valid RGB(A) string when possible
811
+ function parseRgb(string, obj) {
812
+ var values = string.replace(/[^\d,.]/g, '');
813
+ var rgba = values.split(',');
814
+
815
+ rgba[0] = keepWithin(parseInt(rgba[0], 10), 0, 255);
816
+ rgba[1] = keepWithin(parseInt(rgba[1], 10), 0, 255);
817
+ rgba[2] = keepWithin(parseInt(rgba[2], 10), 0, 255);
818
+ if(rgba[3]) {
819
+ rgba[3] = keepWithin(parseFloat(rgba[3], 10), 0, 1);
820
+ }
821
+
822
+ // Return RGBA object
823
+ if( obj ) {
824
+ if (rgba[3]) {
825
+ return {
826
+ r: rgba[0],
827
+ g: rgba[1],
828
+ b: rgba[2],
829
+ a: rgba[3]
830
+ };
831
+ } else {
832
+ return {
833
+ r: rgba[0],
834
+ g: rgba[1],
835
+ b: rgba[2]
836
+ };
837
+ }
838
+ }
839
+
840
+ // Return RGBA string
841
+ if(typeof(rgba[3]) !== 'undefined' && rgba[3] <= 1) {
842
+ return 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + rgba[3] + ')';
843
+ } else {
844
+ return 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')';
845
+ }
846
+
847
+ }
848
+
849
+ // Parses a string and returns a valid color string when possible
850
+ function parseInput(string, expand) {
851
+ if(isRgb(string)) {
852
+ // Returns a valid rgb(a) string
853
+ return parseRgb(string);
854
+ } else {
855
+ return parseHex(string, expand);
856
+ }
857
+ }
858
+
859
+ // Keeps value within min and max
860
+ function keepWithin(value, min, max) {
861
+ if(value < min) value = min;
862
+ if(value > max) value = max;
863
+ return value;
864
+ }
865
+
866
+ // Checks if a string is a valid RGB(A) string
867
+ function isRgb(string) {
868
+ var rgb = string.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
869
+ return (rgb && rgb.length === 4) ? true : false;
870
+ }
871
+
872
+ // Function to get alpha from a RGB(A) string
873
+ function getAlpha(rgba) {
874
+ rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i);
875
+ return (rgba && rgba.length === 6) ? rgba[4] : '1';
876
+ }
877
+
878
+ // Converts an HSB object to an RGB object
879
+ function hsb2rgb(hsb) {
880
+ var rgb = {};
881
+ var h = Math.round(hsb.h);
882
+ var s = Math.round(hsb.s * 255 / 100);
883
+ var v = Math.round(hsb.b * 255 / 100);
884
+ if(s === 0) {
885
+ rgb.r = rgb.g = rgb.b = v;
886
+ } else {
887
+ var t1 = v;
888
+ var t2 = (255 - s) * v / 255;
889
+ var t3 = (t1 - t2) * (h % 60) / 60;
890
+ if(h === 360) h = 0;
891
+ if(h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }
892
+ else if(h < 120) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }
893
+ else if(h < 180) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }
894
+ else if(h < 240) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }
895
+ else if(h < 300) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }
896
+ else if(h < 360) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }
897
+ else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }
898
+ }
899
+ return {
900
+ r: Math.round(rgb.r),
901
+ g: Math.round(rgb.g),
902
+ b: Math.round(rgb.b)
903
+ };
904
+ }
905
+
906
+ // Converts an RGB string to a hex string
907
+ function rgbString2hex(rgb){
908
+ rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
909
+ return (rgb && rgb.length === 4) ? '#' +
910
+ ('0' + parseInt(rgb[1],10).toString(16)).slice(-2) +
911
+ ('0' + parseInt(rgb[2],10).toString(16)).slice(-2) +
912
+ ('0' + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
913
+ }
914
+
915
+ // Converts an RGB object to a hex string
916
+ function rgb2hex(rgb) {
917
+ var hex = [
918
+ rgb.r.toString(16),
919
+ rgb.g.toString(16),
920
+ rgb.b.toString(16)
921
+ ];
922
+ $.each(hex, function(nr, val) {
923
+ if(val.length === 1) hex[nr] = '0' + val;
924
+ });
925
+ return '#' + hex.join('');
926
+ }
927
+
928
+ // Converts an HSB object to a hex string
929
+ function hsb2hex(hsb) {
930
+ return rgb2hex(hsb2rgb(hsb));
931
+ }
932
+
933
+ // Converts a hex string to an HSB object
934
+ function hex2hsb(hex) {
935
+ var hsb = rgb2hsb(hex2rgb(hex));
936
+ if(hsb.s === 0) hsb.h = 360;
937
+ return hsb;
938
+ }
939
+
940
+ // Converts an RGB object to an HSB object
941
+ function rgb2hsb(rgb) {
942
+ var hsb = { h: 0, s: 0, b: 0 };
943
+ var min = Math.min(rgb.r, rgb.g, rgb.b);
944
+ var max = Math.max(rgb.r, rgb.g, rgb.b);
945
+ var delta = max - min;
946
+ hsb.b = max;
947
+ hsb.s = max !== 0 ? 255 * delta / max : 0;
948
+ if(hsb.s !== 0) {
949
+ if(rgb.r === max) {
950
+ hsb.h = (rgb.g - rgb.b) / delta;
951
+ } else if(rgb.g === max) {
952
+ hsb.h = 2 + (rgb.b - rgb.r) / delta;
953
+ } else {
954
+ hsb.h = 4 + (rgb.r - rgb.g) / delta;
955
+ }
956
+ } else {
957
+ hsb.h = -1;
958
+ }
959
+ hsb.h *= 60;
960
+ if(hsb.h < 0) {
961
+ hsb.h += 360;
962
+ }
963
+ hsb.s *= 100/255;
964
+ hsb.b *= 100/255;
965
+ return hsb;
966
+ }
967
+
968
+ // Converts a hex string to an RGB object
969
+ function hex2rgb(hex) {
970
+ hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
971
+ return {
972
+ r: hex >> 16,
973
+ g: (hex & 0x00FF00) >> 8,
974
+ b: (hex & 0x0000FF)
975
+ };
976
+ }
977
+
978
+ // Handle events
979
+ $([document])
980
+ // Hide on clicks outside of the control
981
+ .on('mousedown.minicolors touchstart.minicolors', function(event) {
982
+ if(!$(event.target).parents().add(event.target).hasClass('minicolors')) {
983
+ hide();
984
+ }
985
+ })
986
+ // Start moving
987
+ .on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) {
988
+ var target = $(this);
989
+ event.preventDefault();
990
+ $(event.delegateTarget).data('minicolors-target', target);
991
+ move(target, event, true);
992
+ })
993
+ // Move pickers
994
+ .on('mousemove.minicolors touchmove.minicolors', function(event) {
995
+ var target = $(event.delegateTarget).data('minicolors-target');
996
+ if(target) move(target, event);
997
+ })
998
+ // Stop moving
999
+ .on('mouseup.minicolors touchend.minicolors', function() {
1000
+ $(this).removeData('minicolors-target');
1001
+ })
1002
+ // Selected a swatch
1003
+ .on('click.minicolors', '.minicolors-swatches li', function(event) {
1004
+ event.preventDefault();
1005
+ var target = $(this), input = target.parents('.minicolors').find('.minicolors-input'), color = target.data('swatch-color');
1006
+ updateInput(input, color, getAlpha(color));
1007
+ updateFromInput(input);
1008
+ })
1009
+ // Show panel when swatch is clicked
1010
+ .on('mousedown.minicolors touchstart.minicolors', '.minicolors-input-swatch', function(event) {
1011
+ var input = $(this).parent().find('.minicolors-input');
1012
+ event.preventDefault();
1013
+ show(input);
1014
+ })
1015
+ // Show on focus
1016
+ .on('focus.minicolors', '.minicolors-input', function() {
1017
+ var input = $(this);
1018
+ if(!input.data('minicolors-initialized')) return;
1019
+ show(input);
1020
+ })
1021
+ // Update value on blur
1022
+ .on('blur.minicolors', '.minicolors-input', function() {
1023
+ var input = $(this);
1024
+ var settings = input.data('minicolors-settings');
1025
+ var keywords;
1026
+ var hex;
1027
+ var rgba;
1028
+ var swatchOpacity;
1029
+ var value;
1030
+
1031
+ if(!input.data('minicolors-initialized')) return;
1032
+
1033
+ // Get array of lowercase keywords
1034
+ keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
1035
+ return $.trim(a.toLowerCase());
1036
+ });
1037
+
1038
+ // Set color string
1039
+ if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
1040
+ value = input.val();
1041
+ } else {
1042
+ // Get RGBA values for easy conversion
1043
+ if(isRgb(input.val())) {
1044
+ rgba = parseRgb(input.val(), true);
1045
+ } else {
1046
+ hex = parseHex(input.val(), true);
1047
+ rgba = hex ? hex2rgb(hex) : null;
1048
+ }
1049
+
1050
+ // Convert to format
1051
+ if(rgba === null) {
1052
+ value = settings.defaultValue;
1053
+ } else if(settings.format === 'rgb') {
1054
+ value = settings.opacity ?
1055
+ parseRgb('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + input.attr('data-opacity') + ')') :
1056
+ parseRgb('rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')');
1057
+ } else {
1058
+ value = rgb2hex(rgba);
1059
+ }
1060
+ }
1061
+
1062
+ // Update swatch opacity
1063
+ swatchOpacity = settings.opacity ? input.attr('data-opacity') : 1;
1064
+ if(value.toLowerCase() === 'transparent') swatchOpacity = 0;
1065
+ input
1066
+ .closest('.minicolors')
1067
+ .find('.minicolors-input-swatch > span')
1068
+ .css('opacity', swatchOpacity);
1069
+
1070
+ // Set input value
1071
+ input.val(value);
1072
+
1073
+ // Is it blank?
1074
+ if(input.val() === '') input.val(parseInput(settings.defaultValue, true));
1075
+
1076
+ // Adjust case
1077
+ input.val(convertCase(input.val(), settings.letterCase));
1078
+
1079
+ })
1080
+ // Handle keypresses
1081
+ .on('keydown.minicolors', '.minicolors-input', function(event) {
1082
+ var input = $(this);
1083
+ if(!input.data('minicolors-initialized')) return;
1084
+ switch(event.keyCode) {
1085
+ case 9: // tab
1086
+ hide();
1087
+ break;
1088
+ case 13: // enter
1089
+ case 27: // esc
1090
+ hide();
1091
+ input.blur();
1092
+ break;
1093
+ }
1094
+ })
1095
+ // Update on keyup
1096
+ .on('keyup.minicolors', '.minicolors-input', function() {
1097
+ var input = $(this);
1098
+ if(!input.data('minicolors-initialized')) return;
1099
+ updateFromInput(input, true);
1100
+ })
1101
+ // Update on paste
1102
+ .on('paste.minicolors', '.minicolors-input', function() {
1103
+ var input = $(this);
1104
+ if(!input.data('minicolors-initialized')) return;
1105
+ setTimeout(function() {
1106
+ updateFromInput(input, true);
1107
+ }, 1);
1108
+ });
1109
+ }));
assets/js/jquery.minicolors.min.js CHANGED
@@ -1,9 +1,9 @@
1
- // jscs:disable
2
- //
3
- // jQuery MiniColors: A tiny color picker built on jQuery
4
- //
5
- // Developed by Cory LaViska for A Beautiful Site, LLC
6
- //
7
- // Licensed under the MIT license: http://opensource.org/licenses/MIT
8
- //
9
  !function(i){"function"==typeof define&&define.amd?define(["jquery"],i):"object"==typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(i){"use strict";function t(t,o){var s,a,n,r,e,l=i('<div class="minicolors" />'),h=i.minicolors.defaults;if(!t.data("minicolors-initialized")){if(o=i.extend(!0,{},h,o),l.addClass("minicolors-theme-"+o.theme).toggleClass("minicolors-with-opacity",o.opacity),void 0!==o.position&&i.each(o.position.split(" "),function(){l.addClass("minicolors-position-"+this)}),s="rgb"===o.format?o.opacity?"25":"20":o.keywords?"11":"7",t.addClass("minicolors-input").data("minicolors-initialized",!1).data("minicolors-settings",o).prop("size",s).wrap(l).after('<div class="minicolors-panel minicolors-slider-'+o.control+'"><div class="minicolors-slider minicolors-sprite"><div class="minicolors-picker"></div></div><div class="minicolors-opacity-slider minicolors-sprite"><div class="minicolors-picker"></div></div><div class="minicolors-grid minicolors-sprite"><div class="minicolors-grid-inner"></div><div class="minicolors-picker"><div></div></div></div></div>'),o.inline||(t.after('<span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span>'),t.next(".minicolors-input-swatch").on("click",function(i){i.preventDefault(),t.focus()})),r=t.parent().find(".minicolors-panel"),r.on("selectstart",function(){return!1}).end(),o.swatches&&0!==o.swatches.length)for(r.addClass("minicolors-with-swatches"),a=i('<ul class="minicolors-swatches"></ul>').appendTo(r),e=0;e<o.swatches.length;++e)n=o.swatches[e],n=v(n)?g(n,!0):I(u(n,!0)),i('<li class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></li>').appendTo(a).data("swatch-color",o.swatches[e]).find(".minicolors-swatch-color").css({backgroundColor:C(n),opacity:n.a}),o.swatches[e]=n;o.inline&&t.parent().addClass("minicolors-inline"),c(t,!1),t.data("minicolors-initialized",!0)}}function o(i){var t=i.parent();i.removeData("minicolors-initialized").removeData("minicolors-settings").removeProp("size").removeClass("minicolors-input"),t.before(i).remove()}function s(i){var t=i.parent(),o=t.find(".minicolors-panel"),s=i.data("minicolors-settings");!i.data("minicolors-initialized")||i.prop("disabled")||t.hasClass("minicolors-inline")||t.hasClass("minicolors-focus")||(a(),t.addClass("minicolors-focus"),o.stop(!0,!0).fadeIn(s.showSpeed,function(){s.show&&s.show.call(i.get(0))}))}function a(){i(".minicolors-focus").each(function(){var t=i(this),o=t.find(".minicolors-input"),s=t.find(".minicolors-panel"),a=o.data("minicolors-settings");s.fadeOut(a.hideSpeed,function(){a.hide&&a.hide.call(o.get(0)),t.removeClass("minicolors-focus")})})}function n(i,t,o){var s,a,n,e,c=i.parents(".minicolors").find(".minicolors-input"),l=c.data("minicolors-settings"),h=i.find("[class$=-picker]"),d=i.offset().left,p=i.offset().top,u=Math.round(t.pageX-d),g=Math.round(t.pageY-p),m=o?l.animationSpeed:0;t.originalEvent.changedTouches&&(u=t.originalEvent.changedTouches[0].pageX-d,g=t.originalEvent.changedTouches[0].pageY-p),u<0&&(u=0),g<0&&(g=0),u>i.width()&&(u=i.width()),g>i.height()&&(g=i.height()),i.parent().is(".minicolors-slider-wheel")&&h.parent().is(".minicolors-grid")&&(s=75-u,a=75-g,n=Math.sqrt(s*s+a*a),e=Math.atan2(a,s),e<0&&(e+=2*Math.PI),n>75&&(n=75,u=75-75*Math.cos(e),g=75-75*Math.sin(e)),u=Math.round(u),g=Math.round(g)),i.is(".minicolors-grid")?h.stop(!0).animate({top:g+"px",left:u+"px"},m,l.animationEasing,function(){r(c,i)}):h.stop(!0).animate({top:g+"px"},m,l.animationEasing,function(){r(c,i)})}function r(i,t){function o(i,t){var o,s;return i.length&&t?(o=i.offset().left,s=i.offset().top,{x:o-t.offset().left+i.outerWidth()/2,y:s-t.offset().top+i.outerHeight()/2}):null}var s,a,n,r,c,h,d,p=i.val(),u=i.attr("data-opacity"),g=i.parent(),m=i.data("minicolors-settings"),v=g.find(".minicolors-input-swatch"),b=g.find(".minicolors-grid"),w=g.find(".minicolors-slider"),y=g.find(".minicolors-opacity-slider"),C=b.find("[class$=-picker]"),M=w.find("[class$=-picker]"),x=y.find("[class$=-picker]"),I=o(C,b),S=o(M,w),z=o(x,y);if(t.is(".minicolors-grid, .minicolors-slider, .minicolors-opacity-slider")){switch(m.control){case"wheel":r=b.width()/2-I.x,c=b.height()/2-I.y,h=Math.sqrt(r*r+c*c),d=Math.atan2(c,r),d<0&&(d+=2*Math.PI),h>75&&(h=75,I.x=69-75*Math.cos(d),I.y=69-75*Math.sin(d)),a=f(h/.75,0,100),s=f(180*d/Math.PI,0,360),n=f(100-Math.floor(S.y*(100/w.height())),0,100),p=k({h:s,s:a,b:n}),w.css("backgroundColor",k({h:s,s:a,b:100}));break;case"saturation":s=f(parseInt(I.x*(360/b.width()),10),0,360),a=f(100-Math.floor(S.y*(100/w.height())),0,100),n=f(100-Math.floor(I.y*(100/b.height())),0,100),p=k({h:s,s:a,b:n}),w.css("backgroundColor",k({h:s,s:100,b:n})),g.find(".minicolors-grid-inner").css("opacity",a/100);break;case"brightness":s=f(parseInt(I.x*(360/b.width()),10),0,360),a=f(100-Math.floor(I.y*(100/b.height())),0,100),n=f(100-Math.floor(S.y*(100/w.height())),0,100),p=k({h:s,s:a,b:n}),w.css("backgroundColor",k({h:s,s:a,b:100})),g.find(".minicolors-grid-inner").css("opacity",1-n/100);break;default:s=f(360-parseInt(S.y*(360/w.height()),10),0,360),a=f(Math.floor(I.x*(100/b.width())),0,100),n=f(100-Math.floor(I.y*(100/b.height())),0,100),p=k({h:s,s:a,b:n}),b.css("backgroundColor",k({h:s,s:100,b:100}))}u=m.opacity?parseFloat(1-z.y/y.height()).toFixed(2):1,e(i,p,u)}else v.find("span").css({backgroundColor:p,opacity:u}),l(i,p,u)}function e(i,t,o){var s,a=i.parent(),n=i.data("minicolors-settings"),r=a.find(".minicolors-input-swatch");n.opacity&&i.attr("data-opacity",o),"rgb"===n.format?(s=v(t)?g(t,!0):I(u(t,!0)),o=""===i.attr("data-opacity")?1:f(parseFloat(i.attr("data-opacity")).toFixed(2),0,1),!isNaN(o)&&n.opacity||(o=1),t=i.minicolors("rgbObject").a<=1&&s&&n.opacity?"rgba("+s.r+", "+s.g+", "+s.b+", "+parseFloat(o)+")":"rgb("+s.r+", "+s.g+", "+s.b+")"):(v(t)&&(t=y(t)),t=p(t,n.letterCase)),i.val(t),r.find("span").css({backgroundColor:t,opacity:o}),l(i,t,o)}function c(t,o){var s,a,n,r,e,c,h,d,w,C,x=t.parent(),I=t.data("minicolors-settings"),S=x.find(".minicolors-input-swatch"),z=x.find(".minicolors-grid"),F=x.find(".minicolors-slider"),T=x.find(".minicolors-opacity-slider"),D=z.find("[class$=-picker]"),j=F.find("[class$=-picker]"),q=T.find("[class$=-picker]");switch(v(t.val())?(s=y(t.val()),e=f(parseFloat(b(t.val())).toFixed(2),0,1),e&&t.attr("data-opacity",e)):s=p(u(t.val(),!0),I.letterCase),s||(s=p(m(I.defaultValue,!0),I.letterCase)),a=M(s),r=I.keywords?i.map(I.keywords.split(","),function(t){return i.trim(t.toLowerCase())}):[],c=""!==t.val()&&i.inArray(t.val().toLowerCase(),r)>-1?p(t.val()):v(t.val())?g(t.val()):s,o||t.val(c),I.opacity&&(n=""===t.attr("data-opacity")?1:f(parseFloat(t.attr("data-opacity")).toFixed(2),0,1),isNaN(n)&&(n=1),t.attr("data-opacity",n),S.find("span").css("opacity",n),d=f(T.height()-T.height()*n,0,T.height()),q.css("top",d+"px")),"transparent"===t.val().toLowerCase()&&S.find("span").css("opacity",0),S.find("span").css("backgroundColor",s),I.control){case"wheel":w=f(Math.ceil(.75*a.s),0,z.height()/2),C=a.h*Math.PI/180,h=f(75-Math.cos(C)*w,0,z.width()),d=f(75-Math.sin(C)*w,0,z.height()),D.css({top:d+"px",left:h+"px"}),d=150-a.b/(100/z.height()),""===s&&(d=0),j.css("top",d+"px"),F.css("backgroundColor",k({h:a.h,s:a.s,b:100}));break;case"saturation":h=f(5*a.h/12,0,150),d=f(z.height()-Math.ceil(a.b/(100/z.height())),0,z.height()),D.css({top:d+"px",left:h+"px"}),d=f(F.height()-a.s*(F.height()/100),0,F.height()),j.css("top",d+"px"),F.css("backgroundColor",k({h:a.h,s:100,b:a.b})),x.find(".minicolors-grid-inner").css("opacity",a.s/100);break;case"brightness":h=f(5*a.h/12,0,150),d=f(z.height()-Math.ceil(a.s/(100/z.height())),0,z.height()),D.css({top:d+"px",left:h+"px"}),d=f(F.height()-a.b*(F.height()/100),0,F.height()),j.css("top",d+"px"),F.css("backgroundColor",k({h:a.h,s:a.s,b:100})),x.find(".minicolors-grid-inner").css("opacity",1-a.b/100);break;default:h=f(Math.ceil(a.s/(100/z.width())),0,z.width()),d=f(z.height()-Math.ceil(a.b/(100/z.height())),0,z.height()),D.css({top:d+"px",left:h+"px"}),d=f(F.height()-a.h/(360/F.height()),0,F.height()),j.css("top",d+"px"),z.css("backgroundColor",k({h:a.h,s:100,b:100}))}t.data("minicolors-initialized")&&l(t,c,n)}function l(i,t,o){var s,a,n,r=i.data("minicolors-settings"),e=i.data("minicolors-lastChange");if(!e||e.value!==t||e.opacity!==o){if(i.data("minicolors-lastChange",{value:t,opacity:o}),r.swatches&&0!==r.swatches.length){for(s=v(t)?g(t,!0):I(t),a=-1,n=0;n<r.swatches.length;++n)if(s.r===r.swatches[n].r&&s.g===r.swatches[n].g&&s.b===r.swatches[n].b&&s.a===r.swatches[n].a){a=n;break}i.parent().find(".minicolors-swatches .minicolors-swatch").removeClass("selected"),a!==-1&&i.parent().find(".minicolors-swatches .minicolors-swatch").eq(n).addClass("selected")}r.change&&(r.changeDelay?(clearTimeout(i.data("minicolors-changeTimeout")),i.data("minicolors-changeTimeout",setTimeout(function(){r.change.call(i.get(0),t,o)},r.changeDelay))):r.change.call(i.get(0),t,o)),i.trigger("change").trigger("input")}}function h(t){var o,s=i(t).attr("data-opacity");if(v(i(t).val()))o=g(i(t).val(),!0);else{var a=u(i(t).val(),!0);o=I(a)}return o?(void 0!==s&&i.extend(o,{a:parseFloat(s)}),o):null}function d(t,o){var s,a=i(t).attr("data-opacity");if(v(i(t).val()))s=g(i(t).val(),!0);else{var n=u(i(t).val(),!0);s=I(n)}return s?(void 0===a&&(a=1),o?"rgba("+s.r+", "+s.g+", "+s.b+", "+parseFloat(a)+")":"rgb("+s.r+", "+s.g+", "+s.b+")"):null}function p(i,t){return"uppercase"===t?i.toUpperCase():i.toLowerCase()}function u(i,t){return i=i.replace(/^#/g,""),i.match(/^[A-F0-9]{3,6}/gi)?3!==i.length&&6!==i.length?"":(3===i.length&&t&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]),"#"+i):""}function g(i,t){var o=i.replace(/[^\d,.]/g,""),s=o.split(",");return s[0]=f(parseInt(s[0],10),0,255),s[1]=f(parseInt(s[1],10),0,255),s[2]=f(parseInt(s[2],10),0,255),s[3]&&(s[3]=f(parseFloat(s[3],10),0,1)),t?s[3]?{r:s[0],g:s[1],b:s[2],a:s[3]}:{r:s[0],g:s[1],b:s[2]}:"undefined"!=typeof s[3]&&s[3]<=1?"rgba("+s[0]+", "+s[1]+", "+s[2]+", "+s[3]+")":"rgb("+s[0]+", "+s[1]+", "+s[2]+")"}function m(i,t){return v(i)?g(i):u(i,t)}function f(i,t,o){return i<t&&(i=t),i>o&&(i=o),i}function v(i){var t=i.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);return!(!t||4!==t.length)}function b(i){return i=i.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i),i&&6===i.length?i[4]:"1"}function w(i){var t={},o=Math.round(i.h),s=Math.round(255*i.s/100),a=Math.round(255*i.b/100);if(0===s)t.r=t.g=t.b=a;else{var n=a,r=(255-s)*a/255,e=(n-r)*(o%60)/60;360===o&&(o=0),o<60?(t.r=n,t.b=r,t.g=r+e):o<120?(t.g=n,t.b=r,t.r=n-e):o<180?(t.g=n,t.r=r,t.b=r+e):o<240?(t.b=n,t.r=r,t.g=n-e):o<300?(t.b=n,t.g=r,t.r=r+e):o<360?(t.r=n,t.g=r,t.b=n-e):(t.r=0,t.g=0,t.b=0)}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}}function y(i){return i=i.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i),i&&4===i.length?"#"+("0"+parseInt(i[1],10).toString(16)).slice(-2)+("0"+parseInt(i[2],10).toString(16)).slice(-2)+("0"+parseInt(i[3],10).toString(16)).slice(-2):""}function C(t){var o=[t.r.toString(16),t.g.toString(16),t.b.toString(16)];return i.each(o,function(i,t){1===t.length&&(o[i]="0"+t)}),"#"+o.join("")}function k(i){return C(w(i))}function M(i){var t=x(I(i));return 0===t.s&&(t.h=360),t}function x(i){var t={h:0,s:0,b:0},o=Math.min(i.r,i.g,i.b),s=Math.max(i.r,i.g,i.b),a=s-o;return t.b=s,t.s=0!==s?255*a/s:0,0!==t.s?i.r===s?t.h=(i.g-i.b)/a:i.g===s?t.h=2+(i.b-i.r)/a:t.h=4+(i.r-i.g)/a:t.h=-1,t.h*=60,t.h<0&&(t.h+=360),t.s*=100/255,t.b*=100/255,t}function I(i){return i=parseInt(i.indexOf("#")>-1?i.substring(1):i,16),{r:i>>16,g:(65280&i)>>8,b:255&i}}i.minicolors={defaults:{animationSpeed:50,animationEasing:"swing",change:null,changeDelay:0,control:"hue",defaultValue:"",format:"hex",hide:null,hideSpeed:100,inline:!1,keywords:"",letterCase:"lowercase",opacity:!1,position:"bottom left",show:null,showSpeed:100,theme:"default",swatches:[]}},i.extend(i.fn,{minicolors:function(n,r){switch(n){case"destroy":return i(this).each(function(){o(i(this))}),i(this);case"hide":return a(),i(this);case"opacity":return void 0===r?i(this).attr("data-opacity"):(i(this).each(function(){c(i(this).attr("data-opacity",r))}),i(this));case"rgbObject":return h(i(this),"rgbaObject"===n);case"rgbString":case"rgbaString":return d(i(this),"rgbaString"===n);case"settings":return void 0===r?i(this).data("minicolors-settings"):(i(this).each(function(){var t=i(this).data("minicolors-settings")||{};o(i(this)),i(this).minicolors(i.extend(!0,t,r))}),i(this));case"show":return s(i(this).eq(0)),i(this);case"value":return void 0===r?i(this).val():(i(this).each(function(){"object"==typeof r&&null!==r?(r.opacity&&i(this).attr("data-opacity",f(r.opacity,0,1)),r.color&&i(this).val(r.color)):i(this).val(r),c(i(this))}),i(this));default:return"create"!==n&&(r=n),i(this).each(function(){t(i(this),r)}),i(this)}}}),i([document]).on("mousedown.minicolors touchstart.minicolors",function(t){i(t.target).parents().add(t.target).hasClass("minicolors")||a()}).on("mousedown.minicolors touchstart.minicolors",".minicolors-grid, .minicolors-slider, .minicolors-opacity-slider",function(t){var o=i(this);t.preventDefault(),i(t.delegateTarget).data("minicolors-target",o),n(o,t,!0)}).on("mousemove.minicolors touchmove.minicolors",function(t){var o=i(t.delegateTarget).data("minicolors-target");o&&n(o,t)}).on("mouseup.minicolors touchend.minicolors",function(){i(this).removeData("minicolors-target")}).on("click.minicolors",".minicolors-swatches li",function(t){t.preventDefault();var o=i(this),s=o.parents(".minicolors").find(".minicolors-input"),a=o.data("swatch-color");e(s,a,b(a)),c(s)}).on("mousedown.minicolors touchstart.minicolors",".minicolors-input-swatch",function(t){var o=i(this).parent().find(".minicolors-input");t.preventDefault(),s(o)}).on("focus.minicolors",".minicolors-input",function(){var t=i(this);t.data("minicolors-initialized")&&s(t)}).on("blur.minicolors",".minicolors-input",function(){var t,o,s,a,n,r=i(this),e=r.data("minicolors-settings");r.data("minicolors-initialized")&&(t=e.keywords?i.map(e.keywords.split(","),function(t){return i.trim(t.toLowerCase())}):[],""!==r.val()&&i.inArray(r.val().toLowerCase(),t)>-1?n=r.val():(v(r.val())?s=g(r.val(),!0):(o=u(r.val(),!0),s=o?I(o):null),n=null===s?e.defaultValue:"rgb"===e.format?g(e.opacity?"rgba("+s.r+","+s.g+","+s.b+","+r.attr("data-opacity")+")":"rgb("+s.r+","+s.g+","+s.b+")"):C(s)),a=e.opacity?r.attr("data-opacity"):1,"transparent"===n.toLowerCase()&&(a=0),r.closest(".minicolors").find(".minicolors-input-swatch > span").css("opacity",a),r.val(n),""===r.val()&&r.val(m(e.defaultValue,!0)),r.val(p(r.val(),e.letterCase)))}).on("keydown.minicolors",".minicolors-input",function(t){var o=i(this);if(o.data("minicolors-initialized"))switch(t.keyCode){case 9:a();break;case 13:case 27:a(),o.blur()}}).on("keyup.minicolors",".minicolors-input",function(){var t=i(this);t.data("minicolors-initialized")&&c(t,!0)}).on("paste.minicolors",".minicolors-input",function(){var t=i(this);t.data("minicolors-initialized")&&setTimeout(function(){c(t,!0)},1)})});
1
+ // jscs:disable
2
+ //
3
+ // jQuery MiniColors: A tiny color picker built on jQuery
4
+ //
5
+ // Developed by Cory LaViska for A Beautiful Site, LLC
6
+ //
7
+ // Licensed under the MIT license: http://opensource.org/licenses/MIT
8
+ //
9
  !function(i){"function"==typeof define&&define.amd?define(["jquery"],i):"object"==typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(i){"use strict";function t(t,o){var s,a,n,r,e,l=i('<div class="minicolors" />'),h=i.minicolors.defaults;if(!t.data("minicolors-initialized")){if(o=i.extend(!0,{},h,o),l.addClass("minicolors-theme-"+o.theme).toggleClass("minicolors-with-opacity",o.opacity),void 0!==o.position&&i.each(o.position.split(" "),function(){l.addClass("minicolors-position-"+this)}),s="rgb"===o.format?o.opacity?"25":"20":o.keywords?"11":"7",t.addClass("minicolors-input").data("minicolors-initialized",!1).data("minicolors-settings",o).prop("size",s).wrap(l).after('<div class="minicolors-panel minicolors-slider-'+o.control+'"><div class="minicolors-slider minicolors-sprite"><div class="minicolors-picker"></div></div><div class="minicolors-opacity-slider minicolors-sprite"><div class="minicolors-picker"></div></div><div class="minicolors-grid minicolors-sprite"><div class="minicolors-grid-inner"></div><div class="minicolors-picker"><div></div></div></div></div>'),o.inline||(t.after('<span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span>'),t.next(".minicolors-input-swatch").on("click",function(i){i.preventDefault(),t.focus()})),r=t.parent().find(".minicolors-panel"),r.on("selectstart",function(){return!1}).end(),o.swatches&&0!==o.swatches.length)for(r.addClass("minicolors-with-swatches"),a=i('<ul class="minicolors-swatches"></ul>').appendTo(r),e=0;e<o.swatches.length;++e)n=o.swatches[e],n=v(n)?g(n,!0):I(u(n,!0)),i('<li class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></li>').appendTo(a).data("swatch-color",o.swatches[e]).find(".minicolors-swatch-color").css({backgroundColor:C(n),opacity:n.a}),o.swatches[e]=n;o.inline&&t.parent().addClass("minicolors-inline"),c(t,!1),t.data("minicolors-initialized",!0)}}function o(i){var t=i.parent();i.removeData("minicolors-initialized").removeData("minicolors-settings").removeProp("size").removeClass("minicolors-input"),t.before(i).remove()}function s(i){var t=i.parent(),o=t.find(".minicolors-panel"),s=i.data("minicolors-settings");!i.data("minicolors-initialized")||i.prop("disabled")||t.hasClass("minicolors-inline")||t.hasClass("minicolors-focus")||(a(),t.addClass("minicolors-focus"),o.stop(!0,!0).fadeIn(s.showSpeed,function(){s.show&&s.show.call(i.get(0))}))}function a(){i(".minicolors-focus").each(function(){var t=i(this),o=t.find(".minicolors-input"),s=t.find(".minicolors-panel"),a=o.data("minicolors-settings");s.fadeOut(a.hideSpeed,function(){a.hide&&a.hide.call(o.get(0)),t.removeClass("minicolors-focus")})})}function n(i,t,o){var s,a,n,e,c=i.parents(".minicolors").find(".minicolors-input"),l=c.data("minicolors-settings"),h=i.find("[class$=-picker]"),d=i.offset().left,p=i.offset().top,u=Math.round(t.pageX-d),g=Math.round(t.pageY-p),m=o?l.animationSpeed:0;t.originalEvent.changedTouches&&(u=t.originalEvent.changedTouches[0].pageX-d,g=t.originalEvent.changedTouches[0].pageY-p),u<0&&(u=0),g<0&&(g=0),u>i.width()&&(u=i.width()),g>i.height()&&(g=i.height()),i.parent().is(".minicolors-slider-wheel")&&h.parent().is(".minicolors-grid")&&(s=75-u,a=75-g,n=Math.sqrt(s*s+a*a),e=Math.atan2(a,s),e<0&&(e+=2*Math.PI),n>75&&(n=75,u=75-75*Math.cos(e),g=75-75*Math.sin(e)),u=Math.round(u),g=Math.round(g)),i.is(".minicolors-grid")?h.stop(!0).animate({top:g+"px",left:u+"px"},m,l.animationEasing,function(){r(c,i)}):h.stop(!0).animate({top:g+"px"},m,l.animationEasing,function(){r(c,i)})}function r(i,t){function o(i,t){var o,s;return i.length&&t?(o=i.offset().left,s=i.offset().top,{x:o-t.offset().left+i.outerWidth()/2,y:s-t.offset().top+i.outerHeight()/2}):null}var s,a,n,r,c,h,d,p=i.val(),u=i.attr("data-opacity"),g=i.parent(),m=i.data("minicolors-settings"),v=g.find(".minicolors-input-swatch"),b=g.find(".minicolors-grid"),w=g.find(".minicolors-slider"),y=g.find(".minicolors-opacity-slider"),C=b.find("[class$=-picker]"),M=w.find("[class$=-picker]"),x=y.find("[class$=-picker]"),I=o(C,b),S=o(M,w),z=o(x,y);if(t.is(".minicolors-grid, .minicolors-slider, .minicolors-opacity-slider")){switch(m.control){case"wheel":r=b.width()/2-I.x,c=b.height()/2-I.y,h=Math.sqrt(r*r+c*c),d=Math.atan2(c,r),d<0&&(d+=2*Math.PI),h>75&&(h=75,I.x=69-75*Math.cos(d),I.y=69-75*Math.sin(d)),a=f(h/.75,0,100),s=f(180*d/Math.PI,0,360),n=f(100-Math.floor(S.y*(100/w.height())),0,100),p=k({h:s,s:a,b:n}),w.css("backgroundColor",k({h:s,s:a,b:100}));break;case"saturation":s=f(parseInt(I.x*(360/b.width()),10),0,360),a=f(100-Math.floor(S.y*(100/w.height())),0,100),n=f(100-Math.floor(I.y*(100/b.height())),0,100),p=k({h:s,s:a,b:n}),w.css("backgroundColor",k({h:s,s:100,b:n})),g.find(".minicolors-grid-inner").css("opacity",a/100);break;case"brightness":s=f(parseInt(I.x*(360/b.width()),10),0,360),a=f(100-Math.floor(I.y*(100/b.height())),0,100),n=f(100-Math.floor(S.y*(100/w.height())),0,100),p=k({h:s,s:a,b:n}),w.css("backgroundColor",k({h:s,s:a,b:100})),g.find(".minicolors-grid-inner").css("opacity",1-n/100);break;default:s=f(360-parseInt(S.y*(360/w.height()),10),0,360),a=f(Math.floor(I.x*(100/b.width())),0,100),n=f(100-Math.floor(I.y*(100/b.height())),0,100),p=k({h:s,s:a,b:n}),b.css("backgroundColor",k({h:s,s:100,b:100}))}u=m.opacity?parseFloat(1-z.y/y.height()).toFixed(2):1,e(i,p,u)}else v.find("span").css({backgroundColor:p,opacity:u}),l(i,p,u)}function e(i,t,o){var s,a=i.parent(),n=i.data("minicolors-settings"),r=a.find(".minicolors-input-swatch");n.opacity&&i.attr("data-opacity",o),"rgb"===n.format?(s=v(t)?g(t,!0):I(u(t,!0)),o=""===i.attr("data-opacity")?1:f(parseFloat(i.attr("data-opacity")).toFixed(2),0,1),!isNaN(o)&&n.opacity||(o=1),t=i.minicolors("rgbObject").a<=1&&s&&n.opacity?"rgba("+s.r+", "+s.g+", "+s.b+", "+parseFloat(o)+")":"rgb("+s.r+", "+s.g+", "+s.b+")"):(v(t)&&(t=y(t)),t=p(t,n.letterCase)),i.val(t),r.find("span").css({backgroundColor:t,opacity:o}),l(i,t,o)}function c(t,o){var s,a,n,r,e,c,h,d,w,C,x=t.parent(),I=t.data("minicolors-settings"),S=x.find(".minicolors-input-swatch"),z=x.find(".minicolors-grid"),F=x.find(".minicolors-slider"),T=x.find(".minicolors-opacity-slider"),D=z.find("[class$=-picker]"),j=F.find("[class$=-picker]"),q=T.find("[class$=-picker]");switch(v(t.val())?(s=y(t.val()),e=f(parseFloat(b(t.val())).toFixed(2),0,1),e&&t.attr("data-opacity",e)):s=p(u(t.val(),!0),I.letterCase),s||(s=p(m(I.defaultValue,!0),I.letterCase)),a=M(s),r=I.keywords?i.map(I.keywords.split(","),function(t){return i.trim(t.toLowerCase())}):[],c=""!==t.val()&&i.inArray(t.val().toLowerCase(),r)>-1?p(t.val()):v(t.val())?g(t.val()):s,o||t.val(c),I.opacity&&(n=""===t.attr("data-opacity")?1:f(parseFloat(t.attr("data-opacity")).toFixed(2),0,1),isNaN(n)&&(n=1),t.attr("data-opacity",n),S.find("span").css("opacity",n),d=f(T.height()-T.height()*n,0,T.height()),q.css("top",d+"px")),"transparent"===t.val().toLowerCase()&&S.find("span").css("opacity",0),S.find("span").css("backgroundColor",s),I.control){case"wheel":w=f(Math.ceil(.75*a.s),0,z.height()/2),C=a.h*Math.PI/180,h=f(75-Math.cos(C)*w,0,z.width()),d=f(75-Math.sin(C)*w,0,z.height()),D.css({top:d+"px",left:h+"px"}),d=150-a.b/(100/z.height()),""===s&&(d=0),j.css("top",d+"px"),F.css("backgroundColor",k({h:a.h,s:a.s,b:100}));break;case"saturation":h=f(5*a.h/12,0,150),d=f(z.height()-Math.ceil(a.b/(100/z.height())),0,z.height()),D.css({top:d+"px",left:h+"px"}),d=f(F.height()-a.s*(F.height()/100),0,F.height()),j.css("top",d+"px"),F.css("backgroundColor",k({h:a.h,s:100,b:a.b})),x.find(".minicolors-grid-inner").css("opacity",a.s/100);break;case"brightness":h=f(5*a.h/12,0,150),d=f(z.height()-Math.ceil(a.s/(100/z.height())),0,z.height()),D.css({top:d+"px",left:h+"px"}),d=f(F.height()-a.b*(F.height()/100),0,F.height()),j.css("top",d+"px"),F.css("backgroundColor",k({h:a.h,s:a.s,b:100})),x.find(".minicolors-grid-inner").css("opacity",1-a.b/100);break;default:h=f(Math.ceil(a.s/(100/z.width())),0,z.width()),d=f(z.height()-Math.ceil(a.b/(100/z.height())),0,z.height()),D.css({top:d+"px",left:h+"px"}),d=f(F.height()-a.h/(360/F.height()),0,F.height()),j.css("top",d+"px"),z.css("backgroundColor",k({h:a.h,s:100,b:100}))}t.data("minicolors-initialized")&&l(t,c,n)}function l(i,t,o){var s,a,n,r=i.data("minicolors-settings"),e=i.data("minicolors-lastChange");if(!e||e.value!==t||e.opacity!==o){if(i.data("minicolors-lastChange",{value:t,opacity:o}),r.swatches&&0!==r.swatches.length){for(s=v(t)?g(t,!0):I(t),a=-1,n=0;n<r.swatches.length;++n)if(s.r===r.swatches[n].r&&s.g===r.swatches[n].g&&s.b===r.swatches[n].b&&s.a===r.swatches[n].a){a=n;break}i.parent().find(".minicolors-swatches .minicolors-swatch").removeClass("selected"),a!==-1&&i.parent().find(".minicolors-swatches .minicolors-swatch").eq(n).addClass("selected")}r.change&&(r.changeDelay?(clearTimeout(i.data("minicolors-changeTimeout")),i.data("minicolors-changeTimeout",setTimeout(function(){r.change.call(i.get(0),t,o)},r.changeDelay))):r.change.call(i.get(0),t,o)),i.trigger("change").trigger("input")}}function h(t){var o,s=i(t).attr("data-opacity");if(v(i(t).val()))o=g(i(t).val(),!0);else{var a=u(i(t).val(),!0);o=I(a)}return o?(void 0!==s&&i.extend(o,{a:parseFloat(s)}),o):null}function d(t,o){var s,a=i(t).attr("data-opacity");if(v(i(t).val()))s=g(i(t).val(),!0);else{var n=u(i(t).val(),!0);s=I(n)}return s?(void 0===a&&(a=1),o?"rgba("+s.r+", "+s.g+", "+s.b+", "+parseFloat(a)+")":"rgb("+s.r+", "+s.g+", "+s.b+")"):null}function p(i,t){return"uppercase"===t?i.toUpperCase():i.toLowerCase()}function u(i,t){return i=i.replace(/^#/g,""),i.match(/^[A-F0-9]{3,6}/gi)?3!==i.length&&6!==i.length?"":(3===i.length&&t&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]),"#"+i):""}function g(i,t){var o=i.replace(/[^\d,.]/g,""),s=o.split(",");return s[0]=f(parseInt(s[0],10),0,255),s[1]=f(parseInt(s[1],10),0,255),s[2]=f(parseInt(s[2],10),0,255),s[3]&&(s[3]=f(parseFloat(s[3],10),0,1)),t?s[3]?{r:s[0],g:s[1],b:s[2],a:s[3]}:{r:s[0],g:s[1],b:s[2]}:"undefined"!=typeof s[3]&&s[3]<=1?"rgba("+s[0]+", "+s[1]+", "+s[2]+", "+s[3]+")":"rgb("+s[0]+", "+s[1]+", "+s[2]+")"}function m(i,t){return v(i)?g(i):u(i,t)}function f(i,t,o){return i<t&&(i=t),i>o&&(i=o),i}function v(i){var t=i.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);return!(!t||4!==t.length)}function b(i){return i=i.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i),i&&6===i.length?i[4]:"1"}function w(i){var t={},o=Math.round(i.h),s=Math.round(255*i.s/100),a=Math.round(255*i.b/100);if(0===s)t.r=t.g=t.b=a;else{var n=a,r=(255-s)*a/255,e=(n-r)*(o%60)/60;360===o&&(o=0),o<60?(t.r=n,t.b=r,t.g=r+e):o<120?(t.g=n,t.b=r,t.r=n-e):o<180?(t.g=n,t.r=r,t.b=r+e):o<240?(t.b=n,t.r=r,t.g=n-e):o<300?(t.b=n,t.g=r,t.r=r+e):o<360?(t.r=n,t.g=r,t.b=n-e):(t.r=0,t.g=0,t.b=0)}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}}function y(i){return i=i.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i),i&&4===i.length?"#"+("0"+parseInt(i[1],10).toString(16)).slice(-2)+("0"+parseInt(i[2],10).toString(16)).slice(-2)+("0"+parseInt(i[3],10).toString(16)).slice(-2):""}function C(t){var o=[t.r.toString(16),t.g.toString(16),t.b.toString(16)];return i.each(o,function(i,t){1===t.length&&(o[i]="0"+t)}),"#"+o.join("")}function k(i){return C(w(i))}function M(i){var t=x(I(i));return 0===t.s&&(t.h=360),t}function x(i){var t={h:0,s:0,b:0},o=Math.min(i.r,i.g,i.b),s=Math.max(i.r,i.g,i.b),a=s-o;return t.b=s,t.s=0!==s?255*a/s:0,0!==t.s?i.r===s?t.h=(i.g-i.b)/a:i.g===s?t.h=2+(i.b-i.r)/a:t.h=4+(i.r-i.g)/a:t.h=-1,t.h*=60,t.h<0&&(t.h+=360),t.s*=100/255,t.b*=100/255,t}function I(i){return i=parseInt(i.indexOf("#")>-1?i.substring(1):i,16),{r:i>>16,g:(65280&i)>>8,b:255&i}}i.minicolors={defaults:{animationSpeed:50,animationEasing:"swing",change:null,changeDelay:0,control:"hue",defaultValue:"",format:"hex",hide:null,hideSpeed:100,inline:!1,keywords:"",letterCase:"lowercase",opacity:!1,position:"bottom left",show:null,showSpeed:100,theme:"default",swatches:[]}},i.extend(i.fn,{minicolors:function(n,r){switch(n){case"destroy":return i(this).each(function(){o(i(this))}),i(this);case"hide":return a(),i(this);case"opacity":return void 0===r?i(this).attr("data-opacity"):(i(this).each(function(){c(i(this).attr("data-opacity",r))}),i(this));case"rgbObject":return h(i(this),"rgbaObject"===n);case"rgbString":case"rgbaString":return d(i(this),"rgbaString"===n);case"settings":return void 0===r?i(this).data("minicolors-settings"):(i(this).each(function(){var t=i(this).data("minicolors-settings")||{};o(i(this)),i(this).minicolors(i.extend(!0,t,r))}),i(this));case"show":return s(i(this).eq(0)),i(this);case"value":return void 0===r?i(this).val():(i(this).each(function(){"object"==typeof r&&null!==r?(r.opacity&&i(this).attr("data-opacity",f(r.opacity,0,1)),r.color&&i(this).val(r.color)):i(this).val(r),c(i(this))}),i(this));default:return"create"!==n&&(r=n),i(this).each(function(){t(i(this),r)}),i(this)}}}),i([document]).on("mousedown.minicolors touchstart.minicolors",function(t){i(t.target).parents().add(t.target).hasClass("minicolors")||a()}).on("mousedown.minicolors touchstart.minicolors",".minicolors-grid, .minicolors-slider, .minicolors-opacity-slider",function(t){var o=i(this);t.preventDefault(),i(t.delegateTarget).data("minicolors-target",o),n(o,t,!0)}).on("mousemove.minicolors touchmove.minicolors",function(t){var o=i(t.delegateTarget).data("minicolors-target");o&&n(o,t)}).on("mouseup.minicolors touchend.minicolors",function(){i(this).removeData("minicolors-target")}).on("click.minicolors",".minicolors-swatches li",function(t){t.preventDefault();var o=i(this),s=o.parents(".minicolors").find(".minicolors-input"),a=o.data("swatch-color");e(s,a,b(a)),c(s)}).on("mousedown.minicolors touchstart.minicolors",".minicolors-input-swatch",function(t){var o=i(this).parent().find(".minicolors-input");t.preventDefault(),s(o)}).on("focus.minicolors",".minicolors-input",function(){var t=i(this);t.data("minicolors-initialized")&&s(t)}).on("blur.minicolors",".minicolors-input",function(){var t,o,s,a,n,r=i(this),e=r.data("minicolors-settings");r.data("minicolors-initialized")&&(t=e.keywords?i.map(e.keywords.split(","),function(t){return i.trim(t.toLowerCase())}):[],""!==r.val()&&i.inArray(r.val().toLowerCase(),t)>-1?n=r.val():(v(r.val())?s=g(r.val(),!0):(o=u(r.val(),!0),s=o?I(o):null),n=null===s?e.defaultValue:"rgb"===e.format?g(e.opacity?"rgba("+s.r+","+s.g+","+s.b+","+r.attr("data-opacity")+")":"rgb("+s.r+","+s.g+","+s.b+")"):C(s)),a=e.opacity?r.attr("data-opacity"):1,"transparent"===n.toLowerCase()&&(a=0),r.closest(".minicolors").find(".minicolors-input-swatch > span").css("opacity",a),r.val(n),""===r.val()&&r.val(m(e.defaultValue,!0)),r.val(p(r.val(),e.letterCase)))}).on("keydown.minicolors",".minicolors-input",function(t){var o=i(this);if(o.data("minicolors-initialized"))switch(t.keyCode){case 9:a();break;case 13:case 27:a(),o.blur()}}).on("keyup.minicolors",".minicolors-input",function(){var t=i(this);t.data("minicolors-initialized")&&c(t,!0)}).on("paste.minicolors",".minicolors-input",function(){var t=i(this);t.data("minicolors-initialized")&&setTimeout(function(){c(t,!0)},1)})});
colorlib-login-customizer.php CHANGED
@@ -1,7 +1,7 @@
1
  <?php
2
  /*
3
  * Plugin Name: Colorlib Login Customizer
4
- * Version: 1.2.1
5
  * Description: Colorlib Login Customizer is an awesome and intuitive plugin that helps you personalize your login form directly from the Customizer. The plugin fully supports the Live Customizer feature and you can see all the changes in real time and edit them.
6
  * Author: Colorlib
7
  * Author URI: https://colorlib.com/
@@ -34,7 +34,7 @@ require_once 'includes/class-colorlib-login-customizer-autoloader.php';
34
  * @return object Colorlib_Login_Customizer
35
  */
36
  function colorlib_login_customizer() {
37
- $instance = Colorlib_Login_Customizer::instance( __FILE__, '1.2.1' );
38
 
39
  if ( is_null( $instance->settings ) ) {
40
  $instance->settings = Colorlib_Login_Customizer_Settings::instance( $instance );
1
  <?php
2
  /*
3
  * Plugin Name: Colorlib Login Customizer
4
+ * Version: 1.2.2
5
  * Description: Colorlib Login Customizer is an awesome and intuitive plugin that helps you personalize your login form directly from the Customizer. The plugin fully supports the Live Customizer feature and you can see all the changes in real time and edit them.
6
  * Author: Colorlib
7
  * Author URI: https://colorlib.com/
34
  * @return object Colorlib_Login_Customizer
35
  */
36
  function colorlib_login_customizer() {
37
+ $instance = Colorlib_Login_Customizer::instance( __FILE__, '1.2.2' );
38
 
39
  if ( is_null( $instance->settings ) ) {
40
  $instance->settings = Colorlib_Login_Customizer_Settings::instance( $instance );
includes/lib/class-colorlib-login-customizer-css-customization.php CHANGED
@@ -37,7 +37,7 @@ class Colorlib_Login_Customizer_CSS_Customization {
37
  add_filter( 'login_headerurl', array( $this, 'logo_url' ), 99 );
38
  add_filter( 'login_headertitle', array( $this, 'logo_text' ), 99 );
39
 
40
- //
41
  add_action( 'customize_preview_init', array( $this, 'output_css_object' ), 26 );
42
  }
43
 
@@ -127,6 +127,8 @@ class Colorlib_Login_Customizer_CSS_Customization {
127
  'form-field-color' => '',
128
  'username-label' => 'Username or Email Address',
129
  'password-label' => 'Password',
 
 
130
  'form-label-color' => '',
131
  'hide-extra-links' => false,
132
  /**
@@ -758,6 +760,8 @@ class Colorlib_Login_Customizer_CSS_Customization {
758
 
759
  add_filter( 'gettext', array( $this, 'change_username_label' ), 99, 3 );
760
  add_filter( 'gettext', array( $this, 'change_password_label' ), 99, 3 );
 
 
761
 
762
  }
763
 
@@ -814,4 +818,58 @@ class Colorlib_Login_Customizer_CSS_Customization {
814
  return $translated_text;
815
  }
816
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
817
  }
37
  add_filter( 'login_headerurl', array( $this, 'logo_url' ), 99 );
38
  add_filter( 'login_headertitle', array( $this, 'logo_text' ), 99 );
39
 
40
+ //
41
  add_action( 'customize_preview_init', array( $this, 'output_css_object' ), 26 );
42
  }
43
 
127
  'form-field-color' => '',
128
  'username-label' => 'Username or Email Address',
129
  'password-label' => 'Password',
130
+ 'rememberme-label' => 'Remember Me',
131
+ 'login-label' => 'Log In',
132
  'form-label-color' => '',
133
  'hide-extra-links' => false,
134
  /**
760
 
761
  add_filter( 'gettext', array( $this, 'change_username_label' ), 99, 3 );
762
  add_filter( 'gettext', array( $this, 'change_password_label' ), 99, 3 );
763
+ add_filter( 'gettext', array( $this, 'change_rememberme_label' ), 99, 3 );
764
+ add_filter( 'gettext', array( $this, 'change_login_label' ), 99, 3 );
765
 
766
  }
767
 
818
  return $translated_text;
819
  }
820
 
821
+ /**
822
+ * Customizer output for custom remember me text.
823
+ *
824
+ * @param string|string $translated_text The translated text.
825
+ * @param string|string $text The label we want to replace.
826
+ * @param string|string $domain The text domain of the site.
827
+ * @return string
828
+ */
829
+ public function change_rememberme_label( $translated_text, $text, $domain ) {
830
+ $default = 'Remember Me';
831
+ $label = $this->options['rememberme-label'];
832
+
833
+ // Check if is our text
834
+ if ( $default !== $text ) {
835
+ return $translated_text;
836
+ }
837
+
838
+ // Check if the label is changed
839
+ if ( $label === $text ) {
840
+ return $translated_text;
841
+ } else {
842
+ $translated_text = esc_html( $label );
843
+ }
844
+
845
+ return $translated_text;
846
+ }
847
+
848
+ /**
849
+ * Customizer output for custom login text.
850
+ *
851
+ * @param string|string $translated_text The translated text.
852
+ * @param string|string $text The label we want to replace.
853
+ * @param string|string $domain The text domain of the site.
854
+ * @return string
855
+ */
856
+ public function change_login_label( $translated_text, $text, $domain ) {
857
+ $default = 'Log In';
858
+ $label = $this->options['login-label'];
859
+
860
+ // Check if is our text
861
+ if ( $default !== $text ) {
862
+ return $translated_text;
863
+ }
864
+
865
+ // Check if the label is changed
866
+ if ( $label === $text ) {
867
+ return $translated_text;
868
+ } else {
869
+ $translated_text = esc_attr( $label );
870
+ }
871
+
872
+ return $translated_text;
873
+ }
874
+
875
  }
includes/lib/class-colorlib-login-customizer-customizer.php CHANGED
@@ -617,6 +617,20 @@ class Colorlib_Login_Customizer_Customizer {
617
  'type' => 'text',
618
  'default' => 'Password',
619
  ),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
620
  array(
621
  'id' => 'hide-extra-links',
622
  'label' => esc_html__( 'Hide Extra Links', 'colorlib-login-customizer' ),
617
  'type' => 'text',
618
  'default' => 'Password',
619
  ),
620
+ array(
621
+ 'id' => 'rememberme-label',
622
+ 'label' => esc_html__( 'Remember Me label', 'colorlib-login-customizer' ),
623
+ 'description' => esc_html__( 'You can change the default remember me text.', 'colorlib-login-customizer' ),
624
+ 'type' => 'text',
625
+ 'default' => 'Remember Me',
626
+ ),
627
+ array(
628
+ 'id' => 'login-label',
629
+ 'label' => esc_html__( 'Login label', 'colorlib-login-customizer' ),
630
+ 'description' => esc_html__( 'You can change the default text for the log in button.', 'colorlib-login-customizer' ),
631
+ 'type' => 'text',
632
+ 'default' => 'Log In',
633
+ ),
634
  array(
635
  'id' => 'hide-extra-links',
636
  'label' => esc_html__( 'Hide Extra Links', 'colorlib-login-customizer' ),
includes/lib/controls/class-colorlib-login-customizer-button-group-control.php CHANGED
@@ -1,117 +1,117 @@
1
- <?php
2
- if ( ! defined( 'WPINC' ) ) {
3
- die;
4
- }
5
-
6
- /**
7
- * Class Colorlib_Login_Customizer_Button_Group_Control
8
- */
9
- class Colorlib_Login_Customizer_Button_Group_Control extends WP_Customize_Control {
10
- /**
11
- * The type of customize control being rendered.
12
- *
13
- * @since 1.1.0
14
- * @access public
15
- * @var string
16
- */
17
- public $type = 'clc-button-group';
18
-
19
- /**
20
- * @var string
21
- */
22
- public $default = '';
23
-
24
- /**
25
- * @var array
26
- */
27
- public $choices = array();
28
-
29
- /**
30
- * Colorlib_Login_Customizer_Button_Group_Control constructor.
31
- *
32
- * @since 1.1.0
33
- *
34
- * @param WP_Customize_Manager $manager
35
- * @param string $id
36
- * @param array $args
37
- */
38
- public function __construct( WP_Customize_Manager $manager, $id, array $args = array() ) {
39
- parent::__construct( $manager, $id, $args );
40
- $manager->register_control_type( 'Colorlib_Login_Customizer_Button_Group_Control' );
41
- }
42
-
43
- /**
44
- * Add custom parameters to pass to the JS via JSON.
45
- *
46
- * @since 1.1.0
47
- * @access public
48
- */
49
- public function json() {
50
- $json = parent::json();
51
- $json['id'] = $this->id;
52
- $json['link'] = $this->get_link();
53
- $json['value'] = $this->value();
54
- $json['default'] = $this->default;
55
- $json['choices'] = $this->choices;
56
- $json['groupType'] = $this->set_group_type();
57
-
58
- $this->json['inputAttrs'] = '';
59
- foreach ( $this->input_attrs as $attr => $value ) {
60
- $this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
61
- }
62
-
63
- return $json;
64
- }
65
-
66
- /**
67
- * Set group type
68
- */
69
- public function set_group_type() {
70
- $arr = array(
71
- 0 => 'none',
72
- 1 => 'one',
73
- 2 => 'two',
74
- 3 => 'three',
75
- 4 => 'four',
76
- );
77
-
78
- return $arr[ count( $this->choices ) ];
79
- }
80
-
81
- /**
82
- * Display the control's content
83
- */
84
- public function content_template() {
85
- //@formatter:off ?>
86
- <div class="colorlib-login-customizer-control-container">
87
- <label>
88
- <span class="customize-control-title">
89
- {{{ data.label }}}
90
- <# if( data.description ){ #>
91
- <i class="dashicons dashicons-editor-help" style="vertical-align: text-bottom; position: relative;">
92
- <span class="mte-tooltip">
93
- {{{ data.description }}}
94
- </span>
95
- </i>
96
- <# } #>
97
- </span>
98
- </label>
99
- <div class="colorlib-login-customizer-control-set">
100
- <div class="colorlib-login-customizer-control-group colorlib-login-customizer-group-{{ data.groupType }}">
101
- <# for( var i in data.choices ) { #>
102
- <a href="#" data-value="{{ data.choices[i].value }}" <# if( data.value == data.choices[i].value ) { #> class="active" <# } #> >
103
- <# if( ! _.isUndefined( data.choices[i].icon ) ) { #>
104
- <i class="dashicons {{ data.choices[i].icon }}"/>
105
- <# } #>
106
-
107
- <# if( ! _.isUndefined( data.choices[i].png ) ) { #>
108
- <img src="{{ data.choices[i].png }}" />
109
- <# } #>
110
- </a>
111
- <# } #>
112
- </div>
113
- </div>
114
- </div>
115
- <?php //@formatter: on
116
- }
117
- }
1
+ <?php
2
+ if ( ! defined( 'WPINC' ) ) {
3
+ die;
4
+ }
5
+
6
+ /**
7
+ * Class Colorlib_Login_Customizer_Button_Group_Control
8
+ */
9
+ class Colorlib_Login_Customizer_Button_Group_Control extends WP_Customize_Control {
10
+ /**
11
+ * The type of customize control being rendered.
12
+ *
13
+ * @since 1.1.0
14
+ * @access public
15
+ * @var string
16
+ */
17
+ public $type = 'clc-button-group';
18
+
19
+ /**
20
+ * @var string
21
+ */
22
+ public $default = '';
23
+
24
+ /**
25
+ * @var array
26
+ */
27
+ public $choices = array();
28
+
29
+ /**
30
+ * Colorlib_Login_Customizer_Button_Group_Control constructor.
31
+ *
32
+ * @since 1.1.0
33
+ *
34
+ * @param WP_Customize_Manager $manager
35
+ * @param string $id
36
+ * @param array $args
37
+ */
38
+ public function __construct( WP_Customize_Manager $manager, $id, array $args = array() ) {
39
+ parent::__construct( $manager, $id, $args );
40
+ $manager->register_control_type( 'Colorlib_Login_Customizer_Button_Group_Control' );
41
+ }
42
+
43
+ /**
44
+ * Add custom parameters to pass to the JS via JSON.
45
+ *
46
+ * @since 1.1.0
47
+ * @access public
48
+ */
49
+ public function json() {
50
+ $json = parent::json();
51
+ $json['id'] = $this->id;
52
+ $json['link'] = $this->get_link();
53
+ $json['value'] = $this->value();
54
+ $json['default'] = $this->default;
55
+ $json['choices'] = $this->choices;
56
+ $json['groupType'] = $this->set_group_type();
57
+
58
+ $this->json['inputAttrs'] = '';
59
+ foreach ( $this->input_attrs as $attr => $value ) {
60
+ $this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
61
+ }
62
+
63
+ return $json;
64
+ }
65
+
66
+ /**
67
+ * Set group type
68
+ */
69
+ public function set_group_type() {
70
+ $arr = array(
71
+ 0 => 'none',
72
+ 1 => 'one',
73
+ 2 => 'two',
74
+ 3 => 'three',
75
+ 4 => 'four',
76
+ );
77
+
78
+ return $arr[ count( $this->choices ) ];
79
+ }
80
+
81
+ /**
82
+ * Display the control's content
83
+ */
84
+ public function content_template() {
85
+ //@formatter:off ?>
86
+ <div class="colorlib-login-customizer-control-container">
87
+ <label>
88
+ <span class="customize-control-title">
89
+ {{{ data.label }}}
90
+ <# if( data.description ){ #>
91
+ <i class="dashicons dashicons-editor-help" style="vertical-align: text-bottom; position: relative;">
92
+ <span class="mte-tooltip">
93
+ {{{ data.description }}}
94
+ </span>
95
+ </i>
96
+ <# } #>
97
+ </span>
98
+ </label>
99
+ <div class="colorlib-login-customizer-control-set">
100
+ <div class="colorlib-login-customizer-control-group colorlib-login-customizer-group-{{ data.groupType }}">
101
+ <# for( var i in data.choices ) { #>
102
+ <a href="#" data-value="{{ data.choices[i].value }}" <# if( data.value == data.choices[i].value ) { #> class="active" <# } #> >
103
+ <# if( ! _.isUndefined( data.choices[i].icon ) ) { #>
104
+ <i class="dashicons {{ data.choices[i].icon }}"/>
105
+ <# } #>
106
+
107
+ <# if( ! _.isUndefined( data.choices[i].png ) ) { #>
108
+ <img src="{{ data.choices[i].png }}" />
109
+ <# } #>
110
+ </a>
111
+ <# } #>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ <?php //@formatter: on
116
+ }
117
+ }
includes/lib/controls/class-colorlib-login-customizer-control-color-picker.php CHANGED
@@ -1,92 +1,92 @@
1
- <?php
2
- if ( ! defined( 'WPINC' ) ) {
3
- die;
4
- }
5
-
6
- /**
7
- * Class Colorlib_Login_Customizer_Control_Color_Picker
8
- */
9
- class Colorlib_Login_Customizer_Control_Color_Picker extends WP_Customize_Control {
10
- /**
11
- * @since 1.0.0
12
- * @var string
13
- */
14
- public $type = 'clc-color-picker';
15
- /**
16
- * @since 1.0.0
17
- * @var string
18
- */
19
- public $default = '';
20
- /**
21
- * @since 1.0.0
22
- * @var string
23
- */
24
- public $mode = '';
25
- /**
26
- * @since 1.3.4
27
- * @var bool
28
- */
29
- public $lite = false;
30
-
31
- /**
32
- * Colorlib_Login_Customizer_Control_Color_Picker constructor.
33
- *
34
- * @since 1.0.0
35
- *
36
- * @param WP_Customize_Manager $manager
37
- * @param string $id
38
- * @param array $args
39
- */
40
- public function __construct( WP_Customize_Manager $manager, $id, array $args = array() ) {
41
- parent::__construct( $manager, $id, $args );
42
- $manager->register_control_type( 'Colorlib_Login_Customizer_Control_Color_Picker' );
43
- }
44
-
45
- /**
46
- * Add custom parameters to pass to the JS via JSON.
47
- *
48
- * @since 1.2.0
49
- * @access public
50
- */
51
- public function json() {
52
- $json = parent::json();
53
-
54
- $json['id'] = $this->id;
55
- $json['link'] = $this->get_link();
56
- $json['value'] = $this->value();
57
- $json['default'] = $this->setting->default;
58
- $json['mode'] = '' !== $this->mode ? $this->mode : 'hex';
59
- $json['lite'] = $this->lite;
60
-
61
- return $json;
62
- }
63
-
64
- /**
65
- * Display the control's content
66
- */
67
- public function content_template() {
68
- //@formatter:off ?>
69
- <label <# if( data.lite ) { #>class="lite"<# } #>>
70
- <input class="clc-color-picker" type="text" <# if( data.default ){ #>placeholder="{{ data.default }}"<# } #> <# if(data.value){ #> value="{{ data.value }}" <# } #> />
71
- <span class="customize-control-title clc-color-picker-title">
72
- {{{ data.label }}}
73
- <# if( data.default ){ #>
74
- <a href="#" data-default="{{ data.default }}" class="clc-color-picker-default"><?php echo esc_html__( '(clear)', 'colorlib-login-customizer' ); ?></a>
75
- <# } #>
76
-
77
- <# if( data.description ){ #>
78
- <span class="clc-color-picker-description">{{{ data.description }}}</span>
79
- <# } #>
80
- </span>
81
- </label>
82
- <?php //@formatter:on
83
- }
84
-
85
- /**
86
- * Empty, as it should be
87
- *
88
- * @since 1.0.0
89
- */
90
- public function render_content() {
91
- }
92
- }
1
+ <?php
2
+ if ( ! defined( 'WPINC' ) ) {
3
+ die;
4
+ }
5
+
6
+ /**
7
+ * Class Colorlib_Login_Customizer_Control_Color_Picker
8
+ */
9
+ class Colorlib_Login_Customizer_Control_Color_Picker extends WP_Customize_Control {
10
+ /**
11
+ * @since 1.0.0
12
+ * @var string
13
+ */
14
+ public $type = 'clc-color-picker';
15
+ /**
16
+ * @since 1.0.0
17
+ * @var string
18
+ */
19
+ public $default = '';
20
+ /**
21
+ * @since 1.0.0
22
+ * @var string
23
+ */
24
+ public $mode = '';
25
+ /**
26
+ * @since 1.3.4
27
+ * @var bool
28
+ */
29
+ public $lite = false;
30
+
31
+ /**
32
+ * Colorlib_Login_Customizer_Control_Color_Picker constructor.
33
+ *
34
+ * @since 1.0.0
35
+ *
36
+ * @param WP_Customize_Manager $manager
37
+ * @param string $id
38
+ * @param array $args
39
+ */
40
+ public function __construct( WP_Customize_Manager $manager, $id, array $args = array() ) {
41
+ parent::__construct( $manager, $id, $args );
42
+ $manager->register_control_type( 'Colorlib_Login_Customizer_Control_Color_Picker' );
43
+ }
44
+
45
+ /**
46
+ * Add custom parameters to pass to the JS via JSON.
47
+ *
48
+ * @since 1.2.0
49
+ * @access public
50
+ */
51
+ public function json() {
52
+ $json = parent::json();
53
+
54
+ $json['id'] = $this->id;
55
+ $json['link'] = $this->get_link();
56
+ $json['value'] = $this->value();
57
+ $json['default'] = $this->setting->default;
58
+ $json['mode'] = '' !== $this->mode ? $this->mode : 'hex';
59
+ $json['lite'] = $this->lite;
60
+
61
+ return $json;
62
+ }
63
+
64
+ /**
65
+ * Display the control's content
66
+ */
67
+ public function content_template() {
68
+ //@formatter:off ?>
69
+ <label <# if( data.lite ) { #>class="lite"<# } #>>
70
+ <input class="clc-color-picker" type="text" <# if( data.default ){ #>placeholder="{{ data.default }}"<# } #> <# if(data.value){ #> value="{{ data.value }}" <# } #> />
71
+ <span class="customize-control-title clc-color-picker-title">
72
+ {{{ data.label }}}
73
+ <# if( data.default ){ #>
74
+ <a href="#" data-default="{{ data.default }}" class="clc-color-picker-default"><?php echo esc_html__( '(clear)', 'colorlib-login-customizer' ); ?></a>
75
+ <# } #>
76
+
77
+ <# if( data.description ){ #>
78
+ <span class="clc-color-picker-description">{{{ data.description }}}</span>
79
+ <# } #>
80
+ </span>
81
+ </label>
82
+ <?php //@formatter:on
83
+ }
84
+
85
+ /**
86
+ * Empty, as it should be
87
+ *
88
+ * @since 1.0.0
89
+ */
90
+ public function render_content() {
91
+ }
92
+ }
includes/lib/controls/class-colorlib-login-customizer-control-toggle.php CHANGED
@@ -1,81 +1,81 @@
1
- <?php
2
- if ( ! defined( 'WPINC' ) ) {
3
- die;
4
- }
5
-
6
- class Colorlib_Login_Customizer_Control_Toggle extends WP_Customize_Control {
7
- /**
8
- * The type of customize control being rendered.
9
- *
10
- * @since 1.0.0
11
- * @access public
12
- * @var string
13
- */
14
- public $type = 'clc-toggle';
15
-
16
- /**
17
- * Colorlib_Login_Customizer_Control_Toggle constructor.
18
- *
19
- * @param WP_Customize_Manager $manager
20
- * @param string $id
21
- * @param array $args
22
- */
23
- public function __construct( WP_Customize_Manager $manager, $id, array $args = array() ) {
24
- parent::__construct( $manager, $id, $args );
25
- $manager->register_control_type( 'Colorlib_Login_Customizer_Control_Toggle' );
26
- }
27
-
28
- /**
29
- * Add custom parameters to pass to the JS via JSON.
30
- *
31
- * @since 1.0.0
32
- * @access public
33
- */
34
- public function json() {
35
- $json = parent::json();
36
-
37
- $json['id'] = $this->id;
38
- $json['link'] = $this->get_link();
39
- $json['value'] = $this->value();
40
-
41
- return $json;
42
- }
43
-
44
- /**
45
- * Empty, as it should.
46
- *
47
- * @since 1.0.0
48
- * @access public
49
- * @return void
50
- */
51
- public function render_content() {}
52
-
53
- /**
54
- * @since 1.0.0
55
- * @access public
56
- */
57
- public function content_template() {
58
- //@formatter:off
59
- ?>
60
- <div class="checkbox_switch">
61
- <span class="customize-control-title onoffswitch_label">
62
- {{{ data.label }}}
63
- <# if( data.description ){ #>
64
- <i class="dashicons dashicons-editor-help" style="vertical-align: text-bottom; position: relative;">
65
- <span class="clc-tooltip">
66
- {{{ data.description }}}
67
- </span>
68
- </i>
69
- <# } #>
70
- </span>
71
- <div class="onoffswitch">
72
- <input type="checkbox" id="{{{ data.id }}}" name="{{{ data.id }}}" class="onoffswitch-checkbox" value="{{{ data.value }}}" {{{ data.link }}} <# if( data.value ) { #> checked="checked" <# } #> >
73
- <label class="onoffswitch-label" for="{{{ data.id }}}"></label>
74
- </div>
75
- </div>
76
- <?php
77
- //@formatter:on
78
- }
79
-
80
- }
81
-
1
+ <?php
2
+ if ( ! defined( 'WPINC' ) ) {
3
+ die;
4
+ }
5
+
6
+ class Colorlib_Login_Customizer_Control_Toggle extends WP_Customize_Control {
7
+ /**
8
+ * The type of customize control being rendered.
9
+ *
10
+ * @since 1.0.0
11
+ * @access public
12
+ * @var string
13
+ */
14
+ public $type = 'clc-toggle';
15
+
16
+ /**
17
+ * Colorlib_Login_Customizer_Control_Toggle constructor.
18
+ *
19
+ * @param WP_Customize_Manager $manager
20
+ * @param string $id
21
+ * @param array $args
22
+ */
23
+ public function __construct( WP_Customize_Manager $manager, $id, array $args = array() ) {
24
+ parent::__construct( $manager, $id, $args );
25
+ $manager->register_control_type( 'Colorlib_Login_Customizer_Control_Toggle' );
26
+ }
27
+
28
+ /**
29
+ * Add custom parameters to pass to the JS via JSON.
30
+ *
31
+ * @since 1.0.0
32
+ * @access public
33
+ */
34
+ public function json() {
35
+ $json = parent::json();
36
+
37
+ $json['id'] = $this->id;
38
+ $json['link'] = $this->get_link();
39
+ $json['value'] = $this->value();
40
+
41
+ return $json;
42
+ }
43
+
44
+ /**
45
+ * Empty, as it should.
46
+ *
47
+ * @since 1.0.0
48
+ * @access public
49
+ * @return void
50
+ */
51
+ public function render_content() {}
52
+
53
+ /**
54
+ * @since 1.0.0
55
+ * @access public
56
+ */
57
+ public function content_template() {
58
+ //@formatter:off
59
+ ?>
60
+ <div class="checkbox_switch">
61
+ <span class="customize-control-title onoffswitch_label">
62
+ {{{ data.label }}}
63
+ <# if( data.description ){ #>
64
+ <i class="dashicons dashicons-editor-help" style="vertical-align: text-bottom; position: relative;">
65
+ <span class="clc-tooltip">
66
+ {{{ data.description }}}
67
+ </span>
68
+ </i>
69
+ <# } #>
70
+ </span>
71
+ <div class="onoffswitch">
72
+ <input type="checkbox" id="{{{ data.id }}}" name="{{{ data.id }}}" class="onoffswitch-checkbox" value="{{{ data.value }}}" {{{ data.link }}} <# if( data.value ) { #> checked="checked" <# } #> >
73
+ <label class="onoffswitch-label" for="{{{ data.id }}}"></label>
74
+ </div>
75
+ </div>
76
+ <?php
77
+ //@formatter:on
78
+ }
79
+
80
+ }
81
+
includes/login-template.php CHANGED
@@ -181,7 +181,7 @@ $classes = apply_filters( 'login_body_class', $classes, 'login' );
181
  */
182
  do_action( 'login_form' );
183
  ?>
184
- <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> <?php esc_html_e( 'Remember Me', 'colorlib-login-customizer' ); ?></label></p>
185
  <p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Log In', 'colorlib-login-customizer' ); ?>" /></p>
186
  </form>
187
  <p id="nav">
181
  */
182
  do_action( 'login_form' );
183
  ?>
184
+ <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> <span id="clc-rememberme-label"><?php esc_html_e( 'Remember Me', 'colorlib-login-customizer' ); ?></span></label></p>
185
  <p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Log In', 'colorlib-login-customizer' ); ?>" /></p>
186
  </form>
187
  <p id="nav">
readme.txt CHANGED
@@ -3,28 +3,35 @@ Contributors: colorlibplugins, silkalns
3
  Tags: customize login, login, custom login, customize wordpress login, wordpress login, customizer, custom admin, login logo, logo, login customizer, custom wp-login
4
  Requires at least: 4.7
5
  Tested up to: 4.9
6
- Stable tag: trunk
7
  License: GPLv2 or later
8
- License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
10
  Colorlib Login Customizer by Colorlib is a plugin that helps you personalize your login form directly from the Customizer.
11
 
12
  == Description ==
13
 
14
- Custom Login Page Customizer by Colorlib is an awesome and intuitive login page plugin that helps you personalize your login page and login form directly from the Customizer. Custom Login Page Customizer fully supports the Live Customizer feature and you can see all the changes in real time on your login page and edit them.
15
 
16
- All this plugin’s tools and options can be found by going to Appearance > Customize > Custom Login Page Customizer. There you have templates you can use on your login page, custom login page logo, custom login page background options, custom login page form customizations, login form custom width, login form padding and borders, and more all leading to you having a brand new and custom login page.
17
 
18
- Custom Login Page Customizer is without doubt one of the easiest to use WordPress plugins that allows the customization of the login page and login form. It was designed and developed to be powerful and user friendly so it can be enjoyed by both beginner and advanced developers. With Custom Login Page Customizer you can build a custom login page and custom login form in a matter of seconds, unlike some other login customizer plugins. Custom Login Page Customizer marks the end of a boring and bland login page and login form as you will be able to fine tune every aspect of the form to match your style and view and create a unique and custom login page.
19
 
20
- Build and personalize your WordPress login page and login form from start to finish. Custom Login Page Customizer has the following features:
21
 
22
- • Custom login page logo options: you can add a custom login page logo and set up its height and weight.
23
- • Custom login page and login form background options: from here you can upload a background image or change the background’s color.
24
- • Custom login form options: you can change the login form’s width and height, add a background image, change the background color, add padding and borders, and change the login form’s field background color, width, and margin.
25
- • Miscellaneous: in here you will find the options to change the login form button’s background, color, hover state, border, shadow, and the link’s color and hover color.
26
 
27
- Custom Login Page Customizer by Colorlib detailed features:
 
 
 
 
 
 
 
 
 
 
28
 
29
  - Custom login page templates
30
  - Hide/show login logo from login page
@@ -67,12 +74,16 @@ Custom Login Page Customizer by Colorlib detailed features:
67
  - Hide/Show ‘Remember me?’ option on login form
68
  - Custom CSS option to customize further the login form and login page
69
 
70
- Build and personalize your WordPress login form from start to finish. Colorlib Login Customizer has the following features:
 
71
 
72
- - Logo options: you can add a custom logo and set up its height and weight.
73
- - Background options: from here you can upload a background image or change the background’s color.
74
- - Form options: you can change the form’s width and height, add a background image, change the background color, add padding and borders, and change the form’s field background color, width, and margin.
75
- - Miscellaneous: in here you will find the options to change the button’s background, color, hover state, border, shadow, and the link’s color and hover color.
 
 
 
76
 
77
  = Further Reading =
78
 
@@ -80,7 +91,7 @@ This plugin is developed and maintained by Colorlib. Which is well know for thei
80
 
81
  If you are new to WordPress and want to learn more we have got you covered. Colorlib will teach you how to <a href="https://colorlib.com/">start a blog</a> or <a href="https://colorlib.com/wp/how-to-make-a-website/">create a website</a> and much more. If you are already familiar with WordPress you likely want to learn how to make it faster and more reliable. That's when you want to look into hosting and more specifically <a href="http://colorlib.com/wp/wordpress-hosting">WordPress hosting</a>.
82
 
83
- If you enjoy using Colorlib Login Customizer for WordPress please leave a [positive feedback](https://wordpress.org/support/plugin/colorlib-login-customiezr/reviews/?filter=5). We are committed to make it the best Login Customizer plugin for WordPress.
84
 
85
 
86
  == Installation ==
@@ -93,8 +104,11 @@ If you enjoy using Colorlib Login Customizer for WordPress please leave a [posit
93
 
94
  == Changelog ==
95
 
 
 
 
96
  = 1.2.1 =
97
- * Minor fixes.
98
 
99
  = 1.2.0 =
100
  * Implemented everything from here: https://github.com/puikinsh/colorlib-login-customizer/milestone/1?closed=1
3
  Tags: customize login, login, custom login, customize wordpress login, wordpress login, customizer, custom admin, login logo, logo, login customizer, custom wp-login
4
  Requires at least: 4.7
5
  Tested up to: 4.9
6
+ Stable tag: 1.2.2
7
  License: GPLv2 or later
8
+ License URI: http://www.gnu.org/licenses/gpl-3.0.html
9
 
10
  Colorlib Login Customizer by Colorlib is a plugin that helps you personalize your login form directly from the Customizer.
11
 
12
  == Description ==
13
 
14
+ <a href="https://wordpress.org/plugins/colorlib-login-customizer/">Custom Login Page Customizer</a> by Colorlib is an awesome and intuitive login page plugin that helps you *personalize your login page and login form directly from the Customizer*. Custom Login Page Customizer fully supports the Live Customizer feature and you can see all the changes in **real time** on your login page and edit them.
15
 
16
+ All this plugin’s tools and options can be found by going to **Appearance > Customize > Custom Login Page Customizer**. There you have templates you can use on your login page, custom login page logo, custom login page background options, custom login page form customizations, login form custom width, login form padding and borders, and more all leading to you having a *brand new and custom login page*.
17
 
18
+ Custom Login Page Customizer is without doubt one of the *easiest* to use WordPress plugins that allows the customization of the login page and login form. It was designed and developed to be powerful and user friendly so it can be enjoyed by both beginner and advanced developers.
19
 
20
+ With Custom Login Page Customizer you can *build a custom login page and custom login form in a matter of seconds*, unlike some other login customizer plugins. Custom Login Page Customizer marks the end of a boring and bland login page and login form as you will be able to fine tune every aspect of the form to match your style and view and create a **unique and custom login page**.
21
 
22
+ > <strong>Build and personalize your WordPress login page and login form from start to finish!</strong>
 
 
 
23
 
24
+ **Custom Login Page Customizer has the following features**:
25
+
26
+ • **Custom login page logo options**: you can add a custom login page logo and set up its height and weight.
27
+
28
+ • **Custom login page and login form background options**: from here you can upload a background image or change the background’s color.
29
+
30
+ • **Custom login form options**: you can change the login form’s width and height, add a background image, change the background color, add padding and borders, and change the login form’s field background color, width, and margin.
31
+
32
+ • **Miscellaneous**: in here you will find the options to change the login form button’s background, color, hover state, border, shadow, and the link’s color and hover color.
33
+
34
+ **Custom Login Page Customizer by Colorlib detailed features**:
35
 
36
  - Custom login page templates
37
  - Hide/show login logo from login page
74
  - Hide/Show ‘Remember me?’ option on login form
75
  - Custom CSS option to customize further the login form and login page
76
 
77
+ Build and personalize your WordPress login form from start to finish.
78
+ **Colorlib Login Customizer has the following features**:
79
 
80
+ - **Logo options**: you can add a custom logo and set up its height and weight.
81
+
82
+ - **Background options**: from here you can upload a background image or change the background’s color.
83
+
84
+ - **Form options**: you can change the form’s width and height, add a background image, change the background color, add padding and borders, and change the form’s field background color, width, and margin.
85
+
86
+ - **Miscellaneous**: in here you will find the options to change the button’s background, color, hover state, border, shadow, and the link’s color and hover color.
87
 
88
  = Further Reading =
89
 
91
 
92
  If you are new to WordPress and want to learn more we have got you covered. Colorlib will teach you how to <a href="https://colorlib.com/">start a blog</a> or <a href="https://colorlib.com/wp/how-to-make-a-website/">create a website</a> and much more. If you are already familiar with WordPress you likely want to learn how to make it faster and more reliable. That's when you want to look into hosting and more specifically <a href="http://colorlib.com/wp/wordpress-hosting">WordPress hosting</a>.
93
 
94
+ If you enjoy using Colorlib Login Customizer for WordPress please leave a [positive feedback](https://wordpress.org/support/plugin/colorlib-login-customizer/reviews/?rate=5#new-post). We are committed to make it the best Login Customizer plugin for WordPress.
95
 
96
 
97
  == Installation ==
104
 
105
  == Changelog ==
106
 
107
+ = 1.2.2 =
108
+ * Added the possibility to change the `Remember Me` and `Log In` texts
109
+
110
  = 1.2.1 =
111
+ * Minor tweaks & version bump
112
 
113
  = 1.2.0 =
114
  * Implemented everything from here: https://github.com/puikinsh/colorlib-login-customizer/milestone/1?closed=1