Access Sprockets assets (images)
sfcgeorge opened this issue · 3 comments
It would be great if you could use the Sprockets view method asset_path
in Hyperloop components.
Here is one way to do it. Add this file (and make sure it is required in your Sprockets JS manifest):
app/assets/javascripts/asset_path.js.erb
<%
# Alternatively there's a gem to do all this but seems over complicated
# https://github.com/izaurio/js_assets
asset_paths = {}
Rails.application.assets.each_file do |path|
if path =~ %r{/app/assets/images} # alter to suit your needs
asset = Rails.application.assets.find_asset(path)
asset_paths[asset.logical_path] = asset.digest_path
end
end
assets_host = Rails.application.config.action_controller.asset_host
assets_host = "/" unless assets_host.present?
assets_root = File.join(assets_host, Rails.application.config.assets.prefix)
%>
(function () {
var asset_paths = <%= asset_paths.to_json %>;
var assets_root = <%= assets_root.to_json %>;
window.asset_path = function(logical_path) {
return assets_root + "/" + asset_paths[logical_path];
};
})();
You can either call the above JavaScript method via backticks, or add a nicer Opal method in your ApplicationComponent #227:
app/hyperloop/components/application_component.rb
class ApplicationComponent < Hyperloop::Component
def asset_path(logical_path)
`asset_path(#{logical_path})`
end
end
Inherit from ApplicationComponent and use the method in your components:
class Logo < ApplicationComponent
render do
IMG(src: asset_path("logo.png")) {}
end
end
Really nice...
I propose we add a config switch Hyperloop.config.visible_assets
that is assigned either nil, (none), true (all) a pattern (which must match) , an array of strings (subdirectories of app/assets/
to match) or a proc (which will return truthy/falsy values)
Hyperloop.configuration do |config|
config.visible_assets = %r{/app/assets/images} # or
config.visible_assets = true # everything!
config.visible_assets = false # nothing
config.visible_assets = ['app/assets/images', 'app/assets/funky']
config.visible_assets = lambda { |file| file =~ %r{/app/assets/images/*.png} }
end
Too many options?
I just looked at https://github.com/izaurio/js_assets
why not just use that? You said it was complicated... do you mean internally. The API looks straight forward.