LoftLoader - Version 2.0.0

Version Description

  • Changed: Rewrite the framework, move all settings to wp customize
  • Added: Any page extension
Download this release

Release Info

Developer loftocean
Plugin Icon 128x128 LoftLoader
Version 2.0.0
Comparing to
See all releases

Code changes from version 1.0.2 to 2.0.0

Files changed (66) hide show
  1. {css → assets/css}/images/ui-bg_flat_55_999999_40x100.png +0 -0
  2. {css → assets/css}/images/ui-bg_flat_75_aaaaaa_40x100.png +0 -0
  3. {css → assets/css}/images/ui-bg_glass_100_f6f6f6_1x400.png +0 -0
  4. {css → assets/css}/images/ui-bg_glass_100_fdf5ce_1x400.png +0 -0
  5. {css → assets/css}/images/ui-bg_glass_45_0078ae_1x400.png +0 -0
  6. {css → assets/css}/images/ui-bg_glass_55_f8da4e_1x400.png +0 -0
  7. assets/css/images/ui-bg_glass_65_ffffff_1x400.png +0 -0
  8. {css → assets/css}/images/ui-bg_glass_75_79c9ec_1x400.png +0 -0
  9. {css → assets/css}/images/ui-bg_gloss-wave_45_e14f1c_500x100.png +0 -0
  10. {css → assets/css}/images/ui-bg_gloss-wave_50_6eac2c_500x100.png +0 -0
  11. {css → assets/css}/images/ui-bg_gloss-wave_75_2191c0_500x100.png +0 -0
  12. assets/css/images/ui-bg_highlight-soft_100_eeeeee_1x100.png +0 -0
  13. {css → assets/css}/images/ui-bg_highlight-soft_75_ffe45c_1x100.png +0 -0
  14. {css → assets/css}/images/ui-bg_inset-hard_100_fcfdfd_1x100.png +0 -0
  15. {css → assets/css}/images/ui-icons_0078ae_256x240.png +0 -0
  16. {css → assets/css}/images/ui-icons_056b93_256x240.png +0 -0
  17. {css → assets/css}/images/ui-icons_acacac_256x240.png +0 -0
  18. {css → assets/css}/images/ui-icons_e0fdff_256x240.png +0 -0
  19. {css → assets/css}/images/ui-icons_ef8c08_256x240 1.png +0 -0
  20. {css → assets/css}/images/ui-icons_ef8c08_256x240.png +0 -0
  21. {css → assets/css}/images/ui-icons_f5e175_256x240.png +0 -0
  22. {css → assets/css}/images/ui-icons_f7a50d_256x240.png +0 -0
  23. {css → assets/css}/images/ui-icons_fcd113_256x240.png +0 -0
  24. {css → assets/css}/jquery-ui.css +0 -0
  25. assets/css/loftloader-settings.css +382 -0
  26. assets/css/loftloader-settings.min.css +12 -0
  27. assets/css/loftloader.css +536 -0
  28. assets/css/loftloader.min.css +12 -0
  29. assets/img/animation-options.png +0 -0
  30. {img → assets/img}/loftloader-logo.png +0 -0
  31. assets/img/pro-ad.jpg +0 -0
  32. assets/js/customize.js +171 -0
  33. assets/js/customize.min.js +6 -0
  34. {js/front → assets/js}/loftloader.js +0 -0
  35. assets/js/loftloader.min.js +1 -0
  36. assets/js/preview.js +36 -0
  37. assets/js/preview.min.js +6 -0
  38. assets/scss/_loftloader-animation.scss +311 -0
  39. assets/scss/_loftloader-mixins.scss +70 -0
  40. assets/scss/loftloader-settings.scss +541 -0
  41. assets/scss/loftloader.scss +414 -0
  42. configs/loftloader-config.php +0 -341
  43. css/loftloader-animation.css +0 -804
  44. css/settings/loftloader-media.css +0 -23
  45. css/settings/loftloader-settings.css +0 -564
  46. front/class-loftloader-front.php +0 -98
  47. img/pro-ad.jpg +0 -0
  48. inc/class-loftloader-any-page.php +89 -0
  49. inc/class-loftloader-customize.php +302 -0
  50. inc/class-loftloader-front.php +155 -0
  51. inc/class-loftloader-upgrade.php +59 -0
  52. inc/configs/customize-any-page.php +47 -0
  53. inc/configs/customize-background.php +67 -0
  54. inc/configs/customize-loader.php +88 -0
  55. inc/configs/customize-main.php +31 -0
  56. inc/configs/customize-promo.php +29 -0
  57. inc/configs/customize-range.php +34 -0
  58. inc/configs/default-settings.php +24 -0
  59. js/settings/loftloader-settings.js +0 -222
  60. languages/loftloader.pot +104 -73
  61. loftloader.php +89 -43
  62. readme.txt +35 -23
  63. settings/class-loftloader-settings.php +0 -162
  64. settings/form/class-loftloader-checkbox.php +0 -41
  65. settings/form/class-loftloader-form-base.php +0 -106
  66. settings/form/class-loftloader-preview.php +0 -210
{css → assets/css}/images/ui-bg_flat_55_999999_40x100.png RENAMED
File without changes
{css → assets/css}/images/ui-bg_flat_75_aaaaaa_40x100.png RENAMED
File without changes
{css → assets/css}/images/ui-bg_glass_100_f6f6f6_1x400.png RENAMED
File without changes
{css → assets/css}/images/ui-bg_glass_100_fdf5ce_1x400.png RENAMED
File without changes
{css → assets/css}/images/ui-bg_glass_45_0078ae_1x400.png RENAMED
File without changes
{css → assets/css}/images/ui-bg_glass_55_f8da4e_1x400.png RENAMED
File without changes
assets/css/images/ui-bg_glass_65_ffffff_1x400.png ADDED
Binary file
{css → assets/css}/images/ui-bg_glass_75_79c9ec_1x400.png RENAMED
File without changes
{css → assets/css}/images/ui-bg_gloss-wave_45_e14f1c_500x100.png RENAMED
File without changes
{css → assets/css}/images/ui-bg_gloss-wave_50_6eac2c_500x100.png RENAMED
File without changes
{css → assets/css}/images/ui-bg_gloss-wave_75_2191c0_500x100.png RENAMED
File without changes
assets/css/images/ui-bg_highlight-soft_100_eeeeee_1x100.png ADDED
Binary file
{css → assets/css}/images/ui-bg_highlight-soft_75_ffe45c_1x100.png RENAMED
File without changes
{css → assets/css}/images/ui-bg_inset-hard_100_fcfdfd_1x100.png RENAMED
File without changes
{css → assets/css}/images/ui-icons_0078ae_256x240.png RENAMED
File without changes
{css → assets/css}/images/ui-icons_056b93_256x240.png RENAMED
File without changes
{css → assets/css}/images/ui-icons_acacac_256x240.png RENAMED
File without changes
{css → assets/css}/images/ui-icons_e0fdff_256x240.png RENAMED
File without changes
{css → assets/css}/images/ui-icons_ef8c08_256x240 1.png RENAMED
File without changes
{css → assets/css}/images/ui-icons_ef8c08_256x240.png RENAMED
File without changes
{css → assets/css}/images/ui-icons_f5e175_256x240.png RENAMED
File without changes
{css → assets/css}/images/ui-icons_f7a50d_256x240.png RENAMED
File without changes
{css → assets/css}/images/ui-icons_fcd113_256x240.png RENAMED
File without changes
{css → assets/css}/jquery-ui.css RENAMED
File without changes
assets/css/loftloader-settings.css ADDED
@@ -0,0 +1,382 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * LoftLoader Lite Setting Panel Style
3
+ *
4
+ * Plugin Name: LoftLoader
5
+ * Plugin URI: http://www.loftocean.com/loftloader
6
+ * Author: Kaylolo Yinxi Chen @Loft.Ocean
7
+ * Author URI: http://www.loftocean.com
8
+ * Description: LoftLoader (Lite Version) is a plugin for adding beautiful and smooth preload animation to your WordPress website. With setting options, you can choose from preset animations, add custom logo image, choose colours to match your branding, and amuse and impress your visitors while loading site content.
9
+ * Version: 2.0
10
+ */
11
+ @import url(https://fonts.googleapis.com/css?family=Lato:400,600);
12
+ #customize-theme-controls.loftloader-controls-wrapper {
13
+ font-family: Lato; }
14
+ #customize-theme-controls.loftloader-controls-wrapper .customize-section-title h3 {
15
+ font-size: 18px;
16
+ font-weight: 600;
17
+ letter-spacing: 0.1em;
18
+ color: #111; }
19
+ #customize-theme-controls.loftloader-controls-wrapper .customize-section-title h3 span {
20
+ letter-spacing: 0; }
21
+ #customize-theme-controls.loftloader-controls-wrapper .customize-control-title {
22
+ margin-top: 0;
23
+ font-size: 12px;
24
+ letter-spacing: 0.1em;
25
+ font-weight: bold;
26
+ text-transform: none;
27
+ color: #111; }
28
+ #customize-theme-controls.loftloader-controls-wrapper .customize-control-title + span.description {
29
+ margin-top: -6px; }
30
+ #customize-theme-controls.loftloader-controls-wrapper span.description {
31
+ margin-bottom: 12px;
32
+ font-size: 11px;
33
+ font-style: normal;
34
+ color: #888; }
35
+ #customize-theme-controls.loftloader-controls-wrapper span.description strong {
36
+ color: #111;
37
+ font-weight: bold; }
38
+ #customize-theme-controls.loftloader-controls-wrapper select,
39
+ #customize-theme-controls.loftloader-controls-wrapper input[type="text"],
40
+ #customize-theme-controls.loftloader-controls-wrapper input[type="number"],
41
+ #customize-theme-controls.loftloader-controls-wrapper button.button.remove-button {
42
+ background: #FFF;
43
+ font-size: 12px;
44
+ letter-spacing: 0.1em;
45
+ font-weight: bold;
46
+ color: #111;
47
+ border-color: #41C7D3;
48
+ box-shadow: none; }
49
+ #customize-theme-controls.loftloader-controls-wrapper input[type="text"],
50
+ #customize-theme-controls.loftloader-controls-wrapper input[type="number"],
51
+ #customize-theme-controls.loftloader-controls-wrapper button.button.remove-button {
52
+ width: 80px;
53
+ text-align: center;
54
+ border-radius: 4px; }
55
+ #customize-theme-controls.loftloader-controls-wrapper button.button.remove-button:hover {
56
+ opacity: 0.75; }
57
+ #customize-theme-controls.loftloader-controls-wrapper input[type="checkbox"] {
58
+ position: relative;
59
+ float: right;
60
+ width: 33px;
61
+ height: 33px;
62
+ border-radius: 50%;
63
+ background: none;
64
+ border: 2px solid #41C7D3;
65
+ box-shadow: none;
66
+ font-size: 0; }
67
+ #customize-theme-controls.loftloader-controls-wrapper input[type="checkbox"]:checked:before {
68
+ position: absolute;
69
+ top: 50%;
70
+ left: 50%;
71
+ -webkit-transform: translate(-50%, -50%);
72
+ -ms-transform: translate(-50%, -50%);
73
+ transform: translate(-50%, -50%);
74
+ margin: 0 0 0 -3px;
75
+ color: #41C7D3; }
76
+ @media screen and (max-width: 782px) {
77
+ #customize-theme-controls.loftloader-controls-wrapper input[type="checkbox"]:checked:before {
78
+ margin: 0 0 0 -8px; } }
79
+ #customize-theme-controls.loftloader-controls-wrapper input[type="checkbox"]:hover {
80
+ opacity: 0.75; }
81
+ #customize-theme-controls.loftloader-controls-wrapper .loftloader-radiobtn {
82
+ display: none;
83
+ width: inherit;
84
+ height: inherit;
85
+ opacity: 0;
86
+ margin: 0; }
87
+ #customize-theme-controls.loftloader-controls-wrapper .loftloader-radiobtn + span {
88
+ position: absolute;
89
+ top: 0;
90
+ left: 0;
91
+ display: block;
92
+ width: inherit;
93
+ height: inherit;
94
+ border: 2px solid #DDD;
95
+ box-sizing: border-box; }
96
+ #customize-theme-controls.loftloader-controls-wrapper .loftloader-radiobtn:checked + span {
97
+ border-color: #41C7D3; }
98
+ #customize-theme-controls.loftloader-controls-wrapper .customize-control-btn label {
99
+ position: relative;
100
+ display: inline-block;
101
+ margin-left: 0;
102
+ padding: 0; }
103
+ #customize-theme-controls.loftloader-controls-wrapper .customize-control-btn span.customize-control-title {
104
+ display: inline; }
105
+ #customize-theme-controls.loftloader-controls-wrapper .customize-control-btn span.customize-control-title + div {
106
+ float: right; }
107
+ #customize-theme-controls.loftloader-controls-wrapper .accordion-section-content {
108
+ padding: 0;
109
+ background: #FFF; }
110
+ #customize-theme-controls.loftloader-controls-wrapper .accordion-section-content:before {
111
+ position: absolute;
112
+ top: 0;
113
+ left: 0;
114
+ z-index: -1;
115
+ display: block;
116
+ width: 100%;
117
+ height: 100%;
118
+ background: #FFF;
119
+ content: ""; }
120
+ #customize-theme-controls.loftloader-controls-wrapper .accordion-section-content li {
121
+ padding: 15px 12px;
122
+ margin-bottom: 0;
123
+ border-bottom: 1px solid #EEE;
124
+ box-sizing: border-box; }
125
+ #customize-theme-controls.loftloader-controls-wrapper .accordion-section-content li.customize-section-description-container {
126
+ padding: 12px 12px 0;
127
+ border-bottom: none; }
128
+ #customize-theme-controls.loftloader-controls-wrapper .accordion-section-content li:last-of-type {
129
+ border-bottom: none; }
130
+ #customize-theme-controls.loftloader-controls-wrapper .wp-picker-container {
131
+ overflow: visible;
132
+ width: auto; }
133
+ #customize-theme-controls.loftloader-controls-wrapper .wp-picker-container .wp-color-result {
134
+ width: 24px;
135
+ height: 24px;
136
+ padding: 0;
137
+ margin-top: 2px;
138
+ border: 1px solid rgba(0, 0, 0, 0.1);
139
+ border-radius: 50%;
140
+ box-shadow: none !important;
141
+ line-height: 28px; }
142
+ #customize-theme-controls.loftloader-controls-wrapper .wp-picker-container .wp-color-result:after {
143
+ right: auto;
144
+ left: 24px;
145
+ width: 80px;
146
+ padding: 0 6px;
147
+ background: transparent;
148
+ border: none;
149
+ color: #555;
150
+ font-size: 11px;
151
+ text-align: left;
152
+ line-height: 24px; }
153
+ #customize-theme-controls.loftloader-controls-wrapper .wp-picker-container .wp-picker-open + .wp-picker-input-wrap {
154
+ float: right;
155
+ margin-top: -2px;
156
+ width: auto; }
157
+ #customize-theme-controls.loftloader-controls-wrapper .wp-picker-container input[type="text"].wp-color-picker {
158
+ display: inline-block;
159
+ padding: 0 5px;
160
+ margin-top: 0;
161
+ width: 80px !important;
162
+ border: 1px solid #41C7D3;
163
+ vertical-align: top;
164
+ font-family: Lato;
165
+ line-height: 26px; }
166
+ #customize-theme-controls.loftloader-controls-wrapper .wp-picker-container .button.wp-picker-default {
167
+ display: none; }
168
+ #customize-theme-controls.loftloader-controls-wrapper .loader-ui-slider {
169
+ height: 16px;
170
+ margin-top: 12px;
171
+ background: none;
172
+ border-radius: 0;
173
+ border: none; }
174
+ #customize-theme-controls.loftloader-controls-wrapper .loader-ui-slider:before {
175
+ position: absolute;
176
+ top: 50%;
177
+ left: 0;
178
+ -webkit-transform: translateY(-50%);
179
+ -ms-transform: translateY(-50%);
180
+ transform: translateY(-50%);
181
+ width: 100%;
182
+ height: 2px;
183
+ background: #DDD;
184
+ content: ""; }
185
+ #customize-theme-controls.loftloader-controls-wrapper .loader-ui-slider .ui-slider-range {
186
+ top: 50%;
187
+ -webkit-transform: translateY(-50%);
188
+ -ms-transform: translateY(-50%);
189
+ transform: translateY(-50%);
190
+ height: 2px;
191
+ background: #41C7D3; }
192
+ #customize-theme-controls.loftloader-controls-wrapper .loader-ui-slider .ui-slider-handle {
193
+ top: 50%;
194
+ -webkit-transform: translateY(-50%);
195
+ -ms-transform: translateY(-50%);
196
+ transform: translateY(-50%);
197
+ width: 16px;
198
+ height: 16px;
199
+ background: #41C7D3;
200
+ border: none;
201
+ border-radius: 50%; }
202
+ #customize-theme-controls.loftloader-controls-wrapper.loftloader-settings-disabled li#accordion-section-loftloader_switch ~ li {
203
+ pointer-events: none;
204
+ opacity: 0.5; }
205
+ #customize-theme-controls.loftloader-controls-wrapper li.customize-control.customize-control-image .thumbnail.thumbnail-image {
206
+ background-color: #EEE; }
207
+ #customize-theme-controls.loftloader-controls-wrapper li#accordion-section-loftloader_switch {
208
+ margin-bottom: 10px; }
209
+ #customize-theme-controls.loftloader-controls-wrapper li#accordion-section-loftloader_switch .accordion-section-title {
210
+ padding: 20px 10px 22px 14px; }
211
+ #customize-theme-controls.loftloader-controls-wrapper li#accordion-section-loftloader_switch .accordion-section-title:after {
212
+ display: none; }
213
+ #customize-theme-controls.loftloader-controls-wrapper li.customize-control.customize-control-slider span.customize-control-title {
214
+ display: inline; }
215
+ #customize-theme-controls.loftloader-controls-wrapper li.customize-control.customize-control-slider span.customize-control-title + span {
216
+ float: right;
217
+ padding-right: 5px;
218
+ font-size: 12px;
219
+ letter-spacing: 0.1em;
220
+ font-weight: bold;
221
+ color: #111; }
222
+ #customize-theme-controls.loftloader-controls-wrapper li.customize-control.customize-control-slider span.customize-control-title + span input {
223
+ width: 60px;
224
+ padding-right: 0;
225
+ background: none;
226
+ border: none;
227
+ box-shadow: none;
228
+ font-size: 12px;
229
+ letter-spacing: 0.1em;
230
+ font-weight: bold;
231
+ color: #111;
232
+ text-align: right; }
233
+ #customize-theme-controls.loftloader-controls-wrapper li.customize-control.customize-control-check span.customize-control-title {
234
+ display: inline; }
235
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type .customize-more-toggle {
236
+ position: relative;
237
+ float: right;
238
+ -webkit-transform: rotate(135deg);
239
+ -ms-transform: rotate(135deg);
240
+ transform: rotate(135deg);
241
+ z-index: 9;
242
+ width: 20px;
243
+ height: 20px;
244
+ margin-top: -20px;
245
+ cursor: pointer;
246
+ -webkit-box-shadow: none;
247
+ box-shadow: none;
248
+ -webkit-appearance: none;
249
+ background: #41C7D3;
250
+ border-radius: 50%;
251
+ border: none; }
252
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type .customize-more-toggle:before {
253
+ position: absolute;
254
+ top: 50%;
255
+ left: 50%;
256
+ -webkit-transform: translate(-70%, -30%);
257
+ -ms-transform: translate(-70%, -30%);
258
+ transform: translate(-70%, -30%);
259
+ display: block;
260
+ width: 6px;
261
+ height: 6px;
262
+ border: 1px solid #FFF;
263
+ border-left: none;
264
+ border-bottom: none;
265
+ transform-origin: 50% 50%;
266
+ content: ""; }
267
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type .customize-more-toggle:focus {
268
+ outline: none;
269
+ opacity: 0.5; }
270
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type .customize-more-toggle.expanded {
271
+ -webkit-transform: rotate(-45deg);
272
+ -ms-transform: rotate(-45deg);
273
+ transform: rotate(-45deg); }
274
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type .customize-more-toggle + span.description {
275
+ margin: 12px 0 0; }
276
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation {
277
+ margin-top: 12px; }
278
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label {
279
+ position: relative;
280
+ float: left;
281
+ width: 45px;
282
+ height: 45px;
283
+ margin: 0 -2px -2px 0;
284
+ padding: 0; }
285
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(1) .loftloader-radiobtn + span:after {
286
+ background-position: 0px -47px; }
287
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(2) .loftloader-radiobtn + span:after {
288
+ background-position: -45px -47px; }
289
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(3) .loftloader-radiobtn + span:after {
290
+ background-position: -90px -47px; }
291
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(4) .loftloader-radiobtn + span:after {
292
+ background-position: -135px -47px; }
293
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(5) .loftloader-radiobtn + span:after {
294
+ background-position: -180px -47px; }
295
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(6) .loftloader-radiobtn + span:after {
296
+ background-position: -225px -47px; }
297
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(7) .loftloader-radiobtn + span:after {
298
+ background-position: -270px -47px; }
299
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label .loftloader-radiobtn + span {
300
+ overflow: hidden; }
301
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label .loftloader-radiobtn + span:after {
302
+ position: absolute;
303
+ top: 0;
304
+ left: 0;
305
+ display: block;
306
+ width: inherit;
307
+ height: inherit;
308
+ background-image: url(../img/animation-options.png);
309
+ background-size: 270px;
310
+ opacity: 0.25;
311
+ content: ""; }
312
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label .loftloader-radiobtn:checked + span {
313
+ z-index: 99; }
314
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label .loftloader-radiobtn:checked + span:after {
315
+ opacity: 1; }
316
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation:after {
317
+ position: relative;
318
+ display: block;
319
+ clear: both;
320
+ content: ""; }
321
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button {
322
+ position: relative;
323
+ float: right;
324
+ -webkit-transform: rotate(-45deg);
325
+ -ms-transform: rotate(-45deg);
326
+ transform: rotate(-45deg);
327
+ width: 33px;
328
+ height: 33px;
329
+ border-radius: 50%;
330
+ background: none;
331
+ border: 2px solid #41C7D3;
332
+ box-shadow: none;
333
+ font-size: 0; }
334
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button:before, #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button:after {
335
+ position: absolute;
336
+ content: "";
337
+ display: block; }
338
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button:before {
339
+ top: 50%;
340
+ left: 50%;
341
+ -webkit-transform: translate(-22%, -76%);
342
+ -ms-transform: translate(-22%, -76%);
343
+ transform: translate(-22%, -76%);
344
+ width: 6px;
345
+ height: 6px;
346
+ border: 2px solid #41C7D3;
347
+ border-left: none;
348
+ border-bottom: none;
349
+ transform-origin: 50% 50%; }
350
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button:after {
351
+ top: 50%;
352
+ left: 50%;
353
+ -webkit-transform: translate(-50%, -50%) rotate(45deg);
354
+ -ms-transform: translate(-50%, -50%) rotate(45deg);
355
+ transform: translate(-50%, -50%) rotate(45deg);
356
+ width: 2px;
357
+ height: 16px;
358
+ background: #41C7D3; }
359
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button:hover {
360
+ opacity: 0.75; }
361
+ #customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg .current {
362
+ margin-top: 15px; }
363
+ #customize-theme-controls.loftloader-controls-wrapper li.customize-control-number label {
364
+ position: relative;
365
+ display: block; }
366
+ #customize-theme-controls.loftloader-controls-wrapper li.customize-control-number label > span:last-child {
367
+ float: right;
368
+ z-index: 9;
369
+ font-size: 12px;
370
+ font-weight: bold;
371
+ letter-spacing: 0.1em;
372
+ color: #111; }
373
+ #customize-theme-controls.loftloader-controls-wrapper li.customize-control-number label > span:last-child input[type="number"] {
374
+ margin-right: 5px; }
375
+ #customize-theme-controls.loftloader-controls-wrapper li.customize-control-number span.customize-control-title {
376
+ display: inline; }
377
+
378
+ .wp-full-overlay > .customize-controls-close, .wp-full-overlay > .et-core-modal-overlay {
379
+ display: none;
380
+ visibility: hidden; }
381
+
382
+ /*# sourceMappingURL=loftloader-settings.css.map */
assets/css/loftloader-settings.min.css ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * LoftLoader Lite Setting Panel Style
3
+ *
4
+ * Plugin Name: LoftLoader
5
+ * Plugin URI: http://www.loftocean.com/loftloader
6
+ * Author: Kaylolo Yinxi Chen @Loft.Ocean
7
+ * Author URI: http://www.loftocean.com
8
+ * Description: LoftLoader (Lite Version) is a plugin for adding beautiful and smooth preload animation to your WordPress website. With setting options, you can choose from preset animations, add custom logo image, choose colours to match your branding, and amuse and impress your visitors while loading site content.
9
+ * Version: 2.0
10
+ */
11
+
12
+ @import url(https://fonts.googleapis.com/css?family=Lato:400,600);#customize-theme-controls.loftloader-controls-wrapper button.button.remove-button:hover,#customize-theme-controls.loftloader-controls-wrapper input[type=checkbox]:hover{opacity:.75}#customize-theme-controls.loftloader-controls-wrapper{font-family:Lato}#customize-theme-controls.loftloader-controls-wrapper .customize-section-title h3{font-size:18px;font-weight:600;letter-spacing:.1em;color:#111}#customize-theme-controls.loftloader-controls-wrapper .customize-section-title h3 span{letter-spacing:0}#customize-theme-controls.loftloader-controls-wrapper .customize-control-title{margin-top:0;font-size:12px;letter-spacing:.1em;font-weight:700;text-transform:none;color:#111}#customize-theme-controls.loftloader-controls-wrapper .customize-control-title+span.description{margin-top:-6px}#customize-theme-controls.loftloader-controls-wrapper span.description{margin-bottom:12px;font-size:11px;font-style:normal;color:#888}#customize-theme-controls.loftloader-controls-wrapper span.description strong{color:#111;font-weight:700}#customize-theme-controls.loftloader-controls-wrapper button.button.remove-button,#customize-theme-controls.loftloader-controls-wrapper input[type=text],#customize-theme-controls.loftloader-controls-wrapper input[type=number],#customize-theme-controls.loftloader-controls-wrapper select{background:#FFF;font-size:12px;letter-spacing:.1em;font-weight:700;color:#111;border-color:#41C7D3;box-shadow:none}#customize-theme-controls.loftloader-controls-wrapper button.button.remove-button,#customize-theme-controls.loftloader-controls-wrapper input[type=text],#customize-theme-controls.loftloader-controls-wrapper input[type=number]{width:80px;text-align:center;border-radius:4px}#customize-theme-controls.loftloader-controls-wrapper input[type=checkbox]{position:relative;float:right;width:33px;height:33px;border-radius:50%;background:0 0;border:2px solid #41C7D3;box-shadow:none;font-size:0}#customize-theme-controls.loftloader-controls-wrapper input[type=checkbox]:checked:before{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin:0 0 0 -3px;color:#41C7D3}@media screen and (max-width:782px){#customize-theme-controls.loftloader-controls-wrapper input[type=checkbox]:checked:before{margin:0 0 0 -8px}}#customize-theme-controls.loftloader-controls-wrapper .loftloader-radiobtn{display:none;width:inherit;height:inherit;opacity:0;margin:0}#customize-theme-controls.loftloader-controls-wrapper .loftloader-radiobtn+span{position:absolute;top:0;left:0;display:block;width:inherit;height:inherit;border:2px solid #DDD;box-sizing:border-box}#customize-theme-controls.loftloader-controls-wrapper .loftloader-radiobtn:checked+span{border-color:#41C7D3}#customize-theme-controls.loftloader-controls-wrapper .customize-control-btn label{position:relative;display:inline-block;margin-left:0;padding:0}#customize-theme-controls.loftloader-controls-wrapper .customize-control-btn span.customize-control-title{display:inline}#customize-theme-controls.loftloader-controls-wrapper .customize-control-btn span.customize-control-title+div{float:right}#customize-theme-controls.loftloader-controls-wrapper .accordion-section-content{padding:0;background:#FFF}#customize-theme-controls.loftloader-controls-wrapper .accordion-section-content:before{position:absolute;top:0;left:0;z-index:-1;display:block;width:100%;height:100%;background:#FFF;content:""}#customize-theme-controls.loftloader-controls-wrapper .accordion-section-content li{padding:15px 12px;margin-bottom:0;border-bottom:1px solid #EEE;box-sizing:border-box}#customize-theme-controls.loftloader-controls-wrapper .accordion-section-content li.customize-section-description-container{padding:12px 12px 0;border-bottom:none}#customize-theme-controls.loftloader-controls-wrapper .accordion-section-content li:last-of-type{border-bottom:none}#customize-theme-controls.loftloader-controls-wrapper .wp-picker-container{overflow:visible;width:auto}#customize-theme-controls.loftloader-controls-wrapper .wp-picker-container .wp-color-result{width:24px;height:24px;padding:0;margin-top:2px;border:1px solid rgba(0,0,0,.1);border-radius:50%;box-shadow:none!important;line-height:28px}#customize-theme-controls.loftloader-controls-wrapper .wp-picker-container .wp-color-result:after{right:auto;left:24px;width:80px;padding:0 6px;background:0 0;border:none;color:#555;font-size:11px;text-align:left;line-height:24px}#customize-theme-controls.loftloader-controls-wrapper .wp-picker-container .wp-picker-open+.wp-picker-input-wrap{float:right;margin-top:-2px;width:auto}#customize-theme-controls.loftloader-controls-wrapper .wp-picker-container input[type=text].wp-color-picker{display:inline-block;padding:0 5px;margin-top:0;width:80px!important;border:1px solid #41C7D3;vertical-align:top;font-family:Lato;line-height:26px}#customize-theme-controls.loftloader-controls-wrapper .wp-picker-container .button.wp-picker-default,#customize-theme-controls.loftloader-controls-wrapper li#accordion-section-loftloader_switch .accordion-section-title:after{display:none}#customize-theme-controls.loftloader-controls-wrapper .loader-ui-slider{height:16px;margin-top:12px;background:0 0;border-radius:0;border:none}#customize-theme-controls.loftloader-controls-wrapper .loader-ui-slider:before{position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:100%;height:2px;background:#DDD;content:""}#customize-theme-controls.loftloader-controls-wrapper .loader-ui-slider .ui-slider-range{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);height:2px;background:#41C7D3}#customize-theme-controls.loftloader-controls-wrapper .loader-ui-slider .ui-slider-handle{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:16px;height:16px;background:#41C7D3;border:none;border-radius:50%}#customize-theme-controls.loftloader-controls-wrapper.loftloader-settings-disabled li#accordion-section-loftloader_switch~li{pointer-events:none;opacity:.5}#customize-theme-controls.loftloader-controls-wrapper li.customize-control.customize-control-image .thumbnail.thumbnail-image{background-color:#EEE}#customize-theme-controls.loftloader-controls-wrapper li#accordion-section-loftloader_switch{margin-bottom:10px}#customize-theme-controls.loftloader-controls-wrapper li#accordion-section-loftloader_switch .accordion-section-title{padding:20px 10px 22px 14px}#customize-theme-controls.loftloader-controls-wrapper li.customize-control.customize-control-check span.customize-control-title,#customize-theme-controls.loftloader-controls-wrapper li.customize-control.customize-control-slider span.customize-control-title{display:inline}#customize-theme-controls.loftloader-controls-wrapper li.customize-control.customize-control-slider span.customize-control-title+span{float:right;padding-right:5px;font-size:12px;letter-spacing:.1em;font-weight:700;color:#111}#customize-theme-controls.loftloader-controls-wrapper li.customize-control.customize-control-slider span.customize-control-title+span input{width:60px;padding-right:0;background:0 0;border:none;box-shadow:none;font-size:12px;letter-spacing:.1em;font-weight:700;color:#111;text-align:right}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type .customize-more-toggle{position:relative;float:right;-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);z-index:9;width:20px;height:20px;margin-top:-20px;cursor:pointer;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;background:#41C7D3;border-radius:50%;border:none}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type .customize-more-toggle:before{position:absolute;top:50%;left:50%;-webkit-transform:translate(-70%,-30%);-ms-transform:translate(-70%,-30%);transform:translate(-70%,-30%);display:block;width:6px;height:6px;border:1px solid #FFF;border-left:none;border-bottom:none;transform-origin:50% 50%;content:""}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type .customize-more-toggle:focus{outline:0;opacity:.5}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type .customize-more-toggle.expanded{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type .customize-more-toggle+span.description{margin:12px 0 0}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation{margin-top:12px}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label{position:relative;float:left;width:45px;height:45px;margin:0 -2px -2px 0;padding:0}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(1) .loftloader-radiobtn+span:after{background-position:0 -47px}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(2) .loftloader-radiobtn+span:after{background-position:-45px -47px}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(3) .loftloader-radiobtn+span:after{background-position:-90px -47px}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(4) .loftloader-radiobtn+span:after{background-position:-135px -47px}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(5) .loftloader-radiobtn+span:after{background-position:-180px -47px}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(6) .loftloader-radiobtn+span:after{background-position:-225px -47px}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label:nth-child(7) .loftloader-radiobtn+span:after{background-position:-270px -47px}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label .loftloader-radiobtn+span{overflow:hidden}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label .loftloader-radiobtn+span:after{position:absolute;top:0;left:0;display:block;width:inherit;height:inherit;background-image:url(../img/animation-options.png);background-size:270px;opacity:.25;content:""}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label .loftloader-radiobtn:checked+span{z-index:99}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation label .loftloader-radiobtn:checked+span:after{opacity:1}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_loader_type #loftloader_option_animation:after{position:relative;display:block;clear:both;content:""}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button{position:relative;float:right;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);width:33px;height:33px;border-radius:50%;background:0 0;border:2px solid #41C7D3;box-shadow:none;font-size:0}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button:after,#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button:before{position:absolute;content:"";display:block}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button:before{top:50%;left:50%;-webkit-transform:translate(-22%,-76%);-ms-transform:translate(-22%,-76%);transform:translate(-22%,-76%);width:6px;height:6px;border:2px solid #41C7D3;border-left:none;border-bottom:none;transform-origin:50% 50%}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button:after{top:50%;left:50%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:2px;height:16px;background:#41C7D3}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg button.upload-button:hover{opacity:.75}#customize-theme-controls.loftloader-controls-wrapper li#customize-control-loftloader_customimg .current{margin-top:15px}#customize-theme-controls.loftloader-controls-wrapper li.customize-control-number label{position:relative;display:block}#customize-theme-controls.loftloader-controls-wrapper li.customize-control-number label>span:last-child{float:right;z-index:9;font-size:12px;font-weight:700;letter-spacing:.1em;color:#111}#customize-theme-controls.loftloader-controls-wrapper li.customize-control-number label>span:last-child input[type=number]{margin-right:5px}#customize-theme-controls.loftloader-controls-wrapper li.customize-control-number span.customize-control-title{display:inline}.wp-full-overlay>.customize-controls-close,.wp-full-overlay>.et-core-modal-overlay{display:none;visibility:hidden}
assets/css/loftloader.css ADDED
@@ -0,0 +1,536 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * LoftLoader Lite Frontend Style
3
+ *
4
+ * Plugin Name: LoftLoader
5
+ * Plugin URI: http://www.loftocean.com/loftloader
6
+ * Author: Kaylolo Yinxi Chen @Loft.Ocean
7
+ * Author URI: http://www.loftocean.com
8
+ * Description: LoftLoader (Lite Version) is a plugin for adding beautiful and smooth preload animation to your WordPress website. With setting options, you can choose from preset animations, add custom logo image, choose colours to match your branding, and amuse and impress your visitors while loading site content.
9
+ * Version: 2.0
10
+ */
11
+ @-webkit-keyframes spinReturn {
12
+ 0% {
13
+ -webkit-transform: rotate(0deg); }
14
+ 25% {
15
+ -webkit-transform: rotate(225deg); }
16
+ 50% {
17
+ -webkit-transform: rotate(180deg); }
18
+ 75% {
19
+ -webkit-transform: rotate(405deg); }
20
+ 100% {
21
+ -webkit-transform: rotate(360deg); } }
22
+ @keyframes spinReturn {
23
+ 0% {
24
+ transform: rotate(0deg); }
25
+ 25% {
26
+ transform: rotate(225deg); }
27
+ 50% {
28
+ transform: rotate(180deg); }
29
+ 75% {
30
+ transform: rotate(405deg); }
31
+ 100% {
32
+ transform: rotate(360deg); } }
33
+ @-webkit-keyframes lightUp {
34
+ 0% {
35
+ opacity: 0.2; }
36
+ 40% {
37
+ opacity: 1; }
38
+ 60% {
39
+ opacity: 0.2; }
40
+ 100% {
41
+ opacity: 0.2; } }
42
+ @keyframes lightUp {
43
+ 0% {
44
+ opacity: 0.2; }
45
+ 40% {
46
+ opacity: 1; }
47
+ 60% {
48
+ opacity: 0.2; }
49
+ 100% {
50
+ opacity: 0.2; } }
51
+ @-webkit-keyframes wave {
52
+ 0% {
53
+ -webkit-transform: scaleY(1); }
54
+ 40% {
55
+ -webkit-transform: scaleY(0.1); }
56
+ 80% {
57
+ -webkit-transform: scaleY(1); }
58
+ 100% {
59
+ -webkit-transform: scaleY(1); } }
60
+ @keyframes wave {
61
+ 0% {
62
+ transform: scaleY(1); }
63
+ 40% {
64
+ transform: scaleY(0.1); }
65
+ 80% {
66
+ transform: scaleY(1); }
67
+ 100% {
68
+ transform: scaleY(1); } }
69
+ @-webkit-keyframes drawframeTop {
70
+ 0% {
71
+ -webkit-transform: scaleX(1);
72
+ transform-origin: 100% 0%; }
73
+ 12.5% {
74
+ -webkit-transform: scaleX(0);
75
+ transform-origin: 100% 0%; }
76
+ 50% {
77
+ -webkit-transform: scaleX(0);
78
+ transform-origin: 0% 0%; }
79
+ 62.5% {
80
+ -webkit-transform: scaleX(1);
81
+ transform-origin: 0% 0%; }
82
+ 100% {
83
+ -webkit-transform: scaleX(1);
84
+ transform-origin: 100% 0%; } }
85
+ @keyframes drawframeTop {
86
+ 0% {
87
+ transform: scaleX(1);
88
+ transform-origin: 100% 0%; }
89
+ 12.5% {
90
+ transform: scaleX(0);
91
+ transform-origin: 100% 0%; }
92
+ 50% {
93
+ transform: scaleX(0);
94
+ transform-origin: 0% 0%; }
95
+ 62.5% {
96
+ transform: scaleX(1);
97
+ transform-origin: 0% 0%; }
98
+ 100% {
99
+ transform: scaleX(1);
100
+ transform-origin: 100% 0%; } }
101
+ @-webkit-keyframes drawframeBottom {
102
+ 0% {
103
+ -webkit-transform: scaleX(1);
104
+ transform-origin: 0% 0%; }
105
+ 12.5% {
106
+ -webkit-transform: scaleX(0);
107
+ transform-origin: 0% 0%; }
108
+ 50% {
109
+ -webkit-transform: scaleX(0);
110
+ transform-origin: 100% 0%; }
111
+ 62.5% {
112
+ -webkit-transform: scaleX(1);
113
+ transform-origin: 100% 0%; }
114
+ 100% {
115
+ -webkit-transform: scaleX(1);
116
+ transform-origin: 0% 0%; } }
117
+ @keyframes drawframeBottom {
118
+ 0% {
119
+ transform: scaleX(1);
120
+ transform-origin: 0% 0%; }
121
+ 12.5% {
122
+ transform: scaleX(0);
123
+ transform-origin: 0% 0%; }
124
+ 50% {
125
+ transform: scaleX(0);
126
+ transform-origin: 100% 0%; }
127
+ 62.5% {
128
+ transform: scaleX(1);
129
+ transform-origin: 100% 0%; }
130
+ 100% {
131
+ transform: scaleX(1);
132
+ transform-origin: 0% 0%; } }
133
+ @-webkit-keyframes drawframeRight {
134
+ 0% {
135
+ -webkit-transform: scaleY(1);
136
+ transform-origin: 0% 100%; }
137
+ 12.5% {
138
+ -webkit-transform: scaleY(0);
139
+ transform-origin: 0% 100%; }
140
+ 50% {
141
+ -webkit-transform: scaleY(0);
142
+ transform-origin: 0% 0%; }
143
+ 62.5% {
144
+ -webkit-transform: scaleY(1);
145
+ transform-origin: 0% 0%; }
146
+ 100% {
147
+ -webkit-transform: scaleY(1);
148
+ transform-origin: 0% 100%; } }
149
+ @keyframes drawframeRight {
150
+ 0% {
151
+ transform: scaleY(1);
152
+ transform-origin: 0% 100%; }
153
+ 12.5% {
154
+ transform: scaleY(0);
155
+ transform-origin: 0% 100%; }
156
+ 50% {
157
+ transform: scaleY(0);
158
+ transform-origin: 0% 0%; }
159
+ 62.5% {
160
+ transform: scaleY(1);
161
+ transform-origin: 0% 0%; }
162
+ 100% {
163
+ transform: scaleY(1);
164
+ transform-origin: 0% 100%; } }
165
+ @-webkit-keyframes drawframeLeft {
166
+ 0% {
167
+ -webkit-transform: scaleY(1);
168
+ transform-origin: 0% 0%; }
169
+ 12.5% {
170
+ -webkit-transform: scaleY(0);
171
+ transform-origin: 0% 0%; }
172
+ 50% {
173
+ -webkit-transform: scaleY(0);
174
+ transform-origin: 0% 100%; }
175
+ 62.5% {
176
+ -webkit-transform: scaleY(1);
177
+ transform-origin: 0% 100%; }
178
+ 100% {
179
+ -webkit-transform: scaleY(1);
180
+ transform-origin: 0% 0%; } }
181
+ @keyframes drawframeLeft {
182
+ 0% {
183
+ transform: scaleY(1);
184
+ transform-origin: 0% 0%; }
185
+ 12.5% {
186
+ transform: scaleY(0);
187
+ transform-origin: 0% 0%; }
188
+ 50% {
189
+ transform: scaleY(0);
190
+ transform-origin: 0% 100%; }
191
+ 62.5% {
192
+ transform: scaleY(1);
193
+ transform-origin: 0% 100%; }
194
+ 100% {
195
+ transform: scaleY(1);
196
+ transform-origin: 0% 0%; } }
197
+ @-webkit-keyframes imgLoading {
198
+ 0% {
199
+ height: 0%;
200
+ opacity: 1; }
201
+ 95% {
202
+ height: 100%;
203
+ opacity: 1; }
204
+ 100% {
205
+ height: 100%;
206
+ opacity: 0; } }
207
+ @keyframes imgLoading {
208
+ 0% {
209
+ height: 0%;
210
+ opacity: 1; }
211
+ 95% {
212
+ height: 100%;
213
+ opacity: 1; }
214
+ 100% {
215
+ height: 100%;
216
+ opacity: 0; } }
217
+ html,
218
+ body {
219
+ opacity: 1 !important; }
220
+
221
+ #loftloader-wrapper {
222
+ position: fixed;
223
+ top: 0;
224
+ left: 0;
225
+ -webkit-transform: translateX(0);
226
+ -ms-transform: translateX(0);
227
+ transform: translateX(0);
228
+ z-index: 999999;
229
+ width: 100%;
230
+ height: 100%;
231
+ background: transparent !important; }
232
+ .loaded #loftloader-wrapper {
233
+ -webkit-transform: translateX(-100%);
234
+ -ms-transform: translateX(-100%);
235
+ transform: translateX(-100%);
236
+ visibility: hidden;
237
+ pointer-events: none;
238
+ overflow: hidden;
239
+ transition: all;
240
+ transition-delay: 1s; }
241
+ .loaded #loftloader-wrapper.slide-vertical {
242
+ -webkit-transform: translate(-100%, 0);
243
+ -ms-transform: translate(-100%, 0);
244
+ transform: translate(-100%, 0); }
245
+ .loaded #loftloader-wrapper #loader {
246
+ opacity: 0;
247
+ transition: all 0.3s ease-out; }
248
+ #loftloader-wrapper .loader-inner {
249
+ position: absolute;
250
+ top: 50%;
251
+ left: 50%;
252
+ -webkit-transform: translate(-50%, -50%);
253
+ -ms-transform: translate(-50%, -50%);
254
+ transform: translate(-50%, -50%);
255
+ z-index: 1001;
256
+ text-align: center;
257
+ transition: all 0s;
258
+ font-size: 0; }
259
+ #loftloader-wrapper .loader-inner #loader {
260
+ position: relative;
261
+ z-index: 1002;
262
+ display: inline-block;
263
+ margin: 0 auto;
264
+ color: #248ACC; }
265
+ #loftloader-wrapper .loader-section {
266
+ position: fixed;
267
+ z-index: 999;
268
+ width: 50%;
269
+ height: 100%;
270
+ background: #000;
271
+ opacity: 0.95;
272
+ transition: all 0s;
273
+ will-change: transform; }
274
+ #loftloader-wrapper .loader-section.section-fade {
275
+ top: 0;
276
+ left: 0;
277
+ width: 100%;
278
+ will-change: opacity; }
279
+ .loaded #loftloader-wrapper .loader-section.section-fade {
280
+ opacity: 0 !important;
281
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
282
+ #loftloader-wrapper .loader-section.section-slide-up {
283
+ top: 0;
284
+ left: 0;
285
+ width: 100%; }
286
+ .loaded #loftloader-wrapper .loader-section.section-slide-up {
287
+ -webkit-transform: translateY(-100%);
288
+ -ms-transform: translateY(-100%);
289
+ transform: translateY(-100%);
290
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
291
+ #loftloader-wrapper .loader-section.section-left, #loftloader-wrapper .loader-section.section-right {
292
+ top: 0; }
293
+ #loftloader-wrapper .loader-section.section-left {
294
+ left: 0; }
295
+ .loaded #loftloader-wrapper .loader-section.section-left {
296
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
297
+ -webkit-transform: translateX(-100%);
298
+ -ms-transform: translateX(-100%);
299
+ transform: translateX(-100%); }
300
+ #loftloader-wrapper .loader-section.section-right {
301
+ right: 0; }
302
+ .loaded #loftloader-wrapper .loader-section.section-right {
303
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
304
+ -webkit-transform: translateX(100%);
305
+ -ms-transform: translateX(100%);
306
+ transform: translateX(100%); }
307
+ #loftloader-wrapper .loader-section.section-up, #loftloader-wrapper .loader-section.section-down {
308
+ left: 0;
309
+ width: 100%;
310
+ height: 50%; }
311
+ #loftloader-wrapper .loader-section.section-up {
312
+ top: 0; }
313
+ .loaded #loftloader-wrapper .loader-section.section-up {
314
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
315
+ -webkit-transform: translateY(-100%);
316
+ -ms-transform: translateY(-100%);
317
+ transform: translateY(-100%); }
318
+ #loftloader-wrapper .loader-section.section-down {
319
+ bottom: 0; }
320
+ .loaded #loftloader-wrapper .loader-section.section-down {
321
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
322
+ -webkit-transform: translateY(100%);
323
+ -ms-transform: translateY(100%);
324
+ transform: translateY(100%); }
325
+
326
+ /* ==========================================================================
327
+ Loading - Spinning Sun
328
+ ========================================================================== */
329
+ #loftloader-wrapper.pl-sun #loader {
330
+ width: 50px;
331
+ height: 50px; }
332
+ #loftloader-wrapper.pl-sun #loader span {
333
+ position: absolute;
334
+ top: 0;
335
+ left: 0;
336
+ display: block;
337
+ width: 50px;
338
+ height: 50px;
339
+ background: currentColor;
340
+ opacity: 0.9;
341
+ transform-origin: 50% 50%;
342
+ -webkit-animation: spinReturn 4s ease infinite;
343
+ animation: spinReturn 4s ease infinite; }
344
+ #loftloader-wrapper.pl-sun #loader span:before {
345
+ position: absolute;
346
+ top: 0;
347
+ left: 0;
348
+ display: block;
349
+ width: 100%;
350
+ height: 100%;
351
+ background: inherit;
352
+ opacity: 0.9;
353
+ content: "";
354
+ transform-origin: 50% 50%;
355
+ -webkit-transform: rotate(45deg);
356
+ -ms-transform: rotate(45deg);
357
+ transform: rotate(45deg); }
358
+
359
+ /* ==========================================================================
360
+ Loading - Luminous Circles
361
+ ========================================================================== */
362
+ #loftloader-wrapper.pl-circles #loader {
363
+ width: 100px;
364
+ height: 60px; }
365
+ #loftloader-wrapper.pl-circles #loader span, #loftloader-wrapper.pl-circles #loader:before, #loftloader-wrapper.pl-circles #loader:after {
366
+ position: absolute;
367
+ display: block;
368
+ width: 10px;
369
+ height: 10px;
370
+ border-radius: 50%;
371
+ opacity: 0.2;
372
+ background: currentColor; }
373
+ #loftloader-wrapper.pl-circles #loader span {
374
+ top: 50%;
375
+ left: 50%;
376
+ -webkit-transform: translate(-50%, -50%);
377
+ -ms-transform: translate(-50%, -50%);
378
+ transform: translate(-50%, -50%);
379
+ -webkit-animation: lightUp 1.5s linear infinite 0.5s;
380
+ animation: lightUp 1.5s linear infinite 0.5s; }
381
+ #loftloader-wrapper.pl-circles #loader:before, #loftloader-wrapper.pl-circles #loader:after {
382
+ content: "";
383
+ top: 50%;
384
+ -webkit-transform: translate(0, -50%);
385
+ -ms-transform: translate(0, -50%);
386
+ transform: translate(0, -50%); }
387
+ #loftloader-wrapper.pl-circles #loader:before {
388
+ left: 0;
389
+ -webkit-animation: lightUp 1.5s linear infinite;
390
+ animation: lightUp 1.5s linear infinite; }
391
+ #loftloader-wrapper.pl-circles #loader:after {
392
+ right: 0;
393
+ -webkit-animation: lightUp 1.5s linear infinite 1s;
394
+ animation: lightUp 1.5s linear infinite 1s; }
395
+
396
+ /* ==========================================================================
397
+ Loading - Wave
398
+ ========================================================================== */
399
+ #loftloader-wrapper.pl-wave #loader {
400
+ width: 60px;
401
+ height: 30px; }
402
+ #loftloader-wrapper.pl-wave #loader span, #loftloader-wrapper.pl-wave #loader:before, #loftloader-wrapper.pl-wave #loader:after {
403
+ position: relative;
404
+ display: inline-block;
405
+ width: 6px;
406
+ height: 100%;
407
+ background: currentColor; }
408
+ #loftloader-wrapper.pl-wave #loader span {
409
+ margin: 0 16px;
410
+ -webkit-animation: wave 0.9s linear infinite 0.3s;
411
+ animation: wave 0.9s linear infinite 0.3s; }
412
+ #loftloader-wrapper.pl-wave #loader:before, #loftloader-wrapper.pl-wave #loader:after {
413
+ content: ""; }
414
+ #loftloader-wrapper.pl-wave #loader:before {
415
+ -webkit-animation: wave 0.9s linear infinite;
416
+ animation: wave 0.9s linear infinite; }
417
+ #loftloader-wrapper.pl-wave #loader:after {
418
+ -webkit-animation: wave 0.9s linear infinite 0.6s;
419
+ animation: wave 0.9s linear infinite 0.6s; }
420
+
421
+ /* ==========================================================================
422
+ Loading - Spinning Square
423
+ ========================================================================== */
424
+ #loftloader-wrapper.pl-square #loader {
425
+ width: 50px;
426
+ height: 50px;
427
+ transform-origin: 50% 50%;
428
+ -webkit-animation: spinReturn 4s ease infinite;
429
+ animation: spinReturn 4s ease infinite; }
430
+ #loftloader-wrapper.pl-square #loader span {
431
+ position: absolute;
432
+ top: 0;
433
+ left: 0;
434
+ display: block;
435
+ width: 100%;
436
+ height: 100%;
437
+ border: 4px solid currentColor;
438
+ box-sizing: border-box;
439
+ transform-origin: 50% 50%;
440
+ -webkit-transform: rotate(45deg);
441
+ -ms-transform: rotate(45deg);
442
+ transform: rotate(45deg); }
443
+
444
+ /* ==========================================================================
445
+ Loading - Drawing Frame
446
+ ========================================================================== */
447
+ #loftloader-wrapper.pl-frame #loader {
448
+ width: 80px;
449
+ height: 80px;
450
+ max-width: 90vw; }
451
+ #loftloader-wrapper.pl-frame #loader:before, #loftloader-wrapper.pl-frame #loader:after {
452
+ position: absolute;
453
+ width: 100%;
454
+ height: 4px;
455
+ background: currentColor;
456
+ content: ""; }
457
+ #loftloader-wrapper.pl-frame #loader:before {
458
+ top: 0;
459
+ right: 0;
460
+ left: auto;
461
+ -webkit-animation: drawframeTop 4s linear infinite;
462
+ animation: drawframeTop 4s linear infinite; }
463
+ #loftloader-wrapper.pl-frame #loader:after {
464
+ right: auto;
465
+ bottom: 0;
466
+ left: 0;
467
+ -webkit-animation: drawframeBottom 4s linear infinite 1s;
468
+ animation: drawframeBottom 4s linear infinite 1s; }
469
+ #loftloader-wrapper.pl-frame #loader span {
470
+ position: absolute;
471
+ top: 0;
472
+ left: 0;
473
+ display: block;
474
+ width: 100%;
475
+ height: 100%; }
476
+ #loftloader-wrapper.pl-frame #loader span:before, #loftloader-wrapper.pl-frame #loader span:after {
477
+ position: absolute;
478
+ width: 4px;
479
+ height: 100%;
480
+ background: currentColor;
481
+ content: ""; }
482
+ #loftloader-wrapper.pl-frame #loader span:before {
483
+ top: auto;
484
+ right: 0;
485
+ bottom: 0;
486
+ -webkit-animation: drawframeRight 4s linear infinite 0.5s;
487
+ animation: drawframeRight 4s linear infinite 0.5s; }
488
+ #loftloader-wrapper.pl-frame #loader span:after {
489
+ top: 0;
490
+ bottom: auto;
491
+ left: 0;
492
+ -webkit-animation: drawframeLeft 4s linear infinite 1.5s;
493
+ animation: drawframeLeft 4s linear infinite 1.5s; }
494
+ #loftloader-wrapper.pl-frame #loader img {
495
+ position: absolute;
496
+ top: 50%;
497
+ left: 50%;
498
+ -webkit-transform: translate(-50%, -50%);
499
+ -ms-transform: translate(-50%, -50%);
500
+ transform: translate(-50%, -50%);
501
+ display: block;
502
+ max-width: 80%;
503
+ max-height: 80%; }
504
+
505
+ /* ==========================================================================
506
+ Loading - Loading Custom Image
507
+ ========================================================================== */
508
+ #loftloader-wrapper.pl-imgloading #loader {
509
+ width: auto;
510
+ height: auto;
511
+ max-width: 90vw; }
512
+ #loftloader-wrapper.pl-imgloading #loader img {
513
+ position: relative;
514
+ z-index: 1;
515
+ display: block;
516
+ width: 100%;
517
+ height: auto;
518
+ margin: 0 auto; }
519
+ #loftloader-wrapper.pl-imgloading #loader img {
520
+ opacity: 0.3; }
521
+ #loftloader-wrapper.pl-imgloading #loader span {
522
+ position: absolute;
523
+ bottom: 0;
524
+ left: 0;
525
+ z-index: 3;
526
+ display: block;
527
+ width: 100%;
528
+ height: 0%;
529
+ transition: 0s;
530
+ background-repeat: no-repeat;
531
+ background-size: cover;
532
+ background-position: center bottom;
533
+ -webkit-animation: imgLoading 6s linear infinite;
534
+ animation: imgLoading 6s linear infinite; }
535
+
536
+ /*# sourceMappingURL=loftloader.css.map */
assets/css/loftloader.min.css ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * LoftLoader Lite Frontend Style
3
+ *
4
+ * Plugin Name: LoftLoader
5
+ * Plugin URI: http://www.loftocean.com/loftloader
6
+ * Author: Kaylolo Yinxi Chen @Loft.Ocean
7
+ * Author URI: http://www.loftocean.com
8
+ * Description: LoftLoader (Lite Version) is a plugin for adding beautiful and smooth preload animation to your WordPress website. With setting options, you can choose from preset animations, add custom logo image, choose colours to match your branding, and amuse and impress your visitors while loading site content.
9
+ * Version: 2.0
10
+ */
11
+
12
+ @-webkit-keyframes spinReturn{0%{-webkit-transform:rotate(0)}25%{-webkit-transform:rotate(225deg)}50%{-webkit-transform:rotate(180deg)}75%{-webkit-transform:rotate(405deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spinReturn{0%{transform:rotate(0)}25%{transform:rotate(225deg)}50%{transform:rotate(180deg)}75%{transform:rotate(405deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes lightUp{0%,100%,60%{opacity:.2}40%{opacity:1}}@keyframes lightUp{0%,100%,60%{opacity:.2}40%{opacity:1}}@-webkit-keyframes wave{0%,100%,80%{-webkit-transform:scaleY(1)}40%{-webkit-transform:scaleY(.1)}}@keyframes wave{0%,100%,80%{transform:scaleY(1)}40%{transform:scaleY(.1)}}@-webkit-keyframes drawframeTop{0%{-webkit-transform:scaleX(1);transform-origin:100% 0}12.5%{-webkit-transform:scaleX(0);transform-origin:100% 0}50%{-webkit-transform:scaleX(0);transform-origin:0 0}62.5%{-webkit-transform:scaleX(1);transform-origin:0 0}100%{-webkit-transform:scaleX(1);transform-origin:100% 0}}@keyframes drawframeTop{0%{transform:scaleX(1);transform-origin:100% 0}12.5%{transform:scaleX(0);transform-origin:100% 0}50%{transform:scaleX(0);transform-origin:0 0}62.5%{transform:scaleX(1);transform-origin:0 0}100%{transform:scaleX(1);transform-origin:100% 0}}@-webkit-keyframes drawframeBottom{0%{-webkit-transform:scaleX(1);transform-origin:0 0}12.5%{-webkit-transform:scaleX(0);transform-origin:0 0}50%{-webkit-transform:scaleX(0);transform-origin:100% 0}62.5%{-webkit-transform:scaleX(1);transform-origin:100% 0}100%{-webkit-transform:scaleX(1);transform-origin:0 0}}@keyframes drawframeBottom{0%{transform:scaleX(1);transform-origin:0 0}12.5%{transform:scaleX(0);transform-origin:0 0}50%{transform:scaleX(0);transform-origin:100% 0}62.5%{transform:scaleX(1);transform-origin:100% 0}100%{transform:scaleX(1);transform-origin:0 0}}@-webkit-keyframes drawframeRight{0%{-webkit-transform:scaleY(1);transform-origin:0 100%}12.5%{-webkit-transform:scaleY(0);transform-origin:0 100%}50%{-webkit-transform:scaleY(0);transform-origin:0 0}62.5%{-webkit-transform:scaleY(1);transform-origin:0 0}100%{-webkit-transform:scaleY(1);transform-origin:0 100%}}@keyframes drawframeRight{0%{transform:scaleY(1);transform-origin:0 100%}12.5%{transform:scaleY(0);transform-origin:0 100%}50%{transform:scaleY(0);transform-origin:0 0}62.5%{transform:scaleY(1);transform-origin:0 0}100%{transform:scaleY(1);transform-origin:0 100%}}@-webkit-keyframes drawframeLeft{0%{-webkit-transform:scaleY(1);transform-origin:0 0}12.5%{-webkit-transform:scaleY(0);transform-origin:0 0}50%{-webkit-transform:scaleY(0);transform-origin:0 100%}62.5%{-webkit-transform:scaleY(1);transform-origin:0 100%}100%{-webkit-transform:scaleY(1);transform-origin:0 0}}@keyframes drawframeLeft{0%{transform:scaleY(1);transform-origin:0 0}12.5%{transform:scaleY(0);transform-origin:0 0}50%{transform:scaleY(0);transform-origin:0 100%}62.5%{transform:scaleY(1);transform-origin:0 100%}100%{transform:scaleY(1);transform-origin:0 0}}@-webkit-keyframes imgLoading{0%{height:0%;opacity:1}95%{height:100%;opacity:1}100%{height:100%;opacity:0}}@keyframes imgLoading{0%{height:0%;opacity:1}95%{height:100%;opacity:1}100%{height:100%;opacity:0}}body,html{opacity:1!important}#loftloader-wrapper{position:fixed;top:0;left:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);z-index:999999;width:100%;height:100%;background:0 0!important}.loaded #loftloader-wrapper{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);visibility:hidden;pointer-events:none;overflow:hidden;transition:all;transition-delay:1s}.loaded #loftloader-wrapper.slide-vertical{-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.loaded #loftloader-wrapper #loader{opacity:0;transition:all .3s ease-out}#loftloader-wrapper .loader-inner{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1001;text-align:center;transition:all 0s;font-size:0}#loftloader-wrapper .loader-inner #loader{position:relative;z-index:1002;display:inline-block;margin:0 auto;color:#248ACC}#loftloader-wrapper .loader-section{position:fixed;z-index:999;width:50%;height:100%;background:#000;opacity:.95;transition:all 0s;will-change:transform}#loftloader-wrapper .loader-section.section-fade{top:0;left:0;width:100%;will-change:opacity}.loaded #loftloader-wrapper .loader-section.section-fade{opacity:0!important;transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}#loftloader-wrapper .loader-section.section-slide-up{top:0;left:0;width:100%}.loaded #loftloader-wrapper .loader-section.section-slide-up{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}#loftloader-wrapper .loader-section.section-left,#loftloader-wrapper .loader-section.section-right{top:0}#loftloader-wrapper .loader-section.section-left{left:0}.loaded #loftloader-wrapper .loader-section.section-left{transition:all .7s .3s cubic-bezier(.645,.045,.355,1);-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}#loftloader-wrapper .loader-section.section-right{right:0}.loaded #loftloader-wrapper .loader-section.section-right{transition:all .7s .3s cubic-bezier(.645,.045,.355,1);-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}#loftloader-wrapper .loader-section.section-down,#loftloader-wrapper .loader-section.section-up{left:0;width:100%;height:50%}#loftloader-wrapper .loader-section.section-up{top:0}.loaded #loftloader-wrapper .loader-section.section-up{transition:all .7s .3s cubic-bezier(.645,.045,.355,1);-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}#loftloader-wrapper .loader-section.section-down{bottom:0}.loaded #loftloader-wrapper .loader-section.section-down{transition:all .7s .3s cubic-bezier(.645,.045,.355,1);-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}#loftloader-wrapper.pl-sun #loader{width:50px;height:50px}#loftloader-wrapper.pl-sun #loader span{position:absolute;top:0;left:0;display:block;width:50px;height:50px;background:currentColor;opacity:.9;transform-origin:50% 50%;-webkit-animation:spinReturn 4s ease infinite;animation:spinReturn 4s ease infinite}#loftloader-wrapper.pl-sun #loader span:before{position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:inherit;opacity:.9;content:"";transform-origin:50% 50%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}#loftloader-wrapper.pl-circles #loader{width:100px;height:60px}#loftloader-wrapper.pl-circles #loader span,#loftloader-wrapper.pl-circles #loader:after,#loftloader-wrapper.pl-circles #loader:before{position:absolute;display:block;width:10px;height:10px;border-radius:50%;opacity:.2;background:currentColor}#loftloader-wrapper.pl-circles #loader span{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-animation:lightUp 1.5s linear infinite .5s;animation:lightUp 1.5s linear infinite .5s}#loftloader-wrapper.pl-circles #loader:after,#loftloader-wrapper.pl-circles #loader:before{content:"";top:50%;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}#loftloader-wrapper.pl-circles #loader:before{left:0;-webkit-animation:lightUp 1.5s linear infinite;animation:lightUp 1.5s linear infinite}#loftloader-wrapper.pl-circles #loader:after{right:0;-webkit-animation:lightUp 1.5s linear infinite 1s;animation:lightUp 1.5s linear infinite 1s}#loftloader-wrapper.pl-wave #loader{width:60px;height:30px}#loftloader-wrapper.pl-wave #loader span,#loftloader-wrapper.pl-wave #loader:after,#loftloader-wrapper.pl-wave #loader:before{position:relative;display:inline-block;width:6px;height:100%;background:currentColor}#loftloader-wrapper.pl-wave #loader span{margin:0 16px;-webkit-animation:wave .9s linear infinite .3s;animation:wave .9s linear infinite .3s}#loftloader-wrapper.pl-wave #loader:after,#loftloader-wrapper.pl-wave #loader:before{content:""}#loftloader-wrapper.pl-wave #loader:before{-webkit-animation:wave .9s linear infinite;animation:wave .9s linear infinite}#loftloader-wrapper.pl-wave #loader:after{-webkit-animation:wave .9s linear infinite .6s;animation:wave .9s linear infinite .6s}#loftloader-wrapper.pl-square #loader{width:50px;height:50px;transform-origin:50% 50%;-webkit-animation:spinReturn 4s ease infinite;animation:spinReturn 4s ease infinite}#loftloader-wrapper.pl-square #loader span{position:absolute;top:0;left:0;display:block;width:100%;height:100%;border:4px solid currentColor;box-sizing:border-box;transform-origin:50% 50%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}#loftloader-wrapper.pl-frame #loader{width:80px;height:80px;max-width:90vw}#loftloader-wrapper.pl-frame #loader:after,#loftloader-wrapper.pl-frame #loader:before{position:absolute;width:100%;height:4px;background:currentColor;content:""}#loftloader-wrapper.pl-frame #loader:before{top:0;right:0;left:auto;-webkit-animation:drawframeTop 4s linear infinite;animation:drawframeTop 4s linear infinite}#loftloader-wrapper.pl-frame #loader:after{right:auto;bottom:0;left:0;-webkit-animation:drawframeBottom 4s linear infinite 1s;animation:drawframeBottom 4s linear infinite 1s}#loftloader-wrapper.pl-frame #loader span{position:absolute;top:0;left:0;display:block;width:100%;height:100%}#loftloader-wrapper.pl-frame #loader span:after,#loftloader-wrapper.pl-frame #loader span:before{position:absolute;width:4px;height:100%;background:currentColor;content:""}#loftloader-wrapper.pl-frame #loader span:before{top:auto;right:0;bottom:0;-webkit-animation:drawframeRight 4s linear infinite .5s;animation:drawframeRight 4s linear infinite .5s}#loftloader-wrapper.pl-frame #loader span:after{top:0;bottom:auto;left:0;-webkit-animation:drawframeLeft 4s linear infinite 1.5s;animation:drawframeLeft 4s linear infinite 1.5s}#loftloader-wrapper.pl-frame #loader img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;max-width:80%;max-height:80%}#loftloader-wrapper.pl-imgloading #loader{width:auto;height:auto;max-width:90vw}#loftloader-wrapper.pl-imgloading #loader img{position:relative;z-index:1;display:block;width:100%;height:auto;margin:0 auto;opacity:.3}#loftloader-wrapper.pl-imgloading #loader span{position:absolute;bottom:0;left:0;z-index:3;display:block;width:100%;height:0%;transition:0s;background-repeat:no-repeat;background-size:cover;background-position:center bottom;-webkit-animation:imgLoading 6s linear infinite;animation:imgLoading 6s linear infinite}
assets/img/animation-options.png ADDED
Binary file
{img → assets/img}/loftloader-logo.png RENAMED
File without changes
assets/img/pro-ad.jpg ADDED
Binary file
assets/js/customize.js ADDED
@@ -0,0 +1,171 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * Copyright (c) Loft.Ocean
3
+ * http://www.loftocean.com
4
+ */
5
+
6
+ (function(api, $){
7
+ $('head').append($('<style>', {'id': 'loftloader-hide-site-title', 'text': '.site-title { opacity: 0; }'}));
8
+ // Main Switch section
9
+ api.LoftLoaderSwitchSection = api.Section.extend({
10
+ initialize: function () {
11
+ return api.Section.prototype.initialize.apply( this, arguments );
12
+ },
13
+ ready: function(){
14
+ var checked = this.container.find('input[name=loftloader-main-switch]').attr('checked') ? true : false;
15
+ checked ? '' : $('#customize-theme-controls').addClass('loftloader-settings-disabled');
16
+ $('#customize-theme-controls').addClass('loftloader-controls-wrapper');
17
+ },
18
+ attachEvents: function () {
19
+ var container = this.container;
20
+ container.on('change', 'input[name=loftloader-main-switch]', function(e){
21
+ var checked = $(this).attr('checked') ? true : false,
22
+ $element = container.find('#customize-control-loftloader_main_switch input[type=checkbox]'),
23
+ controls_wrap = $('#customize-theme-controls');
24
+
25
+ checked ? $element.attr('checked', 'checked') : $element.removeAttr('checked');
26
+ $element.trigger('change');
27
+ checked ? controls_wrap.removeClass('loftloader-settings-disabled') : controls_wrap.addClass('loftloader-settings-disabled');
28
+ });
29
+ }
30
+ });
31
+ $.extend(api.sectionConstructor, {loftloader_switch: api.LoftLoaderSwitchSection});
32
+
33
+ // Slider control
34
+ api.controlConstructor.slider = api.Control.extend({
35
+ ready: function(){
36
+ var elem = this.container.find('.loader-ui-slider'),
37
+ input = this.container.find('input[data-customize-setting-link]');
38
+ elem.slider({
39
+ 'range': 'min',
40
+ 'min': elem.data('min'),
41
+ 'max': elem.data('max'),
42
+ 'value': elem.data('value'),
43
+ 'step': elem.data('step'),
44
+ 'slide': function(event, ui){
45
+ input.val(ui.value).trigger('change');
46
+ }
47
+ });
48
+ }
49
+ });
50
+
51
+ // Register event handler for hide controls/description
52
+ api.bind('ready', function(e){
53
+ // Change the site title in string "You are customizing ..."
54
+ loftloader_lite_i18n ? $('.site-title').text(loftloader_lite_i18n.name) : '';
55
+ $('#loftloader-hide-site-title').remove();
56
+
57
+ // Init for loader 2.0 customizer, when sync from lower version
58
+ var settings = api.get(),
59
+ $custom_img = $('#customize-control-loftloader_custom_img');
60
+ if($custom_img.length && !$custom_img.find('.attachment-thumb').length && settings && settings['loftloader_custom_img']){
61
+ var image = settings['loftloader_custom_img'];
62
+ if(image){
63
+ var $container = $custom_img.find('.attachment-media-view').addClass('attachment-media-view-image'),
64
+ $image = $('<div>', {'class': "thumbnail thumbnail-image"}).append($('<img>', {'class': "attachment-thumb", 'src': image}));
65
+
66
+ $container.children('.placeholder').css('display', 'none').after($image).remove();
67
+ }
68
+ }
69
+
70
+ $('body')
71
+ .on('change', 'input[type=number]', function(e){
72
+ var val = parseInt($(this).val()),
73
+ min = $(this).attr('min') ? parseInt($(this).attr('min')) : 1;
74
+ (val < min) ? $(this).val(min).trigger('change') : '';
75
+ })
76
+ .on('click', '.customize-more-toggle', function(e){
77
+ e.preventDefault();
78
+ var self = $(this),
79
+ description = $(this).siblings('.customize-control-description');
80
+
81
+ if(description.length){
82
+ self.hasClass('expanded') ? description.slideUp('slow') : description.slideDown('slow', function(){ $(this).css('display', 'block'); });
83
+ self.toggleClass('expanded');
84
+ }
85
+ })
86
+ .on('click', '.loftloader-any-page-generate', function(e){
87
+ e.preventDefault();
88
+ var shortcode = api.loftloader_generate_parameters();
89
+ $(this).siblings('.loftloader-any-page-shortcode').val('[loftloader ' + shortcode + ']').select();
90
+ });
91
+ });
92
+
93
+ /**
94
+ * Convert to string 'on' if current value is boolean true (not other value equals to true)
95
+ * @param value mix, the value to check
96
+ * @return mix, string 'on' if current value equals to boolean true, otherwise return the original value.
97
+ */
98
+ function loftloader_check_boolean(value){
99
+ return (value === true) ? 'on' : value;
100
+ }
101
+ /**
102
+ * Get customize setting value
103
+ * @param id string, the setting id
104
+ * @return mix, return dirty value/setting value or false (the id not exists)
105
+ **/
106
+ function loftloader_get_setting_value(id){
107
+ var settings = api.get(), //settings.settings, dirty_values = api.dirtyValues(),
108
+ value = settings[id] ? settings[id] : false; //dirty_values[id] ? dirty_values[id] : (settings[id] ? settings[id]['value'] : false);
109
+ if(typeof value === 'string'){
110
+ value = value.trim();
111
+ }
112
+ return loftloader_check_boolean(value);
113
+ }
114
+
115
+ // Generate loftloader parameters
116
+ api.loftloader_generate_parameters = function(){
117
+ var dependency = {
118
+ 'loftloader_bg_color': {},
119
+ 'loftloader_bg_opacity': {},
120
+ 'loftloader_bg_animation': {},
121
+ 'loftloader_loader_type': {
122
+ 'sun': [
123
+ 'loftloader_loader_color'
124
+ ],
125
+ 'circles': [
126
+ 'loftloader_loader_color'
127
+ ],
128
+ 'wave': [
129
+ 'loftloader_loader_color'
130
+ ],
131
+ 'square': [
132
+ 'loftloader_loader_color'
133
+ ],
134
+ 'frame': [
135
+ 'loftloader_loader_color',
136
+ 'loftloader_custom_img'
137
+ ],
138
+ 'imgloading': [
139
+ 'loftloader_custom_img',
140
+ 'loftloader_img_width'
141
+ ]
142
+ }
143
+ };
144
+ var loftloader = type_value = loop = '';
145
+ if(loftloader_get_setting_value('loftloader_main_switch') === 'on'){
146
+ loftloader = 'loftloader_main_switch=on loftloader_show_range=sitewide';
147
+ for(var id in dependency){
148
+ type_value = loftloader_get_setting_value(id);
149
+ switch(id){
150
+ case 'loftloader_bg_color':
151
+ case 'loftloader_bg_opacity':
152
+ case 'loftloader_bg_animation':
153
+ loop = [];
154
+ break;
155
+ default:
156
+ loop = dependency[id][type_value] ? dependency[id][type_value] : [];
157
+ }
158
+ loftloader += ' ' + id + '=' + type_value;
159
+ if(loop){
160
+ for(var j in loop){
161
+ loftloader += ' ' + loop[j] + '=' + loftloader_get_setting_value(loop[j]);
162
+ }
163
+ }
164
+ }
165
+ }
166
+ else{
167
+ loftloader = 'loftloader_main_switch=false';
168
+ }
169
+ return loftloader;
170
+ }
171
+ })(wp.customize, jQuery);
assets/js/customize.min.js ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
1
+ /**
2
+ * Copyright (c) Loft.Ocean
3
+ * http://www.loftocean.com
4
+ */
5
+
6
+ !function(a,b){function c(a){return a===!0?"on":a}function d(b){var d=a.get(),e=!!d[b]&&d[b];return"string"==typeof e&&(e=e.trim()),c(e)}b("head").append(b("<style>",{id:"loftloader-hide-site-title",text:".site-title { opacity: 0; }"})),a.LoftLoaderSwitchSection=a.Section.extend({initialize:function(){return a.Section.prototype.initialize.apply(this,arguments)},ready:function(){var a=!!this.container.find("input[name=loftloader-main-switch]").attr("checked");a?"":b("#customize-theme-controls").addClass("loftloader-settings-disabled"),b("#customize-theme-controls").addClass("loftloader-controls-wrapper")},attachEvents:function(){var a=this.container;a.on("change","input[name=loftloader-main-switch]",function(c){var d=!!b(this).attr("checked"),e=a.find("#customize-control-loftloader_main_switch input[type=checkbox]"),f=b("#customize-theme-controls");d?e.attr("checked","checked"):e.removeAttr("checked"),e.trigger("change"),d?f.removeClass("loftloader-settings-disabled"):f.addClass("loftloader-settings-disabled")})}}),b.extend(a.sectionConstructor,{loftloader_switch:a.LoftLoaderSwitchSection}),a.controlConstructor.slider=a.Control.extend({ready:function(){var a=this.container.find(".loader-ui-slider"),b=this.container.find("input[data-customize-setting-link]");a.slider({range:"min",min:a.data("min"),max:a.data("max"),value:a.data("value"),step:a.data("step"),slide:function(a,c){b.val(c.value).trigger("change")}})}}),a.bind("ready",function(c){loftloader_lite_i18n?b(".site-title").text(loftloader_lite_i18n.name):"",b("#loftloader-hide-site-title").remove();var d=a.get(),e=b("#customize-control-loftloader_custom_img");if(e.length&&!e.find(".attachment-thumb").length&&d&&d.loftloader_custom_img){var f=d.loftloader_custom_img;if(f){var g=e.find(".attachment-media-view").addClass("attachment-media-view-image"),h=b("<div>",{class:"thumbnail thumbnail-image"}).append(b("<img>",{class:"attachment-thumb",src:f}));g.children(".placeholder").css("display","none").after(h).remove()}}b("body").on("change","input[type=number]",function(a){var c=parseInt(b(this).val()),d=b(this).attr("min")?parseInt(b(this).attr("min")):1;c<d?b(this).val(d).trigger("change"):""}).on("click",".customize-more-toggle",function(a){a.preventDefault();var c=b(this),d=b(this).siblings(".customize-control-description");d.length&&(c.hasClass("expanded")?d.slideUp("slow"):d.slideDown("slow",function(){b(this).css("display","block")}),c.toggleClass("expanded"))}).on("click",".loftloader-any-page-generate",function(c){c.preventDefault();var d=a.loftloader_generate_parameters();b(this).siblings(".loftloader-any-page-shortcode").val("[loftloader "+d+"]").select()})}),a.loftloader_generate_parameters=function(){var a={loftloader_bg_color:{},loftloader_bg_opacity:{},loftloader_bg_animation:{},loftloader_loader_type:{sun:["loftloader_loader_color"],circles:["loftloader_loader_color"],wave:["loftloader_loader_color"],square:["loftloader_loader_color"],frame:["loftloader_loader_color","loftloader_custom_img"],imgloading:["loftloader_custom_img","loftloader_img_width"]}},b=type_value=loop="";if("on"===d("loftloader_main_switch")){b="loftloader_main_switch=on loftloader_show_range=sitewide";for(var c in a){switch(type_value=d(c),c){case"loftloader_bg_color":case"loftloader_bg_opacity":case"loftloader_bg_animation":loop=[];break;default:loop=a[c][type_value]?a[c][type_value]:[]}if(b+=" "+c+"="+type_value,loop)for(var e in loop)b+=" "+loop[e]+"="+d(loop[e])}}else b="loftloader_main_switch=false";return b}}(wp.customize,jQuery);
{js/front → assets/js}/loftloader.js RENAMED
File without changes
assets/js/loftloader.min.js ADDED
@@ -0,0 +1 @@
 
1
+ !function(a){a("#loftloader-wrapper").length&&a(window).load(function(){a("body").addClass("loaded")})}(jQuery);
assets/js/preview.js ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * Copyright (c) Loft.Ocean
3
+ * http://www.loftocean.com
4
+ */
5
+
6
+ (function(api, $, preview, parentAPI){
7
+ if(typeof parentAPI.settings.settings.loftloader_main_switch !== 'undefined'){
8
+ // Helper functions
9
+ /***** Update style element by id inside <head>, if not exist, create new *****/
10
+ function loftloader_update_style(id, style){
11
+ var $style = $('head').find('#' + id);
12
+ $style = $style.length ? $style : $('<style>').attr('id', id).html('').appendTo($('head'));
13
+ $style.html(style);
14
+ }
15
+ // Change loader background opacity instantly
16
+ api('loftloader_bg_opacity', function( value ) {
17
+ value.bind( function( to ) {
18
+ loftloader_update_style('loftloader-lite-custom-bg-opacity', '#loftloader-wrapper .loader-section { opacity: ' + (to / 100) + '; }');
19
+ });
20
+ });
21
+ // Change loader background color
22
+ api('loftloader_bg_color', function(value){
23
+ value.bind(function(to){
24
+ loftloader_update_style('loftloader-lite-custom-bg-color', '#loftloader-wrapper .loader-section { background-color: ' + to + '; }');
25
+ });
26
+ });
27
+ $('body').hover(function(e){
28
+ $(this).addClass('loaded');
29
+ }, function(e){
30
+ $(this).removeClass('loaded');
31
+ });
32
+ }
33
+ else if($('#loftloader-wrapper').length){
34
+ $(window).load(function(){ $('body').addClass('loaded'); });
35
+ }
36
+ })(wp.customize, jQuery, parent.document, parent.wp.customize);
assets/js/preview.min.js ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
1
+ /**
2
+ * Copyright (c) Loft.Ocean
3
+ * http://www.loftocean.com
4
+ */
5
+
6
+ !function(a,b,c,d){function e(a,c){var d=b("head").find("#"+a);d=d.length?d:b("<style>").attr("id",a).html("").appendTo(b("head")),d.html(c)}"undefined"!=typeof d.settings.settings.loftloader_main_switch?(a("loftloader_bg_opacity",function(a){a.bind(function(a){e("loftloader-lite-custom-bg-opacity","#loftloader-wrapper .loader-section { opacity: "+a/100+"; }")})}),a("loftloader_bg_color",function(a){a.bind(function(a){e("loftloader-lite-custom-bg-color","#loftloader-wrapper .loader-section { background-color: "+a+"; }")})}),b("body").hover(function(a){b(this).addClass("loaded")},function(a){b(this).removeClass("loaded")})):b("#loftloader-wrapper").length&&b(window).load(function(){b("body").addClass("loaded")})}(wp.customize,jQuery,parent.document,parent.wp.customize);
assets/scss/_loftloader-animation.scss ADDED
@@ -0,0 +1,311 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // LoftLoader Frontend Style - Animations
2
+
3
+ @-webkit-keyframes spinReturn {
4
+ 0% {
5
+ -webkit-transform: rotate(0deg);
6
+ }
7
+ 25% {
8
+ -webkit-transform: rotate(225deg);
9
+ }
10
+ 50% {
11
+ -webkit-transform: rotate(180deg);
12
+ }
13
+ 75% {
14
+ -webkit-transform: rotate(405deg);
15
+ }
16
+ 100% {
17
+ -webkit-transform: rotate(360deg);
18
+ }
19
+ }
20
+
21
+ @keyframes spinReturn {
22
+ 0% {
23
+ transform: rotate(0deg);
24
+ }
25
+ 25% {
26
+ transform: rotate(225deg);
27
+ }
28
+ 50% {
29
+ transform: rotate(180deg);
30
+ }
31
+ 75% {
32
+ transform: rotate(405deg);
33
+ }
34
+ 100% {
35
+ transform: rotate(360deg);
36
+ }
37
+ }
38
+
39
+ @-webkit-keyframes lightUp {
40
+ 0% {
41
+ opacity: 0.2;
42
+ }
43
+ 40% {
44
+ opacity: 1;
45
+ }
46
+ 60% {
47
+ opacity: 0.2;
48
+ }
49
+ 100% {
50
+ opacity: 0.2;
51
+ }
52
+ }
53
+
54
+ @keyframes lightUp {
55
+ 0% {
56
+ opacity: 0.2;
57
+ }
58
+ 40% {
59
+ opacity: 1;
60
+ }
61
+ 60% {
62
+ opacity: 0.2;
63
+ }
64
+ 100% {
65
+ opacity: 0.2;
66
+ }
67
+ }
68
+
69
+ @-webkit-keyframes wave {
70
+ 0% {
71
+ -webkit-transform: scaleY(1);
72
+ }
73
+ 40% {
74
+ -webkit-transform: scaleY(0.1);
75
+ }
76
+ 80% {
77
+ -webkit-transform: scaleY(1);
78
+ }
79
+ 100% {
80
+ -webkit-transform: scaleY(1);
81
+ }
82
+ }
83
+
84
+ @keyframes wave {
85
+ 0% {
86
+ transform: scaleY(1);
87
+ }
88
+ 40% {
89
+ transform: scaleY(0.1);
90
+ }
91
+ 80% {
92
+ transform: scaleY(1);
93
+ }
94
+ 100% {
95
+ transform: scaleY(1);
96
+ }
97
+ }
98
+
99
+ @-webkit-keyframes drawframeTop {
100
+ 0% {
101
+ -webkit-transform: scaleX(1);
102
+ transform-origin: 100% 0%;
103
+ }
104
+ 12.5% {
105
+ -webkit-transform: scaleX(0);
106
+ transform-origin: 100% 0%;
107
+ }
108
+ 50% {
109
+ -webkit-transform: scaleX(0);
110
+ transform-origin: 0% 0%;
111
+ }
112
+ 62.5% {
113
+ -webkit-transform: scaleX(1);
114
+ transform-origin: 0% 0%;
115
+ }
116
+ 100% {
117
+ -webkit-transform: scaleX(1);
118
+ transform-origin: 100% 0%;
119
+ }
120
+ }
121
+
122
+ @keyframes drawframeTop {
123
+ 0% {
124
+ transform: scaleX(1);
125
+ transform-origin: 100% 0%;
126
+ }
127
+ 12.5% {
128
+ transform: scaleX(0);
129
+ transform-origin: 100% 0%;
130
+ }
131
+ 50% {
132
+ transform: scaleX(0);
133
+ transform-origin: 0% 0%;
134
+ }
135
+ 62.5% {
136
+ transform: scaleX(1);
137
+ transform-origin: 0% 0%;
138
+ }
139
+ 100% {
140
+ transform: scaleX(1);
141
+ transform-origin: 100% 0%;
142
+ }
143
+ }
144
+
145
+ @-webkit-keyframes drawframeBottom {
146
+ 0% {
147
+ -webkit-transform: scaleX(1);
148
+ transform-origin: 0% 0%;
149
+ }
150
+ 12.5% {
151
+ -webkit-transform: scaleX(0);
152
+ transform-origin: 0% 0%;
153
+ }
154
+ 50% {
155
+ -webkit-transform: scaleX(0);
156
+ transform-origin: 100% 0%;
157
+ }
158
+ 62.5% {
159
+ -webkit-transform: scaleX(1);
160
+ transform-origin: 100% 0%;
161
+ }
162
+ 100% {
163
+ -webkit-transform: scaleX(1);
164
+ transform-origin: 0% 0%;
165
+ }
166
+ }
167
+
168
+ @keyframes drawframeBottom {
169
+ 0% {
170
+ transform: scaleX(1);
171
+ transform-origin: 0% 0%;
172
+ }
173
+ 12.5% {
174
+ transform: scaleX(0);
175
+ transform-origin: 0% 0%;
176
+ }
177
+ 50% {
178
+ transform: scaleX(0);
179
+ transform-origin: 100% 0%;
180
+ }
181
+ 62.5% {
182
+ transform: scaleX(1);
183
+ transform-origin: 100% 0%;
184
+ }
185
+ 100% {
186
+ transform: scaleX(1);
187
+ transform-origin: 0% 0%;
188
+ }
189
+ }
190
+
191
+ @-webkit-keyframes drawframeRight {
192
+ 0% {
193
+ -webkit-transform: scaleY(1);
194
+ transform-origin: 0% 100%;
195
+ }
196
+ 12.5% {
197
+ -webkit-transform: scaleY(0);
198
+ transform-origin: 0% 100%;
199
+ }
200
+ 50% {
201
+ -webkit-transform: scaleY(0);
202
+ transform-origin: 0% 0%;
203
+ }
204
+ 62.5% {
205
+ -webkit-transform: scaleY(1);
206
+ transform-origin: 0% 0%;
207
+ }
208
+ 100% {
209
+ -webkit-transform: scaleY(1);
210
+ transform-origin: 0% 100%;
211
+ }
212
+ }
213
+
214
+ @keyframes drawframeRight {
215
+ 0% {
216
+ transform: scaleY(1);
217
+ transform-origin: 0% 100%;
218
+ }
219
+ 12.5% {
220
+ transform: scaleY(0);
221
+ transform-origin: 0% 100%;
222
+ }
223
+ 50% {
224
+ transform: scaleY(0);
225
+ transform-origin: 0% 0%;
226
+ }
227
+ 62.5% {
228
+ transform: scaleY(1);
229
+ transform-origin: 0% 0%;
230
+ }
231
+ 100% {
232
+ transform: scaleY(1);
233
+ transform-origin: 0% 100%;
234
+ }
235
+ }
236
+
237
+ @-webkit-keyframes drawframeLeft {
238
+ 0% {
239
+ -webkit-transform: scaleY(1);
240
+ transform-origin: 0% 0%;
241
+ }
242
+ 12.5% {
243
+ -webkit-transform: scaleY(0);
244
+ transform-origin: 0% 0%;
245
+ }
246
+ 50% {
247
+ -webkit-transform: scaleY(0);
248
+ transform-origin: 0% 100%;
249
+ }
250
+ 62.5% {
251
+ -webkit-transform: scaleY(1);
252
+ transform-origin: 0% 100%;
253
+ }
254
+ 100% {
255
+ -webkit-transform: scaleY(1);
256
+ transform-origin: 0% 0%;
257
+ }
258
+ }
259
+
260
+ @keyframes drawframeLeft {
261
+ 0% {
262
+ transform: scaleY(1);
263
+ transform-origin: 0% 0%;
264
+ }
265
+ 12.5% {
266
+ transform: scaleY(0);
267
+ transform-origin: 0% 0%;
268
+ }
269
+ 50% {
270
+ transform: scaleY(0);
271
+ transform-origin: 0% 100%;
272
+ }
273
+ 62.5% {
274
+ transform: scaleY(1);
275
+ transform-origin: 0% 100%;
276
+ }
277
+ 100% {
278
+ transform: scaleY(1);
279
+ transform-origin: 0% 0%;
280
+ }
281
+ }
282
+
283
+ @-webkit-keyframes imgLoading {
284
+ 0% {
285
+ height: 0%;
286
+ opacity: 1;
287
+ }
288
+ 95% {
289
+ height: 100%;
290
+ opacity: 1;
291
+ }
292
+ 100% {
293
+ height: 100%;
294
+ opacity: 0;
295
+ }
296
+ }
297
+
298
+ @keyframes imgLoading {
299
+ 0% {
300
+ height: 0%;
301
+ opacity: 1;
302
+ }
303
+ 95% {
304
+ height: 100%;
305
+ opacity: 1;
306
+ }
307
+ 100% {
308
+ height: 100%;
309
+ opacity: 0;
310
+ }
311
+ }
assets/scss/_loftloader-mixins.scss ADDED
@@ -0,0 +1,70 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // LoftLoader - Mixins
2
+
3
+ @mixin transform($transform) {
4
+ -webkit-transform: $transform;
5
+ -ms-transform: $transform;
6
+ transform: $transform;
7
+ }
8
+
9
+ @mixin verticalend {
10
+ @include transform(translate(-100%, 0));
11
+ }
12
+
13
+ @mixin endLoader {
14
+ opacity: 0;
15
+ transition: all 0.3s ease-out;
16
+ }
17
+
18
+ @mixin animation($animation) {
19
+ -webkit-animation: $animation;
20
+ animation: $animation;
21
+ }
22
+
23
+ @mixin endTransition {
24
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
25
+ }
26
+
27
+ @mixin endBgSplitLeft {
28
+ @include endTransition;
29
+ @include transform(translateX(-100%));
30
+ }
31
+
32
+ @mixin endBgSplitRight {
33
+ @include endTransition;
34
+ @include transform(translateX(100%));
35
+ }
36
+
37
+ @mixin endBgSplitUp {
38
+ @include endTransition;
39
+ @include transform(translateY(-100%));
40
+ }
41
+
42
+ @mixin endBgSplitDown {
43
+ @include endTransition;
44
+ @include transform(translateY(100%));
45
+ }
46
+
47
+ @mixin endBgFade {
48
+ opacity: 0 !important;
49
+ @include endTransition;
50
+ }
51
+
52
+ @mixin endBgUp {
53
+ @include transform(translateY(-100%));
54
+ @include endTransition;
55
+ }
56
+
57
+ @mixin customImg {
58
+ width: auto;
59
+ height: auto;
60
+ max-width: 90vw;
61
+
62
+ img {
63
+ position: relative;
64
+ z-index: 1;
65
+ display: block;
66
+ width: 100%;
67
+ height: auto;
68
+ margin: 0 auto;
69
+ }
70
+ }
assets/scss/loftloader-settings.scss ADDED
@@ -0,0 +1,541 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * LoftLoader Lite Setting Panel Style
3
+ *
4
+ * Plugin Name: LoftLoader
5
+ * Plugin URI: http://www.loftocean.com/loftloader
6
+ * Author: Kaylolo Yinxi Chen @Loft.Ocean
7
+ * Author URI: http://www.loftocean.com
8
+ * Description: LoftLoader (Lite Version) is a plugin for adding beautiful and smooth preload animation to your WordPress website. With setting options, you can choose from preset animations, add custom logo image, choose colours to match your branding, and amuse and impress your visitors while loading site content.
9
+ * Version: 2.0
10
+ */
11
+
12
+
13
+ // Define base colors
14
+ $primary-color: #41C7D3;
15
+ $secondary-color: #DDD;
16
+ $text-color: #111;
17
+ $description-color: #888;
18
+
19
+ @mixin animations($max-count) {
20
+ @for $i from 1 through $max-count {
21
+ &:nth-child(#{$i}) {
22
+ .loftloader-radiobtn + span:after {
23
+ background-position: (-45*($i - 1))*1px -47px;
24
+ }
25
+ }
26
+ }
27
+ }
28
+
29
+ @mixin roundedcorner {
30
+ border-radius: 4px;
31
+ }
32
+
33
+ @mixin transform($transform) {
34
+ -webkit-transform: $transform;
35
+ -ms-transform: $transform;
36
+ transform: $transform;
37
+ }
38
+
39
+ @mixin optionsdisabled {
40
+ pointer-events: none;
41
+ opacity: 0.5;
42
+ }
43
+
44
+ @mixin slidervalue {
45
+ span.customize-control-title {
46
+ display: inline;
47
+
48
+ & + span {
49
+ float: right;
50
+ padding-right: 5px;
51
+ font-size: 12px;
52
+ letter-spacing: 0.1em;
53
+ font-weight: bold;
54
+ color: $text-color;
55
+
56
+ input {
57
+ width: 60px;
58
+ padding-right: 0;
59
+ background: none;
60
+ border: none;
61
+ box-shadow: none;
62
+ font-size: 12px;
63
+ letter-spacing: 0.1em;
64
+ font-weight: bold;
65
+ color: $text-color;
66
+ text-align: right;
67
+ }
68
+ }
69
+ }
70
+ }
71
+
72
+
73
+ @import url(https://fonts.googleapis.com/css?family=Lato:400,600);
74
+
75
+
76
+ #customize-theme-controls.loftloader-controls-wrapper {
77
+ font-family: Lato;
78
+
79
+ .customize-section-title h3 {
80
+ font-size: 18px;
81
+ font-weight: 600;
82
+ letter-spacing: 0.1em;
83
+ color: $text-color;
84
+
85
+ span {
86
+ letter-spacing: 0;
87
+ }
88
+ }
89
+
90
+ .customize-control-title {
91
+ margin-top: 0;
92
+ font-size: 12px;
93
+ letter-spacing: 0.1em;
94
+ font-weight: bold;
95
+ text-transform: none;
96
+ color: $text-color;
97
+
98
+ + span.description {
99
+ margin-top: -6px;
100
+ }
101
+ }
102
+
103
+ span.description {
104
+ margin-bottom: 12px;
105
+ font-size: 11px;
106
+ font-style: normal;
107
+ color: $description-color;
108
+
109
+ strong {
110
+ color: $text-color;
111
+ font-weight: bold;
112
+ }
113
+ }
114
+
115
+ select,
116
+ input[type="text"],
117
+ input[type="number"],
118
+ button.button.remove-button {
119
+ background: #FFF;
120
+ font-size: 12px;
121
+ letter-spacing: 0.1em;
122
+ font-weight: bold;
123
+ color: $text-color;
124
+ border-color: $primary-color;
125
+ box-shadow: none;
126
+ }
127
+
128
+ input[type="text"],
129
+ input[type="number"],
130
+ button.button.remove-button {
131
+ width: 80px;
132
+ text-align: center;
133
+ @include roundedcorner;
134
+ }
135
+
136
+ button.button.remove-button:hover {
137
+ opacity: 0.75;
138
+ }
139
+
140
+ input[type="checkbox"] {
141
+ position: relative;
142
+ float: right;
143
+ width: 33px;
144
+ height: 33px;
145
+ border-radius: 50%;
146
+ background: none;
147
+ border: 2px solid $primary-color;
148
+ box-shadow: none;
149
+ font-size: 0;
150
+
151
+ &:checked:before {
152
+ position: absolute;
153
+ top: 50%;
154
+ left: 50%;
155
+ @include transform(translate(-50%, -50%));
156
+ margin: 0 0 0 -3px;
157
+ color: $primary-color;
158
+
159
+ @media screen and (max-width: 782px) {
160
+ & {
161
+ margin: 0 0 0 -8px;
162
+ }
163
+ }
164
+ }
165
+
166
+ &:hover {
167
+ opacity: 0.75;
168
+ }
169
+ }
170
+
171
+ .loftloader-radiobtn {
172
+ display: none;
173
+ width: inherit;
174
+ height: inherit;
175
+ opacity: 0;
176
+ margin: 0;
177
+
178
+ + span {
179
+ position: absolute;
180
+ top: 0;
181
+ left: 0;
182
+ display: block;
183
+ width: inherit;
184
+ height: inherit;
185
+ border: 2px solid $secondary-color;
186
+ box-sizing: border-box;
187
+ }
188
+
189
+ &:checked + span {
190
+ border-color: $primary-color;
191
+ }
192
+ }
193
+
194
+ .customize-control-btn {
195
+ label {
196
+ position: relative;
197
+ display: inline-block;
198
+ margin-left: 0;
199
+ padding: 0;
200
+ }
201
+
202
+ span.customize-control-title {
203
+ display: inline;
204
+
205
+ & + div {
206
+ float: right;
207
+ }
208
+ }
209
+ }
210
+
211
+ .accordion-section-content {
212
+ padding: 0;
213
+ background: #FFF;
214
+
215
+ &:before {
216
+ position: absolute;
217
+ top: 0;
218
+ left: 0;
219
+ z-index: -1;
220
+ display: block;
221
+ width: 100%;
222
+ height: 100%;
223
+ background: #FFF;
224
+ content: "";
225
+ }
226
+
227
+ li {
228
+ padding: 15px 12px;
229
+ margin-bottom: 0;
230
+ border-bottom: 1px solid #EEE;
231
+ box-sizing: border-box;
232
+
233
+ &.customize-section-description-container {
234
+ padding: 12px 12px 0;
235
+ border-bottom: none;
236
+ }
237
+
238
+ &:last-of-type {
239
+ border-bottom: none;
240
+ }
241
+ }
242
+ }
243
+
244
+ .wp-picker-container {
245
+ overflow: visible;
246
+ width: auto;
247
+
248
+ .wp-color-result {
249
+ width: 24px;
250
+ height: 24px;
251
+ padding: 0;
252
+ margin-top: 2px;
253
+ border: 1px solid rgba(#000, 0.1);
254
+ border-radius: 50%;
255
+ box-shadow: none !important;
256
+ line-height: 28px;
257
+
258
+ &:after {
259
+ right: auto;
260
+ left: 24px;
261
+ width: 80px;
262
+ padding: 0 6px;
263
+ background: transparent;
264
+ border: none;
265
+ color: #555;
266
+ font-size: 11px;
267
+ text-align: left;
268
+ line-height: 24px;
269
+ }
270
+ }
271
+
272
+ .wp-picker-open + .wp-picker-input-wrap {
273
+ float: right;
274
+ margin-top: -2px;
275
+ width: auto;
276
+ }
277
+
278
+ input[type="text"].wp-color-picker {
279
+ display: inline-block;
280
+ padding: 0 5px;
281
+ margin-top: 0;
282
+ width: 80px !important;
283
+ border: 1px solid $primary-color;
284
+ vertical-align: top;
285
+ font-family: Lato;
286
+ line-height: 26px;
287
+ }
288
+
289
+ .button.wp-picker-default {
290
+ display: none;
291
+ }
292
+ }
293
+
294
+ .loader-ui-slider {
295
+ height: 16px;
296
+ margin-top: 12px;
297
+ background: none;
298
+ border-radius: 0;
299
+ border: none;
300
+
301
+ &:before {
302
+ position: absolute;
303
+ top: 50%;
304
+ left: 0;
305
+ @include transform(translateY(-50%));
306
+ width: 100%;
307
+ height: 2px;
308
+ background: $secondary-color;
309
+ content: "";
310
+ }
311
+
312
+ .ui-slider-range {
313
+ top: 50%;
314
+ @include transform(translateY(-50%));
315
+ height: 2px;
316
+ background: $primary-color;
317
+ }
318
+
319
+ .ui-slider-handle {
320
+ top: 50%;
321
+ @include transform(translateY(-50%));
322
+ width: 16px;
323
+ height: 16px;
324
+ background: $primary-color;
325
+ border: none;
326
+ border-radius: 50%;
327
+ }
328
+ }
329
+
330
+ &.loftloader-settings-disabled {
331
+ li#accordion-section-loftloader_switch ~ li {
332
+ @include optionsdisabled;
333
+ }
334
+ }
335
+
336
+ li.customize-control.customize-control-image .thumbnail.thumbnail-image {
337
+ background-color: #EEE;
338
+ }
339
+
340
+ li#accordion-section-loftloader_switch {
341
+ margin-bottom: 10px;
342
+
343
+ .accordion-section-title {
344
+ padding: 20px 10px 22px 14px;
345
+
346
+ &:after {
347
+ display: none;
348
+ }
349
+ }
350
+ }
351
+
352
+ li.customize-control.customize-control-slider {
353
+ @include slidervalue;
354
+ }
355
+
356
+ li.customize-control.customize-control-check {
357
+ span.customize-control-title {
358
+ display: inline;
359
+ }
360
+ }
361
+
362
+ li#customize-control-loftloader_loader_type {
363
+ .customize-more-toggle {
364
+ position: relative;
365
+ float: right;
366
+ @include transform(rotate(135deg));
367
+ z-index: 9;
368
+ width: 20px;
369
+ height: 20px;
370
+ margin-top: -20px;
371
+ cursor: pointer;
372
+ -webkit-box-shadow: none;
373
+ box-shadow: none;
374
+ -webkit-appearance: none;
375
+ background: $primary-color;
376
+ border-radius: 50%;
377
+ border: none;
378
+
379
+ &:before {
380
+ position: absolute;
381
+ top: 50%;
382
+ left: 50%;
383
+ @include transform(translate(-70%, -30%));
384
+ display: block;
385
+ width: 6px;
386
+ height: 6px;
387
+ border: 1px solid #FFF;
388
+ border-left: none;
389
+ border-bottom: none;
390
+ transform-origin: 50% 50%;
391
+ content: "";
392
+ }
393
+
394
+ &:focus {
395
+ outline: none;
396
+ opacity: 0.5;
397
+ }
398
+
399
+ &.expanded {
400
+ @include transform(rotate(-45deg));
401
+ }
402
+
403
+ & + span.description {
404
+ margin: 12px 0 0;
405
+ }
406
+ }
407
+
408
+ #loftloader_option_animation {
409
+ margin-top: 12px;
410
+
411
+ label {
412
+ position: relative;
413
+ float: left;
414
+ width: 45px;
415
+ height: 45px;
416
+ margin: 0 -2px -2px 0;
417
+ padding: 0;
418
+
419
+ @include animations(7);
420
+
421
+ .loftloader-radiobtn {
422
+ & + span {
423
+ overflow: hidden;
424
+
425
+ &:after {
426
+ position: absolute;
427
+ top: 0;
428
+ left: 0;
429
+ display: block;
430
+ width: inherit;
431
+ height: inherit;
432
+ background-image: url(../img/animation-options.png);
433
+ background-size: 270px;
434
+ opacity: 0.25;
435
+ content: "";
436
+ }
437
+ }
438
+ }
439
+
440
+ .loftloader-radiobtn:checked + span {
441
+ z-index: 99;
442
+ &:after {
443
+ opacity: 1;
444
+ }
445
+ }
446
+ }
447
+
448
+ &:after {
449
+ position: relative;
450
+ display: block;
451
+ clear: both;
452
+ content: "";
453
+ }
454
+ }
455
+ }
456
+
457
+ li#customize-control-loftloader_customimg {
458
+ button.upload-button {
459
+ position: relative;
460
+ float: right;
461
+ @include transform(rotate(-45deg));
462
+ width: 33px;
463
+ height: 33px;
464
+ border-radius: 50%;
465
+ background: none;
466
+ border: 2px solid $primary-color;
467
+ box-shadow: none;
468
+ font-size: 0;
469
+
470
+ &:before,
471
+ &:after {
472
+ position: absolute;
473
+ content: "";
474
+ display: block;
475
+ }
476
+
477
+ &:before {
478
+ top: 50%;
479
+ left: 50%;
480
+ @include transform(translate(-22%, -76%));
481
+ width: 6px;
482
+ height: 6px;
483
+ border: 2px solid $primary-color;
484
+ border-left: none;
485
+ border-bottom: none;
486
+ transform-origin: 50% 50%;
487
+ }
488
+
489
+ &:after {
490
+ top: 50%;
491
+ left: 50%;
492
+ @include transform(translate(-50%, -50%) rotate(45deg));
493
+ width: 2px;
494
+ height: 16px;
495
+ background: $primary-color;
496
+ }
497
+
498
+ &:hover {
499
+ opacity: 0.75;
500
+ }
501
+ }
502
+
503
+ .current {
504
+ margin-top: 15px;
505
+ }
506
+ }
507
+
508
+ li.customize-control-number {
509
+ label {
510
+ position: relative;
511
+ display: block;
512
+
513
+ > span:last-child {
514
+ float: right;
515
+ z-index: 9;
516
+ font-size: 12px;
517
+ font-weight: bold;
518
+ letter-spacing: 0.1em;
519
+ color: $text-color;
520
+
521
+ input[type="number"] {
522
+ margin-right: 5px;
523
+ }
524
+ }
525
+ }
526
+
527
+ span.customize-control-title {
528
+ display: inline;
529
+ }
530
+ }
531
+ }
532
+
533
+
534
+ // Hide extra elements created by Divi Theme
535
+ .wp-full-overlay {
536
+ & > .customize-controls-close,
537
+ & > .et-core-modal-overlay {
538
+ display: none;
539
+ visibility: hidden;
540
+ }
541
+ }
assets/scss/loftloader.scss ADDED
@@ -0,0 +1,414 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * LoftLoader Lite Frontend Style
3
+ *
4
+ * Plugin Name: LoftLoader
5
+ * Plugin URI: http://www.loftocean.com/loftloader
6
+ * Author: Kaylolo Yinxi Chen @Loft.Ocean
7
+ * Author URI: http://www.loftocean.com
8
+ * Description: LoftLoader (Lite Version) is a plugin for adding beautiful and smooth preload animation to your WordPress website. With setting options, you can choose from preset animations, add custom logo image, choose colours to match your branding, and amuse and impress your visitors while loading site content.
9
+ * Version: 2.0
10
+ */
11
+
12
+ $primary-color: #248ACC;
13
+
14
+ @import 'loftloader-animation';
15
+ @import 'loftloader-mixins';
16
+
17
+ html,
18
+ body {
19
+ opacity: 1 !important; //Prevent site content from being hidden by other plugins before their code get fully loaded.
20
+ }
21
+
22
+ #loftloader-wrapper {
23
+ position: fixed;
24
+ top: 0;
25
+ left: 0;
26
+ @include transform(translateX(0));
27
+ z-index: 999999;
28
+ width: 100%;
29
+ height: 100%;
30
+ background: transparent !important;
31
+
32
+ // After the page content has been loaded:
33
+ .loaded & {
34
+ @include transform(translateX(-100%));
35
+ visibility: hidden;
36
+ pointer-events: none;
37
+ overflow: hidden;
38
+ transition: all;
39
+ transition-delay: 1s;
40
+
41
+ &.slide-vertical {
42
+ @include verticalend;
43
+ }
44
+
45
+ // Hide the preloader elements
46
+ #loader {
47
+ @include endLoader;
48
+ }
49
+ }
50
+
51
+ .loader-inner {
52
+ position: absolute;
53
+ top: 50%;
54
+ left: 50%;
55
+ @include transform(translate(-50%, -50%));
56
+ z-index: 1001;
57
+ text-align: center;
58
+ transition: all 0s;
59
+ font-size: 0;
60
+
61
+ #loader {
62
+ position: relative;
63
+ z-index: 1002;
64
+ display: inline-block;
65
+ margin: 0 auto;
66
+ color: $primary-color;
67
+ }
68
+ }
69
+
70
+ // LoftLoader Background
71
+ .loader-section {
72
+ position: fixed;
73
+ z-index: 999;
74
+ width: 50%;
75
+ height: 100%;
76
+ background: #000;
77
+ opacity: 0.95;
78
+ transition: all 0s;
79
+ will-change: transform;
80
+
81
+ //Fade
82
+ &.section-fade {
83
+ top: 0;
84
+ left: 0;
85
+ width: 100%;
86
+ will-change: opacity;
87
+
88
+ .loaded & {
89
+ @include endBgFade;
90
+ }
91
+ }
92
+
93
+ //Slide Up
94
+ &.section-slide-up {
95
+ top: 0;
96
+ left: 0;
97
+ width: 100%;
98
+
99
+ .loaded & {
100
+ @include endBgUp;
101
+ }
102
+ }
103
+
104
+ //Split Horizontally
105
+ &.section-left,
106
+ &.section-right {
107
+ top: 0;
108
+ }
109
+
110
+ &.section-left {
111
+ left: 0;
112
+
113
+ .loaded & {
114
+ @include endBgSplitLeft;
115
+ }
116
+ }
117
+
118
+ &.section-right {
119
+ right: 0;
120
+
121
+ .loaded & {
122
+ @include endBgSplitRight;
123
+ }
124
+ }
125
+
126
+ //Split Vertically
127
+ &.section-up,
128
+ &.section-down {
129
+ left: 0;
130
+ width: 100%;
131
+ height: 50%;
132
+ }
133
+
134
+ &.section-up {
135
+ top: 0;
136
+
137
+ .loaded & {
138
+ @include endBgSplitUp;
139
+ }
140
+ }
141
+
142
+ &.section-down {
143
+ bottom: 0;
144
+
145
+ .loaded & {
146
+ @include endBgSplitDown;
147
+ }
148
+ }
149
+ }
150
+ }
151
+
152
+
153
+ /* ==========================================================================
154
+ Loading - Spinning Sun
155
+ ========================================================================== */
156
+
157
+ #loftloader-wrapper.pl-sun {
158
+ #loader {
159
+ width: 50px;
160
+ height: 50px;
161
+
162
+ span {
163
+ position: absolute;
164
+ top: 0;
165
+ left: 0;
166
+ display: block;
167
+ width: 50px;
168
+ height: 50px;
169
+ background: currentColor;
170
+ opacity: 0.9;
171
+ transform-origin: 50% 50%;
172
+ @include animation(spinReturn 4s ease infinite);
173
+
174
+ &:before {
175
+ position: absolute;
176
+ top: 0;
177
+ left: 0;
178
+ display: block;
179
+ width: 100%;
180
+ height: 100%;
181
+ background: inherit;
182
+ opacity: 0.9;
183
+ content: "";
184
+ transform-origin: 50% 50%;
185
+ @include transform(rotate(45deg));
186
+ }
187
+ }
188
+ }
189
+ }
190
+
191
+
192
+ /* ==========================================================================
193
+ Loading - Luminous Circles
194
+ ========================================================================== */
195
+
196
+ #loftloader-wrapper.pl-circles {
197
+ #loader {
198
+ width: 100px;
199
+ height: 60px;
200
+
201
+ span,
202
+ &:before,
203
+ &:after {
204
+ position: absolute;
205
+ display: block;
206
+ width: 10px;
207
+ height: 10px;
208
+ border-radius: 50%;
209
+ opacity: 0.2;
210
+ background: currentColor;
211
+ }
212
+
213
+ span {
214
+ top: 50%;
215
+ left: 50%;
216
+ @include transform(translate(-50%, -50%));
217
+ @include animation(lightUp 1.5s linear infinite 0.5s);
218
+ }
219
+
220
+ &:before,
221
+ &:after {
222
+ content: "";
223
+ top: 50%;
224
+ @include transform(translate(0, -50%));
225
+ }
226
+
227
+ &:before {
228
+ left: 0;
229
+ @include animation(lightUp 1.5s linear infinite);
230
+ }
231
+
232
+ &:after {
233
+ right: 0;
234
+ @include animation(lightUp 1.5s linear infinite 1s);
235
+ }
236
+ }
237
+ }
238
+
239
+
240
+ /* ==========================================================================
241
+ Loading - Wave
242
+ ========================================================================== */
243
+
244
+ #loftloader-wrapper.pl-wave {
245
+ #loader {
246
+ width: 60px;
247
+ height: 30px;
248
+
249
+ span,
250
+ &:before,
251
+ &:after {
252
+ position: relative;
253
+ display: inline-block;
254
+ width: 6px;
255
+ height: 100%;
256
+ background: currentColor;
257
+ }
258
+
259
+ span {
260
+ margin: 0 16px;
261
+ @include animation(wave 0.9s linear infinite 0.3s);
262
+ }
263
+
264
+ &:before,
265
+ &:after {
266
+ content: "";
267
+ }
268
+
269
+ &:before {
270
+ @include animation(wave 0.9s linear infinite);
271
+ }
272
+
273
+ &:after {
274
+ @include animation(wave 0.9s linear infinite 0.6s);
275
+ }
276
+ }
277
+ }
278
+
279
+
280
+ /* ==========================================================================
281
+ Loading - Spinning Square
282
+ ========================================================================== */
283
+
284
+ #loftloader-wrapper.pl-square {
285
+ #loader {
286
+ width: 50px;
287
+ height: 50px;
288
+ transform-origin: 50% 50%;
289
+ @include animation(spinReturn 4s ease infinite);
290
+
291
+ span {
292
+ position: absolute;
293
+ top: 0;
294
+ left: 0;
295
+ display: block;
296
+ width: 100%;
297
+ height: 100%;
298
+ border: 4px solid currentColor;
299
+ box-sizing: border-box;
300
+ transform-origin: 50% 50%;
301
+ @include transform(rotate(45deg));
302
+ }
303
+ }
304
+ }
305
+
306
+
307
+ /* ==========================================================================
308
+ Loading - Drawing Frame
309
+ ========================================================================== */
310
+
311
+ #loftloader-wrapper.pl-frame {
312
+ #loader {
313
+ width: 80px;
314
+ height: 80px;
315
+ max-width: 90vw;
316
+
317
+ &:before,
318
+ &:after {
319
+ position: absolute;
320
+ width: 100%;
321
+ height: 4px;
322
+ background: currentColor;
323
+ content: "";
324
+ }
325
+
326
+ &:before {
327
+ top: 0;
328
+ right: 0;
329
+ left: auto;
330
+ @include animation(drawframeTop 4s linear infinite);
331
+ }
332
+
333
+ &:after {
334
+ right: auto;
335
+ bottom: 0;
336
+ left: 0;
337
+ @include animation(drawframeBottom 4s linear infinite 1s);
338
+ }
339
+
340
+ span {
341
+ position: absolute;
342
+ top: 0;
343
+ left: 0;
344
+ display: block;
345
+ width: 100%;
346
+ height: 100%;
347
+
348
+ &:before,
349
+ &:after {
350
+ position: absolute;
351
+ width: 4px;
352
+ height: 100%;
353
+ background: currentColor;
354
+ content: "";
355
+ }
356
+
357
+ &:before {
358
+ top: auto;
359
+ right: 0;
360
+ bottom: 0;
361
+ @include animation(drawframeRight 4s linear infinite 0.5s);
362
+ }
363
+
364
+ &:after {
365
+ top: 0;
366
+ bottom: auto;
367
+ left: 0;
368
+ @include animation(drawframeLeft 4s linear infinite 1.5s);
369
+ }
370
+ }
371
+
372
+ img {
373
+ position: absolute;
374
+ top: 50%;
375
+ left: 50%;
376
+ @include transform(translate(-50%, -50%));
377
+ display: block;
378
+ max-width: 80%;
379
+ max-height: 80%;
380
+ }
381
+ }
382
+ }
383
+
384
+
385
+ /* ==========================================================================
386
+ Loading - Loading Custom Image
387
+ ========================================================================== */
388
+
389
+ #loftloader-wrapper.pl-imgloading {
390
+ #loader {
391
+ @include customImg;
392
+
393
+ img {
394
+ opacity: 0.3;
395
+ }
396
+
397
+ span {
398
+ position: absolute;
399
+ bottom: 0;
400
+ left: 0;
401
+ z-index: 3;
402
+ display: block;
403
+ width: 100%;
404
+ height: 0%;
405
+ transition: 0s;
406
+ background: {
407
+ repeat: no-repeat;
408
+ size: cover;
409
+ position: center bottom;
410
+ }
411
+ @include animation(imgLoading 6s linear infinite);
412
+ }
413
+ }
414
+ }
configs/loftloader-config.php DELETED
@@ -1,341 +0,0 @@
1
- <?php
2
- // Not allowed by directly accessing.
3
- if(!defined('ABSPATH')){
4
- die('Access not allowed!');
5
- }
6
- /**
7
- * Configuration file for plugin option sections
8
- * fields and the default settings
9
- *
10
- * @package LoftLoader
11
- * @link http://www.loftocean.com/
12
- * @author Suihai Huang from Loft Ocean Team
13
-
14
- * @since version 1.0
15
- */
16
-
17
- if(!file_exists('loftloader_settings_fields') && !file_exists('loftloader_settings_default_value')){
18
- add_filter('loftloader_settings_fields', 'loftloader_settings_fields');
19
- /**
20
- * @description hook callback function to register the fields of loftloader
21
- * @param array $fields
22
- * @return array merge fields to the array passed by
23
- */
24
- function loftloader_settings_fields($fields = array()){
25
- return array_merge((array)$fields, array(
26
- array(
27
- 'title' => esc_html__('Show Preloader', 'loftloader'),
28
- 'args' => array(),
29
- 'content' => array(
30
- array(
31
- 'name' => 'enable',
32
- 'type' => 'Checkbox',
33
- 'title' => esc_html__('Enable LoftLoader', 'loftloader'),
34
- 'description' => esc_html__('Suggest keep it enabled if the site has a lot of images or large videos.', 'loftloader'),
35
- 'options' => array(
36
- 'on' => array('label' => '')
37
- ),
38
- 'extra' => array(
39
- 'class' => 'loftloader-enabled'
40
- )
41
- ),
42
- array(
43
- 'name' => 'homepage',
44
- 'type' => 'Checkbox',
45
- 'title' => esc_html__('For homepage only', 'loftloader'),
46
- 'description' => esc_html__('If enabled, the LoftLoader will be shown on homepage only', 'loftloader'),
47
- 'options' => array(
48
- 'on' => array('label' => '')
49
- ),
50
- 'extra' => array(
51
- 'class' => 'loftloader-enable-homepage-only'
52
- )
53
- )
54
- )
55
- ),
56
- array(
57
- 'title' => '',
58
- 'args' => array('nolist' => true, 'nowrap' => true),
59
- 'content' => array(
60
- array(
61
- 'name' => 'settings',
62
- 'type' => 'Preloader_Preview',
63
- 'title' => '',
64
- 'description' => '',
65
- 'options' => array(
66
- array(
67
- 'section' => 'preview',
68
- 'title' => esc_html__('Preview', 'loftloader'),
69
- 'description' => esc_html__('Hover onto frame below to preview ending animation.', 'loftloader')
70
- ),
71
- array(
72
- 'section' => 'setting',
73
- 'content' => array(
74
- array(
75
- 'title' => esc_html__('Background', 'loftloader'),
76
- 'content' => array(
77
- array(
78
- 'name' => 'background[effect]',
79
- 'type' => 'select',
80
- 'title' => esc_html__('Select preloader ending animation', 'loftloader'),
81
- 'options' => array(
82
- 'fade' => array('label' => esc_html__('Fade', 'loftloader')),
83
- 'slide-left-right' => array('label' => esc_html__('Slide Left & Right', 'loftloader')),
84
- 'slide-up' => array('label' => esc_html__('Slide Up', 'loftloader')),
85
- 'slide-up-down' => array('label' => esc_html__('Slide Up & Down', 'loftloader'), 'selected' => true)
86
- ),
87
- 'extra' => array(
88
- 'id' => 'preloader-background-style',
89
- )
90
- ),
91
- array(
92
- 'name' => 'background[color]',
93
- 'type' => 'color-picker',
94
- 'title' => esc_html__('Preloader background color', 'loftloader'),
95
- 'options' => array(
96
- 'defaultValue' => '#222222'
97
- ),
98
- 'extra' => array(
99
- 'id' => 'preloader-background-color',
100
- )
101
- ),
102
- array(
103
- 'name' => 'background[opacity]',
104
- 'type' => 'slider',
105
- 'title' => esc_html__('Preloader background opacity', 'loftloader'),
106
- 'options' => array(
107
- 'default' => 100,
108
- 'min' => 0,
109
- 'max' => 100,
110
- 'step' => 5
111
- ),
112
- 'extra' => array(
113
- 'class' => 'slider-opacity'
114
- )
115
- )
116
- )
117
- ),
118
- array(
119
- 'title' => esc_html__('Animation', 'loftloader'),
120
- 'content' => array(
121
- array(
122
- 'name' => 'animation[type]',
123
- 'type' => 'select',
124
- 'title' => esc_html__('Select preloader loading animation', 'loftloader'),
125
- 'options' => array(
126
- 'pl-sun' => array('label' => esc_html__('1 - Spinning Sun', 'loftloader')),
127
- 'pl-circles' => array('label' => esc_html__('2 - Luminous Circles', 'loftloader')),
128
- 'pl-wave' => array('label' => esc_html__('3 - Wave', 'loftloader')),
129
- 'pl-square' => array('label' => esc_html__('4 - Spinning Square', 'loftloader')),
130
- 'pl-frame' => array('label' => esc_html__('5 - Drawing Frame', 'loftloader')),
131
- 'pl-imgloading' => array('label' => esc_html__('6 - Loading Custom Image', 'loftloader'))
132
- ),
133
- 'extra' => array(
134
- 'id' => 'preloader-animation',
135
- 'class' => 'preloader-dependency-parent'
136
- )
137
- ),
138
- array(
139
- 'name' => 'animation[color]',
140
- 'type' => 'color-picker',
141
- 'title' => esc_html__('Preloader animation color', 'loftloader'),
142
- 'options' => array(
143
- 'defaultValue' => '#222222'
144
- ),
145
- 'extra' => array(
146
- 'id' => 'preloader-animation-color',
147
- 'wrapperClass' => 'preloader_animation preloader_animation-pl-sun preloader_animation-pl-circles preloader_animation-pl-wave preloader_animation-pl-square preloader_animation-pl-frame'
148
- )
149
- ),
150
- array(
151
- 'name' => 'animation[image]',
152
- 'type' => 'media',
153
- 'title' => esc_html__('Upload custom image/logo', 'loftloader'),
154
- 'options' => array(
155
- 'removeButton' => true
156
- ),
157
- 'extra' => array(
158
- 'wrapperClass' => 'preloader_animation preloader_animation-pl-frame preloader_animation-pl-imgloading'
159
- )
160
- ),
161
- array(
162
- 'name' => 'animation[width]',
163
- 'type' => 'number',
164
- 'title' => esc_html__('Custom image width - optional (if provided, the value should be between 1 - 400)', 'loftloader'),
165
- 'options' => array(),
166
- 'extra' => array(
167
- 'wrapperClass' => 'preloader_animation preloader_animation-pl-imgloading preloader-custom-image-width'
168
- )
169
- )
170
- )
171
- )
172
- )
173
- )
174
- )
175
- )
176
- )
177
- )
178
- ));
179
- }
180
- add_filter('loftloader_settings_default_value', 'loftloader_settings_default_value');
181
- /**
182
- * @description hook callback function to set the default value of loftloader settings
183
- * @param array $settings
184
- * @return array merge values to the array passed by
185
- */
186
- function loftloader_settings_default_value($settings){
187
- return array_merge((array)$settings, array(
188
- 'enable' => 'on',
189
- 'homepage' => '',
190
- 'settings' => array(
191
- 'background' => array(
192
- 'effect' => 'fade',
193
- 'color' => '#000000',
194
- 'opacity' => '95%'
195
- ),
196
- 'animation' => array(
197
- 'type' => 'pl-sun',
198
- 'color' => '#248acc',
199
- 'image' => array(
200
- 'url' => LOFTLOADER_URI . 'img/loftloader-logo.png',
201
- 'id' => ''
202
- ),
203
- 'width' => '76'
204
- )
205
- )
206
- ));
207
- }
208
- }
209
-
210
- if(!class_exists('LoftLoader_Setting_Manager')){
211
- /**
212
- * LoftLoader settings manager class
213
- *
214
- * @since LoftLoader version 1.0
215
- */
216
- require_once LOFTLOADER_ROOT . 'settings/form/class-loftloader-form-base.php';
217
- require_once LOFTLOADER_ROOT . 'settings/form/class-loftloader-checkbox.php';
218
- require_once LOFTLOADER_ROOT . 'settings/form/class-loftloader-preview.php';
219
- class LoftLoader_Setting_Manager {
220
- public $section_id; // Section unique id
221
- protected $section_title; // Section title
222
- protected $extra_info; // Other arguments needed when registered the sections
223
- public function __construct(){
224
- $this->section_id = 'loftloader-custom-settings';
225
- $this->section_title = esc_html__('LoftLoader Settings', 'loftloader');
226
- }
227
- /**
228
- * @description render setting section content
229
- */
230
- public function render_settings_section(){
231
- // Register the section
232
- echo '<h1 class="loftloader-option-section-title">' . $this->section_title . '</h1>';
233
- $fields = apply_filters('loftloader_settings_fields', array()); // Get all fields of current section
234
- if($fields && is_array($fields)){
235
- foreach($fields as $field){
236
- echo (isset($field['args']['nowrap']) && $field['args']['nowrap']) ? '' : '<div class="setting-group">';
237
- echo empty ($field['title']) ? '' : '<h3>' . $field['title'] . '</h3>';
238
- $this->render_settings_field(array('admin' => $field['args'], 'form' => $field['content']));
239
- echo (isset($field['args']['nowrap']) && $field['args']['nowrap']) ? '' : '</div>';
240
- }
241
- }
242
- $this->settings_fields(); // Show the hidden fields
243
- }
244
- /**
245
- * @description output the form elements of each fields registered
246
- */
247
- private function render_settings_field($args){
248
- $default = apply_filters('loftloader_settings_default_value', array());
249
- $default = isset($default) ? $default : array();
250
- $values = get_option($this->section_id, $default);
251
- $inList = !empty($args['admin']['nolist']) ? false : true; // Wrap the output html in ul list or not
252
-
253
- echo $inList ? '<ul class="form-list">' : '';
254
- foreach($args['form'] as $element){ // Output each form elements
255
- if(!empty($element)){
256
- $class = 'LoftLoader_' . $element['type']; // Get class name of element type
257
- // Get the value and name of each element
258
- if(strpos($element['name'], '[') !== false){
259
- $subs = strtr($element['name'], array(']' => '', '[' => ']['));
260
- $name = $this->section_id . '[' . $subs . ']'; // Name of each form element
261
- $value = $values;
262
- foreach(explode('][', $subs) as $sub){
263
- $value = !empty($value[$sub]) ? $value[$sub] : '';
264
- }
265
- }
266
- else{
267
- $name = $this->section_id . '[' . $element['name'] . ']'; // Name of each form element
268
- $value = !empty($values[$element['name']]) ? $values[$element['name']] : ''; // Value of each element
269
- }
270
- $extra = isset($element['extra']) ? $element['extra'] : array(); // Any extra arguments
271
- $options = isset($element['options']) ? $element['options'] : array(); // Options for some form elements, like checkbox/radio/select
272
- $newField = new $class($name, $element['title'], $element['description'], $options, $value, $extra); // Instantiate the element
273
- echo $inList ? '<li>' : '';
274
- $newField->render(); // Output the element
275
- echo $inList ? '</li>' : '';
276
- }
277
- }
278
- echo $inList ? '</ul>' : '';
279
- }
280
- /*
281
- * @description show the hidden input
282
- */
283
- private function settings_fields(){
284
- $page = $this->section_id;
285
- echo "<input type='hidden' name='option_page' value='" . $page . "' />";
286
- echo '<input type="hidden" name="action" value="update" />';
287
- wp_nonce_field("$page-options");
288
- }
289
- /**
290
- * @description register setting for saving custom settings
291
- */
292
- public function register_setting(){
293
- global $new_whitelist_options;
294
- $option_group = $option_name = $this->section_id;
295
- $new_whitelist_options[$option_group][] = $option_name;
296
- add_filter("sanitize_option_{$option_name}", array($this, 'save_custom_styles'));
297
- }
298
- /**
299
- * @description save the custom styles from the custom plugin settings
300
- */
301
- public function save_custom_styles($args){
302
- $css = '';
303
- if(isset($args['enable']) && ($args['enable'] === 'on')){
304
- $color = $args['settings']['animation']['color'];
305
- $bgColor = $args['settings']['background']['color'];
306
- $bgOpacity = intval($args['settings']['background']['opacity']) / 100;
307
- $css .= '#loftloader-wrapper .loader-section {' . PHP_EOL . "\t" . 'background: ' . $bgColor . ';' . PHP_EOL . "\t" . 'opacity: ' . $bgOpacity . ';' . PHP_EOL . '}' . PHP_EOL;
308
- switch($args['settings']['animation']['type']){
309
- case 'pl-sun':
310
- $css .= '#loftloader-wrapper.pl-sun #loader span,' . PHP_EOL . '#loftloader-wrapper.pl-sun #loader span:before {' . PHP_EOL . "\t" . 'background: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL;
311
- break;
312
- case 'pl-circles':
313
- $css .= '#loftloader-wrapper.pl-circles #loader span,' . PHP_EOL . '#loftloader-wrapper.pl-circles #loader:before,' . PHP_EOL . '#loftloader-wrapper.pl-circles #loader:after {' . PHP_EOL . "\t" . 'background: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL;
314
- break;
315
- case 'pl-wave':
316
- $css .= '#loftloader-wrapper.pl-wave #loader span,' . PHP_EOL . '#loftloader-wrapper.pl-wave #loader:before,' . PHP_EOL . '#loftloader-wrapper.pl-wave #loader:after {' . PHP_EOL . "\t" . 'background: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL;
317
- break;
318
- case 'pl-square':
319
- $css .= '#loftloader-wrapper.pl-square #loader span {' . PHP_EOL . "\t" . 'border: 4px solid ' . $color . ';' . PHP_EOL . '}' . PHP_EOL;
320
- break;
321
- case 'pl-frame':
322
- $css .= '#loftloader-wrapper.pl-frame #loader:before,' . PHP_EOL . '#loftloader-wrapper.pl-frame #loader:after,' . PHP_EOL . '#loftloader-wrapper.pl-frame #loader span:before,' . PHP_EOL . '#loftloader-wrapper.pl-frame #loader span:after {' . PHP_EOL . "\t" . 'background-color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL;
323
- break;
324
- case 'pl-imgloading':
325
- $css .= empty($args['settings']['animation']['width']) ? '' : '#loftloader-wrapper.pl-imgloading #loader {' . PHP_EOL . "\t" . 'width: ' . $args['settings']['animation']['width'] . 'px;' . PHP_EOL . '}' . PHP_EOL;
326
- $css .= '#loftloader-wrapper.pl-imgloading #loader span {' . PHP_EOL . "\t" . 'background-size: cover;' . PHP_EOL . "\t" . 'background-image: url(' . $args['settings']['animation']['image']['url'] . ');' . PHP_EOL . '}' . PHP_EOL;
327
- break;
328
- }
329
- }
330
- update_option('loftloader-custom-styles', $css);
331
- return $args;
332
- }
333
- /**
334
- * @description reset loader setting and custom styles
335
- */
336
- public function reset_settings(){
337
- delete_option('loftloader-custom-styles');
338
- delete_option('loftloader-custom-settings');
339
- }
340
- }
341
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
css/loftloader-animation.css DELETED
@@ -1,804 +0,0 @@
1
- /**
2
- * Description: Controls the styles for LoftLoader, including loading animation and ending animation.
3
- */
4
-
5
-
6
- /* ==========================================================================
7
- Basics
8
- ========================================================================== */
9
-
10
- #loftloader-wrapper {
11
- position: fixed;
12
- top: 0;
13
- left: 0;
14
- z-index: 9999;
15
- width: 100%;
16
- height: 100%;
17
- background: transparent !important;
18
- }
19
-
20
- .loaded #loftloader-wrapper {
21
- width: 0;
22
- height: 0;
23
- visibility: hidden;
24
- pointer-events: none;
25
- overflow: hidden;
26
- transition: all;
27
- transition-delay: 1s;
28
- }
29
-
30
- .loaded #loftloader-wrapper.slide-vertical {
31
- -webkit-transform: translate(-100%, 0);
32
- -ms-transform: translate(-100%, 0);
33
- transform: translate(-100%, 0);
34
- }
35
-
36
- #loftloader-wrapper .loader-inner {
37
- position: absolute;
38
- top: 50%;
39
- left: 50%;
40
- -webkit-transform: translate(-50%, -50%);
41
- -ms-transform: translate(-50%, -50%);
42
- transform: translate(-50%, -50%);
43
- z-index: 1001;
44
- text-align: center;
45
- }
46
-
47
- #loftloader-wrapper #loader {
48
- position: relative;
49
- z-index: 1002;
50
- }
51
-
52
-
53
- /* ==========================================================================
54
- Loading - Spinning Sun
55
- ========================================================================== */
56
-
57
- #loftloader-wrapper.pl-sun #loader {
58
- position: relative;
59
- width: 50px;
60
- height: 50px;
61
- }
62
-
63
- #loftloader-wrapper.pl-sun #loader span {
64
- position: absolute;
65
- top: 0;
66
- left: 0;
67
- display: block;
68
- width: 50px;
69
- height: 50px;
70
- background: #248ACC;
71
- opacity: 0.9;
72
- transform-origin: 50% 50%;
73
- -webkit-animation: spinReturn 4s ease infinite;
74
- animation: spinReturn 4s ease infinite;
75
- }
76
-
77
- #loftloader-wrapper.pl-sun #loader span:before {
78
- position: absolute;
79
- top: 0;
80
- left: 0;
81
- display: block;
82
- width: 100%;
83
- height: 100%;
84
- background: #248ACC;
85
- opacity: 0.9;
86
- content: '';
87
- transform-origin: 50% 50%;
88
- -webkit-transform: rotate(45deg);
89
- -ms-transform: rotate(45deg);
90
- transform: rotate(45deg);
91
- }
92
-
93
-
94
- /* ==========================================================================
95
- Loading - Luminous Circles
96
- ========================================================================== */
97
-
98
- #loftloader-wrapper.pl-circles #loader {
99
- position: relative;
100
- width: 100px;
101
- height: 60px;
102
- }
103
-
104
- #loftloader-wrapper.pl-circles #loader span,
105
- #loftloader-wrapper.pl-circles #loader:before,
106
- #loftloader-wrapper.pl-circles #loader:after {
107
- position: absolute;
108
- display: block;
109
- width: 10px;
110
- height: 10px;
111
- border-radius: 50%;
112
- opacity: 0.2;
113
- background: #248ACC;
114
- }
115
-
116
- #loftloader-wrapper.pl-circles #loader span {
117
- top: 50%;
118
- left: 50%;
119
- -webkit-transform: translate(-50%, -50%);
120
- -ms-transform: translate(-50%, -50%);
121
- transform: translate(-50%, -50%);
122
- -webkit-animation: lightUp 1.5s linear infinite 0.5s;
123
- animation: lightUp 1.5s linear infinite 0.5s;
124
- }
125
-
126
- #loftloader-wrapper.pl-circles #loader:before,
127
- #loftloader-wrapper.pl-circles #loader:after {
128
- content: "";
129
- }
130
-
131
- #loftloader-wrapper.pl-circles #loader:before {
132
- top: 50%;
133
- left: 0;
134
- -webkit-transform: translate(0, -50%);
135
- -ms-transform: translate(0, -50%);
136
- transform: translate(0, -50%);
137
- -webkit-animation: lightUp 1.5s linear infinite;
138
- animation: lightUp 1.5s linear infinite;
139
- }
140
-
141
- #loftloader-wrapper.pl-circles #loader:after {
142
- top: 50%;
143
- right: 0;
144
- -webkit-transform: translate(0, -50%);
145
- -ms-transform: translate(0, -50%);
146
- transform: translate(0, -50%);
147
- -webkit-animation: lightUp 1.5s linear infinite 1s;
148
- animation: lightUp 1.5s linear infinite 1s;
149
- }
150
-
151
- @-webkit-keyframes lightUp {
152
- 0% {
153
- opacity: 0.2;
154
- }
155
- 40% {
156
- opacity: 1;
157
- }
158
- 60% {
159
- opacity: 0.2;
160
- }
161
- 100% {
162
- opacity: 0.2;
163
- }
164
- }
165
-
166
- @keyframes lightUp {
167
- 0% {
168
- opacity: 0.2;
169
- }
170
- 40% {
171
- opacity: 1;
172
- }
173
- 60% {
174
- opacity: 0.2;
175
- }
176
- 100% {
177
- opacity: 0.2;
178
- }
179
- }
180
-
181
-
182
- /* ==========================================================================
183
- Loading - Wave
184
- ========================================================================== */
185
-
186
- #loftloader-wrapper.pl-wave #loader {
187
- position: relative;
188
- width: 60px;
189
- height: 30px;
190
- }
191
-
192
- #loftloader-wrapper.pl-wave #loader span,
193
- #loftloader-wrapper.pl-wave #loader:before,
194
- #loftloader-wrapper.pl-wave #loader:after {
195
- position: relative;
196
- display: inline-block;
197
- width: 6px;
198
- height: 100%;
199
- background: #248ACC;
200
- }
201
-
202
- #loftloader-wrapper.pl-wave #loader span {
203
- margin: 0 16px;
204
- -webkit-animation: wave 0.9s linear infinite 0.3s;
205
- animation: wave 0.9s linear infinite 0.3s;
206
- }
207
-
208
- #loftloader-wrapper.pl-wave #loader:before,
209
- #loftloader-wrapper.pl-wave #loader:after {
210
- content: "";
211
- }
212
-
213
- #loftloader-wrapper.pl-wave #loader:before {
214
- -webkit-animation: wave 0.9s linear infinite;
215
- animation: wave 0.9s linear infinite;
216
- }
217
-
218
- #loftloader-wrapper.pl-wave #loader:after {
219
- -webkit-animation: wave 0.9s linear infinite 0.6s;
220
- animation: wave 0.9s linear infinite 0.6s;
221
- }
222
-
223
- @-webkit-keyframes wave {
224
- 0% {
225
- -webkit-transform: scaleY(1);
226
- }
227
- 40% {
228
- -webkit-transform: scaleY(0.1);
229
- }
230
- 80% {
231
- -webkit-transform: scaleY(1);
232
- }
233
- 100% {
234
- -webkit-transform: scaleY(1);
235
- }
236
- }
237
-
238
- @keyframes wave {
239
- 0% {
240
- transform: scaleY(1);
241
- }
242
- 40% {
243
- transform: scaleY(0.1);
244
- }
245
- 80% {
246
- transform: scaleY(1);
247
- }
248
- 100% {
249
- transform: scaleY(1);
250
- }
251
- }
252
-
253
-
254
- /* ==========================================================================
255
- Loading - Spinning Square
256
- ========================================================================== */
257
-
258
- #loftloader-wrapper.pl-square #loader {
259
- position: relative;
260
- width: 50px;
261
- height: 50px;
262
- transform-origin: 50% 50%;
263
- -webkit-animation: spinReturn 4s ease infinite;
264
- animation: spinReturn 4s ease infinite;
265
- }
266
-
267
- #loftloader-wrapper.pl-square #loader span {
268
- position: absolute;
269
- top: 0;
270
- left: 0;
271
- display: block;
272
- width: 100%;
273
- height: 100%;
274
- border: 4px solid #248ACC;
275
- transform-origin: 50% 50%;
276
- -webkit-transform: rotate(45deg);
277
- -ms-transform: rotate(45deg);
278
- transform: rotate(45deg);
279
- }
280
-
281
- @-webkit-keyframes spinReturn {
282
- 0% {
283
- -webkit-transform: rotate(0deg);
284
- }
285
- 25% {
286
- -webkit-transform: rotate(225deg);
287
- }
288
- 50% {
289
- -webkit-transform: rotate(180deg);
290
- }
291
- 75% {
292
- -webkit-transform: rotate(405deg);
293
- }
294
- 100% {
295
- -webkit-transform: rotate(360deg);
296
- }
297
- }
298
-
299
- @keyframes spinReturn {
300
- 0% {
301
- transform: rotate(0deg);
302
- }
303
- 25% {
304
- transform: rotate(225deg);
305
- }
306
- 50% {
307
- transform: rotate(180deg);
308
- }
309
- 75% {
310
- transform: rotate(405deg);
311
- }
312
- 100% {
313
- transform: rotate(360deg);
314
- }
315
- }
316
-
317
-
318
- /* ==========================================================================
319
- Loading - Drawing Frame
320
- ========================================================================== */
321
-
322
- #loftloader-wrapper.pl-frame #loader {
323
- position: relative;
324
- width: 80px;
325
- height: 80px;
326
- }
327
-
328
- #loftloader-wrapper.pl-frame #loader span {
329
- position: absolute;
330
- top: 0;
331
- left: 0;
332
- display: block;
333
- width: 100%;
334
- height: 100%;
335
- }
336
-
337
- #loftloader-wrapper.pl-frame #loader img {
338
- position: absolute;
339
- top: 50%;
340
- left: 50%;
341
- display: block;
342
- max-width: 80%;
343
- max-height: 80%;
344
- -webkit-transform: translate(-50%, -50%);
345
- -ms-transform: translate(-50%, -50%);
346
- transform: translate(-50%, -50%);
347
- }
348
-
349
- #loftloader-wrapper.pl-frame #loader:before {
350
- position: absolute;
351
- top: 0;
352
- right: 0;
353
- left: auto;
354
- width: 100%;
355
- height: 4px;
356
- background: #248ACC;
357
- content: "";
358
- -webkit-animation: drawframeTop 4s linear infinite;
359
- animation: drawframeTop 4s linear infinite;
360
- }
361
-
362
- #loftloader-wrapper.pl-frame #loader:after {
363
- position: absolute;
364
- right: auto;
365
- bottom: 0;
366
- left: 0;
367
- width: 100%;
368
- height: 4px;
369
- background: #248ACC;
370
- content: "";
371
- -webkit-animation: drawframeBottom 4s linear infinite 1s;
372
- animation: drawframeBottom 4s linear infinite 1s;
373
- }
374
-
375
- #loftloader-wrapper.pl-frame #loader span:before {
376
- position: absolute;
377
- top: auto;
378
- right: 0;
379
- bottom: 0;
380
- width: 4px;
381
- height: 100%;
382
- background: #248ACC;
383
- content: "";
384
- -webkit-animation: drawframeRight 4s linear infinite 0.5s;
385
- animation: drawframeRight 4s linear infinite 0.5s;
386
- }
387
-
388
- #loftloader-wrapper.pl-frame #loader span:after {
389
- position: absolute;
390
- top: 0;
391
- bottom: auto;
392
- left: 0;
393
- width: 4px;
394
- height: 100%;
395
- background: #248ACC;
396
- content: "";
397
- -webkit-animation: drawframeLeft 4s linear infinite 1.5s;
398
- animation: drawframeLeft 4s linear infinite 1.5s;
399
- }
400
-
401
- @-webkit-keyframes drawframeTop {
402
- 0% {
403
- right: 0;
404
- left: auto;
405
- width: 100%;
406
- }
407
- 12.5% {
408
- right: 0;
409
- left: auto;
410
- width: 0%;
411
- }
412
- 50% {
413
- right: auto;
414
- left: 0;
415
- width: 0%;
416
- }
417
- 62.5% {
418
- right: auto;
419
- left: 0;
420
- width: 100%;
421
- }
422
- 100% {
423
- right: auto;
424
- left: 0;
425
- width: 100%;
426
- }
427
- }
428
-
429
- @keyframes drawframeTop {
430
- 0% {
431
- right: 0;
432
- left: auto;
433
- width: 100%;
434
- }
435
- 12.5% {
436
- right: 0;
437
- left: auto;
438
- width: 0%;
439
- }
440
- 50% {
441
- right: auto;
442
- left: 0;
443
- width: 0%;
444
- }
445
- 62.5% {
446
- right: auto;
447
- left: 0;
448
- width: 100%;
449
- }
450
- 100% {
451
- right: auto;
452
- left: 0;
453
- width: 100%;
454
- }
455
- }
456
-
457
- @-webkit-keyframes drawframeBottom {
458
- 0% {
459
- right: auto;
460
- left: 0;
461
- width: 100%;
462
- }
463
- 12.5% {
464
- right: auto;
465
- left: 0;
466
- width: 0%;
467
- }
468
- 50% {
469
- right: 0;
470
- left: auto;
471
- width: 0%;
472
- }
473
- 62.5% {
474
- right: 0;
475
- left: auto;
476
- width: 100%;
477
- }
478
- 100% {
479
- right: 0;
480
- left: auto;
481
- width: 100%;
482
- }
483
- }
484
-
485
- @keyframes drawframeBottom {
486
- 0% {
487
- right: auto;
488
- left: 0;
489
- width: 100%;
490
- }
491
- 12.5% {
492
- right: auto;
493
- left: 0;
494
- width: 0%;
495
- }
496
- 50% {
497
- right: 0;
498
- left: auto;
499
- width: 0%;
500
- }
501
- 62.5% {
502
- right: 0;
503
- left: auto;
504
- width: 100%;
505
- }
506
- 100% {
507
- right: 0;
508
- left: auto;
509
- width: 100%;
510
- }
511
- }
512
-
513
- @-webkit-keyframes drawframeRight {
514
- 0% {
515
- top: auto;
516
- bottom: 0;
517
- height: 100%;
518
- }
519
- 12.5% {
520
- top: auto;
521
- bottom: 0;
522
- height: 0%;
523
- }
524
- 50% {
525
- top: 0;
526
- bottom: auto;
527
- height: 0%;
528
- }
529
- 62.5% {
530
- top: 0;
531
- bottom: auto;
532
- height: 100%;
533
- }
534
- 100% {
535
- top: 0;
536
- bottom: auto;
537
- height: 100%;
538
- }
539
- }
540
-
541
- @keyframes drawframeRight {
542
- 0% {
543
- top: auto;
544
- bottom: 0;
545
- height: 100%;
546
- }
547
- 12.5% {
548
- top: auto;
549
- bottom: 0;
550
- height: 0%;
551
- }
552
- 50% {
553
- top: 0;
554
- bottom: auto;
555
- height: 0%;
556
- }
557
- 62.5% {
558
- top: 0;
559
- bottom: auto;
560
- height: 100%;
561
- }
562
- 100% {
563
- top: 0;
564
- bottom: auto;
565
- height: 100%;
566
- }
567
- }
568
-
569
- @-webkit-keyframes drawframeLeft {
570
- 0% {
571
- top: 0;
572
- bottom: auto;
573
- height: 100%;
574
- }
575
- 12.5% {
576
- top: 0;
577
- bottom: auto;
578
- height: 0%;
579
- }
580
- 50% {
581
- top: auto;
582
- bottom: 0;
583
- height: 0%;
584
- }
585
- 62.5% {
586
- top: auto;
587
- bottom: 0;
588
- height: 100%;
589
- }
590
- 100% {
591
- top: auto;
592
- bottom: 0;
593
- height: 100%;
594
- }
595
- }
596
-
597
- @keyframes drawframeLeft {
598
- 0% {
599
- top: 0;
600
- bottom: auto;
601
- height: 100%;
602
- }
603
- 12.5% {
604
- top: 0;
605
- bottom: auto;
606
- height: 0%;
607
- }
608
- 50% {
609
- top: auto;
610
- bottom: 0;
611
- height: 0%;
612
- }
613
- 62.5% {
614
- top: auto;
615
- bottom: 0;
616
- height: 100%;
617
- }
618
- 100% {
619
- top: auto;
620
- bottom: 0;
621
- height: 100%;
622
- }
623
- }
624
-
625
-
626
- /* ==========================================================================
627
- Loading - Loading Custom Image
628
- ========================================================================== */
629
-
630
- #loftloader-wrapper.pl-imgloading #loader {
631
- position: relative;
632
- width: auto;
633
- height: auto;
634
- max-width: 200px;
635
- }
636
-
637
- #loftloader-wrapper.pl-imgloading #loader img {
638
- position: relative;
639
- z-index: 1;
640
- display: block;
641
- width: 100%;
642
- height: auto;
643
- opacity: 0.3;
644
- }
645
-
646
- #loftloader-wrapper.pl-imgloading #loader span {
647
- position: absolute;
648
- bottom: 0;
649
- left: 0;
650
- z-index: 3;
651
- display: block;
652
- width: 100%;
653
- height: 0%;
654
- background-position: center bottom;
655
- background-repeat: no-repeat;
656
- background-size: cover;
657
- -webkit-animation: imgLoading 6s linear infinite;
658
- animation: imgLoading 6s linear infinite;
659
- transition: 0s;
660
- }
661
-
662
- @-webkit-keyframes imgLoading {
663
- 0% {
664
- width: 100%;
665
- height: 0%;
666
- opacity: 1;
667
- }
668
- 95% {
669
- width: 100%;
670
- height: 100%;
671
- opacity: 1;
672
- }
673
-
674
- 100% {
675
- width: 100%;
676
- height: 100%;
677
- opacity: 0;
678
- }
679
- }
680
-
681
- @keyframes imgLoading {
682
- 0% {
683
- width: 100%;
684
- height: 0%;
685
- opacity: 1;
686
- }
687
- 95% {
688
- width: 100%;
689
- height: 100%;
690
- opacity: 1;
691
- }
692
-
693
- 100% {
694
- width: 100%;
695
- height: 100%;
696
- opacity: 0;
697
- }
698
- }
699
-
700
-
701
- /**
702
- * Hide the preloader elements after the page content has been loaded.
703
- */
704
-
705
- .loaded #loader {
706
- opacity: 0;
707
- transition: all 0.3s ease-out;
708
- }
709
-
710
-
711
- /* ==========================================================================
712
- Background and Ending
713
- ========================================================================== */
714
-
715
- #loftloader-wrapper .loader-section {
716
- position: fixed;
717
- top: 0;
718
- z-index: 1000;
719
- background: #000;
720
- width: 50%;
721
- height: 100%;
722
- opacity: 0.95;
723
- }
724
-
725
- #loftloader-wrapper .loader-section.section-left {
726
- left: 0;
727
- transition: all 0s;
728
- will-change: transform;
729
- }
730
-
731
- .loaded #loftloader-wrapper .loader-section.section-left {
732
- -webkit-transform: translateX(-100%);
733
- -ms-transform: translateX(-100%);
734
- transform: translateX(-100%);
735
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
736
- }
737
-
738
- #loftloader-wrapper .loader-section.section-right {
739
- right: 0;
740
- transition: all 0s;
741
- will-change: transform;
742
- }
743
-
744
- .loaded #loftloader-wrapper .loader-section.section-right {
745
- -webkit-transform: translateX(100%);
746
- -ms-transform: translateX(100%);
747
- transform: translateX(100%);
748
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
749
- }
750
-
751
- #loftloader-wrapper .loader-section.section-up {
752
- width: 100%;
753
- height: 50%;
754
- transition: all 0s;
755
- will-change: transform;
756
- }
757
-
758
- .loaded #loftloader-wrapper .loader-section.section-up {
759
- -webkit-transform: translateY(-100%);
760
- -ms-transform: translateY(-100%);
761
- transform: translateY(-100%);
762
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
763
- }
764
-
765
- #loftloader-wrapper .loader-section.section-down {
766
- top: auto;
767
- bottom: 0;
768
- left: 0;
769
- width: 100%;
770
- height: 50%;
771
- transition: all 0s;
772
- will-change: transform;
773
- }
774
-
775
- .loaded #loftloader-wrapper .loader-section.section-down {
776
- -webkit-transform: translateY(100%);
777
- -ms-transform: translateY(100%);
778
- transform: translateY(100%);
779
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
780
- }
781
-
782
- #loftloader-wrapper .loader-section.section-fade {
783
- width: 100%;
784
- transition: all 0s;
785
- will-change: opacity;
786
- }
787
-
788
- .loaded #loftloader-wrapper .loader-section.section-fade {
789
- opacity: 0 !important;
790
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
791
- }
792
-
793
- #loftloader-wrapper .loader-section.section-slide-up {
794
- width: 100%;
795
- transition: all 0s;
796
- will-change: transform;
797
- }
798
-
799
- .loaded #loftloader-wrapper .loader-section.section-slide-up {
800
- -webkit-transform: translateY(-100%);
801
- -ms-transform: translateY(-100%);
802
- transform: translateY(-100%);
803
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
804
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
css/settings/loftloader-media.css DELETED
@@ -1,23 +0,0 @@
1
- /**
2
- * Description: Hide some widgets of WP Media Panel for use in LoftLoader
3
- */
4
-
5
- #loftloader-image-uploader .media-frame-content,
6
- #loftloader-image-uploader .media-frame-router,
7
- #loftloader-image-uploader .media-frame-title,
8
- #loftloader-image-uploader .media-frame-toolbar {
9
- left: 0;
10
- }
11
-
12
- #loftloader-image-uploader .media-frame-menu,
13
- #loftloader-image-uploader .media-toolbar-secondary,
14
- #loftloader-image-uploader .attachment-details,
15
- #loftloader-image-uploader .attachment-display-settings h3 ~ .setting,
16
- #loftloader-image-uploader .attachment-display-settings h2 ~ .setting {
17
- display: none;
18
- }
19
-
20
- #loftloader-image-uploader .attachment-display-settings h3 ~ .setting:last-child,
21
- #loftloader-image-uploader .attachment-display-settings h2 ~ .setting:last-child {
22
- display: block;
23
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
css/settings/loftloader-settings.css DELETED
@@ -1,564 +0,0 @@
1
- /**
2
- * Description: Controls the layouts and styles of LoftLoader settings page.
3
- */
4
-
5
- /**
6
- * Table of Contents:
7
- *
8
- * 1.0 - Basics
9
- *
10
- * 2.0 - Panel Footer
11
- *
12
- * 3.0 - Panel Content
13
- *
14
- * 4.0 - Restyle UI Slider
15
- *
16
- * 5.0 - Restyle Color Picker
17
- *
18
- * 6.0 - Loader Preview Freame
19
- *
20
- * 7.0 - Lodaer Preview Frame - Background and Ending
21
- *
22
- * 8.0 - Media Queries
23
- */
24
-
25
-
26
- /* ==========================================================================
27
- 1.0 Basics
28
- ========================================================================== */
29
-
30
- .loftloader-options-panel {
31
- position: relative;
32
- float: left;
33
- width: 75%;
34
- padding: 20px;
35
- box-sizing: border-box;
36
- overflow: auto;
37
- font-size: 13px;
38
- }
39
-
40
- #loftloader-pro-ad-wrapper {
41
- float: left;
42
- width: 25%;
43
- }
44
-
45
- #loftloader-pro-ad-wrapper img {
46
- width: 100%;
47
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
48
- }
49
-
50
- .loftloader-options-panel * {
51
- margin: 0 auto;
52
- padding: 0;
53
- box-sizing: border-box;
54
- }
55
-
56
- h1.loftloader-option-section-title {
57
- position: relative;
58
- margin-bottom: 24px;
59
- border-bottom: 1px solid #CCC;
60
- padding-bottom: 20px;
61
- }
62
-
63
- .loftloader-option-section-title:after {
64
- position: absolute;
65
- bottom: -2px;
66
- left: 0;
67
- display: block;
68
- width: 100%;
69
- height: 1px;
70
- background: #FFF;
71
- content: "";
72
- }
73
-
74
- .loftloader-options-panel .bg-img-holder {
75
- display: inline-block;
76
- background: rgba(0, 0, 0, 0.1);
77
- border: 1px solid rgba(0, 0, 0, 0.05);
78
- margin-right: 12px;
79
- cursor: pointer;
80
- }
81
-
82
- .loftloader-options-panel .bg-img-holder:hover {
83
- border-color: #248ACC;
84
- }
85
-
86
- .loftloader-options-panel .bg-img-remove {
87
- display: inline-block;
88
- cursor: pointer;
89
- color: #248ACC;
90
- }
91
-
92
- .loftloader-options-panel .bg-img-remove:hover {
93
- text-decoration: underline;
94
- }
95
-
96
- .loftloader-options-panel .bg-img-holder img {
97
- display: block;
98
- width: auto;
99
- height: auto;
100
- max-width: 120px;
101
- max-height: 120px;
102
- margin-left: 0;
103
- }
104
-
105
- .loftloader-options-panel input[type="text"],
106
- .loftloader-options-panel input[type="number"] {
107
- width: 80px;
108
- padding: 3px 10px;
109
- }
110
-
111
- /**
112
- * Hide elements.
113
- */
114
-
115
- .loftloader-options-panel .hide {
116
- display: none !important;
117
- }
118
-
119
-
120
- /* ==========================================================================
121
- 2.0 Panel Footer
122
- ========================================================================== */
123
-
124
- .loftloader-options-panel .panel-footer {
125
- position: relative;
126
- overflow: hidden;
127
- margin: 0;
128
- padding: 24px 0;
129
- border-top: 1px solid #CCC;
130
- }
131
-
132
- .loftloader-options-panel .panel-footer:before {
133
- position: absolute;
134
- top: 0;
135
- left: 0;
136
- display: block;
137
- width: 100%;
138
- height: 1px;
139
- background: #FFF;
140
- content: "";
141
- }
142
-
143
- .loftloader-options-panel .panel-footer p.submit {
144
- float: right;
145
- margin: 0;
146
- padding: 0;
147
- }
148
-
149
- .loftloader-options-panel .panel-footer p.reset {
150
- float: left;
151
- margin: 0;
152
- }
153
-
154
-
155
- /* ==========================================================================
156
- 3.0 Panel Content
157
- ========================================================================== */
158
-
159
- .loftloader-options-panel .setting-group {
160
- margin-bottom: 30px;
161
- background: #FFF;
162
- border: 1px solid #DDD;
163
- border-radius: 5px;
164
- box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
165
- }
166
-
167
- .loftloader-options-panel .setting-group h3 {
168
- margin: 0;
169
- padding: 10px 20px;
170
- background: rgba(0, 0, 0, 0.03);
171
- border-bottom: 1px solid #DDD;
172
- border-top-left-radius: 5px;
173
- border-top-right-radius: 5px;
174
- }
175
-
176
- .loftloader-options-panel ul {
177
- margin-left: 0;
178
- padding: 24px 20px;
179
- list-style: none;
180
- }
181
-
182
- .loftloader-options-panel ul li {
183
- position: relative;
184
- display: block;
185
- padding-top: 20px;
186
- margin: 0 0 24px;
187
- border-top: 1px solid #EEE;
188
- overflow: hidden;
189
- }
190
-
191
- .loftloader-options-panel ul li:first-child {
192
- padding-top: 0;
193
- border-top: none;
194
- }
195
-
196
- .loftloader-options-panel ul li:last-child {
197
- margin-bottom: 0;
198
- }
199
-
200
- .loftloader-options-panel ul.form-list li:after {
201
- position: relative;
202
- display: block;
203
- clear: both;
204
- content: "";
205
- }
206
-
207
- .loftloader-options-panel ul.form-list li .list-title,
208
- .loftloader-options-panel ul.form-list li .list-content {
209
- float: left;
210
- width: 50%;
211
- }
212
-
213
- .loftloader-options-panel ul.form-list li .list-title {
214
- padding-right: 50px;
215
- }
216
-
217
- .loftloader-options-panel ul.form-list li .list-title h4 {
218
- margin: 0;
219
- font-size: 14px;
220
- line-height: 28px;
221
- }
222
-
223
- .loftloader-options-panel span.description {
224
- font-weight: normal;
225
- color: #999;
226
- font-size: 12px;
227
- font-style: normal;
228
- line-height: 1em;
229
- }
230
-
231
- /* Restyle Checkbox
232
- ========================================================================== */
233
-
234
- .loftloader-options-panel label {
235
- position: relative;
236
- display: inline-block;
237
- height: 30px;
238
- }
239
-
240
- .loftloader-options-panel input[type="checkbox"] {
241
- position: relative;
242
- z-index: 9;
243
- opacity: 0;
244
- }
245
-
246
- .loftloader-options-panel .on-off {
247
- position: absolute;
248
- top: 2px;
249
- left: 0;
250
- z-index: 1;
251
- display: inline-block;
252
- width: 56px;
253
- height: 26px;
254
- padding: 1px;
255
- border-radius: 13px;
256
- background: #EEE;
257
- border: 1px solid #DDD;
258
- transition: 0.3s;
259
- box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
260
- }
261
-
262
- .loftloader-options-panel .on-off span {
263
- -webkit-transform: translateX(30px);
264
- -ms-transform: translateX(30px);
265
- transform: translateX(30px);
266
- display: inline-block;
267
- width: 22px;
268
- height: 22px;
269
- background: #FFF;
270
- border-radius: 50%;
271
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
272
- transition: 0.3s;
273
- }
274
-
275
- .loftloader-options-panel input[type="checkbox"]:checked + .on-off {
276
- background: rgba(48, 154, 213, 0.7);
277
- border-color: #248ACC;
278
- }
279
-
280
- .loftloader-options-panel input[type="checkbox"]:focus + .on-off {
281
- border-color: #5B9DD9;
282
- box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
283
- }
284
-
285
- .loftloader-options-panel input[type="checkbox"]:checked + .on-off span {
286
- -webkit-transform: translateX(0);
287
- -ms-transform: translateX(0);
288
- transform: translateX(0);
289
- }
290
-
291
-
292
- /* ==========================================================================
293
- 4.0 Restyle UI Slider
294
- ========================================================================== */
295
-
296
- .loftloader-options-panel .ui-slider.loader-ui-slider {
297
- position: relative;
298
- float: left;
299
- display: block;
300
- width: calc(100% - 120px);
301
- height: 24px;
302
- margin: 3px 0 0;
303
- background: none;
304
- border: none;
305
- border-radius: 0;
306
- cursor: pointer;
307
- }
308
-
309
- .loftloader-options-panel .ui-slider.loader-ui-slider:before {
310
- position: absolute;
311
- top: 50%;
312
- left: 0;
313
- display: block;
314
- width: 100%;
315
- height: 2px;
316
- background: #DCDCDC;
317
- content: "";
318
- }
319
-
320
- .loftloader-options-panel label.amount {
321
- float: left;
322
- margin-right: 20px;
323
- }
324
-
325
- .loftloader-options-panel .ui-slider.loader-ui-slider .ui-slider-range-min {
326
- top: 50%;
327
- height: 2px;
328
- background: #248ACC;
329
- border-radius: 0;
330
- }
331
-
332
- .loftloader-options-panel .ui-slider.loader-ui-slider .ui-slider-handle {
333
- top: 8px;
334
- width: 10px;
335
- height: 10px;
336
- background: #248ACC;
337
- box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
338
- border: 1px solid #248ACC;
339
- border-radius: 50%;
340
- outline: none;
341
- cursor: pointer;
342
- }
343
-
344
- .loftloader-options-panel .ui-slider.loader-ui-slider .ui-slider-handle.ui-state-focus {
345
- border-color: #5B9DD9;
346
- box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
347
- }
348
-
349
-
350
- /* ==========================================================================
351
- 5.0 Restyle Color Picker
352
- ========================================================================== */
353
-
354
- .loftloader-options-panel .wp-picker-container .wp-color-result {
355
- height: 28px;
356
- margin-right: 6px;
357
- padding-left: 30px;
358
- border: 1px solid #DDD;
359
- border-radius: 5px;
360
- box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);
361
- line-height: 26px;
362
- }
363
-
364
- .loftloader-options-panel .wp-picker-container .wp-color-result:after {
365
- height: 25px;
366
- margin: 0;
367
- padding: 0 12px 1px;
368
- background: #F9F9F9;
369
- border-left: 1px solid #DDD;
370
- -webkit-appearance: none;
371
- border-radius: 0 4px 4px 0;
372
- color: #999;
373
- vertical-align: top;
374
- font-size: 13px;
375
- line-height: 26px;
376
- }
377
-
378
- .loftloader-options-panel .wp-picker-container .wp-color-result:focus {
379
- border-color: #5B9DD9;
380
- box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
381
- }
382
-
383
- .loftloader-options-panel .wp-picker-container .wp-picker-open + .wp-picker-input-wrap {
384
- margin-top: 2px;
385
- }
386
-
387
-
388
- /* ==========================================================================
389
- 6.0 Loader Preview Frame
390
- ========================================================================== */
391
-
392
- .loftloader-options-panel .preview-section {
393
- position: relative;
394
- margin-top: 40px;
395
- }
396
-
397
- .loftloader-options-panel .preview-wrapper {
398
- margin-bottom: 40px;
399
- }
400
-
401
- .loftloader-options-panel .preview-settings {
402
- position: relative;
403
- display: block;
404
- overflow: hidden;
405
- }
406
-
407
- .loftloader-options-panel .preview-settings .setting-group {
408
- float: left;
409
- width: 48%;
410
- margin-right: 2%;
411
- }
412
-
413
- .loftloader-options-panel .preview-settings .setting-group:last-of-type {
414
- margin-right: 0;
415
- margin-left: 2%;
416
- }
417
-
418
- .loftloader-options-panel .preview-settings h4 {
419
- margin-bottom: 0.5em;
420
- }
421
-
422
- .loftloader-options-panel .preview-settings .setting-group li {
423
- margin-bottom: 24px;
424
- }
425
-
426
- .loftloader-options-panel .preview-frame {
427
- position: relative;
428
- width: 100%;
429
- height: 300px;
430
- margin-top: 30px;
431
- border: 1px solid #DDD;
432
- overflow: hidden;
433
- box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
434
- }
435
-
436
- .loftloader-options-panel .preview-frame:after {
437
- position: absolute;
438
- top: 50%;
439
- left: 50%;
440
- -webkit-transform: translate(-50%, -50%);
441
- -ms-transform: translate(-50%, -50%);
442
- transform: translate(-50%, -50%);
443
- display: block;
444
- width: 100%;
445
- height: auto;
446
- color: #DDD;
447
- content: "YOUR SITE CONTENT";
448
- font-weight: bold;
449
- font-size: 36px;
450
- text-align: center;
451
- line-height: 1.5;
452
- letter-spacing: 0.2em;
453
- }
454
-
455
- /**
456
- * Hide the loading animation on hover.
457
- */
458
-
459
- .loftloader-options-panel .preview-frame:hover #loader {
460
- opacity: 0;
461
- transition: all 0.3s ease-out;
462
- }
463
-
464
-
465
- /* ==========================================================================
466
- 7.0 Lodaer Preview Frame - Background and Ending
467
- ========================================================================== */
468
-
469
- .loftloader-options-panel .preview-frame #loftloader-wrapper {
470
- position: relative;
471
- }
472
-
473
- .loftloader-options-panel .preview-frame #loftloader-wrapper .loader-section {
474
- position: absolute;
475
- }
476
-
477
- .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-left {
478
- -webkit-transform: translateX(-100%);
479
- -ms-transform: translateX(-100%);
480
- transform: translateX(-100%);
481
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
482
- }
483
-
484
- .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-right {
485
- -webkit-transform: translateX(100%);
486
- -ms-transform: translateX(100%);
487
- transform: translateX(100%);
488
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
489
- }
490
-
491
- .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-up {
492
- -webkit-transform: translateY(-100%);
493
- -ms-transform: translateY(-100%);
494
- transform: translateY(-100%);
495
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
496
- }
497
- .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-down {
498
- -webkit-transform: translateY(100%);
499
- -ms-transform: translateY(100%);
500
- transform: translateY(100%);
501
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
502
- }
503
-
504
- .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-fade {
505
- opacity: 0 !important;
506
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
507
- }
508
-
509
- .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-slide-up {
510
- -webkit-transform: translateY(-100%);
511
- -ms-transform: translateY(-100%);
512
- transform: translateY(-100%);
513
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
514
- }
515
-
516
-
517
- /* ==========================================================================
518
- 8.0 Media Queries
519
- ========================================================================== */
520
-
521
- @media screen and (max-width : 800px) {
522
- .loftloader-options-panel .preview-settings .setting-group {
523
- float: none;
524
- width: 100%;
525
- margin-right: 0;
526
- }
527
-
528
- .loftloader-options-panel .preview-settings .setting-group:last-of-type {
529
- margin-left: 0;
530
- }
531
- }
532
-
533
- @media screen and (max-width : 640px) {
534
- .loftloader-options-panel,
535
- #loftloader-pro-ad-wrapper {
536
- float: none;
537
- width: 100%;
538
- }
539
- .loftloader-options-panel ul.form-list li .list-title,
540
- .loftloader-options-panel ul.form-list li .list-content {
541
- float: none;
542
- width: 100%;
543
- }
544
-
545
- .loftloader-options-panel ul.form-list li .list-title {
546
- margin-bottom: 10px;
547
- padding-right: 0;
548
- }
549
-
550
- .loftloader-options-panel .ui-slider.loader-ui-slider {
551
- width: 100%;
552
- }
553
- }
554
-
555
- @media only screen and (max-width : 340px) {
556
- .loftloader-options-panel .panel-footer p.submit,
557
- .loftloader-options-panel .panel-footer p.reset {
558
- float: none;
559
- }
560
-
561
- .loftloader-options-panel .panel-footer p.submit {
562
- margin-bottom: 10px;
563
- }
564
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
front/class-loftloader-front.php DELETED
@@ -1,98 +0,0 @@
1
- <?php
2
- // Not allowed by directly accessing.
3
- if(!defined('ABSPATH')){
4
- die('Access not allowed!');
5
- }
6
-
7
- /**
8
- * Main class for front display
9
- *
10
- * @package LoftLoader
11
- * @link http://www.loftocean.com/
12
- * @author Suihai Huang from Loft Ocean Team
13
-
14
- * @since version 1.0
15
- */
16
-
17
- if(!class_exists('LoftLoader_Front')){
18
- class LoftLoader_Front{
19
- private $loader_enabled; // Flag to tell whether loftloader enabled
20
- private $homepage_only; // Flag to tell show loftloader on homepage only
21
- private $loader_settings; // Get the loader settings
22
- public function __construct(){
23
- $this->get_settings();
24
- if($this->loader_enabled){
25
- if(!$this->homepage || is_front_page()){
26
- add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
27
- add_action('wp_head', array($this, 'loader_custom_styles'), 100);
28
- add_action('wp_footer', array($this, 'show_loader_html'));
29
- }
30
- }
31
- }
32
- /**
33
- * @description get the plugin settings
34
- */
35
- public function get_settings(){
36
- $default = apply_filters('loftloader_settings_default_value', array());
37
- $settings = get_option('loftloader-custom-settings', $default);
38
- $this->loader_enabled = (!empty($settings['enable']) && ($settings['enable'] == 'on')) ? true : false;
39
- $this->homepage = (!empty($settings['homepage']) && ($settings['homepage'] == 'on')) ? true : false;
40
- $this->loader_settings = $settings;
41
- }
42
- /**
43
- * @description enqueue the scripts and styles for front end
44
- */
45
- public function enqueue_scripts(){
46
- wp_enqueue_script('loftloader-front-main', LOFTLOADER_JS_URI . 'front/loftloader.js', array('jquery'), '1.0', true);
47
- wp_enqueue_style('loftloader-animation');
48
- }
49
- /**
50
- * @description custom css for front end
51
- */
52
- public function loader_custom_styles(){
53
- $styles = get_option('loftloader-custom-styles', '');
54
- echo empty($styles) ? '' : '<style type="text/css">' . $styles . '</style>';
55
- ob_start();
56
- }
57
- /**
58
- * @description loftloader html
59
- */
60
- public function show_loader_html(){
61
- $loader = $this->loader_settings['settings']; // Preloader settings
62
- $background = $loader['background']; // Preloader background settings
63
- $animation = $loader['animation']; // Preloader animation settings
64
- $html = '<div id="loftloader-wrapper" class="' . $animation['type'] . '">';
65
- $html .= '<div class="loader-inner"><div id="loader">';
66
- $html .= in_array($animation['type'], array('pl-frame', 'pl-imgloading'))
67
- ? '<span></span><img srcset="' . $animation['image']['url'] . '" src="' . $animation['image']['url'] . '" alt="preloder">' : '<span></span>';
68
- $html .= '</div></div>';
69
- switch($background['effect']){
70
- case 'fade':
71
- $html .= '<div class="loader-section section-fade"></div>';
72
- break;
73
- case 'slide-up':
74
- $html .= '<div class="loader-section section-slide-up"></div>';
75
- break;
76
- case 'slide-up-down':
77
- $html .= '<div class="loader-section section-up"></div>';
78
- $html .= '<div class="loader-section section-down"></div>';
79
- break;
80
- default:
81
- $html .= '<div class="loader-section section-left">';
82
- $html .= '</div><div class="loader-section section-right"></div>';
83
- }
84
- $html .= '</div>';
85
-
86
- $origin = ob_get_clean();
87
- $regexp ='/<body[^>]*>/i';
88
- if(preg_match($regexp, $origin, $match)){
89
- $html = $match[0] . $html;
90
- echo preg_replace($regexp, $html, $origin);
91
- }
92
- else{
93
- echo $origin . $html;
94
- }
95
- }
96
- }
97
- new LoftLoader_Front();
98
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
img/pro-ad.jpg DELETED
Binary file
inc/class-loftloader-any-page.php ADDED
@@ -0,0 +1,89 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ if(!class_exists('LoftLoader_Any_Page') && !class_exists('LoftLoader_Any_Page_Filter')){
3
+ class LoftLoader_Any_Page{
4
+ public function __construct(){
5
+ add_action('add_meta_boxes', array($this, 'register_meta_boxes'));
6
+ add_action('save_post', array($this, 'save_meta'), 10, 3);
7
+
8
+ $this->alter_loftloader();
9
+ }
10
+ // Register loftloader shortcode meta box
11
+ public function register_meta_boxes(){
12
+ add_meta_box('loftloader_any_page_meta', esc_html__('LoftLoader Any Page Shortcode', 'loftloader-any-page'), array($this, 'metabox_callback'), 'page', 'advanced');
13
+ }
14
+ // Show meta box html
15
+ public function metabox_callback($post){
16
+ $shortcode = get_post_meta($post->ID, 'loftloader_page_shortcode', true);
17
+ $html = '<textarea name="loftloader_page_shortcode" style="width: 100%;" rows="4">' . str_replace('/\\"/g', '\\\\"', $shortcode) . '</textarea>';
18
+ $html .= '<input type="hidden" name="loftloader_any_page_nonce" value="' . wp_create_nonce('loftloader_any_page_nonce') . '" />';
19
+ echo $html;
20
+ }
21
+ // Save loftloader shortcode meta
22
+ public function save_meta($post_id, $post, $update){
23
+ if(empty($update) || ($post->post_type !== 'page')) return;
24
+
25
+ if((wp_verify_nonce($_REQUEST['loftloader_any_page_nonce'], 'loftloader_any_page_nonce') !== false) && ($post->post_type === 'page')){
26
+ update_post_meta($post_id, 'loftloader_page_shortcode', sanitize_text_field($_REQUEST['loftloader_page_shortcode']));
27
+ }
28
+ return $_post_id;
29
+ }
30
+
31
+ // Initial LoftLoader Pro Shortcode actions
32
+ private function alter_loftloader(){
33
+ new LoftLoader_Any_Page_Filter();
34
+ }
35
+ }
36
+
37
+ class LoftLoader_Any_Page_Filter{
38
+ private $defaults = array();
39
+ private $page_settings = array();
40
+ private $page_enabled = false;
41
+ private $is_customize = false;
42
+ public function __construct(){
43
+ add_filter('loftloader_get_loader_setting', array($this, 'get_loader_setting'), 10, 2);
44
+ add_filter('loftloader_loader_enabled', array($this, 'loader_enabled'));
45
+ add_action('loftloader_settings', array($this, 'loader_settings'));
46
+ }
47
+ /**
48
+ * @description get the plugin settings
49
+ */
50
+ public function loader_settings(){
51
+ global $wp_customize, $loftloader_default_settings;
52
+ $this->is_customize = isset($wp_customize) ? true : false;
53
+ if(((is_front_page() || is_home()) && (get_option('show_on_front', false) == 'page')) || is_page()){
54
+ $page = get_queried_object();
55
+ if(($atts = $this->get_loader_attributes($page->ID)) !== false){
56
+ $this->page_settings = array_merge($loftloader_default_settings, $atts);
57
+ $this->page_enabled = ($atts['loftloader_main_switch'] === 'on');
58
+ }
59
+ }
60
+ }
61
+ /**
62
+ * @description helper function to get shortcode attributes
63
+ */
64
+ private function get_loader_attributes($page_id){
65
+ $loader = get_post_meta($page_id, 'loftloader_page_shortcode', true);
66
+ $loader = trim($loader);
67
+ if(!empty($loader)){
68
+ $loader = substr($loader, 1, -1);
69
+ return shortcode_parse_atts($loader);
70
+ }
71
+ return false;
72
+ }
73
+ /**
74
+ * Helper function to test whether show loftloader
75
+ * @return boolean return true if loftloader enabled and display on current page, otherwise false
76
+ */
77
+ public function loader_enabled(){
78
+ return $this->page_enabled;
79
+ }
80
+ /**
81
+ * Helper function get setting option
82
+ */
83
+ public function get_loader_setting($setting_value, $setting_id){
84
+ return ($this->page_enabled && !$this->is_customize && isset($this->page_settings[$setting_id])) ? $this->page_settings[$setting_id] : $setting_value;
85
+ }
86
+ }
87
+
88
+ new LoftLoader_Any_Page();
89
+ }
inc/class-loftloader-customize.php ADDED
@@ -0,0 +1,302 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ if(!class_exists('LoftLoader_Customize')){
3
+ /**
4
+ * Load the Loftloader lite customize related functions
5
+ *
6
+ * @author Loft.Ocean
7
+ * @since 2.0.0
8
+ */
9
+ class LoftLoader_Customize{
10
+ public function __construct(){
11
+ $this->load_default_settings();
12
+ if(loftloader_is_customize()){
13
+ $this->load_customize_controls();
14
+ add_action('customize_controls_init', array($this, 'remove_sections'), 1000);
15
+ add_action('customize_controls_enqueue_scripts', array($this, 'customize_scripts'));
16
+ add_action('customize_preview_init', array($this, 'preview_scripts'));
17
+ }
18
+ }
19
+
20
+ private function load_default_settings(){
21
+ require_once LOFTLOADER_ROOT . 'inc/configs/default-settings.php';
22
+ }
23
+
24
+ public function load_customize_controls(){
25
+ $config_dir = LOFTLOADER_ROOT . 'inc/configs/';
26
+ require_once $config_dir . 'customize-main.php';
27
+ require_once $config_dir . 'customize-range.php';
28
+ require_once $config_dir . 'customize-background.php';
29
+ require_once $config_dir . 'customize-loader.php';
30
+ require_once $config_dir . 'customize-promo.php';
31
+ require_once $config_dir . 'customize-any-page.php';
32
+ }
33
+
34
+ public function remove_sections(){
35
+ global $wp_customize;
36
+ foreach($wp_customize->containers() as $id => $container){
37
+ if($container instanceof WP_Customize_Panel){
38
+ (strpos($id, 'loftloader_') === false) ? $wp_customize->remove_panel($id) : '';
39
+ }
40
+ else if($container instanceof WP_Customize_Section){
41
+ (strpos($id, 'loftloader_') === false) ? $wp_customize->remove_section($id) : '';
42
+ }
43
+ }
44
+ }
45
+
46
+ public function customize_scripts(){
47
+ $js_url = LOFTLOADER_URI . 'assets/js/customize.min.js';
48
+ $js_dep = array('jquery', 'wp-color-picker', 'jquery-ui-slider', 'customize-controls');
49
+ $ui_css = LOFTLOADER_URI . 'assets/css/jquery-ui.css';
50
+ $loader_css = LOFTLOADER_URI . 'assets/css/loftloader-settings.min.css';
51
+
52
+ wp_register_script('loftloader-lite-customize', $js_url, $js_dep, LOFTLOADER_ASSET_VERSION);
53
+ wp_localize_script('loftloader-lite-customize', 'loftloader_lite_i18n', array('name' => esc_html__('LoftLoader Lite', 'loftloader'))); // Change the site title in string "You are customizing ..."
54
+ wp_enqueue_script('loftloader-lite-customize');
55
+
56
+ wp_enqueue_style('loftloader-lite-ui', $ui_css, array(), LOFTLOADER_ASSET_VERSION);
57
+ wp_enqueue_style('loftloader-lite-customize', $loader_css, array(), LOFTLOADER_ASSET_VERSION);
58
+ }
59
+
60
+ public function preview_scripts(){
61
+ $js_url = LOFTLOADER_URI . 'assets/js/preview.min.js';
62
+ wp_register_script('loftloader-lite-preview', $js_url, array('jquery', 'customize-preview'), LOFTLOADER_ASSET_VERSION, true);
63
+ wp_localize_script('loftloader-lite-preview', 'loftloader_lite', array('preview' => 'on'));
64
+ wp_enqueue_script('loftloader-lite-preview'); }
65
+ }
66
+
67
+ new LoftLoader_Customize();
68
+ }
69
+
70
+ if(class_exists('WP_Customize_Setting')){
71
+ /**
72
+ * LoftLoader related customization api classes
73
+ *
74
+ * @since 2.0.0
75
+ */
76
+
77
+ // LoftLoader base section class, changed the json function to modify the customize action text
78
+ class LoftLoader_Customize_Section extends WP_Customize_Section{
79
+ public function json() {
80
+ $array = parent::json();
81
+ $array['customizeAction'] = esc_html__('Setting', 'loftloader');
82
+ return $array;
83
+ }
84
+ /**
85
+ * render function for LoftLoader Switch section
86
+ */
87
+ protected function render() {
88
+ if('loftloader_switch' === $this->type){
89
+ $switch = $this->manager->get_setting('loftloader_main_switch')->value();
90
+ $classes = 'accordion-section control-section control-section-' . $this->type;
91
+ ?>
92
+ <li id="accordion-section-<?php echo $this->id; ?>" class="accordion-section control-section control-section-<?php echo $this->type; ?>">
93
+ <h3 class="accordion-section-title" tabindex="0">
94
+ <?php echo $this->title; ?>
95
+ <span class="screen-reader-text"><?php esc_html_e( 'Press return or enter to open this section', 'loftloader' ); ?></span>
96
+ <input type="checkbox" name="loftloader-main-switch" value="on" <?php checked($switch, 'on'); ?> />
97
+ </h3>
98
+ <ul class="accordion-section-content">
99
+ <li class="customize-section-description-container">
100
+ <div class="customize-section-title">
101
+ <button class="customize-section-back" tabindex="-1">
102
+ <span class="screen-reader-text"><?php esc_html_e('Back', 'loftloader'); ?></span>
103
+ </button>
104
+ <h3>
105
+ <span class="customize-action"><?php esc_html_e('Setting', 'loftloader'); ?></span><?php echo $this->title; ?>
106
+ </h3>
107
+ </div>
108
+ <?php
109
+ if(!empty($this->description)){
110
+ echo '<div class="description customize-section-description">' . $this->description . '</div>';
111
+ }
112
+ ?>
113
+ </li>
114
+ </ul>
115
+ </li>
116
+ <?php
117
+ }
118
+ else{
119
+ parent::render();
120
+ }
121
+ }
122
+ }
123
+
124
+ // LoftLoader base customize control class: add class properties as displaying dependency.
125
+ class LoftLoader_Customize_Control extends WP_Customize_Control{
126
+ public $filter = false;
127
+ public $parent_setting_id = '';
128
+ public $show_filter = array();
129
+ public $img = '';
130
+ public $href = '';
131
+ public function active_callback(){
132
+ if($this->filter && ($this->manager->get_setting($this->parent_setting_id) instanceof WP_Customize_Setting) && !empty($this->show_filter)){
133
+ $parent_setting_value = $this->manager->get_setting($this->parent_setting_id)->value();
134
+ return in_array($parent_setting_value, $this->show_filter) ? true : false;
135
+ }
136
+ return true;
137
+ }
138
+ public function render_content(){
139
+ switch($this->type){
140
+ case 'loftloader-ad':
141
+ if(!empty($this->label)) : ?> <span class="customize-control-title"><?php echo esc_html($this->label); ?></span> <?php endif;
142
+ if(!empty($this->img)) : ?> <a href="<?php echo $this->href; ?>" target="_blank"><img src="<?php echo esc_url($this->img); ?>" ></a> <?php endif; ?>
143
+ <div class="customize-control-notifications-container"></div> <?php
144
+ break;
145
+ case 'loftloader-any-page':
146
+ if(!empty($this->label)) : ?> <span class="customize-control-title"><?php echo esc_html($this->label); ?></span> <?php endif;
147
+ if(!empty( $this->description)) : ?> <span class="description customize-control-description"><?php echo $this->description ; ?></span> <?php endif; ?>
148
+ <input type="button" <?php $this->link(); ?> class="button button-primary loftloader-any-page-generate" value="<?php esc_attr_e('Generate', 'loftloader'); ?>" /><br/><br/>
149
+ <textarea class="loftloader-any-page-shortcode" cols="30" rows="4"></textarea>
150
+ <div class="customize-control-notifications-container"></div> <?php
151
+ break;
152
+ case 'check': ?>
153
+ <label> <?php
154
+ if(!empty( $this->label)) : ?>
155
+ <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> <?php
156
+ endif;
157
+ if(!empty( $this->description)) : ?>
158
+ <span class="description customize-control-description"><?php echo $this->description; ?></span>
159
+ <?php endif; ?>
160
+ <input type="checkbox" value="<?php echo esc_attr($this->value()); ?>" <?php $this->link(); checked( $this->value() ); ?> />
161
+ </label>
162
+ <?php break;
163
+ default:
164
+ parent::render_content();
165
+ }
166
+ }
167
+ }
168
+ // Modify the color control class to add the display dependency logic.
169
+ class LoftLoader_Customize_Color_Control extends WP_Customize_Color_Control{
170
+ public $filter = false;
171
+ public $parent_setting_id = '';
172
+ public $show_filter = array();
173
+ public function active_callback(){
174
+ if($this->filter && ($this->manager->get_setting($this->parent_setting_id) instanceof WP_Customize_Setting) && !empty($this->show_filter)){
175
+ $parent_setting_value = $this->manager->get_setting($this->parent_setting_id)->value();
176
+ return in_array($parent_setting_value, $this->show_filter) ? true : false;
177
+ }
178
+ return true;
179
+ }
180
+ }
181
+ // Modify the image control class to add the display dependency logic.
182
+ class LoftLoader_Customize_Image_Control extends WP_Customize_Image_Control{
183
+ public $filter = false;
184
+ public $parent_setting_id = '';
185
+ public $show_filter = array();
186
+ public function active_callback(){
187
+ if($this->filter && ($this->manager->get_setting($this->parent_setting_id) instanceof WP_Customize_Setting) && !empty($this->show_filter)){
188
+ $parent_setting_value = $this->manager->get_setting($this->parent_setting_id)->value();
189
+ return in_array($parent_setting_value, $this->show_filter) ? true : false;
190
+ }
191
+ return true;
192
+ }
193
+ }
194
+ // Add new slider control class with jqueryui slider function
195
+ class LoftLoader_Customize_Slider_Control extends LoftLoader_Customize_Control{
196
+ public $input_class = '';
197
+ public $after_text = '%';
198
+ public function render_content(){
199
+ if ( empty( $this->input_attrs ) )
200
+ return;
201
+
202
+ echo '<label class="amount opacity">';
203
+ if ( ! empty( $this->label ) ) : ?>
204
+ <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
205
+ <?php endif; ?>
206
+ <span class="<?php echo $this->input_class; ?>">
207
+ <input readonly="readonly" type="text" <?php $this->link(); ?> value="<?php echo esc_attr( $this->value() ); ?>" >
208
+ <?php echo $this->after_text; ?>
209
+ </span>
210
+ <?php
211
+ echo '</label>';
212
+ ?>
213
+ <div class="ui-slider loader-ui-slider" data-value="<?php echo $this->manager->get_setting($this->id)->value(); ?>" <?php $this->input_attrs(); ?>></div>
214
+ <div class="customize-control-notifications-container"></div>
215
+ <?php
216
+ }
217
+ }
218
+ // Add new radio type control class for loader animation choices.
219
+ class LoftLoader_Customize_Animation_Types_Control extends WP_Customize_Control{
220
+ public function render_content(){
221
+ if ( empty( $this->choices ) )
222
+ return;
223
+
224
+ if ( ! empty( $this->label ) ) : ?>
225
+ <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
226
+ <?php endif;
227
+ echo '<button class="customize-more-toggle" aria-expanded="false"><span class="screen-reader-text">' . esc_html__('More info', 'loftloader') . '</span></button>';
228
+ if ( ! empty( $this->description ) ) : ?>
229
+ <span class="description customize-control-description" style="display: none;"><?php echo $this->description ; ?></span>
230
+ <?php endif; ?>
231
+
232
+ <div id="loftloader_option_animation">
233
+ <?php
234
+ $name = '_customize-radio-' . $this->id;
235
+ foreach ( $this->choices as $value => $attrs ) :
236
+ $attr = '';
237
+ if(!empty($attrs['attr'])){
238
+ foreach((array)$attrs['attr'] as $attr_name => $attr_value){
239
+ $attr .= ' ' . $attr_name . '="' . $attr_value . '"';
240
+ }
241
+ }
242
+ $item_id = sanitize_title($this->id . '-' . $value);
243
+ ?>
244
+ <label for="<?php echo $item_id; ?>" title="<?php echo esc_attr($attrs['label']); ?>">
245
+ <input id="<?php echo $item_id; ?>" class="loftloader-radiobtn <?php echo $value; ?>" type="radio" value="<?php echo esc_attr( $value ); ?>" name="<?php echo esc_attr( $name ); ?>" <?php $this->link(); checked( $this->value(), $value ); ?> <?php echo $attr; ?> />
246
+ <span></span>
247
+ </label>
248
+ <?php endforeach; ?>
249
+ </div>
250
+ <?php
251
+ }
252
+ }
253
+ // Add new number type control class with text after the element.
254
+ class LoftLoader_Customize_Number_Text_Control extends LoftLoader_Customize_Control{
255
+ public $after_text = '';
256
+ public $input_class = '';
257
+ public $input_wrap_class = '';
258
+ public function render_content(){
259
+ ?>
260
+ <label>
261
+ <?php if ( ! empty( $this->label ) ) : ?>
262
+ <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
263
+ <?php endif;
264
+ if ( ! empty( $this->description ) ) : ?>
265
+ <span class="description customize-control-description"><?php echo $this->description; ?></span>
266
+ <?php endif; ?>
267
+ <span class="<?php echo esc_attr($this->input_wrap_class); ?>">
268
+ <input class="<?php echo esc_attr($this->input_class); ?>" type="<?php echo esc_attr( $this->type ); ?>" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> /><?php echo empty($this->after_text) ? '' : $this->after_text; ?>
269
+ </span>
270
+ </label>
271
+ <?php
272
+ }
273
+ }
274
+
275
+ if(!function_exists('loftloader_sanitize_checkbox')){
276
+ /**
277
+ * Check the switch checkbox value
278
+ *
279
+ * @param string the value from user
280
+ * @return mix if set return string 'on', otherwise return false
281
+ */
282
+ function loftloader_sanitize_checkbox($input){
283
+ return empty($input) ? 'off' : 'on';
284
+ }
285
+ }
286
+
287
+ if(!function_exists('loftloader_sanitize_choice')){
288
+ /**
289
+ * Check the value is one of the choices from customize control
290
+ *
291
+ * @param string the value from user
292
+ * @param object customize setting object
293
+ * @return string the value from user or the default setting value
294
+ */
295
+
296
+ function loftloader_sanitize_choice($input, $setting){
297
+ $choices = $setting->manager->get_control($setting->id)->choices;
298
+ $choices = array_keys($choices);
299
+ return in_array($input, $choices) ? $input : $setting->default;
300
+ }
301
+ }
302
+ }
inc/class-loftloader-front.php ADDED
@@ -0,0 +1,155 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ // Not allowed by directly accessing.
3
+ if(!defined('ABSPATH')){
4
+ die('Access not allowed!');
5
+ }
6
+
7
+ /**
8
+ * Main class for front display
9
+ *
10
+ * @package LoftLoader
11
+ * @link http://www.loftocean.com/
12
+ * @author Suihai Huang from Loft Ocean Team
13
+
14
+ * @since version 1.0
15
+ */
16
+
17
+ if(!class_exists('LoftLoader_Front')){
18
+ class LoftLoader_Front{
19
+ private $defaults;
20
+ private $type; // Get the loader settings
21
+ public function __construct(){
22
+ $this->get_settings();
23
+ if($this->loader_enabled()){
24
+ add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
25
+ add_action('wp_head', array($this, 'loader_custom_styles'), 100);
26
+ add_action('wp_footer', array($this, 'show_loader_html'));
27
+ }
28
+ }
29
+ /**
30
+ * @description get the plugin settings
31
+ */
32
+ public function get_settings(){
33
+ global $loftloader_default_settings;
34
+ $this->defaults = $loftloader_default_settings;
35
+ do_action('loftloader_settings');
36
+ $this->type = esc_attr($this->get_loader_setting('loftloader_loader_type'));
37
+ }
38
+ /**
39
+ * @description enqueue the scripts and styles for front end
40
+ */
41
+ public function enqueue_scripts(){
42
+ is_customize_preview() ? '' : wp_enqueue_script('loftloader-lite-front-main', LOFTLOADER_URI . 'assets/js/loftloader.min.js', array('jquery'), LOFTLOADER_ASSET_VERSION, true);
43
+ wp_enqueue_style('loftloader-lite-animation', LOFTLOADER_URI . 'assets/css/loftloader.min.css', array(), LOFTLOADER_ASSET_VERSION);
44
+ }
45
+ /**
46
+ * @description custom css for front end
47
+ */
48
+ public function loader_custom_styles(){
49
+ $color = esc_attr($this->get_loader_setting('loftloader_loader_color'));
50
+ $bgColor = esc_attr($this->get_loader_setting('loftloader_bg_color'));
51
+ $bgOpacity = intval($this->get_loader_setting('loftloader_bg_opacity')) / 100;
52
+
53
+ $styles = $this->generate_style('loftloader-lite-custom-bg-color', '#loftloader-wrapper .loader-section {' . PHP_EOL . "\t" . 'background: ' . $bgColor . ';' . PHP_EOL . '}' . PHP_EOL);
54
+ $styles .= $this->generate_style('loftloader-lite-custom-bg-opacity', '#loftloader-wrapper .loader-section {' . PHP_EOL . "\t" . 'opacity: ' . $bgOpacity . ';' . PHP_EOL . '}' . PHP_EOL);
55
+ $css = '';
56
+ switch($this->type){
57
+ case 'sun':
58
+ $css = '#loftloader-wrapper.pl-sun #loader span,' . PHP_EOL . '#loftloader-wrapper.pl-sun #loader span:before {' . PHP_EOL . "\t" . 'background: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL;
59
+ break;
60
+ case 'circles':
61
+ $css = '#loftloader-wrapper.pl-circles #loader span,' . PHP_EOL . '#loftloader-wrapper.pl-circles #loader:before,' . PHP_EOL . '#loftloader-wrapper.pl-circles #loader:after {' . PHP_EOL . "\t" . 'background: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL;
62
+ break;
63
+ case 'wave':
64
+ $css = '#loftloader-wrapper.pl-wave #loader span,' . PHP_EOL . '#loftloader-wrapper.pl-wave #loader:before,' . PHP_EOL . '#loftloader-wrapper.pl-wave #loader:after {' . PHP_EOL . "\t" . 'background: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL;
65
+ break;
66
+ case 'square':
67
+ $css = '#loftloader-wrapper.pl-square #loader span {' . PHP_EOL . "\t" . 'border: 4px solid ' . $color . ';' . PHP_EOL . '}' . PHP_EOL;
68
+ break;
69
+ case 'frame':
70
+ $css = '#loftloader-wrapper.pl-frame #loader:before,' . PHP_EOL . '#loftloader-wrapper.pl-frame #loader:after,' . PHP_EOL . '#loftloader-wrapper.pl-frame #loader span:before,' . PHP_EOL . '#loftloader-wrapper.pl-frame #loader span:after {' . PHP_EOL . "\t" . 'background-color: ' . $color . ';' . PHP_EOL . '}' . PHP_EOL;
71
+ break;
72
+ case 'imgloading':
73
+ $width = absint($this->get_loader_setting('loftloader_img_width'));
74
+ $image = esc_url($this->get_loader_setting('loftloader_custom_img'));
75
+ $css = empty($width) ? '' : '#loftloader-wrapper.pl-imgloading #loader {' . PHP_EOL . "\t" . 'width: ' . $width . 'px;' . PHP_EOL . '}' . PHP_EOL;
76
+ $css .= '#loftloader-wrapper.pl-imgloading #loader span {' . PHP_EOL . "\t" . 'background-size: cover;' . PHP_EOL . "\t" . 'background-image: url(' . $image . ');' . PHP_EOL . '}' . PHP_EOL;
77
+ break;
78
+ }
79
+ $styles .= $this->generate_style('loftloader-lite-custom-loader', $css);
80
+ echo $styles;
81
+
82
+ ob_start();
83
+ }
84
+ /**
85
+ * @description loftloader html
86
+ */
87
+ public function show_loader_html(){
88
+ $image = esc_url($this->get_loader_setting('loftloader_custom_img'));
89
+ $ending = esc_attr($this->get_loader_setting('loftloader_bg_animation'));
90
+
91
+ $html = '<div id="loftloader-wrapper" class="pl-' . $this->type . '">';
92
+ $html .= '<div class="loader-inner"><div id="loader">';
93
+ $html .= in_array($this->type, array('frame', 'imgloading'))
94
+ ? ('<span></span>' . (empty($image) ? '' : ('<img src="' . $image . '" alt="preloder">'))) : '<span></span>';
95
+ $html .= '</div></div>';
96
+ switch($ending){
97
+ case 'fade':
98
+ $html .= '<div class="loader-section section-fade"></div>';
99
+ break;
100
+ case 'up':
101
+ $html .= '<div class="loader-section section-slide-up"></div>';
102
+ break;
103
+ case 'split-v':
104
+ $html .= '<div class="loader-section section-up"></div>';
105
+ $html .= '<div class="loader-section section-down"></div>';
106
+ break;
107
+ default:
108
+ $html .= '<div class="loader-section section-left">';
109
+ $html .= '</div><div class="loader-section section-right"></div>';
110
+ }
111
+ $html .= '</div>';
112
+
113
+ $origin = ob_get_clean();
114
+ $regexp ='/<body[^>]*>/i';
115
+ if(preg_match($regexp, $origin, $match)){
116
+ $html = $match[0] . $html;
117
+ echo preg_replace($regexp, $html, $origin);
118
+ }
119
+ else{
120
+ echo $origin . $html;
121
+ }
122
+ }
123
+ /**
124
+ * Helper function to test whether show loftloader
125
+ * @return boolean return true if loftloader enabled and display on current page, otherwise false
126
+ */
127
+ private function loader_enabled(){
128
+ if(($this->get_loader_setting('loftloader_main_switch') === 'on')){
129
+ $range = $this->get_loader_setting('loftloader_show_range');
130
+ if(($range === 'sitewide') || (($range === 'homepage') && is_front_page())){
131
+ return true;
132
+ }
133
+ else{
134
+ return false;
135
+ }
136
+ }
137
+ else{
138
+ return apply_filters('loftloader_loader_enabled', false);
139
+ }
140
+ }
141
+ /**
142
+ * Helper function get setting option
143
+ */
144
+ private function get_loader_setting($setting_id){
145
+ return apply_filters('loftloader_get_loader_setting', get_option($setting_id, $this->defaults[$setting_id]), $setting_id);
146
+ }
147
+ /**
148
+ * Helper function generate styles
149
+ */
150
+ private function generate_style($id, $style){
151
+ return '<style id="' . $id . '">' . $style . '</style>';
152
+ }
153
+ }
154
+ new LoftLoader_Front();
155
+ }
inc/class-loftloader-upgrade.php ADDED
@@ -0,0 +1,59 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ if(!class_exists('LoftLoader_Upgrade')){
3
+ class LoftLoader_Upgrade{
4
+ private $version ='2.0.0';
5
+ function __construct(){
6
+ $old_version = get_option('loftloader_lite_version', '1.0');
7
+ if(version_compare($old_version, $this->version, '<')){
8
+ $this->upgrade();
9
+ $this->update_version();
10
+ }
11
+ }
12
+ private function upgrade(){
13
+ $default_img = LOFTLOADER_URI . 'assets/img/loftloader-logo.png';
14
+ $defaults = array(
15
+ 'enable' => 'on',
16
+ 'homepage' => '',
17
+ 'settings' => array(
18
+ 'background' => array(
19
+ 'effect' => 'fade',
20
+ 'color' => '#000000',
21
+ 'opacity' => '95%'
22
+ ),
23
+ 'animation' => array(
24
+ 'type' => 'pl-sun',
25
+ 'color' => '#248acc',
26
+ 'image' => array(
27
+ 'url' => $default_img,
28
+ 'id' => ''
29
+ ),
30
+ 'width' => '76'
31
+ )
32
+ )
33
+ );
34
+ $saved = get_option('loftloader-custom-settings', array());
35
+ $options = array_merge($defaults, $saved);
36
+ $effect = array('fade'=> 'fade', 'slide-up'=> 'up', 'slide-left-right'=> 'split-h', 'slide-up-down'=> 'split-v');
37
+
38
+ if($options['settings']['animation']['image']['url'] == LOFTLOADER_URI . 'img/loftloader-logo.png'){
39
+ $options['settings']['animation']['image']['url'] = $default_img;
40
+ }
41
+
42
+ update_option('loftloader_main_switch', ($options['enable'] == 'on' ? 'on' : 'off'));
43
+ update_option('loftloader_show_range', ($options['homepage'] == 'on' ? 'homepage': 'sitewide'));
44
+
45
+ update_option('loftloader_bg_color', $options['settings']['background']['color']);
46
+ update_option('loftloader_bg_opacity', intval($options['settings']['background']['opacity']));
47
+ update_option('loftloader_bg_animation', $effect[$options['settings']['background']['effect']]);
48
+
49
+ update_option('loftloader_loader_type', substr($options['settings']['animation']['type'], 3));
50
+ update_option('loftloader_loader_color', $options['settings']['animation']['color']);
51
+ update_option('loftloader_custom_img', $options['settings']['animation']['image']['url']);
52
+ update_option('loftloader_img_width', $options['settings']['animation']['width']);
53
+ }
54
+ private function update_version(){
55
+ update_option('loftloader_lite_version', $this->version);
56
+ }
57
+ }
58
+ new LoftLoader_Upgrade();
59
+ }
inc/configs/customize-any-page.php ADDED
@@ -0,0 +1,47 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Load loftloader lite Any page related functions
4
+ *
5
+ * @since version 2.0.0
6
+ */
7
+ add_action('customize_register', 'loftloader_customize_any_page', 50);
8
+ function loftloader_customize_any_page($wp_customize){
9
+ global $loftloader_default_settings;
10
+
11
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_enable_any_page', array(
12
+ 'default' => $loftloader_default_settings['loftloader_enable_any_page'],
13
+ 'transport' => 'refresh',
14
+ 'type' => 'option',
15
+ 'sanitize_callback' => 'loftloader_sanitize_checkbox'
16
+ )));
17
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_any_page_generation', array(
18
+ 'default' => esc_html__('Generate', 'loftloader'),
19
+ 'transport' => 'postMessage',
20
+ 'type' => 'option'
21
+ )));
22
+
23
+ $wp_customize->add_section(new LoftLoader_Customize_Section($wp_customize, 'loftloader_any_page', array(
24
+ 'title' => esc_html__('Advanced', 'loftloader'),
25
+ 'description' => '',
26
+ 'priority' => 50
27
+ )));
28
+
29
+ $wp_customize->add_control(new LoftLoader_Customize_Control($wp_customize, 'loftloader_enable_any_page', array(
30
+ 'type' => 'check',
31
+ 'label' => esc_html__('Check to enable Any Page Extension', 'loftloader'),
32
+ 'description' => '',
33
+ 'choices' => array('on' => ''),
34
+ 'section' => 'loftloader_any_page',
35
+ 'settings' => 'loftloader_enable_any_page'
36
+ )));
37
+ $wp_customize->add_control(new LoftLoader_Customize_Control($wp_customize, 'loftloader_any_page_generation', array(
38
+ 'type' => 'loftloader-any-page',
39
+ 'label' => esc_html__('Generate LoftLoader Shortcode', 'loftloader'),
40
+ 'description' => '',
41
+ 'section' => 'loftloader_any_page',
42
+ 'settings' => 'loftloader_any_page_generation',
43
+ 'filter' => true,
44
+ 'parent_setting_id' => 'loftloader_enable_any_page',
45
+ 'show_filter' => array('on')
46
+ )));
47
+ }
inc/configs/customize-background.php ADDED
@@ -0,0 +1,67 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Load loftloader lite bakcground related functions
4
+ *
5
+ * @since version 2.0.0
6
+ */
7
+ add_action('customize_register', 'loftloader_customize_background', 30);
8
+ function loftloader_customize_background($wp_customize){
9
+ global $loftloader_default_settings;
10
+
11
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_bg_color', array(
12
+ 'default' => $loftloader_default_settings['loftloader_bg_color'],
13
+ 'transport' => 'postMessage',
14
+ 'type' => 'option',
15
+ 'sanitize_callback' => 'sanitize_hex_color'
16
+ )));
17
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_bg_opacity', array(
18
+ 'default' => $loftloader_default_settings['loftloader_bg_opacity'],
19
+ 'transport' => 'postMessage',
20
+ 'type' => 'option',
21
+ 'sanitize_callback' => 'absint'
22
+ )));
23
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_bg_animation', array(
24
+ 'default' => $loftloader_default_settings['loftloader_bg_animation'],
25
+ 'transport' => 'refresh',
26
+ 'type' => 'option',
27
+ 'sanitize_callback' => 'loftloader_sanitize_choice'
28
+ )));
29
+
30
+ $wp_customize->add_section(new LoftLoader_Customize_Section($wp_customize, 'loftloader_background', array(
31
+ 'title' => esc_html__('Background', 'loftloader'),
32
+ 'description' => '',
33
+ 'priority' => 40
34
+ )));
35
+
36
+ $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'loftloader_bg_color', array(
37
+ 'label' => esc_html__('Pick Color', 'loftloader'),
38
+ 'section' => 'loftloader_background',
39
+ 'settings' => 'loftloader_bg_color'
40
+ )));
41
+ $wp_customize->add_control(new LoftLoader_Customize_Slider_Control($wp_customize, 'loftloader_bg_opacity', array(
42
+ 'type' => 'slider',
43
+ 'label' => esc_html__('Opacity', 'loftloader'),
44
+ 'input_attrs' => array(
45
+ 'data-default' => 100,
46
+ 'data-min' => 0,
47
+ 'data-max' => 100,
48
+ 'data-step' => 5
49
+ ),
50
+ 'input_class' => 'loaderbgopacity',
51
+ 'section' => 'loftloader_background',
52
+ 'settings' => 'loftloader_bg_opacity'
53
+ )));
54
+ $wp_customize->add_control(new WP_Customize_Control($wp_customize, 'loftloader_bg_animation', array(
55
+ 'type' => 'select',
56
+ 'label' => esc_html__('Ending Animation', 'loftloader'),
57
+ 'description' => esc_html__('Hover on preview area to see the result.', 'loftloader'),
58
+ 'choices' => array(
59
+ 'fade' => esc_html__('Fade', 'loftloader'),
60
+ 'split-h' => esc_html__('Slide Left & Right', 'loftloader'),
61
+ 'up' => esc_html__('Slide Up', 'loftloader'),
62
+ 'split-v' => esc_html__('Slide Up & Down', 'loftloader')
63
+ ),
64
+ 'section' => 'loftloader_background',
65
+ 'settings' => 'loftloader_bg_animation'
66
+ )));
67
+ }
inc/configs/customize-loader.php ADDED
@@ -0,0 +1,88 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Load loftloader lite loader related functions
4
+ *
5
+ * @since version 2.0.0
6
+ */
7
+ add_action('customize_register', 'loftloader_customize_loader', 40);
8
+ function loftloader_customize_loader($wp_customize){
9
+ global $loftloader_default_settings;
10
+
11
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_loader_type', array(
12
+ 'default' => $loftloader_default_settings['loftloader_loader_type'],
13
+ 'transport' => 'refresh',
14
+ 'type' => 'option',
15
+ 'sanitize_callback' => 'loftloader_sanitize_choice'
16
+ )));
17
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_loader_color', array(
18
+ 'default' => $loftloader_default_settings['loftloader_loader_color'],
19
+ 'transport' => 'refresh',
20
+ 'type' => 'option',
21
+ 'sanitize_callback' => 'sanitize_hex_color'
22
+ )));
23
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_custom_img', array(
24
+ 'default' => $loftloader_default_settings['loftloader_custom_img'],
25
+ 'transport' => 'refresh',
26
+ 'type' => 'option',
27
+ 'sanitize_callback' => 'esc_url_raw'
28
+ )));
29
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_img_width', array(
30
+ 'default' => $loftloader_default_settings['loftloader_img_width'],
31
+ 'transport' => 'refresh',
32
+ 'type' => 'option',
33
+ 'sanitize_callback' => 'absint'
34
+ )));
35
+
36
+ $wp_customize->add_section(new LoftLoader_Customize_Section($wp_customize, 'loftloader_loader', array(
37
+ 'title' => esc_html__('Loader', 'loftloader'),
38
+ 'description' => '',
39
+ 'priority' => 50
40
+ )));
41
+
42
+ // Controls for section loader
43
+ $wp_customize->add_control(new LoftLoader_Customize_Animation_Types_Control($wp_customize, 'loftloader_loader_type', array(
44
+ 'type' => 'radio',
45
+ 'label' => esc_html__('Loader Animation', 'loftloader'),
46
+ 'description' => sprintf(esc_html__('Some support custom image.', 'loftloader'), '<strong>', '</strong>'),
47
+ 'choices' => array(
48
+ 'sun' => array('label' => esc_html__('Spinning Sun', 'loftloader')),
49
+ 'circles' => array('label' => esc_html__('Luminous Circles', 'loftloader')),
50
+ 'wave' => array('label' => esc_html__('Wave', 'loftloader')),
51
+ 'square' => array('label' => esc_html__('Spinning Square', 'loftloader')),
52
+ 'frame' => array('label' => esc_html__('Drawing Frame', 'loftloader')),
53
+ 'imgloading' => array('label' => esc_html__('Custom Image Loading', 'loftloader'))
54
+ ),
55
+ 'section' => 'loftloader_loader',
56
+ 'settings' => 'loftloader_loader_type'
57
+ )));
58
+ $wp_customize->add_control(new LoftLoader_Customize_Color_Control($wp_customize, 'loftloader_loader_color', array(
59
+ 'label' => esc_html__('Pick Color', 'loftloader'),
60
+ 'section' => 'loftloader_loader',
61
+ 'settings' => 'loftloader_loader_color',
62
+ 'filter' => true,
63
+ 'parent_setting_id' => 'loftloader_loader_type',
64
+ 'show_filter' => array('sun', 'circles', 'wave', 'square', 'frame')
65
+ )));
66
+ $wp_customize->add_control(new LoftLoader_Customize_Image_Control($wp_customize, 'loftloader_custom_img', array(
67
+ 'type' => 'image',
68
+ 'label' => esc_html__('Upload Image', 'loftloader'),
69
+ 'description' => '',
70
+ 'section' => 'loftloader_loader',
71
+ 'settings' => 'loftloader_custom_img',
72
+ 'filter' => true,
73
+ 'parent_setting_id' => 'loftloader_loader_type',
74
+ 'show_filter' => array('frame', 'imgloading')
75
+ )));
76
+ $wp_customize->add_control(new LoftLoader_Customize_Number_Text_Control($wp_customize, 'loftloader_img_width', array(
77
+ 'type' => 'number',
78
+ 'label' => esc_html__('Image Width', 'loftloader'),
79
+ 'section' => 'loftloader_loader',
80
+ 'settings' => 'loftloader_img_width',
81
+ 'after_text' => 'px',
82
+ 'input_class' => 'loaderimgwidth',
83
+ 'input_wrap_class' => 'imgwidth',
84
+ 'filter' => true,
85
+ 'parent_setting_id' => 'loftloader_loader_type',
86
+ 'show_filter' => array('imgloading')
87
+ )));
88
+ }
inc/configs/customize-main.php ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Load loftloader lite main switcher related functions
4
+ *
5
+ * @since version 2.0.0
6
+ */
7
+ add_action('customize_register', 'loftloader_customize_main', 10);
8
+ function loftloader_customize_main($wp_customize){
9
+ global $loftloader_default_settings;
10
+
11
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_main_switch', array(
12
+ 'default' => $loftloader_default_settings['loftloader_main_switch'],
13
+ 'transport' => 'refresh',
14
+ 'type' => 'option',
15
+ 'sanitize_callback' => 'loftloader_sanitize_checkbox'
16
+ )));
17
+
18
+ $wp_customize->add_section(new LoftLoader_Customize_Section($wp_customize, 'loftloader_switch', array(
19
+ 'title' => esc_html__('Enable LoftLoader', 'loftloader'),
20
+ 'type' => 'loftloader_switch',
21
+ 'priority' => 10,
22
+ )));
23
+
24
+ $wp_customize->add_control(new WP_Customize_Control($wp_customize, 'loftloader_main_switch', array(
25
+ 'type' => 'checkbox',
26
+ 'label' => esc_html__('Enable LoftLoader', 'loftloader'),
27
+ 'choices' => array('on' => ''),
28
+ 'section' => 'loftloader_switch',
29
+ 'settings' => 'loftloader_main_switch'
30
+ )));
31
+ }
inc/configs/customize-promo.php ADDED
@@ -0,0 +1,29 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Load loftloader lite Promotion related functions
4
+ *
5
+ * @since version 2.0.0
6
+ */
7
+ add_action('customize_register', 'loftloader_customize_promotion', 100);
8
+ function loftloader_customize_promotion($wp_customize){
9
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_promo', array(
10
+ 'default' => '',
11
+ 'transport' => 'postMessage',
12
+ 'type' => 'option'
13
+ )));
14
+
15
+ $wp_customize->add_section(new WP_Customize_Section($wp_customize, 'loftloader_promo', array(
16
+ 'title' => esc_html__('Upgrade to Pro', 'loftloader'),
17
+ 'description' => '',
18
+ 'priority' => 100
19
+ )));
20
+
21
+ $wp_customize->add_control(new LoftLoader_Customize_Control($wp_customize, 'loftloader_promo', array(
22
+ 'type' => 'loftloader-ad',
23
+ 'label' => '',
24
+ 'img' => LOFTLOADER_URI . 'assets/img/pro-ad.jpg',
25
+ 'href' => esc_url('https://codecanyon.net/item/loftloader-pro-preloader-plugin-for-wordpress/17339671?ref=LoftOcean'),
26
+ 'section' => 'loftloader_promo',
27
+ 'settings' => 'loftloader_promo'
28
+ )));
29
+ }
inc/configs/customize-range.php ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Load loftloader lite display range related functions
4
+ *
5
+ * @since version 2.0.0
6
+ */
7
+ add_action('customize_register', 'loftloader_customize_range', 20);
8
+ function loftloader_customize_range($wp_customize){
9
+ global $loftloader_default_settings;
10
+
11
+ $wp_customize->add_setting(new WP_Customize_Setting($wp_customize, 'loftloader_show_range', array(
12
+ 'default' => $loftloader_default_settings['loftloader_show_range'],
13
+ 'transport' => 'refresh',
14
+ 'type' => 'option',
15
+ 'sanitize_callback' => 'loftloader_sanitize_choice'
16
+ )));
17
+
18
+ $wp_customize->add_section(new LoftLoader_Customize_Section($wp_customize, 'loftloader_range', array(
19
+ 'title' => esc_html__('Display on', 'loftloader'),
20
+ 'description' => '',
21
+ 'priority' => 20
22
+ )));
23
+
24
+ $wp_customize->add_control(new WP_Customize_Control($wp_customize, 'loftloader_show_range', array(
25
+ 'type' => 'radio',
26
+ 'label' => '',
27
+ 'choices' => array(
28
+ 'sitewide' => esc_html__('Sitewide', 'loftloader'),
29
+ 'homepage' => esc_html__('Homepage only', 'loftloader')
30
+ ),
31
+ 'section' => 'loftloader_range',
32
+ 'settings' => 'loftloader_show_range'
33
+ )));
34
+ }
inc/configs/default-settings.php ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Default settings for loftloader
4
+ *
5
+ * @since version 2.0.0
6
+ */
7
+
8
+ global $loftloader_default_settings;
9
+
10
+ $loftloader_default_settings = array(
11
+ 'loftloader_main_switch' => 'on',
12
+ 'loftloader_show_range' => 'sitewide',
13
+
14
+ 'loftloader_bg_color' => '#000000',
15
+ 'loftloader_bg_opacity' => 95,
16
+ 'loftloader_bg_animation' => 'fade',
17
+
18
+ 'loftloader_loader_type' => 'sun',
19
+ 'loftloader_loader_color' => '#248acc',
20
+ 'loftloader_custom_img' => LOFTLOADER_URI . 'assets/img/loftloader-logo.png',
21
+ 'loftloader_img_width' => 76,
22
+
23
+ 'loftloader_enable_any_page' => ''
24
+ );
js/settings/loftloader-settings.js DELETED
@@ -1,222 +0,0 @@
1
- (function($){
2
- $(document).ready(function(){
3
- var customImageSrc = $('.preloader-preview-image').val() ? $('.preloader-preview-image').val() : loftloader_vars.img_base + 'loftloader-logo.png';
4
- // Custom media uploader
5
- window.loftloader_set_image = {
6
- target: '',
7
- frame: false,
8
- mediaFrame: function(){
9
- if(!this.frame){
10
- this.frame = wp.media({
11
- id: 'loftloader-image-uploader',
12
- frame: 'post',
13
- state: 'insert',
14
- editing: true,
15
- library: {
16
- type : 'image'
17
- },
18
- multiple: false // Set this to true to allow multiple files to be selected
19
- })
20
- .on('insert', function(){
21
- if(window.loftloader_set_image.target){
22
- var state = window.loftloader_set_image.frame.state(),
23
- oImage = state.get('selection').first(),
24
- jImage = oImage.toJSON();
25
- if((jImage.type == 'image') && (jImage.subtype != 'svg+xml')){
26
- var display = state.display(oImage).toJSON(),
27
- sSize = (display && display.size && jImage.sizes && jImage.sizes[display.size]) ? display.size : 'full',
28
- sImage = (display && display.size && jImage.sizes && jImage.sizes[display.size]) ? jImage.sizes[display.size] : jImage,
29
- image = {url: sImage.url, id: jImage.id, caption: jImage.caption, type: jImage.subtype};
30
-
31
- window.loftloader_set_image.target.siblings('input.admin-image-id').val(jImage.id).end().trigger('loftloader.image.change', image);
32
- }
33
- window.loftloader_set_image.target = false;
34
- }
35
- })
36
- .on('open', function(){
37
- var selection = window.loftloader_set_image.frame.state().get('selection'),
38
- image_id = window.loftloader_set_image.target.siblings('input.admin-image-id').val();
39
- selection.reset();
40
- if(image_id && (image_id !== '')){
41
- var attachment = wp.media.attachment(image_id);
42
- attachment.fetch();
43
- selection.add(attachment ? [attachment] : []);
44
- }
45
- });
46
- }
47
- return this.frame;
48
- },
49
- open: function(){
50
- this.mediaFrame().open();
51
- }
52
- };
53
- // set image button events handler
54
- $('body').on('click', '.loader-set-image', function(e){
55
- e.preventDefault();
56
- window.loftloader_set_image.target = $(this);
57
- window.loftloader_set_image.open();
58
- })
59
- .on('loftloader.image.change', '.loader-set-image', function(e, image){
60
- e.preventDefault();
61
- if(image && image.url){
62
- var $parent = $(this).parent();
63
- $parent.find('img').length ? $parent.find('img').attr('src', image.url) : $parent.prepend($('<div>').addClass('bg-img-holder').append($('<img>').attr('src', image.url)));
64
- $(this).addClass('hide').siblings('.bg-img-remove').removeClass('hide').siblings('input.admin-image-url').val(image.url);
65
- customImageSrc = image.url;
66
- $('#preloader-animation').trigger('change');
67
- }
68
- })
69
- .on('click', '.bg-img-remove', function(e){
70
- e.preventDefault();
71
- $(this).addClass('hide').siblings('input').val('').siblings('.loader-set-image').removeClass('hide').siblings('.bg-img-holder').remove();
72
- customImageSrc = loftloader_vars.img_base + 'loftloader-logo.png';
73
- $(this).siblings('input.admin-image-url').val(customImageSrc);
74
- $('#preloader-animation').trigger('change');
75
- })
76
- .on('click', '.bg-img-holder img', function(e){
77
- $(this).parent().siblings('.loader-set-image').trigger('click');
78
- })
79
- .on('click', '.button.button-primary', function(e){
80
- if($(this).hasClass('reset')){
81
- e.preventDefault();
82
- if(confirm(loftloader_vars.confirm_text)){
83
- var data = {'action' : loftloader_vars.ajax.action, 'nonce' : loftloader_vars.ajax.nonce};
84
- $.post(loftloader_vars.ajax.url, data).done(function(response){ console.log(response);
85
- response.success ? window.location.href = window.location.href : alert(loftloader_vars.fail_text);
86
- }).fail(function(){ alert(loftloader_vars.fail_text); });
87
- }
88
- }
89
- });
90
-
91
- $('.loader-ui-slider').each(function(){
92
- $(this).slider({
93
- range: "min",
94
- value: $(this).data('default'),
95
- min: $(this).data('min'),
96
- max: $(this).data('max'),
97
- step: $(this).data('step'),
98
- slide: function(event, ui){
99
- if($(this).siblings('label').find('input').hasClass('opacity-amount')){
100
- $(this).siblings('label').find('input').val(ui.value + '%');
101
- $(this).parents('.preview-section').find('.preview-wrapper .loader-section').css('opacity' , ui.value/100);
102
- }
103
- },
104
- create: function(event, ui){
105
- $(this).parents('.preview-section').find('.preview-wrapper .loader-section').css('opacity' , $(this).attr('data-default')/100);
106
- }
107
- });
108
- });
109
- $('.loader-color-picker').wpColorPicker({
110
- change: function(e, ui){
111
- var color = $(this).wpColorPicker('color');
112
- switch($(this).attr('id')){
113
- case 'preloader-background-color':
114
- loftloader_generate_css_background(color)
115
- break;
116
- case 'preloader-animation-color':
117
- loftloader_generate_css_animation(color);
118
- break;
119
- }
120
- }
121
- });
122
- $('.loader-color-picker').trigger('change');
123
-
124
- $('.loftloader-enabled').on('change', function(e){
125
- var on = $(this).attr('checked') ? true : false,
126
- $homepage = $('.loftloader-enable-homepage-only').parents('li').first();
127
- on ? $homepage.removeClass('hide') : $homepage.addClass('hide');
128
- }).trigger('change');
129
-
130
- // Custom image/logo width for 'pl-imgloading'
131
- $('.preloader-custom-image-width input').change(function(e){
132
- if($('#preloader-animation').val() == 'pl-imgloading'){
133
- var $loader = $('#loader'),
134
- width = $(this).val() ? parseInt($(this).val()) : false,
135
- min = $(this).attr('min') ? parseInt($(this).attr('min')) : 0,
136
- max = $(this).attr('max') ? parseInt($(this).attr('max')) : 400;
137
- ((min <= width) && (width <= max)) ? $loader.css('width', width) : $loader.css('width', '');
138
- }
139
- });
140
- // Select Animation
141
- $('#preloader-animation').on('change', function() {
142
- var customImage = $('<img>').attr('src', customImageSrc);
143
- var selectedAnimation = $(this).val();
144
- $('.preview-wrapper #loftloader-wrapper').removeAttr('class').addClass(selectedAnimation);
145
- switch(selectedAnimation){
146
- case 'pl-frame':
147
- $('#loader span').css({'background-image': '', 'background-size': ''});
148
- !$('#loader img').length ? $('#loader span').after(customImage) : $('#loader img').attr('src', customImageSrc);
149
- break;
150
- case 'pl-imgloading':
151
- var backgroundImg = 'url('+ customImageSrc +')';
152
- $('#loader span').css('background-image' , backgroundImg);
153
- !$('#loader img').length ? $('#loader span').after(customImage) : $('#loader img').attr('src', customImageSrc);
154
- $('#loader span').css('background-size', 'cover');
155
- $('.preloader-custom-image-width input').trigger('change');
156
- break;
157
- default:
158
- if($('#loader img').length){
159
- $('#loader img').remove();
160
- $('#loader span').css({'background-image': '', 'background-size': ''});
161
- }
162
- break;
163
-
164
- }
165
- })
166
- .on('change', function(e){
167
- var selectedVal = $(this).val(), $width = $('.preloader-custom-image-width input');
168
- $('li.preloader_animation').addClass('hide');
169
- $('li.preloader_animation-' + selectedVal).removeClass('hide');
170
- (selectedVal == 'pl-imgloading') ? $width.attr('required', '') : $width.removeAttr('required');
171
- (selectedVal == 'pl-imgloading') ? '' : $('#loader').css('width', '');
172
- }).trigger('change');
173
-
174
- var firstElement = $('.preview-frame #loftloader-wrapper').find('.loader-section').first();
175
- var secondElement = $('.preview-frame #loftloader-wrapper').find('.loader-section').last();
176
- $('#preloader-background-style').on('change', function(e){
177
- switch($(this).find('option:selected').val()){
178
- case 'fade':
179
- secondElement.addClass('hide');
180
- firstElement.removeAttr('class').addClass('loader-section section-fade');
181
- break;
182
- case 'slide-left-right':
183
- firstElement.removeAttr('class').addClass('loader-section section-left');
184
- secondElement.removeAttr('class').addClass('loader-section section-right');
185
- break;
186
- case 'slide-up':
187
- firstElement.removeAttr('class').addClass('loader-section section-slide-up');
188
- secondElement.addClass('hide');
189
- break;
190
- case 'slide-up-down':
191
- firstElement.removeAttr('class').addClass('loader-section section-up');
192
- secondElement.removeAttr('class').addClass('loader-section section-down');
193
- break;
194
- }
195
- }).trigger('change');
196
-
197
- function loftloader_generate_css_animation(color){
198
- var currentStyle = $('#preloader-animation').val();
199
- var currentColor = color;
200
- var newStyle = '';
201
-
202
- newStyle += '#loftloader-wrapper.pl-sun #loader span, #loftloader-wrapper.pl-sun #loader span:before {background-color: ' + currentColor + ';}';
203
- newStyle += '#loftloader-wrapper.pl-circles #loader span, #loftloader-wrapper.pl-circles #loader:before, #loftloader-wrapper.pl-circles #loader:after {background: ' + currentColor + ';}';
204
- newStyle += '#loftloader-wrapper.pl-wave #loader span, #loftloader-wrapper.pl-wave #loader:before, #loftloader-wrapper.pl-wave #loader:after {background: ' + currentColor + ';}';
205
- newStyle += '#loftloader-wrapper.pl-square #loader span {border: 4px solid ' + currentColor + ';}';
206
- newStyle += '#loftloader-wrapper.pl-frame #loader:before, #loftloader-wrapper.pl-frame #loader:after, #loftloader-wrapper.pl-frame #loader span:before, #loftloader-wrapper.pl-frame #loader span:after {background-color: ' + currentColor + ';}';
207
-
208
- if($('body').find('#preview-animation-color').length > 0){
209
- $('body').find('#preview-animation-color').html(newStyle);
210
- }
211
- else{
212
- $('<style>' + newStyle + '</style>').attr('id', 'preview-animation-color').appendTo($('body'));
213
- }
214
- }
215
- function loftloader_generate_css_background(color){
216
- firstElement.css('background-color', color);
217
- secondElement.css('background-color', color);
218
- }
219
- loftloader_generate_css_animation($('#preloader-animation-color').val());
220
- loftloader_generate_css_background($('#preloader-background-color').val());
221
- });
222
- })(jQuery);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
languages/loftloader.pot CHANGED
@@ -1,155 +1,186 @@
1
- # Copyright (C) 2016 LoftLoader
2
  # This file is distributed under the same license as the LoftLoader package.
 
3
  msgid ""
4
  msgstr ""
5
- "Project-Id-Version: LoftLoader 1.0.0\n"
6
  "Report-Msgid-Bugs-To: http://wordpress.org/support/plugin/loftloader\n"
7
- "POT-Creation-Date: 2016-02-28 06:09:45+00:00\n"
8
  "MIME-Version: 1.0\n"
9
  "Content-Type: text/plain; charset=UTF-8\n"
10
  "Content-Transfer-Encoding: 8bit\n"
11
- "PO-Revision-Date: 2016-MO-DA HO:MI+ZONE\n"
12
  "Last-Translator: Suihai <cain@loftocean.com>\n"
13
  "Language-Team: Loft Ocean <cain@loftocean.com>\n"
 
14
 
15
- #: configs/loftloader-config.php:28
16
- msgid "Show Preloader"
17
  msgstr ""
18
 
19
- #: configs/loftloader-config.php:34
20
- msgid "Enable loftloader"
21
  msgstr ""
22
 
23
- #: configs/loftloader-config.php:35
24
- msgid "Suggest keep it enabled if the site has a lot of images or large videos."
25
  msgstr ""
26
 
27
- #: configs/loftloader-config.php:54
28
- msgid "Preview"
29
  msgstr ""
30
 
31
- #: configs/loftloader-config.php:55
32
- msgid "Hover onto frame below to preview ending animation."
33
  msgstr ""
34
 
35
- #: configs/loftloader-config.php:61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  msgid "Background"
37
  msgstr ""
38
 
39
- #: configs/loftloader-config.php:66
40
- msgid "Select preloader ending animation"
 
 
 
 
 
 
 
 
41
  msgstr ""
42
 
43
- #: configs/loftloader-config.php:68
 
 
 
 
44
  msgid "Fade"
45
  msgstr ""
46
 
47
- #: configs/loftloader-config.php:69
48
  msgid "Slide Left & Right"
49
  msgstr ""
50
 
51
- #: configs/loftloader-config.php:70
52
  msgid "Slide Up"
53
  msgstr ""
54
 
55
- #: configs/loftloader-config.php:71
56
  msgid "Slide Up & Down"
57
  msgstr ""
58
 
59
- #: configs/loftloader-config.php:80
60
- msgid "Preloader background color"
61
- msgstr ""
62
-
63
- #: configs/loftloader-config.php:91
64
- msgid "Preloader background opacity"
65
  msgstr ""
66
 
67
- #: configs/loftloader-config.php:105
68
- msgid "Animation"
69
  msgstr ""
70
 
71
- #: configs/loftloader-config.php:110
72
- msgid "Select preloader loading animation"
73
  msgstr ""
74
 
75
- #: configs/loftloader-config.php:112
76
- msgid "1 - Spinning Sun"
77
  msgstr ""
78
 
79
- #: configs/loftloader-config.php:113
80
- msgid "2 - Luminous Circles"
81
  msgstr ""
82
 
83
- #: configs/loftloader-config.php:114
84
- msgid "3 - Wave"
85
  msgstr ""
86
 
87
- #: configs/loftloader-config.php:115
88
- msgid "4 - Spinning Square"
89
  msgstr ""
90
 
91
- #: configs/loftloader-config.php:116
92
- msgid "5 - Drawing Frame"
93
  msgstr ""
94
 
95
- #: configs/loftloader-config.php:117
96
- msgid "6 - Loading Custom Image"
97
  msgstr ""
98
 
99
- #: configs/loftloader-config.php:127
100
- msgid "Preloader animation color"
101
  msgstr ""
102
 
103
- #: configs/loftloader-config.php:139
104
- msgid "Upload custom image/logo"
105
  msgstr ""
106
 
107
- #: configs/loftloader-config.php:150
108
- msgid "Custom image width - optional (if provided, the value should be between 1 - 400)"
109
  msgstr ""
110
 
111
- #: configs/loftloader-config.php:210 settings/class-loftloader-settings.php:83
112
- msgid "LoftLoader Settings"
113
  msgstr ""
114
 
115
- #: settings/class-loftloader-settings.php:39
116
- msgid "View LoftLoader Settings"
117
  msgstr ""
118
 
119
- #: settings/class-loftloader-settings.php:39
120
- msgid "Settings"
121
  msgstr ""
122
 
123
- #: settings/class-loftloader-settings.php:56
124
- msgid "Sorry, but the request failed. Please try again later."
125
  msgstr ""
126
 
127
- #: settings/class-loftloader-settings.php:57
128
- msgid "Are you sure want to reset all settings?"
129
  msgstr ""
130
 
131
- #: settings/class-loftloader-settings.php:84
132
- msgid "LoftLoader"
133
  msgstr ""
134
 
135
- #: settings/class-loftloader-settings.php:133
136
- msgid "Save Changes"
137
  msgstr ""
138
 
139
- #: settings/class-loftloader-settings.php:134
140
- msgid "Reset All Settings"
141
  msgstr ""
142
 
143
- #: settings/class-loftloader-settings.php:152
144
- msgid "LoftLoader settings have been reset."
 
145
  msgstr ""
146
 
147
- #: settings/form/class-loftloader-preview.php:155
148
- #: settings/form/class-loftloader-preview.php:161
149
- msgid "Upload Image"
 
150
  msgstr ""
151
 
152
- #: settings/form/class-loftloader-preview.php:156
153
- #: settings/form/class-loftloader-preview.php:162
154
- msgid "Remove Image"
155
  msgstr ""
1
+ # Copyright (C) 2017 LoftLoader
2
  # This file is distributed under the same license as the LoftLoader package.
3
+ #, fuzzy
4
  msgid ""
5
  msgstr ""
6
+ "Project-Id-Version: LoftLoader 2.0.0\n"
7
  "Report-Msgid-Bugs-To: http://wordpress.org/support/plugin/loftloader\n"
8
+ "POT-Creation-Date: 2017-03-08 10:40+0800\n"
9
  "MIME-Version: 1.0\n"
10
  "Content-Type: text/plain; charset=UTF-8\n"
11
  "Content-Transfer-Encoding: 8bit\n"
12
+ "PO-Revision-Date: 2017-MO-DA HO:MI+ZONE\n"
13
  "Last-Translator: Suihai <cain@loftocean.com>\n"
14
  "Language-Team: Loft Ocean <cain@loftocean.com>\n"
15
+ "X-Generator: Poedit 1.8.12\n"
16
 
17
+ #: inc/class-loftloader-any-page.php:12
18
+ msgid "LoftLoader Any Page Shortcode"
19
  msgstr ""
20
 
21
+ #: inc/class-loftloader-customize.php:53 loftloader.php:85
22
+ msgid "LoftLoader Lite"
23
  msgstr ""
24
 
25
+ #: inc/class-loftloader-customize.php:81 inc/class-loftloader-customize.php:105
26
+ msgid "Setting"
27
  msgstr ""
28
 
29
+ #: inc/class-loftloader-customize.php:95
30
+ msgid "Press return or enter to open this section"
31
  msgstr ""
32
 
33
+ #: inc/class-loftloader-customize.php:102
34
+ msgid "Back"
35
  msgstr ""
36
 
37
+ #: inc/class-loftloader-customize.php:148 inc/configs/customize-any-page.php:18
38
+ msgid "Generate"
39
+ msgstr ""
40
+
41
+ #: inc/class-loftloader-customize.php:227
42
+ msgid "More info"
43
+ msgstr ""
44
+
45
+ #: inc/configs/customize-any-page.php:24
46
+ msgid "Advanced"
47
+ msgstr ""
48
+
49
+ #: inc/configs/customize-any-page.php:31
50
+ msgid "Check to enable Any Page Extension"
51
+ msgstr ""
52
+
53
+ #: inc/configs/customize-any-page.php:39
54
+ msgid "Generate LoftLoader Shortcode"
55
+ msgstr ""
56
+
57
+ #: inc/configs/customize-background.php:31
58
  msgid "Background"
59
  msgstr ""
60
 
61
+ #: inc/configs/customize-background.php:37 inc/configs/customize-loader.php:59
62
+ msgid "Pick Color"
63
+ msgstr ""
64
+
65
+ #: inc/configs/customize-background.php:43
66
+ msgid "Opacity"
67
+ msgstr ""
68
+
69
+ #: inc/configs/customize-background.php:56
70
+ msgid "Ending Animation"
71
  msgstr ""
72
 
73
+ #: inc/configs/customize-background.php:57
74
+ msgid "Hover on preview area to see the result."
75
+ msgstr ""
76
+
77
+ #: inc/configs/customize-background.php:59
78
  msgid "Fade"
79
  msgstr ""
80
 
81
+ #: inc/configs/customize-background.php:60
82
  msgid "Slide Left & Right"
83
  msgstr ""
84
 
85
+ #: inc/configs/customize-background.php:61
86
  msgid "Slide Up"
87
  msgstr ""
88
 
89
+ #: inc/configs/customize-background.php:62
90
  msgid "Slide Up & Down"
91
  msgstr ""
92
 
93
+ #: inc/configs/customize-loader.php:37
94
+ msgid "Loader"
 
 
 
 
95
  msgstr ""
96
 
97
+ #: inc/configs/customize-loader.php:45
98
+ msgid "Loader Animation"
99
  msgstr ""
100
 
101
+ #: inc/configs/customize-loader.php:46
102
+ msgid "Some support custom image."
103
  msgstr ""
104
 
105
+ #: inc/configs/customize-loader.php:48
106
+ msgid "Spinning Sun"
107
  msgstr ""
108
 
109
+ #: inc/configs/customize-loader.php:49
110
+ msgid "Luminous Circles"
111
  msgstr ""
112
 
113
+ #: inc/configs/customize-loader.php:50
114
+ msgid "Wave"
115
  msgstr ""
116
 
117
+ #: inc/configs/customize-loader.php:51
118
+ msgid "Spinning Square"
119
  msgstr ""
120
 
121
+ #: inc/configs/customize-loader.php:52
122
+ msgid "Drawing Frame"
123
  msgstr ""
124
 
125
+ #: inc/configs/customize-loader.php:53
126
+ msgid "Custom Image Loading"
127
  msgstr ""
128
 
129
+ #: inc/configs/customize-loader.php:68
130
+ msgid "Upload Image"
131
  msgstr ""
132
 
133
+ #: inc/configs/customize-loader.php:78
134
+ msgid "Image Width"
135
  msgstr ""
136
 
137
+ #: inc/configs/customize-main.php:19 inc/configs/customize-main.php:26
138
+ msgid "Enable LoftLoader"
139
  msgstr ""
140
 
141
+ #: inc/configs/customize-promo.php:16
142
+ msgid "Upgrade to Pro"
143
  msgstr ""
144
 
145
+ #: inc/configs/customize-range.php:19
146
+ msgid "Display on"
147
  msgstr ""
148
 
149
+ #: inc/configs/customize-range.php:28
150
+ msgid "Sitewide"
151
  msgstr ""
152
 
153
+ #: inc/configs/customize-range.php:29
154
+ msgid "Homepage only"
155
  msgstr ""
156
 
157
+ #: loftloader.php:25
158
+ msgid "Access not allowed!"
159
  msgstr ""
160
 
161
+ #: loftloader.php:74
162
+ msgid "View LoftLoader Settings"
163
  msgstr ""
164
 
165
+ #: loftloader.php:74
166
+ msgid "Settings"
167
  msgstr ""
168
 
169
+ #. Plugin Name of the plugin/theme
170
+ msgid "LoftLoader"
171
  msgstr ""
172
 
173
+ #. Plugin URI of the plugin/theme
174
+ #. Author URI of the plugin/theme
175
+ msgid "http://www.loftocean.com/"
176
  msgstr ""
177
 
178
+ #. Description of the plugin/theme
179
+ msgid ""
180
+ "An easy to use plugin to add an animated preloader to your website with "
181
+ "fully customisations."
182
  msgstr ""
183
 
184
+ #. Author of the plugin/theme
185
+ msgid "Loft Ocean"
 
186
  msgstr ""
loftloader.php CHANGED
@@ -3,11 +3,10 @@
3
  Plugin Name: LoftLoader
4
  Plugin URI: http://www.loftocean.com/
5
  Description: An easy to use plugin to add an animated preloader to your website with fully customisations.
6
- Version: 1.0.2
7
  Author: Loft Ocean
8
  Author URI: http://www.loftocean.com/
9
  Text Domain: loftloader
10
- Domain Path: /languages
11
  License: GPLv2
12
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
13
  */
@@ -23,69 +22,116 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
23
 
24
  // Not allowed by directly accessing.
25
  if(!defined('ABSPATH')){
26
- die('Access not allowed!');
27
  }
28
 
29
  if(!class_exists('LoftLoader')){
30
- register_activation_hook(__FILE__, 'loftloader_activate'); //
31
- register_deactivation_hook(__FILE__, 'loftloader_deactivate');
32
- /*
33
- * Update the plugin version for initial version
34
- */
35
- function loftloader_activate(){
36
- update_option('loftloader_plugin_version', '1.0.2');
37
- }
38
- /**
39
- * Do nothing for initial version
40
- */
41
- function loftloader_deactivate(){ }
42
  /**
43
  * Define the constant used in this plugin
44
  */
45
  define('LOFTLOADER_ROOT', dirname(__FILE__) . '/');
46
  define('LOFTLOADER_NAME', plugin_basename( __FILE__ ));
47
  define('LOFTLOADER_URI', plugin_dir_url( __FILE__ ));
48
- define('LOFTLOADER_JS_URI', LOFTLOADER_URI . 'js/');
49
- define('LOFTLOADER_CSS_URI', LOFTLOADER_URI . 'css/');
50
 
51
- /**
52
- * Main plugin class
53
- * @since version 1.0.0
54
- */
55
  class LoftLoader{
56
  public function __construct(){
57
- load_plugin_textdomain('loftloader', false, dirname(plugin_basename(__FILE__)) . '/languages/'); // Load the text domain
58
- $this->load_configs();
59
- add_action('init', array($this, 'load_settings')); // Load the plugin settings
60
- add_action('wp', array($this, 'load_front')); // Load the front main class
61
- add_action('wp_enqueue_scripts', array($this, 'enqueue_loader_styles'));
62
- add_action('admin_enqueue_scripts', array($this, 'enqueue_loader_styles'));
 
 
63
  }
64
  /**
65
- * @description load configuration files
66
  */
67
- public function load_configs(){
68
- require_once LOFTLOADER_ROOT . 'configs/loftloader-config.php';
69
  }
70
  /**
71
- * @description load plugin settings main class
72
- */
73
- public function load_settings(){
74
- is_admin() ? require_once LOFTLOADER_ROOT . 'settings/class-loftloader-settings.php' : '';
75
  }
 
 
 
 
 
 
 
 
76
  /**
77
- * @description load plugin front main class
78
- */
79
- public function load_front(){
80
- !is_admin() ? require_once LOFTLOADER_ROOT . 'front/class-loftloader-front.php' : '';
 
 
 
 
81
  }
 
82
  /**
83
- * @description register the loader style css for both plugin setting page and front end
84
  */
85
- public function enqueue_loader_styles(){
86
- wp_register_style('loftloader-animation', LOFTLOADER_CSS_URI . 'loftloader-animation.css', array(), '20161015');
 
 
87
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  }
89
- new LoftLoader(); // Enable LoftLoader
90
  }
91
- ?>
3
  Plugin Name: LoftLoader
4
  Plugin URI: http://www.loftocean.com/
5
  Description: An easy to use plugin to add an animated preloader to your website with fully customisations.
6
+ Version: 2.0.0
7
  Author: Loft Ocean
8
  Author URI: http://www.loftocean.com/
9
  Text Domain: loftloader
 
10
  License: GPLv2
11
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
12
  */
22
 
23
  // Not allowed by directly accessing.
24
  if(!defined('ABSPATH')){
25
+ die(esc_html__('Access not allowed!', 'loftloader'));
26
  }
27
 
28
  if(!class_exists('LoftLoader')){
 
 
 
 
 
 
 
 
 
 
 
 
29
  /**
30
  * Define the constant used in this plugin
31
  */
32
  define('LOFTLOADER_ROOT', dirname(__FILE__) . '/');
33
  define('LOFTLOADER_NAME', plugin_basename( __FILE__ ));
34
  define('LOFTLOADER_URI', plugin_dir_url( __FILE__ ));
35
+ define('LOFTLOADER_ASSET_VERSION', '2017030802');
 
36
 
 
 
 
 
37
  class LoftLoader{
38
  public function __construct(){
39
+ load_plugin_textdomain('loftloader');
40
+
41
+ $this->load_upgrade();
42
+ $this->load_customize();
43
+
44
+ add_action('wp', array($this, 'load_front'));
45
+ add_action('admin_menu', array($this, 'admin_menu'));
46
+ add_filter('plugin_action_links_' . LOFTLOADER_NAME, array($this, 'plugin_action_links'));
47
  }
48
  /**
49
+ * For LoftLoader customize, load the customize related functions
50
  */
51
+ function load_upgrade(){
52
+ require_once LOFTLOADER_ROOT . 'inc/class-loftloader-upgrade.php';
53
  }
54
  /**
55
+ * For LoftLoader upgrade, load the upgrade related functions
56
+ */
57
+ function load_customize(){
58
+ require_once LOFTLOADER_ROOT . 'inc/class-loftloader-customize.php';
59
  }
60
+
61
+ /**
62
+ * For LoftLoader front, load the front end related functions
63
+ */
64
+ function load_front(){
65
+ require_once LOFTLOADER_ROOT . 'inc/class-loftloader-front.php';
66
+ }
67
+
68
  /**
69
+ * Add new setting link to loftloader
70
+ */
71
+ function plugin_action_links($links){
72
+ $customize_url = $this->get_customize_uri();
73
+ $action_links = array(
74
+ 'settings' => '<a href="' . $customize_url . '" title="' . esc_attr__('View LoftLoader Settings', 'loftloader') . '">' . esc_html__('Settings', 'loftloader') . '</a>'
75
+ );
76
+ return array_merge($action_links, $links);
77
  }
78
+
79
  /**
80
+ * Add an admin menu for loftloader
81
  */
82
+ function admin_menu(){
83
+ global $submenu;
84
+ $customize_url = $this->get_customize_uri();
85
+ $submenu['options-general.php'][] = array(esc_html__('LoftLoader Lite', 'loftloader'), 'manage_options', $customize_url, 'hide-if-no-customize');
86
  }
87
+
88
+ /**
89
+ * Helper function to get loftloader customize url
90
+ * @return url loftloader customize uri
91
+ */
92
+ function get_customize_uri(){
93
+ return add_query_arg(array('return' => urlencode(wp_unslash( $_SERVER['REQUEST_URI'])), 'plugin' => 'loftloader-lite'), 'customize.php');
94
+ }
95
+ }
96
+
97
+ // Init loftloader lite
98
+ add_action('after_setup_theme', 'loftloader_init');
99
+ function loftloader_init(){
100
+ if(!class_exists('LoftLoaderPro')){
101
+ new LoftLoader();
102
+ }
103
+ }
104
+
105
+ add_action('plugins_loaded', 'loftloader_any_page');
106
+ function loftloader_any_page(){
107
+ $enable_any_page = get_option('loftloader_enable_any_page', '');
108
+ if($enable_any_page === 'on'){
109
+ require_once LOFTLOADER_ROOT . 'inc/class-loftloader-any-page.php';
110
+ }
111
+ }
112
+
113
+ // Remove widget panels
114
+ add_filter('customize_loaded_components', 'loftloader_remove_widget_panels', 1000, 2);
115
+ function loftloader_remove_widget_panels($components, $manager){
116
+ if(!class_exists('LoftLoaderPro') && loftloader_is_customize($manager)){
117
+ foreach($components as $i => $c){
118
+ if(false !== $i){
119
+ unset($components[$i]);
120
+ }
121
+ }
122
+ }
123
+ return $components;
124
+ }
125
+
126
+ /**
127
+ * Helper function to test on loftloader customize page
128
+ *
129
+ * @return boolean
130
+ */
131
+ function loftloader_is_customize($manager = false){
132
+ global $wp_customize;
133
+ $customize = empty($manager) ? $wp_customize : $manager;
134
+
135
+ return (($customize instanceof WP_Customize_Manager) && ((isset($_GET['plugin']) && ($_GET['plugin'] === 'loftloader-lite')) || ($customize->is_preview() && !is_admin()))) || defined('DOING_AJAX');
136
  }
 
137
  }
 
readme.txt CHANGED
@@ -3,8 +3,8 @@ Contributors: loftocean
3
  Tags: loader, load, preloader, page preloader, prelader spinner, preloader with custom logo, animated preloader, CSS3 preloader, customize
4
  Donate link:
5
  Requires at least: 4.3
6
- Tested up to: 4.6.1
7
- Stable tag: 1.0.2
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -14,42 +14,51 @@ An easy to use plugin to add an animated preloader to your website with fully cu
14
 
15
  Small and powerful. LoftLoader helps you to add a beautiful animated preloader to your website, and have full control of its look, without writing any code.
16
 
17
- [youtube https://www.youtube.com/watch?v=21rRzhbLM8o]
18
 
19
  = Features & Options =
 
20
  * Pure CSS3 animation. Works in any modern browser.
21
  * 4 ending animation effects.
22
  * 6 loading animation effects. 2 of them support custom image.
23
  * Unlimited background color. Also can change the opacity.
24
  * Unlimited loader color.
25
- * Live preview while setting.
26
  * Responsive & retina ready.
27
  * Option to enable/disable the preloader.
28
  * Option to enable preloader on site homepage only.
29
  * Ready for translation (.pot file included).
 
 
 
 
30
 
31
  = Pro Version =
32
 
33
- LoftLoader Pro is available. [Upgrade to pro version](https://codecanyon.net/item/loftloader-pro-preloader-plugin-for-wordpress/17339671) and get more stunning features!
34
 
35
- * Enhanced settings panel with WordPress Customizer.
36
  * Handpick - Turn the preloader on for specific pages or posts.
 
 
 
 
37
  * Loader - 16 types of animations to choose. 5 of them support custom images.
38
  * Looping - Animation can be set to looping forever, or just once (ends after page has loaded).
39
  * Progress - Progress bar or counting percentage. Any color. Position & size control.
40
- * Message - Enter your custom welcome or loading message to display. Control color & font size.
41
  * Load Time - Set a minimum load time to prevent the pre-loader from disappearing too fast.
42
  * Device Control - Choose to show the loading screen on all devices, or hide on mobile, or show on mobile only.
43
- * Light weight, fast. Coded with SASS. JS minified.
 
44
  * Purchase once, free lifetime update with new features.
45
 
46
- Check some [demos](http://www.loftocean.com/loftloader/example-8/) created by pro version.
47
 
48
  == Installation ==
49
 
50
  1. Install the plugin either via the WordPress.org plugin directory, or by uploading the files to your server (in the /wp-content/plugins/ directory).
51
  2. Activate the LoftLoader plugin through the 'Plugins' menu in WordPress.
52
- 3. In the WordPress administration screen, go to Settings > LoftLoader, check the settings there.
53
 
54
  == Frequently Asked Questions ==
55
 
@@ -58,28 +67,31 @@ Check some [demos](http://www.loftocean.com/loftloader/example-8/) created by pr
58
 
59
  == Screenshots ==
60
 
61
- 1. LoftLoader settings page
62
  2. LoftLoader background settings
63
- 3. LoftLoader animation settings
64
- 4. LoftLoader live preview
65
- 5. Pro version: Settings Panel
66
- 6. Pro version: Custom Image Loading
67
- 7. Pro version: Gradient Background
68
- 8. Pro version: Load Time & Device Control
69
 
70
  == Changelog ==
71
-
72
- = 1.0.0 =
73
- * Initial Public Release
74
-
75
- = 1.0.1 =
76
- * Add support for site homepage only
77
 
78
  = 1.0.2 =
79
  * Fixed: Load before anything bug
80
  * Fixed: Wave animation minor bug
81
  * Added: Pro version link on settings page
82
 
 
 
 
 
 
 
83
  == Upgrade Notice ==
84
 
85
  = 1.0.0 =
3
  Tags: loader, load, preloader, page preloader, prelader spinner, preloader with custom logo, animated preloader, CSS3 preloader, customize
4
  Donate link:
5
  Requires at least: 4.3
6
+ Tested up to: 4.7
7
+ Stable tag: 2.0.0
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
14
 
15
  Small and powerful. LoftLoader helps you to add a beautiful animated preloader to your website, and have full control of its look, without writing any code.
16
 
17
+ [youtube https://www.youtube.com/watch?v=zxiF5hHU1kc]
18
 
19
  = Features & Options =
20
+ * Enhanced settings panel with WordPress Customizer.
21
  * Pure CSS3 animation. Works in any modern browser.
22
  * 4 ending animation effects.
23
  * 6 loading animation effects. 2 of them support custom image.
24
  * Unlimited background color. Also can change the opacity.
25
  * Unlimited loader color.
26
+ * Can add different loaders for different pages on one site (New feature since v2.0).
27
  * Responsive & retina ready.
28
  * Option to enable/disable the preloader.
29
  * Option to enable preloader on site homepage only.
30
  * Ready for translation (.pot file included).
31
+ * Light weight, fast. Coded with SASS. CSS & JS minified.
32
+
33
+ = Online Documentation =
34
+ To know how to use the plugin, please click the link to check [online documentation](http://www.loftocean.com/loftloader/wp-content/uploads/sites/3/2017/03/documentation.pdf). It’s the documentation of Pro version. But you can still find Lite version features details in it.
35
 
36
  = Pro Version =
37
 
38
+ LoftLoader Pro is available. [Upgrade to pro version](https://codecanyon.net/item/loftloader-pro-preloader-plugin-for-wordpress/17339671?ref=LoftOcean) and get more stunning features!
39
 
 
40
  * Handpick - Turn the preloader on for specific pages or posts.
41
+ * Hide the preloader for picked post types - products, portfolios, etc.
42
+ * Option to display the preloader once per visitor session.
43
+ * Support gradient background color, full background image, and repeating background pattern.
44
+ * More ending animations.
45
  * Loader - 16 types of animations to choose. 5 of them support custom images.
46
  * Looping - Animation can be set to looping forever, or just once (ends after page has loaded).
47
  * Progress - Progress bar or counting percentage. Any color. Position & size control.
48
+ * Message - Enter your custom welcome or loading message to display. Control color, position & font size.
49
  * Load Time - Set a minimum load time to prevent the pre-loader from disappearing too fast.
50
  * Device Control - Choose to show the loading screen on all devices, or hide on mobile, or show on mobile only.
51
+ * Option to enable smooth page transition effect. [Check the example](http://demo.loftocean.com/loftloader-transition/).
52
+ * Choose to save customize styles as inline styles in <header> or as an external .css file.
53
  * Purchase once, free lifetime update with new features.
54
 
55
+ Check some [examples](http://www.loftocean.com/loftloader/example-8/) created by pro version.
56
 
57
  == Installation ==
58
 
59
  1. Install the plugin either via the WordPress.org plugin directory, or by uploading the files to your server (in the /wp-content/plugins/ directory).
60
  2. Activate the LoftLoader plugin through the 'Plugins' menu in WordPress.
61
+ 3. In the WordPress administration screen, go to Settings > LoftLoader Lite, check the settings there.
62
 
63
  == Frequently Asked Questions ==
64
 
67
 
68
  == Screenshots ==
69
 
70
+ 1. LoftLoader settings panel
71
  2. LoftLoader background settings
72
+ 3. LoftLoader loader settings
73
+ 4. Pro version: Settings Panel
74
+ 5. Pro version: Custom Image Loading
75
+ 6. Pro version: Gradient Background
76
+ 7. Pro version: Background Image
77
+ 8. Pro version: Load Time, Device Control & Smooth Page Transition
78
 
79
  == Changelog ==
80
+ = 2.0.0 =
81
+ * Changed: Rewrite the framework, move all settings to wp customize
82
+ * Added: Any page extension
 
 
 
83
 
84
  = 1.0.2 =
85
  * Fixed: Load before anything bug
86
  * Fixed: Wave animation minor bug
87
  * Added: Pro version link on settings page
88
 
89
+ = 1.0.1 =
90
+ * Add support for site homepage only
91
+
92
+ = 1.0.0 =
93
+ * Initial Public Release
94
+
95
  == Upgrade Notice ==
96
 
97
  = 1.0.0 =
settings/class-loftloader-settings.php DELETED
@@ -1,162 +0,0 @@
1
- <?php
2
- // Not allowed by directly accessing.
3
- if(!defined('ABSPATH')){
4
- die('Access not allowed!');
5
- }
6
-
7
- /**
8
- * Main class for plugin option page
9
- *
10
- * @package LoftLoader
11
- * @link http://www.loftocean.com/
12
- * @author Suihai Huang from Loft Ocean Team
13
-
14
- * @since version 1.0
15
- */
16
-
17
- if(!class_exists('LoftLoader_Settings')){
18
- class LoftLoader_Settings{
19
- private $page_id; // Plugin setting page id
20
- private $setting_manager; // Settings section to render/save settings
21
- public function __construct(){
22
- $this->page_id = 'loftloader-settings';
23
- $this->setting_manager = new LoftLoader_Setting_Manager();
24
-
25
- add_filter('plugin_action_links_' . LOFTLOADER_NAME, array($this, 'plugin_action_links'));
26
- add_action('admin_enqueue_scripts', array($this, 'enqueue_scripts'));
27
- add_action('print_media_templates', array($this, 'media_styles')); // Print media styles for media uploader
28
- add_action('admin_menu', array($this, 'add_settings_menu')); // Add plugin option menu item
29
- add_action('admin_init', array($this, 'register_settings')); // Register setting fields
30
- add_action('admin_notices', array($this, 'reset_update'));
31
- add_action('wp_ajax_loftloader_reset_settings', array($this, 'reset_settings')); // Reset the plugin option settings
32
- }
33
- /**
34
- * @description add a plugin action link to plugin setting page
35
- */
36
- public function plugin_action_links($links){
37
- $action_links = array(
38
- 'settings' => '<a href="' . admin_url('options-general.php?page=' . $this->page_id) . '" title="' . esc_attr__('View LoftLoader Settings', 'loftloader') . '">' . esc_html__('Settings', 'loftloader') . '</a>'
39
- );
40
- return array_merge($action_links, $links);
41
- }
42
- /**
43
- * @description enqueue the style when show media uploader template
44
- */
45
- public function media_styles(){
46
- wp_enqueue_style('loftloader-media-style', LOFTLOADER_CSS_URI . 'settings/loftloader-media.css');
47
- }
48
- /**
49
- * @description register and enqueu scripty and styles
50
- */
51
- public function enqueue_scripts(){
52
- if(isset($_GET['page']) && ($_GET['page'] == $this->page_id)){
53
- $js_vars = array(
54
- 'img_base' => (LOFTLOADER_URI . 'img/'),
55
- 'fail_text' => esc_html__('Sorry, but the request failed. Please try again later.', 'loftloader'),
56
- 'confirm_text' => esc_html__('Are you sure want to reset all settings?', 'loftloader'),
57
- 'ajax' => array(
58
- 'url' => admin_url('admin-ajax.php'),
59
- 'action' => 'loftloader_reset_settings',
60
- 'nonce' => wp_create_nonce('loftloader-reset-settings')
61
- )
62
- );
63
- // Register the scripts and styles
64
- wp_register_script('loftloader-setting', LOFTLOADER_JS_URI . 'settings/loftloader-settings.js', array('jquery', 'wp-color-picker', 'jquery-ui-slider'), '1.0');
65
- wp_localize_script('loftloader-setting', 'loftloader_vars', $js_vars);
66
-
67
- wp_register_style('loftloader-jqueryui', LOFTLOADER_CSS_URI . 'jquery-ui.css', array(), '1.0');
68
- wp_register_style('loftloader-settings', LOFTLOADER_CSS_URI . 'settings/loftloader-settings.css', array('wp-color-picker', 'loftloader-jqueryui'), '1.0');
69
-
70
- // Enqueue the scripts and styles
71
- wp_enqueue_media();
72
- wp_enqueue_script('loftloader-setting');
73
- wp_enqueue_style('loftloader-settings');
74
- wp_enqueue_style('loftloader-animation');
75
- }
76
- }
77
- /**
78
- * @description add plugin settings menu
79
- */
80
- public function add_settings_menu(){
81
- add_options_page(
82
- esc_html__('LoftLoader Settings', 'loftloader'), // Page title on html head
83
- esc_html__('LoftLoader', 'loftloader'), // Menu item label
84
- 'manage_options',
85
- $this->page_id,
86
- array($this, 'render_settings_page')
87
- ); // Register the plugin option subpage
88
- }
89
- /**
90
- * @description register the settings for saving
91
- */
92
- public function register_settings(){
93
- $this->setting_manager->register_setting();
94
- }
95
- /**
96
- * @description get settings content
97
- */
98
- private function get_settings_content(){
99
- ob_start();
100
- $this->setting_manager->render_settings_section();
101
- $content = ob_get_contents();
102
- ob_end_clean();
103
- return $content;
104
- }
105
- /**
106
- * @description get settings page template
107
- */
108
- public function render_settings_page(){
109
- $footer = '<div class="panel-footer">' . $this->get_buttons() . '</div>';
110
- $content = $this->get_settings_content();
111
- $action = admin_url('options.php');
112
- $ad_url = LOFTLOADER_URI . 'img/pro-ad.jpg';
113
- $codecanyon = 'https://codecanyon.net/item/loftloader-pro-preloader-plugin-for-wordpress/17339671';
114
- $html = <<<ETO
115
- <div class="wrap">
116
- <div id="loftloader-options-panel" class="loftloader-options-panel">
117
- <form method="post" action="$action">
118
- <div class="panel-content">
119
- $content
120
- </div>
121
- <!-- panel-content -->
122
- $footer
123
- </form>
124
- </div>
125
- <div id="loftloader-pro-ad-wrapper">
126
- <a href="$codecanyon" target="_blank"><img src="$ad_url"></a>
127
- </div>
128
- </div>
129
- ETO;
130
- echo $html;
131
- }
132
- /**
133
- * @description get save button
134
- * @return save button html
135
- */
136
- private function get_buttons(){
137
- $btns = '<p class="submit"><input type="submit" name="submit" id="submit" class="submit button button-primary" value="' . esc_attr__('Save Changes', 'loftloader') . '"></p>';
138
- $btns .= '<p class="reset"><input type="submit" class="button button-primary reset" value="' . esc_attr__('Reset All Settings', 'loftloader') . '"></p>';
139
- return $btns;
140
- }
141
- /**
142
- * @description reset loftloader settings
143
- */
144
- public function reset_settings(){
145
- check_ajax_referer('loftloader-reset-settings', 'nonce');
146
- $this->setting_manager->reset_settings();
147
- update_option('loftloader_settings_reset', 'done');
148
- wp_send_json_success();
149
- wp_die();
150
- }
151
- /**
152
- * @description show reset confirm message
153
- */
154
- public function reset_update(){
155
- if(get_option('loftloader_settings_reset', '') == 'done'){
156
- add_settings_error('loftloader-options', esc_attr('loftloader_settings_reset_notice'), esc_html__('LoftLoader settings have been reset.', 'loftloader'), 'updated');
157
- delete_option('loftloader_settings_reset');
158
- }
159
- }
160
- }
161
- new LoftLoader_Settings();
162
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
settings/form/class-loftloader-checkbox.php DELETED
@@ -1,41 +0,0 @@
1
- <?php
2
- // Not allowed by directly accessing.
3
- if(!defined('ABSPATH')){
4
- die('Access not allowed!');
5
- }
6
- /**
7
- * Plugin option form element class
8
- * Type Checkbox
9
- *
10
- * @package LoftLoader
11
- * @link http://www.loftocean.com/
12
- * @author Suihai Huang from Loft Ocean Team
13
-
14
- * @since version 1.0
15
- */
16
-
17
- if(!class_exists('LoftLoader_Checkbox')){
18
- class LoftLoader_Checkbox extends LoftLoader_Form_Base{
19
- /**
20
- * @description rewrite the content function
21
- */
22
- protected function content(){
23
- $html = '';
24
- if($this->options){
25
- $value = $this->values;
26
- $class = '';
27
- $id = '';
28
- if(count($this->options) == 1){
29
- $class = (isset($this->extra['class']) && $this->extra['class'])? ' class="' . $this->extra['class'] . '"' : '';
30
- $id = (isset($this->extra['id']) && $this->extra['id']) ? ' id="'. $this->extra['id'] . '"' : '';
31
- }
32
- foreach($this->options as $val=>$attr){
33
- $checked = checked($value, $val, false);
34
- $disabled = (isset($attr['disabled']) && $attr['disabled']) ? ' disabled' : '';
35
- $html .= '<label><input' . $id . $class . ' type="checkbox" name="' . $this->name . '" value="' . $val . '"' . $checked . $disabled . '>' . $attr['label'] . '<div class="on-off"><span></span></div></label>';
36
- }
37
- }
38
- return $html;
39
- }
40
- }
41
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
settings/form/class-loftloader-form-base.php DELETED
@@ -1,106 +0,0 @@
1
- <?php
2
- // Not allowed by directly accessing.
3
- if(!defined('ABSPATH')){
4
- die('Access not allowed!');
5
- }
6
- /**
7
- * Plugin option form element class
8
- * The base class of each type of form element
9
- *
10
- * @package LoftLoader
11
- * @link http://www.loftocean.com/
12
- * @author Suihai Huang from Loft Ocean Team
13
-
14
- * @since version 1.0
15
- */
16
-
17
- if(!class_exists('LoftLoader_Form_Base')){
18
- abstract class LoftLoader_Form_Base{
19
- protected $name; // Form element name
20
- protected $title; // Field title
21
- protected $description; // Field description
22
- protected $extra; // Extra arguments, may include the class infos
23
- protected $options; // Option for some type of form element, radio/select/check
24
- protected $values; // Form element value
25
- public function __construct($name, $title, $description, $options, $values, $extra = array()){
26
- $this->name = $name;
27
- $this->title = $title;
28
- $this->extra = $extra;
29
- $this->values = $values;
30
- $this->options = $options;
31
- $this->description = $description;
32
- }
33
- /**
34
- * @description show the html of each form element
35
- */
36
- public function render(){
37
- if($this->options){
38
- $replace = array('[[TITLE]]' => $this->title, '[[DESCRIPTION]]' => $this->description(), '[[INFO]]' => $this->field_info(), '[[LINKS]]' => $this->links(), '[[CONTENT]]' => $this->content());
39
- echo strtr($this->template(), $replace);
40
- }
41
- }
42
- /**
43
- * @description form element HTML template
44
- */
45
- protected function template(){
46
- $class = (isset($this->extra['wrapperClass']) && $this->extra['wrapperClass'])? ' ' . $this->extra['wrapperClass'] : '';
47
- $html = <<<ETO
48
- <div class="list-title">
49
- <h4>[[TITLE]]</h4>
50
- [[DESCRIPTION]][[INFO]][[LINKS]]
51
- </div>
52
- <div class="list-content$class">
53
- <fieldset><legend class="screen-reader-text"><span>[[TITLE]]</span></legend>[[CONTENT]]</fieldset>
54
- </div>
55
- ETO;
56
- return $html;
57
- }
58
- /**
59
- * @description get field content
60
- */
61
- protected function content(){
62
- $html = '';
63
- if($this->options){
64
- foreach($this->options as $val=>$text){
65
- $checked = ($default_value[$this->name] == $val)?' checked':'';
66
- $html .= '<label><input type="checkbox" name="' . $this->name . '" value="' . $val . '"' . $checked . '>' . $text['label'] . '</label>';
67
- }
68
- }
69
- return $html;
70
- }
71
- /**
72
- * @description get field info if any, normally this should be the tips
73
- */
74
- protected function field_info(){
75
- $html = '';
76
- if(isset($this->extra['info'])){
77
- $html .= '<p><i class="fa fa-info-circle"></i> ' . $this->extra['info'] . '</p>';
78
- }
79
- return $html;
80
- }
81
- /**
82
- * @description field description if any
83
- */
84
- protected function description(){
85
- $html = '';
86
- if(isset($this->description) && !empty($this->description)){
87
- $html .= '<span class="description">' . $this->description . '</span>';
88
- }
89
- return $html;
90
- }
91
- /**
92
- * @description fields links if any
93
- */
94
- protected function links(){
95
- $html = '';
96
- if(isset($this->extra['links']) && is_array($this->extra['links'])){
97
- $html .= '<ul>';
98
- foreach($this->extra['links'] as $text=>$link){
99
- $html .= '<li><a href="' . $link . '">' . $text . '</a></li>';
100
- }
101
- $html .= '</ul>';
102
- }
103
- return $html;
104
- }
105
- }
106
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
settings/form/class-loftloader-preview.php DELETED
@@ -1,210 +0,0 @@
1
- <?php
2
- // Not allowed by directly accessing.
3
- if(!defined('ABSPATH')){
4
- die('Access not allowed!');
5
- }
6
- /**
7
- * Plugin option form element class
8
- * Type Preloader_Preview, actually this includes a set of settings and a preview for these settings
9
- *
10
- * @package LoftLoader
11
- * @link http://www.loftocean.com/
12
- * @author Suihai Huang from Loft Ocean Team
13
-
14
- * @since version 1.0
15
- */
16
-
17
- if(!class_exists('LoftLoader_Preloader_Preview')){
18
- class LoftLoader_Preloader_Preview extends LoftLoader_Form_Base{
19
- private $preview; // Section preview
20
- private $setting; // Section setting
21
- public function __construct($name, $title, $description, $options, $values, $extra = array()){
22
- parent::__construct($name, $title, $description, $options, $values, $extra);
23
- // Assign the setting for each section
24
- foreach($options as $section){
25
- switch($section['section']){
26
- case 'preview':
27
- $this->preview = $section;
28
- break;
29
- case 'setting':
30
- $this->setting = $section;
31
- break;
32
- }
33
- }
34
- }
35
- /**
36
- * @description rewrite the render function
37
- */
38
- public function render(){
39
- if(!empty($this->preview) && !empty($this->setting)){
40
- $replace = array(
41
- '[[PREVIEW-TITLE]]' => $this->preview_title(),
42
- '[[PREVIEW-DESCRIPTION]]' => $this->preview_description(),
43
- '[[PREVIEW-CONTENT]]' => $this->preview_content(),
44
- '[[SETTING-CONTENT]]' => $this->setting_content()
45
- );
46
- echo strtr($this->template(), $replace);
47
- }
48
- }
49
- /**
50
- * @description rewrite the html template function
51
- */
52
- protected function template(){
53
- $html = <<<ETO
54
- <div class="preview-section">
55
- <div class="preview-wrapper"><h3>[[PREVIEW-TITLE]]</h3>[[PREVIEW-DESCRIPTION]][[PREVIEW-CONTENT]]</div>
56
- <div class="preview-settings">[[SETTING-CONTENT]]</div>
57
- </div>
58
- ETO;
59
- return $html;
60
- }
61
- /**
62
- * @description add new function to get the preview title
63
- */
64
- protected function preview_title(){
65
- return $this->get_property($this->preview, 'title');
66
- }
67
- /**
68
- * @description add new function to get the preview description
69
- */
70
- protected function preview_description(){
71
- $description = $this->get_property($this->preview, 'description');
72
- if($description){
73
- return '<span class="description">' . $description . '</span>';
74
- }
75
- }
76
- /**
77
- * @description add new function to get the preview content
78
- */
79
- protected function preview_content(){
80
- $html = '<div class="preview-frame">';
81
- $html .= '<div id="loftloader-wrapper">';
82
- $html .= '<div class="loader-inner"><div id="loader"><span></span></div></div>';
83
- $html .= '<div class="loader-section section-up"></div>';
84
- $html .= '<div class="loader-section section-down"></div>';
85
- $html .= '</div>';
86
- $html .= '</div>';
87
- return $html;
88
- }
89
- /**
90
- * @description add new function to get the settings content
91
- */
92
- protected function setting_content(){
93
- $html = '';
94
- if(!empty($this->setting)){
95
- foreach((array)$this->setting['content'] as $item){
96
- $returnHTML = $this->setting_section_html($item['content']);
97
- if(!empty($returnHTML)){
98
- $html .= '<div class="setting-group">';
99
- $html .= '<h3>' . $item['title'] . '</h3>';
100
- $html .= '<ul>' . $returnHTML . '</ul>';
101
- $html .= '</div>';
102
- }
103
- }
104
- }
105
- return $html;
106
- }
107
- /**
108
- * @description add new function to get the settings elements html
109
- */
110
- protected function setting_section_html($section){
111
- $html = '';
112
- $values = $this->values;
113
- foreach((array)$section as $element){
114
- $elementHTML = '';
115
- if(strpos($element['name'], '[') !== false){
116
- $subs = (strpos($element['name'], '[') !== false) ? strtr($element['name'], array(']' => '', '[' => '][')) : $element['name'];
117
- $name = $this->name . '[' . $subs . ']'; // Name of the element
118
- $value = $values;
119
- foreach(explode('][', $subs) as $sub){
120
- $value = $value[$sub];
121
- }
122
- }
123
- else{
124
- $name = $this->name . '[' . $element['name'] . ']'; // Element name
125
- $value = $values[$element['name']]; // Element value
126
- }
127
- $value = is_array($value) ? $value : trim($value);
128
- switch($element['type']){
129
- case 'number':
130
- $elementHTML .= '<input type=number name="' . $name . '" value="' . $value . '" min=1 max=400 title="Number between 1-400"> px';
131
- break;
132
- case 'select':
133
- if(is_array($element['options']) && (count($element['options']) > 0)){
134
- $class = (isset($element['extra']) && isset($element['extra']['class']) && $element['extra']['class']) ? ' class="' . $element['extra']['class'] . '"' : '';
135
- $id = (isset($element['extra']) && isset($element['extra']['id']) && $element['extra']['id']) ? ' id="' . $element['extra']['id'] . '"' : '';
136
- $elementHTML = '<select name="' . $name . '"'. $class . $id .'>';
137
- foreach((array)$element['options'] as $val => $attr){
138
- $selected = selected($value, $val, false);
139
- $elementHTML .= '<option value="' . $val . '"' . $selected . '>' . $attr['label'] . '</option>';
140
- }
141
- $elementHTML .= '</select>';
142
- }
143
- break;
144
- case 'color-picker':
145
- $id = (isset($element['extra']) && isset($element['extra']['id']) && $element['extra']['id']) ? ' id="' . $element['extra']['id'] . '"' : '';
146
- $value = !empty($value) ? $value : $element['options']['defaultValue'];
147
- $value = !empty($value) ? $value : '#222222';
148
- $elementHTML = '<input' . $id . ' class="loader-color-picker" type="text" name="' . $name . '" value="' . $value . '" data-default-color="' . $value . '" />';
149
- break;
150
- case 'media':
151
- $val = array_filter($value);
152
- if(!empty($val)){
153
- $elementHTML = '<div class="bg-img-holder"><img src="' . $value['url'] . '"></div>';
154
- $elementHTML .= '<a class="button loader-set-image hide">' . esc_html__('Upload Image', 'loftloader') . '</a>';
155
- $elementHTML .= '<span class="bg-img-remove">' . esc_html__('Remove Image', 'loftloader') . '</span>';
156
- $elementHTML .= '<input class="admin-image-id" type="hidden" value="' . ($value['id'] ? $value['id']: '') . '" name="' . $name . '[id]">';
157
- $elementHTML .= '<input class="admin-image-url preloader-preview-image" type="hidden" value="' . ($value['url'] ? $value['url'] : '') . '" name="' . $name . '[url]">';
158
- }
159
- else{
160
- $elementHTML = '<a class="button loader-set-image">' . esc_html__('Upload Image', 'loftloader') . '</a>';
161
- $elementHTML .= '<span class="bg-img-remove hide">' . esc_html__('Remove Image', 'loftloader') . '</span>';
162
- $elementHTML .= '<input class="admin-image-id" type="hidden" name="' . $name . '[id]">';
163
- $elementHTML .= '<input class="admin-image-url preloader-preview-image" type="hidden" name="' . $name . '[url]">';
164
- }
165
- break;
166
- case 'slider':
167
- $class = (isset($element['extra']) && isset($element['extra']['class']) && $element['extra']['class']) ? ' ' . $element['extra']['class'] : '';
168
- $value = !empty($value) ? $value : $element['options']['default'];
169
- $value = !empty($value) ? $value : '100';
170
- $min = (isset($element['options']) && isset($element['options']['min']) && $element['options']['min']) ? $element['options']['min'] : 0;
171
- $max = (isset($element['options']) && isset($element['options']['max']) && $element['options']['max']) ? $element['options']['max'] : 100;
172
- $step = (isset($element['options']) && isset($element['options']['step']) && $element['options']['step']) ? $element['options']['step'] : 5;
173
- $elementHTML .= '<label class="amount opacity">';
174
- $elementHTML .= '<input name="' . $name . '" type="text" class="opacity-amount" readonly value="' . $value . '">';
175
- $elementHTML .= '</label>';
176
- $elementHTML .= '<div class="ui-slider loader-ui-slider' . $class . '" data-default="' . intval($value) . '" data-min="' . $min . '" data-max="' . $max . '" data-step="' . $step . '"></div>';
177
- $elementHTML .= '</fieldset>';
178
- break;
179
- }
180
- $wrapperClass = (isset($element['extra']) && isset($element['extra']['wrapperClass']) && $element['extra']['wrapperClass']) ? $element['extra']['wrapperClass'] : '';
181
- $template = $this->element_template($wrapperClass);
182
- $replace = array('[[TITLE]]' => $element['title'], '[[CONTENT]]' => $elementHTML);
183
- $html .= strtr($template, $replace);
184
- }
185
- return !empty($html) ? $html : false;
186
- }
187
- /**
188
- * @description the element template
189
- */
190
- private function element_template($class){
191
- $class = !empty($class) ? ' class="' . $class . '"' : '';
192
- $html = <<<ETO
193
- <li$class>
194
- <h4>[[TITLE]]</h4>
195
- <fieldset><legend class="screen-reader-text"><span>[[TITLE]]</span></legend>[[CONTENT]]</fieldset>
196
- </li>
197
- ETO;
198
- return $html;
199
- }
200
- /**
201
- * @description helper function to get the element from array provided
202
- */
203
- private function get_property($var, $index){
204
- if(isset($var[$index])){
205
- return $var[$index];
206
- }
207
- return false;
208
- }
209
- }
210
- }