0

After creating a Shortcode that aquires google sheet data and then getting a JQuery plugin (numscroll) working that makes numbers scroll up to a certain number when displayed I am having difficulty combining these two solutions into a single "Custom HTML Block".

This is what I am trying to do:

<h2 class="has-text-align-center"><strong>

<span class="numscroller" data-min="1" data-max=[get_sheet_value location="'Summary Page'!C3"] data-delay="5" data-increment="10">0</span>

</strong></h2>

Which for some reason results in the default "data-min" value (1) being displayed (possibly due to the time it takes to get the result?) rather than the correct value.

I've also tried "do_shortcode" but that doesn't change the results.

<h2 class="has-text-align-center"><strong>

<span class="numscroller" data-min="1" data-max=do_shortcode('[get_sheet_value location="'Summary Page'!C3"]') data-delay="5" data-increment="10">0</span>

</strong></h2>

My attempt consists of two parts, part one (which is the shortcode):

[get_sheet_value location="'Summary Page'!C3"]

which calls this function to get the value of a single cell:

/**
 * Aquiring google sheet data (David Stockdale)
 * Shortcode should be something like this: [get_sheet_value location="'Summary Page'!C3"]
 */
function sheet_value_shortcode($atts) {
    $API = 'XXX';
    $google_spreadsheet_ID = 'XXX';
    $api_key = esc_attr( $API);

    $location = $atts['location'];
    $get_cell = new WP_Http();
    $cell_url = "https://sheets.googleapis.com/v4/spreadsheets/$google_spreadsheet_ID/values/$location?&key=$api_key";  
    $cell_response = $get_cell -> get( $cell_url);
    $json_body = json_decode($cell_response['body'],true);  
    $cell_value = $json_body['values'][0][0];
    return $cell_value;
}

add_shortcode('get_sheet_value', 'sheet_value_shortcode');

And part two (which works in a "Custom HTML Block"):

<span class="numscroller" data-min="1" data-max="100" data-delay="5" data-increment="10">0</span>

Which once the script is added:

/**
 * Adds script (David Stockdale).
 */
add_action( 'wp_enqueue_scripts', 'add_my_script' );
/**
 * Adds script for NumScroller (David Stockdale).
 */
function add_my_script() {
    wp_enqueue_script(
        'numscroller-1.0', // name your script so that you can attach other scripts and de-register, etc.
        get_stylesheet_directory_uri() . 
        '/lib/numscroller-1.0.js', // this is the location of your script file.
        array( 'jquery' ), // this array lists the scripts upon which your script depends
        '', //Not needed with Beans, Required with Genisis.
        true //Not needed with Beans, Required with Genisis.
    );
}

Calls this JQuery Plugin:

/**
* jQuery scroroller Plugin 1.0
* 
* http://www.tinywall.net/
* 
* Developers: Arun David, Boobalan
* Copyright (c) 2014 
*/
jQuery(document).ready((function($){
    $(window).on("load",function(){
        $(document).scrollzipInit();
        $(document).rollerInit();
    });
    $(window).on("load scroll resize", function(){
        $('.numscroller').scrollzip({
            showFunction    :   function() {
                                    numberRoller($(this).attr('data-slno'));
                                },
            wholeVisible    :     false,
        });
    });
    $.fn.scrollzipInit=function(){
        $('body').prepend("<div style='position:fixed;top:0px;left:0px;width:0;height:0;' id='scrollzipPoint'></div>" );
    };
    $.fn.rollerInit=function(){
        var i=0;
        $('.numscroller').each(function() {
            i++;
           $(this).attr('data-slno',i); 
           $(this).addClass("roller-title-number-"+i);
        });        
    };
    $.fn.scrollzip = function(options){
        var settings = $.extend({
            showFunction    : null,
            hideFunction    : null,
            showShift       : 0,
            wholeVisible    : false,
            hideShift       : 0,
        }, options);
        return this.each(function(i,obj){
            $(this).addClass('scrollzip');
            if ( $.isFunction( settings.showFunction ) ){
                if(
                    !$(this).hasClass('isShown')&&
                    ($(window).outerHeight()+$('#scrollzipPoint').offset().top-settings.showShift)>($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))&&
                    ($('#scrollzipPoint').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))<($(this).outerHeight()+$(this).offset().top-settings.showShift)
                ){
                    $(this).addClass('isShown');
                    settings.showFunction.call( this );
                }
            }
            if ( $.isFunction( settings.hideFunction ) ){
                if(
                    $(this).hasClass('isShown')&&
                    (($(window).outerHeight()+$('#scrollzipPoint').offset().top-settings.hideShift)<($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))||
                    ($('#scrollzipPoint').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))>($(this).outerHeight()+$(this).offset().top-settings.hideShift))
                ){
                    $(this).removeClass('isShown');
                    settings.hideFunction.call( this );
                }
            }
            return this;
        });
    };
    function numberRoller(slno){
            var min=$('.roller-title-number-'+slno).attr('data-min');
            var max=$('.roller-title-number-'+slno).attr('data-max');
            var timediff=$('.roller-title-number-'+slno).attr('data-delay');
            var increment=$('.roller-title-number-'+slno).attr('data-increment');
            var numdiff=max-min;
            var timeout=(timediff*1000)/numdiff;
            //if(numinc<10){
                //increment=Math.floor((timediff*1000)/10);
            //}//alert(increment);
            numberRoll(slno,min,max,increment,timeout);

    }
    function numberRoll(slno,min,max,increment,timeout){//alert(slno+"="+min+"="+max+"="+increment+"="+timeout);
        if(min<=max){
            $('.roller-title-number-'+slno).html(min);
            min=parseInt(min)+parseInt(increment);
            setTimeout(function(){numberRoll(eval(slno),eval(min),eval(max),eval(increment),eval(timeout))},timeout);
        }else{
            $('.roller-title-number-'+slno).html(max);
        }
    }
}));

Both of these solutions work on their own, how can I combine them?

Also sorry if the solution turns out to be something really obvious or this should be posted somewhere else, but I just started using WordPress like 2 weeks ago and I'm still getting the hang of it.

0

Ended up creating a plugin for this: https://davidstockdalescrapcode.co.uk/my-plugins

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.