Changeset 1957

Timestamp:

10/10/2015 09:25:06 PM (8 years ago)

Author:

ocean90

Message:

Trac: Add autocomplete for usernames and attachments.

For now the list of usernames includes users who have commented to the ticket. Core Trac includes also committers.

Props helen, johnbillion, DrewAPicture, ocean90.
See #830.

Location:

sites/trunk

Files:

• trac.wordpress.org/templates/core/site-specific.html (modified) (1 diff)
• trac.wordpress.org/templates/site.html (modified) (1 diff)
• wordpress.org/public_html/style/trac/wp-trac.css (modified) (1 diff)
• wordpress.org/public_html/style/trac/wp-trac.js (modified) (4 diffs)

sites/trunk/trac.wordpress.org/templates/core/site-specific.html

@@ -51 +51 @@
 };
 
+var wpTracAutoCompleteUsers = {
+    include: $.map( wpTracContributorLabels, function( v, k ) { return k } ),
+    exclude: [
+        'slackbot',
+        'ircbot',
+    ]
+};
+
 </script>
 </body>

sites/trunk/trac.wordpress.org/templates/site.html

@@ -300 +300 @@
     </script>
 
+    <script py:if="req.authname">
+    var wpTracCurrentUser = "${req.authname}";
+    </script>
+
     <!--! JavaScript -->
+    <script src="//s.w.org/style/trac/jquery.caret.min.js?ver=2015-02-01"></script>
+    <script src="//s.w.org/style/trac/jquery.atwho.min.js?ver=1.0.1"></script>
     <script src="//s.w.org/style/trac/wp-trac.js?${scripts_version}"></script>
 

sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css

@@ -1649 +1649 @@
 }
 
+/**
+ * Autocomplete via At.js.
+ */
+
+.atwho-container {
+    font-size: 1.3em
+}
+
+.atwho-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: none;
+    margin-top: 18px;
+    background: #fff;
+    color: black;
+    border: 1px solid #ccc;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    min-width: 120px;
+    max-height: 200px;
+    overflow: auto;
+    z-index: 11110 !important;
+}
+
+.atwho-view .cur {
+    background: #0073aa;
+    color: #fff;
+}
+
+.atwho-view .cur small {
+    color: #fff;
+}
+
+.atwho-view strong {
+    color: #0073aa;
+}
+
+.atwho-view .cur strong {
+    color: #fff;
+    font: bold;
+}
+
+.atwho-view ul {
+    /* width: 100px; */
+    list-style: none;
+    padding: 0;
+    margin: auto;
+}
+
+.atwho-view ul li {
+    display: block;
+    padding: 5px 10px;
+    border-bottom: 1px solid #ccc;
+    cursor: pointer;
+}
+
+.atwho-view ul li:last-child {
+    border-bottom: 0;
+}
+
+.atwho-view small {
+    font-size: smaller;
+    color: #777;
+    font-weight: normal;
+}
+
+
 /* =Responsive / Mobile
 ----------------------------------------------- */

sites/trunk/wordpress.org/public_html/style/trac/wp-trac.js

@@ -44 +44 @@
 
         gardener: typeof wpBugGardener !== 'undefined',
+        currentUser: wpTracCurrentUser,
 
         init: function() {
@@ -54 +55 @@
                 wpTrac.showContributorLabels( wpTracContributorLabels );
             }
+
+            wpTrac.autocomplete.init();
 
             if ( ! $(document.body).hasClass( 'plugins' ) ) {
@@ -74 +77 @@
             });
         },
+
         // These ticket hacks need to be re-run after ticket previews.
         postPreviewHacks: function() {
@@ -411 +415 @@
             });
         },
+
+        autocomplete: (function() {
+            var users,
+                attachments,
+                settings = {};
+
+            return {
+                init: function() {
+                    if ( ! $( '#comment' ).length ) {
+                        return;
+                    }
+
+                    if ( 'undefined' !== typeof wpTracAutoCompleteUsers ) {
+                        settings = wpTracAutoCompleteUsers;
+                    }
+
+                    users = this.getUsers();
+                    attachments  = this.getAttachments();
+
+                    $( '#comment' ).atwho({
+                        at:  '@',
+                        data: users
+                    }).atwho({
+                        at: '[att',
+                        insertTpl: '${atwho-at}achment:${name}]',
+                        displayTpl: '<li>${display}</li>',
+                        data: attachments
+                    });
+                },
+
+                getUsers: function() {
+                    var users  = [], exclude = [];
+
+                    if ( 'undefined' !== settings.exclude ) {
+                        exclude = settings.exclude;
+                    }
+
+                    // Most recent should show up first.
+                    $( $( '.change .username' ).get().reverse() ).each( function() {
+                        var username = $(this).data( 'username' );
+                        if (
+                            typeof username !== 'undefined' &&
+                            -1 === $.inArray( username, users ) &&
+                            -1 === $.inArray( username, exclude )
+                        ) {
+                            users.push( $(this).data( 'username' ) );
+                        }
+                    });
+
+                    // Add additional users.
+                    if ( 'undefined' !== typeof settings.include ) {
+                        $.each( settings.include, function( k, username ) {
+                            if ( -1 === $.inArray( username, users ) ) {
+                                users.push( username );
+                            }
+                        });
+                    }
+
+                    // Exclude current user.
+                    if ( 'undefined' !== wpTrac.currentUser ) {
+                        users = $.grep( users, function( user ) {
+                            return user != wpTrac.currentUser;
+                        });
+                    }
+
+                    return users;
+                },
+
+                getAttachments: function() {
+                    var attachments = [];
+
+                    // Most recent should show up first.
+                    $ ($( 'dl.attachments dt' ).get().reverse() ).each( function() {
+                        attachments.push({
+                            display: $( this ).text(),
+                            name: $( this ).find( 'a[title="View attachment"]' ).text()
+                        });
+                    });
+
+                    return attachments;
+                }
+            };
+        }()),
 
         workflow: (function() {