global fix of mentions autocomleting, upd of jquery.textcomplete

css/style.css

@@ -360,8 +360,9 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover
     top: 45px;
     right: 10px;
     width: 250px;
-    box-shadow: 0 2px 5px #65686f;
     border: solid 1px rgba( 69, 71, 77, .1 );
+    border-right: solid 6px rgba( 227, 79, 66, .82 );
+    box-shadow: 8px 10px 15px 0px rgba(0,0,0, .3);
 }
 .dialog-modal:after
 {
@@ -393,7 +394,7 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover
 .userMenu-search-sugestions a:hover,
 .userMenu-search-profiles li:hover a
 {
-    background: #fefef1;
+    background: #fefedf;
 }
 .userMenu-search-profiles button
 {
@@ -903,19 +904,17 @@ ol.toptrends-list {
     width: 5px;
     /*right: -5px;*/
 }
-.post:hover,
-.post .post
-{
-    background: #fefef1;
-}
+
 .post:hover
 {
+    background: #fefedf;
     cursor: pointer;
 }
-.post.open:hover
-{
-    background: #fff;
+
+.post .expanded-post .original {
+    background: #fefedf;
 }
+
 .post-photo,
 .mini-profile-photo
 {
@@ -2011,44 +2010,31 @@ ol.toptrends-list {
     right: 8px;
 }
 
-/* Autocomplite*/
-.textcomplete-wrapper textarea {
-    display: inline;
-}
+/*************************************
+*********** AUTOCOMPLETING ***********
+**************************************/
+
 ul.dropdown-menu {
-    position: absolute;
-    top: 23px;
-    left: 170px;
-    z-index: 100;
-    display: block;
-    float: left;
     min-width: 160px;
-    padding: 5px 0;
-    margin: 2px 0 0;
+    padding: 0;
+    margin: 0;
     list-style: none;
     background-color: #fff;
-    border: 1px solid rgba(0,0,0, .2);
-    border-radius: 6px;
-    -webkit-border-radius: 6px;
-    -moz-border-radius: 6px;
-    -webkit-box-shadow: 0 5px 10px rgba(0,0,0, .2);
-    -moz-box-shadow: 0 5px 10px rgba(0,0,0, .2);
-    box-shadow: 0 5px 10px rgba(0,0,0, .2);
-
+    border-radius: 0px;
+    border: solid 1px rgba( 69, 71, 77, .1 );
+    border-right: solid 4px rgba( 227, 79, 66, .82 );
+    box-shadow: 8px 10px 10px 0px rgba(0,0,0, .2);
 }
-ul.dropdown-menu li {
-    line-height: 20px;
 
-}
-ul.dropdown-menu > li > a {
-    display: block;
+ul.dropdown-menu li {
     padding: 3px 20px;
-    clear: both;
     font: 13px/20px "Open Sans", sans-serif;
     white-space: nowrap;
-    -webkit-transition: all 200ms;
-    -moz-transition: all 200ms;
-    -ms-transition: all 200ms;
-    -o-transition: all 200ms;
-    transition: all 200ms;
+}
+
+ul.dropdown-menu li:hover,
+ul.dropdown-menu .active, ul.dropdown-menu .active a {
+    background-color: #fefedf;
+    text-decoration: none;
+    cursor: pointer;
 }

following.html

@@ -25,6 +25,7 @@
     <script src="js/twister_directmsg.js"></script>
     <script src="js/twister_actions.js"></script>
     <script src="js/interface_common.js"></script>
+    <script src="js/jquery.textcomplete.min.js"></script>
 
     <script>
         $(document).ready(function()

home.html

@@ -27,12 +27,11 @@
     <script src="js/twister_directmsg.js"></script>
     <script src="js/interface_common.js"></script>
     <script src="js/interface_home.js"></script>
-    <script src="js/jquery.textcomplete.js"></script>
+    <script src="js/jquery.textcomplete.min.js"></script>
 
     <script>
-    $(function(){setTimeout(mensAutocomplete, 800);})
-    changeStyle();
-    </script> <!-- calm init for autocomplete -->
+      changeStyle();
+    </script>
 
     <link rel="icon" type="image/png" href="img/twister_mini.png" />
   </head>

js/calm.js

@@ -28,8 +28,3 @@ $(function(){
 	};
 	setTimeout(dhtIndicatorBg, 300);
 	setTimeout(function() {setInterval(dhtIndicatorBg, 2000)}, 400);
-
-
-function homeIntInit () {
-	setTimeout(mensAutocomplete, 800);
-}

js/interface_common.js

@@ -798,7 +798,7 @@ function replyTextKeypress(e) {
                         $oldta.on("blur", replyTextKeypress);
                         $oldta.addClass('splited-post');
 
-                        tweetForm.find(".textcomplete-wrapper").append($newta);
+                        tweetForm.find(".textcomplete-wrapper").append($newta); // FIXME come find textcomplete-wrapper anywhere in code
                         $newta.val(cp.substr(ci));
                         $newta.focus();
                         if ($newta[0].setSelectionRange)
@@ -1393,7 +1393,6 @@ function changeStyle() {
         style = 'theme_nin/css/style.css';
         profile = 'theme_nin/css/profile.css';
         $.getScript('theme_nin/js/theme_option.js');
-
     }
 
     if(theme == 'calm')
@@ -1416,29 +1415,30 @@ function changeStyle() {
     setTimeout(function(){$(menu).removeAttr('style')}, 0);
 }
 
-function mensAutocomplete() {
-        var suggests = [];
-
-        for(var i = 0; i < followingUsers.length; i++){
-                if(followingUsers[i] == localStorage.defaultScreenName) continue;
-                suggests.push(followingUsers[i]);
-        }
-        suggests.reverse();
-        $('textarea').textcomplete([
-    { // html
-        mentions: suggests,
-        match: /\B@(\w*)$/,
-        search: function (term, callback) {
-            callback($.map(this.mentions, function (mention) {
-                return mention.indexOf(term) === 0 ? mention : null;
-            }));
-        },
-        index: 1,
-        replace: function (mention) {
-            return '@' + mention + ' ';
+function getMentionsForAutoComplete() {
+    if (defaultScreenName && typeof(followingUsers) !== 'undefined') {
+        var suggests = followingUsers.slice();
+
+        if (suggests.indexOf(defaultScreenName) > -1)
+            suggests.splice(suggests.indexOf(defaultScreenName), 1);
+        if (suggests.length > 0) {
+            suggests.sort();
+
+            return [{
+                mentions: suggests,
+                match: /\B@(\w*)$/,
+                search: function (term, callback) {
+                    callback($.map(this.mentions, function (mention) {
+                        return mention.indexOf(term) === 0 ? mention : null;
+                    }));
+                },
+                index: 1,
+                replace: function (mention) {
+                    return '@'+mention+' ';
+                }
+            }];
         }
     }
-])
 }
 
 function replaceDashboards() {
@@ -1485,10 +1485,6 @@ function initInterfaceCommon() {
     });
     */
 
-    $('.dropdown-menu').on('keydown', function(e){
-            e = event || window.event;
-            e.stopPropagation();
-    })
     $('.post-text').on('click', 'a', function(e){
             e.stopPropagation();
     });
@@ -1529,4 +1525,42 @@ function initInterfaceCommon() {
     $('.bitmessage-ctc').on('click', function(){
         window.prompt(polyglot.t('copy_to_clipboard'), $(this).attr('data'))
     });
+
+    if (typeof($.fn.textcomplete) === 'function') {
+        $('textarea')
+            .on('focus', function () {
+                var element = this;
+                // Cursor has not set yet. And wait 100ms to skip global click event.
+                setTimeout(function () {
+                    // Cursor is ready.
+                    $(element).textcomplete(getMentionsForAutoComplete(), {
+                        'appendTo': ($(element).parents('.dashboard').length > 0) ? $(element).parent() : $('body'),
+                        'listPosition': setTextcompleteDropdownListPos
+                    });
+                }, 100);
+            })
+            .on('focusout', function () {
+                $(this).textcomplete('destroy');
+            })
+        ;
+    }
+}
+
+
+// following workaround function is for calls from $.fn.textcomplete only
+// we need this because currently implementation of caret position detection is way too imperfect
+
+function setTextcompleteDropdownListPos(position) {
+    position = this._applyPlacement(position);
+
+    if (this.option.appendTo.parents('.dashboard').length > 0) {
+        position['position'] = 'fixed';
+        position['top'] = (parseFloat(position['top']) - window.pageYOffset).toString()+'px';
+    } else {
+        position['position'] = 'absolute';
+    }
+
+    this.$el.css(position);
+
+    return this;
 }