prevent Adobe Edge preload.js file from loading jquery

First I have to say that I am not a professional programmer but designer learning by doing. So I am afraid I need simple explanations if possible. I am using Edge animate as parts of a website with the help of a particular script (by Andrew Trice, see here: http://www.tricedesigns.com/2012/07/12/using-adobe-edge-animations-as-components/ ). I also succeeded in storing only 1 Edge preload.js file in my libs folder. In it I introduced a variable at the end in order to be able to load Edge animations one after another. Code:

function setupAnimationView( template ) { 

var $workPage = $("#workPage")

$workPage.empty();
window.AdobeEdge = undefined;
AdobeEdge = undefined;

var viewModel = { workChart: workChart };

var html = Mustache.to_html(template, viewModel)
$workPage.append( html );

//detect if edge is loaded yet
var edgeDetectionFunction = function() {

    if ( AdobeEdge && AdobeEdge.compositions != undefined ) {
        //put a delay here
        var hasComposition = false;

        if ( AdobeEdge.compositions ) {
            //loop to see if the composition is actually loaded
            for ( var key in AdobeEdge.compositionDefns ) {
                hasComposition = true;
                break;
            }
        }

        if ( hasComposition ) {
            setTimeout( function() { 
                $(window).trigger( "animationReady" ); }, 100 );    
            return;

        }
    }
    else if ( AdobeEdge ) {
        window.onDocLoaded();
    }
    setTimeout( edgeDetectionFunction, 100 );
}
edgeDetectionFunction();

}

Modified Adobe Edge preload.js:

...

   requiresSVG=false;

doDelayLoad=false;
htFallbacks={
};

aLoader = [
{ load: "libs/jquery-1.10.2.min.js"},
{ load: "libs/jquery.easing.1.3.js"},
{ load: "libs/jquery.rotate.js"},
{ load: "libs/edge.1.0.0.min.js"},
    {test: !hasJSON, yep:"libs/json2_min.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edge.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edgeActions.js"}];

loadResources(aLoader, doDelayLoad);

preContent={dom:[
]}
;//simpleContent

dlContent={dom: [
]}
;//simpleContent

//updated paths for loader
//added this so it can be invoked later
window.onDocLoaded = onDocLoaded;

})( "animation_content");

So far thanks to Andrew everything works very fine except that I saw in my developer tool (Safari) that my code leads to loading the basic js files like jquery-1.10.2.min.js over and over again each time a new animation starts to run and this files are summing up to an endless number… which I guess isn’t a good thing. I even understand why (at least I believed) and so I deleted the respective lines in the aLoader object at the end of preload. (of course they are loaded within the script tag in my index page)

aLoader = [
{ load: "libs/jquery-1.10.2.min.js"}, // deleted this one
{ load: "libs/jquery.easing.1.3.js"}, // deleted this one
{ load: "libs/jquery.rotate.js"}, // deleted this one
{ load: "libs/edge.1.0.0.min.js"}, // deleted this one
    {test: !hasJSON, yep:"libs/json2_min.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edge.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edgeActions.js"}];

because I can’t see why it would be necessary to load them more than once. Yet, after doing so only the first animation runs, the second does not any longer. But why? I checked in the browser and see that jquery-1.10.2.min.js is in the page so why can’t (or seems so) the Edge files use it any longer? The same for the other ones (rotate etc.). I also tried to suppress these two lines from the function above:

window.AdobeEdge = undefined;
AdobeEdge = undefined;

without any result though. Where is the trick to avoid reloading those basic needed .js files? Any ideas? Thank you so much for advice Garavani

@Jamie

EDIT: So ,hello Jamie! I was so curious about your solution that I dropped everything else and tried it. Sadly it does not work in the situation I tried to explain as exactly as possible in the lines above this edit. To avoid any misunderstandings here my changed code following your instructions (very good explanation by the way!):

edgePreload.js (in my version it has no filename addition and lies in my „lib“ folder that is accessed by each new animation after the method by Andrew - see above!) :

window.AdobeEdge = window.AdobeEdge || {};
window.AdobeEdge.$_ = $;
// Include yepnope
if(!AdobeEdge.yepnope) {…

Then further on:

$(function() { // your insert opening function

(function(compId){

var htFallbacks; …

…
window.onDocLoaded = onDocLoaded;

})( "animation_content");

}); // your insert closure

My index.html contains the following scripts (among others):

<script src="libs/jquery-1.11.0.min.js"></script>
<script src="libs/jquery.easing.1.3.js"></script>
<script src="libs/jquery.rotate.js"></script>
<script src="libs/edge.1.0.0.min.js"></script>
<script src="libs/mustache.js"></script>
<script src="libs/mustacheHelper.js"></script>

which I like to host on my server. (avoiding all kinds of trouble coming up with versions updates not under my control)

Now I dared and hoped to be able to cancel that stuff from my aLoader arrow as follows:

aLoader = [
// { load: "libs/jquery-1.11.0.min.js"},
// { load: "libs/jquery.easing.1.3.js"},
// { load: "libs/jquery.rotate.js"},
// { load: "libs/edge.1.0.0.min.js"},
    {test: !hasJSON, yep:"libs/json2_min.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edge.js"},
      { load: "templates/Chart_" + workChart + "/Page_work_edgeActions.js"}];     

but id t doesn’t work (throwing all kinds of errors obviously based on lacking edge codes). When I replace all in the aLoader again at least it works without showing errors concerning the new inserted lines. But I have no result. Yet, would be soooooooooo cool!!! Did I miss something? Did you really check thoroughly what I did in my initial lines above?

I am curious to hear your ideas! Thank you so far for your interest and willing to share your knowledge of this complicated edge material (not much discussed - for good reasons I guess – here in stack overflow).

Answers:

Answer

I've been having the exact issue and you've probably solved it by now, but hopefully it'll help someone else.

1) Make sure you get your files by choosing 'HTML' in your publish settings, and publishing to a clean folder.

2) Use a prettifier tool (e.g. http://jsbeautifier.org/) to make the [filename]_edgePreload.js file readable.

3) Add this line window.AdobeEdge.$_ = $; just under the top line window.AdobeEdge = window.AdobeEdge || {};

4) Find this line (function(compId) { (which is the start of the load method) and wrap that whole method (everything between here and the bottom of the page) with $(function() { and });

5) In the aLoader array, remove the first two entries that specify how to load edge and jquery.

6) Add the edge library (currently https://animate.adobe.com/runtime/4.0.1/edge.4.0.1.min.js) to the head of your site, along with jQuery.


Don't feel too bad that this was confusing, the Adobe Edge output code has been written by a cabbage with legs. Everyone struggles with it :)

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.