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.
