Extract tags autocompletion JS to file

app/assets/javascripts/app/pages/settings.js

@@ -4,6 +4,10 @@ app.pages.Settings = Backbone.View.extend({
     $(".settings-visibility").tooltip({placement: "top"});
     $(".profile-visibility-hint").tooltip({placement: "top"});
     $("[name='profile[public_details]']").bootstrapSwitch();
+
+    new Diaspora.TagsAutocomplete("#profile_tag_string", {
+      preFill: gon.preloads.tagsArray
+    });
   }
 });
 // @license-end

app/assets/javascripts/app/views/tag_following_list_view.js

@@ -1,6 +1,5 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
-//= require jquery.autoSuggest.custom
 app.views.TagFollowingList = app.views.Base.extend({
 
   templateName: "tag_following_list",
@@ -30,29 +29,9 @@ app.views.TagFollowingList = app.views.Base.extend({
   },
 
   setupAutoSuggest : function() {
-    this.$("input").autoSuggest("/tags", {
-      selectedItemProp: "name",
-      selectedValuesProp: "name",
-      searchObjProps: "name",
-      asHtmlID: "tags",
-      neverSubmit: true,
-      retrieveLimit: 10,
-      selectionLimit: false,
-      minChars: 2,
-      keyDelay: 200,
-      startText: "",
-      emptyText: "no_results",
+    new Diaspora.TagsAutocomplete(this.$("input"), {
       selectionAdded: _.bind(this.suggestSelection, this)
     });
-
-    this.$("input").bind('keydown', function(evt){
-      if(evt.which === Keycodes.ENTER || evt.which === Keycodes.TAB || evt.which === Keycodes.SPACE) {
-        evt.preventDefault();
-        if( $('li.as-result-item.active').length === 0 ){
-          $('li.as-result-item').first().click();
-        }
-      }
-    });
   },
 
   presenter : function() {

app/assets/javascripts/helpers/tags_autocomplete.js

@@ -0,0 +1,41 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+
+Diaspora.TagsAutocomplete = function(element, opts) {
+  this.initialize(element, opts);
+};
+
+Diaspora.TagsAutocomplete.prototype = {
+  constructor: Diaspora.TagsAutocomplete,
+
+  initialize: function(element, opts) {
+    this.options = {
+      selectedItemProp: "name",
+      selectedValuesProp: "name",
+      searchObjProps: "name",
+      asHtmlID: "tags",
+      neverSubmit: true,
+      retrieveLimit: 10,
+      selectionLimit: false,
+      minChars: 2,
+      keyDelay: 200,
+      startText: "",
+      emptyText: Diaspora.I18n.t("no_results")
+    };
+
+    $.extend(this.options, opts);
+
+    this.autocompleteInput = $(element);
+    this.autocompleteInput.autoSuggest("/tags", this.options);
+    this.autocompleteInput.bind("keydown", this.keydown);
+  },
+
+  keydown: function(evt) {
+    if (evt.which === Keycodes.ENTER || evt.which === Keycodes.TAB || evt.which === Keycodes.SPACE) {
+      evt.preventDefault();
+      if ($("li.as-result-item.active").length === 0) {
+        $("li.as-result-item").first().click();
+      }
+    }
+  }
+};
+// @license-end

app/assets/javascripts/main.js

@@ -17,6 +17,7 @@
 //= require jquery-ui/mouse
 //= require jquery-ui/sortable
 //= require keycodes
+//= require jquery.autoSuggest.custom
 //= require fileuploader-custom
 //= require handlebars.runtime
 //= require posix-bracket-expressions

app/assets/javascripts/mobile/mobile.js

@@ -16,6 +16,7 @@
 //= require bootstrap
 //= require diaspora
 //= require helpers/i18n
+//= require helpers/tags_autocomplete
 //= require widgets/timeago
 //= require mobile/mobile_application
 //= require mobile/mobile_file_uploader

app/assets/javascripts/pages/users-getting-started.js

@@ -49,36 +49,14 @@ Diaspora.Pages.UsersGettingStarted = function() {
       return confirmation;
     });
 
-    /* ------ */
-    var autocompleteInput = $("#follow_tags");
     var tagFollowings = new app.collections.TagFollowings();
-
-    autocompleteInput.autoSuggest("/tags", {
-      selectedItemProp: "name",
-      selectedValuesProp: "name",
-      searchObjProps: "name",
-      asHtmlID: "tags",
-      neverSubmit: true,
-      retrieveLimit: 10,
-      selectionLimit: false,
-      minChars: 2,
-      keyDelay: 200,
-      startText: "",
-      emptyText: "no_results",
+    new Diaspora.TagsAutocomplete("#follow_tags", {
+      preFill: gon.preloads.tagsArray,
       selectionAdded: function(elem){tagFollowings.create({"name":$(elem[0]).text().substring(2)})},
       selectionRemoved: function(elem){
         tagFollowings.where({"name":$(elem[0]).text().substring(2)})[0].destroy();
         elem.remove();
       }
-      });
-
-    autocompleteInput.bind('keydown', function(evt){
-      if(evt.which === Keycodes.ENTER || evt.which === Keycodes.TAB || evt.which === Keycodes.SPACE) {
-        evt.preventDefault();
-        if( $('li.as-result-item.active').length === 0 ){
-          $('li.as-result-item').first().click();
-        }
-      }
     });
   });
 };

app/controllers/profiles_controller.rb

@@ -23,12 +23,7 @@ class ProfilesController < ApplicationController
     @aspect  = :person_edit
     @profile = @person.profile
 
-    @tags = @profile.tags
-    @tags_array = []
-    @tags.each do |obj|
-      @tags_array << { :name => ("#"+obj.name),
-        :value => ("#"+obj.name)}
-      end
+    gon.preloads[:tagsArray] = @profile.tags.map {|tag| {name: "##{tag.name}", value: "##{tag.name}"} }
   end
 
   def update

app/controllers/users_controller.rb

@@ -87,6 +87,7 @@ class UsersController < ApplicationController
     @person   = @user.person
     @profile  = @user.profile
     gon.preloads[:inviter] = PersonPresenter.new(current_user.invited_by.try(:person), current_user).as_json
+    gon.preloads[:tagsArray] = current_user.followed_tags.map {|tag| {name: "##{tag.name}", value: "##{tag.name}"} }
 
     render "users/getting_started"
   end

app/views/profiles/_edit_public.haml

@@ -1,33 +1,3 @@
-- content_for :head do
-  :javascript
-    $(document).ready(function () {
-      var data = $.parseJSON( '#{@tags_array.to_json.gsub("'", "\\\\'")}' ),
-          autocompleteInput = $("#profile_tag_string");
-
-      autocompleteInput.autoSuggest("#{tags_path}", {
-        selectedItemProp: "name",
-        selectedValuesProp: "name",
-        searchObjProps: "name",
-        asHtmlID: "tags",
-        neverSubmit: true,
-        retrieveLimit: 10,
-        minChars: 2,
-        keyDelay: 200,
-        startText: "",
-        emptyText: "#{t('no_results')}",
-        preFill: data
-        });
-
-      autocompleteInput.bind('keydown', function(evt){
-        if(evt.which === Keycodes.ENTER || evt.which === Keycodes.TAB || evt.which === Keycodes.SPACE) {
-          evt.preventDefault();
-          if( $('li.as-result-item.active').length == 0 ){
-            $('li.as-result-item').first().click();
-          }
-        }
-      });
-    });
-
 %h3.inline
   = t("profiles.edit.basic")
   %span{ :title => t("profiles.edit.basic_hint") }

app/views/profiles/edit.mobile.haml

@@ -2,6 +2,12 @@
 -# licensed under the Affero General Public License version 3 or later. See
 -# the COPYRIGHT file.
 
+- content_for :head do
+  :javascript
+    $(document).ready(function () {
+      new Diaspora.TagsAutocomplete("#profile_tag_string", {preFill: gon.preloads.tagsArray});
+    });
+
 .settings_container.container-fluid
   .row
     .col-md-12

app/views/users/getting_started.mobile.haml

@@ -5,31 +5,7 @@
 - content_for :head do
   :javascript
     $(document).ready(function () {
-      var data = $.parseJSON( '#{@tags_array.to_json.gsub("'", "\\\\'")}' ),
-      autocompleteInput = $("#follow_tags");
-
-      autocompleteInput.autoSuggest("#{tags_path}", {
-        selectedItemProp: "name",
-        selectedValuesProp: "name",
-        searchObjProps: "name",
-        asHtmlID: "tags",
-        neverSubmit: true,
-        retrieveLimit: 10,
-        minChars: 2,
-        keyDelay: 200,
-        startText: "",
-        emptyText: "#{t('no_results')}",
-        preFill: data
-        });
-
-      autocompleteInput.bind('keydown', function(evt){
-        if(evt.which === Keycodes.ENTER || evt.which === Keycodes.TAB || evt.which === Keycodes.SPACE) {
-          evt.preventDefault();
-          if( $('li.as-result-item.active').length == 0 ){
-            $('li.as-result-item').first().click();
-          }
-        }
-      });
+      new Diaspora.TagsAutocomplete("#follow_tags");
     });
 
 :css