PluginProbe
Chartify – WordPress Chart Plugin / 3.5.4
Chartify – WordPress Chart Plugin v3.5.4
3.8.0 3.7.9 3.7.8 3.7.7 3.7.6 3.7.5 trunk 1.0.0 3.0.0 3.0.1 3.0.2 3.0.3 3.0.4 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 All 83 releases
chart-builder / public / class-chart-builder-public.php

class-chart-builder-public.php in Chartify – WordPress Chart Plugin 3.5.4, at public/class-chart-builder-public.php

439 lines 18.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 /**
4 * The public-facing functionality of the plugin.
5 *
6 * @link https://ays-pro.com/
7 * @since 1.0.0
8 *
9 * @package Chart_Builder
10 * @subpackage Chart_Builder/public
11 */
12
13 /**
14 * The public-facing functionality of the plugin.
15 *
16 * Defines the plugin name, version, and two examples hooks for how to
17 * enqueue the public-facing stylesheet and JavaScript.
18 *
19 * @package Chart_Builder
20 * @subpackage Chart_Builder/public
21 * @author Chart Builder Team <info@ays-pro.com>
22 */
23 class Chart_Builder_Public {
24
25 /**
26 * The ID of this plugin.
27 *
28 * @since 1.0.0
29 * @access private
30 * @var string $plugin_name The ID of this plugin.
31 */
32 private $plugin_name;
33
34 /**
35 * The version of this plugin.
36 *
37 * @since 1.0.0
38 * @access private
39 * @var string $version The current version of this plugin.
40 */
41 private $version;
42
43 /**
44 * @var string
45 */
46 private $html_class_prefix = 'ays-chart-';
47
48 /**
49 * @var string
50 */
51 private $html_name_prefix = 'ays_chart_';
52
53 /**
54 * @var string
55 */
56 private $name_prefix = 'chart_';
57
58 /**
59 * @var
60 */
61 private $unique_id;
62
63 /**
64 * @var Chart_Builder_DB_Actions
65 */
66 private $db_object;
67
68 /**
69 * @var array
70 */
71 private $data;
72
73
74 /**
75 * Initialize the class and set its properties.
76 *
77 * @since 1.0.0
78 * @param string $plugin_name The name of the plugin.
79 * @param string $version The version of this plugin.
80 */
81 public function __construct( $plugin_name, $version ) {
82
83 $this->plugin_name = $plugin_name;
84 $this->version = $version;
85 $this->db_object = new Chart_Builder_DB_Actions( $this->plugin_name );
86
87 add_shortcode( 'ays_chart', array( $this, 'ays_generate_chart_method' ) );
88 }
89
90 /**
91 * Register the stylesheets for the public-facing side of the site.
92 *
93 * @since 1.0.0
94 */
95 public function enqueue_styles() {
96
97 /**
98 * This function is provided for demonstration purposes only.
99 *
100 * An instance of this class should be passed to the run() function
101 * defined in Chart_Builder_Loader as all of the hooks are defined
102 * in that particular class.
103 *
104 * The Chart_Builder_Loader will then create the relationship
105 * between the defined hooks and the functions defined in this
106 * class.
107 */
108
109 wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/chart-builder-public.css', array(), $this->version, 'all' );
110
111 }
112
113 /**
114 * Register the JavaScript for the public-facing side of the site.
115 *
116 * @since 1.0.0
117 */
118 public function enqueue_scripts($type) {
119
120 /**
121 * This function is provided for demonstration purposes only.
122 *
123 * An instance of this class should be passed to the run() function
124 * defined in Chart_Builder_Loader as all of the hooks are defined
125 * in that particular class.
126 *
127 * The Chart_Builder_Loader will then create the relationship
128 * between the defined hooks and the functions defined in this
129 * class.
130 */
131
132 $is_elementor_exists = Chart_Builder_DB_Actions::ays_chart_is_elementor();
133 if( !$is_elementor_exists ) {
134 if ($type === 'chart-js') {
135 wp_enqueue_script( $this->plugin_name . '-chart-js', plugin_dir_url(__FILE__) . 'js/chart-js.js', array('jquery'), $this->version, true);
136 wp_enqueue_script( $this->plugin_name . '-plugin-chartjs', plugin_dir_url( __FILE__ ) . 'js/chart-builder-public-chartjs.js', array( 'jquery' ), $this->version, false );
137 } else {
138 wp_enqueue_script( $this->plugin_name . '-charts-google', plugin_dir_url(__FILE__) . 'js/google-chart.js', array('jquery'), $this->version, true);
139 wp_enqueue_script( $this->plugin_name . '-plugin-google', plugin_dir_url( __FILE__ ) . 'js/chart-builder-public-google.js', array( 'jquery' ), $this->version, false );
140 }
141 wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/chart-builder-public.js', array( 'jquery' ), $this->version, false );
142 }
143
144 $this->get_encoded_options($type);
145 }
146
147 public function ays_generate_chart_method( $attr ) {
148 $id = (isset($attr['id'])) ? absint(intval($attr['id'])) : null;
149
150 if (is_null($id)) {
151 return "<p class='wrong_shortcode_text' style='color:red;'>" . __( 'Wrong shortcode initialized', "chart-builder" ) . "</p>";
152 }
153
154 $is_elementor = Chart_Builder_DB_Actions::ays_chart_is_elementor();
155 if ($is_elementor) {
156 return "<div style='width:100%;padding:6px 8px;font-size:13px;border:1px solid #757575;border-radius:2px;background-color:#f0f0f1;color:#2c3338;'>
157 [ays_chart id=".$id."]
158 </div>
159 <p style='margin:4px 0 0 3px;font-size:12px;font-style:italic;'>
160 " . __( 'Note: The chart will be visible on the front end of your website.', "chart-builder" ) . "
161 </p>";
162 }
163
164 $chartData = CBActions()->get_chart_data( $id );
165
166 if ( is_null( $chartData ) ) {
167 return "<p class='wrong_shortcode_text' style='color:red;'>" . __('Wrong shortcode initialized', "chart-builder") . "</p>";
168 }
169
170 $this->enqueue_styles();
171 $content = $this->show_chart( $id, $chartData, $attr );
172 $this->enqueue_scripts($chartData['chart']['type']);
173
174 return str_replace( array( "\r\n", "\n", "\r" ), '', $content );
175 }
176
177 public function show_chart( $id, $chartData, $attr ) {
178 $chart = $chartData['chart'];
179 $settings = $chartData['settings'];
180
181 $unique_id = uniqid();
182 $this->unique_id = $unique_id;
183
184 $data = array();
185
186 if ( is_null( $chart ) ) {
187 return "<p class='wrong_shortcode_text' style='color:red;'>" . __('Wrong shortcode initialized', "chart-builder") . "</p>";
188 }
189
190 $source_type = $chartData['source_type'];
191 $chart_source_type = $chartData['chart']['type'];
192 $user_id = get_current_user_id();
193
194 if ($source_type == 'quiz_maker' && $user_id == 0 && $chart['quiz_query'] != 'q1') {
195 return "<p class='ays_chart_not_logged_text'>" . __('You are not logged in. Please log in to view this chart.', 'chart-builder') . "</p>";
196 }
197
198 $status = isset( $chart['status'] ) && $chart['status'] != '' ? $chart['status'] : '';
199
200 if ( $status != 'published' ) {
201 return "";
202 }
203
204 if ($chart_source_type === "chart-js") {
205 $settings = CBFunctions()->get_chart_settings_chartjs_public($settings);
206 } else {
207 $settings = CBFunctions()->get_chart_settings_google_public($settings, $chartData['source']);
208 }
209
210 $data['chart_type'] = $chartData['source_chart_type'];
211 $data['source'] = $chartData['source'];
212
213
214 $data['options'] = $settings;
215
216 if ($chart_source_type === "chart-js") {
217 $content = $this->chartJsContent($chart, $settings, $chartData, $id);
218 } else {
219 $content = $this->googleChartsContent($chart, $settings, $chartData, $id);
220 }
221
222 $this->data = $data;
223
224 return implode( '', $content );
225 }
226
227 public function get_encoded_options ($chart_source_type) {
228 $data = $this->data;
229 $encoded_data = base64_encode(json_encode($data));
230 $handle = $chart_source_type === 'chart-js' ? $this->plugin_name . '-chart-js' : $this->plugin_name . '-charts-google';
231
232 wp_localize_script($handle, 'aysChartOptions'.$this->unique_id, array('aysChartOptions' => $encoded_data));
233 }
234
235 public function googleChartsContent ($chart, $settings, $chartData, $id) {
236 $chart_title = (isset($chart['title']) && $chart['title'] != '') ? stripslashes ( sanitize_text_field( $chart['title'] ) ) : '';
237 $chart_description = (isset($chart['description']) && $chart['description'] != '') ? stripslashes ( sanitize_text_field( $chart['description'] ) ) : '';
238
239 $content = array();
240
241 $content[] = "<div class='" . $this->html_class_prefix . "container-google " . $this->html_class_prefix . "container-" . $id . "' id='" . $this->html_class_prefix . "container" . $this->unique_id . "' data-id='" . $this->unique_id . "'>";
242
243 $content[] = "<div class='" . $this->html_class_prefix . "header-container'>";
244
245 if ($settings['show_title'] == 'on') {
246 $content[] = "<div class='" . $this->html_class_prefix . "charts-title " . $this->html_class_prefix . "charts-title" . $this->unique_id . "'>";
247 $content[] = $chart_title;
248 $content[] = "</div>";
249 }
250
251 if ($settings['show_description'] == 'on') {
252 $content[] = "<div class='" . $this->html_class_prefix . "charts-description " . $this->html_class_prefix . "charts-description" . $this->unique_id . "'>";
253 $content[] = $chart_description;
254 $content[] = "</div>";
255 }
256
257 $content[] = "</div>";
258
259 $content[] = "<div class='" . $this->html_class_prefix . "charts-main-container " . $this->html_class_prefix . "charts-main-container" . $this->unique_id . "' id=" . $this->html_class_prefix . $chartData['source_chart_type'] . $this->unique_id . " data-type='". $chartData['source_chart_type'] ."'></div>";
260
261 $content[] = "<div class='" . $this->html_class_prefix . "actions-container'>";
262
263 $content[] = "<div class='" . $this->html_class_prefix . "export-buttons' data-id='". $id . "'>";
264 if (isset($settings['enable_img']) && $settings['enable_img'] == 'on'){
265 $content[] = "<button class='" . $this->html_class_prefix . "export-button-" . $this->unique_id . "' title='Download as a PNG' data-type='image' value='image'>Image</button>";
266
267 $content[] = "<div style='display:none'>";
268 $content[] = "<iframe src='' style='width:100%;height:600px;'></iframe>";
269 $content[] = "</div>";
270 }
271 $content[] = "</div>";
272
273 $content[] = "</div>";
274
275 $content[] = "</div>";
276
277 $custom_css = "
278 #" . $this->html_class_prefix . "container" . $this->unique_id . " {
279 border: " . $settings['border_width_with_title'] . "px " . $settings['border_style_with_title'] . " " . $settings['border_color_with_title'] . ";
280 border-radius: " . $settings['border_radius_with_title'] . "px;
281 padding: " . $settings['padding_outer'] . "px;
282 }
283
284 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "charts-main-container" . $this->unique_id . " {
285 width: " . $settings['chart_width'] . ";
286 height: " . $settings['chart_height'] . ";
287 " . $settings['position'] . ";
288 border-radius: " . $settings['border_radius'] . "px;
289 border: " . $settings['border_width'] . "px " . $settings['border_style'] . " " . $settings['border_color'] . ";
290 overflow: hidden;
291 box-shadow: " . ($settings['box_shadow'] === 'checked' ? '2px 2px 10px 2px '.$settings['box_shadow_color'] : '') . ";
292 }
293
294 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "charts-main-container" . $this->unique_id . "[data-type='org_chart'] {
295 overflow: auto;
296 }
297
298 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "charts-main-container" . $this->unique_id . "[data-type='org_chart'] table.google-visualization-orgchart-table tbody td {
299 padding: initial;
300 }
301
302 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container {
303 margin-bottom: " . $settings['title_gap'] . "px !important;
304 }
305
306 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container>." . $this->html_class_prefix . "charts-title" . $this->unique_id . " {
307 color: " . $settings['title_color'] . ";
308 font-size: " . $settings['title_font_size'] . "px;
309 font-weight: " . $settings['title_bold'] . ";
310 text-shadow: " . ($settings['title_text_shadow'] === 'checked' ? '2px 2px 5px '.$settings['title_shadow_color'] : '') . ";
311 font-style: " . $settings['title_italic'] . ";
312 text-align: " . $settings['title_position'] . ";
313 text-transform: " . $settings['title_text_transform'] . ";
314 text-decoration: " . $settings['title_text_decoration'] . ";
315 letter-spacing: " . $settings['title_letter_spacing'] . "px;
316 margin-bottom: " . $settings['title_gap_description'] . "px;
317 }
318
319 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container>." . $this->html_class_prefix . "charts-description" . $this->unique_id . " {
320 color: " . $settings['description_color'] . ";
321 font-size: " . $settings['description_font_size'] . "px;
322 font-weight: " . $settings['description_bold'] . ";
323 text-shadow: " . ($settings['description_text_shadow'] === 'checked' ? '2px 2px 5px '.$settings['description_shadow_color'] : '') . ";
324 font-style: " . $settings['description_italic'] . ";
325 text-align: " . $settings['description_position'] . ";
326 text-transform: " . $settings['description_text_transform'] . ";
327 text-decoration: " . $settings['description_text_decoration'] . ";
328 letter-spacing: " . $settings['description_letter_spacing'] . "px;
329 }
330
331 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "actions-container>div." . $this->html_class_prefix . "export-buttons .ays-chart-export-button-" . $this->unique_id . " {
332 color: " . $settings['description_color'] . "B3 !important;
333 font-size: " . $settings['description_font_size'] . "px !important;
334 }
335
336 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "actions-container>div." . $this->html_class_prefix . "export-buttons .ays-chart-export-button-" . $this->unique_id . ":hover {
337 color: " . $settings['description_color'] . " !important;
338 }
339 ";
340 wp_add_inline_style($this->plugin_name, $custom_css);
341
342 return $content;
343 }
344
345 public function add_custom_chart_styles() {
346 if (is_singular('ays-chart-builder')) {
347 echo '<style>
348 .entry-content .ays-chart-container-chartjs {
349 width: 80% !important;
350 margin:0 auto;
351 }
352 </style>';
353 }
354 }
355
356 public function chartJsContent($chart, $settings, $chartData, $id) {
357 $chart_title = (isset($chart['title']) && $chart['title'] != '') ? stripslashes ( sanitize_text_field( $chart['title'] ) ) : '';
358 $chart_description = (isset($chart['description']) && $chart['description'] != '') ? stripslashes ( sanitize_text_field( $chart['description'] ) ) : '';
359
360 $content = array();
361
362 $content[] = "<div class='" . $this->html_class_prefix . "container-chartjs " . $this->html_class_prefix . "container-" . $id . "' id='" . $this->html_class_prefix . "container" . $this->unique_id . "' data-id='" . $this->unique_id . "'>";
363
364 $content[] = "<div class='" . $this->html_class_prefix . "header-container'>";
365
366 if ($settings['show_title'] == 'on') {
367 $content[] = "<div class='" . $this->html_class_prefix . "charts-title " . $this->html_class_prefix . "charts-title" . $this->unique_id . "'>";
368 $content[] = $chart_title;
369 $content[] = "</div>";
370 }
371
372 if ($settings['show_description'] == 'on') {
373 $content[] = "<div class='" . $this->html_class_prefix . "charts-description " . $this->html_class_prefix . "charts-description" . $this->unique_id . "'>";
374 $content[] = $chart_description;
375 $content[] = "</div>";
376 }
377
378 $content[] = "</div>";
379
380 $content[] = "<div class='" . $this->html_class_prefix . "charts-main-container " . $this->html_class_prefix . "charts-main-container" . $this->unique_id . "' id=" . $this->html_class_prefix . $chartData['source_chart_type'] . "-" . $this->unique_id . " data-type='". $chartData['source_chart_type'] ."'>";
381 $content[] = "<canvas id='" . $this->html_class_prefix . $chartData['source_chart_type'] . "-" . $this->unique_id . "-canvas'>";
382 $content[] = "</div>";
383
384 $content[] = "</div>";
385
386 $custom_css = "
387 #" . $this->html_class_prefix . "container" . $this->unique_id . " {
388 border: " . esc_attr($settings['border_width_with_title']) . "px " . $settings['border_style_with_title'] . " " . $settings['border_color_with_title'] . ";
389 border-radius: " . $settings['border_radius_with_title'] . "px;
390 padding: " . $settings['padding_outer'] . "px;
391 }
392
393 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "charts-main-container" . $this->unique_id . " {
394 width: " . esc_attr($settings['width'] ?: '100') . esc_attr($settings['width_format'] ?: '%') . ";
395 height: " . esc_attr($settings['height']).esc_attr($settings['height_format']) . ";
396 border: " . esc_attr($settings['border_width']) . "px " . esc_attr($settings['border_style']) . " " . esc_attr($settings['border_color']) . ";
397 border-radius: " . esc_attr($settings['border_radius']) . "px;
398 box-shadow: " . ($settings['box_shadow'] === 'checked' ? '2px 2px 10px 2px '. $settings['box_shadow_color'] : '') . ";
399 background-color: " . esc_attr($settings['background_color_chart']) . ";
400 }
401 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "charts-main-container" . $this->unique_id . " canvas {
402 width: 100% !important;
403 height: 100% !important;
404 }
405 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container {
406 margin-bottom: " . esc_attr($settings['title_gap']) . "px !important;
407 }
408
409 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container>." . $this->html_class_prefix . "charts-title" . $this->unique_id . " {
410 color: " . esc_attr($settings['title_color']) . ";
411 font-size: " . esc_attr($settings['title_font_size']) . "px;
412 font-weight: " . esc_attr($settings['title_bold'] ). ";
413 text-shadow: " . ($settings['title_text_shadow'] === 'checked' ? '2px 2px 5px '.esc_attr($settings['title_shadow_color'] ): '') . ";
414 font-style: " . esc_attr($settings['title_italic']) . ";
415 text-align: " . esc_attr($settings['title_position'] ). ";
416 text-transform: " . esc_attr($settings['title_text_transform'] ). ";
417 text-decoration: " . esc_attr($settings['title_text_decoration']) . ";
418 letter-spacing: " . esc_attr($settings['title_letter_spacing'] ). "px;
419 margin-bottom: " . esc_attr($settings['title_gap_description']) . "px;
420 }
421
422 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container>." . $this->html_class_prefix . "charts-description" . $this->unique_id . " {
423 color: " . esc_attr($settings['description_color']) . ";
424 font-size: " . esc_attr($settings['description_font_size']) . "px;
425 font-weight: " . esc_attr($settings['description_bold']) . ";
426 text-shadow: " . ($settings['description_text_shadow'] === 'checked' ? '2px 2px 5px '. esc_attr($settings['description_shadow_color']) : '') . ";
427 font-style: " . esc_attr($settings['description_italic']) . ";
428 text-align: " . esc_attr($settings['description_position']) . ";
429 text-transform: " . esc_attr($settings['description_text_transform']) . ";
430 text-decoration: " . esc_attr($settings['description_text_decoration']) . ";
431 letter-spacing: " . esc_attr($settings['description_letter_spacing']) . "px;
432 }
433 ";
434 wp_add_inline_style($this->plugin_name, $custom_css);
435
436 return $content;
437 }
438 }
439