PluginProbe
Borderless – Addons and Templates for Elementor / 1.6.1
Borderless – Addons and Templates for Elementor v1.6.1
trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.7 1.0.8 1.0.9 1.1.0 1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 1.1.6 1.1.7 1.1.8 1.1.9 1.2.0 1.2.1 1.2.2 1.2.3 All 78 releases
← All changes | modules/wpbakery/elements/progress-bar.php +272 -240 1.2.0 → 1.6.1 View file →
@@ -1,240 +1,272 @@
1 -<?php
2 -if ( ! defined( 'ABSPATH' ) ) {
3 - die( '-1' );
4 -}
5 -
6 -/*-----------------------------------------------------------------------------------*/
7 -/* Progress Bar
8 -/*-----------------------------------------------------------------------------------*/
9 -
10 -class WPBakeryShortCode_borderless_wpbakery_progress_bar extends WPBakeryShortCode {
11 - protected function content( $atts, $content = null ) {
12 - extract( shortcode_atts( array(
13 - 'title' => '',
14 - 'percentage' => '',
15 - 'height' => '16px',
16 - 'corner' => 'progress-bar-rounded',
17 - 'colors' => '',
18 - 'title_color' => '',
19 - 'icon_color' => '',
20 - 'percentage_color' => '',
21 - 'bar_color' => '',
22 - 'track_color' => '',
23 - 'checkicon' => '',
24 - 'icon' => '',
25 - //Static
26 - 'el_id' => '',
27 - 'el_class' => '',
28 - 'css' => '',
29 - 'css_animation' => ''
30 - ), $atts ) );
31 - $output = '';
32 -
33 -
34 - // Retrieve data from the database.
35 - $options = get_option( 'borderless' );
36 -
37 -
38 - // Set default values
39 - $borderless_primary_color = isset( $options['primary_color'] ) ? $options['primary_color'] : '#3379fc'; //Primary Color
40 - $borderless_secondary_color = isset( $options['secondary_color'] ) ? $options['secondary_color'] : '#3379fc'; //Secondary Color
41 - $borderless_text_color = isset( $options['text_color'] ) ? $options['text_color'] : ''; //Text Color
42 - $borderless_accent_color = isset( $options['accent_color'] ) ? $options['accent_color'] : '#3379fc'; //Accent Color
43 -
44 -
45 - // Default Extra Class, CSS and CSS animation
46 - $css = isset( $atts['css'] ) ? $atts['css'] : '';
47 - $el_id = isset( $atts['el_id'] ) ? 'id="' . esc_attr( $el_id ) . '"' : '';
48 - $el_class = isset( $atts['el_class'] ) ? $atts['el_class'] : '';
49 - if ( '' !== $css_animation ) {
50 - wp_enqueue_script( 'waypoints' );
51 - $css_animation_style = ' wpb_animate_when_almost_visible wpb_' . $css_animation;
52 - }
53 - $class_to_filter = vc_shortcode_custom_css_class( $css, ' ' ) . $this->getExtraClass( $el_class ) . $this->getCSSAnimation( $css_animation );
54 - $css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, $class_to_filter, $this->settings['base'], $atts );
55 -
56 -
57 - // Start Custom Colors
58 - $title_color = $title_color ? 'style=color:'.$title_color.'' : 'style=color:'.$borderless_primary_color.'';
59 -
60 - $icon_color = $icon_color ? 'style=color:'.$icon_color.'' : 'style=color:'.$borderless_primary_color.'';
61 -
62 - $bar_color = $bar_color ? $bar_color : $borderless_primary_color;
63 -
64 - $track_color = $track_color ? $track_color : '#f9f9f9';
65 - // End Custom Colors
66 -
67 - $height = $height ? 'style="height:'.$height.';"' : '';
68 -
69 - if ($checkicon=="custom_icon") { $icon = '<i class="borderless-wpbakery-progress-bar-icon '.$icon.'" '.$icon_color.'></i>'; } else { $icon = ""; }
70 -
71 - // Start Output
72 -
73 - $output .= '<div '.$el_id.' class="borderless-wpbakery-progress-bar '.$css_class.'">';
74 - $output .= $icon;
75 - $output .= '<div class="borderless-wpbakery-progress-bar-inner">';
76 - $output .= '<span '.$title_color.' class="progress-bar-title">'.$title.'</span>';
77 - $output .= '<div class="borderless-wpbakery-progress-bar-params '.$corner.'" '.$height.' percentage="'.$percentage.'" bar_color="'.$bar_color.'" track_color="'.$track_color.'" percentage_color="'.$percentage_color.'"></div>';
78 - $output .= '</div></div>';
79 -
80 - return $output;
81 -
82 - // End Output
83 - }
84 -}
85 -
86 -return array(
87 - 'name' => __( 'Progress Bar', 'borderless' ),
88 - 'base' => 'borderless_wpbakery_progress_bar',
89 - 'icon' => plugins_url('../images/progress-bar.png', __FILE__),
90 - 'show_settings_on_create' => true,
91 - 'category' => __( 'Borderless', 'borderless' ),
92 - 'description' => __( 'Animated progress bar', 'borderless' ),
93 - 'params' => array(
94 -
95 - array(
96 - 'type' => 'textfield',
97 - 'heading' => __( 'Title', 'borderless' ),
98 - 'param_name' => 'title',
99 - 'description' => __( 'Enter the Progress Bar Field title here.', 'borderless' ),
100 - ),
101 -
102 - array(
103 - 'type' => 'textfield',
104 - 'heading' => __( 'Progress in %', 'borderless' ),
105 - 'param_name' => 'percentage',
106 - 'description' => __( 'Enter a number between 0 and 100', 'borderless' ),
107 - ),
108 -
109 - array(
110 - 'type' => 'textfield',
111 - 'heading' => __( 'Height', 'borderless' ),
112 - 'param_name' => 'height',
113 - 'description' => __( 'Enter a value for height. Ex: 16px.', 'borderless' ),
114 - ),
115 -
116 - array(
117 - 'type' => 'dropdown',
118 - 'heading' => __( 'Corner Style', 'borderless' ),
119 - 'description' => __( 'Select style.', 'borderless' ),
120 - 'param_name' => 'corner',
121 - 'value' => array(
122 - __( 'Rounded', 'borderless' ) => 'progress-bar-rounded',
123 - __( 'Square', 'borderless' ) => 'progress-bar-square',
124 - __( 'Round', 'borderless' ) => 'progress-bar-round',
125 - ),
126 - ),
127 -
128 - array(
129 - 'type' => 'dropdown',
130 - 'heading' => __( 'Colors', 'borderless' ),
131 - 'param_name' => 'colors',
132 - 'value' => array(
133 - __( 'Preset Color', 'borderless' ) => '',
134 - __( 'Custom Color', 'borderless' ) => 'custom',
135 - ),
136 - 'description' => __( 'Choose a color for your progress bar here.', 'borderless' ),
137 - ),
138 -
139 - array(
140 - 'type' => 'colorpicker',
141 - 'heading' => __( 'Title Color', 'borderless' ),
142 - 'param_name' => 'title_color',
143 - 'description' => __( 'Select custom color for the title.', 'borderless' ),
144 - 'dependency' => array(
145 - 'element' => 'colors',
146 - 'value' => array( 'custom' ),
147 - ),
148 - ),
149 -
150 - array(
151 - 'type' => 'colorpicker',
152 - 'heading' => __( 'Icon Color', 'borderless' ),
153 - 'param_name' => 'icon_color',
154 - 'description' => __( 'Select custom color for icon.', 'borderless' ),
155 - 'dependency' => array(
156 - 'element' => 'colors',
157 - 'value' => array( 'custom' ),
158 - ),
159 - ),
160 -
161 - array(
162 - 'type' => 'colorpicker',
163 - 'heading' => __( 'Percentage Color', 'borderless' ),
164 - 'param_name' => 'percentage_color',
165 - 'description' => __( 'Select custom color for the percentage.', 'borderless' ),
166 - 'dependency' => array(
167 - 'element' => 'colors',
168 - 'value' => array( 'custom' ),
169 - ),
170 - ),
171 -
172 - array(
173 - 'type' => 'colorpicker',
174 - 'heading' => __( 'Bar Color', 'borderless' ),
175 - 'param_name' => 'bar_color',
176 - 'description' => __( 'Select custom color for the bar.', 'borderless' ),
177 - 'dependency' => array(
178 - 'element' => 'colors',
179 - 'value' => array( 'custom' ),
180 - ),
181 - ),
182 -
183 - array(
184 - 'type' => 'colorpicker',
185 - 'heading' => __( 'Track Color', 'borderless' ),
186 - 'param_name' => 'track_color',
187 - 'description' => __( 'Select custom color for the track.', 'borderless' ),
188 - 'dependency' => array(
189 - 'element' => 'colors',
190 - 'value' => array( 'custom' ),
191 - ),
192 - ),
193 -
194 - array(
195 - 'type' => 'dropdown',
196 - 'heading' => __( 'Icon library', 'borderless' ),
197 - 'param_name' => 'checkicon',
198 - 'value' => array(
199 - __( 'No', 'borderless' ) => 'no_icon',
200 - __( 'Yes', 'borderless' ) => 'custom_icon',
201 - ),
202 - 'description' => __( 'Should an icon be displayed at the left side of the progress bar.', 'borderless' ),
203 - ),
204 -
205 - array(
206 - 'type' => 'iconmanager',
207 - 'heading' => __( 'Icon', 'borderless' ),
208 - 'param_name' => 'icon',
209 - 'description' => __( 'Select icon from library.', 'borderless' ),
210 - 'dependency' => array(
211 - 'element' => 'checkicon',
212 - 'value' => 'custom_icon'
213 - ),
214 - ),
215 -
216 - // Animation
217 - vc_map_add_css_animation(),
218 -
219 - array(
220 - 'type' => 'el_id',
221 - 'heading' => __( 'Element ID', 'borderless' ),
222 - 'param_name' => 'el_id',
223 - 'description' => sprintf( __( 'Enter element ID (Note: make sure it is unique and valid according to %sw3c specification%s).', 'borderless' ), '<a href="https://www.w3schools.com/tags/att_global_id.asp" target="_blank">', '</a>' ),
224 - ),
225 -
226 - array(
227 - 'type' => 'textfield',
228 - 'heading' => __( 'Extra class name', 'borderless' ),
229 - 'param_name' => 'el_class',
230 - 'description' => __( 'Style particular content element differently - add a class name and refer to it in custom CSS.', 'borderless' ),
231 - ),
232 -
233 - array(
234 - 'type' => 'css_editor',
235 - 'heading' => __( 'CSS box', 'borderless' ),
236 - 'param_name' => 'css',
237 - 'group' => __( 'Design Options', 'borderless' ),
238 - ),
239 - ),
240 -);
1 +<?php
2 +if ( ! defined( 'ABSPATH' ) ) {
3 + die( '-1' );
4 +}
5 +
6 +/*-----------------------------------------------------------------------------------*/
7 +/* Progress Bar
8 +/*-----------------------------------------------------------------------------------*/
9 +
10 +class WPBakeryShortCode_borderless_wpbakery_progress_bar extends WPBakeryShortCode {
11 + protected function content( $atts, $content = null ) {
12 + extract( shortcode_atts( array(
13 + 'title' => '',
14 + 'percentage' => '',
15 + 'height' => '16px',
16 + 'corner' => 'progress-bar-rounded',
17 + 'colors' => '',
18 + 'title_color' => '',
19 + 'icon_color' => '',
20 + 'percentage_color' => '',
21 + 'bar_color' => '',
22 + 'track_color' => '',
23 + 'checkicon' => '',
24 + 'icon' => '',
25 + //Static
26 + 'el_id' => '',
27 + 'el_class' => '',
28 + 'css' => '',
29 + 'css_animation' => ''
30 + ), $atts ) );
31 + $output = '';
32 +
33 + // Assets.
34 + wp_enqueue_style(
35 + 'borderless-wpbakery-style',
36 + BORDERLESS__STYLES . 'wpbakery.min.css',
37 + false,
38 + BORDERLESS__VERSION
39 + );
40 + wp_enqueue_script(
41 + 'borderless-wpbakery-appear-script',
42 + BORDERLESS__LIB . 'appear.js', array('jquery'),
43 + '1.0.0',
44 + true
45 + );
46 + wp_enqueue_script(
47 + 'borderless-wpbakery-progressbar-script',
48 + BORDERLESS__LIB . 'progressbar.js', array('jquery'),
49 + '1.1.0',
50 + true
51 + );
52 + wp_enqueue_script(
53 + 'borderless-wpbakery-script',
54 + BORDERLESS__SCRIPTS . 'borderless-wpbakery.min.js', array('jquery'),
55 + BORDERLESS__VERSION,
56 + true
57 + );
58 +
59 +
60 + // Retrieve data from the database.
61 + $options = get_option( 'borderless' );
62 +
63 +
64 + // Set default values
65 + $borderless_primary_color = isset( $options['primary_color'] ) ? $options['primary_color'] : '#3379fc'; //Primary Color
66 + $borderless_secondary_color = isset( $options['secondary_color'] ) ? $options['secondary_color'] : '#3379fc'; //Secondary Color
67 + $borderless_text_color = isset( $options['text_color'] ) ? $options['text_color'] : ''; //Text Color
68 + $borderless_accent_color = isset( $options['accent_color'] ) ? $options['accent_color'] : '#3379fc'; //Accent Color
69 +
70 +
71 + // Default Extra Class, CSS and CSS animation
72 + $css = isset( $atts['css'] ) ? $atts['css'] : '';
73 + $el_id = isset( $atts['el_id'] ) ? $atts['el_id'] : '';
74 + $el_id = ! empty( $el_id ) ? 'id="' . esc_attr( $el_id ) . '"' : '';
75 + $el_class = isset( $atts['el_class'] ) ? $atts['el_class'] : '';
76 + if ( '' !== $css_animation ) {
77 + wp_enqueue_script( 'waypoints' );
78 + $css_animation_style = ' wpb_animate_when_almost_visible wpb_' . esc_attr( $css_animation );
79 + }
80 + $class_to_filter = vc_shortcode_custom_css_class( $css, ' ' ) . $this->getExtraClass( $el_class ) . $this->getCSSAnimation( $css_animation );
81 + $css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, $class_to_filter, $this->settings['base'], $atts );
82 +
83 +
84 + // Start Custom Colors
85 + $title_color_style = $title_color ? 'color:' . esc_attr( $title_color ) . ';' : 'color:' . esc_attr( $borderless_primary_color ) . ';';
86 +
87 + $icon_color_style = $icon_color ? 'color:' . esc_attr( $icon_color ) . ';' : 'color:' . esc_attr( $borderless_primary_color ) . ';';
88 +
89 + $bar_color = $bar_color ? esc_attr( $bar_color ) : esc_attr( $borderless_primary_color );
90 +
91 + $track_color = $track_color ? esc_attr( $track_color ) : '#f9f9f9';
92 + // End Custom Colors
93 +
94 + $height_style = $height ? 'height:' . esc_attr( $height ) . ';' : '';
95 +
96 + if ( $checkicon == "custom_icon" ) {
97 + $icon = '<i class="borderless-wpbakery-progress-bar-icon ' . esc_attr( $icon ) . '" style="' . esc_attr( $icon_color_style ) . '"></i>';
98 + } else {
99 + $icon = "";
100 + }
101 +
102 + // Start Output
103 +
104 + $output .= '<div ' . $el_id . ' class="borderless-wpbakery-progress-bar ' . esc_attr( $css_class ) . '">';
105 + $output .= $icon;
106 + $output .= '<div class="borderless-wpbakery-progress-bar-inner">';
107 + $output .= '<span style="' . esc_attr( $title_color_style ) . '" class="progress-bar-title">' . esc_html( $title ) . '</span>';
108 + $output .= '<div class="borderless-wpbakery-progress-bar-params ' . esc_attr( $corner ) . '" style="' . esc_attr( $height_style ) . '" percentage="' . esc_attr( $percentage ) . '" bar_color="' . esc_attr( $bar_color ) . '" track_color="' . esc_attr( $track_color ) . '" percentage_color="' . esc_attr( $percentage_color ) . '"></div>';
109 + $output .= '</div></div>';
110 +
111 + return $output;
112 +
113 + // End Output
114 + }
115 +}
116 +
117 +
118 +return array(
119 + 'name' => __( 'Progress Bar', 'borderless' ),
120 + 'base' => 'borderless_wpbakery_progress_bar',
121 + 'icon' => plugins_url('../images/progress-bar.png', __FILE__),
122 + 'show_settings_on_create' => true,
123 + 'category' => __( 'Borderless', 'borderless' ),
124 + 'description' => __( 'Animated progress bar', 'borderless' ),
125 + 'params' => array(
126 +
127 + array(
128 + 'type' => 'textfield',
129 + 'heading' => __( 'Title', 'borderless' ),
130 + 'param_name' => 'title',
131 + 'description' => __( 'Enter the Progress Bar Field title here.', 'borderless' ),
132 + ),
133 +
134 + array(
135 + 'type' => 'textfield',
136 + 'heading' => __( 'Progress in %', 'borderless' ),
137 + 'param_name' => 'percentage',
138 + 'description' => __( 'Enter a number between 0 and 100', 'borderless' ),
139 + ),
140 +
141 + array(
142 + 'type' => 'textfield',
143 + 'heading' => __( 'Height', 'borderless' ),
144 + 'param_name' => 'height',
145 + 'description' => __( 'Enter a value for height. Ex: 16px.', 'borderless' ),
146 + ),
147 +
148 + array(
149 + 'type' => 'dropdown',
150 + 'heading' => __( 'Corner Style', 'borderless' ),
151 + 'description' => __( 'Select style.', 'borderless' ),
152 + 'param_name' => 'corner',
153 + 'value' => array(
154 + __( 'Rounded', 'borderless' ) => 'progress-bar-rounded',
155 + __( 'Square', 'borderless' ) => 'progress-bar-square',
156 + __( 'Round', 'borderless' ) => 'progress-bar-round',
157 + ),
158 + ),
159 +
160 + array(
161 + 'type' => 'dropdown',
162 + 'heading' => __( 'Colors', 'borderless' ),
163 + 'param_name' => 'colors',
164 + 'value' => array(
165 + __( 'Preset Color', 'borderless' ) => '',
166 + __( 'Custom Color', 'borderless' ) => 'custom',
167 + ),
168 + 'description' => __( 'Choose a color for your progress bar here.', 'borderless' ),
169 + ),
170 +
171 + array(
172 + 'type' => 'colorpicker',
173 + 'heading' => __( 'Title Color', 'borderless' ),
174 + 'param_name' => 'title_color',
175 + 'description' => __( 'Select custom color for the title.', 'borderless' ),
176 + 'dependency' => array(
177 + 'element' => 'colors',
178 + 'value' => array( 'custom' ),
179 + ),
180 + ),
181 +
182 + array(
183 + 'type' => 'colorpicker',
184 + 'heading' => __( 'Icon Color', 'borderless' ),
185 + 'param_name' => 'icon_color',
186 + 'description' => __( 'Select custom color for icon.', 'borderless' ),
187 + 'dependency' => array(
188 + 'element' => 'colors',
189 + 'value' => array( 'custom' ),
190 + ),
191 + ),
192 +
193 + array(
194 + 'type' => 'colorpicker',
195 + 'heading' => __( 'Percentage Color', 'borderless' ),
196 + 'param_name' => 'percentage_color',
197 + 'description' => __( 'Select custom color for the percentage.', 'borderless' ),
198 + 'dependency' => array(
199 + 'element' => 'colors',
200 + 'value' => array( 'custom' ),
201 + ),
202 + ),
203 +
204 + array(
205 + 'type' => 'colorpicker',
206 + 'heading' => __( 'Bar Color', 'borderless' ),
207 + 'param_name' => 'bar_color',
208 + 'description' => __( 'Select custom color for the bar.', 'borderless' ),
209 + 'dependency' => array(
210 + 'element' => 'colors',
211 + 'value' => array( 'custom' ),
212 + ),
213 + ),
214 +
215 + array(
216 + 'type' => 'colorpicker',
217 + 'heading' => __( 'Track Color', 'borderless' ),
218 + 'param_name' => 'track_color',
219 + 'description' => __( 'Select custom color for the track.', 'borderless' ),
220 + 'dependency' => array(
221 + 'element' => 'colors',
222 + 'value' => array( 'custom' ),
223 + ),
224 + ),
225 +
226 + array(
227 + 'type' => 'dropdown',
228 + 'heading' => __( 'Icon library', 'borderless' ),
229 + 'param_name' => 'checkicon',
230 + 'value' => array(
231 + __( 'No', 'borderless' ) => 'no_icon',
232 + __( 'Yes', 'borderless' ) => 'custom_icon',
233 + ),
234 + 'description' => __( 'Should an icon be displayed at the left side of the progress bar.', 'borderless' ),
235 + ),
236 +
237 + array(
238 + 'type' => 'iconmanager',
239 + 'heading' => __( 'Icon', 'borderless' ),
240 + 'param_name' => 'icon',
241 + 'description' => __( 'Select icon from library.', 'borderless' ),
242 + 'dependency' => array(
243 + 'element' => 'checkicon',
244 + 'value' => 'custom_icon'
245 + ),
246 + ),
247 +
248 + // Animation
249 + vc_map_add_css_animation(),
250 +
251 + array(
252 + 'type' => 'el_id',
253 + 'heading' => __( 'Element ID', 'borderless' ),
254 + 'param_name' => 'el_id',
255 + 'description' => sprintf( __( 'Enter element ID (Note: make sure it is unique and valid according to %sw3c specification%s).', 'borderless' ), '<a href="https://www.w3schools.com/tags/att_global_id.asp" target="_blank">', '</a>' ),
256 + ),
257 +
258 + array(
259 + 'type' => 'textfield',
260 + 'heading' => __( 'Extra class name', 'borderless' ),
261 + 'param_name' => 'el_class',
262 + 'description' => __( 'Style particular content element differently - add a class name and refer to it in custom CSS.', 'borderless' ),
263 + ),
264 +
265 + array(
266 + 'type' => 'css_editor',
267 + 'heading' => __( 'CSS box', 'borderless' ),
268 + 'param_name' => 'css',
269 + 'group' => __( 'Design Options', 'borderless' ),
270 + ),
271 + ),
272 +);