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.closeImage = ImagePaths.get('facebox/closelabel.png');
-    $.facebox.settings.loadingImage = app.baseImageUrl()+'facebox/loading.gif';
+    $.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) {
@@ -43,4 +43,4 @@ Handlebars.registerHelper('personImage', function(person, size, imageClass) {
 
 Handlebars.registerHelper('localTime', function(timestamp) {
   return new Date(timestamp).toLocaleString();
-});
+});

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

@@ -31,12 +31,12 @@ $(document).ready(function(){
     evt.preventDefault();
     $("#app").toggleClass('draw');
   });
-  
+
   /* Show / hide aspects in the drawer */
   $('#all_aspects').bind("tap click", function(evt){
     evt.preventDefault();
     $("#all_aspects + li").toggleClass('hide');
-  });  
+  });
 
   /* Heart toggle */
   $(".like_action", ".stream").bind("tap click", function(evt){
@@ -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,13 +5,13 @@ 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;
 }
 
 #main_nav {
-  width: 100%;  
+  width: 100%;
 
   #header_title {
     display: inline-block;
@@ -32,7 +32,7 @@ header {
       font-weight: bold;
       font-size: smaller;
       background-color: transparent;
-      
+
       img {
         height: 30px;
         width: 30px;
@@ -48,7 +48,7 @@ header {
       background-color: $red;
       margin-left: -8px;
     }
-    
+
     #conversation_icon {
       height: 18px;
     }
@@ -62,7 +62,7 @@ header {
   width: 100%;
   left: 100%;
   background-color: #444;
-  
+
           box-shadow: -2px 0px 2px 1px #333;
        -o-box-shadow: -2px 0px 2px 1px #333;
       -ms-box-shadow: -2px 0px 2px 1px #333;
@@ -73,7 +73,7 @@ header {
     position: static;
     left: 100%;
     right: -80%;
-    
+
     #global_search {
       position: relative;
 
@@ -109,7 +109,7 @@ header {
       }
     }
   }
-  
+
   nav {
     position: absolute;
     top: 45px;
@@ -124,7 +124,7 @@ header {
       color: $light-grey;
       border-bottom: solid rgb(53, 53, 53) 2px;
     }
-    
+
     li:hover {
       background-color: $link-grey;
     }
@@ -132,21 +132,21 @@ header {
     .no_border {
       padding: 0px;
       border-bottom: 0px;
-      
+
       &:hover {
         background-color: transparent;
       }
-      
+
       > ul > li > a {
         font-size: 14px;
         padding: 8px 42px;
       }
     }
-    
+
     .hide {
       display: none;
     }
-    
+
     .avatar {
       height: 35px;
       width: 35px;
@@ -154,7 +154,7 @@ header {
       float: right;
     }
   }
-  
+
   a {
     display: block;
     color: $light-grey;

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

@@ -9,13 +9,13 @@ ul.as-selections {
 	border-radius: 3px;
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
-	/* 1% padding (all sides) + 98% width = 100% */  
+	/* 1% padding (all sides) + 98% width = 100% */
 	padding: 1%;
 	width: 98%;
 }
 
 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 {
@@ -171,20 +171,20 @@ li.as-result-item.active {
 	text-shadow: 0 1px 2px #122042;
 }
 
-li.as-result-item em { 
+li.as-result-item em {
-	font-style: normal; 
+	font-style: normal;
-	background: #444;  
+	background: #444;
 	padding: 0 2px;
 	color: #fff;
 }
 
-li.as-result-item.active em { 
+li.as-result-item.active em {
-	background: #253f7a;  
+	background: #253f7a;
 	color: #fff;
 }
 
 /* Webkit Hacks  */
-@media screen and (-webkit-min-device-pixel-ratio:0) {	
+@media screen and (-webkit-min-device-pixel-ratio:0) {
 	ul.as-selections li.as-selection-item {
 		padding-top: 6px;
 		padding-bottom: 6px;
@@ -218,7 +218,7 @@ ul.as-selections li.as-selection-item a.as-close {
 }
 
 /* Firefox 3.0 Hacks */
-ul.as-list,  x:-moz-any-link, x:default { 
+ul.as-list,  x:-moz-any-link, x:default {
 	border: 1px solid #ccc;
 }
 BODY:first-of-type ul.as-list, x:-moz-any-link, x:default { /* Target FF 3.5+ */

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