8
votes

I have these files in my lib/assets folder (sketchyPad is a jQuery plugin for drawing on html5 canvas and farbastic is a color picker used by sketchyPad):

lib/
|-- assets
|   |-- javascripts
|   |   `-- lib.js
|   `-- sketchyPad
|       |-- README.md
|       |-- brushes
|       |   |-- simple.js
|       |   `-- smooth.js
|       |-- example
|       |   |-- index.html
|       |   |-- jquery-ui-1.8.16.custom
|       |   |   |-- css
|       |   |   |   `-- ui-lightness
|       |   |   |       |-- images
|       |   |   |       |   |-- ui-bg_diagonals-thick_18_b81900_40x40.png
|       |   |   |       |   |-- ui-bg_diagonals-thick_20_666666_40x40.png
|       |   |   |       |   |-- ui-bg_flat_10_000000_40x100.png
|       |   |   |       |   |-- ui-bg_glass_100_f6f6f6_1x400.png
|       |   |   |       |   |-- ui-bg_glass_100_fdf5ce_1x400.png
|       |   |   |       |   |-- ui-bg_glass_65_ffffff_1x400.png
|       |   |   |       |   |-- ui-bg_gloss-wave_35_f6a828_500x100.png
|       |   |   |       |   |-- ui-bg_highlight-soft_100_eeeeee_1x100.png
|       |   |   |       |   |-- ui-bg_highlight-soft_75_ffe45c_1x100.png
|       |   |   |       |   |-- ui-icons_222222_256x240.png
|       |   |   |       |   |-- ui-icons_228ef1_256x240.png
|       |   |   |       |   |-- ui-icons_ef8c08_256x240.png
|       |   |   |       |   |-- ui-icons_ffd27a_256x240.png
|       |   |   |       |   `-- ui-icons_ffffff_256x240.png
|       |   |   |       `-- jquery-ui-1.8.16.custom.css
|       |   |   `-- js
|       |   |       `-- jquery-ui-1.8.16.custom.min.js
|       |   |-- jquery.min.js
|       |   `-- mattfarina-farbtastic-4bb6bbf
|       |       |-- CHANGELOG.html
|       |       |-- LICENSE.txt
|       |       |-- README.html
|       |       |-- README.md
|       |       |-- demo1.html
|       |       |-- demo2.html
|       |       |-- farbtastic.css
|       |       |-- farbtastic.js
|       |       |-- farbtastic.min.js
|       |       |-- marker.png
|       |       |-- mask.png
|       |       `-- wheel.png
|       |-- sketchyPad.css
|       `-- sketchyPad.js

So I want to include sketchyPad.js, sketchyPad.css and also all the js in the brushes folder and also the farbtastic.min js file.

In app/assets/javascripts/application.js I put:

//= require sketchyPad (this part works fine and correctly includes sketchyPad.js)

but I also want to include

lib/assets/sketchyPad/brushes/simple.js
lib/assets/sketchyPad/brushes/smooth.js

and any other js files in the brushes folder, how do I use require_directory when it is not in the app/assets but in the lib/assets or vendor/assets?

Update:

I have tried

require_tree sketchyPad

but errors with:

require_tree argument must be a relative path

I have tried

require_tree ./sketchyPad

but errors with:

require_tree argument must be a directory

I think require_tree must be relative to the app/assets folder, but putting something like

require_tree ./../lib/assets/sketchyPad/brushes

also gives error:

require_tree argument must be a directory

Eitherway I don't want to include the entire sketchyPad tree, because it does contain some js files that I don't want to include... like examples and it's own version of older jQuery.

UPDATE:

What I ended up doing was creating a lib.js in the lib/assets/javascripts folder with a manifest to include the sketchyPad js files as relative to the lib/assets folder rather than the app/assets folder.

in app/assets/javascripts/application.js I put:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require lib

and in lib/assets/javascripts/lib.js I put:

//= require ./../sketchyPad/sketchyPad
//= require_tree ./../sketchyPad/brushes
//= require ./../sketchyPad/example/mattfarina-farbtastic-4bb6bbf/farbtastic.min

That appears to include the correct files. Was there an easier way to do this?

3
Question: where is the file in which you'd like to place the import directive?Hubert OG

3 Answers

2
votes

Perhaps:

//= require_tree ./sketchyPad
2
votes

No need to create/change manifest, just add the following line to application.rb

config.autoload_paths += %W(#{config.root}/lib)
config.autoload_paths += Dir["#{config.root}/lib/**/"]
1
votes

The Rails way (according to this answer which worked for me) would be to create an index.js file in lib/assets/sketchyPad with just

//= require_tree .

Although it looks like the plug-in is quite extensive, so I'd imagine you have to split it further into subdirectories.