WordPress.org
Get WordPress

Plugin Directory

Changeset 829329


Ignore:
Timestamp:
12/28/2013 04:43:17 AM (12 years ago)
Author:
toxicToad
Message:
  • Continuous counters no longer reset when their widget is saved unless the

start value is changed.

  • Added ability to define text to be displayed before and after the counter.
  • Added a "disable 3D effect" setting to blend with flat design themes.
  • Added a more logical "Count Up | Static | Countdown" Counter Type setting.
  • General improvements to the widget settings interface.
  • Now localized and translation ready
Location:
jellyfish-counter-widget
Files:
11 added
3 edited

Legend:

Unmodified
Added
Removed

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

    r822286 r829329  
    11<?php
    22/*
    3   Plugin Name: Jellyfish Counter Widget
    4   Plugin URI: http://strawberryjellyfish.com/wordpress-plugin-jellyfish-counter-widget/
    5   Description: Creates a widget with an odometer style counter that displays either a static number or animates up to a predefined value.
    6   Author: Rob Miller
    7   Version: 0.9
    8   Author URI: http://strawberryjellyfish.com/
    9  */
     3    Plugin Name: Jellyfish Counter Widget
     4    Plugin URI: http://strawberryjellyfish.com/wordpress-plugin-jellyfish-counter-widget/
     5    Description: Creates a widget with an odometer style counter that displays either a static number or animates up to a predefined value.
     6    Author: Rob Miller
     7    Version: 1.0
     8    Author URI: http://strawberryjellyfish.com/
     9*/
    1010
    1111/*
    12   This program is free software; you can redistribute it and/or modify
    13   it under the terms of the GNU General Public License as published by
    14   the Free Software Foundation; either version 2 of the License, or
    15   (at your option) any later version.
    16 
    17   This program is distributed in the hope that it will be useful,
    18   but WITHOUT ANY WARRANTY; without even the implied warranty of
    19   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    20   GNU General Public License for more details.
    21 
    22   You should have received a copy of the GNU General Public License
    23   along with this program; if not, write to the Free Software
    24   Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
    25   Online: http://www.gnu.org/licenses/gpl.txt
    26  */
     12    This program is free software; you can redistribute it and/or modify
     13    it under the terms of the GNU General Public License as published by
     14    the Free Software Foundation; either version 2 of the License, or
     15    (at your option) any later version.
     16
     17    This program is distributed in the hope that it will be useful,
     18    but WITHOUT ANY WARRANTY; without even the implied warranty of
     19    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
     20    GNU General Public License for more details.
     21
     22    You should have received a copy of the GNU General Public License
     23    along with this program; if not, write to the Free Software
     24    Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
     25    Online: http://www.gnu.org/licenses/gpl.txt
     26*/
    2727?>
    2828<?php
     29
     30add_action('init', 'jellyfish_cw_action_init');
    2931add_action('widgets_init', 'jellyfish_cw_create_widgets');
    3032
    3133function jellyfish_cw_create_widgets() {
    32     register_widget('Jellyfish_Counter_Widget');
     34    register_widget('Jellyfish_Counter_Widget');
     35}
     36
     37function jellyfish_cw_action_init() {
     38    load_plugin_textdomain('jellyfish_cw', false, dirname(plugin_basename(__FILE__)));
    3339}
    3440
    … …  
    3642class Jellyfish_Counter_Widget extends WP_Widget {
    3743
    38     function __construct() {
    39         parent::__construct(
    40                 'counter_widget', 'Counter Widget', array('description' => 'Show an odometer style counter')
    41         );
    42     }
    43 
    44     // options form
    45     function form($instance) {
    46         // Retrieve previous values from instance
    47         // or set default values if not present
    48         $show_title = (!empty($instance['show_title']) ? $instance['show_title'] : 'true' );
    49         $widget_title = (!empty($instance['widget_title']) ? esc_attr($instance['widget_title']) : 'Counter' );
    50         $display_tenths = (!empty($instance['display_tenths']) ? $instance['display_tenths'] : 'true' );
    51         $number_of_digits = (!empty($instance['number_of_digits']) ? esc_attr($instance['number_of_digits']) : '6' );
    52         $digit_height = (!empty($instance['digit_height']) ? esc_attr($instance['digit_height']) : '40' );
    53         $digit_width = (!empty($instance['digit_width']) ? esc_attr($instance['digit_width']) : '30' );
    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' );
    56         $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']) : '10' );
    58         $end_value = (isset($instance['end_value']) ? esc_attr($instance['end_value']) : '100' );
    59         $animate_speed = (!empty($instance['animate_speed']) ? esc_attr($instance['animate_speed']) : '50' );
    60         $persist = (!empty($instance['persist']) ? esc_attr($instance['persist']) : 'false' );
    61         $count_down = (!empty($instance['count_down']) ? esc_attr($instance['count_down']) : 'false' );
    62         $persist_interval = (!empty($instance['persist_interval']) ? esc_attr($instance['persist_interval']) : '1' );
    63         $init_timestamp = (!empty($instance['init_timestamp']) ? esc_attr($instance['init_timestamp']) : time() );
    64         ?>
    65         <p>
    66             <label for="<?php echo $this->get_field_id('widget_title'); ?>">
    67                 <?php echo 'Title:'; ?>
    68                 <input type="text"
    69                        id="<?php echo $this->get_field_id('widget_title'); ?>"
    70                        name="<?php echo $this->get_field_name('widget_title'); ?>"
    71                        value="<?php echo $widget_title; ?>" />
    72             </label>
    73         </p>
    74         <p>
    75             <label for="<?php echo $this->get_field_id('show_title'); ?>">
    76                 <?php echo 'Show Title'; ?>
    77                 <select id="<?php echo $this->get_field_id('show_title'); ?>"
    78                         name="<?php echo $this->get_field_name('show_title'); ?>">
    79                     <option value="true"
    80                             <?php selected($show_title, 'true'); ?>>
    81                         Yes</option>
    82                     <option value="false"
    83                             <?php selected($show_title, 'false'); ?>>
    84                         No</option>
    85                 </select>
    86             </label>
    87         </p>
    88         <p>
    89             <label for="<?php echo $this->get_field_id('start_value'); ?>">
    90                 <?php echo 'Start Value:'; ?>
    91                 <input type="text"
    92                        id="<?php echo $this->get_field_id('start_value'); ?>"
    93                        name="<?php echo $this->get_field_name('start_value'); ?>"
    94                        value="<?php echo $start_value; ?>" />
    95             </label>
    96         </p>
    97         <p>
    98             <label for="<?php echo $this->get_field_id('end_value'); ?>">
    99                 <?php echo 'End Value:'; ?>
    100                 <input type="text"
    101                        id="<?php echo $this->get_field_id('end_value'); ?>"
    102                        name="<?php echo $this->get_field_name('end_value'); ?>"
    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>
    120         <p>
    121             <label for="<?php echo $this->get_field_id('persist'); ?>">
    122                 <?php echo 'Continuous Counter'; ?>
    123                 <select id="<?php echo $this->get_field_id('persist'); ?>"
    124                         name="<?php echo $this->get_field_name('persist'); ?>">
    125                     <option value="true"
    126                             <?php selected($persist, 'true'); ?>>
    127                         Yes</option>
    128                     <option value="false"
    129                             <?php selected($persist, 'false'); ?>>
    130                         No</option>
    131                 </select>
    132             </label>
    133         </p>
    134         <p>
    135             <label for="<?php echo $this->get_field_id('persist_interval'); ?>">
    136                 <?php echo 'Continuous Interval (seconds):'; ?>
    137                 <input type="text"
    138                        id="<?php echo $this->get_field_id('persist_interval'); ?>"
    139                        name="<?php echo $this->get_field_name('persist_interval'); ?>"
    140                        value="<?php echo $persist_interval; ?>" />
    141             </label>
    142         </p>
    143         <p>
    144             <label for="<?php echo $this->get_field_id('number_of_digits'); ?>">
    145                 <?php echo 'Number of Digits:'; ?>
    146                 <input type="text"
    147                        id="<?php echo $this->get_field_id('number_of_digits'); ?>"
    148                        name="<?php echo $this->get_field_name('number_of_digits'); ?>"
    149                        value="<?php echo $number_of_digits; ?>" />
    150             </label>
    151         </p>
    152         <p>
    153             <label for="<?php echo $this->get_field_id('display_tenths'); ?>">
    154                 <?php echo 'Display Tenths'; ?>
    155                 <select id="<?php echo $this->get_field_id('display_tenths'); ?>"
    156                         name="<?php echo $this->get_field_name('display_tenths'); ?>">
    157                     <option value="true"
    158                             <?php selected($display_tenths, 'true'); ?>>
    159                         Yes</option>
    160                     <option value="false"
    161                             <?php selected($display_tenths, 'false'); ?>>
    162                         No</option>
    163                 </select>
    164             </label>
    165         </p>
    166         <p>
    167             <label for="<?php echo $this->get_field_id('animate_speed'); ?>">
    168                 <?php echo 'Animation Speed (1-100):'; ?>
    169                 <input type="text"
    170                        id="<?php echo $this->get_field_id('animate_speed'); ?>"
    171                        name="<?php echo $this->get_field_name('animate_speed'); ?>"
    172                        value="<?php echo $animate_speed; ?>" />
    173             </label>
    174         </p>
    175         <p>
    176             <label for="<?php echo $this->get_field_id('digit_height'); ?>">
    177                 <?php echo 'Digit Height:'; ?>
    178                 <input type="text"
    179                        id="<?php echo $this->get_field_id('digit_height'); ?>"
    180                        name="<?php echo $this->get_field_name('digit_height'); ?>"
    181                        value="<?php echo $digit_height; ?>" />
    182             </label>
    183         </p>
    184         <p>
    185             <label for="<?php echo $this->get_field_id('digit_width'); ?>">
    186                 <?php echo 'Digit Width:'; ?>
    187                 <input type="text"
    188                        id="<?php echo $this->get_field_id('digit_width'); ?>"
    189                        name="<?php echo $this->get_field_name('digit_width'); ?>"
    190                        value="<?php echo $digit_width; ?>" />
    191             </label>
    192         </p>
    193         <p>
    194             <label for="<?php echo $this->get_field_id('digit_padding'); ?>">
    195                 <?php echo 'Padding:'; ?>
    196                 <input type="text"
    197                        id="<?php echo $this->get_field_id('digit_padding'); ?>"
    198                        name="<?php echo $this->get_field_name('digit_padding'); ?>"
    199                        value="<?php echo $digit_padding; ?>" />
    200             </label>
    201         </p>
    202         <p>
    203             <label for="<?php echo $this->get_field_id('digit_bustedness'); ?>">
    204                 <?php echo 'Bustedness:'; ?>
    205                 <input type="text"
    206                        id="<?php echo $this->get_field_id('digit_bustedness'); ?>"
    207                        name="<?php echo $this->get_field_name('digit_bustedness'); ?>"
    208                        value="<?php echo $digit_bustedness; ?>" />
    209             </label>
    210         </p>
    211         <p>
    212             <label for="<?php echo $this->get_field_id('digit_style'); ?>">
    213                 <?php echo 'Digit Style:'; ?>
    214                 <input type="text"
    215                        id="<?php echo $this->get_field_id('digit_style'); ?>"
    216                        name="<?php echo $this->get_field_name('digit_style'); ?>"
    217                        value="<?php echo $digit_style; ?>" />
    218             </label>
    219         </p>
    220         <?php
    221     }
    222 
    223     function update($new_instance, $old_instance) {
    224         $instance = $old_instance;
    225         // validate inputs
    226         // Only numeric values
    227         if (is_numeric($new_instance['number_of_digits'])) {
    228             $instance['number_of_digits'] = intval($new_instance['number_of_digits']);
    229         } else {
    230             $instance['number_of_digits'] = $instance['number_of_digits'];
    231         }
    232 
    233         if (is_numeric($new_instance['digit_height'])) {
    234             $instance['digit_height'] = intval($new_instance['digit_height']);
    235         } else {
    236             $instance['digit_height'] = $instance['digit_height'];
    237         }
    238 
    239         if (is_numeric($new_instance['digit_width'])) {
    240             $instance['digit_width'] = intval($new_instance['digit_width']);
    241         } else {
    242             $instance['digit_width'] = $instance['digit_width'];
    243         }
    244 
    245         if (is_numeric($new_instance['digit_padding'])) {
    246             $instance['digit_padding'] = intval($new_instance['digit_padding']);
    247         } else {
    248             $instance['digit_padding'] = $instance['digit_padding'];
    249         }
    250 
    251         if (is_numeric($new_instance['digit_bustedness'])) {
    252             $instance['digit_bustedness'] = intval($new_instance['digit_bustedness']);
    253         } else {
    254             $instance['digit_bustedness'] = $instance['digit_bustedness'];
    255         }
    256 
    257         if (is_numeric($new_instance['start_value'])) {
    258             $instance['start_value'] = floatval($new_instance['start_value']);
    259         } else {
    260             $instance['start_value'] = $instance['start_value'];
    261         }
    262 
    263         if (is_numeric($new_instance['end_value'])) {
    264             $instance['end_value'] = floatval($new_instance['end_value']);
    265         } else {
    266             $instance['end_value'] = $instance['end_value'];
    267         }
    268         if (is_numeric($new_instance['animate_speed'])) {
    269             $instance['animate_speed'] = intval($new_instance['animate_speed']);
    270             if ($instance['animate_speed'] > 100) {
    271                 $instance['animate_speed'] = 100;
    272             }
    273         }
    274         if (is_numeric($new_instance['persist_interval'])) {
    275             $instance['persist_interval'] = intval($new_instance['persist_interval']);
    276         }
    277         // string values
    278         $instance['digit_style'] =
    279                 strip_tags($new_instance['digit_style']);
    280 
    281         $instance['widget_title'] =
    282                 strip_tags($new_instance['widget_title']);
    283         // boolean values
    284         $instance['show_title'] =
    285                 strip_tags($new_instance['show_title']);
    286 
    287         $instance['persist'] =
    288                 strip_tags($new_instance['persist']);
    289 
    290         $instance['count_down'] =
    291                 strip_tags($new_instance['count_down']);
    292 
    293         $instance['display_tenths'] =
    294                 strip_tags($new_instance['display_tenths']);
    295         $instance['init_timestamp'] = time();
    296 
    297         return $instance;
    298     }
    299 
    300     function widget($args, $instance) {
    301         // queue javascript if widget is used
    302         if (is_active_widget(false, false, $this->id_base))
    303             wp_enqueue_script('odometer', plugins_url('js/odometer.js', __FILE__), array('jquery'), '', true);
    304 
    305         // Extract members of args array as individual variables
    306         extract($args);
    307         $widget_title = $instance['widget_title'];
    308         $show_title = $instance['show_title'];
    309         $number_of_digits = $instance['number_of_digits'];
    310         $start_value = $instance['start_value'];
    311         $end_value = $instance['end_value'];
    312         $display_tenths = $instance['display_tenths'];
    313         $animate_speed = $instance['animate_speed'];
    314         $digit_height = $instance['digit_height'];
    315         $digit_width = $instance['digit_width'];
    316         $digit_padding = $instance['digit_padding'];
    317         $digit_bustedness = $instance['digit_bustedness'];
    318         $digit_style = $instance['digit_style'];
    319 
    320         //these were added at v0.7 and may not have defaults for existing widgets
    321         //so we'll add some defaults here to avoid any undefined indexes
    322 
    323         $persist = (!empty($instance['persist']) ?
    324                         esc_attr($instance['persist']) :
    325                         'false' );
    326 
    327         $persist_interval = (!empty($instance['persist_interval']) ?
    328                         esc_attr($instance['persist_interval']) :
    329                         '1' );
    330 
    331         $init_timestamp = (!empty($instance['init_timestamp']) ?
    332                         esc_attr($instance['init_timestamp']) :
    333                         time() );
    334         // Added in v0.8
    335         $count_down = (!empty($instance['count_down']) ?
    336                         esc_attr($instance['count_down']) :
    337                         'false' );
    338 
    339         if ($persist == 'true') {
    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                 }
    350             }
    351             $animate_speed = 100;
    352             $display_tenths = 0;
    353         } else {
    354             $persist_interval = 1;
    355         }
    356         // Display widget title
    357         echo $before_widget;
    358         if ($show_title == 'true') {
    359             echo $before_title;
    360             echo apply_filters('widget_title', $widget_title);
    361             echo $after_title;
    362         }
    363 
    364         // output counter div
    365         echo '<div id="odometer-' . $args['widget_id'] . '" class="odometer-widget"></div>';
    366         // output javascript
    367         echo "<script type='text/javascript'>
    368                 jQuery(document).ready(function() {
    369                         var waitTime = (100 - $animate_speed);
    370                         var counterStartValue = $start_value;
    371                         var counterEndValue = $end_value;
    372                         var counterNow = $start_value;
    373                         var wholeNumber = 0;
    374                         var persist = $persist;
    375                         var countDown = $count_down;
    376                         var div = document.getElementById('odometer-" . $args['widget_id'] . "');
    377                         var myOdometer = new Odometer(div, {
    378                                        digits: $number_of_digits,
    379                                        tenths: $display_tenths,
    380                                        digitHeight: $digit_height,
    381                                        digitWidth: $digit_width,
    382                                        digitPadding: $digit_padding,
    383                                        fontStyle: '$digit_style',
    384                                        bustedness: $digit_bustedness
    385                                        });
    386 
    387                          function updateOdometer() {
    388                             if (persist) {
    389                                 if (countDown) {
    390                                     counterNow=counterNow-0.15;
    391                                  } else {
    392                                     counterNow=counterNow+0.15;
    393                                 }
    394                                 wholeNumber=wholeNumber+0.15;
    395                                 if (wholeNumber >= 1) {
    396                                     wholeNumber = 0;
    397                                     counterNow = Math.round(counterNow);
    398                                     waitTime = ($persist_interval * 1000);
    399                                 } else {
    400                                     waitTime = 1;
    401                                 }
    402                             } else {
    403                                  if (countDown) {
    404                                     counterNow=counterNow-0.01;
    405                                  } else {
    406                                     counterNow=counterNow+0.01;
    407                                  }
    408                                  waitTime = (100 - $animate_speed);
    409                             }
    410                                 if (( !countDown && (counterNow < counterEndValue)) || (countDown && (counterNow > counterEndValue))) {
    411                                     myOdometer.set(counterNow);
    412                                     window.setTimeout(function() {
    413                                         updateOdometer();
    414                                     }, waitTime);
    415                                 }
     44    function __construct() {
     45        parent::__construct(
     46                'counter_widget', 'Counter Widget', array('description' => 'Show an odometer style counter')
     47        );
     48    }
     49
     50    // options form
     51    function form($instance) {
     52        // Retrieve previous values from instance or set default values if new
     53        $disable_title = $instance['disable_title'];
     54        $disable_depth = $instance['disable_depth'];
     55        $disable_tenths = $instance['disable_tenths'];
     56        $persist = ($instance['persist'] == 'true' || $instance['persist'] == 'on') ? 'on' : null;
     57        $init_timestamp = $instance['init_timestamp'];
     58
     59        $start_value = (is_numeric($instance['start_value']) ? $instance['start_value'] : 0 );
     60        $end_value = (is_numeric($instance['end_value']) ? $instance['end_value'] : 100 );
     61        $animate_speed = (is_numeric($instance['animate_speed']) ? $instance['animate_speed'] : 50 );
     62        $direction = (!empty($instance['direction']) ? $instance['direction'] : 'up' );
     63        $persist_interval = (is_numeric($instance['persist_interval']) ? $instance['persist_interval'] : 1 );
     64        $number_of_digits = (is_numeric($instance['number_of_digits']) ? $instance['number_of_digits'] : 5 );
     65        $digit_height = (is_numeric($instance['digit_height']) ? $instance['digit_height'] : 40 );
     66        $digit_width = (is_numeric($instance['digit_width']) ? $instance['digit_width'] : 30 );
     67        $digit_padding = (is_numeric($instance['digit_padding']) ? $instance['digit_padding'] : 0 );
     68        $digit_bustedness = (is_numeric($instance['digit_bustedness']) ? $instance['digit_bustedness'] : 2 );
     69
     70        $digit_style = (!empty($instance['digit_style']) ? $instance['digit_style'] : 'font-family: Courier New, Courier, monospace; font-weight: 900;' );
     71        $widget_title = (!empty($instance['widget_title']) ? $instance['widget_title'] : 'Counter' );
     72        $before_text = $instance['before_text'];
     73        $after_text = $instance['after_text'];
     74
     75        // get the current count of an active continuous counter
     76        if (($persist == 'on') && !empty($init_timestamp)) {
     77            if ( $direction == 'down') {
     78                $current_value = $start_value - round((time() - $init_timestamp) / $persist_interval);
     79                if ($current_value < $end_value) {
     80                    $current_value = $end_value;
     81                }
     82            } elseif ( $direction == 'up') {
     83                $current_value = $start_value + round((time() - $init_timestamp) / $persist_interval);
     84                if ($current_value > $end_value) {
     85                    $current_value = $end_value;
     86                }
    41687            }
    417 
    418                         if ( counterEndValue != counterStartValue) {
    419                             myOdometer.set(counterStartValue);
    420                             updateOdometer();
    421                         } else {
    422                             myOdometer.set(counterStartValue);
    423                         }
    424                     }
    425                 );
    426     </script>";
    427 
    428         // finish off widget
    429         echo $after_widget;
    430     }
    431 
     88        }
     89
     90        ?>
     91        <p>
     92            <label for="<?php echo $this->get_field_id('start_value'); ?>">
     93                <?php echo _e('Start Value:', 'jellyfish_cw'); ?>
     94                <input type="text"
     95                       id="<?php echo $this->get_field_id('start_value'); ?>"
     96                       name="<?php echo $this->get_field_name('start_value'); ?>"
     97                       value="<?php echo $start_value; ?>"
     98                       class="widefat"
     99                       />
     100            </label>
     101        <?php if (($persist == 'on') && (isset($current_value))) { ?>
     102            <span class="description">
     103                <?php _e('This counter is active, the current count is', 'jellyfish_cw'); ?> <?php echo $current_value; ?>.
     104                <?php _e('Changing the start value will restart the counter.', 'jellyfish_cw'); ?>
     105            </span>
     106        <?php } ?>
     107        </p>
     108        <p>
     109            <label for="<?php echo $this->get_field_id('end_value'); ?>">
     110                <?php _e('End Value:', 'jellyfish_cw'); ?>
     111                <input type="text"
     112                       id="<?php echo $this->get_field_id('end_value'); ?>"
     113                       name="<?php echo $this->get_field_name('end_value'); ?>"
     114                       value="<?php echo $end_value; ?>"
     115                       class="widefat"
     116                       />
     117            </label>
     118        </p>
     119        <p>
     120            <label for="<?php echo $this->get_field_id('direction'); ?>">
     121                <?php _e('Counter Type:', 'jellyfish_cw'); ?>
     122                <select id="<?php echo $this->get_field_id('direction'); ?>"
     123                        name="<?php echo $this->get_field_name('direction'); ?>">
     124                    <option value="up"
     125                            <?php selected($direction, 'up'); ?>>
     126                        <?php _e('Count Up', 'jellyfish_cw'); ?></option>
     127                    <option value="static"
     128                            <?php selected($direction, 'static'); ?>>
     129                        <?php _e('Static', 'jellyfish_cw'); ?></option>
     130                    <option value="down"
     131                            <?php selected($direction, 'down'); ?>>
     132                        <?php _e('Count Down', 'jellyfish_cw'); ?></option>
     133                </select>
     134            </label>
     135        </p>
     136        <p>
     137            <input class="checkbox" type="checkbox" <?php checked( $persist, 'on'); ?>
     138                id="<?php echo $this->get_field_id( 'persist' ); ?>"
     139                name="<?php echo $this->get_field_name( 'persist' ); ?>" />
     140
     141            <label for="<?php echo $this->get_field_id('persist'); ?>">
     142                <?php _e('Continuous Counter', 'jellyfish_cw'); ?>
     143            </label>
     144            <br/>
     145            <span class="description">
     146                <?php _e('Counts continuously in the background, starts as soon as this widget is saved.', 'jellyfish_cw'); ?>
     147            </span>
     148        </p>
     149        <p>
     150            <label for="<?php echo $this->get_field_id('persist_interval'); ?>">
     151                <?php _e('Continuous Interval:', 'jellyfish_cw'); ?>
     152                <input type="text"
     153                       id="<?php echo $this->get_field_id('persist_interval'); ?>"
     154                       name="<?php echo $this->get_field_name('persist_interval'); ?>"
     155                       value="<?php echo $persist_interval; ?>"
     156                       size=6
     157                       />
     158                 <?php _e('seconds', 'jellyfish_cw'); ?>
     159            </label>
     160            <br/>
     161            <span class="description">
     162                <?php _e('How often a continuous style counter updates', 'jellyfish_cw'); ?>
     163            </span>
     164        </p>
     165        <hr>
     166        <h3 class="title"><?php _e('Appearance', 'jellyfish_cw'); ?></h3>
     167        <p>
     168            <label for="<?php echo $this->get_field_id('widget_title'); ?>">
     169                <?php _e('Widget Title:', 'jellyfish_cw'); ?>
     170                <input type="text"
     171                       id="<?php echo $this->get_field_id('widget_title'); ?>"
     172                       name="<?php echo $this->get_field_name('widget_title'); ?>"
     173                       value="<?php echo $widget_title; ?>"
     174                       class="widefat"
     175                />
     176            </label>
     177        </p>
     178        <p>
     179            <input class="checkbox" type="checkbox" <?php checked( $disable_title, 'on'); ?>
     180                id="<?php echo $this->get_field_id( 'disable_title' ); ?>"
     181                name="<?php echo $this->get_field_name( 'disable_title' ); ?>" />
     182            <label for="<?php echo $this->get_field_id('disable_title'); ?>">
     183                <?php _e('Hide Title', 'jellyfish_cw'); ?>
     184            </label>
     185        </p>
     186        <p>
     187            <label for="<?php echo $this->get_field_id('before_text'); ?>">
     188                <?php _e('Text to display before counter:', 'jellyfish_cw'); ?></label>
     189            <textarea id="<?php echo $this->get_field_id('before_text'); ?>" class="widefat" name="<?php echo $this->get_field_name('before_text'); ?>"><?php echo $before_text; ?></textarea>
     190        </p>
     191        <p>
     192            <label for="<?php echo $this->get_field_id('after_text'); ?>">
     193                <?php _e('Text to display after counter:', 'jellyfish_cw'); ?></label>
     194            <textarea id="<?php echo $this->get_field_id('after_text'); ?>" class="widefat" name="<?php echo $this->get_field_name('after_text'); ?>"><?php echo $after_text; ?></textarea>
     195        </p>
     196        <p>
     197            <label for="<?php echo $this->get_field_id('number_of_digits'); ?>">
     198                <?php _e('Number of Digits:', 'jellyfish_cw'); ?>
     199                <input type="text"
     200                       id="<?php echo $this->get_field_id('number_of_digits'); ?>"
     201                       name="<?php echo $this->get_field_name('number_of_digits'); ?>"
     202                       value="<?php echo $number_of_digits; ?>"
     203                       size=3
     204                       />
     205            </label>
     206        </p>
     207        <p>
     208            <input class="checkbox" type="checkbox" <?php checked( $disable_tenths, 'on'); ?>
     209                id="<?php echo $this->get_field_id( 'disable_tenths' ); ?>"
     210                name="<?php echo $this->get_field_name( 'disable_tenths' ); ?>" />
     211            <label for="<?php echo $this->get_field_id('disable_tenths'); ?>">
     212                <?php _e('Disable Tenths', 'jellyfish_cw'); ?>
     213            </label>
     214        </p>
     215        <p>
     216            <label for="<?php echo $this->get_field_id('animate_speed'); ?>">
     217                <?php _e('Animation Speed:', 'jellyfish_cw'); ?>
     218                <input type="text"
     219                       id="<?php echo $this->get_field_id('animate_speed'); ?>"
     220                       name="<?php echo $this->get_field_name('animate_speed'); ?>"
     221                       value="<?php echo $animate_speed; ?>"
     222                       size=3
     223                />
     224            </label>
     225            <br/>
     226            <span class="description">
     227                <?php _e('A value (1-100). Not used for continuous style counters', 'jellyfish_cw'); ?>
     228            </span>
     229        </p>
     230        <p>
     231            <label for="<?php echo $this->get_field_id('digit_height'); ?>">
     232                <?php _e('Digit Height:', 'jellyfish_cw'); ?>
     233                <input type="text"
     234                       id="<?php echo $this->get_field_id('digit_height'); ?>"
     235                       name="<?php echo $this->get_field_name('digit_height'); ?>"
     236                       value="<?php echo $digit_height; ?>"
     237                       size=3
     238                />
     239                <?php echo ' px'; ?>
     240            </label>
     241        </p>
     242        <p>
     243            <label for="<?php echo $this->get_field_id('digit_width'); ?>">
     244                <?php _e('Digit Width:', 'jellyfish_cw'); ?>
     245                <input type="text"
     246                       id="<?php echo $this->get_field_id('digit_width'); ?>"
     247                       name="<?php echo $this->get_field_name('digit_width'); ?>"
     248                       value="<?php echo $digit_width; ?>"
     249                       size=3
     250                />
     251                <?php echo ' px'; ?>
     252            </label>
     253        </p>
     254        <p>
     255            <label for="<?php echo $this->get_field_id('digit_padding'); ?>">
     256                <?php _e('Digit Padding:', 'jellyfish_cw'); ?>
     257                <input type="text"
     258                       id="<?php echo $this->get_field_id('digit_padding'); ?>"
     259                       name="<?php echo $this->get_field_name('digit_padding'); ?>"
     260                       value="<?php echo $digit_padding; ?>"
     261                       size=3
     262                />
     263                <?php echo ' px'; ?>
     264            </label>
     265        </p>
     266        <p>
     267            <input class="checkbox" type="checkbox" <?php checked( $disable_depth, 'on'); ?>
     268                id="<?php echo $this->get_field_id( 'disable_depth' ); ?>"
     269                name="<?php echo $this->get_field_name( 'disable_depth' ); ?>" />
     270            <label for="<?php echo $this->get_field_id('disable_depth'); ?>">
     271                <?php _e('Disable 3D effect', 'jellyfish_cw'); ?>
     272            </label>
     273        </p>
     274        <p>
     275            <label for="<?php echo $this->get_field_id('digit_bustedness'); ?>">
     276                <?php _e('Bustedness:', 'jellyfish_cw'); ?>
     277                <input type="text"
     278                       id="<?php echo $this->get_field_id('digit_bustedness'); ?>"
     279                       name="<?php echo $this->get_field_name('digit_bustedness'); ?>"
     280                       value="<?php echo $digit_bustedness; ?>"
     281                       size=3
     282                />
     283            </label>
     284            <br/>
     285            <span class="description">Amount of digit misalignment</span>
     286        </p>
     287        <p>
     288            <label for="<?php echo $this->get_field_id('digit_style'); ?>">
     289                <?php _e('Digit Style:', 'jellyfish_cw'); ?>
     290                <input type="text"
     291                       id="<?php echo $this->get_field_id('digit_style'); ?>"
     292                       name="<?php echo $this->get_field_name('digit_style'); ?>"
     293                       value="<?php echo $digit_style; ?>"
     294                       class="widefat"
     295                />
     296            </label>
     297            <br/>
     298            <span class="description">
     299                <?php _e('CSS entered here will alter the appearance of the digits', 'jellyfish_cw'); ?>
     300            </span>
     301        </p>
     302        <?php
     303    }
     304
     305    function update($new_instance, $old_instance) {
     306        $instance = $old_instance;
     307
     308        // string values
     309        $instance['digit_style'] = sanitize_text_field($new_instance['digit_style']);
     310        $instance['widget_title'] = sanitize_text_field($new_instance['widget_title']);
     311        $instance['before_text'] = sanitize_text_field($new_instance['before_text']);
     312        $instance['after_text'] = sanitize_text_field($new_instance['after_text']);
     313        $instance['direction'] = sanitize_text_field($new_instance['direction']);
     314
     315        // boolean values
     316        $instance['disable_title'] = $new_instance['disable_title'];
     317        $instance['persist'] = $new_instance['persist'];
     318        $instance['disable_tenths'] = $new_instance['disable_tenths'];
     319        $instance['disable_depth'] = $new_instance['disable_depth'];
     320
     321        // numeric values
     322        if (is_numeric($new_instance['number_of_digits'])) {
     323            $instance['number_of_digits'] = intval($new_instance['number_of_digits']);
     324        }
     325
     326        if (is_numeric($new_instance['digit_height'])) {
     327            $instance['digit_height'] = intval($new_instance['digit_height']);
     328        }
     329
     330        if (is_numeric($new_instance['digit_width'])) {
     331            $instance['digit_width'] = intval($new_instance['digit_width']);
     332        }
     333
     334        if (is_numeric($new_instance['digit_padding'])) {
     335            $instance['digit_padding'] = intval($new_instance['digit_padding']);
     336        }
     337
     338        if (is_numeric($new_instance['digit_bustedness'])) {
     339            $instance['digit_bustedness'] = intval($new_instance['digit_bustedness']);
     340        }
     341
     342        if (is_numeric($new_instance['end_value'])) {
     343            $instance['end_value'] = intval($new_instance['end_value']);
     344        }
     345
     346        if (is_numeric($new_instance['animate_speed'])) {
     347            $instance['animate_speed'] = min(intval($new_instance['animate_speed']), 100);
     348        }
     349
     350        if (is_numeric($new_instance['persist_interval'])) {
     351            $instance['persist_interval'] = intval($new_instance['persist_interval']);
     352        }
     353
     354        if (is_numeric($new_instance['start_value']) && ($new_instance['start_value'] != $instance['start_value'])) {
     355            // start value has changed, time to restart the counter
     356            $instance['init_timestamp'] = time();
     357            $instance['start_value'] = $new_instance['start_value'];
     358        }
     359
     360        if (empty($instance['init_timestamp'])) {
     361            $instance['init_timestamp'] = time();
     362        }
     363        return $instance;
     364    }
     365
     366    function widget($args, $instance) {
     367        // queue javascript if widget is used
     368        if (is_active_widget(false, false, $this->id_base))
     369            wp_enqueue_script('odometer', plugins_url('js/odometer.js', __FILE__), array('jquery'), '', true);
     370
     371        // Extract members of args array as individual variables
     372        extract($args);
     373
     374        // these options were not in the first release so to play nice
     375        // we'll add some defaults here to avoid any undefined indexes
     376
     377        $persist_interval = (isset($instance['persist_interval']) ?
     378                        $instance['persist_interval'] : 1 );
     379
     380        $init_timestamp = (isset($instance['init_timestamp']) ?
     381                        $instance['init_timestamp'] : time() );
     382        //
     383
     384        $disable_title = isset($instance['disable_title']) ? 'true' : 'false';
     385        $disable_tenths = isset($instance['disable_tenths']) ? 'true' : 'false';
     386        $tenths = $disable_tenths == 'true' ? 'false' : 'true' ;
     387        $disable_depth = isset($instance['disable_depth']) ? 'true' : 'false';
     388        $persist = isset($instance['persist']) ? 'true' : 'false';
     389
     390        $number_of_digits = $instance['number_of_digits'];
     391        $start_value = $instance['start_value'];
     392        $end_value = $instance['end_value'];
     393
     394        $animate_speed = $instance['animate_speed'];
     395        $wait_time = max(0, (100 - $animate_speed));
     396
     397        $digit_height = $instance['digit_height'];
     398        $digit_width = $instance['digit_width'];
     399        $digit_padding = $instance['digit_padding'];
     400        $digit_bustedness = $instance['digit_bustedness'];
     401        $digit_style = $instance['digit_style'];
     402        $widget_title = $instance['widget_title'];
     403        $before_text = esc_attr($instance['before_text']);
     404        $after_text = esc_attr($instance['after_text']);
     405        $direction = $instance['direction'];
     406
     407        if ($persist == 'true') {
     408            // calculate how may 'counts' have passed since initializing the counter widget
     409            // and update the start_value appropriately. If we have already passed the end_value
     410            // then we don't want to continue counting.
     411            if ( $direction == 'down') {
     412                $start_value = $start_value - round((time() - $init_timestamp) / $persist_interval);
     413                if ($start_value < $end_value) {
     414                    $start_value = $end_value;
     415                }
     416            } elseif ( $direction == 'up') {
     417                $start_value = $start_value + round((time() - $init_timestamp) / $persist_interval);
     418                if ($start_value > $end_value) {
     419                    $start_value = $end_value;
     420                }
     421            }
     422            $animate_speed = 100;
     423            $tenths = 'false';
     424        } else {
     425            $persist_interval = 1;
     426        }
     427
     428        $persist_interval_ms = $persist_interval * 1000;
     429
     430        if ($direction == 'static') {
     431            $end_value = $start_value;
     432        }
     433
     434        // Begin widget output
     435        echo $before_widget;
     436        if ($disable_title == 'false') {
     437            echo $before_title;
     438            echo apply_filters('widget_title', $widget_title);
     439            echo $after_title;
     440        }
     441        if ($before_text) {
     442            echo '<div class="odometer-description">';
     443            echo apply_filters('the_content', $before_text);
     444            echo '</div>';
     445        }
     446        echo '<div id="odometer-' . $args['widget_id'] . '" class="odometer-widget"></div>';
     447        if ($after_text) {
     448            echo '<div class="odometer-description">';
     449            echo apply_filters('the_content', $after_text);
     450            echo '</div>';
     451        }
     452        // output javascript
     453        echo "<script type='text/javascript'>
     454                jQuery(document).ready(function() {
     455                    var waitTime = $wait_time;
     456                    var counterStartValue = $start_value;
     457                    var counterEndValue = $end_value;
     458                    var counterNow = $start_value;
     459                    var direction = '$direction';
     460                    var wholeNumber = 0;
     461                    var persist = $persist;
     462                    var div = document.getElementById('odometer-" . $args['widget_id'] . "');
     463                    var myOdometer = new Odometer(div, {
     464                        digits: $number_of_digits,
     465                        tenths: $tenths,
     466                        digitHeight: $digit_height,
     467                        digitWidth: $digit_width,
     468                        digitPadding: $digit_padding,
     469                        fontStyle: '$digit_style',
     470                        bustedness: $digit_bustedness,
     471                        disableHighlights: $disable_depth
     472                    });
     473
     474                    function updateOdometer() {
     475                        if (persist) {
     476                            if (direction =='down') {
     477                                counterNow=counterNow-0.15;
     478                            } else {
     479                                counterNow=counterNow+0.15;
     480                            }
     481                            wholeNumber=wholeNumber+0.15;
     482                            if (wholeNumber >= 1) {
     483                                wholeNumber = 0;
     484                                counterNow = Math.round(counterNow);
     485                                waitTime = $persist_interval_ms;
     486                            } else {
     487                                waitTime = 1;
     488                            }
     489                        } else {
     490                            if (direction =='down') {
     491                                counterNow=counterNow-0.01;
     492                            } else {
     493                                counterNow=counterNow+0.01;
     494                            }
     495                        }
     496                        if (( direction !='down' && (counterNow < counterEndValue)) || (direction =='down' && (counterNow > counterEndValue))) {
     497                            myOdometer.set(counterNow);
     498                            window.setTimeout(function() {
     499                                updateOdometer();
     500                            }, waitTime);
     501                        }
     502                    }
     503
     504                    if ( counterEndValue != counterStartValue) {
     505                        myOdometer.set(counterStartValue);
     506                        updateOdometer();
     507                    } else {
     508                        myOdometer.set(counterStartValue);
     509                    }
     510                });
     511            </script>";
     512        // finish off widget
     513        echo $after_widget;
     514    }
    432515}
    433516?>

  • jellyfish-counter-widget/trunk/js/odometer.js

    r747009 r829329  
    3030    this.fontStyle    = "font-family: Courier New, Courier, monospace; font-weight: 900;";
    3131    this.value        = -1;
     32    this.disableHighlights = false;
    3233
    3334    for (var key in opts) { this[key] = opts[key]; }
    3435
    35     // added line-height here to fix strangeness caused by inhereted css styles
     36    // Jellyfish Counter modification (http://strawberryjellyfish.com/wordpress-plugin-jellyfish-counter-widget/)
     37    //
     38    // added line-height to fix strangeness caused by inhereted css styles
    3639    var style = {
    3740        digits:        "position:absolute; height:"+this.digitHeight+"px; width:"+(this.digitWidth-(2*this.digitPadding))+"px; "+
    … …  
    120123        digitColDiv.appendChild(digitDivA);
    121124
    122         for (var j in highlights) {
    123             var hdiv = document.createElement("div");
    124             hdiv.innerHTML="<p></p>"; // For Dumb IE
    125             hdiv.style.cssText = highlights[j];
    126             digitColDiv.appendChild(hdiv);
     125        if (!this.disableHighlights) {
     126            for (var j in highlights) {
     127                var hdiv = document.createElement("div");
     128                hdiv.innerHTML="<p></p>"; // For Dumb IE
     129                hdiv.style.cssText = highlights[j];
     130                digitColDiv.appendChild(hdiv);
     131            }
    127132        }
    128133        odometerDiv.appendChild(digitColDiv);

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

    r822285 r829329  
    77Requires at least: 3.0
    88Tested up to: 3.8
    9 Stable tag: 0.9
     9Stable tag: 1.0
    1010License: GPLv2 or later
    1111License URI: http://www.gnu.org/licenses/gpl-2.0.html
    1212
    13 An odometer style counter widget to display either a static value or animates to a set total. Great for tracking totals, not for counting jellyfish.
     13A rotating odometer style counter widget that can display either a static value
     14or animate to a predefined total. Great for tracking any totals,
     15not just for counting jellyfish.
    1416
    1517== Description ==
    1618
    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
    19 between a starting and ending value. The counter can now have a continuous and
    20 non resetting operation where it increments over time in the background until
    21 the goal is reached.
     19This plugin allows you to add a widgets to your WordPress web site that can display
     20a static or animated odometer style counter. The counter can be used as a manually
     21updated total, an automatic counter updating over time or just as an animated
     22visual effect.
    2223
    2324The counter can either count upwards or downwards and is suitable for both incrementing
    … …  
    3031totals and appearance.
    3132
    32 The counters are created via css and javascript and require no external graphics
    33 files.
     33The counters are highly configurable through the widget interface and are generated
     34using CSS and Javascript, requiring no external graphics files.
    3435
    3536
    … …  
    5455There are three basic modes of operation:
    5556
    56 * Static - If you only give a Start Value and no End Value the counter will display
    57 a static number (useful if you just want to show a total and update it manually
    58 as necessary)
     57* Static - If you want the counter to simply display a non animate number just
     58set a Start Value to the desired number for the counter and set the
     59Counter Type to 'static'
    5960
    60 * Animated – If you supply both start value and end value in the widget, when it
    61 is displayed the counter will increment upwards until it reaches the end value.
    62 Speed of the count is controlled by the Animation Speed option. Note, this counter
    63 has no memory, it will reset when a page is reloaded or changed. Good for visual
    64 effect where start and end values are very close together.
     61* Animated – If you supply both start value and end value in the widget, the counter
     62will increment upwards or downwards depending on the chosen Counter Type until it
     63reaches the end value. Speed of the count is controlled by the Animation Speed option.
     64Note, this counter has no memory, it will reset when a page is reloaded or changed
     65but it is great for a visual effect where start and end values are very close together.
    6566
    6667* Continuous – If you want to count over a long period of time and need your
    6768counter to continue to count irrespective of page loads then just select the
    68 continuous option in the widget. Then select the interval between the counter
    69 increments, in seconds. As soon as you save the widget the counter will “start”
    70 and will continue to tick away even if nobody is viewing your blog. You can of
    71 course still use the start values and end values in this mode however animation
    72 speed and display tenths have no effect.
     69continuous option in the widget. Then choose the interval between the counter
     70increments, in seconds. As soon as you save the widget the counter will "start"
     71and will continue to tick away even if nobody is viewing your blog. Changing the
     72setting on an active continuous counter will not effect the count value and it will
     73keep count, if you wish to reset an active continuous counter just change the start value
     74and save the widget and the counter will restart from the new starting value.
     75Note: In continuous mode, animation speed and display tenths have no effect.
    7376
    74 You can also configure the digit height, width and font as well as animation
    75 speed (animated mode only)  and "bustedness" (misalignment of the digits).
     77The counter is very configurable through the widget panel. You can define the digit
     78height, width and font as well as animation speed (animated mode only) and "bustedness"
     79(misalignment of the digits). Additionally, through "Digit Style" setting you can
     80specify a font, font style, colour, background or any other CSS display properties for
     81the digits.
     82Note: you cannot adjust the size of the font here as is automatically calculated from
     83the height / width and padding settings.
    7684
    77 In the "Digit Style" setting you can specify a font or font style, this must be
    78 valid css values as it it added to the digits css. Note you cannot adjust the size
    79 of the font here, that is automatically set from the height/width and padding settings.
    80 
     85Need a flat looking counter? "Disable 3D effect" removes the CSS shading effect.
    8186
    8287
    … …  
    8691directory of your WordPress installation and then activate the Plugin from
    8792Plugins page. Go to the widgets admin page to add a counter widget, each widget
    88 has it's own settings.
     93has its own settings.
    8994
    90 == Frequently Asked Questions ==
    9195
    9296== Changelog ==
    9397
    94 * 0.9 Added countdown feature. Fixed bug where end value could not be 0
     98= 1.0 =
     99* Continuous counters no longer reset when their widget is saved unless the
     100start value is changed.
     101* Added ability to define text to be displayed before and after the counter.
     102* Added a "disable 3D effect" setting to blend with flat design themes.
     103* Added a more logical "Count Up | Static | Countdown" Counter Type setting.
     104* General improvements to the widget settings interface.
     105* The plugin is now localized and translation ready - let me know if you'd like
     106to translate the plugin into your language.
    95107
    96 * 0.8 by request, added  a non resetting continuous counter feature that can increment
     108= 0.9 =
     109* Added countdown feature.
     110* Fixed bug where end value could not be 0
     111
     112= 0.8 =
     113* by request, added  a non resetting continuous counter feature that can increment
    97114every set number of seconds until it reaches its goal
    98115
    99 * 0.6 initial release
     116= 0.6 =
     117* initial release
     118
    100119
    101120== Upgrade Notice ==
    102121
    103 Existing counter widgets may need the animation speed adjusting as the timing
    104 method has changed slightly since 0.6 making the counter animate slightly faster on
    105 some browsers.
     122Existing counters should not be effected by an upgrade but it is always good practice
     123to backup your database and installation before performing an upgrade.
    106124
    107 == Screenshots ==
     125After an upgrade visit the widget admin page to check the new options available to your
     126counters.
Note: See TracChangeset for help on using the changeset viewer.