WordPress.org
Get WordPress

Plugin Directory

Changeset 822285


Ignore:
Timestamp:
12/15/2013 06:11:56 AM (12 years ago)
Author:
toxicToad
Message:

Added countdown feature

Location:
jellyfish-counter-widget
Files:
5 added
2 edited

Legend:

Unmodified
Added
Removed

  • jellyfish-counter-widget/trunk/jellyfish-counter-widget.php

    r747009 r822285  
    5252        $digit_height = (!empty($instance['digit_height']) ? esc_attr($instance['digit_height']) : '40' );
    5353        $digit_width = (!empty($instance['digit_width']) ? esc_attr($instance['digit_width']) : '30' );
    54         $digit_padding = (!empty($instance['digit_padding']) ? esc_attr($instance['digit_padding']) : '0' );
    55         $digit_bustedness = (!empty($instance['digit_bustedness']) ? esc_attr($instance['digit_bustedness']) : '2' );
     54        $digit_padding = (isset($instance['digit_padding']) ? esc_attr($instance['digit_padding']) : '0' );
     55        $digit_bustedness = (isset($instance['digit_bustedness']) ? esc_attr($instance['digit_bustedness']) : '2' );
    5656        $digit_style = (!empty($instance['digit_style']) ? esc_attr($instance['digit_style']) : 'font-family: Courier New, Courier, monospace; font-weight: 900;' );
    57         $start_value = (!empty($instance['start_value']) ? esc_attr($instance['start_value']) : '0' );
    58         $end_value = (!empty($instance['end_value']) ? esc_attr($instance['end_value']) : '100' );
     57        $start_value = (!empty($instance['start_value']) ? esc_attr($instance['start_value']) : '10' );
     58        $end_value = (isset($instance['end_value']) ? esc_attr($instance['end_value']) : '100' );
    5959        $animate_speed = (!empty($instance['animate_speed']) ? esc_attr($instance['animate_speed']) : '50' );
    6060        $persist = (!empty($instance['persist']) ? esc_attr($instance['persist']) : 'false' );
     61        $count_down = (!empty($instance['count_down']) ? esc_attr($instance['count_down']) : 'false' );
    6162        $persist_interval = (!empty($instance['persist_interval']) ? esc_attr($instance['persist_interval']) : '1' );
    6263        $init_timestamp = (!empty($instance['init_timestamp']) ? esc_attr($instance['init_timestamp']) : time() );
    … …  
    6465        <p>
    6566            <label for="<?php echo $this->get_field_id('widget_title'); ?>">
    66                 <?php echo 'Title:'; ?>         
    67                 <input type="text" 
     67                <?php echo 'Title:'; ?>
     68                <input type="text"
    6869                       id="<?php echo $this->get_field_id('widget_title'); ?>"
    6970                       name="<?php echo $this->get_field_name('widget_title'); ?>"
    70                        value="<?php echo $widget_title; ?>" />         
     71                       value="<?php echo $widget_title; ?>" />
    7172            </label>
    7273        </p>
    7374        <p>
    7475            <label for="<?php echo $this->get_field_id('show_title'); ?>">
    75                 <?php echo 'Show Title'; ?>         
     76                <?php echo 'Show Title'; ?>
    7677                <select id="<?php echo $this->get_field_id('show_title'); ?>"
    7778                        name="<?php echo $this->get_field_name('show_title'); ?>">
    … …  
    8788        <p>
    8889            <label for="<?php echo $this->get_field_id('start_value'); ?>">
    89                 <?php echo 'Start Value:'; ?>           
    90                 <input type="text" 
     90                <?php echo 'Start Value:'; ?>
     91                <input type="text"
    9192                       id="<?php echo $this->get_field_id('start_value'); ?>"
    9293                       name="<?php echo $this->get_field_name('start_value'); ?>"
    93                        value="<?php echo $start_value; ?>" />           
     94                       value="<?php echo $start_value; ?>" />
    9495            </label>
    9596        </p>
    9697        <p>
    9798            <label for="<?php echo $this->get_field_id('end_value'); ?>">
    98                 <?php echo 'End Value:'; ?>         
    99                 <input type="text" 
     99                <?php echo 'End Value:'; ?>
     100                <input type="text"
    100101                       id="<?php echo $this->get_field_id('end_value'); ?>"
    101102                       name="<?php echo $this->get_field_name('end_value'); ?>"
    102                        value="<?php echo $end_value; ?>" />         
    103             </label>
    104         </p>
     103                       value="<?php echo $end_value; ?>" />
     104            </label>
     105        </p>
     106        <p>
     107            <label for="<?php echo $this->get_field_id('count_down'); ?>">
     108                <?php echo 'Count Direction'; ?>
     109                <select id="<?php echo $this->get_field_id('count_down'); ?>"
     110                        name="<?php echo $this->get_field_name('count_down'); ?>">
     111                    <option value="true"
     112                            <?php selected($count_down, 'true'); ?>>
     113                        Down</option>
     114                    <option value="false"
     115                            <?php selected($count_down, 'false'); ?>>
     116                        Up</option>
     117                </select>
     118            </label>
     119        </p>
    105120        <p>
    106121            <label for="<?php echo $this->get_field_id('persist'); ?>">
    107                 <?php echo 'Continuous Counter'; ?>         
     122                <?php echo 'Continuous Counter'; ?>
    108123                <select id="<?php echo $this->get_field_id('persist'); ?>"
    109124                        name="<?php echo $this->get_field_name('persist'); ?>">
    … …  
    119134        <p>
    120135            <label for="<?php echo $this->get_field_id('persist_interval'); ?>">
    121                 <?php echo 'Continuous Interval (seconds):'; ?>         
    122                 <input type="text" 
     136                <?php echo 'Continuous Interval (seconds):'; ?>
     137                <input type="text"
    123138                       id="<?php echo $this->get_field_id('persist_interval'); ?>"
    124139                       name="<?php echo $this->get_field_name('persist_interval'); ?>"
    125                        value="<?php echo $persist_interval; ?>" />         
    126             </label>
    127         </p> 
     140                       value="<?php echo $persist_interval; ?>" />
     141            </label>
     142        </p>
    128143        <p>
    129144            <label for="<?php echo $this->get_field_id('number_of_digits'); ?>">
    130                 <?php echo 'Number of Digits:'; ?>         
    131                 <input type="text" 
     145                <?php echo 'Number of Digits:'; ?>
     146                <input type="text"
    132147                       id="<?php echo $this->get_field_id('number_of_digits'); ?>"
    133148                       name="<?php echo $this->get_field_name('number_of_digits'); ?>"
    134                        value="<?php echo $number_of_digits; ?>" />         
    135             </label>
    136         </p> 
     149                       value="<?php echo $number_of_digits; ?>" />
     150            </label>
     151        </p>
    137152        <p>
    138153            <label for="<?php echo $this->get_field_id('display_tenths'); ?>">
    139                 <?php echo 'Display Tenths'; ?>         
     154                <?php echo 'Display Tenths'; ?>
    140155                <select id="<?php echo $this->get_field_id('display_tenths'); ?>"
    141156                        name="<?php echo $this->get_field_name('display_tenths'); ?>">
    … …  
    151166        <p>
    152167            <label for="<?php echo $this->get_field_id('animate_speed'); ?>">
    153                 <?php echo 'Animation Speed (1-100):'; ?>           
    154                 <input type="text" 
     168                <?php echo 'Animation Speed (1-100):'; ?>
     169                <input type="text"
    155170                       id="<?php echo $this->get_field_id('animate_speed'); ?>"
    156171                       name="<?php echo $this->get_field_name('animate_speed'); ?>"
    157                        value="<?php echo $animate_speed; ?>" />         
    158             </label>
    159         </p> 
     172                       value="<?php echo $animate_speed; ?>" />
     173            </label>
     174        </p>
    160175        <p>
    161176            <label for="<?php echo $this->get_field_id('digit_height'); ?>">
    162                 <?php echo 'Digit Height:'; ?>         
    163                 <input type="text" 
     177                <?php echo 'Digit Height:'; ?>
     178                <input type="text"
    164179                       id="<?php echo $this->get_field_id('digit_height'); ?>"
    165180                       name="<?php echo $this->get_field_name('digit_height'); ?>"
    166                        value="<?php echo $digit_height; ?>" />         
    167             </label>
    168         </p>       
     181                       value="<?php echo $digit_height; ?>" />
     182            </label>
     183        </p>
    169184        <p>
    170185            <label for="<?php echo $this->get_field_id('digit_width'); ?>">
    171                 <?php echo 'Digit Width:'; ?>           
    172                 <input type="text" 
     186                <?php echo 'Digit Width:'; ?>
     187                <input type="text"
    173188                       id="<?php echo $this->get_field_id('digit_width'); ?>"
    174189                       name="<?php echo $this->get_field_name('digit_width'); ?>"
    175                        value="<?php echo $digit_width; ?>" />           
    176             </label>
    177         </p>       
     190                       value="<?php echo $digit_width; ?>" />
     191            </label>
     192        </p>
    178193        <p>
    179194            <label for="<?php echo $this->get_field_id('digit_padding'); ?>">
    180                 <?php echo 'Padding:'; ?>           
    181                 <input type="text" 
     195                <?php echo 'Padding:'; ?>
     196                <input type="text"
    182197                       id="<?php echo $this->get_field_id('digit_padding'); ?>"
    183198                       name="<?php echo $this->get_field_name('digit_padding'); ?>"
    184                        value="<?php echo $digit_padding; ?>" />         
    185             </label>
    186         </p>       
     199                       value="<?php echo $digit_padding; ?>" />
     200            </label>
     201        </p>
    187202        <p>
    188203            <label for="<?php echo $this->get_field_id('digit_bustedness'); ?>">
    189                 <?php echo 'Bustedness:'; ?>           
    190                 <input type="text" 
     204                <?php echo 'Bustedness:'; ?>
     205                <input type="text"
    191206                       id="<?php echo $this->get_field_id('digit_bustedness'); ?>"
    192207                       name="<?php echo $this->get_field_name('digit_bustedness'); ?>"
    193                        value="<?php echo $digit_bustedness; ?>" />         
    194             </label>
    195         </p>       
     208                       value="<?php echo $digit_bustedness; ?>" />
     209            </label>
     210        </p>
    196211        <p>
    197212            <label for="<?php echo $this->get_field_id('digit_style'); ?>">
    198                 <?php echo 'Digit Style:'; ?>           
    199                 <input type="text" 
     213                <?php echo 'Digit Style:'; ?>
     214                <input type="text"
    200215                       id="<?php echo $this->get_field_id('digit_style'); ?>"
    201216                       name="<?php echo $this->get_field_name('digit_style'); ?>"
    202                        value="<?php echo $digit_style; ?>" />           
     217                       value="<?php echo $digit_style; ?>" />
    203218            </label>
    204219        </p>
    … …  
    272287        $instance['persist'] =
    273288                strip_tags($new_instance['persist']);
     289
     290        $instance['count_down'] =
     291                strip_tags($new_instance['count_down']);
    274292
    275293        $instance['display_tenths'] =
    … …  
    314332                        esc_attr($instance['init_timestamp']) :
    315333                        time() );
     334        // Added in v0.8
     335        $count_down = (!empty($instance['count_down']) ?
     336                        esc_attr($instance['count_down']) :
     337                        'false' );
    316338
    317339        if ($persist == 'true') {
    318             $start_value = $start_value + round((time() - $init_timestamp) / $persist_interval);
    319             if ($start_value > $end_value) {
    320                 $start_value = $end_value;
     340            if ( $count_down == 'true') {
     341                $start_value = $start_value - round((time() - $init_timestamp) / $persist_interval);
     342                if ($start_value < $end_value) {
     343                    $start_value = $end_value;
     344                }
     345            } else {
     346                $start_value = $start_value + round((time() - $init_timestamp) / $persist_interval);
     347                if ($start_value > $end_value) {
     348                    $start_value = $end_value;
     349                }
    321350            }
    322351            $animate_speed = 100;
    … …  
    344373                        var wholeNumber = 0;
    345374                        var persist = $persist;
     375                        var countDown = $count_down;
    346376                        var div = document.getElementById('odometer-" . $args['widget_id'] . "');
    347377                        var myOdometer = new Odometer(div, {
    348                                        digits: $number_of_digits, 
     378                                       digits: $number_of_digits,
    349379                                       tenths: $display_tenths,
    350380                                       digitHeight: $digit_height,
    … …  
    354384                                       bustedness: $digit_bustedness
    355385                                       });
    356                        
    357386
    358387                         function updateOdometer() {
    359                             if (persist == true) {                           
    360                                 counterNow=counterNow+0.15;
     388                            if (persist) {
     389                                if (countDown) {
     390                                    counterNow=counterNow-0.15;
     391                                 } else {
     392                                    counterNow=counterNow+0.15;
     393                                }
    361394                                wholeNumber=wholeNumber+0.15;
    362395                                if (wholeNumber >= 1) {
    363396                                    wholeNumber = 0;
     397                                    counterNow = Math.round(counterNow);
    364398                                    waitTime = ($persist_interval * 1000);
    365399                                } else {
    … …  
    367401                                }
    368402                            } else {
    369                                  counterNow=counterNow+0.01;
     403                                 if (countDown) {
     404                                    counterNow=counterNow-0.01;
     405                                 } else {
     406                                    counterNow=counterNow+0.01;
     407                                 }
    370408                                 waitTime = (100 - $animate_speed);
    371409                            }
    372                                 if (counterNow < counterEndValue) {
     410                                if (( !countDown && (counterNow < counterEndValue)) || (countDown && (counterNow > counterEndValue))) {
    373411                                    myOdometer.set(counterNow);
    374412                                    window.setTimeout(function() {
    … …  
    377415                                }
    378416            }
    379                        
     417
    380418                        if ( counterEndValue != counterStartValue) {
    381419                            myOdometer.set(counterStartValue);

  • jellyfish-counter-widget/trunk/readme.txt

    r747009 r822285  
    66Tags: counter, odometer, milometer, animated, widget, totaliser
    77Requires at least: 3.0
    8 Tested up to: 3.5
    9 Stable tag: 0.8
     8Tested up to: 3.8
     9Stable tag: 0.9
    1010License: GPLv2 or later
    1111License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    1515== Description ==
    1616
    17 This plugin adds a widget to your WordPress web site that displays a static or 
    18 animated odometer style counter that can display a set value or can animate 
     17This plugin adds a widget to your WordPress web site that displays a static or
     18animated odometer style counter that can display a set value or can animate
    1919between a starting and ending value. The counter can now have a continuous and
    2020non resetting operation where it increments over time in the background until
    2121the goal is reached.
    2222
     23The counter can either count upwards or downwards and is suitable for both incrementing
     24totals or countdown situations.
     25
    2326A great visual effect for travel blogs or any website that wants to display a
    24 running total of anything. 
     27running total of anything.
    2528
    2629You can have as many counters as you wish, all can have individual settings for
    2730totals and appearance.
    2831
    29 The counters are created via css and javascript and require no external graphics 
     32The counters are created via css and javascript and require no external graphics
    3033files.
    3134
    … …  
    3437
    3538You can see a counter in action at http://sharkaroo.net/map
    36 Using an animated counter adds visual and narrative impact to an otherwise 
     39Using an animated counter adds visual and narrative impact to an otherwise
    3740static value.
    3841
    … …  
    4043http://strawberryjellyfish.com/wordpress-plugin-jellyfish-counter-widget/
    4144
    42 This plugin uses a modified version of a javascript odometer class written by 
     45This plugin uses a modified version of a javascript odometer class written by
    4346Gavin Brock http://gavcode.wordpress.com/2008/04/07/cssjavascript-animated-odometer/
    4447
    … …  
    4649==Usage==
    4750
    48 Add a counter widget to your sidebar and adjust the settings to suit your 
     51Add a counter widget to your sidebar and adjust the settings to suit your
    4952requirements.
    5053
    5154There are three basic modes of operation:
    5255
    53 * Static - If you only give a Start Value and no End Value the counter will display 
    54 a static number (useful if you just want to show a total and update it manually 
     56* Static - If you only give a Start Value and no End Value the counter will display
     57a static number (useful if you just want to show a total and update it manually
    5558as necessary)
    5659
    57 * Animated – If you supply both start value and end value in the widget, when it 
    58 is displayed the counter will increment upwards until it reaches the end value. 
    59 Speed of the count is controlled by the Animation Speed option. Note, this counter 
    60 has no memory, it will reset when a page is reloaded or changed. Good for visual 
     60* Animated – If you supply both start value and end value in the widget, when it
     61is displayed the counter will increment upwards until it reaches the end value.
     62Speed of the count is controlled by the Animation Speed option. Note, this counter
     63has no memory, it will reset when a page is reloaded or changed. Good for visual
    6164effect where start and end values are very close together.
    6265
    63 * Continuous – If you want to count over a long period of time and need your 
    64 counter to continue to count irrespective of page loads then just select the 
    65 continuous option in the widget. Then select the interval between the counter 
    66 increments, in seconds. As soon as you save the widget the counter will “start” 
    67 and will continue to tick away even if nobody is viewing your blog. You can of 
    68 course still use the start values and end values in this mode however animation 
     66* Continuous – If you want to count over a long period of time and need your
     67counter to continue to count irrespective of page loads then just select the
     68continuous option in the widget. Then select the interval between the counter
     69increments, in seconds. As soon as you save the widget the counter will “start”
     70and will continue to tick away even if nobody is viewing your blog. You can of
     71course still use the start values and end values in this mode however animation
    6972speed and display tenths have no effect.
    7073
    … …  
    7477In the "Digit Style" setting you can specify a font or font style, this must be
    7578valid css values as it it added to the digits css. Note you cannot adjust the size
    76 of the font here, that is automatically set from the height/width and padding settings. 
     79of the font here, that is automatically set from the height/width and padding settings.
    7780
    7881
    … …  
    8083== Installation ==
    8184
    82 Extract the zip file and just drop the contents in the wp-content/plugins/ 
    83 directory of your WordPress installation and then activate the Plugin from 
    84 Plugins page. Go to the widgets admin page to add a counter widget, each widget 
     85Extract the zip file and just drop the contents in the wp-content/plugins/
     86directory of your WordPress installation and then activate the Plugin from
     87Plugins page. Go to the widgets admin page to add a counter widget, each widget
    8588has it's own settings.
    8689
    87 == Frequently Asked Questions == 
     90== Frequently Asked Questions ==
    8891
    8992== Changelog ==
    90 =0.6=
    91 * initial release
    9293
    93 =0.8=
    94 * by request, added  a non resetting continuous counter feature that can increment
     94* 0.9 Added countdown feature. Fixed bug where end value could not be 0
     95
     96* 0.8 by request, added  a non resetting continuous counter feature that can increment
    9597every set number of seconds until it reaches its goal
     98
     99* 0.6 initial release
    96100
    97101== Upgrade Notice ==
    98102
    99 Existing counter widgets may need the animation speed adjusting as the timing 
    100 method has changed slightly making the counter animate slightly faster on
     103Existing counter widgets may need the animation speed adjusting as the timing
     104method has changed slightly since 0.6 making the counter animate slightly faster on
    101105some browsers.
    102106
Note: See TracChangeset for help on using the changeset viewer.