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 decided to combine the two (which turned out to be much more difficult than I expected) into what im calling the “david_scroller”.
Sheet Value Shortcode
/**
* Adds shortcode (David Stockdale).
*/
add_shortcode('get_sheet_value', 'sheet_value_shortcode');
/**
* A shortcode for 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 = 'XXXXXXX';
$google_spreadsheet_ID = 'XXXXXXX';
$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;
}Numscroller
Adding Script
/**
* 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.
true //Not needed with Beans.
);
}JQuery
/**
* jQuery scroroller Plugin 1.0
* (With a single small change by David Stockdale)
* 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);
}
}
}));David Scroller Shortcode
/**
* Adds shortcode (David Stockdale).
*/
add_shortcode('david_scroller', 'david_scroller_shortcode');
/**
* Runs the "sheet_value_shortcode" and then uses the result
* to create a "numscroller" which it returns as HTML (David Stockdale).
* ----------Shortcode Use Examples----------
* Location: [david_scroller_shortcode location="'Summary Page'!C3"]
* Delay: [david_scroller_shortcode location="'Summary Page'!C3" delay=10]
* Increment: [david_scroller_shortcode location="'Summary Page'!C3" increment=1]
* Minimum: [david_scroller_shortcode location="'Summary Page'!C3" min=4]
* Default: [david_scroller_shortcode location="'Summary Page'!C3" default=999]
* All: [david_scroller_shortcode location="'Summary Page'!C3" delay=10 increment=1 min=4 default=999]
*/
function david_scroller_shortcode($atts) {
$sho = "[get_sheet_value location=";
$sho .= '"';
$sho .= $atts['location'];
$sho .= '"';
$sho .= "]";
ob_start(); //Start output buffer
echo do_shortcode($sho);
$number = ob_get_contents(); //Grab output
ob_end_clean(); //Discard output buffer
if (!(isset($atts['min']->a)) && !empty($atts['min'])) {
$min = $atts['min'];
} else {
$min = 1;
}
if (!(isset($atts['delay']->a)) && !empty($atts['delay'])) {
$delay = $atts['delay'];
} else {
$delay = 5;
}
if (!(isset($atts['increment']->a)) && !empty($atts['increment'])) {
$increment = $atts['increment'];
} else {
$increment = 10;
}
if (!(isset($atts['default']->a)) && !empty($atts['default'])) {
$default = $atts['default'];
} else {
$default = 0;
}
return <<<HTML
<html>
<body>
<span class="numscroller" data-min=$min data-max=$number data-delay=$delay data-increment=$increment>$default</span>
</body>
</html>
HTML;
}And here it is working:
