PluginProbe
Chartify – WordPress Chart Plugin / 3.8.1
Chartify – WordPress Chart Plugin v3.8.1
3.8.1 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 All 84 releases
chart-builder / public / class-chart-builder-public.php

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

450 lines 18.8 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 <[email protected]>
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, $chartData['source']);
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 $ordering = [];
214 if (isset($data['source']) && !empty($data['source'])) {
215 foreach($data['source'] as $key => $value) {
216 if ($key != 0) {
217 array_push($ordering, $key);
218 }
219 }
220 } else {
221 $ordering = [1, 2, 3, 4, 5];
222 }
223 $data['source_ordering'] = $ordering;
224
225 $data['options'] = $settings;
226
227 if ($chart_source_type === "chart-js") {
228 $content = $this->chartJsContent($chart, $settings, $chartData, $id);
229 } else {
230 $content = $this->googleChartsContent($chart, $settings, $chartData, $id);
231 }
232
233 $this->data = $data;
234
235 return implode( '', $content );
236 }
237
238 public function get_encoded_options ($chart_source_type) {
239 $data = $this->data;
240 $encoded_data = base64_encode(json_encode($data));
241 $handle = $chart_source_type === 'chart-js' ? $this->plugin_name . '-chart-js' : $this->plugin_name . '-charts-google';
242
243 wp_localize_script($handle, 'aysChartOptions'.$this->unique_id, array('aysChartOptions' => $encoded_data));
244 }
245
246 public function googleChartsContent ($chart, $settings, $chartData, $id) {
247 $chart_title = (isset($chart['title']) && $chart['title'] != '') ? stripslashes ( sanitize_text_field( $chart['title'] ) ) : '';
248 $chart_description = (isset($chart['description']) && $chart['description'] != '') ? stripslashes ( sanitize_text_field( $chart['description'] ) ) : '';
249
250 $content = array();
251
252 $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 . "'>";
253
254 $content[] = "<div class='" . $this->html_class_prefix . "header-container'>";
255
256 if ($settings['show_title'] == 'on') {
257 $content[] = "<div class='" . $this->html_class_prefix . "charts-title " . $this->html_class_prefix . "charts-title" . $this->unique_id . "'>";
258 $content[] = $chart_title;
259 $content[] = "</div>";
260 }
261
262 if ($settings['show_description'] == 'on') {
263 $content[] = "<div class='" . $this->html_class_prefix . "charts-description " . $this->html_class_prefix . "charts-description" . $this->unique_id . "'>";
264 $content[] = $chart_description;
265 $content[] = "</div>";
266 }
267
268 $content[] = "</div>";
269
270 $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>";
271
272 $content[] = "<div class='" . $this->html_class_prefix . "actions-container'>";
273
274 $content[] = "<div class='" . $this->html_class_prefix . "export-buttons' data-id='". $id . "'>";
275 if (isset($settings['enable_img']) && $settings['enable_img'] == 'on'){
276 $content[] = "<button class='" . $this->html_class_prefix . "export-button-" . $this->unique_id . "' title='Download as a PNG' data-type='image' value='image'>Image</button>";
277
278 $content[] = "<div style='display:none'>";
279 $content[] = "<iframe src='' style='width:100%;height:600px;'></iframe>";
280 $content[] = "</div>";
281 }
282 $content[] = "</div>";
283
284 $content[] = "</div>";
285
286 $content[] = "</div>";
287
288 $custom_css = "
289 #" . $this->html_class_prefix . "container" . $this->unique_id . " {
290 border: " . $settings['border_width_with_title'] . "px " . $settings['border_style_with_title'] . " " . $settings['border_color_with_title'] . ";
291 border-radius: " . $settings['border_radius_with_title'] . "px;
292 padding: " . $settings['padding_outer'] . "px;
293 }
294
295 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "charts-main-container" . $this->unique_id . " {
296 width: " . $settings['chart_width'] . ";
297 height: " . $settings['chart_height'] . ";
298 " . $settings['position'] . ";
299 border-radius: " . $settings['border_radius'] . "px;
300 border: " . $settings['border_width'] . "px " . $settings['border_style'] . " " . $settings['border_color'] . ";
301 overflow: hidden;
302 box-shadow: " . ($settings['box_shadow'] === 'checked' ? '2px 2px 10px 2px '.$settings['box_shadow_color'] : '') . ";
303 }
304
305 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "charts-main-container" . $this->unique_id . "[data-type='org_chart'] {
306 overflow: auto;
307 }
308
309 #" . $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 {
310 padding: initial;
311 }
312
313 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container {
314 margin-bottom: " . $settings['title_gap'] . "px !important;
315 }
316
317 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container>." . $this->html_class_prefix . "charts-title" . $this->unique_id . " {
318 color: " . $settings['title_color'] . ";
319 font-size: " . $settings['title_font_size'] . "px;
320 font-weight: " . $settings['title_bold'] . ";
321 text-shadow: " . ($settings['title_text_shadow'] === 'checked' ? '2px 2px 5px '.$settings['title_shadow_color'] : '') . ";
322 font-style: " . $settings['title_italic'] . ";
323 text-align: " . $settings['title_position'] . ";
324 text-transform: " . $settings['title_text_transform'] . ";
325 text-decoration: " . $settings['title_text_decoration'] . ";
326 letter-spacing: " . $settings['title_letter_spacing'] . "px;
327 margin-bottom: " . $settings['title_gap_description'] . "px;
328 }
329
330 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container>." . $this->html_class_prefix . "charts-description" . $this->unique_id . " {
331 color: " . $settings['description_color'] . ";
332 font-size: " . $settings['description_font_size'] . "px;
333 font-weight: " . $settings['description_bold'] . ";
334 text-shadow: " . ($settings['description_text_shadow'] === 'checked' ? '2px 2px 5px '.$settings['description_shadow_color'] : '') . ";
335 font-style: " . $settings['description_italic'] . ";
336 text-align: " . $settings['description_position'] . ";
337 text-transform: " . $settings['description_text_transform'] . ";
338 text-decoration: " . $settings['description_text_decoration'] . ";
339 letter-spacing: " . $settings['description_letter_spacing'] . "px;
340 }
341
342 #" . $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 . " {
343 color: " . $settings['description_color'] . "B3 !important;
344 font-size: " . $settings['description_font_size'] . "px !important;
345 }
346
347 #" . $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 {
348 color: " . $settings['description_color'] . " !important;
349 }
350 ";
351 wp_add_inline_style($this->plugin_name, $custom_css);
352
353 return $content;
354 }
355
356 public function add_custom_chart_styles() {
357 if (is_singular('ays-chart-builder')) {
358 echo '<style>
359 .entry-content .ays-chart-container-chartjs {
360 width: 80% !important;
361 margin:0 auto;
362 }
363 </style>';
364 }
365 }
366
367 public function chartJsContent($chart, $settings, $chartData, $id) {
368 $chart_title = (isset($chart['title']) && $chart['title'] != '') ? stripslashes ( sanitize_text_field( $chart['title'] ) ) : '';
369 $chart_description = (isset($chart['description']) && $chart['description'] != '') ? stripslashes ( sanitize_text_field( $chart['description'] ) ) : '';
370
371 $content = array();
372
373 $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 . "'>";
374
375 $content[] = "<div class='" . $this->html_class_prefix . "header-container'>";
376
377 if ($settings['show_title'] == 'on') {
378 $content[] = "<div class='" . $this->html_class_prefix . "charts-title " . $this->html_class_prefix . "charts-title" . $this->unique_id . "'>";
379 $content[] = $chart_title;
380 $content[] = "</div>";
381 }
382
383 if ($settings['show_description'] == 'on') {
384 $content[] = "<div class='" . $this->html_class_prefix . "charts-description " . $this->html_class_prefix . "charts-description" . $this->unique_id . "'>";
385 $content[] = $chart_description;
386 $content[] = "</div>";
387 }
388
389 $content[] = "</div>";
390
391 $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'] ."'>";
392 $content[] = "<canvas id='" . $this->html_class_prefix . $chartData['source_chart_type'] . "-" . $this->unique_id . "-canvas'>";
393 $content[] = "</div>";
394
395 $content[] = "</div>";
396
397 $custom_css = "
398 #" . $this->html_class_prefix . "container" . $this->unique_id . " {
399 border: " . esc_attr($settings['border_width_with_title']) . "px " . $settings['border_style_with_title'] . " " . $settings['border_color_with_title'] . ";
400 border-radius: " . $settings['border_radius_with_title'] . "px;
401 padding: " . $settings['padding_outer'] . "px;
402 }
403
404 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "charts-main-container" . $this->unique_id . " {
405 width: " . esc_attr($settings['width'] ?: '100') . esc_attr($settings['width_format'] ?: '%') . ";
406 height: " . esc_attr($settings['height']).esc_attr($settings['height_format']) . ";
407 border: " . esc_attr($settings['border_width']) . "px " . esc_attr($settings['border_style']) . " " . esc_attr($settings['border_color']) . ";
408 border-radius: " . esc_attr($settings['border_radius']) . "px;
409 box-shadow: " . ($settings['box_shadow'] === 'checked' ? '2px 2px 10px 2px '. $settings['box_shadow_color'] : '') . ";
410 background-color: " . esc_attr($settings['background_color_chart']) . ";
411 }
412 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "charts-main-container" . $this->unique_id . " canvas {
413 width: 100% !important;
414 height: 100% !important;
415 }
416 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container {
417 margin-bottom: " . esc_attr($settings['title_gap']) . "px !important;
418 }
419
420 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container>." . $this->html_class_prefix . "charts-title" . $this->unique_id . " {
421 color: " . esc_attr($settings['title_color']) . ";
422 font-size: " . esc_attr($settings['title_font_size']) . "px;
423 font-weight: " . esc_attr($settings['title_bold'] ). ";
424 text-shadow: " . ($settings['title_text_shadow'] === 'checked' ? '2px 2px 5px '.esc_attr($settings['title_shadow_color'] ): '') . ";
425 font-style: " . esc_attr($settings['title_italic']) . ";
426 text-align: " . esc_attr($settings['title_position'] ). ";
427 text-transform: " . esc_attr($settings['title_text_transform'] ). ";
428 text-decoration: " . esc_attr($settings['title_text_decoration']) . ";
429 letter-spacing: " . esc_attr($settings['title_letter_spacing'] ). "px;
430 margin-bottom: " . esc_attr($settings['title_gap_description']) . "px;
431 }
432
433 #" . $this->html_class_prefix . "container" . $this->unique_id . " div." . $this->html_class_prefix . "header-container>." . $this->html_class_prefix . "charts-description" . $this->unique_id . " {
434 color: " . esc_attr($settings['description_color']) . ";
435 font-size: " . esc_attr($settings['description_font_size']) . "px;
436 font-weight: " . esc_attr($settings['description_bold']) . ";
437 text-shadow: " . ($settings['description_text_shadow'] === 'checked' ? '2px 2px 5px '. esc_attr($settings['description_shadow_color']) : '') . ";
438 font-style: " . esc_attr($settings['description_italic']) . ";
439 text-align: " . esc_attr($settings['description_position']) . ";
440 text-transform: " . esc_attr($settings['description_text_transform']) . ";
441 text-decoration: " . esc_attr($settings['description_text_decoration']) . ";
442 letter-spacing: " . esc_attr($settings['description_letter_spacing']) . "px;
443 }
444 ";
445 wp_add_inline_style($this->plugin_name, $custom_css);
446
447 return $content;
448 }
449 }
450