LoftLoader - Version 1.0.0

Version Description

Initial Public Release

Release Info

Developer	loftocean
Plugin	LoftLoader
Version	1.0.0
Comparing to
See all releases

Version 1.0.0

Files changed (37) hide show

configs/loftloader-config.php +326 -0
css/images/ui-bg_flat_55_999999_40x100.png +0 -0
css/images/ui-bg_flat_75_aaaaaa_40x100.png +0 -0
css/images/ui-bg_glass_100_f6f6f6_1x400.png +0 -0
css/images/ui-bg_glass_100_fdf5ce_1x400.png +0 -0
css/images/ui-bg_glass_45_0078ae_1x400.png +0 -0
css/images/ui-bg_glass_55_f8da4e_1x400.png +0 -0
css/images/ui-bg_glass_75_79c9ec_1x400.png +0 -0
css/images/ui-bg_gloss-wave_45_e14f1c_500x100.png +0 -0
css/images/ui-bg_gloss-wave_50_6eac2c_500x100.png +0 -0
css/images/ui-bg_gloss-wave_75_2191c0_500x100.png +0 -0
css/images/ui-bg_highlight-soft_75_ffe45c_1x100.png +0 -0
css/images/ui-bg_inset-hard_100_fcfdfd_1x100.png +0 -0
css/images/ui-icons_0078ae_256x240.png +0 -0
css/images/ui-icons_056b93_256x240.png +0 -0
css/images/ui-icons_acacac_256x240.png +0 -0
css/images/ui-icons_e0fdff_256x240.png +0 -0
css/images/ui-icons_ef8c08_256x240 1.png +0 -0
css/images/ui-icons_ef8c08_256x240.png +0 -0
css/images/ui-icons_f5e175_256x240.png +0 -0
css/images/ui-icons_f7a50d_256x240.png +0 -0
css/images/ui-icons_fcd113_256x240.png +0 -0
css/jquery-ui.css +1225 -0
css/loftloader-animation.css +817 -0
css/settings/loftloader-media.css +23 -0
css/settings/loftloader-settings.css +536 -0
front/class-loftloader-front.php +85 -0
img/loftloader-logo.png +0 -0
js/front/loftloader.js +5 -0
js/settings/loftloader-settings.js +216 -0
languages/loftloader.pot +155 -0
loftloader.php +92 -0
readme.txt +60 -0
settings/class-loftloader-settings.php +158 -0
settings/form/class-loftloader-checkbox.php +42 -0
settings/form/class-loftloader-form-base.php +107 -0
settings/form/class-loftloader-preview.php +211 -0

configs/loftloader-config.php ADDED Viewed

	@@ -0,0 +1,326 @@


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	+ * @version 1.0
12	+ * @link http://www.loftocean.com/
13	+ * @author Suihai Huang from Loft Ocean Team
14	+
15	+ * @since version 1.0
16	+ */
17	+
18	+ if(!file_exists('loftloader_settings_fields') && !file_exists('loftloader_settings_default_value')){
19	+ add_filter('loftloader_settings_fields', 'loftloader_settings_fields');
20	+ /**
21	+ * @description hook callback function to register the fields of loftloader
22	+ * @param array $fields
23	+ * @return array merge fields to the array passed by
24	+ */
25	+ function loftloader_settings_fields($fields = array()){
26	+ return array_merge((array)$fields, array(
27	+ array(
28	+ 'title' => esc_html__('Show Preloader', 'loftloader'),
29	+ 'args' => array(),
30	+ 'content' => array(
31	+ array(
32	+ 'name' => 'enable',
33	+ 'type' => 'Checkbox',
34	+ 'title' => esc_html__('Enable loftloader', 'loftloader'),
35	+ 'description' => esc_html__('Suggest keep it enabled if the site has a lot of images or large videos.', 'loftloader'),
36	+ 'options' => array(
37	+ 'on' => array('label' => '')
38	+ )
39	+ )
40	+ )
41	+ ),
42	+ array(
43	+ 'title' => '',
44	+ 'args' => array('nolist' => true, 'nowrap' => true),
45	+ 'content' => array(
46	+ array(
47	+ 'name' => 'settings',
48	+ 'type' => 'Preloader_Preview',
49	+ 'title' => '',
50	+ 'description' => '',
51	+ 'options' => array(
52	+ array(
53	+ 'section' => 'preview',
54	+ 'title' => esc_html__('Preview', 'loftloader'),
55	+ 'description' => esc_html__('Hover onto frame below to preview ending animation.', 'loftloader')
56	+ ),
57	+ array(
58	+ 'section' => 'setting',
59	+ 'content' => array(
60	+ array(
61	+ 'title' => esc_html__('Background', 'loftloader'),
62	+ 'content' => array(
63	+ array(
64	+ 'name' => 'background[effect]',
65	+ 'type' => 'select',
66	+ 'title' => esc_html__('Select preloader ending animation', 'loftloader'),
67	+ 'options' => array(
68	+ 'fade' => array('label' => esc_html__('Fade', 'loftloader')),
69	+ 'slide-left-right' => array('label' => esc_html__('Slide Left & Right', 'loftloader')),
70	+ 'slide-up' => array('label' => esc_html__('Slide Up', 'loftloader')),
71	+ 'slide-up-down' => array('label' => esc_html__('Slide Up & Down', 'loftloader'), 'selected' => true)
72	+ ),
73	+ 'extra' => array(
74	+ 'id' => 'preloader-background-style',
75	+ )
76	+ ),
77	+ array(
78	+ 'name' => 'background[color]',
79	+ 'type' => 'color-picker',
80	+ 'title' => esc_html__('Preloader background color', 'loftloader'),
81	+ 'options' => array(
82	+ 'defaultValue' => '#222222'
83	+ ),
84	+ 'extra' => array(
85	+ 'id' => 'preloader-background-color',
86	+ )
87	+ ),
88	+ array(
89	+ 'name' => 'background[opacity]',
90	+ 'type' => 'slider',
91	+ 'title' => esc_html__('Preloader background opacity', 'loftloader'),
92	+ 'options' => array(
93	+ 'default' => 100,
94	+ 'min' => 0,
95	+ 'max' => 100,
96	+ 'step' => 5
97	+ ),
98	+ 'extra' => array(
99	+ 'class' => 'slider-opacity'
100	+ )
101	+ )
102	+ )
103	+ ),
104	+ array(
105	+ 'title' => esc_html__('Animation', 'loftloader'),
106	+ 'content' => array(
107	+ array(
108	+ 'name' => 'animation[type]',
109	+ 'type' => 'select',
110	+ 'title' => esc_html__('Select preloader loading animation', 'loftloader'),
111	+ 'options' => array(
112	+ 'pl-sun' => array('label' => esc_html__('1 - Spinning Sun', 'loftloader')),
113	+ 'pl-circles' => array('label' => esc_html__('2 - Luminous Circles', 'loftloader')),
114	+ 'pl-wave' => array('label' => esc_html__('3 - Wave', 'loftloader')),
115	+ 'pl-square' => array('label' => esc_html__('4 - Spinning Square', 'loftloader')),
116	+ 'pl-frame' => array('label' => esc_html__('5 - Drawing Frame', 'loftloader')),
117	+ 'pl-imgloading' => array('label' => esc_html__('6 - Loading Custom Image', 'loftloader'))
118	+ ),
119	+ 'extra' => array(
120	+ 'id' => 'preloader-animation',
121	+ 'class' => 'preloader-dependency-parent'
122	+ )
123	+ ),
124	+ array(
125	+ 'name' => 'animation[color]',
126	+ 'type' => 'color-picker',
127	+ 'title' => esc_html__('Preloader animation color', 'loftloader'),
128	+ 'options' => array(
129	+ 'defaultValue' => '#222222'
130	+ ),
131	+ 'extra' => array(
132	+ 'id' => 'preloader-animation-color',
133	+ 'wrapperClass' => 'preloader_animation preloader_animation-pl-sun preloader_animation-pl-circles preloader_animation-pl-wave preloader_animation-pl-square preloader_animation-pl-frame'
134	+ )
135	+ ),
136	+ array(
137	+ 'name' => 'animation[image]',
138	+ 'type' => 'media',
139	+ 'title' => esc_html__('Upload custom image/logo', 'loftloader'),
140	+ 'options' => array(
141	+ 'removeButton' => true
142	+ ),
143	+ 'extra' => array(
144	+ 'wrapperClass' => 'preloader_animation preloader_animation-pl-frame preloader_animation-pl-imgloading'
145	+ )
146	+ ),
147	+ array(
148	+ 'name' => 'animation[width]',
149	+ 'type' => 'number',
150	+ 'title' => esc_html__('Custom image width - optional (if provided, the value should be between 1 - 400)', 'loftloader'),
151	+ 'options' => array(),
152	+ 'extra' => array(
153	+ 'wrapperClass' => 'preloader_animation preloader_animation-pl-imgloading preloader-custom-image-width'
154	+ )
155	+ )
156	+ )
157	+ )
158	+ )
159	+ )
160	+ )
161	+ )
162	+ )
163	+ )
164	+ ));
165	+ }
166	+ add_filter('loftloader_settings_default_value', 'loftloader_settings_default_value');
167	+ /**
168	+ * @description hook callback function to set the default value of loftloader settings
169	+ * @param array $settings
170	+ * @return array merge values to the array passed by
171	+ */
172	+ function loftloader_settings_default_value($settings){
173	+ return array_merge((array)$settings, array(
174	+ 'enable' => 'on',
175	+ 'settings' => array(
176	+ 'background' => array(
177	+ 'effect' => 'fade',
178	+ 'color' => '#000000',
179	+ 'opacity' => '95%'
180	+ ),
181	+ 'animation' => array(
182	+ 'type' => 'pl-sun',
183	+ 'color' => '#248acc',
184	+ 'image' => array(
185	+ 'url' => LOFTLOADER_URI . 'img/loftloader-logo.png',
186	+ 'id' => ''
187	+ ),
188	+ 'width' => '76'
189	+ )
190	+ )
191	+ ));
192	+ }
193	+ }
194	+
195	+ if(!class_exists('LoftLoader_Setting_Manager')){
196	+ /**
197	+ * LoftLoader settings manager class
198	+ *
199	+ * @since LoftLoader version 1.0
200	+ */
201	+ require_once LOFTLOADER_ROOT . 'settings/form/class-loftloader-form-base.php';
202	+ require_once LOFTLOADER_ROOT . 'settings/form/class-loftloader-checkbox.php';
203	+ require_once LOFTLOADER_ROOT . 'settings/form/class-loftloader-preview.php';
204	+ class LoftLoader_Setting_Manager {
205	+ public $section_id; // Section unique id
206	+ protected $section_title; // Section title
207	+ protected $extra_info; // Other arguments needed when registered the sections
208	+ public function __construct(){
209	+ $this->section_id = 'loftloader-custom-settings';
210	+ $this->section_title = esc_html__('LoftLoader Settings', 'loftloader');
211	+ }
212	+ /**
213	+ * @description render setting section content
214	+ */
215	+ public function render_settings_section(){
216	+ // Register the section
217	+ echo '<h1 class="loftloader-option-section-title">' . $this->section_title . '</h1>';
218	+ $fields = apply_filters('loftloader_settings_fields', array()); // Get all fields of current section
219	+ if($fields && is_array($fields)){
220	+ foreach($fields as $field){
221	+ echo (isset($field['args']['nowrap']) && $field['args']['nowrap']) ? '' : '<div class="setting-group">';
222	+ echo empty ($field['title']) ? '' : '<h3>' . $field['title'] . '</h3>';
223	+ $this->render_settings_field(array('admin' => $field['args'], 'form' => $field['content']));
224	+ echo (isset($field['args']['nowrap']) && $field['args']['nowrap']) ? '' : '</div>';
225	+ }
226	+ }
227	+ $this->settings_fields(); // Show the hidden fields
228	+ }
229	+ /**
230	+ * @description output the form elements of each fields registered
231	+ */
232	+ private function render_settings_field($args){
233	+ $default = apply_filters('loftloader_settings_default_value', array());
234	+ $default = isset($default) ? $default : array();
235	+ $values = get_option($this->section_id, $default);
236	+ $inList = !empty($args['admin']['nolist']) ? false : true; // Wrap the output html in ul list or not
237	+
238	+ echo $inList ? '<ul class="form-list">' : '';
239	+ foreach($args['form'] as $element){ // Output each form elements
240	+ if(!empty($element)){
241	+ $class = 'LoftLoader_' . $element['type']; // Get class name of element type
242	+ // Get the value and name of each element
243	+ if(strpos($element['name'], '[') !== false){
244	+ $subs = strtr($element['name'], array(']' => '', '[' => ']['));
245	+ $name = $this->section_id . '[' . $subs . ']'; // Name of each form element
246	+ $value = $values;
247	+ foreach(explode('][', $subs) as $sub){
248	+ $value = !empty($value[$sub]) ? $value[$sub] : '';
249	+ }
250	+ }
251	+ else{
252	+ $name = $this->section_id . '[' . $element['name'] . ']'; // Name of each form element
253	+ $value = !empty($values[$element['name']]) ? $values[$element['name']] : ''; // Value of each element
254	+ }
255	+ $extra = isset($element['extra']) ? $element['extra'] : array(); // Any extra arguments
256	+ $options = isset($element['options']) ? $element['options'] : array(); // Options for some form elements, like checkbox/radio/select
257	+ $newField = new $class($name, $element['title'], $element['description'], $options, $value, $extra); // Instantiate the element
258	+ echo $inList ? '<li>' : '';
259	+ $newField->render(); // Output the element
260	+ echo $inList ? '</li>' : '';
261	+ }
262	+ }
263	+ echo $inList ? '</ul>' : '';
264	+ }
265	+ /*
266	+ * @description show the hidden input
267	+ */
268	+ private function settings_fields(){
269	+ $page = $this->section_id;
270	+ echo "<input type='hidden' name='option_page' value='" . $page . "' />";
271	+ echo '<input type="hidden" name="action" value="update" />';
272	+ wp_nonce_field("$page-options");
273	+ }
274	+ /**
275	+ * @description register setting for saving custom settings
276	+ */
277	+ public function register_setting(){
278	+ global $new_whitelist_options;
279	+ $option_group = $option_name = $this->section_id;
280	+ $new_whitelist_options[$option_group][] = $option_name;
281	+ add_filter("sanitize_option_{$option_name}", array($this, 'save_custom_styles'));
282	+ }
283	+ /**
284	+ * @description save the custom styles from the custom plugin settings
285	+ */
286	+ public function save_custom_styles($args){
287	+ $css = '';
288	+ if(isset($args['enable']) && ($args['enable'] === 'on')){
289	+ $color = $args['settings']['animation']['color'];
290	+ $bgColor = $args['settings']['background']['color'];
291	+ $bgOpacity = intval($args['settings']['background']['opacity']) / 100;
292	+ $css .= '#loftloader-wrapper .loader-section {' . PHP_EOL . "\t" . 'background: ' . $bgColor . ';' . PHP_EOL . "\t" . 'opacity: ' . $bgOpacity . ';' . PHP_EOL . '}' . PHP_EOL;
293	+ switch($args['settings']['animation']['type']){
294	+ case 'pl-sun':
295	+ $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;
296	+ break;
297	+ case 'pl-circles':
298	+ $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;
299	+ break;
300	+ case 'pl-wave':
301	+ $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;
302	+ break;
303	+ case 'pl-square':
304	+ $css .= '#loftloader-wrapper.pl-square #loader span {' . PHP_EOL . "\t" . 'border: 4px solid ' . $color . ';' . PHP_EOL . '}' . PHP_EOL;
305	+ break;
306	+ case 'pl-frame':
307	+ $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;
308	+ break;
309	+ case 'pl-imgloading':
310	+ $css .= empty($args['settings']['animation']['width']) ? '' : '#loftloader-wrapper.pl-imgloading #loader {' . PHP_EOL . "\t" . 'width: ' . $args['settings']['animation']['width'] . 'px;' . PHP_EOL . '}' . PHP_EOL;
311	+ $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;
312	+ break;
313	+ }
314	+ }
315	+ update_option('loftloader-custom-styles', $css);
316	+ return $args;
317	+ }
318	+ /**
319	+ * @description reset loader setting and custom styles
320	+ */
321	+ public function reset_settings(){
322	+ delete_option('loftloader-custom-styles');
323	+ delete_option('loftloader-custom-settings');
324	+ }
325	+ }
326	+ }

css/images/ui-bg_flat_55_999999_40x100.png ADDED Viewed

Binary file

css/images/ui-bg_flat_75_aaaaaa_40x100.png ADDED Viewed

Binary file

css/images/ui-bg_glass_100_f6f6f6_1x400.png ADDED Viewed

Binary file

css/images/ui-bg_glass_100_fdf5ce_1x400.png ADDED Viewed

Binary file

css/images/ui-bg_glass_45_0078ae_1x400.png ADDED Viewed

Binary file

css/images/ui-bg_glass_55_f8da4e_1x400.png ADDED Viewed

Binary file

css/images/ui-bg_glass_75_79c9ec_1x400.png ADDED Viewed

Binary file

css/images/ui-bg_gloss-wave_45_e14f1c_500x100.png ADDED Viewed

Binary file

css/images/ui-bg_gloss-wave_50_6eac2c_500x100.png ADDED Viewed

Binary file

css/images/ui-bg_gloss-wave_75_2191c0_500x100.png ADDED Viewed

Binary file

css/images/ui-bg_highlight-soft_75_ffe45c_1x100.png ADDED Viewed

Binary file

css/images/ui-bg_inset-hard_100_fcfdfd_1x100.png ADDED Viewed

Binary file

css/images/ui-icons_0078ae_256x240.png ADDED Viewed

Binary file

css/images/ui-icons_056b93_256x240.png ADDED Viewed

Binary file

css/images/ui-icons_acacac_256x240.png ADDED Viewed

Binary file

css/images/ui-icons_e0fdff_256x240.png ADDED Viewed

Binary file

css/images/ui-icons_ef8c08_256x240 1.png ADDED Viewed

Binary file

css/images/ui-icons_ef8c08_256x240.png ADDED Viewed

Binary file

css/images/ui-icons_f5e175_256x240.png ADDED Viewed

Binary file

css/images/ui-icons_f7a50d_256x240.png ADDED Viewed

Binary file

css/images/ui-icons_fcd113_256x240.png ADDED Viewed

Binary file

css/jquery-ui.css ADDED Viewed

	@@ -0,0 +1,1225 @@


1	+ /*! jQuery UI - v1.11.1 - 2014-08-13
2	+ * http://jqueryui.com
3	+ * Includes: core.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, draggable.css, menu.css, progressbar.css, resizable.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
4	+ * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
5	+ * Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
6	+
7	+ /* Layout helpers
8	+ ----------------------------------*/
9	+ .ui-helper-hidden {
10	+ display: none;
11	+ }
12	+ .ui-helper-hidden-accessible {
13	+ border: 0;
14	+ clip: rect(0 0 0 0);
15	+ height: 1px;
16	+ margin: -1px;
17	+ overflow: hidden;
18	+ padding: 0;
19	+ position: absolute;
20	+ width: 1px;
21	+ }
22	+ .ui-helper-reset {
23	+ margin: 0;
24	+ padding: 0;
25	+ border: 0;
26	+ outline: 0;
27	+ line-height: 1.3;
28	+ text-decoration: none;
29	+ font-size: 100%;
30	+ list-style: none;
31	+ }
32	+ .ui-helper-clearfix:before,
33	+ .ui-helper-clearfix:after {
34	+ content: "";
35	+ display: table;
36	+ border-collapse: collapse;
37	+ }
38	+ .ui-helper-clearfix:after {
39	+ clear: both;
40	+ }
41	+ .ui-helper-clearfix {
42	+ min-height: 0; /* support: IE7 */
43	+ }
44	+ .ui-helper-zfix {
45	+ width: 100%;
46	+ height: 100%;
47	+ top: 0;
48	+ left: 0;
49	+ position: absolute;
50	+ opacity: 0;
51	+ filter:Alpha(Opacity=0); /* support: IE8 */
52	+ }
53	+
54	+ .ui-front {
55	+ z-index: 100;
56	+ }
57	+
58	+
59	+ /* Interaction Cues
60	+ ----------------------------------*/
61	+ .ui-state-disabled {
62	+ cursor: default !important;
63	+ }
64	+
65	+
66	+ /* Icons
67	+ ----------------------------------*/
68	+
69	+ /* states and images */
70	+ .ui-icon {
71	+ display: block;
72	+ text-indent: -99999px;
73	+ overflow: hidden;
74	+ background-repeat: no-repeat;
75	+ }
76	+
77	+
78	+ /* Misc visuals
79	+ ----------------------------------*/
80	+
81	+ /* Overlays */
82	+ .ui-widget-overlay {
83	+ position: fixed;
84	+ top: 0;
85	+ left: 0;
86	+ width: 100%;
87	+ height: 100%;
88	+ }
89	+ .ui-accordion .ui-accordion-header {
90	+ display: block;
91	+ cursor: pointer;
92	+ position: relative;
93	+ margin: 2px 0 0 0;
94	+ padding: .5em .5em .5em .7em;
95	+ min-height: 0; /* support: IE7 */
96	+ font-size: 100%;
97	+ }
98	+ .ui-accordion .ui-accordion-icons {
99	+ padding-left: 2.2em;
100	+ }
101	+ .ui-accordion .ui-accordion-icons .ui-accordion-icons {
102	+ padding-left: 2.2em;
103	+ }
104	+ .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
105	+ position: absolute;
106	+ left: .5em;
107	+ top: 50%;
108	+ margin-top: -8px;
109	+ }
110	+ .ui-accordion .ui-accordion-content {
111	+ padding: 1em 2.2em;
112	+ border-top: 0;
113	+ overflow: auto;
114	+ }
115	+ .ui-autocomplete {
116	+ position: absolute;
117	+ top: 0;
118	+ left: 0;
119	+ cursor: default;
120	+ }
121	+ .ui-button {
122	+ display: inline-block;
123	+ position: relative;
124	+ padding: 0;
125	+ line-height: normal;
126	+ margin-right: .1em;
127	+ cursor: pointer;
128	+ vertical-align: middle;
129	+ text-align: center;
130	+ overflow: visible; /* removes extra width in IE */
131	+ }
132	+ .ui-button,
133	+ .ui-button:link,
134	+ .ui-button:visited,
135	+ .ui-button:hover,
136	+ .ui-button:active {
137	+ text-decoration: none;
138	+ }
139	+ /* to make room for the icon, a width needs to be set here */
140	+ .ui-button-icon-only {
141	+ width: 2.2em;
142	+ }
143	+ /* button elements seem to need a little more width */
144	+ button.ui-button-icon-only {
145	+ width: 2.4em;
146	+ }
147	+ .ui-button-icons-only {
148	+ width: 3.4em;
149	+ }
150	+ button.ui-button-icons-only {
151	+ width: 3.7em;
152	+ }
153	+
154	+ /* button text element */
155	+ .ui-button .ui-button-text {
156	+ display: block;
157	+ line-height: normal;
158	+ }
159	+ .ui-button-text-only .ui-button-text {
160	+ padding: .4em 1em;
161	+ }
162	+ .ui-button-icon-only .ui-button-text,
163	+ .ui-button-icons-only .ui-button-text {
164	+ padding: .4em;
165	+ text-indent: -9999999px;
166	+ }
167	+ .ui-button-text-icon-primary .ui-button-text,
168	+ .ui-button-text-icons .ui-button-text {
169	+ padding: .4em 1em .4em 2.1em;
170	+ }
171	+ .ui-button-text-icon-secondary .ui-button-text,
172	+ .ui-button-text-icons .ui-button-text {
173	+ padding: .4em 2.1em .4em 1em;
174	+ }
175	+ .ui-button-text-icons .ui-button-text {
176	+ padding-left: 2.1em;
177	+ padding-right: 2.1em;
178	+ }
179	+ /* no icon support for input elements, provide padding by default */
180	+ input.ui-button {
181	+ padding: .4em 1em;
182	+ }
183	+
184	+ /* button icon element(s) */
185	+ .ui-button-icon-only .ui-icon,
186	+ .ui-button-text-icon-primary .ui-icon,
187	+ .ui-button-text-icon-secondary .ui-icon,
188	+ .ui-button-text-icons .ui-icon,
189	+ .ui-button-icons-only .ui-icon {
190	+ position: absolute;
191	+ top: 50%;
192	+ margin-top: -8px;
193	+ }
194	+ .ui-button-icon-only .ui-icon {
195	+ left: 50%;
196	+ margin-left: -8px;
197	+ }
198	+ .ui-button-text-icon-primary .ui-button-icon-primary,
199	+ .ui-button-text-icons .ui-button-icon-primary,
200	+ .ui-button-icons-only .ui-button-icon-primary {
201	+ left: .5em;
202	+ }
203	+ .ui-button-text-icon-secondary .ui-button-icon-secondary,
204	+ .ui-button-text-icons .ui-button-icon-secondary,
205	+ .ui-button-icons-only .ui-button-icon-secondary {
206	+ right: .5em;
207	+ }
208	+
209	+ /* button sets */
210	+ .ui-buttonset {
211	+ margin-right: 7px;
212	+ }
213	+ .ui-buttonset .ui-button {
214	+ margin-left: 0;
215	+ margin-right: -.3em;
216	+ }
217	+
218	+ /* workarounds */
219	+ /* reset extra padding in Firefox, see h5bp.com/l */
220	+ input.ui-button::-moz-focus-inner,
221	+ button.ui-button::-moz-focus-inner {
222	+ border: 0;
223	+ padding: 0;
224	+ }
225	+ .ui-datepicker {
226	+ width: 17em;
227	+ padding: .2em .2em 0;
228	+ display: none;
229	+ }
230	+ .ui-datepicker .ui-datepicker-header {
231	+ position: relative;
232	+ padding: .2em 0;
233	+ }
234	+ .ui-datepicker .ui-datepicker-prev,
235	+ .ui-datepicker .ui-datepicker-next {
236	+ position: absolute;
237	+ top: 2px;
238	+ width: 1.8em;
239	+ height: 1.8em;
240	+ }
241	+ .ui-datepicker .ui-datepicker-prev-hover,
242	+ .ui-datepicker .ui-datepicker-next-hover {
243	+ top: 1px;
244	+ }
245	+ .ui-datepicker .ui-datepicker-prev {
246	+ left: 2px;
247	+ }
248	+ .ui-datepicker .ui-datepicker-next {
249	+ right: 2px;
250	+ }
251	+ .ui-datepicker .ui-datepicker-prev-hover {
252	+ left: 1px;
253	+ }
254	+ .ui-datepicker .ui-datepicker-next-hover {
255	+ right: 1px;
256	+ }
257	+ .ui-datepicker .ui-datepicker-prev span,
258	+ .ui-datepicker .ui-datepicker-next span {
259	+ display: block;
260	+ position: absolute;
261	+ left: 50%;
262	+ margin-left: -8px;
263	+ top: 50%;
264	+ margin-top: -8px;
265	+ }
266	+ .ui-datepicker .ui-datepicker-title {
267	+ margin: 0 2.3em;
268	+ line-height: 1.8em;
269	+ text-align: center;
270	+ }
271	+ .ui-datepicker .ui-datepicker-title select {
272	+ font-size: 1em;
273	+ margin: 1px 0;
274	+ }
275	+ .ui-datepicker select.ui-datepicker-month,
276	+ .ui-datepicker select.ui-datepicker-year {
277	+ width: 45%;
278	+ }
279	+ .ui-datepicker table {
280	+ width: 100%;
281	+ font-size: .9em;
282	+ border-collapse: collapse;
283	+ margin: 0 0 .4em;
284	+ }
285	+ .ui-datepicker th {
286	+ padding: .7em .3em;
287	+ text-align: center;
288	+ font-weight: bold;
289	+ border: 0;
290	+ }
291	+ .ui-datepicker td {
292	+ border: 0;
293	+ padding: 1px;
294	+ }
295	+ .ui-datepicker td span,
296	+ .ui-datepicker td a {
297	+ display: block;
298	+ padding: .2em;
299	+ text-align: right;
300	+ text-decoration: none;
301	+ }
302	+ .ui-datepicker .ui-datepicker-buttonpane {
303	+ background-image: none;
304	+ margin: .7em 0 0 0;
305	+ padding: 0 .2em;
306	+ border-left: 0;
307	+ border-right: 0;
308	+ border-bottom: 0;
309	+ }
310	+ .ui-datepicker .ui-datepicker-buttonpane button {
311	+ float: right;
312	+ margin: .5em .2em .4em;
313	+ cursor: pointer;
314	+ padding: .2em .6em .3em .6em;
315	+ width: auto;
316	+ overflow: visible;
317	+ }
318	+ .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
319	+ float: left;
320	+ }
321	+
322	+ /* with multiple calendars */
323	+ .ui-datepicker.ui-datepicker-multi {
324	+ width: auto;
325	+ }
326	+ .ui-datepicker-multi .ui-datepicker-group {
327	+ float: left;
328	+ }
329	+ .ui-datepicker-multi .ui-datepicker-group table {
330	+ width: 95%;
331	+ margin: 0 auto .4em;
332	+ }
333	+ .ui-datepicker-multi-2 .ui-datepicker-group {
334	+ width: 50%;
335	+ }
336	+ .ui-datepicker-multi-3 .ui-datepicker-group {
337	+ width: 33.3%;
338	+ }
339	+ .ui-datepicker-multi-4 .ui-datepicker-group {
340	+ width: 25%;
341	+ }
342	+ .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
343	+ .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
344	+ border-left-width: 0;
345	+ }
346	+ .ui-datepicker-multi .ui-datepicker-buttonpane {
347	+ clear: left;
348	+ }
349	+ .ui-datepicker-row-break {
350	+ clear: both;
351	+ width: 100%;
352	+ font-size: 0;
353	+ }
354	+
355	+ /* RTL support */
356	+ .ui-datepicker-rtl {
357	+ direction: rtl;
358	+ }
359	+ .ui-datepicker-rtl .ui-datepicker-prev {
360	+ right: 2px;
361	+ left: auto;
362	+ }
363	+ .ui-datepicker-rtl .ui-datepicker-next {
364	+ left: 2px;
365	+ right: auto;
366	+ }
367	+ .ui-datepicker-rtl .ui-datepicker-prev:hover {
368	+ right: 1px;
369	+ left: auto;
370	+ }
371	+ .ui-datepicker-rtl .ui-datepicker-next:hover {
372	+ left: 1px;
373	+ right: auto;
374	+ }
375	+ .ui-datepicker-rtl .ui-datepicker-buttonpane {
376	+ clear: right;
377	+ }
378	+ .ui-datepicker-rtl .ui-datepicker-buttonpane button {
379	+ float: left;
380	+ }
381	+ .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
382	+ .ui-datepicker-rtl .ui-datepicker-group {
383	+ float: right;
384	+ }
385	+ .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
386	+ .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
387	+ border-right-width: 0;
388	+ border-left-width: 1px;
389	+ }
390	+ .ui-dialog {
391	+ overflow: hidden;
392	+ position: absolute;
393	+ top: 0;
394	+ left: 0;
395	+ padding: .2em;
396	+ outline: 0;
397	+ }
398	+ .ui-dialog .ui-dialog-titlebar {
399	+ padding: .4em 1em;
400	+ position: relative;
401	+ }
402	+ .ui-dialog .ui-dialog-title {
403	+ float: left;
404	+ margin: .1em 0;
405	+ white-space: nowrap;
406	+ width: 90%;
407	+ overflow: hidden;
408	+ text-overflow: ellipsis;
409	+ }
410	+ .ui-dialog .ui-dialog-titlebar-close {
411	+ position: absolute;
412	+ right: .3em;
413	+ top: 50%;
414	+ width: 20px;
415	+ margin: -10px 0 0 0;
416	+ padding: 1px;
417	+ height: 20px;
418	+ }
419	+ .ui-dialog .ui-dialog-content {
420	+ position: relative;
421	+ border: 0;
422	+ padding: .5em 1em;
423	+ background: none;
424	+ overflow: auto;
425	+ }
426	+ .ui-dialog .ui-dialog-buttonpane {
427	+ text-align: left;
428	+ border-width: 1px 0 0 0;
429	+ background-image: none;
430	+ margin-top: .5em;
431	+ padding: .3em 1em .5em .4em;
432	+ }
433	+ .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
434	+ float: right;
435	+ }
436	+ .ui-dialog .ui-dialog-buttonpane button {
437	+ margin: .5em .4em .5em 0;
438	+ cursor: pointer;
439	+ }
440	+ .ui-dialog .ui-resizable-se {
441	+ width: 12px;
442	+ height: 12px;
443	+ right: -5px;
444	+ bottom: -5px;
445	+ background-position: 16px 16px;
446	+ }
447	+ .ui-draggable .ui-dialog-titlebar {
448	+ cursor: move;
449	+ }
450	+ .ui-draggable-handle {
451	+ -ms-touch-action: none;
452	+ touch-action: none;
453	+ }
454	+ .ui-menu {
455	+ list-style: none;
456	+ padding: 0;
457	+ margin: 0;
458	+ display: block;
459	+ outline: none;
460	+ }
461	+ .ui-menu .ui-menu {
462	+ position: absolute;
463	+ }
464	+ .ui-menu .ui-menu-item {
465	+ position: relative;
466	+ margin: 0;
467	+ padding: 3px 1em 3px .4em;
468	+ cursor: pointer;
469	+ min-height: 0; /* support: IE7 */
470	+ /* support: IE10, see #8844 */
471	+ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
472	+ }
473	+ .ui-menu .ui-menu-divider {
474	+ margin: 5px 0;
475	+ height: 0;
476	+ font-size: 0;
477	+ line-height: 0;
478	+ border-width: 1px 0 0 0;
479	+ }
480	+ .ui-menu .ui-state-focus,
481	+ .ui-menu .ui-state-active {
482	+ margin: -1px;
483	+ }
484	+
485	+ /* icon support */
486	+ .ui-menu-icons {
487	+ position: relative;
488	+ }
489	+ .ui-menu-icons .ui-menu-item {
490	+ padding-left: 2em;
491	+ }
492	+
493	+ /* left-aligned */
494	+ .ui-menu .ui-icon {
495	+ position: absolute;
496	+ top: 0;
497	+ bottom: 0;
498	+ left: .2em;
499	+ margin: auto 0;
500	+ }
501	+
502	+ /* right-aligned */
503	+ .ui-menu .ui-menu-icon {
504	+ left: auto;
505	+ right: 0;
506	+ }
507	+ .ui-progressbar {
508	+ height: 2em;
509	+ text-align: left;
510	+ overflow: hidden;
511	+ }
512	+ .ui-progressbar .ui-progressbar-value {
513	+ margin: -1px;
514	+ height: 100%;
515	+ }
516	+ .ui-progressbar .ui-progressbar-overlay {
517	+ background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
518	+ height: 100%;
519	+ filter: alpha(opacity=25); /* support: IE8 */
520	+ opacity: 0.25;
521	+ }
522	+ .ui-progressbar-indeterminate .ui-progressbar-value {
523	+ background-image: none;
524	+ }
525	+ .ui-resizable {
526	+ position: relative;
527	+ }
528	+ .ui-resizable-handle {
529	+ position: absolute;
530	+ font-size: 0.1px;
531	+ display: block;
532	+ -ms-touch-action: none;
533	+ touch-action: none;
534	+ }
535	+ .ui-resizable-disabled .ui-resizable-handle,
536	+ .ui-resizable-autohide .ui-resizable-handle {
537	+ display: none;
538	+ }
539	+ .ui-resizable-n {
540	+ cursor: n-resize;
541	+ height: 7px;
542	+ width: 100%;
543	+ top: -5px;
544	+ left: 0;
545	+ }
546	+ .ui-resizable-s {
547	+ cursor: s-resize;
548	+ height: 7px;
549	+ width: 100%;
550	+ bottom: -5px;
551	+ left: 0;
552	+ }
553	+ .ui-resizable-e {
554	+ cursor: e-resize;
555	+ width: 7px;
556	+ right: -5px;
557	+ top: 0;
558	+ height: 100%;
559	+ }
560	+ .ui-resizable-w {
561	+ cursor: w-resize;
562	+ width: 7px;
563	+ left: -5px;
564	+ top: 0;
565	+ height: 100%;
566	+ }
567	+ .ui-resizable-se {
568	+ cursor: se-resize;
569	+ width: 12px;
570	+ height: 12px;
571	+ right: 1px;
572	+ bottom: 1px;
573	+ }
574	+ .ui-resizable-sw {
575	+ cursor: sw-resize;
576	+ width: 9px;
577	+ height: 9px;
578	+ left: -5px;
579	+ bottom: -5px;
580	+ }
581	+ .ui-resizable-nw {
582	+ cursor: nw-resize;
583	+ width: 9px;
584	+ height: 9px;
585	+ left: -5px;
586	+ top: -5px;
587	+ }
588	+ .ui-resizable-ne {
589	+ cursor: ne-resize;
590	+ width: 9px;
591	+ height: 9px;
592	+ right: -5px;
593	+ top: -5px;
594	+ }
595	+ .ui-selectable {
596	+ -ms-touch-action: none;
597	+ touch-action: none;
598	+ }
599	+ .ui-selectable-helper {
600	+ position: absolute;
601	+ z-index: 100;
602	+ border: 1px dotted black;
603	+ }
604	+ .ui-selectmenu-menu {
605	+ padding: 0;
606	+ margin: 0;
607	+ position: absolute;
608	+ top: 0;
609	+ left: 0;
610	+ display: none;
611	+ }
612	+ .ui-selectmenu-menu .ui-menu {
613	+ overflow: auto;
614	+ /* Support: IE7 */
615	+ overflow-x: hidden;
616	+ padding-bottom: 1px;
617	+ }
618	+ .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
619	+ font-size: 1em;
620	+ font-weight: bold;
621	+ line-height: 1.5;
622	+ padding: 2px 0.4em;
623	+ margin: 0.5em 0 0 0;
624	+ height: auto;
625	+ border: 0;
626	+ }
627	+ .ui-selectmenu-open {
628	+ display: block;
629	+ }
630	+ .ui-selectmenu-button {
631	+ display: inline-block;
632	+ overflow: hidden;
633	+ position: relative;
634	+ text-decoration: none;
635	+ cursor: pointer;
636	+ }
637	+ .ui-selectmenu-button span.ui-icon {
638	+ right: 0.5em;
639	+ left: auto;
640	+ margin-top: -8px;
641	+ position: absolute;
642	+ top: 50%;
643	+ }
644	+ .ui-selectmenu-button span.ui-selectmenu-text {
645	+ text-align: left;
646	+ padding: 0.4em 2.1em 0.4em 1em;
647	+ display: block;
648	+ line-height: 1.4;
649	+ overflow: hidden;
650	+ text-overflow: ellipsis;
651	+ white-space: nowrap;
652	+ }
653	+ .ui-slider {
654	+ position: relative;
655	+ text-align: left;
656	+ }
657	+ .ui-slider .ui-slider-handle {
658	+ position: absolute;
659	+ z-index: 2;
660	+ width: 1.2em;
661	+ height: 1.2em;
662	+ cursor: default;
663	+ -ms-touch-action: none;
664	+ touch-action: none;
665	+ }
666	+ .ui-slider .ui-slider-range {
667	+ position: absolute;
668	+ z-index: 1;
669	+ font-size: .7em;
670	+ display: block;
671	+ border: 0;
672	+ background-position: 0 0;
673	+ }
674	+
675	+ /* support: IE8 - See #6727 */
676	+ .ui-slider.ui-state-disabled .ui-slider-handle,
677	+ .ui-slider.ui-state-disabled .ui-slider-range {
678	+ filter: inherit;
679	+ }
680	+
681	+ .ui-slider-horizontal {
682	+ height: .8em;
683	+ }
684	+ .ui-slider-horizontal .ui-slider-handle {
685	+ top: -.3em;
686	+ margin-left: -.6em;
687	+ }
688	+ .ui-slider-horizontal .ui-slider-range {
689	+ top: 0;
690	+ height: 100%;
691	+ }
692	+ .ui-slider-horizontal .ui-slider-range-min {
693	+ left: 0;
694	+ }
695	+ .ui-slider-horizontal .ui-slider-range-max {
696	+ right: 0;
697	+ }
698	+
699	+ .ui-slider-vertical {
700	+ width: .8em;
701	+ height: 100px;
702	+ }
703	+ .ui-slider-vertical .ui-slider-handle {
704	+ left: -.3em;
705	+ margin-left: 0;
706	+ margin-bottom: -.6em;
707	+ }
708	+ .ui-slider-vertical .ui-slider-range {
709	+ left: 0;
710	+ width: 100%;
711	+ }
712	+ .ui-slider-vertical .ui-slider-range-min {
713	+ bottom: 0;
714	+ }
715	+ .ui-slider-vertical .ui-slider-range-max {
716	+ top: 0;
717	+ }
718	+ .ui-sortable-handle {
719	+ -ms-touch-action: none;
720	+ touch-action: none;
721	+ }
722	+ .ui-spinner {
723	+ position: relative;
724	+ display: inline-block;
725	+ overflow: hidden;
726	+ padding: 0;
727	+ vertical-align: middle;
728	+ }
729	+ .ui-spinner-input {
730	+ border: none;
731	+ background: none;
732	+ color: inherit;
733	+ padding: 0;
734	+ margin: .2em 0;
735	+ vertical-align: middle;
736	+ margin-left: .4em;
737	+ margin-right: 22px;
738	+ }
739	+ .ui-spinner-button {
740	+ width: 16px;
741	+ height: 50%;
742	+ font-size: .5em;
743	+ padding: 0;
744	+ margin: 0;
745	+ text-align: center;
746	+ position: absolute;
747	+ cursor: default;
748	+ display: block;
749	+ overflow: hidden;
750	+ right: 0;
751	+ }
752	+ /* more specificity required here to override default borders */
753	+ .ui-spinner a.ui-spinner-button {
754	+ border-top: none;
755	+ border-bottom: none;
756	+ border-right: none;
757	+ }
758	+ /* vertically center icon */
759	+ .ui-spinner .ui-icon {
760	+ position: absolute;
761	+ margin-top: -8px;
762	+ top: 50%;
763	+ left: 0;
764	+ }
765	+ .ui-spinner-up {
766	+ top: 0;
767	+ }
768	+ .ui-spinner-down {
769	+ bottom: 0;
770	+ }
771	+
772	+ /* TR overrides */
773	+ .ui-spinner .ui-icon-triangle-1-s {
774	+ /* need to fix icons sprite */
775	+ background-position: -65px -16px;
776	+ }
777	+ .ui-tabs {
778	+ position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
779	+ padding: .2em;
780	+ }
781	+ .ui-tabs .ui-tabs-nav {
782	+ margin: 0;
783	+ padding: .2em .2em 0;
784	+ }
785	+ .ui-tabs .ui-tabs-nav li {
786	+ list-style: none;
787	+ float: left;
788	+ position: relative;
789	+ top: 0;
790	+ margin: 1px .2em 0 0;
791	+ border-bottom-width: 0;
792	+ padding: 0;
793	+ white-space: nowrap;
794	+ }
795	+ .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
796	+ float: left;
797	+ padding: .5em 1em;
798	+ text-decoration: none;
799	+ }
800	+ .ui-tabs .ui-tabs-nav li.ui-tabs-active {
801	+ margin-bottom: -1px;
802	+ padding-bottom: 1px;
803	+ }
804	+ .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
805	+ .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
806	+ .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
807	+ cursor: text;
808	+ }
809	+ .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
810	+ cursor: pointer;
811	+ }
812	+ .ui-tabs .ui-tabs-panel {
813	+ display: block;
814	+ border-width: 0;
815	+ padding: 1em 1.4em;
816	+ background: none;
817	+ }
818	+ .ui-tooltip {
819	+ padding: 8px;
820	+ position: absolute;
821	+ z-index: 9999;
822	+ max-width: 300px;
823	+ -webkit-box-shadow: 0 0 5px #aaa;
824	+ box-shadow: 0 0 5px #aaa;
825	+ }
826	+ body .ui-tooltip {
827	+ border-width: 2px;
828	+ }
829	+
830	+ /* Component containers
831	+ ----------------------------------*/
832	+ .ui-widget {
833	+ font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
834	+ font-size: 1.1em;
835	+ }
836	+ .ui-widget .ui-widget {
837	+ font-size: 1em;
838	+ }
839	+ .ui-widget input,
840	+ .ui-widget select,
841	+ .ui-widget textarea,
842	+ .ui-widget button {
843	+ font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
844	+ font-size: 1em;
845	+ }
846	+ .ui-widget-content {
847	+ border: 1px solid #dddddd;
848	+ background: #eeeeee url("images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x;
849	+ color: #333333;
850	+ }
851	+ .ui-widget-content a {
852	+ color: #333333;
853	+ }
854	+ .ui-widget-header {
855	+ border: 1px solid #e78f08;
856	+ background: #f6a828 url("images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;
857	+ color: #ffffff;
858	+ font-weight: bold;
859	+ }
860	+ .ui-widget-header a {
861	+ color: #ffffff;
862	+ }
863	+
864	+ /* Interaction states
865	+ ----------------------------------*/
866	+ .ui-state-default,
867	+ .ui-widget-content .ui-state-default,
868	+ .ui-widget-header .ui-state-default {
869	+ border: 1px solid #cccccc;
870	+ background: #f6f6f6 url("images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;
871	+ font-weight: bold;
872	+ color: #1c94c4;
873	+ }
874	+ .ui-state-default a,
875	+ .ui-state-default a:link,
876	+ .ui-state-default a:visited {
877	+ color: #1c94c4;
878	+ text-decoration: none;
879	+ }
880	+ .ui-state-hover,
881	+ .ui-widget-content .ui-state-hover,
882	+ .ui-widget-header .ui-state-hover,
883	+ .ui-state-focus,
884	+ .ui-widget-content .ui-state-focus,
885	+ .ui-widget-header .ui-state-focus {
886	+ border: 1px solid #fbcb09;
887	+ background: #fdf5ce url("images/ui-bg_glass_100_fdf5ce_1x400.png") 50% 50% repeat-x;
888	+ font-weight: bold;
889	+ color: #c77405;
890	+ }
891	+ .ui-state-hover a,
892	+ .ui-state-hover a:hover,
893	+ .ui-state-hover a:link,
894	+ .ui-state-hover a:visited,
895	+ .ui-state-focus a,
896	+ .ui-state-focus a:hover,
897	+ .ui-state-focus a:link,
898	+ .ui-state-focus a:visited {
899	+ color: #c77405;
900	+ text-decoration: none;
901	+ }
902	+ .ui-state-active,
903	+ .ui-widget-content .ui-state-active,
904	+ .ui-widget-header .ui-state-active {
905	+ border: 1px solid #fbd850;
906	+ background: #ffffff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;
907	+ font-weight: bold;
908	+ color: #eb8f00;
909	+ }
910	+ .ui-state-active a,
911	+ .ui-state-active a:link,
912	+ .ui-state-active a:visited {
913	+ color: #eb8f00;
914	+ text-decoration: none;
915	+ }
916	+
917	+ /* Interaction Cues
918	+ ----------------------------------*/
919	+ .ui-state-highlight,
920	+ .ui-widget-content .ui-state-highlight,
921	+ .ui-widget-header .ui-state-highlight {
922	+ border: 1px solid #fed22f;
923	+ background: #ffe45c url("images/ui-bg_highlight-soft_75_ffe45c_1x100.png") 50% top repeat-x;
924	+ color: #363636;
925	+ }
926	+ .ui-state-highlight a,
927	+ .ui-widget-content .ui-state-highlight a,
928	+ .ui-widget-header .ui-state-highlight a {
929	+ color: #363636;
930	+ }
931	+ .ui-state-error,
932	+ .ui-widget-content .ui-state-error,
933	+ .ui-widget-header .ui-state-error {
934	+ border: 1px solid #cd0a0a;
935	+ background: #b81900 url("images/ui-bg_diagonals-thick_18_b81900_40x40.png") 50% 50% repeat;
936	+ color: #ffffff;
937	+ }
938	+ .ui-state-error a,
939	+ .ui-widget-content .ui-state-error a,
940	+ .ui-widget-header .ui-state-error a {
941	+ color: #ffffff;
942	+ }
943	+ .ui-state-error-text,
944	+ .ui-widget-content .ui-state-error-text,
945	+ .ui-widget-header .ui-state-error-text {
946	+ color: #ffffff;
947	+ }
948	+ .ui-priority-primary,
949	+ .ui-widget-content .ui-priority-primary,
950	+ .ui-widget-header .ui-priority-primary {
951	+ font-weight: bold;
952	+ }
953	+ .ui-priority-secondary,
954	+ .ui-widget-content .ui-priority-secondary,
955	+ .ui-widget-header .ui-priority-secondary {
956	+ opacity: .7;
957	+ filter:Alpha(Opacity=70); /* support: IE8 */
958	+ font-weight: normal;
959	+ }
960	+ .ui-state-disabled,
961	+ .ui-widget-content .ui-state-disabled,
962	+ .ui-widget-header .ui-state-disabled {
963	+ opacity: .35;
964	+ filter:Alpha(Opacity=35); /* support: IE8 */
965	+ background-image: none;
966	+ }
967	+ .ui-state-disabled .ui-icon {
968	+ filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
969	+ }
970	+
971	+ /* Icons
972	+ ----------------------------------*/
973	+
974	+ /* states and images */
975	+ .ui-icon {
976	+ width: 16px;
977	+ height: 16px;
978	+ }
979	+ .ui-icon,
980	+ .ui-widget-content .ui-icon {
981	+ background-image: url("images/ui-icons_222222_256x240.png");
982	+ }
983	+ .ui-widget-header .ui-icon {
984	+ background-image: url("images/ui-icons_ffffff_256x240.png");
985	+ }
986	+ .ui-state-default .ui-icon {
987	+ background-image: url("images/ui-icons_ef8c08_256x240.png");
988	+ }
989	+ .ui-state-hover .ui-icon,
990	+ .ui-state-focus .ui-icon {
991	+ background-image: url("images/ui-icons_ef8c08_256x240.png");
992	+ }
993	+ .ui-state-active .ui-icon {
994	+ background-image: url("images/ui-icons_ef8c08_256x240.png");
995	+ }
996	+ .ui-state-highlight .ui-icon {
997	+ background-image: url("images/ui-icons_228ef1_256x240.png");
998	+ }
999	+ .ui-state-error .ui-icon,
1000	+ .ui-state-error-text .ui-icon {
1001	+ background-image: url("images/ui-icons_ffd27a_256x240.png");
1002	+ }
1003	+
1004	+ /* positioning */
1005	+ .ui-icon-blank { background-position: 16px 16px; }
1006	+ .ui-icon-carat-1-n { background-position: 0 0; }
1007	+ .ui-icon-carat-1-ne { background-position: -16px 0; }
1008	+ .ui-icon-carat-1-e { background-position: -32px 0; }
1009	+ .ui-icon-carat-1-se { background-position: -48px 0; }
1010	+ .ui-icon-carat-1-s { background-position: -64px 0; }
1011	+ .ui-icon-carat-1-sw { background-position: -80px 0; }
1012	+ .ui-icon-carat-1-w { background-position: -96px 0; }
1013	+ .ui-icon-carat-1-nw { background-position: -112px 0; }
1014	+ .ui-icon-carat-2-n-s { background-position: -128px 0; }
1015	+ .ui-icon-carat-2-e-w { background-position: -144px 0; }
1016	+ .ui-icon-triangle-1-n { background-position: 0 -16px; }
1017	+ .ui-icon-triangle-1-ne { background-position: -16px -16px; }
1018	+ .ui-icon-triangle-1-e { background-position: -32px -16px; }
1019	+ .ui-icon-triangle-1-se { background-position: -48px -16px; }
1020	+ .ui-icon-triangle-1-s { background-position: -64px -16px; }
1021	+ .ui-icon-triangle-1-sw { background-position: -80px -16px; }
1022	+ .ui-icon-triangle-1-w { background-position: -96px -16px; }
1023	+ .ui-icon-triangle-1-nw { background-position: -112px -16px; }
1024	+ .ui-icon-triangle-2-n-s { background-position: -128px -16px; }
1025	+ .ui-icon-triangle-2-e-w { background-position: -144px -16px; }
1026	+ .ui-icon-arrow-1-n { background-position: 0 -32px; }
1027	+ .ui-icon-arrow-1-ne { background-position: -16px -32px; }
1028	+ .ui-icon-arrow-1-e { background-position: -32px -32px; }
1029	+ .ui-icon-arrow-1-se { background-position: -48px -32px; }
1030	+ .ui-icon-arrow-1-s { background-position: -64px -32px; }
1031	+ .ui-icon-arrow-1-sw { background-position: -80px -32px; }
1032	+ .ui-icon-arrow-1-w { background-position: -96px -32px; }
1033	+ .ui-icon-arrow-1-nw { background-position: -112px -32px; }
1034	+ .ui-icon-arrow-2-n-s { background-position: -128px -32px; }
1035	+ .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
1036	+ .ui-icon-arrow-2-e-w { background-position: -160px -32px; }
1037	+ .ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
1038	+ .ui-icon-arrowstop-1-n { background-position: -192px -32px; }
1039	+ .ui-icon-arrowstop-1-e { background-position: -208px -32px; }
1040	+ .ui-icon-arrowstop-1-s { background-position: -224px -32px; }
1041	+ .ui-icon-arrowstop-1-w { background-position: -240px -32px; }
1042	+ .ui-icon-arrowthick-1-n { background-position: 0 -48px; }
1043	+ .ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
1044	+ .ui-icon-arrowthick-1-e { background-position: -32px -48px; }
1045	+ .ui-icon-arrowthick-1-se { background-position: -48px -48px; }
1046	+ .ui-icon-arrowthick-1-s { background-position: -64px -48px; }
1047	+ .ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
1048	+ .ui-icon-arrowthick-1-w { background-position: -96px -48px; }
1049	+ .ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
1050	+ .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
1051	+ .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
1052	+ .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
1053	+ .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
1054	+ .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
1055	+ .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
1056	+ .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
1057	+ .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
1058	+ .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
1059	+ .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
1060	+ .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
1061	+ .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
1062	+ .ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
1063	+ .ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
1064	+ .ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
1065	+ .ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
1066	+ .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
1067	+ .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
1068	+ .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
1069	+ .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
1070	+ .ui-icon-arrow-4 { background-position: 0 -80px; }
1071	+ .ui-icon-arrow-4-diag { background-position: -16px -80px; }
1072	+ .ui-icon-extlink { background-position: -32px -80px; }
1073	+ .ui-icon-newwin { background-position: -48px -80px; }
1074	+ .ui-icon-refresh { background-position: -64px -80px; }
1075	+ .ui-icon-shuffle { background-position: -80px -80px; }
1076	+ .ui-icon-transfer-e-w { background-position: -96px -80px; }
1077	+ .ui-icon-transferthick-e-w { background-position: -112px -80px; }
1078	+ .ui-icon-folder-collapsed { background-position: 0 -96px; }
1079	+ .ui-icon-folder-open { background-position: -16px -96px; }
1080	+ .ui-icon-document { background-position: -32px -96px; }
1081	+ .ui-icon-document-b { background-position: -48px -96px; }
1082	+ .ui-icon-note { background-position: -64px -96px; }
1083	+ .ui-icon-mail-closed { background-position: -80px -96px; }
1084	+ .ui-icon-mail-open { background-position: -96px -96px; }
1085	+ .ui-icon-suitcase { background-position: -112px -96px; }
1086	+ .ui-icon-comment { background-position: -128px -96px; }
1087	+ .ui-icon-person { background-position: -144px -96px; }
1088	+ .ui-icon-print { background-position: -160px -96px; }
1089	+ .ui-icon-trash { background-position: -176px -96px; }
1090	+ .ui-icon-locked { background-position: -192px -96px; }
1091	+ .ui-icon-unlocked { background-position: -208px -96px; }
1092	+ .ui-icon-bookmark { background-position: -224px -96px; }
1093	+ .ui-icon-tag { background-position: -240px -96px; }
1094	+ .ui-icon-home { background-position: 0 -112px; }
1095	+ .ui-icon-flag { background-position: -16px -112px; }
1096	+ .ui-icon-calendar { background-position: -32px -112px; }
1097	+ .ui-icon-cart { background-position: -48px -112px; }
1098	+ .ui-icon-pencil { background-position: -64px -112px; }
1099	+ .ui-icon-clock { background-position: -80px -112px; }
1100	+ .ui-icon-disk { background-position: -96px -112px; }
1101	+ .ui-icon-calculator { background-position: -112px -112px; }
1102	+ .ui-icon-zoomin { background-position: -128px -112px; }
1103	+ .ui-icon-zoomout { background-position: -144px -112px; }
1104	+ .ui-icon-search { background-position: -160px -112px; }
1105	+ .ui-icon-wrench { background-position: -176px -112px; }
1106	+ .ui-icon-gear { background-position: -192px -112px; }
1107	+ .ui-icon-heart { background-position: -208px -112px; }
1108	+ .ui-icon-star { background-position: -224px -112px; }
1109	+ .ui-icon-link { background-position: -240px -112px; }
1110	+ .ui-icon-cancel { background-position: 0 -128px; }
1111	+ .ui-icon-plus { background-position: -16px -128px; }
1112	+ .ui-icon-plusthick { background-position: -32px -128px; }
1113	+ .ui-icon-minus { background-position: -48px -128px; }
1114	+ .ui-icon-minusthick { background-position: -64px -128px; }
1115	+ .ui-icon-close { background-position: -80px -128px; }
1116	+ .ui-icon-closethick { background-position: -96px -128px; }
1117	+ .ui-icon-key { background-position: -112px -128px; }
1118	+ .ui-icon-lightbulb { background-position: -128px -128px; }
1119	+ .ui-icon-scissors { background-position: -144px -128px; }
1120	+ .ui-icon-clipboard { background-position: -160px -128px; }
1121	+ .ui-icon-copy { background-position: -176px -128px; }
1122	+ .ui-icon-contact { background-position: -192px -128px; }
1123	+ .ui-icon-image { background-position: -208px -128px; }
1124	+ .ui-icon-video { background-position: -224px -128px; }
1125	+ .ui-icon-script { background-position: -240px -128px; }
1126	+ .ui-icon-alert { background-position: 0 -144px; }
1127	+ .ui-icon-info { background-position: -16px -144px; }
1128	+ .ui-icon-notice { background-position: -32px -144px; }
1129	+ .ui-icon-help { background-position: -48px -144px; }
1130	+ .ui-icon-check { background-position: -64px -144px; }
1131	+ .ui-icon-bullet { background-position: -80px -144px; }
1132	+ .ui-icon-radio-on { background-position: -96px -144px; }
1133	+ .ui-icon-radio-off { background-position: -112px -144px; }
1134	+ .ui-icon-pin-w { background-position: -128px -144px; }
1135	+ .ui-icon-pin-s { background-position: -144px -144px; }
1136	+ .ui-icon-play { background-position: 0 -160px; }
1137	+ .ui-icon-pause { background-position: -16px -160px; }
1138	+ .ui-icon-seek-next { background-position: -32px -160px; }
1139	+ .ui-icon-seek-prev { background-position: -48px -160px; }
1140	+ .ui-icon-seek-end { background-position: -64px -160px; }
1141	+ .ui-icon-seek-start { background-position: -80px -160px; }
1142	+ /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
1143	+ .ui-icon-seek-first { background-position: -80px -160px; }
1144	+ .ui-icon-stop { background-position: -96px -160px; }
1145	+ .ui-icon-eject { background-position: -112px -160px; }
1146	+ .ui-icon-volume-off { background-position: -128px -160px; }
1147	+ .ui-icon-volume-on { background-position: -144px -160px; }
1148	+ .ui-icon-power { background-position: 0 -176px; }
1149	+ .ui-icon-signal-diag { background-position: -16px -176px; }
1150	+ .ui-icon-signal { background-position: -32px -176px; }
1151	+ .ui-icon-battery-0 { background-position: -48px -176px; }
1152	+ .ui-icon-battery-1 { background-position: -64px -176px; }
1153	+ .ui-icon-battery-2 { background-position: -80px -176px; }
1154	+ .ui-icon-battery-3 { background-position: -96px -176px; }
1155	+ .ui-icon-circle-plus { background-position: 0 -192px; }
1156	+ .ui-icon-circle-minus { background-position: -16px -192px; }
1157	+ .ui-icon-circle-close { background-position: -32px -192px; }
1158	+ .ui-icon-circle-triangle-e { background-position: -48px -192px; }
1159	+ .ui-icon-circle-triangle-s { background-position: -64px -192px; }
1160	+ .ui-icon-circle-triangle-w { background-position: -80px -192px; }
1161	+ .ui-icon-circle-triangle-n { background-position: -96px -192px; }
1162	+ .ui-icon-circle-arrow-e { background-position: -112px -192px; }
1163	+ .ui-icon-circle-arrow-s { background-position: -128px -192px; }
1164	+ .ui-icon-circle-arrow-w { background-position: -144px -192px; }
1165	+ .ui-icon-circle-arrow-n { background-position: -160px -192px; }
1166	+ .ui-icon-circle-zoomin { background-position: -176px -192px; }
1167	+ .ui-icon-circle-zoomout { background-position: -192px -192px; }
1168	+ .ui-icon-circle-check { background-position: -208px -192px; }
1169	+ .ui-icon-circlesmall-plus { background-position: 0 -208px; }
1170	+ .ui-icon-circlesmall-minus { background-position: -16px -208px; }
1171	+ .ui-icon-circlesmall-close { background-position: -32px -208px; }
1172	+ .ui-icon-squaresmall-plus { background-position: -48px -208px; }
1173	+ .ui-icon-squaresmall-minus { background-position: -64px -208px; }
1174	+ .ui-icon-squaresmall-close { background-position: -80px -208px; }
1175	+ .ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
1176	+ .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
1177	+ .ui-icon-grip-solid-vertical { background-position: -32px -224px; }
1178	+ .ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
1179	+ .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
1180	+ .ui-icon-grip-diagonal-se { background-position: -80px -224px; }
1181	+
1182	+
1183	+ /* Misc visuals
1184	+ ----------------------------------*/
1185	+
1186	+ /* Corner radius */
1187	+ .ui-corner-all,
1188	+ .ui-corner-top,
1189	+ .ui-corner-left,
1190	+ .ui-corner-tl {
1191	+ border-top-left-radius: 4px;
1192	+ }
1193	+ .ui-corner-all,
1194	+ .ui-corner-top,
1195	+ .ui-corner-right,
1196	+ .ui-corner-tr {
1197	+ border-top-right-radius: 4px;
1198	+ }
1199	+ .ui-corner-all,
1200	+ .ui-corner-bottom,
1201	+ .ui-corner-left,
1202	+ .ui-corner-bl {
1203	+ border-bottom-left-radius: 4px;
1204	+ }
1205	+ .ui-corner-all,
1206	+ .ui-corner-bottom,
1207	+ .ui-corner-right,
1208	+ .ui-corner-br {
1209	+ border-bottom-right-radius: 4px;
1210	+ }
1211	+
1212	+ /* Overlays */
1213	+ .ui-widget-overlay {
1214	+ background: #666666 url("images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;
1215	+ opacity: .5;
1216	+ filter: Alpha(Opacity=50); /* support: IE8 */
1217	+ }
1218	+ .ui-widget-shadow {
1219	+ margin: -5px 0 0 -5px;
1220	+ padding: 5px;
1221	+ background: #000000 url("images/ui-bg_flat_10_000000_40x100.png") 50% 50% repeat-x;
1222	+ opacity: .2;
1223	+ filter: Alpha(Opacity=20); /* support: IE8 */
1224	+ border-radius: 5px;
1225	+ }

css/loftloader-animation.css ADDED Viewed

	@@ -0,0 +1,817 @@


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: 1000;
15	+ width: 100%;
16	+ height: 100%;
17	+ }
18	+
19	+ .loaded #loftloader-wrapper {
20	+ width: 0;
21	+ height: 0;
22	+ visibility: hidden;
23	+ pointer-events: none;
24	+ overflow: hidden;
25	+ transition: all;
26	+ transition-delay: 1s;
27	+ }
28	+
29	+ .loaded #loftloader-wrapper.slide-vertical {
30	+ -webkit-transform: translate(-100%, 0);
31	+ -ms-transform: translate(-100%, 0);
32	+ transform: translate(-100%, 0);
33	+ }
34	+
35	+ #loftloader-wrapper .loader-inner {
36	+ position: absolute;
37	+ top: 50%;
38	+ left: 50%;
39	+ -webkit-transform: translate(-50%, -50%);
40	+ -ms-transform: translate(-50%, -50%);
41	+ transform: translate(-50%, -50%);
42	+ z-index: 1001;
43	+ text-align: center;
44	+ }
45	+
46	+ #loftloader-wrapper #loader {
47	+ position: relative;
48	+ z-index: 1002;
49	+ }
50	+
51	+
52	+ /* ==========================================================================
53	+ Loading - Spinning Sun
54	+ ========================================================================== */
55	+
56	+ #loftloader-wrapper.pl-sun #loader {
57	+ position: relative;
58	+ width: 50px;
59	+ height: 50px;
60	+ }
61	+
62	+ #loftloader-wrapper.pl-sun #loader span {
63	+ position: absolute;
64	+ top: 0;
65	+ left: 0;
66	+ display: block;
67	+ width: 50px;
68	+ height: 50px;
69	+ background: #248ACC;
70	+ opacity: 0.9;
71	+ transform-origin: 50% 50%;
72	+ -webkit-animation: spinReturn 4s ease infinite;
73	+ animation: spinReturn 4s ease infinite;
74	+ }
75	+
76	+ #loftloader-wrapper.pl-sun #loader span:before {
77	+ position: absolute;
78	+ top: 0;
79	+ left: 0;
80	+ display: block;
81	+ width: 100%;
82	+ height: 100%;
83	+ background: #248ACC;
84	+ opacity: 0.9;
85	+ content: '';
86	+ transform-origin: 50% 50%;
87	+ -webkit-transform: rotate(45deg);
88	+ -ms-transform: rotate(45deg);
89	+ transform: rotate(45deg);
90	+ }
91	+
92	+
93	+ /* ==========================================================================
94	+ Loading - Luminous Circles
95	+ ========================================================================== */
96	+
97	+ #loftloader-wrapper.pl-circles #loader {
98	+ position: relative;
99	+ width: 100px;
100	+ height: 60px;
101	+ }
102	+
103	+ #loftloader-wrapper.pl-circles #loader span,
104	+ #loftloader-wrapper.pl-circles #loader:before,
105	+ #loftloader-wrapper.pl-circles #loader:after {
106	+ position: absolute;
107	+ display: block;
108	+ width: 10px;
109	+ height: 10px;
110	+ border-radius: 50%;
111	+ opacity: 0.2;
112	+ background: #248ACC;
113	+ }
114	+
115	+ #loftloader-wrapper.pl-circles #loader span {
116	+ top: 50%;
117	+ left: 50%;
118	+ -webkit-transform: translate(-50%, -50%);
119	+ -ms-transform: translate(-50%, -50%);
120	+ transform: translate(-50%, -50%);
121	+ -webkit-animation: lightUp 1.5s linear infinite 0.5s;
122	+ animation: lightUp 1.5s linear infinite 0.5s;
123	+ }
124	+
125	+ #loftloader-wrapper.pl-circles #loader:before,
126	+ #loftloader-wrapper.pl-circles #loader:after {
127	+ content: "";
128	+ }
129	+
130	+ #loftloader-wrapper.pl-circles #loader:before {
131	+ top: 50%;
132	+ left: 0;
133	+ -webkit-transform: translate(0, -50%);
134	+ -ms-transform: translate(0, -50%);
135	+ transform: translate(0, -50%);
136	+ -webkit-animation: lightUp 1.5s linear infinite;
137	+ animation: lightUp 1.5s linear infinite;
138	+ }
139	+
140	+ #loftloader-wrapper.pl-circles #loader:after {
141	+ top: 50%;
142	+ right: 0;
143	+ -webkit-transform: translate(0, -50%);
144	+ -ms-transform: translate(0, -50%);
145	+ transform: translate(0, -50%);
146	+ -webkit-animation: lightUp 1.5s linear infinite 1s;
147	+ animation: lightUp 1.5s linear infinite 1s;
148	+ }
149	+
150	+ @-webkit-keyframes lightUp {
151	+ 0% {
152	+ opacity: 0.2;
153	+ }
154	+ 40% {
155	+ opacity: 1;
156	+ }
157	+ 60% {
158	+ opacity: 0.2;
159	+ }
160	+ 100% {
161	+ opacity: 0.2;
162	+ }
163	+ }
164	+
165	+ @keyframes lightUp {
166	+ 0% {
167	+ opacity: 0.2;
168	+ }
169	+ 40% {
170	+ opacity: 1;
171	+ }
172	+ 60% {
173	+ opacity: 0.2;
174	+ }
175	+ 100% {
176	+ opacity: 0.2;
177	+ }
178	+ }
179	+
180	+
181	+ /* ==========================================================================
182	+ Loading - Wave
183	+ ========================================================================== */
184	+
185	+ #loftloader-wrapper.pl-wave #loader {
186	+ position: relative;
187	+ width: 50px;
188	+ height: 30px;
189	+ }
190	+
191	+ #loftloader-wrapper.pl-wave #loader span,
192	+ #loftloader-wrapper.pl-wave #loader:before,
193	+ #loftloader-wrapper.pl-wave #loader:after {
194	+ position: absolute;
195	+ display: block;
196	+ width: 6px;
197	+ height: 100%;
198	+ background: #248ACC;
199	+ }
200	+
201	+ #loftloader-wrapper.pl-wave #loader span {
202	+ top: 50%;
203	+ left: 50%;
204	+ -webkit-transform: translate(-50%, -50%);
205	+ -ms-transform: translate(-50%, -50%);
206	+ transform: translate(-50%, -50%);
207	+ -webkit-animation: wave 0.9s linear infinite 0.3s;
208	+ animation: wave 0.9s linear infinite 0.3s;
209	+ }
210	+
211	+ #loftloader-wrapper.pl-wave #loader:before,
212	+ #loftloader-wrapper.pl-wave #loader:after {
213	+ content: "";
214	+ }
215	+
216	+ #loftloader-wrapper.pl-wave #loader:before {
217	+ top: 50%;
218	+ left: 0;
219	+ -webkit-transform: translate(0, -50%);
220	+ -ms-transform: translate(0, -50%);
221	+ transform: translate(0, -50%);
222	+ -webkit-animation: wave 0.9s linear infinite;
223	+ animation: wave 0.9s linear infinite;
224	+ }
225	+
226	+ #loftloader-wrapper.pl-wave #loader:after {
227	+ top: 50%;
228	+ right: 0;
229	+ -webkit-transform: translate(0, -50%);
230	+ -ms-transform: translate(0, -50%);
231	+ transform: translate(0, -50%);
232	+ -webkit-animation: wave 0.9s linear infinite 0.6s;
233	+ animation: wave 0.9s linear infinite 0.6s;
234	+ }
235	+
236	+ @-webkit-keyframes wave {
237	+ 0% {
238	+ height: 100%
239	+ }
240	+ 40% {
241	+ height: 10%;
242	+ }
243	+ 80% {
244	+ height: 100%;
245	+ }
246	+ 100% {
247	+ height: 100%;
248	+ }
249	+ }
250	+
251	+ @keyframes wave {
252	+ 0% {
253	+ height: 100%
254	+ }
255	+ 40% {
256	+ height: 10%;
257	+ }
258	+ 80% {
259	+ height: 100%;
260	+ }
261	+ 100% {
262	+ height: 100%;
263	+ }
264	+ }
265	+
266	+
267	+ /* ==========================================================================
268	+ Loading - Spinning Square
269	+ ========================================================================== */
270	+
271	+ #loftloader-wrapper.pl-square #loader {
272	+ position: relative;
273	+ width: 50px;
274	+ height: 50px;
275	+ transform-origin: 50% 50%;
276	+ -webkit-animation: spinReturn 4s ease infinite;
277	+ animation: spinReturn 4s ease infinite;
278	+ }
279	+
280	+ #loftloader-wrapper.pl-square #loader span {
281	+ position: absolute;
282	+ top: 0;
283	+ left: 0;
284	+ display: block;
285	+ width: 100%;
286	+ height: 100%;
287	+ border: 4px solid #248ACC;
288	+ transform-origin: 50% 50%;
289	+ -webkit-transform: rotate(45deg);
290	+ -ms-transform: rotate(45deg);
291	+ transform: rotate(45deg);
292	+ }
293	+
294	+ @-webkit-keyframes spinReturn {
295	+ 0% {
296	+ -webkit-transform: rotate(0deg);
297	+ }
298	+ 25% {
299	+ -webkit-transform: rotate(225deg);
300	+ }
301	+ 50% {
302	+ -webkit-transform: rotate(180deg);
303	+ }
304	+ 75% {
305	+ -webkit-transform: rotate(405deg);
306	+ }
307	+ 100% {
308	+ -webkit-transform: rotate(360deg);
309	+ }
310	+ }
311	+
312	+ @keyframes spinReturn {
313	+ 0% {
314	+ transform: rotate(0deg);
315	+ }
316	+ 25% {
317	+ transform: rotate(225deg);
318	+ }
319	+ 50% {
320	+ transform: rotate(180deg);
321	+ }
322	+ 75% {
323	+ transform: rotate(405deg);
324	+ }
325	+ 100% {
326	+ transform: rotate(360deg);
327	+ }
328	+ }
329	+
330	+
331	+ /* ==========================================================================
332	+ Loading - Drawing Frame
333	+ ========================================================================== */
334	+
335	+ #loftloader-wrapper.pl-frame #loader {
336	+ position: relative;
337	+ width: 80px;
338	+ height: 80px;
339	+ }
340	+
341	+ #loftloader-wrapper.pl-frame #loader span {
342	+ position: absolute;
343	+ top: 0;
344	+ left: 0;
345	+ display: block;
346	+ width: 100%;
347	+ height: 100%;
348	+ }
349	+
350	+ #loftloader-wrapper.pl-frame #loader img {
351	+ position: absolute;
352	+ top: 50%;
353	+ left: 50%;
354	+ display: block;
355	+ max-width: 80%;
356	+ max-height: 80%;
357	+ -webkit-transform: translate(-50%, -50%);
358	+ -ms-transform: translate(-50%, -50%);
359	+ transform: translate(-50%, -50%);
360	+ }
361	+
362	+ #loftloader-wrapper.pl-frame #loader:before {
363	+ position: absolute;
364	+ top: 0;
365	+ right: 0;
366	+ left: auto;
367	+ width: 100%;
368	+ height: 4px;
369	+ background: #248ACC;
370	+ content: "";
371	+ -webkit-animation: drawframeTop 4s linear infinite;
372	+ animation: drawframeTop 4s linear infinite;
373	+ }
374	+
375	+ #loftloader-wrapper.pl-frame #loader:after {
376	+ position: absolute;
377	+ right: auto;
378	+ bottom: 0;
379	+ left: 0;
380	+ width: 100%;
381	+ height: 4px;
382	+ background: #248ACC;
383	+ content: "";
384	+ -webkit-animation: drawframeBottom 4s linear infinite 1s;
385	+ animation: drawframeBottom 4s linear infinite 1s;
386	+ }
387	+
388	+ #loftloader-wrapper.pl-frame #loader span:before {
389	+ position: absolute;
390	+ top: auto;
391	+ right: 0;
392	+ bottom: 0;
393	+ width: 4px;
394	+ height: 100%;
395	+ background: #248ACC;
396	+ content: "";
397	+ -webkit-animation: drawframeRight 4s linear infinite 0.5s;
398	+ animation: drawframeRight 4s linear infinite 0.5s;
399	+ }
400	+
401	+ #loftloader-wrapper.pl-frame #loader span:after {
402	+ position: absolute;
403	+ top: 0;
404	+ bottom: auto;
405	+ left: 0;
406	+ width: 4px;
407	+ height: 100%;
408	+ background: #248ACC;
409	+ content: "";
410	+ -webkit-animation: drawframeLeft 4s linear infinite 1.5s;
411	+ animation: drawframeLeft 4s linear infinite 1.5s;
412	+ }
413	+
414	+ @-webkit-keyframes drawframeTop {
415	+ 0% {
416	+ right: 0;
417	+ left: auto;
418	+ width: 100%;
419	+ }
420	+ 12.5% {
421	+ right: 0;
422	+ left: auto;
423	+ width: 0%;
424	+ }
425	+ 50% {
426	+ right: auto;
427	+ left: 0;
428	+ width: 0%;
429	+ }
430	+ 62.5% {
431	+ right: auto;
432	+ left: 0;
433	+ width: 100%;
434	+ }
435	+ 100% {
436	+ right: auto;
437	+ left: 0;
438	+ width: 100%;
439	+ }
440	+ }
441	+
442	+ @keyframes drawframeTop {
443	+ 0% {
444	+ right: 0;
445	+ left: auto;
446	+ width: 100%;
447	+ }
448	+ 12.5% {
449	+ right: 0;
450	+ left: auto;
451	+ width: 0%;
452	+ }
453	+ 50% {
454	+ right: auto;
455	+ left: 0;
456	+ width: 0%;
457	+ }
458	+ 62.5% {
459	+ right: auto;
460	+ left: 0;
461	+ width: 100%;
462	+ }
463	+ 100% {
464	+ right: auto;
465	+ left: 0;
466	+ width: 100%;
467	+ }
468	+ }
469	+
470	+ @-webkit-keyframes drawframeBottom {
471	+ 0% {
472	+ right: auto;
473	+ left: 0;
474	+ width: 100%;
475	+ }
476	+ 12.5% {
477	+ right: auto;
478	+ left: 0;
479	+ width: 0%;
480	+ }
481	+ 50% {
482	+ right: 0;
483	+ left: auto;
484	+ width: 0%;
485	+ }
486	+ 62.5% {
487	+ right: 0;
488	+ left: auto;
489	+ width: 100%;
490	+ }
491	+ 100% {
492	+ right: 0;
493	+ left: auto;
494	+ width: 100%;
495	+ }
496	+ }
497	+
498	+ @keyframes drawframeBottom {
499	+ 0% {
500	+ right: auto;
501	+ left: 0;
502	+ width: 100%;
503	+ }
504	+ 12.5% {
505	+ right: auto;
506	+ left: 0;
507	+ width: 0%;
508	+ }
509	+ 50% {
510	+ right: 0;
511	+ left: auto;
512	+ width: 0%;
513	+ }
514	+ 62.5% {
515	+ right: 0;
516	+ left: auto;
517	+ width: 100%;
518	+ }
519	+ 100% {
520	+ right: 0;
521	+ left: auto;
522	+ width: 100%;
523	+ }
524	+ }
525	+
526	+ @-webkit-keyframes drawframeRight {
527	+ 0% {
528	+ top: auto;
529	+ bottom: 0;
530	+ height: 100%;
531	+ }
532	+ 12.5% {
533	+ top: auto;
534	+ bottom: 0;
535	+ height: 0%;
536	+ }
537	+ 50% {
538	+ top: 0;
539	+ bottom: auto;
540	+ height: 0%;
541	+ }
542	+ 62.5% {
543	+ top: 0;
544	+ bottom: auto;
545	+ height: 100%;
546	+ }
547	+ 100% {
548	+ top: 0;
549	+ bottom: auto;
550	+ height: 100%;
551	+ }
552	+ }
553	+
554	+ @keyframes drawframeRight {
555	+ 0% {
556	+ top: auto;
557	+ bottom: 0;
558	+ height: 100%;
559	+ }
560	+ 12.5% {
561	+ top: auto;
562	+ bottom: 0;
563	+ height: 0%;
564	+ }
565	+ 50% {
566	+ top: 0;
567	+ bottom: auto;
568	+ height: 0%;
569	+ }
570	+ 62.5% {
571	+ top: 0;
572	+ bottom: auto;
573	+ height: 100%;
574	+ }
575	+ 100% {
576	+ top: 0;
577	+ bottom: auto;
578	+ height: 100%;
579	+ }
580	+ }
581	+
582	+ @-webkit-keyframes drawframeLeft {
583	+ 0% {
584	+ top: 0;
585	+ bottom: auto;
586	+ height: 100%;
587	+ }
588	+ 12.5% {
589	+ top: 0;
590	+ bottom: auto;
591	+ height: 0%;
592	+ }
593	+ 50% {
594	+ top: auto;
595	+ bottom: 0;
596	+ height: 0%;
597	+ }
598	+ 62.5% {
599	+ top: auto;
600	+ bottom: 0;
601	+ height: 100%;
602	+ }
603	+ 100% {
604	+ top: auto;
605	+ bottom: 0;
606	+ height: 100%;
607	+ }
608	+ }
609	+
610	+ @keyframes drawframeLeft {
611	+ 0% {
612	+ top: 0;
613	+ bottom: auto;
614	+ height: 100%;
615	+ }
616	+ 12.5% {
617	+ top: 0;
618	+ bottom: auto;
619	+ height: 0%;
620	+ }
621	+ 50% {
622	+ top: auto;
623	+ bottom: 0;
624	+ height: 0%;
625	+ }
626	+ 62.5% {
627	+ top: auto;
628	+ bottom: 0;
629	+ height: 100%;
630	+ }
631	+ 100% {
632	+ top: auto;
633	+ bottom: 0;
634	+ height: 100%;
635	+ }
636	+ }
637	+
638	+
639	+ /* ==========================================================================
640	+ Loading - Loading Custom Image
641	+ ========================================================================== */
642	+
643	+ #loftloader-wrapper.pl-imgloading #loader {
644	+ position: relative;
645	+ width: auto;
646	+ height: auto;
647	+ max-width: 200px;
648	+ }
649	+
650	+ #loftloader-wrapper.pl-imgloading #loader img {
651	+ position: relative;
652	+ z-index: 1;
653	+ display: block;
654	+ width: 100%;
655	+ height: auto;
656	+ opacity: 0.3;
657	+ }
658	+
659	+ #loftloader-wrapper.pl-imgloading #loader span {
660	+ position: absolute;
661	+ bottom: 0;
662	+ left: 0;
663	+ z-index: 3;
664	+ display: block;
665	+ width: 100%;
666	+ height: 0%;
667	+ background-position: center bottom;
668	+ background-repeat: no-repeat;
669	+ background-size: cover;
670	+ -webkit-animation: imgLoading 6s linear infinite;
671	+ animation: imgLoading 6s linear infinite;
672	+ transition: 0s;
673	+ }
674	+
675	+ @-webkit-keyframes imgLoading {
676	+ 0% {
677	+ width: 100%;
678	+ height: 0%;
679	+ opacity: 1;
680	+ }
681	+ 95% {
682	+ width: 100%;
683	+ height: 100%;
684	+ opacity: 1;
685	+ }
686	+
687	+ 100% {
688	+ width: 100%;
689	+ height: 100%;
690	+ opacity: 0;
691	+ }
692	+ }
693	+
694	+ @keyframes imgLoading {
695	+ 0% {
696	+ width: 100%;
697	+ height: 0%;
698	+ opacity: 1;
699	+ }
700	+ 95% {
701	+ width: 100%;
702	+ height: 100%;
703	+ opacity: 1;
704	+ }
705	+
706	+ 100% {
707	+ width: 100%;
708	+ height: 100%;
709	+ opacity: 0;
710	+ }
711	+ }
712	+
713	+
714	+ /**
715	+ * Hide the preloader elements after the page content has been loaded.
716	+ */
717	+
718	+ .loaded #loader {
719	+ opacity: 0;
720	+ transition: all 0.3s ease-out;
721	+ }
722	+
723	+
724	+ /* ==========================================================================
725	+ Background and Ending
726	+ ========================================================================== */
727	+
728	+ #loftloader-wrapper .loader-section {
729	+ position: fixed;
730	+ top: 0;
731	+ z-index: 1000;
732	+ background: #000;
733	+ width: 50%;
734	+ height: 100%;
735	+ opacity: 0.95;
736	+ }
737	+
738	+ #loftloader-wrapper .loader-section.section-left {
739	+ left: 0;
740	+ transition: all 0s;
741	+ will-change: transform;
742	+ }
743	+
744	+ .loaded #loftloader-wrapper .loader-section.section-left {
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-right {
752	+ right: 0;
753	+ transition: all 0s;
754	+ will-change: transform;
755	+ }
756	+
757	+ .loaded #loftloader-wrapper .loader-section.section-right {
758	+ -webkit-transform: translateX(100%);
759	+ -ms-transform: translateX(100%);
760	+ transform: translateX(100%);
761	+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
762	+ }
763	+
764	+ #loftloader-wrapper .loader-section.section-up {
765	+ width: 100%;
766	+ height: 50%;
767	+ transition: all 0s;
768	+ will-change: transform;
769	+ }
770	+
771	+ .loaded #loftloader-wrapper .loader-section.section-up {
772	+ -webkit-transform: translateY(-100%);
773	+ -ms-transform: translateY(-100%);
774	+ transform: translateY(-100%);
775	+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
776	+ }
777	+
778	+ #loftloader-wrapper .loader-section.section-down {
779	+ top: auto;
780	+ bottom: 0;
781	+ left: 0;
782	+ width: 100%;
783	+ height: 50%;
784	+ transition: all 0s;
785	+ will-change: transform;
786	+ }
787	+
788	+ .loaded #loftloader-wrapper .loader-section.section-down {
789	+ -webkit-transform: translateY(100%);
790	+ -ms-transform: translateY(100%);
791	+ transform: translateY(100%);
792	+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
793	+ }
794	+
795	+ #loftloader-wrapper .loader-section.section-fade {
796	+ width: 100%;
797	+ transition: all 0s;
798	+ will-change: opacity;
799	+ }
800	+
801	+ .loaded #loftloader-wrapper .loader-section.section-fade {
802	+ opacity: 0 !important;
803	+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
804	+ }
805	+
806	+ #loftloader-wrapper .loader-section.section-slide-up {
807	+ width: 100%;
808	+ transition: all 0s;
809	+ will-change: transform;
810	+ }
811	+
812	+ .loaded #loftloader-wrapper .loader-section.section-slide-up {
813	+ -webkit-transform: translateY(-100%);
814	+ -ms-transform: translateY(-100%);
815	+ transform: translateY(-100%);
816	+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
817	+ }

css/settings/loftloader-media.css ADDED Viewed

	@@ -0,0 +1,23 @@


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 ADDED Viewed

	@@ -0,0 +1,536 @@


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	+ padding: 20px;
33	+ box-sizing: border-box;
34	+ overflow: auto;
35	+ font-size: 13px;
36	+ }
37	+
38	+ .loftloader-options-panel * {
39	+ margin: 0 auto;
40	+ padding: 0;
41	+ box-sizing: border-box;
42	+ }
43	+
44	+ h1.loftloader-option-section-title {
45	+ position: relative;
46	+ margin-bottom: 24px;
47	+ border-bottom: 1px solid #CCC;
48	+ padding-bottom: 20px;
49	+ }
50	+
51	+ .loftloader-option-section-title:after {
52	+ position: absolute;
53	+ bottom: -2px;
54	+ left: 0;
55	+ display: block;
56	+ width: 100%;
57	+ height: 1px;
58	+ background: #FFF;
59	+ content: "";
60	+ }
61	+
62	+ .loftloader-options-panel .bg-img-holder {
63	+ display: inline-block;
64	+ background: rgba(0, 0, 0, 0.1);
65	+ border: 1px solid rgba(0, 0, 0, 0.05);
66	+ margin-right: 12px;
67	+ cursor: pointer;
68	+ }
69	+
70	+ .loftloader-options-panel .bg-img-holder:hover {
71	+ border-color: #248ACC;
72	+ }
73	+
74	+ .loftloader-options-panel .bg-img-remove {
75	+ display: inline-block;
76	+ cursor: pointer;
77	+ color: #248ACC;
78	+ }
79	+
80	+ .loftloader-options-panel .bg-img-remove:hover {
81	+ text-decoration: underline;
82	+ }
83	+
84	+ .loftloader-options-panel .bg-img-holder img {
85	+ display: block;
86	+ width: auto;
87	+ height: auto;
88	+ max-width: 120px;
89	+ max-height: 120px;
90	+ margin-left: 0;
91	+ }
92	+
93	+ .loftloader-options-panel input[type="text"],
94	+ .loftloader-options-panel input[type="number"] {
95	+ width: 80px;
96	+ padding: 3px 10px;
97	+ }
98	+
99	+ /**
100	+ * Hide elements.
101	+ */
102	+
103	+ .loftloader-options-panel .hide {
104	+ display: none !important;
105	+ }
106	+
107	+
108	+ /* ==========================================================================
109	+ 2.0 Panel Footer
110	+ ========================================================================== */
111	+
112	+ .loftloader-options-panel .panel-footer {
113	+ position: relative;
114	+ overflow: hidden;
115	+ margin: 0;
116	+ padding: 24px 0;
117	+ border-top: 1px solid #CCC;
118	+ }
119	+
120	+ .loftloader-options-panel .panel-footer:before {
121	+ position: absolute;
122	+ top: 0;
123	+ left: 0;
124	+ display: block;
125	+ width: 100%;
126	+ height: 1px;
127	+ background: #FFF;
128	+ content: "";
129	+ }
130	+
131	+ .loftloader-options-panel .panel-footer p.submit {
132	+ float: right;
133	+ margin: 0;
134	+ padding: 0;
135	+ }
136	+
137	+ .loftloader-options-panel .panel-footer p.reset {
138	+ float: left;
139	+ margin: 0;
140	+ }
141	+
142	+
143	+ /* ==========================================================================
144	+ 3.0 Panel Content
145	+ ========================================================================== */
146	+
147	+ .loftloader-options-panel .setting-group {
148	+ margin-bottom: 30px;
149	+ background: #FFF;
150	+ border: 1px solid #DDD;
151	+ border-radius: 5px;
152	+ box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
153	+ }
154	+
155	+ .loftloader-options-panel .setting-group h3 {
156	+ margin: 0;
157	+ padding: 10px 20px;
158	+ background: rgba(0, 0, 0, 0.03);
159	+ border-bottom: 1px solid #DDD;
160	+ border-top-left-radius: 5px;
161	+ border-top-right-radius: 5px;
162	+ }
163	+
164	+ .loftloader-options-panel ul {
165	+ margin-left: 0;
166	+ padding: 24px 20px;
167	+ list-style: none;
168	+ }
169	+
170	+ .loftloader-options-panel ul li {
171	+ position: relative;
172	+ display: block;
173	+ margin: 0;
174	+ overflow: hidden;
175	+ }
176	+
177	+ .loftloader-options-panel ul.form-list li:after {
178	+ position: relative;
179	+ display: block;
180	+ clear: both;
181	+ content: "";
182	+ }
183	+
184	+ .loftloader-options-panel ul.form-list li .list-title,
185	+ .loftloader-options-panel ul.form-list li .list-content {
186	+ float: left;
187	+ width: 50%;
188	+ }
189	+
190	+ .loftloader-options-panel ul.form-list li .list-title {
191	+ padding-right: 50px;
192	+ }
193	+
194	+ .loftloader-options-panel ul.form-list li .list-title h4 {
195	+ margin: 0;
196	+ font-size: 14px;
197	+ line-height: 28px;
198	+ }
199	+
200	+ .loftloader-options-panel span.description {
201	+ font-weight: normal;
202	+ color: #999;
203	+ font-size: 12px;
204	+ font-style: normal;
205	+ line-height: 1em;
206	+ }
207	+
208	+ /* Restyle Checkbox
209	+ ========================================================================== */
210	+
211	+ .loftloader-options-panel label {
212	+ position: relative;
213	+ display: inline-block;
214	+ height: 30px;
215	+ }
216	+
217	+ .loftloader-options-panel input[type="checkbox"] {
218	+ position: relative;
219	+ z-index: 9;
220	+ opacity: 0;
221	+ }
222	+
223	+ .loftloader-options-panel .on-off {
224	+ position: absolute;
225	+ top: 2px;
226	+ left: 0;
227	+ z-index: 1;
228	+ display: inline-block;
229	+ width: 56px;
230	+ height: 26px;
231	+ padding: 1px;
232	+ border-radius: 13px;
233	+ background: #EEE;
234	+ border: 1px solid #DDD;
235	+ transition: 0.3s;
236	+ box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
237	+ }
238	+
239	+ .loftloader-options-panel .on-off span {
240	+ -webkit-transform: translateX(30px);
241	+ -ms-transform: translateX(30px);
242	+ transform: translateX(30px);
243	+ display: inline-block;
244	+ width: 22px;
245	+ height: 22px;
246	+ background: #FFF;
247	+ border-radius: 50%;
248	+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
249	+ transition: 0.3s;
250	+ }
251	+
252	+ .loftloader-options-panel input[type="checkbox"]:checked + .on-off {
253	+ background: rgba(48, 154, 213, 0.7);
254	+ border-color: #248ACC;
255	+ }
256	+
257	+ .loftloader-options-panel input[type="checkbox"]:focus + .on-off {
258	+ border-color: #5B9DD9;
259	+ box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
260	+ }
261	+
262	+ .loftloader-options-panel input[type="checkbox"]:checked + .on-off span {
263	+ -webkit-transform: translateX(0);
264	+ -ms-transform: translateX(0);
265	+ transform: translateX(0);
266	+ }
267	+
268	+
269	+ /* ==========================================================================
270	+ 4.0 Restyle UI Slider
271	+ ========================================================================== */
272	+
273	+ .loftloader-options-panel .ui-slider.loader-ui-slider {
274	+ position: relative;
275	+ float: left;
276	+ display: block;
277	+ width: calc(100% - 120px);
278	+ height: 24px;
279	+ margin: 3px 0 0;
280	+ background: none;
281	+ border: none;
282	+ border-radius: 0;
283	+ cursor: pointer;
284	+ }
285	+
286	+ .loftloader-options-panel .ui-slider.loader-ui-slider:before {
287	+ position: absolute;
288	+ top: 50%;
289	+ left: 0;
290	+ display: block;
291	+ width: 100%;
292	+ height: 2px;
293	+ background: #DCDCDC;
294	+ content: "";
295	+ }
296	+
297	+ .loftloader-options-panel label.amount {
298	+ float: left;
299	+ margin-right: 20px;
300	+ }
301	+
302	+ .loftloader-options-panel .ui-slider.loader-ui-slider .ui-slider-range-min {
303	+ top: 50%;
304	+ height: 2px;
305	+ background: #248ACC;
306	+ border-radius: 0;
307	+ }
308	+
309	+ .loftloader-options-panel .ui-slider.loader-ui-slider .ui-slider-handle {
310	+ top: 8px;
311	+ width: 10px;
312	+ height: 10px;
313	+ background: #248ACC;
314	+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
315	+ border: 1px solid #248ACC;
316	+ border-radius: 50%;
317	+ outline: none;
318	+ cursor: pointer;
319	+ }
320	+
321	+ .loftloader-options-panel .ui-slider.loader-ui-slider .ui-slider-handle.ui-state-focus {
322	+ border-color: #5B9DD9;
323	+ box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
324	+ }
325	+
326	+
327	+ /* ==========================================================================
328	+ 5.0 Restyle Color Picker
329	+ ========================================================================== */
330	+
331	+ .loftloader-options-panel .wp-picker-container .wp-color-result {
332	+ height: 28px;
333	+ margin-right: 6px;
334	+ padding-left: 30px;
335	+ border: 1px solid #DDD;
336	+ border-radius: 5px;
337	+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);
338	+ line-height: 26px;
339	+ }
340	+
341	+ .loftloader-options-panel .wp-picker-container .wp-color-result:after {
342	+ height: 25px;
343	+ margin: 0;
344	+ padding: 0 12px 1px;
345	+ background: #F9F9F9;
346	+ border-left: 1px solid #DDD;
347	+ -webkit-appearance: none;
348	+ border-radius: 0 4px 4px 0;
349	+ color: #999;
350	+ vertical-align: top;
351	+ font-size: 13px;
352	+ line-height: 26px;
353	+ }
354	+
355	+ .loftloader-options-panel .wp-picker-container .wp-color-result:focus {
356	+ border-color: #5B9DD9;
357	+ box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
358	+ }
359	+
360	+ .loftloader-options-panel .wp-picker-container .wp-picker-open + .wp-picker-input-wrap {
361	+ margin-top: 2px;
362	+ }
363	+
364	+
365	+ /* ==========================================================================
366	+ 6.0 Loader Preview Frame
367	+ ========================================================================== */
368	+
369	+ .loftloader-options-panel .preview-section {
370	+ position: relative;
371	+ margin-top: 40px;
372	+ }
373	+
374	+ .loftloader-options-panel .preview-wrapper {
375	+ margin-bottom: 40px;
376	+ }
377	+
378	+ .loftloader-options-panel .preview-settings {
379	+ position: relative;
380	+ display: block;
381	+ overflow: hidden;
382	+ }
383	+
384	+ .loftloader-options-panel .preview-settings .setting-group {
385	+ float: left;
386	+ width: 48%;
387	+ margin-right: 2%;
388	+ }
389	+
390	+ .loftloader-options-panel .preview-settings .setting-group:last-of-type {
391	+ margin-right: 0;
392	+ margin-left: 2%;
393	+ }
394	+
395	+ .loftloader-options-panel .preview-settings h4 {
396	+ margin-bottom: 0.5em;
397	+ }
398	+
399	+ .loftloader-options-panel .preview-settings .setting-group li {
400	+ margin-bottom: 24px;
401	+ }
402	+
403	+ .loftloader-options-panel .preview-frame {
404	+ position: relative;
405	+ width: 100%;
406	+ height: 300px;
407	+ margin-top: 30px;
408	+ border: 1px solid #DDD;
409	+ overflow: hidden;
410	+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
411	+ }
412	+
413	+ .loftloader-options-panel .preview-frame:after {
414	+ position: absolute;
415	+ top: 50%;
416	+ left: 50%;
417	+ -webkit-transform: translate(-50%, -50%);
418	+ -ms-transform: translate(-50%, -50%);
419	+ transform: translate(-50%, -50%);
420	+ display: block;
421	+ width: 100%;
422	+ height: auto;
423	+ color: #DDD;
424	+ content: "YOUR SITE CONTENT";
425	+ font-weight: bold;
426	+ font-size: 36px;
427	+ text-align: center;
428	+ line-height: 1.5;
429	+ letter-spacing: 0.2em;
430	+ }
431	+
432	+ /**
433	+ * Hide the loading animation on hover.
434	+ */
435	+
436	+ .loftloader-options-panel .preview-frame:hover #loader {
437	+ opacity: 0;
438	+ transition: all 0.3s ease-out;
439	+ }
440	+
441	+
442	+ /* ==========================================================================
443	+ 7.0 Lodaer Preview Frame - Background and Ending
444	+ ========================================================================== */
445	+
446	+ .loftloader-options-panel .preview-frame #loftloader-wrapper {
447	+ position: relative;
448	+ }
449	+
450	+ .loftloader-options-panel .preview-frame #loftloader-wrapper .loader-section {
451	+ position: absolute;
452	+ }
453	+
454	+ .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-left {
455	+ -webkit-transform: translateX(-100%);
456	+ -ms-transform: translateX(-100%);
457	+ transform: translateX(-100%);
458	+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
459	+ }
460	+
461	+ .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-right {
462	+ -webkit-transform: translateX(100%);
463	+ -ms-transform: translateX(100%);
464	+ transform: translateX(100%);
465	+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
466	+ }
467	+
468	+ .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-up {
469	+ -webkit-transform: translateY(-100%);
470	+ -ms-transform: translateY(-100%);
471	+ transform: translateY(-100%);
472	+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
473	+ }
474	+ .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-down {
475	+ -webkit-transform: translateY(100%);
476	+ -ms-transform: translateY(100%);
477	+ transform: translateY(100%);
478	+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
479	+ }
480	+
481	+ .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-fade {
482	+ opacity: 0 !important;
483	+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
484	+ }
485	+
486	+ .loftloader-options-panel .preview-frame:hover #loftloader-wrapper .loader-section.section-slide-up {
487	+ -webkit-transform: translateY(-100%);
488	+ -ms-transform: translateY(-100%);
489	+ transform: translateY(-100%);
490	+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
491	+ }
492	+
493	+
494	+ /* ==========================================================================
495	+ 8.0 Media Queries
496	+ ========================================================================== */
497	+
498	+ @media screen and (max-width : 800px) {
499	+ .loftloader-options-panel .preview-settings .setting-group {
500	+ float: none;
501	+ width: 100%;
502	+ margin-right: 0;
503	+ }
504	+
505	+ .loftloader-options-panel .preview-settings .setting-group:last-of-type {
506	+ margin-left: 0;
507	+ }
508	+ }
509	+
510	+ @media screen and (max-width : 640px) {
511	+ .loftloader-options-panel ul.form-list li .list-title,
512	+ .loftloader-options-panel ul.form-list li .list-content {
513	+ float: none;
514	+ width: 100%;
515	+ }
516	+
517	+ .loftloader-options-panel ul.form-list li .list-title {
518	+ margin-bottom: 10px;
519	+ padding-right: 0;
520	+ }
521	+
522	+ .loftloader-options-panel .ui-slider.loader-ui-slider {
523	+ width: 100%;
524	+ }
525	+ }
526	+
527	+ @media only screen and (max-width : 340px) {
528	+ .loftloader-options-panel .panel-footer p.submit,
529	+ .loftloader-options-panel .panel-footer p.reset {
530	+ float: none;
531	+ }
532	+
533	+ .loftloader-options-panel .panel-footer p.submit {
534	+ margin-bottom: 10px;
535	+ }
536	+ }

front/class-loftloader-front.php ADDED Viewed

	@@ -0,0 +1,85 @@


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	+ * @version 1.0
12	+ * @link http://www.loftocean.com/
13	+ * @author Suihai Huang from Loft Ocean Team
14	+
15	+ * @since version 1.0
16	+ */
17	+
18	+ if(!class_exists('LoftLoader_Front')){
19	+ class LoftLoader_Front{
20	+ private $loader_enabled; // Flag to tell whether loftloader enabled
21	+ private $loader_settings; // Get the loader settings
22	+ public function __construct(){
23	+ $this->get_settings();
24	+ if($this->loader_enabled){
25	+ add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
26	+ add_action('wp_head', array($this, 'loader_custom_styles'), 100);
27	+ add_action('wp_footer', array($this, 'show_loader_html'));
28	+ }
29	+ }
30	+ /**
31	+ * @description get the plugin settings
32	+ */
33	+ public function get_settings(){
34	+ $default = apply_filters('loftloader_settings_default_value', array());
35	+ $settings = get_option('loftloader-custom-settings', $default);
36	+ $this->loader_enabled = (!empty($settings['enable']) && ($settings['enable'] == 'on')) ? true : false;
37	+ $this->loader_settings = $settings;
38	+ }
39	+ /**
40	+ * @description enqueue the scripts and styles for front end
41	+ */
42	+ public function enqueue_scripts(){
43	+ wp_enqueue_script('loftloader-front-main', LOFTLOADER_JS_URI . 'front/loftloader.js', array('jquery'), '1.0', true);
44	+ wp_enqueue_style('loftloader-animation');
45	+ }
46	+ /**
47	+ * @description custom css for front end
48	+ */
49	+ public function loader_custom_styles(){
50	+ $styles = get_option('loftloader-custom-styles', '');
51	+ echo empty($styles) ? '' : '<style type="text/css">' . $styles . '</style>';
52	+ }
53	+ /**
54	+ * @description loftloader html
55	+ */
56	+ public function show_loader_html(){
57	+ $loader = $this->loader_settings['settings']; // Preloader settings
58	+ $background = $loader['background']; // Preloader background settings
59	+ $animation = $loader['animation']; // Preloader animation settings
60	+ $html = '<div id="loftloader-wrapper" class="' . $animation['type'] . '">';
61	+ $html .= '<div class="loader-inner"><div id="loader">';
62	+ $html .= in_array($animation['type'], array('pl-frame', 'pl-imgloading'))
63	+ ? '<span></span><img srcset="' . $animation['image']['url'] . '" src="' . $animation['image']['url'] . '" alt="preloder">' : '<span></span>';
64	+ $html .= '</div></div>';
65	+ switch($background['effect']){
66	+ case 'fade':
67	+ $html .= '<div class="loader-section section-fade"></div>';
68	+ break;
69	+ case 'slide-up':
70	+ $html .= '<div class="loader-section section-slide-up"></div>';
71	+ break;
72	+ case 'slide-up-down':
73	+ $html .= '<div class="loader-section section-up"></div>';
74	+ $html .= '<div class="loader-section section-down"></div>';
75	+ break;
76	+ default:
77	+ $html .= '<div class="loader-section section-left">';
78	+ $html .= '</div><div class="loader-section section-right"></div>';
79	+ }
80	+ $html .= '</div>';
81	+ echo $html;
82	+ }
83	+ }
84	+ new LoftLoader_Front();
85	+ }

img/loftloader-logo.png ADDED Viewed

Binary file

js/front/loftloader.js ADDED Viewed

	@@ -0,0 +1,5 @@


1	+ (function($){
2	+ if($('#loftloader-wrapper').length){
3	+ $(window).load(function(){ $('body').addClass('loaded'); });
4	+ }
5	+ })(jQuery);

js/settings/loftloader-settings.js ADDED Viewed

	@@ -0,0 +1,216 @@


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	+ // Custom image/logo width for 'pl-imgloading'
125	+ $('.preloader-custom-image-width input').change(function(e){
126	+ if($('#preloader-animation').val() == 'pl-imgloading'){
127	+ var $loader = $('#loader'),
128	+ width = $(this).val() ? parseInt($(this).val()) : false,
129	+ min = $(this).attr('min') ? parseInt($(this).attr('min')) : 0,
130	+ max = $(this).attr('max') ? parseInt($(this).attr('max')) : 400;
131	+ ((min <= width) && (width <= max)) ? $loader.css('width', width) : $loader.css('width', '');
132	+ }
133	+ });
134	+ // Select Animation
135	+ $('#preloader-animation').on('change', function() {
136	+ var customImage = $('<img>').attr('src', customImageSrc);
137	+ var selectedAnimation = $(this).val();
138	+ $('.preview-wrapper #loftloader-wrapper').removeAttr('class').addClass(selectedAnimation);
139	+ switch(selectedAnimation){
140	+ case 'pl-frame':
141	+ $('#loader span').css({'background-image': '', 'background-size': ''});
142	+ !$('#loader img').length ? $('#loader span').after(customImage) : $('#loader img').attr('src', customImageSrc);
143	+ break;
144	+ case 'pl-imgloading':
145	+ var backgroundImg = 'url('+ customImageSrc +')';
146	+ $('#loader span').css('background-image' , backgroundImg);
147	+ !$('#loader img').length ? $('#loader span').after(customImage) : $('#loader img').attr('src', customImageSrc);
148	+ $('#loader span').css('background-size', 'cover');
149	+ $('.preloader-custom-image-width input').trigger('change');
150	+ break;
151	+ default:
152	+ if($('#loader img').length){
153	+ $('#loader img').remove();
154	+ $('#loader span').css({'background-image': '', 'background-size': ''});
155	+ }
156	+ break;
157	+
158	+ }
159	+ })
160	+ .on('change', function(e){
161	+ var selectedVal = $(this).val(), $width = $('.preloader-custom-image-width input');
162	+ $('li.preloader_animation').addClass('hide');
163	+ $('li.preloader_animation-' + selectedVal).removeClass('hide');
164	+ (selectedVal == 'pl-imgloading') ? $width.attr('required', '') : $width.removeAttr('required');
165	+ (selectedVal == 'pl-imgloading') ? '' : $('#loader').css('width', '');
166	+ }).trigger('change');
167	+
168	+ var firstElement = $('.preview-frame #loftloader-wrapper').find('.loader-section').first();
169	+ var secondElement = $('.preview-frame #loftloader-wrapper').find('.loader-section').last();
170	+ $('#preloader-background-style').on('change', function(e){
171	+ switch($(this).find('option:selected').val()){
172	+ case 'fade':
173	+ secondElement.addClass('hide');
174	+ firstElement.removeAttr('class').addClass('loader-section section-fade');
175	+ break;
176	+ case 'slide-left-right':
177	+ firstElement.removeAttr('class').addClass('loader-section section-left');
178	+ secondElement.removeAttr('class').addClass('loader-section section-right');
179	+ break;
180	+ case 'slide-up':
181	+ firstElement.removeAttr('class').addClass('loader-section section-slide-up');
182	+ secondElement.addClass('hide');
183	+ break;
184	+ case 'slide-up-down':
185	+ firstElement.removeAttr('class').addClass('loader-section section-up');
186	+ secondElement.removeAttr('class').addClass('loader-section section-down');
187	+ break;
188	+ }
189	+ }).trigger('change');
190	+
191	+ function loftloader_generate_css_animation(color){
192	+ var currentStyle = $('#preloader-animation').val();
193	+ var currentColor = color;
194	+ var newStyle = '';
195	+
196	+ newStyle += '#loftloader-wrapper.pl-sun #loader span, #loftloader-wrapper.pl-sun #loader span:before {background-color: ' + currentColor + ';}';
197	+ newStyle += '#loftloader-wrapper.pl-circles #loader span, #loftloader-wrapper.pl-circles #loader:before, #loftloader-wrapper.pl-circles #loader:after {background: ' + currentColor + ';}';
198	+ newStyle += '#loftloader-wrapper.pl-wave #loader span, #loftloader-wrapper.pl-wave #loader:before, #loftloader-wrapper.pl-wave #loader:after {background: ' + currentColor + ';}';
199	+ newStyle += '#loftloader-wrapper.pl-square #loader span {border: 4px solid ' + currentColor + ';}';
200	+ 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 + ';}';
201	+
202	+ if($('body').find('#preview-animation-color').length > 0){
203	+ $('body').find('#preview-animation-color').html(newStyle);
204	+ }
205	+ else{
206	+ $('<style>' + newStyle + '</style>').attr('id', 'preview-animation-color').appendTo($('body'));
207	+ }
208	+ }
209	+ function loftloader_generate_css_background(color){
210	+ firstElement.css('background-color', color);
211	+ secondElement.css('background-color', color);
212	+ }
213	+ loftloader_generate_css_animation($('#preloader-animation-color').val());
214	+ loftloader_generate_css_background($('#preloader-background-color').val());
215	+ });
216	+ })(jQuery);

languages/loftloader.pot ADDED Viewed

	@@ -0,0 +1,155 @@


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 ""

loftloader.php ADDED Viewed

	@@ -0,0 +1,92 @@


1	+ <?php
2	+ /*
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.0
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	+ */
14	+
15	+
16	+ /**
17	+ * LoftLoader main file
18	+ *
19	+ * @package LoftLoader
20	+ * @version 1.0
21	+ * @link http://www.loftocean.com/
22	+ * @author Suihai Huang from Loft Ocean Team
23	+ */
24	+
25	+ // Not allowed by directly accessing.
26	+ if(!defined('ABSPATH')){
27	+ die('Access not allowed!');
28	+ }
29	+
30	+ if(!class_exists('LoftLoader')){
31	+ register_activation_hook(__FILE__, 'loftloader_activate'); //
32	+ register_deactivation_hook(__FILE__, 'loftloader_deactivate');
33	+ /*
34	+ * Update the plugin version for initial version
35	+ */
36	+ function loftloader_activate(){
37	+ update_option('loftloader_plugin_version', '1.0.0');
38	+ }
39	+ /**
40	+ * Do nothing for initial version
41	+ */
42	+ function loftloader_deactivate(){ }
43	+ /**
44	+ * Define the constant used in this plugin
45	+ */
46	+ define('LOFTLOADER_ROOT', dirname(__FILE__) . '/');
47	+ define('LOFTLOADER_NAME', plugin_basename( __FILE__ ));
48	+ define('LOFTLOADER_URI', plugin_dir_url( __FILE__ ));
49	+ define('LOFTLOADER_JS_URI', LOFTLOADER_URI . 'js/');
50	+ define('LOFTLOADER_CSS_URI', LOFTLOADER_URI . 'css/');
51	+
52	+ /**
53	+ * Main plugin class
54	+ * @since version 1.0.0
55	+ */
56	+ class LoftLoader{
57	+ public function __construct(){
58	+ load_plugin_textdomain('loftloader', false, dirname(plugin_basename(__FILE__)) . '/languages/'); // Load the text domain
59	+ $this->load_configs();
60	+ add_action('init', array($this, 'load_settings')); // Load the plugin settings
61	+ add_action('wp', array($this, 'load_front')); // Load the front main class
62	+ add_action('wp_enqueue_scripts', array($this, 'enqueue_loader_styles'));
63	+ add_action('admin_enqueue_scripts', array($this, 'enqueue_loader_styles'));
64	+ }
65	+ /**
66	+ * @description load configuration files
67	+ */
68	+ public function load_configs(){
69	+ require_once LOFTLOADER_ROOT . 'configs/loftloader-config.php';
70	+ }
71	+ /**
72	+ * @description load plugin settings main class
73	+ */
74	+ public function load_settings(){
75	+ is_admin() ? require_once LOFTLOADER_ROOT . 'settings/class-loftloader-settings.php' : '';
76	+ }
77	+ /**
78	+ * @description load plugin front main class
79	+ */
80	+ public function load_front(){
81	+ !is_admin() ? require_once LOFTLOADER_ROOT . 'front/class-loftloader-front.php' : '';
82	+ }
83	+ /**
84	+ * @description register the loader style css for both plugin setting page and front end
85	+ */
86	+ public function enqueue_loader_styles(){
87	+ wp_register_style('loftloader-animation', LOFTLOADER_CSS_URI . 'loftloader-animation.css', array(), '1.0');
88	+ }
89	+ }
90	+ new LoftLoader(); // Enable LoftLoader
91	+ }
92	+ ?>

readme.txt ADDED Viewed

	@@ -0,0 +1,60 @@


1	+ === LoftLoader ===
2	+ 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.4.2
7	+ Stable tag: 1.0.1
8	+ License: GPLv2 or later
9	+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10	+
11	+ An easy to use plugin to add an animated preloader to your website with fully customisations.
12	+
13	+ == Description ==
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	+ == Installation ==
32	+
33	+ 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).
34	+ 2. Activate the LoftLoader plugin through the 'Plugins' menu in WordPress.
35	+ 3. In the WordPress administration screen, go to Settings > LoftLoader, check the settings there.
36	+
37	+ == Frequently Asked Questions ==
38	+
39	+ = No changes on activation/deactivation =
40	+ - If you have installed any caching plugins then clear the cache.
41	+
42	+ == Screenshots ==
43	+
44	+ 1. LoftLoader settings page
45	+ 2. LoftLoader background settings
46	+ 3. LoftLoader animation settings
47	+ 4. LoftLoader live preview
48	+
49	+ == Changelog ==
50	+
51	+ = 1.0.0 =
52	+ * Initial Public Release
53	+
54	+ = 1.0.1 =
55	+ * Add support for site homepage only
56	+
57	+ == Upgrade Notice ==
58	+
59	+ = 1.0.0 =
60	+ * Initial Public Release

settings/class-loftloader-settings.php ADDED Viewed

	@@ -0,0 +1,158 @@


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	+ * @version 1.0
12	+ * @link http://www.loftocean.com/
13	+ * @author Suihai Huang from Loft Ocean Team
14	+
15	+ * @since version 1.0
16	+ */
17	+
18	+ if(!class_exists('LoftLoader_Settings')){
19	+ class LoftLoader_Settings{
20	+ private $page_id; // Plugin setting page id
21	+ private $setting_manager; // Settings section to render/save settings
22	+ public function __construct(){
23	+ $this->page_id = 'loftloader-settings';
24	+ $this->setting_manager = new LoftLoader_Setting_Manager();
25	+
26	+ add_filter('plugin_action_links_' . LOFTLOADER_NAME, array($this, 'plugin_action_links'));
27	+ add_action('admin_enqueue_scripts', array($this, 'enqueue_scripts'));
28	+ add_action('print_media_templates', array($this, 'media_styles')); // Print media styles for media uploader
29	+ add_action('admin_menu', array($this, 'add_settings_menu')); // Add plugin option menu item
30	+ add_action('admin_init', array($this, 'register_settings')); // Register setting fields
31	+ add_action('admin_notices', array($this, 'reset_update'));
32	+ add_action('wp_ajax_loftloader_reset_settings', array($this, 'reset_settings')); // Reset the plugin option settings
33	+ }
34	+ /**
35	+ * @description add a plugin action link to plugin setting page
36	+ */
37	+ public function plugin_action_links($links){
38	+ $action_links = array(
39	+ 'settings' => '<a href="' . admin_url('options-general.php?page=' . $this->page_id) . '" title="' . esc_attr__('View LoftLoader Settings', 'loftloader') . '">' . esc_html__('Settings', 'loftloader') . '</a>'
40	+ );
41	+ return array_merge($action_links, $links);
42	+ }
43	+ /**
44	+ * @description enqueue the style when show media uploader template
45	+ */
46	+ public function media_styles(){
47	+ wp_enqueue_style('loftloader-media-style', LOFTLOADER_CSS_URI . 'settings/loftloader-media.css');
48	+ }
49	+ /**
50	+ * @description register and enqueu scripty and styles
51	+ */
52	+ public function enqueue_scripts(){
53	+ if(isset($_GET['page']) && ($_GET['page'] == $this->page_id)){
54	+ $js_vars = array(
55	+ 'img_base' => (LOFTLOADER_URI . 'img/'),
56	+ 'fail_text' => esc_html__('Sorry, but the request failed. Please try again later.', 'loftloader'),
57	+ 'confirm_text' => esc_html__('Are you sure want to reset all settings?', 'loftloader'),
58	+ 'ajax' => array(
59	+ 'url' => admin_url('admin-ajax.php'),
60	+ 'action' => 'loftloader_reset_settings',
61	+ 'nonce' => wp_create_nonce('loftloader-reset-settings')
62	+ )
63	+ );
64	+ // Register the scripts and styles
65	+ wp_register_script('loftloader-setting', LOFTLOADER_JS_URI . 'settings/loftloader-settings.js', array('jquery', 'wp-color-picker', 'jquery-ui-slider'), '1.0');
66	+ wp_localize_script('loftloader-setting', 'loftloader_vars', $js_vars);
67	+
68	+ wp_register_style('loftloader-jqueryui', LOFTLOADER_CSS_URI . 'jquery-ui.css', array(), '1.0');
69	+ wp_register_style('loftloader-settings', LOFTLOADER_CSS_URI . 'settings/loftloader-settings.css', array('wp-color-picker', 'loftloader-jqueryui'), '1.0');
70	+
71	+ // Enqueue the scripts and styles
72	+ wp_enqueue_media();
73	+ wp_enqueue_script('loftloader-setting');
74	+ wp_enqueue_style('loftloader-settings');
75	+ wp_enqueue_style('loftloader-animation');
76	+ }
77	+ }
78	+ /**
79	+ * @description add plugin settings menu
80	+ */
81	+ public function add_settings_menu(){
82	+ add_options_page(
83	+ esc_html__('LoftLoader Settings', 'loftloader'), // Page title on html head
84	+ esc_html__('LoftLoader', 'loftloader'), // Menu item label
85	+ 'manage_options',
86	+ $this->page_id,
87	+ array($this, 'render_settings_page')
88	+ ); // Register the plugin option subpage
89	+ }
90	+ /**
91	+ * @description register the settings for saving
92	+ */
93	+ public function register_settings(){
94	+ $this->setting_manager->register_setting();
95	+ }
96	+ /**
97	+ * @description get settings content
98	+ */
99	+ private function get_settings_content(){
100	+ ob_start();
101	+ $this->setting_manager->render_settings_section();
102	+ $content = ob_get_contents();
103	+ ob_end_clean();
104	+ return $content;
105	+ }
106	+ /**
107	+ * @description get settings page template
108	+ */
109	+ public function render_settings_page(){
110	+ $footer = '<div class="panel-footer">' . $this->get_buttons() . '</div>';
111	+ $content = $this->get_settings_content();
112	+ $action = admin_url('options.php');
113	+ $html = <<<ETO
114	+ <div class="wrap">
115	+ <div id="loftloader-options-panel" class="loftloader-options-panel">
116	+ <form method="post" action="$action">
117	+ <div class="panel-content">
118	+ $content
119	+ </div>
120	+ <!-- panel-content -->
121	+ $footer
122	+ </form>
123	+ </div>
124	+ </div>
125	+ ETO;
126	+ echo $html;
127	+ }
128	+ /**
129	+ * @description get save button
130	+ * @return save button html
131	+ */
132	+ private function get_buttons(){
133	+ $btns = '<p class="submit"><input type="submit" name="submit" id="submit" class="submit button button-primary" value="' . esc_attr__('Save Changes', 'loftloader') . '"></p>';
134	+ $btns .= '<p class="reset"><input type="submit" class="button button-primary reset" value="' . esc_attr__('Reset All Settings', 'loftloader') . '"></p>';
135	+ return $btns;
136	+ }
137	+ /**
138	+ * @description reset loftloader settings
139	+ */
140	+ public function reset_settings(){
141	+ check_ajax_referer('loftloader-reset-settings', 'nonce');
142	+ $this->setting_manager->reset_settings();
143	+ update_option('loftloader_settings_reset', 'done');
144	+ wp_send_json_success();
145	+ wp_die();
146	+ }
147	+ /**
148	+ * @description show reset confirm message
149	+ */
150	+ public function reset_update(){
151	+ if(get_option('loftloader_settings_reset', '') == 'done'){
152	+ add_settings_error('loftloader-options', esc_attr('loftloader_settings_reset_notice'), esc_html__('LoftLoader settings have been reset.', 'loftloader'), 'updated');
153	+ delete_option('loftloader_settings_reset');
154	+ }
155	+ }
156	+ }
157	+ new LoftLoader_Settings();
158	+ }

settings/form/class-loftloader-checkbox.php ADDED Viewed

	@@ -0,0 +1,42 @@


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	+ * @version 1.0
12	+ * @link http://www.loftocean.com/
13	+ * @author Suihai Huang from Loft Ocean Team
14	+
15	+ * @since version 1.0
16	+ */
17	+
18	+ if(!class_exists('LoftLoader_Checkbox')){
19	+ class LoftLoader_Checkbox extends LoftLoader_Form_Base{
20	+ /**
21	+ * @description rewrite the content function
22	+ */
23	+ protected function content(){
24	+ $html = '';
25	+ if($this->options){
26	+ $value = $this->values;
27	+ $class = '';
28	+ $id = '';
29	+ if(count($this->options) == 1){
30	+ $class = (isset($this->extra['class']) && $this->extra['class'])? ' class="' . $this->extra['class'] . '"' : '';
31	+ $id = (isset($this->extra['id']) && $this->extra['id']) ? ' id="'. $this->extra['id'] . '"' : '';
32	+ }
33	+ foreach($this->options as $val=>$attr){
34	+ $checked = checked($value, $val, false);
35	+ $disabled = (isset($attr['disabled']) && $attr['disabled']) ? ' disabled' : '';
36	+ $html .= '<label><input' . $id . $class . ' type="checkbox" name="' . $this->name . '" value="' . $val . '"' . $checked . $disabled . '>' . $attr['label'] . '<div class="on-off"><span></span></div></label>';
37	+ }
38	+ }
39	+ return $html;
40	+ }
41	+ }
42	+ }

settings/form/class-loftloader-form-base.php ADDED Viewed

	@@ -0,0 +1,107 @@


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	+ * @version 1.0
12	+ * @link http://www.loftocean.com/
13	+ * @author Suihai Huang from Loft Ocean Team
14	+
15	+ * @since version 1.0
16	+ */
17	+
18	+ if(!class_exists('LoftLoader_Form_Base')){
19	+ abstract class LoftLoader_Form_Base{
20	+ protected $name; // Form element name
21	+ protected $title; // Field title
22	+ protected $description; // Field description
23	+ protected $extra; // Extra arguments, may include the class infos
24	+ protected $options; // Option for some type of form element, radio/select/check
25	+ protected $values; // Form element value
26	+ public function __construct($name, $title, $description, $options, $values, $extra = array()){
27	+ $this->name = $name;
28	+ $this->title = $title;
29	+ $this->extra = $extra;
30	+ $this->values = $values;
31	+ $this->options = $options;
32	+ $this->description = $description;
33	+ }
34	+ /**
35	+ * @description show the html of each form element
36	+ */
37	+ public function render(){
38	+ if($this->options){
39	+ $replace = array('[[TITLE]]' => $this->title, '[[DESCRIPTION]]' => $this->description(), '[[INFO]]' => $this->field_info(), '[[LINKS]]' => $this->links(), '[[CONTENT]]' => $this->content());
40	+ echo strtr($this->template(), $replace);
41	+ }
42	+ }
43	+ /**
44	+ * @description form element HTML template
45	+ */
46	+ protected function template(){
47	+ $class = (isset($this->extra['wrapperClass']) && $this->extra['wrapperClass'])? ' ' . $this->extra['wrapperClass'] : '';
48	+ $html = <<<ETO
49	+ <div class="list-title">
50	+ <h4>[[TITLE]]</h4>
51	+ [[DESCRIPTION]][[INFO]][[LINKS]]
52	+ </div>
53	+ <div class="list-content$class">
54	+ <fieldset><legend class="screen-reader-text"><span>[[TITLE]]</span></legend>[[CONTENT]]</fieldset>
55	+ </div>
56	+ ETO;
57	+ return $html;
58	+ }
59	+ /**
60	+ * @description get field content
61	+ */
62	+ protected function content(){
63	+ $html = '';
64	+ if($this->options){
65	+ foreach($this->options as $val=>$text){
66	+ $checked = ($default_value[$this->name] == $val)?' checked':'';
67	+ $html .= '<label><input type="checkbox" name="' . $this->name . '" value="' . $val . '"' . $checked . '>' . $text['label'] . '</label>';
68	+ }
69	+ }
70	+ return $html;
71	+ }
72	+ /**
73	+ * @description get field info if any, normally this should be the tips
74	+ */
75	+ protected function field_info(){
76	+ $html = '';
77	+ if(isset($this->extra['info'])){
78	+ $html .= '<p><i class="fa fa-info-circle"></i> ' . $this->extra['info'] . '</p>';
79	+ }
80	+ return $html;
81	+ }
82	+ /**
83	+ * @description field description if any
84	+ */
85	+ protected function description(){
86	+ $html = '';
87	+ if(isset($this->description) && !empty($this->description)){
88	+ $html .= '<span class="description">' . $this->description . '</span>';
89	+ }
90	+ return $html;
91	+ }
92	+ /**
93	+ * @description fields links if any
94	+ */
95	+ protected function links(){
96	+ $html = '';
97	+ if(isset($this->extra['links']) && is_array($this->extra['links'])){
98	+ $html .= '<ul>';
99	+ foreach($this->extra['links'] as $text=>$link){
100	+ $html .= '<li><a href="' . $link . '">' . $text . '</a></li>';
101	+ }
102	+ $html .= '</ul>';
103	+ }
104	+ return $html;
105	+ }
106	+ }
107	+ }

settings/form/class-loftloader-preview.php ADDED Viewed

	@@ -0,0 +1,211 @@


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	+ * @version 1.0
12	+ * @link http://www.loftocean.com/
13	+ * @author Suihai Huang from Loft Ocean Team
14	+
15	+ * @since version 1.0
16	+ */
17	+
18	+ if(!class_exists('LoftLoader_Preloader_Preview')){
19	+ class LoftLoader_Preloader_Preview extends LoftLoader_Form_Base{
20	+ private $preview; // Section preview
21	+ private $setting; // Section setting
22	+ public function __construct($name, $title, $description, $options, $values, $extra = array()){
23	+ parent::__construct($name, $title, $description, $options, $values, $extra);
24	+ // Assign the setting for each section
25	+ foreach($options as $section){
26	+ switch($section['section']){
27	+ case 'preview':
28	+ $this->preview = $section;
29	+ break;
30	+ case 'setting':
31	+ $this->setting = $section;
32	+ break;
33	+ }
34	+ }
35	+ }
36	+ /**
37	+ * @description rewrite the render function
38	+ */
39	+ public function render(){
40	+ if(!empty($this->preview) && !empty($this->setting)){
41	+ $replace = array(
42	+ '[[PREVIEW-TITLE]]' => $this->preview_title(),
43	+ '[[PREVIEW-DESCRIPTION]]' => $this->preview_description(),
44	+ '[[PREVIEW-CONTENT]]' => $this->preview_content(),
45	+ '[[SETTING-CONTENT]]' => $this->setting_content()
46	+ );
47	+ echo strtr($this->template(), $replace);
48	+ }
49	+ }
50	+ /**
51	+ * @description rewrite the html template function
52	+ */
53	+ protected function template(){
54	+ $html = <<<ETO
55	+ <div class="preview-section">
56	+ <div class="preview-wrapper"><h3>[[PREVIEW-TITLE]]</h3>[[PREVIEW-DESCRIPTION]][[PREVIEW-CONTENT]]</div>
57	+ <div class="preview-settings">[[SETTING-CONTENT]]</div>
58	+ </div>
59	+ ETO;
60	+ return $html;
61	+ }
62	+ /**
63	+ * @description add new function to get the preview title
64	+ */
65	+ protected function preview_title(){
66	+ return $this->get_property($this->preview, 'title');
67	+ }
68	+ /**
69	+ * @description add new function to get the preview description
70	+ */
71	+ protected function preview_description(){
72	+ $description = $this->get_property($this->preview, 'description');
73	+ if($description){
74	+ return '<span class="description">' . $description . '</span>';
75	+ }
76	+ }
77	+ /**
78	+ * @description add new function to get the preview content
79	+ */
80	+ protected function preview_content(){
81	+ $html = '<div class="preview-frame">';
82	+ $html .= '<div id="loftloader-wrapper">';
83	+ $html .= '<div class="loader-inner"><div id="loader"><span></span></div></div>';
84	+ $html .= '<div class="loader-section section-up"></div>';
85	+ $html .= '<div class="loader-section section-down"></div>';
86	+ $html .= '</div>';
87	+ $html .= '</div>';
88	+ return $html;
89	+ }
90	+ /**
91	+ * @description add new function to get the settings content
92	+ */
93	+ protected function setting_content(){
94	+ $html = '';
95	+ if(!empty($this->setting)){
96	+ foreach((array)$this->setting['content'] as $item){
97	+ $returnHTML = $this->setting_section_html($item['content']);
98	+ if(!empty($returnHTML)){
99	+ $html .= '<div class="setting-group">';
100	+ $html .= '<h3>' . $item['title'] . '</h3>';
101	+ $html .= '<ul>' . $returnHTML . '</ul>';
102	+ $html .= '</div>';
103	+ }
104	+ }
105	+ }
106	+ return $html;
107	+ }
108	+ /**
109	+ * @description add new function to get the settings elements html
110	+ */
111	+ protected function setting_section_html($section){
112	+ $html = '';
113	+ $values = $this->values;
114	+ foreach((array)$section as $element){
115	+ $elementHTML = '';
116	+ if(strpos($element['name'], '[') !== false){
117	+ $subs = (strpos($element['name'], '[') !== false) ? strtr($element['name'], array(']' => '', '[' => '][')) : $element['name'];
118	+ $name = $this->name . '[' . $subs . ']'; // Name of the element
119	+ $value = $values;
120	+ foreach(explode('][', $subs) as $sub){
121	+ $value = $value[$sub];
122	+ }
123	+ }
124	+ else{
125	+ $name = $this->name . '[' . $element['name'] . ']'; // Element name
126	+ $value = $values[$element['name']]; // Element value
127	+ }
128	+ $value = is_array($value) ? $value : trim($value);
129	+ switch($element['type']){
130	+ case 'number':
131	+ $elementHTML .= '<input type=number name="' . $name . '" value="' . $value . '" min=1 max=400 title="Number between 1-400"> px';
132	+ break;
133	+ case 'select':
134	+ if(is_array($element['options']) && (count($element['options']) > 0)){
135	+ $class = (isset($element['extra']) && isset($element['extra']['class']) && $element['extra']['class']) ? ' class="' . $element['extra']['class'] . '"' : '';
136	+ $id = (isset($element['extra']) && isset($element['extra']['id']) && $element['extra']['id']) ? ' id="' . $element['extra']['id'] . '"' : '';
137	+ $elementHTML = '<select name="' . $name . '"'. $class . $id .'>';
138	+ foreach((array)$element['options'] as $val => $attr){
139	+ $selected = selected($value, $val, false);
140	+ $elementHTML .= '<option value="' . $val . '"' . $selected . '>' . $attr['label'] . '</option>';
141	+ }
142	+ $elementHTML .= '</select>';
143	+ }
144	+ break;
145	+ case 'color-picker':
146	+ $id = (isset($element['extra']) && isset($element['extra']['id']) && $element['extra']['id']) ? ' id="' . $element['extra']['id'] . '"' : '';
147	+ $value = !empty($value) ? $value : $element['options']['defaultValue'];
148	+ $value = !empty($value) ? $value : '#222222';
149	+ $elementHTML = '<input' . $id . ' class="loader-color-picker" type="text" name="' . $name . '" value="' . $value . '" data-default-color="' . $value . '" />';
150	+ break;
151	+ case 'media':
152	+ $val = array_filter($value);
153	+ if(!empty($val)){
154	+ $elementHTML = '<div class="bg-img-holder"><img src="' . $value['url'] . '"></div>';
155	+ $elementHTML .= '<a class="button loader-set-image hide">' . esc_html__('Upload Image', 'loftloader') . '</a>';
156	+ $elementHTML .= '<span class="bg-img-remove">' . esc_html__('Remove Image', 'loftloader') . '</span>';
157	+ $elementHTML .= '<input class="admin-image-id" type="hidden" value="' . ($value['id'] ? $value['id']: '') . '" name="' . $name . '[id]">';
158	+ $elementHTML .= '<input class="admin-image-url preloader-preview-image" type="hidden" value="' . ($value['url'] ? $value['url'] : '') . '" name="' . $name . '[url]">';
159	+ }
160	+ else{
161	+ $elementHTML = '<a class="button loader-set-image">' . esc_html__('Upload Image', 'loftloader') . '</a>';
162	+ $elementHTML .= '<span class="bg-img-remove hide">' . esc_html__('Remove Image', 'loftloader') . '</span>';
163	+ $elementHTML .= '<input class="admin-image-id" type="hidden" name="' . $name . '[id]">';
164	+ $elementHTML .= '<input class="admin-image-url preloader-preview-image" type="hidden" name="' . $name . '[url]">';
165	+ }
166	+ break;
167	+ case 'slider':
168	+ $class = (isset($element['extra']) && isset($element['extra']['class']) && $element['extra']['class']) ? ' ' . $element['extra']['class'] : '';
169	+ $value = !empty($value) ? $value : $element['options']['default'];
170	+ $value = !empty($value) ? $value : '100';
171	+ $min = (isset($element['options']) && isset($element['options']['min']) && $element['options']['min']) ? $element['options']['min'] : 0;
172	+ $max = (isset($element['options']) && isset($element['options']['max']) && $element['options']['max']) ? $element['options']['max'] : 100;
173	+ $step = (isset($element['options']) && isset($element['options']['step']) && $element['options']['step']) ? $element['options']['step'] : 5;
174	+ $elementHTML .= '<label class="amount opacity">';
175	+ $elementHTML .= '<input name="' . $name . '" type="text" class="opacity-amount" readonly value="' . $value . '">';
176	+ $elementHTML .= '</label>';
177	+ $elementHTML .= '<div class="ui-slider loader-ui-slider' . $class . '" data-default="' . intval($value) . '" data-min="' . $min . '" data-max="' . $max . '" data-step="' . $step . '"></div>';
178	+ $elementHTML .= '</fieldset>';
179	+ break;
180	+ }
181	+ $wrapperClass = (isset($element['extra']) && isset($element['extra']['wrapperClass']) && $element['extra']['wrapperClass']) ? $element['extra']['wrapperClass'] : '';
182	+ $template = $this->element_template($wrapperClass);
183	+ $replace = array('[[TITLE]]' => $element['title'], '[[CONTENT]]' => $elementHTML);
184	+ $html .= strtr($template, $replace);
185	+ }
186	+ return !empty($html) ? $html : false;
187	+ }
188	+ /**
189	+ * @description the element template
190	+ */
191	+ private function element_template($class){
192	+ $class = !empty($class) ? ' class="' . $class . '"' : '';
193	+ $html = <<<ETO
194	+ <li$class>
195	+ <h4>[[TITLE]]</h4>
196	+ <fieldset><legend class="screen-reader-text"><span>[[TITLE]]</span></legend>[[CONTENT]]</fieldset>
197	+ </li>
198	+ ETO;
199	+ return $html;
200	+ }
201	+ /**
202	+ * @description helper function to get the element from array provided
203	+ */
204	+ private function get_property($var, $index){
205	+ if(isset($var[$index])){
206	+ return $var[$index];
207	+ }
208	+ return false;
209	+ }
210	+ }
211	+ }