Adding Adobe Edge Scripts into Rails Asset Pipeline

Question

This is likely a simple case of bringing external scripts with dependencies into Rails.

I'm trying to get my Adobe Edge generated Animations to work within my Rails app and the first step is to include all of Adobe Edge's generated js files, but so far I'm just getting a bunch of 404 Not Found Errors for all of the Edge files I've included in the Application.js file.

Here's my Application.js file

//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require california_internet
//= require hero_edgePreload
//= require edge_includes/edge.1.5.0.min
//= require hero_edge
//= require hero_edgeActions

Here is how Edge's Preloader.js is trying to find some of the files...

aLoader=[{load:"edge_includes/jquery-1.7.1.min.js"},{load:"edge_includes/edge.1.5.0.min.js"},{load:"hero_edge.js"},{load:"hero_edgeActions.js"}]

score 1 · Answer 1 · answered Oct 28 '13 at 08:12

The way I got this to work was change hero_edgePreload.js to hero_edgePreload.js.erb

And change:

aLoader=[
  {load:"edge_includes/jquery-1.7.1.min.js"},
  {load:"edge_includes/edge.1.5.0.min.js"},
  {load:"hero_edge.js"},
  {load:"hero_edgeActions.js"}
];

To:

aLoader=[
  // {load:"edge_includes/jquery-1.7.1.min.js"}, Already required in application.js
  {load:'<%= asset_path("edge.1.5.0.min.js") %>'},
  {load:'<%= asset_path("hero_edge.js") %>'},
  {load:'<%= asset_path("hero_edgeActions.js") %>'}
];

You can remove any Adobe Edge JS files from your requires in application.js too.

You'll have to add asset_path to any images in hero_edge.js and change it to hero_edge.js.erb too.

If there's an easier way, I'd love to know it :)

score 1 · Answer 2 · answered Nov 27 '13 at 09:30

The solution of Michael Johnston of changing Edge's aLoader paths works, but gives errors. While on localhost, I would get Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. on random basis, while after deployment to Heroku at every page refresh.

Additionally, my app depends on jQuery already in higher version - therefore adding the one from Edge animation could possibly cause conflicts.

After trial and error(s) I decided to use this solution:

place the whole animation into /public/edge folder
put the animation into an iframe: <iframe class="animation-container" src='/edge/animation.html' />

Not the most elegant one, but certainly saves a lot of headaches.

Adding Adobe Edge Scripts into Rails Asset Pipeline

2 Answers2