diff --git a/classes/Visualizer/Module/Chart.php b/classes/Visualizer/Module/Chart.php index 662a2a0a..8e852188 100644 --- a/classes/Visualizer/Module/Chart.php +++ b/classes/Visualizer/Module/Chart.php @@ -252,11 +252,9 @@ public function renderChartPages() { // dispatch pages $this->_chart = $chart; switch ( filter_input( INPUT_GET, 'tab' ) ) { - case 'data': - $this->_handleDataPage(); - break; case 'settings': - $this->_handleSettingsPage(); + // changed by Ash/Upwork + $this->_handleDataAndSettingsPage(); break; case 'type': default: @@ -294,7 +292,8 @@ private function _handleTypesPage() { } // redirect to next tab - wp_redirect( add_query_arg( 'tab', 'data' ) ); + // changed by Ash/Upwork + wp_redirect( add_query_arg( 'tab', 'settings' ) ); return; } } @@ -411,6 +410,76 @@ private function _handleSettingsPage() { wp_iframe( array( $render, 'render') ); } + + // changed by Ash/Upwork + private function _handleDataAndSettingsPage(){ + if ( $_SERVER['REQUEST_METHOD'] == 'POST' && wp_verify_nonce( filter_input( INPUT_GET, 'nonce' ) ) ) { + if ( $this->_chart->post_status == 'auto-draft' ) { + $this->_chart->post_status = 'publish'; + wp_update_post( $this->_chart->to_array() ); + } + + update_post_meta( $this->_chart->ID, Visualizer_Plugin::CF_SETTINGS, $_POST ); + + $render = new Visualizer_Render_Page_Send(); + $render->text = sprintf( '[visualizer id="%d"]', $this->_chart->ID ); + + wp_iframe( array( $render, 'render') ); + return; + } + + $data = $this->_getChartArray(); + + $sidebar = ''; + $sidebar_class = 'Visualizer_Render_Sidebar_Type_' . ucfirst( $data['type'] ); + if ( class_exists( $sidebar_class, true ) ) { + $sidebar = new $sidebar_class( $data['settings'] ); + $sidebar->__series = $data['series']; + $sidebar->__data = $data['data']; + } + + unset( $data['settings']['width'], $data['settings']['height'] ); + + wp_enqueue_style( 'visualizer-frame' ); + wp_enqueue_style( 'wp-color-picker' ); + wp_enqueue_style( 'visualizer-frame' ); + + wp_enqueue_script( 'visualizer-preview' ); + wp_enqueue_script( 'visualizer-render' ); + wp_localize_script( 'visualizer-render', 'visualizer', array( + 'l10n' => array( + 'remotecsv_prompt' => esc_html__( 'Please, enter the URL of CSV file:', Visualizer_Plugin::NAME ), + 'invalid_source' => esc_html__( 'You have entered invalid URL. Please, insert proper URL.', Visualizer_Plugin::NAME ), + ), + 'charts' => array( + 'canvas' => $data, + ), + ) ); + + $render = new Visualizer_Render_Page_Data(); + $render->chart = $this->_chart; + $render->type = $data['type']; + + $render->sidebar = $sidebar; + if ( filter_input( INPUT_GET, 'library', FILTER_VALIDATE_BOOLEAN ) ) { + $render->button = filter_input( INPUT_GET, 'action' ) == Visualizer_Plugin::ACTION_EDIT_CHART + ? esc_html__( 'Save Chart', Visualizer_Plugin::NAME ) + : esc_html__( 'Create Chart', Visualizer_Plugin::NAME ); + } else { + $render->button = esc_attr__( 'Insert Chart', Visualizer_Plugin::NAME ); + } + + if( defined( 'Visualizer_Pro' ) ){ + global $Visualizer_Pro; + $Visualizer_Pro->_enqueueScriptsAndStyles($data); + } + + $this->_addAction( 'admin_head', 'renderFlattrScript' ); + + wp_iframe( array( $render, 'render') ); + } + // changed by Ash/Upwork + /** * Renders flattr script in the iframe * diff --git a/classes/Visualizer/Plugin.php b/classes/Visualizer/Plugin.php index 262c7a8f..2ba86346 100644 --- a/classes/Visualizer/Plugin.php +++ b/classes/Visualizer/Plugin.php @@ -30,7 +30,7 @@ class Visualizer_Plugin { const NAME = 'visualizer'; - const VERSION = '1.5'; + const VERSION = '1.5.2'; // custom post types const CPT_VISUALIZER = 'visualizer'; diff --git a/classes/Visualizer/Render/Page/Data.php b/classes/Visualizer/Render/Page/Data.php index e1939aa8..af0b490a 100644 --- a/classes/Visualizer/Render/Page/Data.php +++ b/classes/Visualizer/Render/Page/Data.php @@ -65,13 +65,11 @@ protected function _renderSidebarContent() { 'chart' => $this->chart->ID, ), admin_url( 'admin-ajax.php' ) ); - echo '
  • '; - echo '

    ', esc_html__( 'Upload CSV File', Visualizer_Plugin::NAME ), '

    '; - echo '
    '; + echo ''; + echo '
    '; echo ''; - echo '

    '; - esc_html_e( "Select and upload your data CSV file here. The first row of the CSV file should contain the column headings. The second one should contain series type (string, number, boolean, date, datetime, timeofday).", Visualizer_Plugin::NAME ); + esc_html_e( "Select and upload your data CSV file here. The first row of the CSV file should contain the column headings. The second one should contain series type (string, number, boolean, date, datetime, timeofday).", Visualizer_Plugin::NAME ); echo '

    '; echo '

    '; @@ -89,7 +87,7 @@ protected function _renderSidebarContent() { esc_attr_e( 'From Computer', Visualizer_Plugin::NAME ); echo '

    '; - echo '', esc_html__( 'From Web', Visualizer_Plugin::NAME ), ''; + echo '', esc_html__( 'From Web', Visualizer_Plugin::NAME ), ''; // Added by Ash/Upwork if( defined( 'Visualizer_Pro' ) ){ global $Visualizer_Pro; @@ -107,16 +105,27 @@ protected function _renderSidebarContent() { $Visualizer_Pro->_addEditorElements(); }else{ ?> - + + + '; // Added by Ash/Upwork echo '
    '; echo ''; - echo '
    • '; + + // changed by Ash/Upwork + echo '
    '; + echo '
    '; + echo $this->sidebar; + echo '
    '; + echo '
    '; + // changed by Ash/Upwork } /** @@ -127,12 +136,16 @@ protected function _renderSidebarContent() { * @access protected */ protected function _renderToolbar() { - echo ''; + // changed by Ash/Upwork + echo '
    '; + echo ''; esc_html_e( 'Back', Visualizer_Plugin::NAME ); echo ''; - echo ''; - esc_html_e( 'Next', Visualizer_Plugin::NAME ); - echo ''; + echo '
    '; + echo ''; + + + echo ''; } -} \ No newline at end of file +} diff --git a/css/frame.css b/css/frame.css index 2fa0d663..c2a5ed8e 100644 --- a/css/frame.css +++ b/css/frame.css @@ -58,7 +58,7 @@ .group.open { border-bottom: 1px solid #DFDFDF; - + } .group-title { @@ -157,11 +157,17 @@ div.group-content { div.group-content .group-description { padding: 0; - margin-bottom: 20px; font-weight: 300; font-family: "Montserrat",sans-serif; } +.initial-screen .group-description { + padding: 0; + font-weight: 300; + font-family: "Montserrat",sans-serif; + padding: 10px 20px 20px; +} + .section-title { display: block; font-weight: bold; @@ -258,10 +264,16 @@ div.group-content .group-description { margin-top: 40px; padding: 20px; border-top: 1px dashed #ddd; + text-align: center; +} + +.rate-the-plugin{ + width: 40% !important; + margin-top: -5px; } #rate-stars { - margin: 10px 0px 10px 55px; + margin: 15px auto; width: 100px; height: 20px; background-image: url('../images/star.png'); @@ -271,11 +283,8 @@ div.group-content .group-description { #rate-link { text-decoration: none; - display: block; - margin-top: 3px; - margin-left: 35px; font-family: "Montserrat",sans-serif; - font-weight: 300; + font-weight: 400; } #flattr { @@ -305,6 +314,12 @@ div.group-content .group-description { float: right; } +.toolbar-div{ + display: inline-block; + vertical-align: top; + width: 30%; +} + /******************************************************************************/ /******************************** TYPE PICKER ******************************/ /******************************************************************************/ @@ -432,16 +447,16 @@ div.group-content .group-description { } #remote-file { - margin-top: 10px; + float: right; clear: both; } .form-inline { - display: inline-block; - margin-bottom: 0; + margin: 0 auto; + display: table; vertical-align: middle; } - + .computer-btn{ color: #646464 !important; border: medium none rgb(100, 100, 100) !important; @@ -452,6 +467,7 @@ div.group-content .group-description { font-weight: 700; border: 1px solid #B0B0B0 !important; box-shadow: none !important; + text-shadow:none!important; } @@ -469,7 +485,7 @@ div.group-content .group-description { border: 1px solid #2f8cea !important; box-shadow: none !important; - + } .just-on-pro{ @@ -480,9 +496,9 @@ div.group-content .group-description { opacity: 0.8; margin-bottom: 10px; } - - - + + + .from-web{ margin-top: 0px; margin-bottom: 15px !important; @@ -549,6 +565,34 @@ div.group-content .group-description { margin-top: 2px !important; } + input#existing-chart { + left: 18px; + width: 110px; + position: relative; + } + + select#chart-id { + left: 44px; + position: relative; + width: 120px; + } + + button#editor-chart-button { + width: 260px; + margin: 0 auto; + display: block; + background-color: #2f8cea !important; + color: white !important; + border: 1px solid #2c80d6 !important; + box-shadow: none !important; + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3s ease; + text-shadow: none; + } + .preview-btn{ font-family: "Open Sans",sans-serif; font-weight: 700; @@ -601,4 +645,60 @@ div.group-content .group-description { -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; -} \ No newline at end of file +} + +.check-pro-btn { + height: 40px; + width: 245px; + display: block; + margin: 0 auto; +} + +.advanced-settings-btn, .return-settings-btn { + cursor: pointer; + display: block; + margin: 0 auto; + width: 260px; + line-height: 34px; + font-size: 17px; + width: 260px; + height: auto; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + margin-bottom: 20px; + margin-top:5px; +} + +.return-settings-btn { + margin: 10px auto; +} + +.hidden-setting { + display:none; +} + + + +/* ====== RESPONSIVE ====== */ + + +@media (max-width: 1366px) { + .group-title { + padding: 4px 20px; + font-weight: 400; + font-size: 14px; + } + .group-title::after { + top: 10px; + } + #rate-stars { + margin: 3px 0 10px 40%; + } + .rate-the-plugin { + margin-left: -8%; + } + + + +} diff --git a/images/from_chart.png b/images/from_chart.png new file mode 100644 index 00000000..6935a7a3 Binary files /dev/null and b/images/from_chart.png differ diff --git a/index.php b/index.php index 53a6b3f4..1fa5839e 100644 --- a/index.php +++ b/index.php @@ -3,7 +3,7 @@ Plugin Name: Visualizer: Charts and Graphs Plugin URI: https://themeisle.com/plugins/visualizer-charts-and-graphs/ Description: A simple, easy to use and quite powerful tool to create, manage and embed interactive charts into your WordPress posts and pages. The plugin uses Google Visualization API to render charts, which supports cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases. -Version: 1.5 +Version: 1.5.2 Author: Themeisle Author URI: http://themeisle.com License: GPL v2.0 or later diff --git a/js/frame.js b/js/frame.js index 73a08207..0e482d19 100644 --- a/js/frame.js +++ b/js/frame.js @@ -105,4 +105,20 @@ return $(this); } -})(jQuery); \ No newline at end of file +})(jQuery); + +//Hide / show settings in sidebar +(function($) { + $(document).ready(function() { + + $('.advanced-settings-btn').click(function(){ + $('.second-screen, .return-settings-btn').removeClass("hidden-setting"); + $('.initial-screen').addClass("hidden-setting"); + }); + + $('.return-settings-btn').click(function(){ + $('.second-screen, .return-settings-btn').addClass("hidden-setting"); + $('.initial-screen').removeClass("hidden-setting"); + }); + }); +})(jQuery); diff --git a/js/preview.js b/js/preview.js index 17fd037d..f0133116 100644 --- a/js/preview.js +++ b/js/preview.js @@ -2,6 +2,10 @@ var timeout; $(document).ready(function() { + $('#settings-button').click(function() { + $('#settings-form').submit(); + }); + function updateChart() { clearTimeout(timeout); timeout = setTimeout(function() { diff --git a/js/visualizer-pointer.js b/js/visualizer-pointer.js index a57c02d6..5a8ac25b 100644 --- a/js/visualizer-pointer.js +++ b/js/visualizer-pointer.js @@ -1,15 +1,17 @@ jQuery(document).ready( function($) { visualizer_pointer_open_pointer(0); function visualizer_pointer_open_pointer(i) { - pointer = visualizer.pointers[i]; - options = $.extend(pointer.options, { - close: function () { - $.post(ajaxurl, { - pointer: pointer.pointer_id, - action: 'dismiss-wp-pointer' - }); - } - }); - $(pointer.target).pointer(options).pointer('open'); + if(visualizer.pointers[i]) { + pointer = visualizer.pointers[i]; + options = $.extend(pointer.options, { + close: function () { + $.post(ajaxurl, { + pointer: pointer.pointer_id, + action: 'dismiss-wp-pointer' + }); + } + }); + $(pointer.target).pointer(options).pointer('open'); + } } }); \ No newline at end of file diff --git a/readme.txt b/readme.txt index 4ffc28bc..37fa3887 100644 --- a/readme.txt +++ b/readme.txt @@ -1,23 +1,33 @@ -=== Visualizer === -Contributors: madpixels, straightforward +=== WordPress Charts and Graphs === +Contributors: codeinwp,marius2012,marius_codeinwp,hardeepasrani,themeisle,Madalin_ThemeIsle Donate link: http://flattr.com/thing/2574985/WordPress-Visualizer Tags: chart, charts, charting, graph, graphs, graphing, visualisation, visualise data, visualization, visualize data, HTML5, canvas, pie chart, line chart, bar chart, column chart, gauge chart, area chart, scatter chart, candlestick chart, geo chart, google visualization api Requires at least: 3.5 -Tested up to: 3.9.1 -Stable tag: 1.4.2.3 +Tested up to: 4.4.1 +Stable tag: trunk License: GPL v2.0 or later License URI: http://www.opensource.org/licenses/gpl-license.php -A simple, easy to use and quite powerful tool to create, manage and embed interactive charts into your WordPress posts and pages. +A simple and quite powerful WordPress chart plugin to create, manage and embed interactive charts into your WordPress posts and pages. == Description == + +WordPress Visualizer plugin is a simple, easy to use and quite powerful tool to create, manage and embed interactive charts into your WordPress posts and pages. -WordPress Visualizer plugin is a simple, easy to use and quite powerful tool to create, manage and embed interactive charts into your WordPress posts and pages. +The plugin uses Google Visualization API to add charts, which support cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases. + +> **Time-saving features available in the Pro version:** +> +> * Import data from other charts +> * Easy edit the data using a live editor +> * Priority email support from the developer of the plugin +> * Support and updates for 1 year +> +> **[Learn more about Visualizer PRO](http://themeisle.com/plugins/visualizer-charts-and-graphs-pro-addon/)** -The plugin uses Google Visualization API to render charts, which support cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases. ### 9 Chart types ### -The plugin provides a variety of charts that are optimized to address your data visualization needs. It is line chart, area chart, bar chart, column chart, pie chart, geo chart, gauge chart, candlestick chart and scatter chart. These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no extra plugins are required. Adding these charts to your page can be done in a few simple steps. +This WordPress graph plugin provides a variety of charts that are optimized to address your WordPress data visualization needs. It is line chart, area chart, bar chart, column chart, pie chart, geo chart, gauge chart, candlestick chart and scatter chart. These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no extra plugins are required. Adding these charts to your page can be done in a few simple steps. ### Flexible and customizable ### Make the charts your own. Configure an extensive set of options to perfectly match the look and feel of your website. You can use Google Chart Tools with their default setting - all customization is optional and the basic setup is launch-ready. However, charts can be easily customizable in case your webpage adopts a style which is at odds with provided defaults. Every chart exposes a number of options that customize its look and feel. @@ -27,6 +37,8 @@ Charts are rendered using HTML5/SVG technology to provide cross-browser compatib *above descriptions were partially taken from Google Visualization API site* +The plugins works perfectly with the all free or premium WordPress themes + ### Knowledge Base ### 1. [How can I create a chart?](https://github.com/madpixelslabs/visualizer/wiki/How-can-I-create-a-chart%3F) @@ -58,6 +70,12 @@ Pay attention that to turn your shortcodes into graphs, your theme has to have ` == Changelog == += 1.5.2 = +* Added step2 and 3 into step 1 + += 1.5.1 = +* Fixed bug with from web button + = 1.5 = * Added support for live editor * Added support for importing data from other charts @@ -143,4 +161,4 @@ Pay attention that to turn your shortcodes into graphs, your theme has to have ` * The bug with CSV file uploading was fixed. = 1.0.0 = -* The first version of the plugin was implemented. \ No newline at end of file +* The first version of the plugin was implemented.