Dynamic asset paths everywhere

* Use asset pipeline aware helpers in CSS files
* Add js_image_paths to push image asset names to the client side JS

Changelog.md

@@ -12,6 +12,8 @@ Rails.application.config.secret_token = '***********...'
 Diaspora::Application.config.secret_key_base = '*************...'
 ```
 
+You also need to take care to set `RAILS_ENV` while precompiling assets: `RAILS_ENV=production bundle exec rake assets:precompile`
+
 ## Change in defaults.yml
 The default for including jQuery from a CDN has changed. If you want to continue to include it from a CDN, please explicitly set the `jquery_cdn` setting to `true` in diaspora.yml.
 

Gemfile

@@ -79,6 +79,7 @@ gem 'entypo-rails', '2.2.2'
 gem 'backbone-on-rails', '1.1.1'
 gem 'handlebars_assets', '0.12.0'
 gem 'jquery-rails',      '3.0.4'
+gem 'js_image_paths',    '0.0.1'
 
 # jQuery plugins
 

Gemfile.lock

@@ -237,6 +237,8 @@ GEM
       thor (>= 0.14, < 2.0)
     jquery-ui-rails (4.2.1)
       railties (>= 3.2.16)
+    js_image_paths (0.0.1)
+      rails (~> 4.0)
     json (1.8.1)
     jwt (1.0.0)
     kaminari (0.16.1)
@@ -535,6 +537,7 @@ DEPENDENCIES
   jasmine (= 2.0.2)
   jasmine-jquery-rails (= 2.0.3)
   jquery-rails (= 3.0.4)
+  js_image_paths (= 0.0.1)
   json (= 1.8.1)
   markerb (= 1.0.2)
   messagebus_ruby_api (= 1.0.3)

app/assets/javascripts/app/app.js

@@ -37,11 +37,6 @@ var app = {
     return this._user || false
   },
 
-  baseImageUrl: function(baseUrl){
-    if(baseUrl) { return this._baseImageUrl = baseUrl }
-    return this._baseImageUrl || "assets/"
-  },
-
   initialize: function() {
     app.router = new app.Router();
 
@@ -91,8 +86,8 @@ var app = {
   },
 
   setupFacebox: function() {
-    $.facebox.settings.closeImage = app.baseImageUrl()+'facebox/closelabel.png';
-    $.facebox.settings.loadingImage = app.baseImageUrl()+'facebox/loading.gif';
+    $.facebox.settings.closeImage = ImagePaths.get('facebox/closelabel.png');
+    $.facebox.settings.loadingImage = ImagePaths.get('facebox/loading.gif');
     $.facebox.settings.opacity = 0.75;
   },
 

app/assets/javascripts/app/helpers/handlebars-helpers.js

@@ -3,7 +3,7 @@ Handlebars.registerHelper('t', function(scope, values) {
 });
 
 Handlebars.registerHelper('imageUrl', function(path){
-  return app.baseImageUrl() + path;
+  return ImagePaths.get(path);
 });
 
 Handlebars.registerHelper('linkToPerson', function(context, block) {

app/assets/javascripts/app/views/location_view.js

@@ -8,7 +8,7 @@ app.views.Location = Backbone.View.extend({
   },
 
   render: function(){
-    $(this.el).append('<img alt="delete location" src="/assets/ajax-loader.gif">');
+    $(this.el).append('<img alt="delete location" src="'+ImagePaths.get('ajax-loader.gif')+'">');
   },
 
   getLocation: function(e){
@@ -18,7 +18,7 @@ app.views.Location = Backbone.View.extend({
     locator.getAddress(function(address, latlng){
       $(element).html('<input id="location_address" type="text" class="input-block-level" value="' + address + '"/>');
       $('#location_coords').val(latlng.latitude + "," + latlng.longitude);
-      $(element).append('<a id="hide_location"><img alt="delete location" src="/assets/deletelabel.png"></a>');
+      $(element).append('<a id="hide_location"><img alt="delete location" src="'+ImagePaths.get('deletelabel.png')+'"></a>');
     });
   },
 });

app/assets/javascripts/inbox.js

@@ -81,7 +81,7 @@ $(document).ready(function(){
     debug: false,
     donetext: "no more.",
     loadingText: "",
-    loadingImg: '/assets/ajax-loader.gif'
+    loadingImg: ImagePaths.get('ajax-loader.gif')
   }, function(){
     $('.conversation-wrapper', '.stream').bind('mousedown', function(){
       bindIt($(this));

app/assets/javascripts/main.js

@@ -2,6 +2,7 @@
  *   licensed under the Affero General Public License version 3 or later.  See
  *   the COPYRIGHT file.
  */
+//= require js_image_paths
 //= require underscore
 //= require backbone
 //= require jquery.hotkeys

app/assets/javascripts/mobile.js

@@ -319,7 +319,7 @@ function createUploader(){
         $('#publisher_textarea_wrapper').addClass("with_attachments");
         $('#photodropzone').append(
           "<li class='publisher_photo loading' style='position:relative;'>" +
-            "<img alt='Ajax-loader2' src='/assets/ajax-loader2.gif' />" +
+            "<img alt='Ajax-loader2' src='"+ImagePaths.get('ajax-loader2.gif')+"' />" +
           "</li>"
           );
        },

app/assets/javascripts/view.js

@@ -115,7 +115,7 @@ var View = {
 
   avatars: {
     fallback: function(evt) {
-      $(this).attr("src", "/assets/user/default.png");
+      $(this).attr("src", ImagePaths.get("user/default.png"));
     },
     selector: "img.avatar"
   }

app/assets/javascripts/widgets/infinite-scroll.js

@@ -11,7 +11,7 @@
       debug: false,
       donetext: Diaspora.I18n.t("infinite_scroll.no_more"),
       loadingText: "",
-      loadingImg: "/assets/ajax-loader.gif",
+      loadingImg: ImagePaths.get("ajax-loader.gif"),
       navSelector: "#pagination",
       nextSelector: ".paginate",
       itemSelector: ".stream_element",

app/assets/javascripts/widgets/lightbox.js

@@ -176,7 +176,7 @@ jQuery.fn.center = (function() {
     this.resetLightbox = function() {
       self.lightbox.hide();
       self.body.removeClass("lightboxed");
-      self.image.attr("src", "assets/ajax-loader2.gif");
+      self.image.attr("src", ImagePaths.get("ajax-loader2.gif"));
       self.imageset.html("");
     };
 

app/assets/stylesheets/header.css.scss

@@ -5,7 +5,7 @@
 
 body > header {
   @include box-shadow(0,1px,3px,rgba(0,0,0,0.9));
-  background: url('header-bg.png') rgb(40,35,35);
+  background: image-url('header-bg.png') rgb(40,35,35);
   z-index: 1001;
   padding: 6px 0;
   color: #CCC;

app/assets/stylesheets/mobile/header.css.scss

@@ -5,7 +5,7 @@ header {
   height: 45px;
   top: 0px;
   z-index: 10;
-  background: url('../header-bg-long.jpg') rgb(40,35,35);
+  background: image-url('header-bg-long.jpg') rgb(40,35,35);
   @include box-shadow(0, 1px, 2px, #333);
   border-bottom: 1px solid #222;
 }

app/assets/stylesheets/vendor/autoSuggest.css.erb

@@ -15,7 +15,7 @@ ul.as-selections {
 }
 
 ul.as-selections.loading {
-  background: url("/assets/ajax-loader.gif") right center no-repeat;
+  background: url('<%= image_path("ajax-loader.gif") %>')  right center no-repeat;
 }
 
 ul.as-selections li {

app/helpers/layout_helper.rb

@@ -19,15 +19,6 @@ module LayoutHelper
     pod_name
   end
 
-  def set_asset_host
-    path = AppConfig.environment.assets.host.to_s + '/assets/'
-    content_tag(:script) do
-      <<-JS.html_safe
-        if(window.app) app.baseImageUrl("#{path}")
-      JS
-    end
-  end
-
   def load_javascript_locales(section = 'javascripts')
     content_tag(:script) do
       <<-JS.html_safe

app/models/profile.rb

@@ -74,7 +74,7 @@ class Profile < ActiveRecord::Base
              else
                self[:image_url]
              end
-    result || '/assets/user/default.png'
+    result || ActionController::Base.helpers.image_path('user/default.png')
   end
 
   def from_omniauth_hash(omniauth_user_hash)

app/views/layouts/application.html.haml

@@ -40,7 +40,6 @@
       = javascript_include_tag :main, :templates
       = load_javascript_locales
 
-    = set_asset_host
     = translation_missing_warnings
     = current_user_atom_tag