diff --git a/countup.php b/countup.php index ed2a804..7659e34 100644 --- a/countup.php +++ b/countup.php @@ -1,292 +1,295 @@ -
-
- - - -
-
- 'true', - 'use_grouping' => 'true', - 'use_separator' => ',', - 'use_decimal' => '.', - 'use_prefix' => '', - 'use_sufix' => '' - ); - - add_option('countupjs-option-page', $default_settings); - } - } - - //Uninstalled - function countup_uninstall(){ - delete_option('countupjs-option-page'); - } - - //Register Hooks - register_activation_hook(__FILE__, 'countup_activated'); - register_uninstall_hook(__FILE__, 'countup_uninstall'); - - /*----------------------------------- - * Setting Registration - *----------------------------------*/ - function countupjs_initialize_theme_options(){ - add_settings_section( - 'countupjs_settings_section', - 'CountUp.js Options', - 'countupjs_options_callback', - 'countupjs-option-page' - ); - - //Checkbox - add_settings_field( - 'use_easing', - 'Use Easing?', - 'countupjs_easing_callback', - 'countupjs-option-page', - 'countupjs_settings_section', - array( - 'Activate this setting to activate the easing.' - ) - ); - - //Checkbox - add_settings_field( - 'use_grouping', - 'Use Grouping?', - 'countupjs_grouping_callback', - 'countupjs-option-page', - 'countupjs_settings_section', - array( - 'Activate this setting to activate the grouping.' - ) - ); - - //Textfield - add_settings_field( - 'use_separator', - 'Separator', - 'countupjs_separator_callback', - 'countupjs-option-page', - 'countupjs_settings_section', - array( - "If you put a comma, returns: 1,300" - ) - ); - - //Textfield - add_settings_field( - 'use_decimal', - 'Decimal', - 'countupjs_decimal_callback', - 'countupjs-option-page', - 'countupjs_settings_section', - array( - "If you put a dot, returns: 1,300.00" - ) - ); - - //Textfield - add_settings_field( - 'use_prefix', - 'Prefix', - 'countupjs_prefix_callback', - 'countupjs-option-page', - 'countupjs_settings_section', - array( - "If you use a prefix, returns: prefix1200" - ) - ); - - //Textfield - add_settings_field( - 'use_sufix', - 'Sufix', - 'countupjs_sufix_callback', - 'countupjs-option-page', - 'countupjs_settings_section', - array( - "If you use a suffix, returns: 1200suffix" - ) - ); - - //Register the fields with WordPress - register_setting( - 'countupjs-option-page', - 'countupjs-option-page' - ); - } - add_action('admin_init', 'countupjs_initialize_theme_options'); - - /*----------------------------------- - * Section Callbacks - *----------------------------------*/ - function countupjs_options_callback(){ - echo '

This options are completely optional, so feel free to activate or deactivate the easing and grouping, and fill the textfields.

'; - } - - /*----------------------------------- - * Field Callbacks - *----------------------------------*/ - function countupjs_easing_callback($args){ - $options = get_option('countupjs-option-page'); - - if( !isset($options['use_easing']) ){ - $use_easing = "false"; - } else { - $use_easing = $options['use_easing']; - } - - $html = ''; - - $html .= ''; - - echo $html; - } - - function countupjs_grouping_callback($args){ - $options = get_option('countupjs-option-page'); - - if( !isset($options['use_grouping']) ){ - $use_grouping = "false"; - } else { - $use_grouping = $options['use_grouping']; - } - - $html = ''; - - $html .= ''; - - echo $html; - } - - function countupjs_separator_callback($args){ - $options = get_option('countupjs-option-page'); - - $html = ""; - - $html .= ''; - - echo $html; - } - - function countupjs_decimal_callback($args){ - $options = get_option('countupjs-option-page'); - - $html = ""; - - $html .= ''; - - echo $html; - } - - function countupjs_prefix_callback($args){ - $options = get_option('countupjs-option-page'); - - $html = ""; - - $html .= ''; - - echo $html; - } - - function countupjs_sufix_callback($args){ - $options = get_option('countupjs-option-page'); - - $html = ""; - - $html .= ''; - - echo $html; - } - - /*----------------------------------- - * CountUp.js Plugin - *----------------------------------*/ - function register_countupjs(){ - wp_enqueue_script('jquery'); - - wp_register_script('countupjs', plugins_url('js/countUp.js', __FILE__), array("jquery")); - - wp_enqueue_script('countupjs'); - - wp_register_script('countupjs_initializer', plugins_url('js/show_counter.js', __FILE__), array("jquery")); - } - - add_action('wp_enqueue_scripts', 'register_countupjs'); - - /*----------------------------------- - * Shortcode [countup arg1="" arg2="" ...] - *----------------------------------*/ - add_shortcode( "countup", "shows_count_up" ); - function shows_count_up($atts){ - //Get options saved from CountUp.js Options - $options = (array) get_option('countupjs-option-page'); - - $a = shortcode_atts(array( - 'start' => '0', - 'end' => '1000', - 'decimals' => '0', - 'duration' => '2', - 'easing' => ' ', - 'grouping' => ' ', - 'separator' => ' ', - 'decimal' => ' ', - 'prefix' => ' ', - 'suffix' => ' ' - ), $atts ); - - $settings = array( - "useEasing" => $options['use_easing'], - "useGrouping" => $options['use_grouping'], - "separator" => $options['use_separator'], - "decimal" => $options['use_decimal'], - "prefix" => $options['use_prefix'], - "suffix" => $options['use_sufix'] - ); - - //Pass shortcode settings to show_counter.js - wp_localize_script('countupjs_initializer', 'setting', $settings); - wp_enqueue_script('countupjs_initializer'); - - //This div contains the end of the counter, it is represented by a data-count. - $output = "
"; - - //Return Output. - return $output; - } -?> \ No newline at end of file +function countup_theme() { +?> +
+
+ +
+
+ 'true', + 'use_grouping' => 'true', + 'use_separator' => ',', + 'use_decimal' => '.', + 'use_prefix' => '', + 'use_sufix' => '', + ); + + add_option( 'countupjs-option-page', $default_settings ); + } +} + +//Uninstalled +function wp_cup_uninstall() { + delete_option( 'countupjs-option-page' ); +} + +//Register Hooks +register_activation_hook( __FILE__, 'wp_cup_activated' ); +register_uninstall_hook( __FILE__, 'wp_cup_uninstall' ); + +/*----------------------------------- +* Setting Registration +*----------------------------------*/ + function wp_cup_initialize_theme_options(){ + add_settings_section( + 'wp_cup_settings_section', + 'CountUp.js Options', + 'wp_cup_options_callback', + 'countupjs-option-page' + ); + + add_settings_field( + 'end_inside_shortcode', + 'Use the end number inside the shortcode?', + 'wp_cup_use_end_number_inside_shortcode', + 'countupjs-option-page', + 'wp_cup_settings_section', + array( 'If this option is checked, you should use the shortcode like this: [countup start="0" more options here]55[/countup]' ) + ); + + //Checkbox + add_settings_field( + 'use_easing', + 'Use Easing?', + 'wp_cup_easing_callback', + 'countupjs-option-page', + 'wp_cup_settings_section', + array( 'Activate this setting to activate the easing.' ) + ); + + //Checkbox + add_settings_field( + 'use_grouping', + 'Use Grouping?', + 'wp_cup_grouping_callback', + 'countupjs-option-page', + 'wp_cup_settings_section', + array( 'Activate this setting to activate the grouping.' ) + ); + + //Textfield + add_settings_field( + 'use_separator', + 'Separator', + 'wp_cup_separator_callback', + 'countupjs-option-page', + 'wp_cup_settings_section', + array( "If you put a comma, returns: 1,300" ) + ); + + //Textfield + add_settings_field( + 'use_decimal', + 'Decimal', + 'wp_cup_decimal_callback', + 'countupjs-option-page', + 'wp_cup_settings_section', + array( "If you put a dot, returns: 1,300.00" ) + ); + + //Textfield + add_settings_field( + 'use_prefix', + 'Prefix', + 'wp_cup_prefix_callback', + 'countupjs-option-page', + 'wp_cup_settings_section', + array( "If you use a prefix, returns: prefix1200" ) + ); + + //Textfield + add_settings_field( + 'use_sufix', + 'Sufix', + 'wp_cup_sufix_callback', + 'countupjs-option-page', + 'wp_cup_settings_section', + array( "If you use a suffix, returns: 1200suffix" ) + ); + + //Register the fields with WordPress + register_setting( 'countupjs-option-page', 'countupjs-option-page' ); +} + +add_action( 'admin_init', 'wp_cup_initialize_theme_options' ); + +/*----------------------------------- +* Section Callbacks +*----------------------------------*/ +function wp_cup_options_callback() { + echo '

This options are completely optional, so feel free to activate or deactivate the easing and grouping, and fill the textfields.

'; +} + +function wp_cup_get_values( $value, $default_value ) { + $options = get_option( 'countupjs-option-page' ); + $value = ! isset( $options[ $value ] ) ? $default_value : $options[ $value ]; + + return $value; +} + +/*----------------------------------- +* Field Callbacks +*----------------------------------*/ +function wp_cup_easing_callback( $args ) { + $value = wp_cup_get_values( 'use_easing', 'false' ); + $html = ''; + $html .= ''; + + echo $html; +} + +function wp_cup_grouping_callback( $args ) { + $value = wp_cup_get_values( 'use_grouping', 'false' ); + $html = ''; + $html .= ''; + + echo $html; +} + +function wp_cup_separator_callback( $args ) { + $value = wp_cup_get_values( 'use_separator', ',' ); + $html = ""; + $html .= ''; + + echo $html; +} + +function wp_cup_decimal_callback( $args ) { + $value = wp_cup_get_values( 'use_separator', ',' ); + $html = ""; + $html .= ''; + + echo $html; +} + +function wp_cup_prefix_callback( $args ) { + $value = wp_cup_get_values( 'use_prefix', 'abc' ); + $html = ""; + $html .= ''; + + echo $html; +} + +function wp_cup_sufix_callback( $args ) { + $value = wp_cup_get_values( 'use_sufix', 'def' ); + $html = ""; + $html .= ''; + + echo $html; +} + +function wp_cup_use_end_number_inside_shortcode( $args ) { + $value = wp_cup_get_values( 'end_inside_shortcode', 'false' ); + $html = ''; + $html .= ''; + + echo $html; +} + +/*----------------------------------- +* CountUp.js Plugin +*----------------------------------*/ +function wp_cup_register_scripts() { + $options = get_option( 'countupjs-option-page' ); + $settings = array( + 'useEasing' => isset( $options['use_easing'] ) ? true : false, + 'useGrouping' => isset( $options['use_grouping'] ) ? true : false, + 'separator' => $options['use_separator'], + 'decimal' => $options['use_decimal'], + 'prefix' => $options['use_prefix'], + 'suffix' => $options['use_sufix'], + ); + + wp_register_script( 'wp_cup_countup_js', plugins_url( 'js/countUp.js', __FILE__ ), array( 'jquery' ) ); + wp_enqueue_script( 'wp_cup_countup_js' ); + + wp_register_script( 'wp_cup_initializer', plugins_url( 'js/show_counter.js', __FILE__ ), array( 'jquery' ) ); + wp_enqueue_script( 'wp_cup_initializer' ); + + wp_localize_script( 'wp_cup_initializer', 'wp_cup_settings', array( + 'end_inside_shortcode' => isset( $options['end_inside_shortcode'] ) ? true : false, + 'settings' => $settings, + ) ); +} + +add_action( 'wp_enqueue_scripts', 'wp_cup_register_scripts' ); + +/*----------------------------------- +* Shortcode [countup arg1="" arg2="" ...] +*----------------------------------*/ +add_shortcode( 'countup', 'wp_cup_show_counter' ); + +function wp_cup_show_counter( $atts, $content = null ) { + //Get options saved from CountUp.js Options + $options = get_option( 'countupjs-option-page' ); + $args = array( + 'start' => '0', + 'end' => '1000', + 'decimals' => '0', + 'duration' => '2', + 'scroll' => 'true', + 'easing' => ' ', + 'grouping' => ' ', + 'separator' => ' ', + 'decimal' => ' ', + 'prefix' => ' ', + 'suffix' => ' ', + ); + $a = shortcode_atts( $args, $atts ); + + //This div contains the end of the counter, it is represented by a data-count. + if ( isset( $options['end_inside_shortcode'] ) ) { + $output = '
' . $content . '
'; + } else { + $output = '
'; + } + + //Return Output. + return $output; +} diff --git a/index.php b/index.php new file mode 100644 index 0000000..49d255d --- /dev/null +++ b/index.php @@ -0,0 +1 @@ + objectPositionTop && eventFired === false){ - numAnim.start(); - } - }); - }); -}); \ No newline at end of file +jQuery( document ).ready( function( $ ){ + var eventFired = false; + var options = {}; + var counterObjects = {}; + + function wpcjs_get_counter() { + //Loop to class counter which contains all data provided into the shortcode. + $.each( $( '.counter' ), function( index, value ) { + $( this ).attr( 'id', 'counter-' + index ); //Add an id to each counter. + + // If you want to put the end counter number dynamically, + // get it from an AJAX request or something, change the number + // inside of the counter id, in case of "Use the end number inside the shortcode?" + // option is checked and use the following shortcode structure + // [countup start="20"]55[/countup]: + // + // $('#counter-1').html('100'); + // + // or, you could use: + // $('#counter-1').data('count', 20); + // + // In case of, "Use the end number inside the shortcode?" is unchecked and use + // the following shortcode structure: [countup start="0" end="55"]. + // + // Be sure that the previous code run before the next code. + var count = wp_cup_settings.end_inside_shortcode ? $( this ).html() : $( this ).data( 'count' ); + var start = $( this ).data( 'start' ); + var decimals = $( this ).data( 'decimals' ); + var duration = $( this ).data( 'duration' ); + var onScroll = $( this ).data( 'scroll' ); + var easing = $( this ).data( 'easing' ); + var grouping = $( this ).data( 'grouping' ); + var separator = $( this ).data( 'separator' ); + var decimal = $( this ).data( 'decimal' ); + var prefix = $( this ).data( 'prefix' ); + var suffix = $( this ).data( 'suffix' ); + + //Options Variables + var options_in_shortcode = { + useEasing: easing, + useGrouping: grouping, + separator: separator, + decimal: decimal, + prefix: prefix, + suffix: suffix + }; + + //Loop to options_in_shortcode, this means if one option value inside of shortcode is empty, the default value is pull from the options page. + $.each( options_in_shortcode, function( key, value ){ + if( value == " " ){ + options[ key ] = wp_cup_settings.settings[ key ]; + } else { + options[ key ] = value; + } + }); + + //Get counter id. + var counterId = $( this ).attr( 'id' ); + + //Object Instance. + var numAnim = new CountUp( counterId, start, count, decimals, duration, options ); + + //Get the counter id position. + objectPositionTop = $( '#' + counterId ).offset().top - window.innerHeight; + + if( onScroll === false && eventFired === false ){ + numAnim.start(); + } else { + counterObjects[ 'counterObj' + index ] = { + 'counterId' : '#' + counterId, + 'objectPositionTop' : objectPositionTop, + 'numAnimObject' : numAnim + }; + } + }); + } + + // Logic got it from: http://stackoverflow.com/a/488073/2644250 + function wpcjs_check_visibility() { + var docViewTop = $( window ).scrollTop(); + var docViewBottom = docViewTop + $( window ).height(); + + for ( var i in counterObjects ) { + var elemTop = $( counterObjects[i].counterId ).offset().top; + var elemBottom = elemTop + $( counterObjects[i].counterId ).height(); + + if ( ( elemBottom <= docViewBottom ) && ( elemTop >= docViewTop ) ) { + counterObjects[i].numAnimObject.start(); + } + } + } + + wpcjs_get_counter(); + wpcjs_check_visibility(); + $( window ).on( 'scroll', wpcjs_check_visibility ); +}); diff --git a/readme.txt b/readme.txt index 3ab0feb..92645b5 100644 --- a/readme.txt +++ b/readme.txt @@ -1,9 +1,9 @@ === Plugin Name === -Contributors: Roel Magdaleno +Contributors: rokumetal Tags: wordpress, plugin, counter, countup, countupjs, animated Requires at least: 3.5 -Tested up to: 4.5.2 -Stable tag: 2.1 +Tested up to: 4.7.2 +Stable tag: 3.1 License: GPLv2 License URI: http://www.gnu.org/licenses/gpl-2.0.html @@ -43,16 +43,59 @@ All counters started their animation before to reach the target counter. Now, wh ** END VERSION 2.1 ** +** VERSION 2.2 ** + +Now you can add an option if you wanna start the counter when the page is loaded or when scroll it. + +Value = true or false. + +** END VERSION 2.2 ** + +** VERSION 2.3 ** + +Bug fixed where counter at the top starts counters at bottom. Now, every counter works independently. + +** END VERSION 2.3 ** + +** VERSION 3.0 ** + +Now, you could choose how to use the shortcode: + +NEW: [countup start="0" more_options_here]55[/countup] or the old one: +[countup start="0" end="55"] + +If you want to use the first one, you should activate the "Use the end number inside the shortcode?" +option. + +** END VERSION 3.0 ** + The shortcode accepts those arguments, as you can see previously: +Normal Arguments: + [countup start="your-value" //This use a number to begin the counter. end="your-value" //This use a number to end the counter at. decimals="your-value" //This use a number to put decimals to your counter. duration="your-value" //This use a number (seconds) as duration of the counter. + scroll="your-value" //Load counter when the page is loaded. Default Value: True. ] -Example: [countup start="0" end="55" decimals="0" duration="5" prefix="my_prefix"] +Normal Example: + +[countup start="0" end="55" decimals="0" duration="5" prefix="my_prefix" scroll="false"] + +Inside Shortcode Arguments: + +[countup + start="your-value" //This use a number to begin the counter. + decimals="your-value" //This use a number to put decimals to your counter. + duration="your-value" //This use a number (seconds) as duration of the counter. + scroll="your-value" //Load counter when the page is loaded. Default Value: True. +]your-end-number[/countup] + +Example Inside Shortcode: +[countup start="0" decimals="0" duration="5"]55[/countup] Now you know how to use this plugin, but you can edit some options if you required (Go to "Settings"->"CountUP.js"). @@ -85,4 +128,16 @@ Now you know how to use this plugin, but you can edit some options if you requir = 2.1 = * All counters started their animation before to reach the target counter. Now, when you scrolled to the target counter, the counter will start their animation. += 2.2 = +* Now you can add an option if you wanna start the counter when the page is loaded or when scroll it. + += 2.3 = +* Bug fixed where counter at the top starts counters at bottom. Now, every counter works independently. + += 3.0 = +* Bug fixed where some counters didn't start after scroll into it. And it was implemented two ways to use the shortcode. + += 3.1 = +* Bug fixed where the plugin was initializing at the same time of the other plugins, breaking them. + == Upgrade Notice ==