[folder perm, share] contacts input: improvement

static/scripts/app/views/folder-perm.js

@@ -89,34 +89,7 @@ define([
             });
 
             // use select2 to 'user' input in 'add user perm'
-            $('[name="email"]', $add_user_perm).select2({
+            $('[name="email"]', $add_user_perm).select2(Common.contactInputOptionsForSelect2);
-                placeholder: gettext("Enter emails or select contacts"),
-                tags: function () {
-                    var contacts = app.pageOptions.contacts || [];
-                    var contact_list = [];
-                    for (var i = 0, len = contacts.length; i < len; i++) {
-                        contact_list.push({ // 'id' & 'text' are required by the plugin
-                            "id": contacts[i].email,
-                            "text": contacts[i].name + contacts[i].email, // for search. both name & email can be searched.
-                            "avatar": contacts[i].avatar,
-                            "name": contacts[i].name
-                        });
-                    }
-                    return contact_list;
-                },
-                tokenSeparators: [',', ' '],
-                formatResult: function(item) { // format items shown in the drop-down menu
-                    if (item.avatar) {
-                        return item.avatar + '<span class="text">' + item.name + '<br />' + item.id + '</span>';
-                    } else {
-                        return; // if no match, show nothing
-                    }
-                },
-                formatSelection: function(item) { // format selected item shown in the input
-                    return item.name || item.id; // if no name, show the email, i.e., when directly input, show the email
-                },
-                escapeMarkup: function(m) { return m; }
-            });
 
             // use select2 to 'group' input in 'add group perm'
             var groups = app.pageOptions.groups || [],

static/scripts/app/views/share.js

@@ -405,43 +405,12 @@ define([
         },
 
         filePrivateSharePanelInit: function() {
-            var loading_tip = this.$('.loading-tip');
             var form = this.$('#file-private-share-form');
-            loading_tip.show();
 
-            $('[name="emails"]', form).select2({
+            $('[name="emails"]', form).select2($.extend({
-                placeholder: gettext("Enter emails or select contacts"),
+                width: '400px'
-                width: '400px',
+            },Common.contactInputOptionsForSelect2));
-                // with 'tags', the user can directly enter, not just select
-                // tags need `<input type="hidden" />`, not `<select>`
-                tags: function () {
-                    var contacts = app.pageOptions.contacts || [];
-                    var contact_list = [];
-                    for (var i = 0, len = contacts.length; i < len; i++) {
-                        contact_list.push({ // 'id' & 'text' are required by the plugin
-                            "id": contacts[i].email,
-                            "text": contacts[i].name + contacts[i].email, // for search. both name & email can be searched.
-                            "avatar": contacts[i].avatar,
-                            "name": contacts[i].name
-                        });
-                    }
-                    return contact_list;
-                },
-                formatResult: function(item) { // format items shown in the drop-down menu
-                    if (item.avatar) {
-                        return item.avatar + '<span class="text">' + item.name + '<br />' + item.id + '</span>';
-                    } else {
-                        return; // if no match, show nothing
-                    }
-                },
-                formatSelection: function(item) { // format selected item shown in the input
-                    return item.name || item.id; // if no name, show the email, i.e., when directly input, show the email
-                },
-                tokenSeparators: [',', ' '],
-                escapeMarkup: function(m) { return m; }
-            });
            
-            loading_tip.hide(); 
             form.removeClass('hide');
         },
 
@@ -485,40 +454,11 @@ define([
 
         dirPrivateSharePanelInit: function() {
             // no 'share to all'
-            var loading_tip = this.$('.loading-tip');
             var form = this.$('#dir-private-share-form');
-            loading_tip.show();
 
-            var contacts = app.pageOptions.contacts || [];
+            $('[name="emails"]', form).select2($.extend({
-            $('[name="emails"]', form).select2({
+                width: '400px'
-                placeholder: gettext("Select contacts or input"),
+            },Common.contactInputOptionsForSelect2));
-                width: '400px',
-                tags: function () {
-                    var contacts = app.pageOptions.contacts || [];
-                    var contact_list = [];
-                    for (var i = 0, len = contacts.length; i < len; i++) {
-                        contact_list.push({ // 'id' & 'text' are required by the plugin
-                            "id": contacts[i].email,
-                            "text": contacts[i].name + contacts[i].email, // for search. both name & email can be searched.
-                            "avatar": contacts[i].avatar,
-                            "name": contacts[i].name
-                        });
-                    }
-                    return contact_list;
-                },
-                formatResult: function(item) { // format items shown in the drop-down menu
-                    if (item.avatar) {
-                        return item.avatar + '<span class="text">' + item.name + '<br />' + item.id + '</span>';
-                    } else {
-                        return; // if no match, show nothing
-                    }
-                },
-                formatSelection: function(item) { // format selected item shown in the input
-                    return item.name || item.id; // if no name, show the email, i.e., when directly input, show the email
-                },
-                tokenSeparators: [',', ' '],
-                escapeMarkup: function(m) { return m; }
-            });
            
             var groups = app.pageOptions.groups || [];
             var g_opts = '';
@@ -531,7 +471,6 @@ define([
                 escapeMarkup: function(m) { return m; }
             });
 
-            loading_tip.hide(); 
             form.removeClass('hide');
         },
 

static/scripts/common.js

@@ -486,6 +486,45 @@ define([
             });
         },
 
+        contactInputOptionsForSelect2: {
+            placeholder: gettext("Enter emails or select contacts"),
+
+            // with 'tags', the user can directly enter, not just select
+            // tags need `<input type="hidden" />`, not `<select>`
+            tags: function () {
+                var contacts = app.pageOptions.contacts || [];
+                var contact_list = [];
+                for (var i = 0, len = contacts.length; i < len; i++) {
+                    contact_list.push({ // 'id' & 'text' are required by the plugin
+                        "id": contacts[i].email,
+                        // for search. both name & email can be searched.
+                        // use ' '(space) to separate name & email
+                        "text": contacts[i].name + ' ' + contacts[i].email,
+                        "avatar": contacts[i].avatar,
+                        "name": contacts[i].name
+                    });
+                }
+                return contact_list;
+            },
+
+            tokenSeparators: [',', ' '],
+
+            // format items shown in the drop-down menu
+            formatResult: function(item) {
+                if (item.avatar) {
+                    return item.avatar + '<span class="text">' + item.name + '<br />' + item.id + '</span>';
+                } else {
+                    return; // if no match, show nothing
+                }
+            },
+
+            // format selected item shown in the input
+            formatSelection: function(item) {
+                return item.name || item.id; // if no name, show the email, i.e., when directly input, show the email
+            },
+            escapeMarkup: function(m) { return m; }
+        },
+
         // check if a file is an image
         imageCheck: function (filename) {
             // no file ext