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).
