.php

<?php
class ExtraCounter extends OxygenExtraElements {
        
    var $js_added = false;
    
	function name() {
        return 'Counter';
    }
    
    /*function icon() {
        return plugin_dir_url(__FILE__) . 'assets/'.basename(__FILE__, '.php').'.svg';
    }*/
    
    function enablePresets() {
        return true;
    }
    
    function extras_button_place() {
        return "interactive";
    }
    
    function tag() {
        return array('default' => 'div', 'choices' => 'div,p,span' );
    }
    
    function init() {
        
        add_filter("oxy_allowed_empty_options_list", array( $this, "allowedEmptyOptions") );
    
    }

    function render($options, $defaults, $content) {

        // Get Options
        $unit = ($options['unit_display'] === 'display') ? '<span class="oxy-counter_suffix">' . esc_attr($options['unit']) . '</span>' : '';
        $unit_space = ($options['unit_spacing'] === 'space') ? ' ' . $unit : '' . $unit;
        
        
        
        /**
         * Here's where I'm having trouble
         */
        
        // Get the value from the textfield
        // For David: Do not esc_attr, the parmeters here;
        $start_field = isset( $options['start'] ) ? $options['start'] : ''; 

        // Only do_shortcode if an Oxygen shortcode is found
        if( strstr( $start_field, '[oxygen') ) {
            // For David: We need to sign the shortcode, or else the do_shortcode will return nothing
            $start_field = ct_sign_oxy_dynamic_shortcode(array($start_field));
            $start = do_shortcode($start_field); // This doesn't actually give us the data from the shortcode.
                
        } else {
            // Otherwise just output as is
            $start = esc_attr($options['start']);
            
        }
        
        // $start is echoed later on inside the rest of the markup..
        
        
        $end = esc_attr($options['end']); 
        $before = ($options['before_unit_display'] === 'display') ? '<span class="oxy-counter_prefix">' . esc_attr($options['before']) . '</span>' : '';
        $duration = isset( $options['duration'] ) ? esc_attr($options['duration']) : '100';
        $easing = ($options['easing'] === 'false') ? false : true;
        $amount = isset( $options['amount'] ) ? esc_attr($options['amount']) : '333';
        $threshold = isset( $options['threshold'] ) ? esc_attr($options['threshold']) : '999';
        $decimal = isset( $options['decimal'] ) ? esc_attr($options['decimal']) : '.';
        $separator = isset( $options['separator'] ) ? esc_attr($options['separator']) : ','; 
        $grouping = ($options['grouping'] === 'false') ? false : true;
        $decimals = isset( $options['decimals'] ) ? esc_attr($options['decimals']) : '0';
        
        $output = $before . '<span id="' . esc_attr($options['selector']) .'-digit" class="oxy-counter_digit" data-easing="' . $easing . '" data-threshold="' . $threshold . '" data-amount="' . $amount . '" data-duration="'. $duration .'" data-end="'. $end .'" data-grouping="'. $grouping .'" data-start="'. $start .'"  data-decimal="'. $decimal .'" data-decimals="'. $decimals .'" data-separator="'. $separator .'">' . $start . '</span>' . $unit_space;
        
        echo $output;
        
        // add JavaScript code only once and if shortcode presented
        if ($this->js_added !== true) {
            add_action( 'wp_footer', array( $this, 'output_js' ) );
            add_action( 'wp_footer', array( $this, 'output_init_js' ), 25 );
            $this->js_added = true;
        } 
        
    }

    function class_names() {
        return array();
    }

    function controls() {

        /**
         * Primary Controls
         */
        
        $this->addOptionControl(
            array(
                "type" => 'textfield',
                "name" => __('Start Digit'),
                "slug" => 'start',
                "default" => '0',
                'shortcode'	=> true,
            )
        )->rebuildElementOnChange()
        ->setParam('dynamicdatacode', '<div class="oxygen-dynamic-data-browse" ctdynamicdata data="iframeScope.dynamicShortcodesContentMode" callback="iframeScope.insertShortcodeToCounterStart">data</div>');
        // The callback insertShortcodeToCounterStart is in reference to the script-iframe.js file.
        
        $this->addOptionControl(
            array(
                "type" => 'textfield',
                "name" => __('End Digit'),
                "slug" => 'end',
                "default" => '100'
            )
        )
        ->setParam('dynamicdatacode', '<div class="oxygen-dynamic-data-browse" ctdynamicdata data="iframeScope.dynamicShortcodesContentMode" callback="iframeScope.insertShortcodeToCounterEnd">data</div>');
        // The callback insertShortcodeToCounterEnd is in reference to the script-iframe.js file.
        
        
        $duration_control = $this->addOptionControl(
            array(
                "type" => 'slider-measurebox',
                "name" => __('Count Up Duration','oxygen'),
                "slug" => 'duration',
                "default" => "1"
            )
        );
        $duration_control->setUnits("s","s");
        $duration_control->setRange('0','10','0.1');
        
        
        
        /**
         * Content
         */
        
        $content_section = $this->addControlSection("content_section", __("Content"), "assets/icon.png", $this);
        
        $content_section->addOptionControl(
            array(
                'type' => 'buttons-list',
                'name' => 'Suffix Display',
                'slug' => 'unit_display'
            )
            
        )->setValue(array( "display" => "Display", "hide" => "Hide" ))
         ->setDefaultValue('hide')->rebuildElementOnChange();
        
        $content_section->addOptionControl(
            array(
                "type" => 'textfield',
                "name" => __('Suffix Text'),
                "slug" => 'unit',
                "default" => '%',
                "condition" => 'unit_display=display',
            )
        )->rebuildElementOnChange();
        
        
        $content_section->addOptionControl(
            array(
                'type' => 'buttons-list',
                'name' => 'Suffix Spacing',
                'slug' => 'unit_spacing',
                "condition" => 'unit_display=display',
            )
            
        )->setValue(array( "space" => "Add Space", "nospace" => "No Space" ))
         ->setDefaultValue('nospace')->rebuildElementOnChange();
        
        
        $content_section->addOptionControl(
            array(
                'type' => 'buttons-list',
                'name' => 'Prefix Display',
                'slug' => 'before_unit_display'
            )
            
        )->setValue(array( "display" => "Display", "hide" => "Hide" ))
         ->setDefaultValue('hide')->rebuildElementOnChange();
        
        
        $content_section->addOptionControl(
            array(
                "type" => 'textfield',
                "name" => __('Prefix Text'),
                "slug" => 'before',
                "default" => '',
                "condition" => 'before_unit_display=display',
            )
        )->rebuildElementOnChange();
        
        $content_section->addOptionControl(
            array(
                'type' => 'buttons-list',
                'name' => 'Use Grouping',
                'slug' => 'grouping'
            )
            
        )->setValue(array( "true" => "True", "false" => "False" ))
         ->setDefaultValue('true')->rebuildElementOnChange();
        
        $content_section->addOptionControl(
            array(
                "type" => 'textfield',
                "name" => __('Decimal Places'),
                "slug" => 'decimals',
                "default" => '0',
            )
        ); 
        
        $content_section->addOptionControl(
            array(
                "type" => 'textfield',
                "name" => __('Separator'),
                "slug" => 'separator',
                "default" => ',',
                "condition" => 'grouping=true'
            )
        ); 
        
        $content_section->addOptionControl(
            array(
                "type" => 'textfield',
                "name" => __('Decimal'),
                "slug" => 'decimal',
                "default" => '.',
                "condition" => 'grouping=true'
            )
        );
        
        
        /**
         * Content
         */
        
        $easing_section = $this->addControlSection("easing_section", __("Easing"), "assets/icon.png", $this);
        
        
        $easing_section->addOptionControl(
            array(
                "type" => "dropdown",
                "name" => "Easing",
                "slug" => "easing",
                "default" => 'true',
            )
        )->setValue(
           array( 
                "true" => "Easing On", 
                "false" => "Linear",
               
           )
       );
        
        $easing_section->addOptionControl(
            array(
                "type" => 'textfield',
                "name" => __('Smart Easing Threshold'),
                "slug" => 'threshold',
                "default" => '999',
                "condition" => 'easing=true'
            )
        );
        
        $easing_section->addOptionControl(
            array(
                "type" => 'textfield',
                "name" => __('Smart Easing Amount'),
                "slug" => 'amount',
                "default" => '333',
                "condition" => 'easing=true'
            )
        );
        
        
        /**
         * Content
         */
        $this->typographySection('Digit Typography', '.oxy-counter_digit',$this);    
        
        
        
    }
    
    
    function customCSS($options, $selector) {
        
        $css = ".oxy-counter {
                    font-size: 48px;
                    line-height: 1.2;
                }";
        
        return $css;
        
    }
    
    
    function afterInit() {
        $this->removeApplyParamsButton();
    }
    
    function allowedEmptyOptions($options) {

        $options_to_add = array(
            "oxy-counter_unit",
            "oxy-counter_end",
            "oxy-counter_before",
        );

        $options = array_merge($options, $options_to_add);

        return $options;
    }
    
    function output_js() {
        
         wp_enqueue_script( 'intersection-js', plugin_dir_url( __FILE__ ) . 'assets/intersectionobserver.js', '', '1.0.0', true );
         wp_enqueue_script( 'countUp-js', plugin_dir_url( __FILE__ ) . 'assets/countUp.js', '', '2.0.5', true );
        
    }
    
    function output_init_js() {
        
        ?>

        <script type="text/javascript">

            jQuery(document).ready(oxygen_init_counter);
            function oxygen_init_counter($) {
                
                var config = {
                    root: null,
                    rootMargin: '0px',
                    threshold: 1
                };
                
                function callback(entries, observer){
                  entries.forEach(entry => {
                    if (entry.isIntersecting) {

                        let $this = $(entry.target),
                            id = $this.attr('id'),
                            $end = $this.attr('data-end');
                        
                        const options = {
                                  startVal: $this.attr('data-start'),
                                  decimalPlaces: $this.attr('data-decimals'),
                                  duration: $this.attr('data-duration'),
                                  useEasing: $this.attr('data-easing'),
                                  useGrouping: $this.attr('data-grouping'),
                                  separator: $this.attr('data-separator'),
                                  decimal: $this.attr('data-decimal'),
                                  smartEasingThreshold: $this.attr('data-threshold'),
                                  smartEasingAmount: $this.attr('data-amount'),
                                };
                            
                        const numAnim = new countUp.CountUp(id, $end, options);
                        if (!countUp.error) {
                          numAnim.start()
                        } else {
                          console.error(countUp.error);
                        }
                        observer.unobserve(entry.target);
                    }
                  }
                )};
                                  
                var observer = new IntersectionObserver(callback,config);
                var counters = document.querySelectorAll('.oxy-counter_digit'); 
                counters.forEach(counter => {
                    observer.observe(counter);
                });                  
        
            }
                
        </script>

    <?php
        
    }

}
// For David: All the parameters that can contain dynamic data, should be added to this filter
add_filter("oxy_base64_encode_options", 
    function($items) { 
        $items=array_merge($items, array('oxy-counter_start', 'oxy-counter_end')); 
        return $items;
    }
);
new ExtraCounter();