jquery-atwho-rails 0.1.7 → 0.2.1

data/README.md

@@ -1,3 +1,8 @@
+### Notice
+updated to `v0.2.0`.  
+The stable and old one would live in branch `stable-v0.1.x` branch taged `v0.1.7`  
+More details in [At.js](https://github.com/ichord/At.js) project.
+
 ### Usage
 ---
 bind your textarea
@@ -8,7 +13,7 @@ $('textarea').atWho("@",{'data':data});
 ```
 
 that's it, check it out!
-more details in [At.js](https://github.com/ichord/At.js) on github.
+more details in [At.js Home Page](http://ichord.github.com/At.js/)
 
 ### Installtion
 ---

data/Rakefile

@@ -1,27 +1,23 @@
 require "bundler/gem_tasks"
-#require "uglifier"
 
 desc "sync from At.js"
 task :sync do
+  puts " * syncing..."
   at_dir = "tmp/At.js"
-  FileUtils.mkdir_p("tmp") if not Dir.exist? "tmp"
-  if not Dir.exist? at_dir
+  FileUtils.mkdir_p("tmp") unless Dir.exist? "tmp"
+  unless Dir.exist? at_dir
     system "git clone git://github.com/ichord/At.js.git #{at_dir}"
   else
-    Dir.chdir(at_dir) do
-      puts %x{git pull}
-    end
+    Dir.chdir(at_dir) { puts %x{git pull -X theirs} }
   end
 end
 
-desc "complie and compress"
+desc "copy assets"
 task :fresh => :sync do
-  at_dir = "tmp/At.js"
-  the_js = "lib/assets/javascripts/jquery.atwho.js"
-  sh "coffee -j tmp/atwho.js -c #{at_dir}/coffee"
-  #File.open("atwho.js","w") { |f|
-  #  f.write Uglifier.complie(File.read(the_js))
-  #}
-  FileUtils.copy_file "tmp/atwho.js", the_js
-  FileUtils.copy_file "#{at_dir}/css/jquery.atwho.css", "lib/assets/stylesheets/jquery.atwho.css"
+  puts "", " * Copying..."
+  source_dir = "tmp/At.js/dist"
+  dist_dir = "lib/assets"
+  FileUtils.copy "#{source_dir}/js/jquery.atwho.js", "#{dist_dir}/javascripts/"
+  FileUtils.copy "#{source_dir}/css/jquery.atwho.css", "#{dist_dir}/stylesheets/"
+  puts `ls -R #{dist_dir}`
 end

data/changelog.md

@@ -1 +1,2 @@
+* 2013.1.24 updated to v0.2.0.
 * 2012.7.1 remove the mirror(copy) element of the textarea(inputor) which will disturb css style. increase timeout of displaying the result list view.

data/jquery-atwho-rails.gemspec

@@ -9,8 +9,8 @@ Gem::Specification.new do |s|
   s.email       = ["chord.luo@gmail.com"]
   s.homepage    = "http://ichord.github.com/jquery-atwho-rails"
   s.summary     = %q{jquery plugin: @mentions}
-  s.description = %q{This is a jQuery plugin 
-    that implement Twitter/Weibo like @ mentions.}
+  s.description = %q{This is a jQuery plugin
+    that implement Github-like mentions.}
 
   s.rubyforge_project = "jquery-atwho-rails"
 

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

@@ -1,41 +1,34 @@
-// Generated by CoffeeScript 1.3.3
 
 /*
-   Implement Twitter/Weibo @ mentions
-
-   Copyright (c) 2012 chord.luo@gmail.com
-
-   Permission is hereby granted, free of charge, to any person obtaining
-   a copy of this software and associated documentation files (the
-   "Software"), to deal in the Software without restriction, including
-   without limitation the rights to use, copy, modify, merge, publish,
-   distribute, sublicense, and/or sell copies of the Software, and to
-   permit persons to whom the Software is furnished to do so, subject to
-   the following conditions:
-
-   The above copyright notice and this permission notice shall be
-   included in all copies or substantial portions of the Software.
-
-   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-   EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-   MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-   NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-   LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-   OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-   WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+  Implement Github like autocomplete mentions
+  http://ichord.github.com/At.js
+
+  Copyright (c) 2013 chord.luo@gmail.com
+  Licensed under the MIT license.
 */
 
 
 (function() {
 
-  (function($) {
-    var At, AtView, Mirror, log, _DEFAULT_TPL, _evalTpl, _highlighter, _isNil, _objectify, _sorter, _unique;
-    Mirror = {
-      $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>');
+  (function(factory) {
+    if (typeof define === 'function' && define.amd) {
+      return define(['jquery'], factory);
+    } else {
+      return factory(window.jQuery);
+    }
+  })(function($) {
+    var Controller, DEFAULT_CALLBACKS, DEFAULT_TPL, KEY_CODE, Mirror, View;
+    Mirror = (function() {
+
+      Mirror.prototype.css_attr = ["overflowY", "height", "width", "paddingTop", "paddingLeft", "paddingRight", "paddingBottom", "marginTop", "marginLeft", "marginRight", "marginBottom", 'fontFamily', 'borderStyle', 'borderWidth', 'wordWrap', 'fontSize', 'lineHeight', 'overflowX'];
+
+      function Mirror($inputor) {
+        this.$inputor = $inputor;
+      }
+
+      Mirror.prototype.copy_inputor_css = function() {
+        var css,
+          _this = this;
         css = {
           position: 'absolute',
           left: -9999,
@@ -43,19 +36,21 @@
           zIndex: -20000,
           'white-space': 'pre-wrap'
         };
-        $.each(this.css, function(i, p) {
-          return css[p] = $origin.css(p);
+        $.each(this.css_attr, function(i, p) {
+          return css[p] = _this.$inputor.css(p);
         });
-        $mirror.css(css);
-        this.$mirror = $mirror;
-        $origin.after($mirror);
-        return this;
-      },
-      setContent: function(html) {
+        return css;
+      };
+
+      Mirror.prototype.create = function(html) {
+        this.$mirror = $('<div></div>');
+        this.$mirror.css(this.copy_inputor_css());
         this.$mirror.html(html);
+        this.$inputor.after(this.$mirror);
         return this;
-      },
-      getFlagRect: function() {
+      };
+
+      Mirror.prototype.get_flag_rect = function() {
         var $flag, pos, rect;
         $flag = this.$mirror.find("span#flag");
         pos = $flag.position();
@@ -66,83 +61,174 @@
         };
         this.$mirror.remove();
         return rect;
-      }
-    };
-    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 = Mirror;
-      $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;
+
+      return Mirror;
+
+    })();
+    KEY_CODE = {
+      DOWN: 40,
+      UP: 38,
+      ESC: 27,
+      TAB: 9,
+      ENTER: 13
     };
-    At.prototype = {
-      constructor: At,
-      init: function() {
-        var _this = this;
-        this.$inputor.on('keyup.inputor', function(e) {
-          return _this.onkeyup(e);
-        }).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);
+    DEFAULT_CALLBACKS = {
+      data_refactor: function(data) {
+        return $.map(data, function(item, k) {
+          if (!$.isPlainObject(item)) {
+            item = {
+              name: item
+            };
+          }
+          return item;
         });
-        return log("At.init", this.$inputor[0]);
       },
-      reg: function(flag, options) {
-        var opt, _base, _default;
-        opt = {};
-        if ($.isFunction(options)) {
-          opt['callback'] = options;
-        } else {
-          opt = options;
+      matcher: function(flag, subtext) {
+        var match, matched, regexp;
+        regexp = new RegExp(flag + '([A-Za-z0-9_\+\-]*)$|' + flag + '([^\\x00-\\xff]*)$', 'gi');
+        match = regexp.exec(subtext);
+        matched = null;
+        if (match) {
+          matched = match[2] ? match[2] : match[1];
         }
-        _default = (_base = this.options)[flag] || (_base[flag] = $.fn.atWho["default"]);
-        this.options[flag] = $.extend({}, _default, opt);
-        return log("At.reg", this.$inputor[0], flag, options);
+        return matched;
+      },
+      filter: function(query, data, search_key) {
+        var _this = this;
+        return $.map(data, function(item, i) {
+          var name;
+          name = $.isPlainObject(item) ? item[search_key] : item;
+          if (name.toLowerCase().indexOf(query) >= 0) {
+            return item;
+          }
+        });
+      },
+      remote_filter: function(params, url, render_view) {
+        return $.ajax(url, {
+          data: params,
+          success: function(data) {
+            return render_view(data);
+          }
+        });
       },
-      dataValue: function() {
-        var match, search_word;
-        search_word = this.search_word[this.theflag];
-        if (search_word) {
-          return search_word;
+      sorter: function(query, items, search_key) {
+        var item, results, text, _i, _len;
+        if (!query) {
+          items;
+
         }
-        match = /data-value=["']?\$\{(\w+)\}/g.exec(this.getOpt('tpl'));
-        return this.search_word[this.theflag] = !_isNil(match) ? match[1] : null;
+        results = [];
+        for (_i = 0, _len = items.length; _i < _len; _i++) {
+          item = items[_i];
+          text = item[search_key];
+          item.order = text.toLowerCase().indexOf(query);
+          results.push(item);
+        }
+        return results.sort(function(a, b) {
+          return a.order - b.order;
+        });
       },
-      getOpt: function(key) {
+      tpl_eval: function(tpl, map) {
+        var el;
         try {
-          return this.options[this.theflag][key];
+          return el = tpl.replace(/\$\{([^\}]*)\}/g, function(tag, key, pos) {
+            return map[key];
+          });
         } catch (error) {
-          return null;
+          return "";
         }
       },
-      rect: function() {
+      highlighter: function(li, query) {
+        if (!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 + ' <';
+        });
+      },
+      selector: function($li) {
+        if ($li.length > 0) {
+          return this.replace_str($li.data("value") || "");
+        }
+      }
+    };
+    Controller = (function() {
+
+      function Controller(inputor) {
+        this.settings = {};
+        this.common_settings = {};
+        this.pos = 0;
+        this.flags = null;
+        this.current_flag = null;
+        this.query = null;
+        this.$inputor = $(inputor);
+        this.mirror = new Mirror(this.$inputor);
+        this.common_settings = $.extend({}, $.fn.atwho["default"]);
+        this.view = new View(this, this.$el);
+        this.listen();
+      }
+
+      Controller.prototype.listen = function() {
+        var _this = this;
+        return this.$inputor.on('keyup.atwho', function(e) {
+          return _this.on_keyup(e);
+        }).on('keydown.atwho', function(e) {
+          return _this.on_keydown(e);
+        }).on('scroll.atwho', function(e) {
+          return _this.view.hide();
+        }).on('blur.atwho', function(e) {
+          return _this.view.hide(_this.get_opt("display_timeout"));
+        });
+      };
+
+      Controller.prototype.reg = function(flag, settings) {
+        var current_settings, data;
+        current_settings = {};
+        current_settings = $.isPlainObject(flag) ? this.common_settings = $.extend({}, this.common_settings, flag) : !this.settings[flag] ? this.settings[flag] = $.extend({}, settings) : this.settings[flag] = $.extend({}, this.settings[flag], settings);
+        data = current_settings["data"];
+        if (typeof data === "string") {
+          current_settings["data"] = data;
+        } else if (data) {
+          current_settings["data"] = this.callbacks("data_refactor").call(this, data);
+        }
+        return this;
+      };
+
+      Controller.prototype.trigger = function(name, data) {
+        data || (data = []);
+        data.push(this);
+        return this.$inputor.trigger("" + name + ".atwho", data);
+      };
+
+      Controller.prototype.data = function() {
+        return this.get_opt("data");
+      };
+
+      Controller.prototype.callbacks = function(func_name) {
+        var func;
+        if (!(func = this.get_opt("callbacks", {})[func_name])) {
+          func = this.common_settings["callbacks"][func_name];
+        }
+        return func;
+      };
+
+      Controller.prototype.get_opt = function(key, default_value) {
+        var value;
+        try {
+          if (this.current_flag) {
+            value = this.settings[this.current_flag][key];
+          }
+          if (value === void 0) {
+            value = this.common_settings[key];
+          }
+          return value = value === void 0 ? default_value : value;
+        } catch (e) {
+          return value = default_value === void 0 ? null : default_value;
+        }
+      };
+
+      Controller.prototype.rect = function() {
         var $inputor, Sel, at_rect, bottom, format, html, offset, start_range, x, y;
         $inputor = this.$inputor;
         if (document.selection) {
@@ -165,16 +251,16 @@
 
         start_range = $inputor.val().slice(0, this.pos - 1);
         html = "<span>" + format(start_range) + "</span>";
-        html += "<span id='flag'>@</span>";
+        html += "<span id='flag'>?</span>";
         /*
-                      将inputor的 offset(相对于document)
-                      和@在inputor里的position相加
-                      就得到了@相对于document的offset.
-                      当然,还要加上行高和滚动条的偏移量.
+                将inputor的 offset(相对于document)
+                和@在inputor里的position相加
+                就得到了@相对于document的offset.
+                当然,还要加上行高和滚动条的偏移量.
         */
 
         offset = $inputor.offset();
-        at_rect = this.mirror.init($inputor).setContent(html).getFlagRect();
+        at_rect = this.mirror.create(html).get_flag_rect();
         x = offset.left + at_rect.left - $inputor.scrollLeft();
         y = offset.top - $inputor.scrollTop();
         bottom = y + at_rect.bottom;
@@ -184,263 +270,244 @@
           left: x,
           bottom: bottom + 2
         };
-      },
-      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,
+      };
+
+      Controller.prototype.catch_query = function() {
+        var caret_pos, content, end, query, start, subtext,
           _this = this;
-        $inputor = this.$inputor;
-        text = $inputor.val();
-        caret_pos = $inputor.caretPos();
+        content = this.$inputor.val();
+        caret_pos = this.$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[2] ? match[2] : match[1];
-            _this.theflag = flag;
+        subtext = content.slice(0, caret_pos);
+        query = null;
+        $.each(this.settings, function(flag, settings) {
+          query = _this.callbacks("matcher").call(_this, flag, subtext);
+          if (query != null) {
+            _this.current_flag = flag;
             return false;
           }
         });
-        if (typeof matched === 'string' && matched.length <= 20) {
-          start = caret_pos - matched.length;
-          end = start + matched.length;
+        if (typeof query === "string" && query.length <= 20) {
+          start = caret_pos - query.length;
+          end = start + query.length;
           this.pos = start;
-          key = {
-            'text': matched.toLowerCase(),
-            'start': start,
-            'end': end
+          query = {
+            'text': query.toLowerCase(),
+            'head_pos': start,
+            'end_pos': end
           };
+          this.trigger("matched", [this.current_flag, query.text]);
         } else {
           this.view.hide();
         }
-        log("At.getKeyname", key);
-        return this.query = key;
-      },
-      replaceStr: function(str) {
-        var $inputor, flag_len, key, source, start_str, text;
+        return this.query = query;
+      };
+
+      Controller.prototype.replace_str = function(str) {
+        var $inputor, flag_len, source, start_str, text;
         $inputor = this.$inputor;
-        key = this.query;
         source = $inputor.val();
-        flag_len = this.getOpt("display_flag") ? 0 : this.theflag.length;
-        start_str = source.slice(0, key.start - flag_len);
-        text = start_str + str + source.slice(key.end);
+        flag_len = this.get_opt("display_flag") ? 0 : this.current_flag.length;
+        start_str = source.slice(0, (this.query['head_pos'] || 0) - flag_len);
+        text = "" + start_str + str + " " + (source.slice(this.query['end_pos'] || 0));
         $inputor.val(text);
-        $inputor.caretPos(start_str.length + str.length);
-        $inputor.change();
-        return log("At.replaceStr", text);
-      },
-      onkeyup: function(e) {
-        var view;
-        view = this.view;
-        if (!view.isShowing()) {
-          return;
-        }
+        $inputor.caretPos(start_str.length + str.length + 1);
+        return $inputor.change();
+      };
+
+      Controller.prototype.on_keyup = function(e) {
         switch (e.keyCode) {
-          case 27:
+          case KEY_CODE.ESC:
             e.preventDefault();
-            view.hide();
+            this.view.hide();
             break;
-          default:
+          case KEY_CODE.DOWN:
+          case KEY_CODE.UP:
             $.noop();
+            break;
+          default:
+            this.look_up();
         }
         return e.stopPropagation();
-      },
-      onkeydown: function(e) {
-        var view;
-        view = this.view;
-        if (!view.isShowing()) {
+      };
+
+      Controller.prototype.on_keydown = function(e) {
+        if (!this.view.visible()) {
           return;
         }
         switch (e.keyCode) {
-          case 27:
+          case KEY_CODE.ESC:
             e.preventDefault();
-            view.hide();
+            this.view.hide();
             break;
-          case 38:
+          case KEY_CODE.UP:
             e.preventDefault();
-            view.prev();
+            this.view.prev();
             break;
-          case 40:
+          case KEY_CODE.DOWN:
             e.preventDefault();
-            view.next();
+            this.view.next();
             break;
-          case 9:
-          case 13:
-            if (!view.isShowing()) {
+          case KEY_CODE.TAB:
+          case KEY_CODE.ENTER:
+            if (!this.view.visible()) {
               return;
             }
             e.preventDefault();
-            view.choose();
+            this.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) {
+      };
+
+      Controller.prototype.render_view = function(data) {
+        var search_key;
+        search_key = this.get_opt("search_key");
+        data = this.callbacks("sorter").call(this, this.query.text, data, search_key);
+        data = data.splice(0, this.get_opt('limit'));
+        return this.view.render(data);
+      };
+
+      Controller.prototype.look_up = function() {
+        var data, origin_data, params, query, search_key;
+        query = this.catch_query();
+        if (!query) {
           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));
+        origin_data = this.get_opt("data");
+        search_key = this.get_opt("search_key");
+        if (typeof origin_data === "string") {
+          params = {
+            q: query.text,
+            limit: this.get_opt("limit")
+          };
+          this.callbacks('remote_filter').call(this, params, origin_data, $.proxy(this.render_view, this));
+        } else if ((data = this.callbacks('filter').call(this, query.text, origin_data, search_key))) {
+          this.render_view(data);
         } 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 {
-              name = $.isPlainObject(item) ? item[_this.dataValue()] : item;
-              regexp = new RegExp(key.text.replace("+", "\\+"), 'i');
-              match = name.match(regexp);
-            } catch (e) {
-              return null;
-            }
-            if (match) {
-              return item;
-            } else {
-              return null;
-            }
-          });
-        }
-        return items;
+      };
+
+      return Controller;
+
+    })();
+    View = (function() {
+
+      function View(controller) {
+        this.controller = controller;
+        this.id = this.controller.get_opt("view_id", "at-view");
+        this.timeout_id = null;
+        this.$el = $("#" + this.id);
+        this.create_view();
       }
-    };
-    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() {
+
+      View.prototype.create_view = function() {
         var $menu, tpl,
           _this = this;
-        if (!_isNil(this.jqo())) {
+        if (this.exist()) {
           return;
         }
-        tpl = "<div id='" + this.id.slice(1) + "' class='at-view'><ul id='" + this.id.slice(1) + "-ul'></ul></div>";
+        tpl = "<div id='" + this.id + "' class='at-view'><ul id='" + this.id + "-ul'></ul></div>";
         $("body").append(tpl);
-        $menu = this.jqo().find('ul');
+        this.$el = $("#" + this.id);
+        $menu = this.$el.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();
+          return _this.$el.data("_view").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);
+      };
+
+      View.prototype.exist = function() {
+        return $("#" + this.id).length > 0;
+      };
+
+      View.prototype.visible = function() {
+        return this.$el.is(":visible");
+      };
+
+      View.prototype.choose = function() {
+        var $li;
+        $li = this.$el.find(".cur");
+        this.controller.callbacks("selector").call(this.controller, $li);
+        this.controller.trigger("choose", [$li]);
         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();
+      };
+
+      View.prototype.reposition = function() {
+        var offset, rect;
+        rect = this.controller.rect();
+        if (rect.bottom + this.$el.height() - $(window).scrollTop() > $(window).height()) {
+          rect.bottom = rect.top - this.$el.height();
         }
-        log("AtView.rePosition", {
-          left: rect.left,
-          top: rect.bottom
-        });
-        return this.jqo().offset({
+        offset = {
           left: rect.left,
           top: rect.bottom
-        });
-      },
-      next: function() {
+        };
+        this.$el.offset(offset);
+        return this.controller.trigger("reposition", [offset]);
+      };
+
+      View.prototype.next = function() {
         var cur, next;
-        cur = this.jqo().find('.cur').removeClass('cur');
+        cur = this.$el.find('.cur').removeClass('cur');
         next = cur.next();
         if (!next.length) {
-          next = $(this.jqo().find('li')[0]);
+          next = $(this.$el.find('li')[0]);
         }
         return next.addClass('cur');
-      },
-      prev: function() {
+      };
+
+      View.prototype.prev = function() {
         var cur, prev;
-        cur = this.jqo().find('.cur').removeClass('cur');
+        cur = this.$el.find('.cur').removeClass('cur');
         prev = cur.prev();
         if (!prev.length) {
-          prev = this.jqo().find('li').last();
+          prev = this.$el.find('li').last();
         }
         return prev.addClass('cur');
-      },
-      show: function() {
-        if (!this.isShowing()) {
-          this.jqo().show();
+      };
+
+      View.prototype.show = function() {
+        if (!this.visible()) {
+          this.$el.show();
         }
-        return this.rePosition();
-      },
-      hide: function(time) {
+        return this.reposition();
+      };
+
+      View.prototype.hide = function(time) {
         var callback,
           _this = this;
         if (isNaN(time)) {
-          if (this.isShowing()) {
-            return this.jqo().hide();
+          if (this.visible()) {
+            return this.$el.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.timeout_id = setTimeout(callback, time);
         }
-        return this.jqo().find('ul').empty();
-      },
-      render: function(holder, list) {
-        var $ul, tpl;
+      };
+
+      View.prototype.clear = function() {
+        return this.$el.find('ul').empty();
+      };
+
+      View.prototype.render = function(list) {
+        var $ul, tpl,
+          _this = this;
         if (!$.isArray(list)) {
           return false;
         }
@@ -448,169 +515,98 @@
           this.hide();
           return true;
         }
-        this.holder = holder;
-        holder.cache(list);
         this.clear();
-        $ul = this.jqo().find('ul');
-        tpl = holder.getOpt('tpl');
+        this.$el.data("_view", this);
+        $ul = this.$el.find('ul');
+        tpl = this.controller.get_opt('tpl', DEFAULT_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));
+          var $li, li;
+          li = _this.controller.callbacks("tpl_eval").call(_this.controller, tpl, item);
+          $li = $(_this.controller.callbacks("highlighter").call(_this.controller, li, _this.controller.query.text));
+          $li.data("info", item);
+          return $ul.append($li);
         });
         this.show();
         return $ul.find("li:eq(0)").addClass("cur");
-      }
-    };
-    _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];
-        });
-      } 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 View;
+
+    })();
+    DEFAULT_TPL = "<li data-value='${name}'>${name}</li>";
+    $.fn.atwho = function(flag, options) {
       return this.filter('textarea, input').each(function() {
         var $this, data;
         $this = $(this);
-        data = $this.data("AtWho");
+        data = $this.data("atwho");
         if (!data) {
-          $this.data('AtWho', (data = new At(this)));
+          $this.data('atwho', (data = new Controller(this)));
         }
         return data.reg(flag, options);
       });
     };
-    return $.fn.atWho["default"] = {
-      data: [],
-      choose: "data-value",
-      callback: null,
-      cache: true,
+    $.fn.atwho.Controller = Controller;
+    $.fn.atwho.View = View;
+    $.fn.atwho.Mirror = Mirror;
+    return $.fn.atwho["default"] = {
+      data: null,
+      search_key: "name",
+      callbacks: DEFAULT_CALLBACKS,
       limit: 5,
       display_flag: true,
-      tpl: _DEFAULT_TPL
+      display_timeout: 300,
+      tpl: DEFAULT_TPL
     };
-  })(window.jQuery);
-
-  /*
-     Implement Twitter/Weibo @ mentions
-  
-     Copyright (c) 2012 chord.luo@gmail.com
-  
-     Permission is hereby granted, free of charge, to any person obtaining
-     a copy of this software and associated documentation files (the
-     "Software"), to deal in the Software without restriction, including
-     without limitation the rights to use, copy, modify, merge, publish,
-     distribute, sublicense, and/or sell copies of the Software, and to
-     permit persons to whom the Software is furnished to do so, subject to
-     the following conditions:
-  
-     The above copyright notice and this permission notice shall be
-     included in all copies or substantial portions of the Software.
-  
-     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-     EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-     MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-     NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-     LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-     OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-     WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-  */
-
-
-  /*
-  本插件操作 textarea 或者 input 内的插入符
-  只实现了获得插入符在文本框中的位置，我设置
-  插入符的位置.
-  */
-
-
-  (function($) {
+  });
+
+}).call(this);
+
+
+/*
+  Implement Github like autocomplete mentions
+  http://ichord.github.com/At.js
+
+  Copyright (c) 2013 chord.luo@gmail.com
+  Licensed under the MIT license.
+*/
+
+
+/*
+本插件操作 textarea 或者 input 内的插入符
+只实现了获得插入符在文本框中的位置，我设置
+插入符的位置.
+*/
+
+
+(function() {
+
+  (function(factory) {
+    if (typeof exports === 'object') {
+      return factory(require('jquery'));
+    } else if (typeof define === 'function' && define.amd) {
+      return define(['jquery']);
+    } else {
+      return factory(window.jQuery);
+    }
+  })(function($) {
     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.
+                #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 !!! 
+          /* 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.;
@@ -618,8 +614,8 @@
 
           len = normalizedValue.length;
           /*
-                             <[  I really HATE IE   ]>:
-                              the whole content in the inputor will be the textInputRange.
+                       <[  I really HATE IE   ]>:
+                        the whole content in the inputor will be the textInputRange.
           */
 
           textInputRange = inputor.createTextRange();
@@ -639,26 +635,26 @@
 
           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.
+                                    ___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 {
             /*
-                                        I really |HATE] IE   ]> 
-                                               <-|
-                                      I really[ [HATE] IE   ]>
-                                            <-[
-                                    I reall[y  [HATE] IE   ]>
-                                 
-                                  will return how many unit have moved.
+                                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);
@@ -690,6 +686,6 @@
         return getCaretPos(inputor);
       }
     };
-  })(window.jQuery);
+  });
 
 }).call(this);

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

@@ -1,47 +1 @@
-#at-view {
-    position:absolute;
-    top: 0;
-    left: 0;
-    display: none;
-    margin-top: 18px;
-    background: white;
-    border: 1px solid #DDD;
-    border-radius: 3px;
-    box-shadow: 0 0 5px rgba(0,0,0,0.1);
-    min-width: 120px;
-}
-
-#at-view .cur {
-    background: #3366FF;
-    color: white;
-}
-#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;
-    padding:0;
-    margin:auto;
-}
-#at-view ul li {
-    display: block;
-    padding: 5px 10px;
-    border-bottom: 1px solid #DDD;
-    cursor: pointer;
-    /* border-top: 1px solid #C8C8C8; */
-}
-#at-view small {
-    font-size: smaller;
-    color: #777;
-    font-weight: normal;
-}
-
-
+#at-view{position:absolute;top:0;left:0;display:none;margin-top:18px;background:#fff;border:1px solid #DDD;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.1);min-width:120px;z-index:10}#at-view .cur{background:#36F;color:#fff}#at-view .cur small{color:#fff}#at-view strong{color:#36F}#at-view .cur strong{color:#fff;font:bold}#at-view ul{list-style:none;padding:0;margin:auto}#at-view ul li{display:block;padding:5px 10px;border-bottom:1px solid #DDD;cursor:pointer}#at-view small{font-size:smaller;color:#777;font-weight:400}

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

@@ -1,7 +1,7 @@
 module Jquery
   module Atwho
     module Rails
-      VERSION = "0.1.7"
+      VERSION = "0.2.1"
     end
   end
 end

data/lib/jquery-atwho-rails.rb

@@ -1,4 +1,5 @@
 require "jquery-atwho-rails/version"
+require "ActiveSupport"
 
 module Jquery
   module Atwho

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jquery-atwho-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.2.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-06 00:00:00.000000000 Z
+date: 2013-01-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rspec
@@ -43,8 +43,7 @@ dependencies:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '0'
-description: ! "This is a jQuery plugin \n    that implement Twitter/Weibo like @
-  mentions."
+description: ! "This is a jQuery plugin\n    that implement Github-like mentions."
 email:
 - chord.luo@gmail.com
 executables: []
@@ -76,12 +75,18 @@ required_ruby_version: !ruby/object:Gem::Requirement
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
+      segments:
+      - 0
+      hash: -3411578706402898122
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
+      segments:
+      - 0
+      hash: -3411578706402898122
 requirements: []
 rubyforge_project: jquery-atwho-rails
 rubygems_version: 1.8.24
@@ -91,4 +96,3 @@ summary: ! 'jquery plugin: @mentions'
 test_files:
 - spec/generators/install_generator_spec.rb
 - spec/spec_helper.rb
-has_rdoc: