Run user select Js only where needed

Transform current implementation into regular Coffescript classes
so that the same call method can be reused on the dispatcher
as for other classes.

app/assets/javascripts/dispatcher.js.coffee

@@ -62,6 +62,7 @@ class Dispatcher
         new TeamMembers()
       when 'groups:members'
         new GroupMembers()
+        new UsersSelect()
       when 'groups:new', 'groups:edit', 'admin:groups:edit'
         new GroupAvatar()
       when 'projects:tree:show'
@@ -81,6 +82,8 @@ class Dispatcher
       when 'admin'
         new Admin()
         switch path[1]
+          when 'groups'
+            new UsersSelect()
           when 'projects'
             new NamespaceSelect()
       when 'dashboard'
@@ -95,6 +98,8 @@ class Dispatcher
             new ProjectNew()
           when 'show'
             new ProjectShow()
+          when 'issues', 'merge_requests'
+            new ProjectUsersSelect()
           when 'wikis'
             new Wikis()
             shortcut_handler = new ShortcutsNavigation()
@@ -103,6 +108,7 @@ class Dispatcher
             shortcut_handler = new ShortcutsNavigation()
           when 'team_members', 'deploy_keys', 'hooks', 'services', 'protected_branches'
             shortcut_handler = new ShortcutsNavigation()
+            new UsersSelect()
 
 
     # If we haven't installed a custom shortcut handler, install the default one

app/assets/javascripts/project_users_select.js.coffee

-@projectUsersSelect =
-  init: ->
-    $('.ajax-project-users-select').each (i, select) ->
+class @ProjectUsersSelect
+  constructor: ->
+    $('.ajax-project-users-select').each (i, select) =>
       project_id = $(select).data('project-id') || $('body').data('project-id')
 
       $(select).select2
@@ -28,14 +28,16 @@
             Api.user(id, callback)
 
 
-        formatResult: projectUsersSelect.projectUserFormatResult
-        formatSelection: projectUsersSelect.projectUserFormatSelection
+        formatResult: (args...) =>
+          @formatResult(args...)
+        formatSelection: (args...) =>
+          @formatSelection(args...)
         dropdownCssClass: "ajax-project-users-dropdown"
         dropdownAutoWidth: true
         escapeMarkup: (m) -> # we do not want to escape markup since we are displaying html in results
           m
 
-  projectUserFormatResult: (user) ->
+  formatResult: (user) ->
     if user.avatar_url
       avatar = user.avatar_url
     else
@@ -52,8 +54,5 @@
        <div class='user-username'>#{user.username}</div>
      </div>"
 
-  projectUserFormatSelection: (user) ->
+  formatSelection: (user) ->
     user.name
-
-$ ->
-  projectUsersSelect.init()

app/assets/javascripts/users_select.js.coffee

-$ ->
-  userFormatResult = (user) ->
-    if user.avatar_url
-      avatar = user.avatar_url
-    else
-      avatar = gon.default_avatar_url
-
-    "<div class='user-result'>
-       <div class='user-image'><img class='avatar s24' src='#{avatar}'></div>
-       <div class='user-name'>#{user.name}</div>
-       <div class='user-username'>#{user.username}</div>
-     </div>"
-
-  userFormatSelection = (user) ->
-    user.name
-
-  $('.ajax-users-select').each (i, select) ->
+class @UsersSelect
+  constructor: ->
+    $('.ajax-users-select').each (i, select) =>
       $(select).select2
         placeholder: "Search for a user"
         multiple: $(select).hasClass('multiselect')
@@ -30,8 +16,25 @@ $ ->
             Api.user(id, callback)
 
 
-      formatResult: userFormatResult
-      formatSelection: userFormatSelection
+        formatResult: (args...) =>
+          @formatResult(args...)
+        formatSelection: (args...) =>
+          @formatSelection(args...)
         dropdownCssClass: "ajax-users-dropdown"
         escapeMarkup: (m) -> # we do not want to escape markup since we are displaying html in results
           m
+
+  formatResult: (user) ->
+    if user.avatar_url
+      avatar = user.avatar_url
+    else
+      avatar = gon.default_avatar_url
+
+    "<div class='user-result'>
+       <div class='user-image'><img class='avatar s24' src='#{avatar}'></div>
+       <div class='user-name'>#{user.name}</div>
+       <div class='user-username'>#{user.username}</div>
+     </div>"
+
+  formatSelection: (user) ->
+    user.name