Linking service Xportability/css-to-pdf to a JavaScript spinner

Question

I noticed that when I click on the button to PDF it takes a bit of time to download the PDF. Is there something I can create an eventListener for? So I can start and end a spinner. This is really an issue on an iPad where it takes a lot longer... but there is at least a good 30-50 seconds until waiting for xep.cloudformatter... to show up.

Or is there something else I can do.

Answer 1

UPDATE: I have added an event "xepOnlineStatus" to the core code. it sets a param to the status and triggers when formatting starts and ends. Those states are "Started" and "Finished". You can implement now a simple JS like this below that will handle these events with the same spinner. The main JS on the site is updated and the Github code will be updated soon.

You can see it in action here: http://www.cloudformatter.com/CSS2Pdf, just format to PDF and the spinner will be enabled.

document.observe('dom:loaded', function() { 

jQuery(document).on("xepOnlineStatus", function(event, state){
if (state == "Started"){
    var screenTop = jQuery(document).scrollTop();
    var screenHeight = jQuery(window).height();
    jQuery('#spinner-overlay').css('top', screenTop);
    jQuery('#spinner-overlay').css('height', screenHeight);
    jQuery('#spinner-overlay').toggle('show');
}
else if (state == "Finished"){
    jQuery('#spinner-overlay').toggle('hide');
}
});

})

END UPDATE: Original answer below left for completeness

In the spirit of "something else" for the moment, here's directions for hacking the current JS and adding some CSS and a DOM element to provide a spinner:

1) Hacking the main (xepOnline.jpPlugin.js):

I changed the Format function like this (on or around line 735)

 Format: function(ElementID, options) {
         var screenTop = jQuery(document).scrollTop();
         var screenHeight = jQuery(window).height();
         jQuery('#spinner-overlay').css('top', screenTop);
         jQuery('#spinner-overlay').css('height', screenHeight);
         jQuery('#spinner-overlay').toggle('show');
                var items;
                if(jQuery.isArray(ElementID)) {
                            items = ElementID;
                } else {
                            items = [ ElementID ];
                }
                return xepOnline.Formatter.__format(items, options);
    },

The only changes here are to grab a couple of var’s for placing the spinner overlay and setting the spinner div appropriately. Then toggle it “on” as this function starts the whole formatting process.

Then I changed the __postBackSuccess and __postBackFailure functions to hide the spinner (on or around lines 787 and 872) as these functions will end the whole process. I added the following inside these functions as the first line:

jQuery('#spinner-overlay').toggle('hide');

Then I changed the POST submitall to cover "download" method. The above would dismiss the spinner after a "newwin" and a "embed" but not a download.

On or around line 698 right after the form is posted, add:

jQuery('#spinner-overlay').toggle('hide');

2) CSS

I added the following CSS for my page:

#spinner-overlay {
background-color: #aaa;
opacity: 0.4;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('/Resources/Images/ajaxSpinner.gif');
background-position: center;
background-repeat: no-repeat;
}

Note: You would point to your own custom spinner as the background-image, mine is that “gif”.

3) Page changes

I added a <div> right after the like this:

<div id="spinner-overlay" style="display:none;"></div>

So what happens … when formatting starts it gets the layout of the current page and expands the spinner div to cover that area, showing the spinner itself overlaid on the screen with some opacity. When format finishes or aborts, it hides that spinner div (or for a download it will hide the spinner when data is posted to the server to format).

Looks nice to me.