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