jquery-atwho-rails 0.1.3 → 0.1.4

data/README.md

@@ -4,7 +4,7 @@ bind your textarea
 
 ```javascript
 data = ['tom','john'];
-$('textarea').atwho("@",{'debug':true,'data':data});
+$('textarea').atwho("@",{'data':data});
 ```
 
 that's it, check it out!

data/lib/assets/javascripts/jquery.atwho.js

@@ -24,557 +24,580 @@
 */
 
 (function($) {
-    /* 克隆(镜像) inputor. 用于获得@在输入框中的位置
-             * 复制它的大小形状相关的样式. */
+    var At, AtView, Mirror, log, _DEFAULT_TPL, _evalTpl, _highlighter, _isNil, _objectify, _sorter, _unique;
     Mirror = function($origin) {
-        this.init($origin);
-    }
+      this.init($origin);
+      return this;
+    };
     Mirror.prototype = {
-        $mirror: null,
-        css : ["overflowY", "height", "width", "paddingTop", "paddingLeft", "paddingRight", "paddingBottom", "marginTop", "marginLeft", "marginRight", "marginBottom",'fontFamily', 'borderStyle', 'borderWidth','wordWrap', 'fontSize', 'lineHeight', 'overflowX'],
-        init: function($origin) {
-            $mirror =  $('<div></div>');
-            var css = {
-                opacity: 0, 
-                position: 'absolute', 
-                left: 0,
-                top:0, 
-                zIndex: -20000,
-                'white-space':'pre-wrap'
-            }
-            $.each(this.css,function(i,p){
-                css[p] = $origin.css(p);
-            });
-            $mirror.css(css);
-            $('body').append($mirror);
-            this.$mirror = $mirror;
-        },
-        setContent: function(html) {
-            this.$mirror.html(html);
-        },
-        getFlagPos:function() {
-            return this.$mirror.find("span#flag").position();
-        },
-        height: function() {
-          return this.$mirror.height();
-        }
+      $mirror: null,
+      css: ["overflowY", "height", "width", "paddingTop", "paddingLeft", "paddingRight", "paddingBottom", "marginTop", "marginLeft", "marginRight", "marginBottom", 'fontFamily', 'borderStyle', 'borderWidth', 'wordWrap', 'fontSize', 'lineHeight', 'overflowX'],
+      init: function($origin) {
+        var $mirror, css;
+        $mirror = $('<div></div>');
+        css = {
+          opacity: 0,
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          zIndex: -20000,
+          'white-space': 'pre-wrap'
+        };
+        $.each(this.css, function(i, p) {
+          return css[p] = $origin.css(p);
+        });
+        $mirror.css(css);
+        $('body').append($mirror);
+        return this.$mirror = $mirror;
+      },
+      setContent: function(html) {
+        return this.$mirror.html(html);
+      },
+      getFlagRect: function() {
+        var $flag, pos;
+        $flag = this.$mirror.find("span#flag");
+        pos = $flag.position();
+        return {
+          left: pos.left,
+          top: pos.top,
+          bottom: $flag.height() + pos.top
+        };
+      },
+      height: function() {
+        return this.$mirror.height();
+      }
+    };
+    At = function(inputor) {
+      var $inputor,
+        _this = this;
+      $inputor = this.$inputor = $(inputor);
+      this.options = {};
+      this.query = {
+        text: "",
+        start: 0,
+        stop: 0
+      };
+      this._cache = {};
+      this.pos = 0;
+      this.flags = {};
+      this.theflag = null;
+      this.search_word = {};
+      this.view = AtView;
+      this.mirror = new Mirror($inputor);
+      $inputor.on("keyup.inputor", function(e) {
+        var lookup, stop;
+        stop = e.keyCode === 40 || e.keyCode === 38;
+        lookup = !(stop && _this.view.isShowing());
+        if (lookup) return _this.lookup();
+      }).on("mouseup.inputor", function(e) {
+        return _this.lookup();
+      });
+      this.init();
+      log("At.new", $inputor[0]);
+      return this;
     };
-    At = {
-        keyword : {'text':"",'start':0,'stop':0},
-        _cache : {},
-        // textarea, input.
-        $inputor : null,
-        // prevent from duplicate binding.
-        inputor_keys: [],
-        lenght : 0,
-        /* @ position in inputor */
-        pos: 0,
-        flags:{},
-        theflag:null,
-        options:{},
-        search_word:{},
-        searchWord:function() {
-            // just used in At.watchWithData
-            search_word = this.search_word[this.theflag];
-            if (search_word)
-                return search_word;
-            var match = /data-keyname=['?]\$\{(\w+)\}/g.exec(this.getOpt('tpl'));
-            return this.search_word[this.theflag] = !_isNil(match) ? match[1] : null;
-        },
-        getOpt: function(key) {
-            var flag = this.theflag;
+    At.prototype = {
+      constructor: At,
+      init: function() {
+        var _this = this;
+        this.$inputor.on('keydown.inputor', function(e) {
+          return _this.onkeydown(e);
+        }).on('scroll.inputor', function(e) {
+          return _this.view.hide();
+        }).on('blur.inputor', function(e) {
+          return _this.view.hide(1000);
+        });
+        return log("At.init", this.$inputor[0]);
+      },
+      reg: function(flag, options) {
+        var opt;
+        opt = {};
+        if ($.isFunction(options)) {
+          opt['callback'] = options;
+        } else {
+          opt = options;
+        }
+        this.options[flag] = $.extend({}, $.fn.atWho["default"], opt);
+        return log("At.reg", this.$inputor[0], flag, options);
+      },
+      dataValue: function() {
+        var match, search_word;
+        search_word = this.search_word[this.theflag];
+        if (search_word) return search_word;
+        match = /data-value=['?]\$\{(\w+)\}/g.exec(this.getOpt('tpl'));
+        return this.search_word[this.theflag] = !_isNil(match) ? match[1] : null;
+      },
+      getOpt: function(key) {
+        try {
+          return this.options[this.theflag][key];
+        } catch (error) {
+          return null;
+        }
+      },
+      rect: function() {
+        var $inputor, Sel, at_rect, bottom, end_range, format, html, mirror, offset, start_range, text, x, y;
+        $inputor = this.$inputor;
+        if (document.selection) {
+          Sel = document.selection.createRange();
+          x = Sel.boundingLeft + $inputor.scrollLeft();
+          y = Sel.boundingTop + $(window).scrollTop() + $inputor.scrollTop();
+          bottom = y + Sel.boundingHeight;
+          return {
+            top: y,
+            left: x,
+            bottom: bottom
+          };
+        }
+        mirror = this.mirror;
+        format = function(value) {
+          return value.replace(/</g, '&lt').replace(/>/g, '&gt').replace(/`/g, '&#96').replace(/"/g, '&quot').replace(/\r\n|\r|\n/g, "<br />");
+        };
+        /* 克隆完inputor后将原来的文本内容根据
+          @的位置进行分块,以获取@块在inputor(输入框)里的position
+        */
+        text = $inputor.val();
+        start_range = text.slice(0, this.pos - 1);
+        end_range = text.slice(this.pos + 1);
+        html = "<span>" + format(start_range) + "</span>";
+        html += "<span id='flag'>@</span>";
+        html += "<span>" + format(end_range) + "</span>";
+        mirror.setContent(html);
+        /*
+                      将inputor的 offset(相对于document)
+                      和@在inputor里的position相加
+                      就得到了@相对于document的offset.
+                      当然,还要加上行高和滚动条的偏移量.
+        */
+        offset = $inputor.offset();
+        at_rect = mirror.getFlagRect();
+        /*
+                    FIXME: -$(window).scrollTop() get "wrong" offset.
+                     but is good for $inputor.scrollTop()
+                     jquey 1. + 07.1 fixed the scrollTop problem!?
+        */
+        x = offset.left + at_rect.left - $inputor.scrollLeft();
+        y = offset.top - $inputor.scrollTop();
+        bottom = y + at_rect.bottom;
+        y += at_rect.top;
+        return {
+          top: y,
+          left: x,
+          bottom: bottom
+        };
+      },
+      cache: function(value) {
+        var key, _base;
+        key = this.query.text;
+        if (!this.getOpt("cache") || !key) return null;
+        return (_base = this._cache)[key] || (_base[key] = value);
+      },
+      getKeyname: function() {
+        var $inputor, caret_pos, end, key, matched, start, subtext, text,
+          _this = this;
+        $inputor = this.$inputor;
+        text = $inputor.val();
+        caret_pos = $inputor.caretPos();
+        /* 向在插入符前的的文本进行正则匹配
+         * 考虑会有多个 @ 的存在, 匹配离插入符最近的一个
+        */
+        subtext = text.slice(0, caret_pos);
+        matched = null;
+        $.each(this.options, function(flag) {
+          var match, regexp;
+          regexp = new RegExp(flag + '([A-Za-z0-9_\+\-]*)$|' + flag + '([^\\x00-\\xff]*)$', 'gi');
+          match = regexp.exec(subtext);
+          if (!_isNil(match)) {
+            matched = match[1] === 'undefined' ? match[2] : match[1];
+            _this.theflag = flag;
+            return false;
+          }
+        });
+        if (typeof matched === 'string' && matched.length <= 20) {
+          start = caret_pos - matched.length;
+          end = start + matched.length;
+          this.pos = start;
+          key = {
+            'text': matched.toLowerCase(),
+            'start': start,
+            'end': end
+          };
+        } else {
+          this.view.hide();
+        }
+        log("At.getKeyname", key);
+        return this.query = key;
+      },
+      replaceStr: function(str) {
+        var $inputor, key, source, start_str, text;
+        $inputor = this.$inputor;
+        key = this.query;
+        source = $inputor.val();
+        start_str = source.slice(0, key.start);
+        text = start_str + str + source.slice(key.end);
+        $inputor.val(text);
+        $inputor.caretPos(start_str.length + str.length);
+        $inputor.change();
+        return log("At.replaceStr", text);
+      },
+      onkeydown: function(e) {
+        var view;
+        view = this.view;
+        if (!view.isShowing()) return;
+        switch (e.keyCode) {
+          case 38:
+            e.preventDefault();
+            view.prev();
+            break;
+          case 40:
+            e.preventDefault();
+            view.next();
+            break;
+          case 9:
+          case 13:
+            if (!view.isShowing()) return;
+            e.preventDefault();
+            view.choose();
+            break;
+          default:
+            $.noop();
+        }
+        return e.stopPropagation();
+      },
+      renderView: function(datas) {
+        log("At.renderView", this, datas);
+        datas = datas.splice(0, this.getOpt('limit'));
+        datas = _unique(datas, this.dataValue());
+        datas = _objectify(datas);
+        datas = _sorter.call(this, datas);
+        return this.view.render(this, datas);
+      },
+      lookup: function() {
+        var callback, datas, key;
+        key = this.getKeyname();
+        if (!key) return false;
+        log("At.lookup.key", key);
+        if (!_isNil(datas = this.cache())) {
+          this.renderView(datas);
+        } else if (!_isNil(datas = this.lookupWithData(key))) {
+          this.renderView(datas);
+        } else if ($.isFunction(callback = this.getOpt('callback'))) {
+          callback(key.text, $.proxy(this.renderView, this));
+        } else {
+          this.view.hide();
+        }
+        return $.noop();
+      },
+      lookupWithData: function(key) {
+        var data, items,
+          _this = this;
+        data = this.getOpt("data");
+        if ($.isArray(data) && data.length !== 0) {
+          items = $.map(data, function(item, i) {
+            var match, name, regexp;
             try {
-                return this.options[flag][key];
+              name = $.isPlainObject(item) ? item[_this.dataValue()] : item;
+              regexp = new RegExp(key.text.replace("+", "\\+"), 'i');
+              match = name.match(regexp);
             } catch (e) {
-                return null
+              return null;
             }
-        },
-        /* @ offset*/
-        offset: function() {
-            $inputor = this.$inputor;
-
-            if (document.selection) {// IE!!! 
-                var Sel = document.selection.createRange();
-                x = Sel.boundingLeft + $inputor.scrollLeft();
-                y = Sel.boundingTop + Sel.boundingHeight 
-                    + $(window).scrollTop() + $inputor.scrollTop();
-                return {'top':y,'left':x};
-            }
-
-            mirror = $inputor.data("mirror");
-            if (_isNil(mirror)) {
-                mirror = new Mirror($inputor);
-                $inputor.data("mirror",mirror);
-            }
-            
-            /* 为了将textarea中文字的排版模拟到镜像div中
-             * 我们需要做一些字符处理.由于div元素中不认多余的空格.
-             * 我们需要将多余的空格用元素块包裹.
-             × 换行符直接替换成<br/>就可以了.
-             * NOTE: “\r\n” 用于ie的textarea.
-             */
-            function format(value) {
-                value = value.replace(/</g, '&lt;')
-                    .replace(/>/g, '&gt;')
-                    .replace(/`/g,'&#96;')
-                    .replace(/"/g,'&quot;');
-                return value.replace(/\r\n|\r|\n/g,"<br />");
-            } 
-            /* 克隆完inputor后将原来的文本内容根据
-             * @的位置进行分块,以获取@块在inputor(输入框)里的position
-             * */
-            text = $inputor.val();
-            start_range = text.slice(0,this.pos - 1);
-            end_range = text.slice(this.pos + 1);
-            html = "<span>"+format(start_range)+"</span>";
-            html += "<span id='flag'>@</span>";
-            html += "<span>"+format(end_range)+"</span>";
-            mirror.setContent(html);
-
-            /* 将inputor的 offset(相对于document)
-             * 和@在inputor里的position相加
-             * 就得到了@相对于document的offset.
-             * 当然,还要加上行高和滚动条的偏移量.
-             * */
-            offset = $inputor.offset();
-            at_pos = mirror.getFlagPos();
-            line_height = $inputor.css("line-height");
-            line_height = isNaN(line_height) ? 20 : line_height;
-            //FIXME: -$(window).scrollTop() get "wrong" offset.
-            // but is good for $inputor.scrollTop();
-            // jquey 1. + 07.1 fixed the scrollTop problem!?
-            y = offset.top + at_pos.top + line_height - $inputor.scrollTop();
-            x = offset.left + at_pos.left - $inputor.scrollLeft();
-            
-            return {'top':y,'left':x};
-        },
-        cache: function(key,value) {
-            if (!this.getOpt('cache')) return null;
-            _log("cacheing",key,value);
-            if (value)
-                this._cache[key] = value;
-            return this._cache[key];
-        },
-        getKeyname: function() {
-            $inputor = this.$inputor;
-            text = $inputor.val();
-            //获得inputor中插入符的position.
-            caret_pos = $inputor.caretPos();
-            /* 向在插入符前的的文本进行正则匹配
-             * 考虑会有多个 @ 的存在, 匹配离插入符最近的一个*/
-            subtext = text.slice(0,caret_pos);
-            // word = subtext.exec(/@(\w+)$|@[^\x00-\xff]+$/g);
-            var self = this;
-            var matched = null;
-            $.each(this.options,function(flag) {
-                regexp = new RegExp(flag+'([A-Za-z0-9_\+\-]*)$|'+flag+'([^\\x00-\\xff]*)$','gi');
-                match = regexp.exec(subtext);
-                if (!_isNil(match)) {
-                    matched = match[1] == undefined ? match[2] : match[1];
-                    self.theflag = flag;
-                    return false;
-                }
-            });
-            var key = null;
-            _log("matched",matched);
-            if (typeof matched == "string" && matched.length <= 20) {
-                start = caret_pos - matched.length;
-                end = start + matched.length;
-                this.pos = start;
-                key = {'text':matched, 'start':start, 'end':end};
-            } else
-                this.view.hide();
-
-            this.keyword = key;
-            _log("getKeyname",key);
-            return key;
-        },
-        /* 捕捉inputor的上下回车键.
-         * 在列表框做相应的操作,上下滚动,回车选择
-         * 返回 false 阻止冒泡事件以捕捉inputor对应的事件
-         * */
-        onkeydown:function(e) {
-            view = this.view;
-            // 当列表没显示时不捕捉inputor相关事件.
-            if (!view.watching()) return true;
-            last_idx = view.items.length - 1;
-            var return_val = false;
-            switch (e.keyCode) {
-                case 27:
-                    this.choose();
-                    break;
-                // UP
-                case 38:
-                    // if put this line outside the switch
-                    // the view will flash when key down.
-                    $(view.id + " ul li.cur").removeClass("cur");
-                    view.cur_li_idx--;
-                    // 到达顶端时高亮效果跳到最后
-                    if (view.cur_li_idx < 0)
-                        view.cur_li_idx = last_idx;
-                    $(view.id + " li:eq(" + view.cur_li_idx + ")")
-                        .addClass('cur');
-                    break;
-                // DOWN
-                case 40:
-                    $(view.id + " ul li.cur").removeClass("cur");
-                    view.cur_li_idx++;
-                    if (view.cur_li_idx > last_idx)
-                        view.cur_li_idx = 0;
-                    $(view.id + " li:eq(" + view.cur_li_idx + ")")
-                        .addClass('cur');
-                    break;
-                //TAB or ENTER
-                case 9:
-                case 13:
-                    $(view.id + " ul li.cur").removeClass("cur");
-                    // 如果列表为空，则不捕捉回车事件
-                    $cur_li = $(view.id + " li:eq("+view.cur_li_idx+")");
-                    this.choose($cur_li);
-                    break;
-                default:
-                    return_val = true;
-            }
-            return return_val;
-        },
-        replaceStr: function(str) {
-            /* $inputor.replaceStr(str,start,end)*/
-            key = this.keyword;
-            source = this.$inputor.val();
-            start_str = source.slice(0, key.start);
-            text = start_str + str + source.slice(key.end);
-            this.$inputor.val(text);
-            this.$inputor.caretPos(start_str.length + str.length);
-        },
-        choose: function($li) {
-            str = _isNil($li) ? this.keyword.text+" " : $li.attr("data-keyname")+" "; 
-            this.replaceStr(str);
-            this.view.hide();
-        },
-        reg: function(inputor) {
-            $inputor = $(inputor);
-
-            /* 防止对同一个inputor进行多次绑定
-             * 在每个已经绑定过的inputor设置一个key.
-             * 注册过的key将不再进行绑定
-             * */
-            key = $inputor.data("@reg-key");
-            if ($.inArray(key,this.inputor_keys) >= 0)
-                return null;
-            _log("reg",inputor,key);
-
-            key = "@-"+$.now();
-            $inputor.data("@reg-key",key);
-            this.inputor_keys.push(key);
-            // 捕捉inputor事件
-            var self = this;
-            $inputor.bind("keydown",function(e) {
-                return self.onkeydown(e);
-            })
-            .scroll(function(e){
-                self.view.hide();
-            })
-            .blur(function(e){
-                self.view.timeout_id = setTimeout("At.view.hide()",100);
-            });   
-            return key;
-        },
-        watch: function(inputor) {
-            this.$inputor = $(inputor);
-            key = this.getKeyname();
-            if (!key) return false;
-            /*
-             * 支持多渠道获得用户数据.
-             * 可以设置静态数据的同时从服务器动态获取.
-             * 获取级别从先到后: cache -> statis data -> ajax.
-             */
-            if (!_isNil(names = this.cache(this.keyword.text))) {
-                _log("cache data",names);
-                this.view.load(names,false);
-            } else if (!_isNil(names = this.watchWithData(key))) {
-                _log("statis data",names);
-                this.view.load(names,false);
-            } else if ($.isFunction(callback = this.getOpt('callback'))){
-                _log("callbacking",callback);
-                callback(At);
-            } else
-                this.view.hide();
-        },
-        watchWithData:function(key) {
-            data = this.getOpt("data");
-            _log("watchWithData",data);
-            var items = null;
-            var self = this;
-            if($.isArray(data) && data.length != 0) {
-                items = $.map(data,function(item,i) {
-                    //support plain object also
-                    var name = $.isPlainObject(item) ? item[self.searchWord()] : item;
-                    try {
-                        match = name.match((new RegExp(key.text.replace("+","\\+"),"i")));    
-                    } catch(e) {
-                        _log("watchWithData.error",e);
-                        return null;
-                    }
-                    return match ? item : null;
-                });
+            if (match) {
+              return item;
+            } else {
+              return null;
             }
-            _log("watch with data.item",items)
-            return items;
+          });
         }
+        return items;
+      }
     };
-
-    /* 弹出的用户列表框相关的操作 */
-    At.view = {
-        //当前高亮的条目
-        cur_li_idx : 0,
-        timeout_id : null,
-        id : '#at-view',
-        items : [],
-        // 列表框是否显示中.
-        watching :function() {
-            return $(this.id).is(":visible");
-        },
-        freshItems : function() {
-            this.items = $(this.id).find('#'+this.id.slice(1)+'-ul li');
-            this.cur_li_idx = 0;
-        },
-        evalTpl: function(tpl,map) {
-            if(_isNil(tpl)) return;
-            el = tpl.replace(/\$\{([^\}]*)\}/g,function(tag,key,pos){
-                return map[key];
-            });
-            _log("evalTpl",el);
-            return el;
-        },
-        onLoaded: function($view) {
-            $view.find('li').live('click',function(e) {
-                At.choose($(this));
-            });
-            $view.mousemove(function(e) {
-                if (e.target.tagName == "LI") {
-                    $(this).find("li.cur").removeClass("cur");
-                    $(e.target).addClass("cur");
-                    At.cur_li_idx = $(this).find("li").index(e.target)
-                }
-            });
-        },
-        rePosition:function($view) {
-            $view.offset(At.offset());
-        },
-        show: function(){
-            if (!this.watching())
-                $view = $(this.id).show();
-            this.freshItems();
-            this.rePosition($view);
-        },
-        hide: function() {
-            if (!this.watching()) return;
-            this.cur_li_idx = 0;
-            $(this.id).hide();
-        },
-        load: function(list,cacheable) {
-            // 是否已经加载了列表视图
-            if (_isNil($(this.id))) {
-                tpl = "<div id='"+this.id.slice(1)+"' class='at-view'><ul id='"+this.id.slice(1)+"-ul'></ul></div>";
-                $('body').append(tpl);
-                this.onLoaded($(this.id));
-            }
-            return this.update(list,cacheable);
-        },
-        clear: function(clear_all) {
-            if (clear_all == true)
-                this._cache = {};
-            $(this.id).find('ul').empty();
-        },
-        update: function(list,cacheable) {
-            if (!$.isArray(list)) return false;
-            if (cacheable != false) At.cache(At.keyword.text,list);
-
-            this.clear();
-            var tpl = At.getOpt('tpl');
-            var list = _unique(list,At.searchWord());
-
-            var self = this;
-            $ul = $(this.id).find('ul');
-            $.each(list.splice(0, At.getOpt('limit')), function(i,item) {
-                if (!$.isPlainObject(item)) {
-                    item = {'id':i,'name':item};
-                    tpl = DEFAULT_TPL;
-                }
-                $ul.append(self.evalTpl(tpl,item));
-            });
-            this.show();
-            $ul.find("li:eq(0)").addClass("cur");
+    AtView = {
+      timeout_id: null,
+      id: '#at-view',
+      holder: null,
+      _jqo: null,
+      jqo: function() {
+        var jqo;
+        jqo = this._jqo;
+        return jqo = _isNil(jqo) ? (this._jqo = $(this.id)) : jqo;
+      },
+      init: function() {
+        var $menu, tpl,
+          _this = this;
+        if (!_isNil(this.jqo())) return;
+        tpl = "<div id='" + this.id.slice(1) + "' class='at-view'><ul id='" + this.id.slice(1) + "-ul'></ul></div>";
+        $("body").append(tpl);
+        $menu = this.jqo().find('ul');
+        return $menu.on('mouseenter.view', 'li', function(e) {
+          $menu.find('.cur').removeClass('cur');
+          return $(e.currentTarget).addClass('cur');
+        }).on('click', function(e) {
+          e.stopPropagation();
+          e.preventDefault();
+          return _this.choose();
+        });
+      },
+      isShowing: function() {
+        return this.jqo().is(":visible");
+      },
+      choose: function() {
+        var $li, str;
+        $li = this.jqo().find(".cur");
+        str = _isNil($li) ? this.holder.query.text + " " : $li.attr(this.holder.getOpt("choose")) + " ";
+        this.holder.replaceStr(str);
+        return this.hide();
+      },
+      rePosition: function() {
+        var rect;
+        rect = this.holder.rect();
+        if (rect.bottom + this.jqo().height() - $(window).scrollTop() > $(window).height()) {
+          rect.bottom = rect.top - this.jqo().height();
+        }
+        log("AtView.rePosition", {
+          left: rect.left,
+          top: rect.bottom
+        });
+        return this.jqo().offset({
+          left: rect.left,
+          top: rect.bottom
+        });
+      },
+      next: function() {
+        var cur, next;
+        cur = this.jqo().find('.cur').removeClass('cur');
+        next = cur.next();
+        if (!cur.length) next = $(this.jqo().find('li')[0]);
+        return next.addClass('cur');
+      },
+      prev: function() {
+        var cur, prev;
+        cur = this.jqo().find('.cur').removeClass('cur');
+        prev = cur.prev();
+        if (!prev.length) prev = this.jqo().find('li').last();
+        return prev.addClass('cur');
+      },
+      show: function() {
+        if (!this.isShowing()) this.jqo().show();
+        return this.rePosition();
+      },
+      hide: function(time) {
+        var callback,
+          _this = this;
+        if (isNaN(time)) {
+          if (this.isShowing()) return this.jqo().hide();
+        } else {
+          callback = function() {
+            return _this.hide();
+          };
+          clearTimeout(this.timeout_id);
+          return this.timeout_id = setTimeout(callback, 300);
         }
+      },
+      clear: function(clear_all) {
+        if (clear_all === true) this._cache = {};
+        return this.jqo().find('ul').empty();
+      },
+      render: function(holder, list) {
+        var $ul, tpl;
+        if (!$.isArray(list)) return false;
+        this.holder = holder;
+        holder.cache(list);
+        this.clear();
+        $ul = this.jqo().find('ul');
+        tpl = holder.getOpt('tpl');
+        $.each(list, function(i, item) {
+          var li;
+          tpl || (tpl = _DEFAULT_TPL);
+          li = _evalTpl(tpl, item);
+          log("AtView.render", li);
+          return $ul.append(_highlighter(li, holder.query.text));
+        });
+        this.show();
+        return $ul.find("li:eq(0)").addClass("cur");
+      }
     };
-
-    /* maybe we can use $._unique. 
-     * But i don't know it will delete li element frequently or not.
-     * I think we should not change DOM element frequently.
-     * more, It seems batter not to call evalTpl function too much times.
-     * */
-    function _unique(list,keyword) {
-        var record = [];
-        _log(list,keyword);
-        return $.map(list,function(v,idx){
-            var value = $.isPlainObject(v) ? v[keyword] : v;
-            if ($.inArray(value,record) < 0) {
-                record.push(value);
-                return v;
-            }
+    _objectify = function(list) {
+      return $.map(list, function(item, k) {
+        if (!$.isPlainObject(item)) {
+          item = {
+            id: k,
+            name: item
+          };
+        }
+        return item;
+      });
+    };
+    _evalTpl = function(tpl, map) {
+      var el;
+      try {
+        return el = tpl.replace(/\$\{([^\}]*)\}/g, function(tag, key, pos) {
+          return map[key];
         });
-    }
-
-    function _isNil(target) {
-        return !target
-        //empty_object =  
-        || ($.isPlainObject(target) && $.isEmptyObject(target))
-        //empty_array = 
-        || ($.isArray(target) && target.length == 0)
-        // nil_jquery = 
-        || (target instanceof $ && target.length == 0)
-        || target === undefined;
-    }
-
-    function _log() {
-        if (!At.getOpt('debug') || $.browser.msie)
-            return;
-        console.log(arguments);
-    }
-
-    function _setSettings(options) {
-        opt = {};
-        if ($.isFunction(options))
-            opt['callback'] = options;
-        else
-            opt = options;
-        return $.extend({
-            'cache' : true,
-           'debug' : false,
-           'limit' : 5,
-           'tpl' : DEFAULT_TPL
-        },opt);
-    }
-
-    DEFAULT_TPL = "<li id='${id}' data-keyname='${name}'>${name}</li>";
+      } catch (error) {
+        return "";
+      }
+    };
+    _highlighter = function(li, query) {
+      if (_isNil(query)) return li;
+      return li.replace(new RegExp(">\\s*(\\w*)(" + query.replace("+", "\\+") + ")(\\w*)\\s*<", 'ig'), function(str, $1, $2, $3) {
+        return '> ' + $1 + '<strong>' + $2 + '</strong>' + $3 + ' <';
+      });
+    };
+    _sorter = function(items) {
+      var data_value, item, query, results, text, _i, _len;
+      data_value = this.dataValue();
+      query = this.query.text;
+      results = [];
+      for (_i = 0, _len = items.length; _i < _len; _i++) {
+        item = items[_i];
+        text = item[data_value];
+        if (text.toLowerCase().indexOf(query) === -1) continue;
+        item.order = text.toLowerCase().indexOf(query);
+        results.push(item);
+      }
+      results.sort(function(a, b) {
+        return a.order - b.order;
+      });
+      return results;
+    };
+    /*
+          maybe we can use $._unique.
+          But i don't know it will delete li element frequently or not.
+          I think we should not change DOM element frequently.
+          more, It seems batter not to call evalTpl function too much times.
+    */
+    _unique = function(list, query) {
+      var record;
+      record = [];
+      return $.map(list, function(v, id) {
+        var value;
+        value = $.isPlainObject(v) ? v[query] : v;
+        if ($.inArray(value, record) < 0) {
+          record.push(value);
+          return v;
+        }
+      });
+    };
+    _isNil = function(target) {
+      return !target || ($.isPlainObject(target) && $.isEmptyObject(target)) || ($.isArray(target) && target.length === 0) || (target instanceof $ && target.length === 0) || target === void 0;
+    };
+    _DEFAULT_TPL = "<li id='${id}' data-value='${name}'>${name}</li>";
+    log = function() {};
+    $.fn.atWho = function(flag, options) {
+      AtView.init();
+      return this.filter('textarea, input').each(function() {
+        var $this, data;
+        $this = $(this);
+        data = $this.data("AtWho");
+        if (!data) $this.data('AtWho', (data = new At(this)));
+        return data.reg(flag, options);
+      });
+    };
+    return $.fn.atWho["default"] = {
+      data: [],
+      choose: "data-value",
+      callback: null,
+      cache: true,
+      limit: 5,
+      tpl: _DEFAULT_TPL
+    };
+  })(window.jQuery);
 
-    $.fn.atWho = function (flag,options) {
-        At.options[flag] = _setSettings(options);
-        _log("options",At.options);
-        return this.filter('textarea, input').each(function() {
-            if (!At.reg(this)) return;
-            $(this).bind("keyup",function(e) {
-                /* 当用户列表框显示时, 上下键不触发查询 */
-                var stop_key = e.keyCode == 40 || e.keyCode == 38;
-                watch = !(At.view.watching() && stop_key);
-                if (watch) At.watch(this);
-            })
-            .mouseup(function(e) {
-                At.watch(this);
-            });
-        });
-        return At;
-    }
-})(window.jQuery);
 
 /* 本插件操作 textarea 或者 input 内的插入符
  * 只实现了获得插入符在文本框中的位置，我设置
  * 插入符的位置.
  * */
 (function($) {
-    function getCaretPos(inputor) {
-        if ("selection" in document) { // IE
-            inputor.focus(); 
+    var getCaretPos, setCaretPos;
+    getCaretPos = function(inputor) {
+      var end, endRange, len, normalizedValue, pos, range, start, textInputRange;
+      if (document.selection) {
+        /*
+                    #assume we select "HATE" in the inputor such as textarea -> { }.
+                     *               start end-point.
+                     *              /
+                     * <  I really [HATE] IE   > between the brackets is the selection range.
+                     *                   \
+                     *                    end end-point.
+        */
+        range = document.selection.createRange();
+        pos = 0;
+        if (range && range.parentElement() === inputor) {
+          normalizedValue = inputor.value.replace(/\r\n/g, "\n");
+          /* SOMETIME !!! 
+           "/r/n" is counted as two char.
+            one line is two, two will be four. balalala.
+            so we have to using the normalized one's length.;
+          */
+          len = normalizedValue.length;
+          /*
+                             <[  I really HATE IE   ]>:
+                              the whole content in the inputor will be the textInputRange.
+          */
+          textInputRange = inputor.createTextRange();
+          /*                 _here must be the position of bookmark.
+                           /
+             <[  I really [HATE] IE   ]>
+              [---------->[           ] : this is what moveToBookmark do.
+             <   I really [[HATE] IE   ]> : here is result.
+                            \ two brackets in should be in line.
+          */
+          textInputRange.moveToBookmark(range.getBookmark());
+          endRange = inputor.createTextRange();
+          /*  [--------------------->[] : if set false all end-point goto end.
+            <  I really [[HATE] IE  []]>
+          */
+          endRange.collapse(false);
+          /*
+                                          ___VS____
+                                         /         \
+                           <   I really [[HATE] IE []]>
+                                                    \_endRange end-point.
+                          
+                          " > -1" mean the start end-point will be the same or right to the end end-point
+                         * simplelly, all in the end.
+          */
+          if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
+            start = end = len;
+          } else {
             /*
-             * reference: http://tinyurl.com/86pyc4s
-             */
-            var start = 0, end = 0, normalizedValue, range,
-                textInputRange, len, endRange;
-            var el = inputor;
-            /* assume we select "HATE" in the inputor such as textarea -> { }.
-             *               start end-point.
-             *              /
-             * <  I really [HATE] IE   > between the brackets is the selection range.
-             *                   \
-             *                    end end-point.
-             */
-            range = document.selection.createRange();
-            pos = 0;
-            // selection should in the inputor.
-            if (range && range.parentElement() == el) {
-                normalizedValue = el.value.replace(/\r\n/g, "\n");
-                /* SOMETIME !!! 
-                 *"/r/n" is counted as two char.
-                 * one line is two, two will be four. balalala.
-                 * so we have to using the normalized one's length.;
-                 */
-                len = normalizedValue.length;
-
-                /*<[  I really HATE IE   ]>:
-                 * the whole content in the inputor will be the textInputRange.
-                 */
-                textInputRange = el.createTextRange();
-
-                /*                 _here must be the position of bookmark.
-                 *                /
-                 *  <[  I really [HATE] IE   ]>
-                 *   [---------->[           ] : this is what moveToBookmark do.
-                 *  <   I really [[HATE] IE   ]> : here is result.
-                 *                 \ two brackets in should be in line.
-                 */
-                textInputRange.moveToBookmark(range.getBookmark());
-                // IE don't want to let "createTextRange" and "collapse" get together. It's so bad
-                endRange = el.createTextRange();
-
-                /*  [--------------------->[] : if set false all end-point goto end.
-                 * <  I really [[HATE] IE  []]>
-                 */
-                endRange.collapse(false);
-                /*                ___VS____
-                 *               /         \
-                 * <   I really [[HATE] IE []]>
-                 *                          \_endRange end-point.
-                 *
-                 * " > -1" mean the start end-point will be the same or right to the end end-point
-                 * simplelly, all in the end.
-                 */
-                if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
-                    // TextRange object will miss "\r\n". So, we count it ourself.
-                    //line_counter = normalizedValue.slice(0, start).split("\n").length -1;
-                    start = end = len;
-                } else {
-                    /*        I really |HATE] IE   ]> 
-                     *               <-|
-                     *      I really[ [HATE] IE   ]>
-                     *            <-[
-                     *    I reall[y  [HATE] IE   ]>
-                     * 
-                     *  will return how many unit have moved.
-                     */
-                    start = -textInputRange.moveStart("character", -len);
-                    end = -textInputRange.moveEnd("character", -len);
-                }
-            }
-        } else {
-            start = inputor.selectionStart;
-        }
-        return start;
-    }
-    function setCaretPos(inputor, pos) {
-        if ("selection" in document) { //IE
-            range = inputor.createTextRange();
-            range.move('character',pos);
-            range.select();
-        } else 
-            inputor.setSelectionRange(pos,pos);
-    }
-    $.fn.caretPos = function(pos) {
-        var inputor = this[0];
-        inputor.focus();
-       if (pos) {
-            return setCaretPos(inputor,pos);
-        } else {
-            return getCaretPos(inputor);
+                                        I really |HATE] IE   ]> 
+                                               <-|
+                                      I really[ [HATE] IE   ]>
+                                            <-[
+                                    I reall[y  [HATE] IE   ]>
+                                 
+                                  will return how many unit have moved.
+            */
+            start = -textInputRange.moveStart("character", -len);
+            end = -textInputRange.moveEnd("character", -len);
+          }
         }
-    }
-})(window.jQuery);
+      } else {
+        start = inputor.selectionStart;
+      }
+      return start;
+    };
+    setCaretPos = function(inputor, pos) {
+      var range;
+      if (document.selection) {
+        range = inputor.createTextRange();
+        range.move("character", pos);
+        return range.select();
+      } else {
+        return inputor.setSelectionRange(pos, pos);
+      }
+    };
+    return $.fn.caretPos = function(pos) {
+      var inputor;
+      inputor = this[0];
+      inputor.focus();
+      if (pos) {
+        return setCaretPos(inputor, pos);
+      } else {
+        return getCaretPos(inputor);
+      }
+    };
+  })(window.jQuery);
+

data/lib/assets/stylesheets/jquery.atwho.css

@@ -10,12 +10,6 @@
     box-shadow: 0 0 5px rgba(0,0,0,0.1);
     min-width: 120px;
 }
-#at-view span#title {
-    font-size:13px;
-    color: gray;
-    padding: 3px 5px;
-    cursor: default;
-}
 
 #at-view .cur {
     background: #3366FF;
@@ -24,6 +18,13 @@
 #at-view .cur small {
     color: white;
 }
+#at-view strong {
+    color: #3366FF;
+}
+#at-view .cur strong {
+    color: white;
+    font:bold;
+}
 #at-view ul {
     /* width: 100px; */
     list-style:none;
@@ -34,7 +35,7 @@
     display: block;
     padding: 5px 10px;
     border-bottom: 1px solid #DDD;
-    font-weight: bold;    cursor: pointer;
+    cursor: pointer;
     /* border-top: 1px solid #C8C8C8; */
 }
 #at-view small {

data/lib/jquery-atwho-rails/version.rb

@@ -1,7 +1,7 @@
 module Jquery
   module Atwho
     module Rails
-      VERSION = "0.1.3"
+      VERSION = "0.1.4"
     end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jquery-atwho-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-03-21 00:00:00.000000000 Z
+date: 2012-04-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rspec