Load branches for status images only after opening the popup

assets/scripts/app/templates/repos/show/tools.hbs

@@ -37,38 +37,6 @@
   </ul>
 </div>
 
-<div id="status-images" class="popup">
-  <a href="#" class="close" {{action popupClose target="view"}}></a>
-  <p>
-    <label>{{t repositories.branch}}:</label>
-    {{#if view.branches.isLoaded}}
-      {{view Ember.Select contentBinding="view.branches" selectionBinding="view.statusImageBranch" optionLabelPath="content.commit.branch" optionValuePath="content.commit.branch"}}
-    {{else}}
-      <span class="loading"></span>
-    {{/if}}
-  </p>
-  <p>
-    <label>{{t repositories.image_url}}:</label>
-    <input type="text" class="url" {{bindAttr value="view.statusImageUrl"}}></input>
-  </p>
-  <p>
-    <label>{{t repositories.markdown}}:</label>
-    <input type="text" class="markdown" {{bindAttr value="view.markdownStatusImage"}}></input>
-  </p>
-  <p>
-    <label>{{t repositories.textile}}:</label>
-    <input type="text" class="textile" {{bindAttr value="view.textileStatusImage"}}></input>
-  </p>
-  <p>
-    <label>{{t repositories.rdoc}}:</label>
-    <input type="text" class="rdoc" {{bindAttr value="view.rdocStatusImage"}}></input>
-  </p>
-  <p>
-    <label>{{t repositories.asciidoc}}:</label>
-    <input type="text" class="asciidoc" {{bindAttr value="view.asciidocStatusImage"}}></input>
-  </p>
-</div>
-
 <div id="regenerate-key" class="popup">
   <a href="#" class="close" {{action popupClose target="view"}}></a>
   <p>

assets/scripts/app/templates/status_images.hbs

@@ -0,0 +1,29 @@
+<a href="#" class="close" {{action close target="view"}}></a>
+<p>
+  <label>{{t repositories.branch}}:</label>
+  {{#if view.branches.isLoaded}}
+    {{view Ember.Select contentBinding="view.branches" selectionBinding="view.statusImageBranch" optionLabelPath="content.commit.branch" optionValuePath="content.commit.branch"}}
+  {{else}}
+    <span class="loading"></span>
+  {{/if}}
+</p>
+<p>
+  <label>{{t repositories.image_url}}:</label>
+  <input type="text" class="url" {{bindAttr value="view.statusImageUrl"}}></input>
+</p>
+<p>
+  <label>{{t repositories.markdown}}:</label>
+  <input type="text" class="markdown" {{bindAttr value="view.markdownStatusImage"}}></input>
+</p>
+<p>
+  <label>{{t repositories.textile}}:</label>
+  <input type="text" class="textile" {{bindAttr value="view.textileStatusImage"}}></input>
+</p>
+<p>
+  <label>{{t repositories.rdoc}}:</label>
+  <input type="text" class="rdoc" {{bindAttr value="view.rdocStatusImage"}}></input>
+</p>
+<p>
+  <label>{{t repositories.asciidoc}}:</label>
+  <input type="text" class="asciidoc" {{bindAttr value="view.asciidocStatusImage"}}></input>
+</p>

assets/scripts/app/views.coffee

@@ -9,6 +9,10 @@ require 'ext/ember/namespace'
     popupClose: (event) ->
       $(event.target).closest('.popup').removeClass('display')
     popupCloseAll: ->
+      if view = Travis.View.currentPopupView
+        view.destroy()
+        Travis.View.currentPopupView = null
+
       $('.popup').removeClass('display')
 
 require 'views/accounts'
@@ -23,3 +27,4 @@ require 'views/sidebar'
 require 'views/stats'
 require 'views/signin'
 require 'views/top'
+require 'views/status_images'

assets/scripts/app/views/repo/show.coffee

@@ -105,7 +105,12 @@
     statusImages: (event) ->
       @set('active', true)
       @closeMenu()
-      @popup(event)
+      @popupCloseAll()
+      view = Travis.StatusImagesView.create(toolsView: this)
+      # TODO: create a general mechanism for managing current popup
+      #       and move all popups to use it
+      Travis.View.currentPopupView = view
+      view.appendTo($('body'))
       event.stopPropagation()
 
     regenerateKeyPopup: (event) ->
@@ -181,38 +186,3 @@
       if permissions = Travis.app.get('currentUser.permissions')
         permissions.contains @get('repo.id')
     ).property('Travis.app.currentUser.permissions.length', 'repo.id')
-
-    urlRepo: (->
-      "https://#{location.host}/#{@get('repo.slug')}"
-    ).property('repo.slug')
-
-    branches: (->
-      @get('repo.branches') if @get('active')
-    ).property('active', 'repo.branches')
-
-    setStatusImageBranch: (->
-      if @get('repo.branches.isLoaded')
-        @set('statusImageBranch', @get('repo.branches').findProperty('commit.branch', @get('build.commit.branch')))
-      else
-        @set('statusImageBranch', null)
-    ).observes('repo.branches', 'repo.branches.isLoaded', 'build.commit.branch')
-
-    statusImageUrl: (->
-      Travis.Urls.statusImage(@get('repo.slug'), @get('statusImageBranch.commit.branch'))
-    ).property('repo.slug', 'statusImageBranch')
-
-    markdownStatusImage: (->
-      "[![Build Status](#{@get('statusImageUrl')})](#{@get('urlRepo')})"
-    ).property('statusImageUrl')
-
-    textileStatusImage: (->
-      "!#{@get('statusImageUrl')}!:#{@get('urlRepo')}"
-    ).property('statusImageUrl')
-
-    rdocStatusImage: (->
-      "{<img src=\"#{@get('statusImageUrl')}\" alt=\"Build Status\" />}[#{@get('urlRepo')}]"
-    ).property('statusImageUrl')
-
-    asciidocStatusImage: (->
-      "image:#{@get('statusImageUrl')}[\"Build Status\", link=\"#{@get('urlRepo')}\"]"
-    ).property('statusImageUrl')

assets/scripts/app/views/status_images.coffee

@@ -0,0 +1,53 @@
+Travis.StatusImagesView = Em.View.extend
+  templateName: 'status_images'
+  elementId: 'status-images'
+  classNames: ['popup']
+  classNameBindings: ['display']
+
+  repoBinding:  'toolsView.repo'
+  buildBinding: 'toolsView.build'
+  jobBinding:   'toolsView.job'
+  branchesBinding: 'repo.branches'
+
+  didInsertElement: ->
+    @_super.apply(this, arguments)
+
+    @setStatusImageBranch()
+    @show()
+
+  show: ->
+    @set('display', true)
+
+  close: ->
+    @destroy()
+
+  urlRepo: (->
+    "https://#{location.host}/#{@get('repo.slug')}"
+  ).property('repo.slug')
+
+  setStatusImageBranch: (->
+    if @get('repo.branches.isLoaded')
+      @set('statusImageBranch', @get('repo.branches').findProperty('commit.branch', @get('build.commit.branch')))
+    else
+      @set('statusImageBranch', null)
+  ).observes('repo.branches', 'repo.branches.isLoaded', 'build.commit.branch')
+
+  statusImageUrl: (->
+    Travis.Urls.statusImage(@get('repo.slug'), @get('statusImageBranch.commit.branch'))
+  ).property('repo.slug', 'statusImageBranch')
+
+  markdownStatusImage: (->
+    "[![Build Status](#{@get('statusImageUrl')})](#{@get('urlRepo')})"
+  ).property('statusImageUrl')
+
+  textileStatusImage: (->
+    "!#{@get('statusImageUrl')}!:#{@get('urlRepo')}"
+  ).property('statusImageUrl')
+
+  rdocStatusImage: (->
+    "{<img src=\"#{@get('statusImageUrl')}\" alt=\"Build Status\" />}[#{@get('urlRepo')}]"
+  ).property('statusImageUrl')
+
+  asciidocStatusImage: (->
+    "image:#{@get('statusImageUrl')}[\"Build Status\", link=\"#{@get('urlRepo')}\"]"
+  ).property('statusImageUrl')