Pass configuration through the DOM rather than relying on ERB rendering, removing the coupling between rendered assets and the backend application configuration in place at time of rendering.

Author: mjtko

app/assets/javascripts/backbone/broadcasters/faye.js.coffee.erb renamed to app/assets/javascripts/backbone/broadcasters/faye.js.coffee

@@ -1,7 +1,8 @@
 class Kandan.Broadcasters.FayeBroadcaster
 
   constructor: ()->
-    @fayeClient = new Faye.Client("<%= ENV['KANDAN_FAYE_URL'] %>/remote/faye")
+    endpoint = $('body').data('kandan-config').broadcaster.config.endpoint
+    @fayeClient = new Faye.Client(endpoint)
 
     @fayeClient.disable('websocket')
     authExtension = {

app/assets/javascripts/backbone/helpers/avatars.js.coffee

@@ -1,8 +1,8 @@
 class Kandan.Helpers.Avatars
   @urlFor: (a, options) ->
     size = options.size || 30
-    fallback = options.fallback || Kandan.options.avatarFallback || 'mm'
+    fallback = options.fallback || Kandan.options().avatar_fallback || 'mm'
     avatarHash = a.gravatar_hash || a.get('user').gravatar_hash || a.get('gravatarHash')
-    Kandan.options.avatarUrl.replace(/%{hash}/, avatarHash).
+    Kandan.options().avatar_url.replace(/%{hash}/, avatarHash).
       replace(/%{size}/, size).
       replace(/%{fallback}/, fallback)

app/assets/javascripts/backbone/helpers/channels.js.coffee

@@ -2,7 +2,6 @@ class Kandan.Helpers.Channels
 
   @options:
     autoScrollThreshold: 0.90
-    maxActivities: Kandan.options.perPage
 
   @pastAutoScrollThreshold: (channelId)->
     currentPosition     = @currentScrollPosition channelId
@@ -45,7 +44,7 @@ class Kandan.Helpers.Channels
 
   @flushActivities: (channelId)->
     $channelActivities = $("#channel-activities-#{channelId}")
-    if $channelActivities.children().length == @options.maxActivities + 1
+    if $channelActivities.children().length == Kandan.options().per_page + 1
       $channelActivities.children().first().remove()
       oldest = $channelActivities.children().first().data("activity-id")
       $channelActivities.prev().data("oldest", oldest)

app/assets/javascripts/backbone/kandan.js.coffee.erb renamed to app/assets/javascripts/backbone/kandan.js.coffee

@@ -16,13 +16,12 @@ window.Kandan =
   Data:         {}
   Plugins:      {}
 
-  options:
-    broadcaster: "<%= Kandan::Config.options[:broadcaster][:name] %>"
-    perPage    : <%= Kandan::Config.options[:per_page] %>
-    nowThreshold: 3000
-    timestampRefreshInterval: 2000
-    avatarUrl: "<%= Kandan::Config.options[:avatar_url] %>"
-    avatarFallback: "<%= Kandan::Config.options[:avatar_fallback] %>"
+  options: ->
+    unless @_options?
+      @_options = $('body').data('kandan-config')
+      @_options.nowThreshold = 3000
+      @_options.timestampRefreshInterval = 2000
+    return @_options
 
 
   # TODO this is a helper method to register plugins
@@ -69,7 +68,7 @@ window.Kandan =
 
 
   initBroadcasterAndSubscribe: ()->
-    Kandan.broadcaster = eval "new Kandan.Broadcasters.#{@options.broadcaster}Broadcaster()"
+    Kandan.broadcaster = eval "new Kandan.Broadcasters.#{@options().broadcaster.name}Broadcaster()"
     Kandan.broadcaster.subscribe "/channels/*"
     @registerAppEvents()
 
@@ -80,10 +79,10 @@ window.Kandan =
 
         $(document).data('active-channel-id',
           Kandan.Helpers.Channels.getChannelIdByTabIndex(ui.index))
-        
-        #the need for the delay feels hacky to me. 
+
+        #the need for the delay feels hacky to me.
         #It is there because the chat area has to render before scrollHeight can be determined.
-        theId = Kandan.Helpers.Channels.getActiveChannelId() 
+        theId = Kandan.Helpers.Channels.getActiveChannelId()
         delay = (ms, func) -> setTimeout func, ms
         delay 1, -> Kandan.Helpers.Channels.scrollToLatestMessage(theId)
         Kandan.Data.Channels.runCallbacks('change')
@@ -134,8 +133,8 @@ window.Kandan =
   registerUtilityEvents: ()->
     window.setInterval(=>
       for el in $(".posted_at")
-        $(el).text (new Date($(el).data("timestamp"))).toRelativeTime(@options.nowThreshold)
-    , @options.timestampRefreshInterval)
+        $(el).text (new Date($(el).data("timestamp"))).toRelativeTime(@options().nowThreshold)
+    , @options().timestampRefreshInterval)
 
   init: ->
     channels = new Kandan.Collections.Channels()

app/assets/templates/activity_base.jst.eco

@@ -1,5 +1,5 @@
 <span class="posted_at">
-  <%= new Date(@activity.created_at).toRelativeTime(Kandan.options.nowThreshold) %>
+  <%= new Date(@activity.created_at).toRelativeTime(Kandan.options().nowThreshold) %>
 </span>
 <img class="avatar" src="<%= @activity.avatarUrl %>"/>
 

app/assets/templates/message.jst.eco

@@ -1,5 +1,5 @@
 <span class="posted_at">
-  <%= new Date(@activity.created_at).toRelativeTime(Kandan.options.nowThreshold) %>
+  <%= new Date(@activity.created_at).toRelativeTime(Kandan.options().nowThreshold) %>
 </span>
 <img class="avatar" src="<%= @activity.avatarUrl %>"/>
 

app/assets/templates/user_notification.jst.eco

@@ -1,5 +1,5 @@
 <span class="posted_at">
-  <%= new Date(@activity.created_at).toRelativeTime(Kandan.options.nowThreshold) %>
+  <%= new Date(@activity.created_at).toRelativeTime(Kandan.options().nowThreshold) %>
 </span>
 <img class="avatar" src="<%= @activity.avatarUrl %>"/>
 

app/views/layouts/application.html.erb

@@ -17,7 +17,7 @@
     <% end %>
   <%- end %>
 </head>
-<body>
+<body data-kandan-config="<%= Kandan::Config.to_json %>">
   <div id="kandan">
     <div class="header">
       <a href="/">

lib/kandan_config.rb

@@ -1,6 +1,5 @@
 module Kandan
   class Config
-
     class << self
       def options
         @config ||= YAML.load_file "#{Rails.root}/config/kandan_settings.yml"
@@ -9,6 +8,14 @@ def options
       def broadcaster
         Broadcasters.const_get(Kandan::Config.options[:broadcaster][:name])
       end
+
+      def to_json
+        @json_representation ||= options.dup.tap do |h|
+          h[:broadcaster][:config] = {
+            endpoint: "#{ENV['KANDAN_FAYE_URL']}/remote/faye"
+          }
+        end.to_json
+      end
     end
 
   end