@gitlab/at.js 1.5.6 → 1.5.8

package/dist/js/jquery.atwho.js

@@ -1,6 +1,6 @@
 /**
- * @gitlab/at.js - 1.5.6
- * Copyright (c) 2021 chord.luo <chord.luo@gmail.com>;
+ * @gitlab/at.js - 1.5.8
+ * Copyright (c) 2026 chord.luo <chord.luo@gmail.com>;
  * Homepage: https://gitlab.com/gitlab-org/frontend/At.js
  * License: MIT
  */
@@ -37,20 +37,48 @@ KEY_CODE = {
   SPACE: 32
 };
 
+// Functions set for handling and rendering the data.
+// Others developers can override these methods to tweak At.js such as matcher.
+// We can override them in `callbacks` settings.
+
+// @mixin
+
+// The context of these functions is `$.atwho.Controller` object and they are called in this sequences:
+
+// [beforeSave, matcher, filter, remoteFilter, sorter, tplEvl, highlighter, beforeInsert, afterMatchFailed]
+
 DEFAULT_CALLBACKS = {
+  // It would be called to restructure the data before At.js invokes `Model#save` to save data
+  // By default, At.js will convert it to a Hash Array.
+
+  // @param data [Array] data to refacotor.
+  // @return [Array] Data after refactor.
   beforeSave: function(data) {
     return Controller.arrayToDefaultHash(data);
   },
+  // It would be called to match the `flag`.
+  // It will match at start of line or after whitespace
+
+  // @param flag [String] current `flag` ("@", etc)
+  // @param subtext [String] Text from start to current caret position.
+  // @param should_startWithSpace [boolean] accept white space as beginning of match.
+  // @param acceptSpaceBar [boolean] accept a space bar in the center of match,
+  //                                 so you can match a first and last name, for ex.
+
+  // @return [String | null] Matched result.
   matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
     var _a, _y, match, regexp, space;
+    // escape RegExp
     flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
     if (should_startWithSpace) {
       flag = '(?:^|\\s)' + flag;
     }
+    // À
     _a = decodeURI("%C3%80");
+    // ÿ
     _y = decodeURI("%C3%BF");
     space = acceptSpaceBar ? "\ " : "";
-    regexp = new RegExp(flag + "([A-Za-z" + _a + "-" + _y + "0-9_" + space + "\'\.\+\-]*)$|" + flag + "([^\\x00-\\xff]*)$", 'gi');
+    regexp = new RegExp(`${flag}([A-Za-z${_a}-${_y}0-9_${space}\'\.\+\-]*)$|${flag}([^\\x00-\\xff]*)$`, 'gi');
     match = regexp.exec(subtext);
     if (match) {
       return match[2] || match[1];
@@ -58,8 +86,18 @@ DEFAULT_CALLBACKS = {
       return null;
     }
   },
+  // ---------------------
+
+  // Filter data by matched string.
+
+  // @param query [String] Matched string.
+  // @param data [Array] data list
+  // @param searchKey [String] at char for searching.
+
+  // @return [Array] result data.
   filter: function(query, data, searchKey) {
     var _results, i, item, len;
+    // !!null #=> false; !!undefined #=> false; !!'' #=> false;
     _results = [];
     for (i = 0, len = data.length; i < len; i++) {
       item = data[i];
@@ -69,7 +107,24 @@ DEFAULT_CALLBACKS = {
     }
     return _results;
   },
+  // If a function is given, At.js will invoke it if local filter can not find any data
+
+  // @param params [String] matched query
+  // @param callback [Function] callback to render page.
   remoteFilter: null,
+  // remoteFilter: (query, callback) ->
+  //   $.ajax url,
+  //     data: params
+  //     success: (data) ->
+  //       callback(data)
+
+  // Sorter data of course.
+
+  // @param query [String] matched string
+  // @param items [Array] data that was refactored
+  // @param searchKey [String] at char to search
+
+  // @return [Array] sorted data
   sorter: function(query, items, searchKey) {
     var _results, i, item, len;
     if (!query) {
@@ -87,6 +142,12 @@ DEFAULT_CALLBACKS = {
       return a.atwho_order - b.atwho_order;
     });
   },
+  // Evaluate the template either as a string or as a function
+  // this allows someone to pass in a set of data that needs a
+  // different template for different data results
+
+  // @param tpl [function] the template function or string
+  // @param map [Hash] Data map to eval.
   tplEval: function(tpl, map) {
     var error, template;
     template = tpl;
@@ -102,6 +163,12 @@ DEFAULT_CALLBACKS = {
       return "";
     }
   },
+  // Highlight the `matched query` string.
+
+  // @param li [String] HTML String after eval.
+  // @param query [String] matched query.
+
+  // @return [String] highlighted string.
   highlighter: function(li, query) {
     var regexp;
     if (!query) {
@@ -112,19 +179,33 @@ DEFAULT_CALLBACKS = {
       return '> ' + $1 + '<strong>' + $2 + '</strong>' + $3 + ' <';
     });
   },
+  // What to do before inserting item's value into inputor.
+
+  // @param value [String] content to insert
+  // @param $li [jQuery Object] the chosen item
+  // @param e [event Object] from the user selection (keyDown or click)
   beforeInsert: function(value, $li, e) {
     return value;
   },
+  // You can adjust the menu's offset here.
+
+  // @param offset [Hash] offset will be applied to menu
+  // beforeReposition: (offset) ->
+  //   offset.left += 10
+  //   offset.top += 10
+  //   offset
   beforeReposition: function(offset) {
     return offset;
   },
   afterMatchFailed: function(at, el) {}
 };
 
+// At.js central contoller(searching, matching, evaluating and rendering.)
 var App;
 
-App = (function() {
-  function App(inputor) {
+App = class App {
+  // @param inputor [HTML DOM Object] `input` or `textarea`
+  constructor(inputor) {
     this.currentFlag = null;
     this.controllers = {};
     this.aliasMaps = {};
@@ -133,19 +214,16 @@ App = (function() {
     this.listen();
   }
 
-  App.prototype.createContainer = function(doc) {
+  createContainer(doc) {
     var ref;
     if ((ref = this.$el) != null) {
       ref.remove();
     }
     return $(doc.body).append(this.$el = $("<div class='atwho-container'></div>"));
-  };
+  }
 
-  App.prototype.setupRootElement = function(iframe, asRoot) {
+  setupRootElement(iframe, asRoot = false) {
     var error;
-    if (asRoot == null) {
-      asRoot = false;
-    }
     if (iframe) {
       this.window = iframe.contentWindow;
       this.document = iframe.contentDocument || this.window.document;
@@ -159,14 +237,16 @@ App = (function() {
         error = error1;
         this.iframe = null;
         if ($.fn.atwho.debug) {
-          throw new Error("iframe auto-discovery is failed.\nPlease use `setIframe` to set the target iframe manually.\n" + error);
+          throw new Error(`iframe auto-discovery is failed.
+Please use \`setIframe\` to set the target iframe manually.
+${error}`);
         }
       }
     }
     return this.createContainer((this.iframeAsRoot = asRoot) ? this.document : document);
-  };
+  }
 
-  App.prototype.controller = function(at) {
+  controller(at) {
     var c, current, currentFlag, ref;
     if (this.aliasMaps[at]) {
       current = this.controllers[this.aliasMaps[at]];
@@ -185,81 +265,76 @@ App = (function() {
     } else {
       return this.controllers[this.currentFlag];
     }
-  };
+  }
 
-  App.prototype.setContextFor = function(at) {
+  setContextFor(at) {
     this.currentFlag = at;
     return this;
-  };
+  }
 
-  App.prototype.reg = function(flag, setting) {
+  // At.js can register multiple at char (flag) to every inputor such as "@" and ":"
+  // Along with their own `settings` so that it works differently.
+  // After register, we still can update their `settings` such as updating `data`
+
+  // @param flag [String] at char (flag)
+  // @param settings [Hash] the settings
+  reg(flag, setting) {
     var base, controller;
     controller = (base = this.controllers)[flag] || (base[flag] = this.$inputor.is('[contentEditable]') ? new EditableController(this, flag) : new TextareaController(this, flag));
     if (setting.alias) {
+      // TODO: it will produce rubbish alias map, reduse this.
       this.aliasMaps[setting.alias] = flag;
     }
     controller.init(setting);
     return this;
-  };
+  }
 
-  App.prototype.listen = function() {
-    return this.$inputor.on('compositionstart', (function(_this) {
-      return function(e) {
-        var ref;
-        if ((ref = _this.controller()) != null) {
-          ref.view.hide();
-        }
-        _this.isComposing = true;
-        return null;
-      };
-    })(this)).on('compositionend', (function(_this) {
-      return function(e) {
-        _this.isComposing = false;
-        setTimeout(function(e) {
-          return _this.dispatch(e);
-        });
-        return null;
-      };
-    })(this)).on('keyup.atwhoInner', (function(_this) {
-      return function(e) {
-        return _this.onKeyup(e);
-      };
-    })(this)).on('keydown.atwhoInner', (function(_this) {
-      return function(e) {
-        return _this.onKeydown(e);
-      };
-    })(this)).on('blur.atwhoInner', (function(_this) {
-      return function(e) {
-        var c;
-        if (c = _this.controller()) {
-          c.expectedQueryCBId = null;
-          return c.view.hide(e, c.getOpt("displayTimeout"));
-        }
-      };
-    })(this)).on('click.atwhoInner', (function(_this) {
-      return function(e) {
-        return _this.dispatch(e);
-      };
-    })(this)).on('scroll.atwhoInner', (function(_this) {
-      return function() {
-        var lastScrollTop;
-        lastScrollTop = _this.$inputor.scrollTop();
-        return function(e) {
-          var currentScrollTop, ref;
-          currentScrollTop = e.target.scrollTop;
-          if (lastScrollTop !== currentScrollTop) {
-            if ((ref = _this.controller()) != null) {
-              ref.view.hide(e);
-            }
+  // binding jQuery events of `inputor`'s
+  listen() {
+    return this.$inputor.on('compositionstart', (e) => {
+      var ref;
+      if ((ref = this.controller()) != null) {
+        ref.view.hide();
+      }
+      this.isComposing = true;
+      return null;
+    }).on('compositionend', (e) => {
+      this.isComposing = false;
+      setTimeout((e) => {
+        return this.dispatch(e);
+      });
+      return null;
+    }).on('keyup.atwhoInner', (e) => {
+      return this.onKeyup(e);
+    }).on('keydown.atwhoInner', (e) => {
+      return this.onKeydown(e);
+    }).on('blur.atwhoInner', (e) => {
+      var c;
+      if (c = this.controller()) {
+        c.expectedQueryCBId = null;
+        return c.view.hide(e, c.getOpt("displayTimeout"));
+      }
+    }).on('click.atwhoInner', (e) => {
+      return this.dispatch(e);
+    }).on('scroll.atwhoInner', (() => {
+      var lastScrollTop;
+      // make returned handler handle the very first call properly
+      lastScrollTop = this.$inputor.scrollTop();
+      return (e) => {
+        var currentScrollTop, ref;
+        currentScrollTop = e.target.scrollTop;
+        if (lastScrollTop !== currentScrollTop) {
+          if ((ref = this.controller()) != null) {
+            ref.view.hide(e);
           }
-          lastScrollTop = currentScrollTop;
-          return true;
-        };
+        }
+        lastScrollTop = currentScrollTop;
+        return true; // ensure we don't stop bubbling
       };
-    })(this)());
-  };
+    })());
+  }
 
-  App.prototype.shutdown = function() {
+  shutdown() {
     var _, c, ref;
     ref = this.controllers;
     for (_ in ref) {
@@ -269,9 +344,9 @@ App = (function() {
     }
     this.$inputor.off('.atwhoInner');
     return this.$el.remove();
-  };
+  }
 
-  App.prototype.dispatch = function(e) {
+  dispatch(e) {
     var _, c, ref, results;
     if (void 0 === e) {
       return;
@@ -283,9 +358,9 @@ App = (function() {
       results.push(c.lookUp(e));
     }
     return results;
-  };
+  }
 
-  App.prototype.onKeyup = function(e) {
+  onKeyup(e) {
     var ref;
     switch (e.keyCode) {
       case KEY_CODE.ESC:
@@ -309,10 +384,12 @@ App = (function() {
       default:
         this.dispatch(e);
     }
-  };
+  }
 
-  App.prototype.onKeydown = function(e) {
+  // coffeescript will return everywhere!!
+  onKeydown(e) {
     var ref, view;
+    // return if not (view = this.controller().view).visible()
     view = (ref = this.controller()) != null ? ref.view : void 0;
     if (!(view && view.visible())) {
       return;
@@ -366,21 +443,18 @@ App = (function() {
       default:
         $.noop();
     }
-  };
-
-  return App;
+  }
 
-})();
+};
 
-var Controller,
-  slice = [].slice;
+var Controller;
 
-Controller = (function() {
-  Controller.prototype.uid = function() {
+Controller = class Controller {
+  uid() {
     return (Math.random().toString(16) + "000000000").substr(2, 8) + (new Date().getTime());
-  };
+  }
 
-  function Controller(app, at1) {
+  constructor(app, at1) {
     this.app = app;
     this.at = at1;
     this.$inputor = this.app.$inputor;
@@ -390,53 +464,71 @@ Controller = (function() {
     this.query = null;
     this.pos = 0;
     this.range = null;
-    if ((this.$el = $("#atwho-ground-" + this.id, this.app.$el)).length === 0) {
-      this.app.$el.append(this.$el = $("<div id='atwho-ground-" + this.id + "'></div>"));
+    if ((this.$el = $(`#atwho-ground-${this.id}`, this.app.$el)).length === 0) {
+      this.app.$el.append(this.$el = $(`<div id='atwho-ground-${this.id}'></div>`));
     }
     this.model = new Model(this);
     this.view = new View(this);
   }
 
-  Controller.prototype.init = function(setting) {
-    this.setting = $.extend({}, this.setting || $.fn.atwho["default"], setting);
+  init(setting) {
+    this.setting = $.extend({}, this.setting || $.fn.atwho.default, setting);
     this.view.init();
     return this.model.reload(this.setting.data);
-  };
+  }
 
-  Controller.prototype.destroy = function() {
+  destroy() {
     this.trigger('beforeDestroy');
     this.model.destroy();
     this.view.destroy();
     return this.$el.remove();
-  };
+  }
 
-  Controller.prototype.callDefault = function() {
-    var args, error, funcName;
-    funcName = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : [];
+  callDefault(funcName, ...args) {
+    var error;
     try {
       return DEFAULT_CALLBACKS[funcName].apply(this, args);
     } catch (error1) {
       error = error1;
-      return $.error(error + " Or maybe At.js doesn't have function " + funcName);
+      return $.error(`${error} Or maybe At.js doesn't have function ${funcName}`);
     }
-  };
+  }
+
+  // Delegate custom `jQueryEvent` to the inputor
+  // This function will add `atwho` as namespace to every jQuery event
+  // and pass current context as the last param to it.
 
-  Controller.prototype.trigger = function(name, data) {
+  // @example
+  //   this.trigger "roll_n_rock", [1,2,3,4]
+
+  //   $inputor.on "rool_n_rock", (e, one, two, three, four) ->
+  //     console.log one, two, three, four
+
+  // @param name [String] Event name
+  // @param data [Array] data to callback
+  trigger(name, data = []) {
     var alias, eventName;
-    if (data == null) {
-      data = [];
-    }
     data.push(this);
     alias = this.getOpt('alias');
-    eventName = alias ? name + "-" + alias + ".atwho" : name + ".atwho";
+    eventName = alias ? `${name}-${alias}.atwho` : `${name}.atwho`;
     return this.$inputor.trigger(eventName, data);
-  };
+  }
+
+  // Get callback either in settings which was set by plugin user or in default callbacks list.
 
-  Controller.prototype.callbacks = function(funcName) {
+  // @param funcName [String] callback's name
+  // @return [Function] The callback.
+  callbacks(funcName) {
     return this.getOpt("callbacks")[funcName] || DEFAULT_CALLBACKS[funcName];
-  };
+  }
+
+  // Because different registered at chars have different settings.
+  // so we should give their own for them.
 
-  Controller.prototype.getOpt = function(at, default_value) {
+  // @param at [String] setting's at name
+  // @param default_value [?] return this if nothing is returned from current settings.
+  // @return [?] setting's value
+  getOpt(at, default_value) {
     var e;
     try {
       return this.setting[at];
@@ -444,25 +536,28 @@ Controller = (function() {
       e = error1;
       return null;
     }
-  };
+  }
 
-  Controller.prototype.insertContentFor = function($li) {
+  insertContentFor($li) {
     var data, tpl;
     tpl = this.getOpt('insertTpl');
     data = $.extend({}, $li.data('item-data'), {
       'atwho-at': this.at
     });
     return this.callbacks("tplEval").call(this, tpl, data, "onInsert");
-  };
+  }
 
-  Controller.prototype.renderView = function(data) {
+  // Render list view
+
+  // @param data [Array] The data
+  renderView(data) {
     var searchKey;
     searchKey = this.getOpt("searchKey");
     data = this.callbacks("sorter").call(this, this.query.text, data, searchKey);
     return this.view.render(data.slice(0, this.getOpt('limit')));
-  };
+  }
 
-  Controller.arrayToDefaultHash = function(data) {
+  static arrayToDefaultHash(data) {
     var i, item, len, results;
     if (!$.isArray(data)) {
       return data;
@@ -479,9 +574,10 @@ Controller = (function() {
       }
     }
     return results;
-  };
+  }
 
-  Controller.prototype.lookUp = function(e) {
+  // Searching!
+  lookUp(e) {
     var query, wait;
     if (e && e.type === 'click' && !this.getOpt('lookUpOnClick')) {
       return;
@@ -501,9 +597,9 @@ Controller = (function() {
       this._lookUp(query);
     }
     return query;
-  };
+  }
 
-  Controller.prototype._delayLookUp = function(query, wait) {
+  _delayLookUp(query, wait) {
     var now, remaining;
     now = Date.now ? Date.now() : new Date().getTime();
     this.previousCallTime || (this.previousCallTime = now);
@@ -511,13 +607,11 @@ Controller = (function() {
     if ((0 < remaining && remaining < wait)) {
       this.previousCallTime = now;
       this._stopDelayedCall();
-      return this.delayedCallTimeout = setTimeout((function(_this) {
-        return function() {
-          _this.previousCallTime = 0;
-          _this.delayedCallTimeout = null;
-          return _this._lookUp(query);
-        };
-      })(this), wait);
+      return this.delayedCallTimeout = setTimeout(() => {
+        this.previousCallTime = 0;
+        this.delayedCallTimeout = null;
+        return this._lookUp(query);
+      }, wait);
     } else {
       this._stopDelayedCall();
       if (this.previousCallTime !== now) {
@@ -525,22 +619,23 @@ Controller = (function() {
       }
       return this._lookUp(query);
     }
-  };
+  }
 
-  Controller.prototype._stopDelayedCall = function() {
+  _stopDelayedCall() {
     if (this.delayedCallTimeout) {
       clearTimeout(this.delayedCallTimeout);
       return this.delayedCallTimeout = null;
     }
-  };
+  }
 
-  Controller.prototype._generateQueryCBId = function() {
+  _generateQueryCBId() {
     return {};
-  };
+  }
 
-  Controller.prototype._lookUp = function(query) {
+  _lookUp(query) {
     var _callback;
     _callback = function(queryCBId, data) {
+      // ensure only the latest instance of this function perform actions
       if (queryCBId !== this.expectedQueryCBId) {
         return;
       }
@@ -552,24 +647,17 @@ Controller = (function() {
     };
     this.expectedQueryCBId = this._generateQueryCBId();
     return this.model.query(query.text, $.proxy(_callback, this, this.expectedQueryCBId));
-  };
-
-  return Controller;
+  }
 
-})();
+};
 
-var TextareaController,
-  extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
-  hasProp = {}.hasOwnProperty;
+var TextareaController;
 
-TextareaController = (function(superClass) {
-  extend(TextareaController, superClass);
+TextareaController = class TextareaController extends Controller {
+  // Catch query string behind the at char
 
-  function TextareaController() {
-    return TextareaController.__super__.constructor.apply(this, arguments);
-  }
-
-  TextareaController.prototype.catchQuery = function() {
+  // @return [Hash] Info of the query. Look likes this: {'text': "hello", 'headPos': 0, 'endPos': 0}
+  catchQuery() {
     var caretPos, content, end, isString, query, start, subtext;
     content = this.$inputor.val();
     caretPos = this.$inputor.caret('pos', {
@@ -596,9 +684,12 @@ TextareaController = (function(superClass) {
       this.view.hide();
     }
     return this.query = query;
-  };
+  }
 
-  TextareaController.prototype.rect = function() {
+  // Get offset of current at char(`flag`)
+
+  // @return [Hash] the offset which look likes this: {top: y, left: x, bottom: bottom}
+  rect() {
     var c, iframeOffset, scaleBottom;
     if (!(c = this.$inputor.caret('offset', this.pos - 1, {
       iframe: this.app.iframe
@@ -616,16 +707,19 @@ TextareaController = (function(superClass) {
       top: c.top,
       bottom: c.top + c.height + scaleBottom
     };
-  };
+  }
 
-  TextareaController.prototype.insert = function(content, $li) {
+  // Insert value of `data-value` attribute of chosen item into inputor
+
+  // @param content [String] string to insert
+  insert(content, $li) {
     var $inputor, source, startStr, suffix, text;
     $inputor = this.$inputor;
     source = $inputor.val();
     startStr = source.slice(0, Math.max(this.query.headPos - this.at.length, 0));
     suffix = (suffix = this.getOpt('suffix')) === "" ? suffix : suffix || " ";
     content += suffix;
-    text = "" + startStr + content + (source.slice(this.query['endPos'] || 0));
+    text = `${startStr}${content}${source.slice(this.query['endPos'] || 0)}`;
     $inputor.val(text);
     $inputor.caret('pos', startStr.length + content.length, {
       iframe: this.app.iframe
@@ -634,35 +728,22 @@ TextareaController = (function(superClass) {
       $inputor.focus();
     }
     return $inputor.change();
-  };
-
-  return TextareaController;
-
-})(Controller);
-
-var EditableController,
-  extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
-  hasProp = {}.hasOwnProperty;
+  }
 
-EditableController = (function(superClass) {
-  extend(EditableController, superClass);
+};
 
-  function EditableController() {
-    return EditableController.__super__.constructor.apply(this, arguments);
-  }
+var EditableController;
 
-  EditableController.prototype._getRange = function() {
+EditableController = class EditableController extends Controller {
+  _getRange() {
     var sel;
     sel = this.app.window.getSelection();
     if (sel.rangeCount > 0) {
       return sel.getRangeAt(0);
     }
-  };
+  }
 
-  EditableController.prototype._setRange = function(position, node, range) {
-    if (range == null) {
-      range = this._getRange();
-    }
+  _setRange(position, node, range = this._getRange()) {
     if (!(range && node)) {
       return;
     }
@@ -676,26 +757,23 @@ EditableController = (function(superClass) {
     }
     range.collapse(false);
     return this._clearRange(range);
-  };
+  }
 
-  EditableController.prototype._clearRange = function(range) {
+  _clearRange(range = this._getRange()) {
     var sel;
-    if (range == null) {
-      range = this._getRange();
-    }
     sel = this.app.window.getSelection();
     if (this.ctrl_a_pressed == null) {
       sel.removeAllRanges();
       return sel.addRange(range);
     }
-  };
+  }
 
-  EditableController.prototype._movingEvent = function(e) {
+  _movingEvent(e) {
     var ref;
     return e.type === 'click' || ((ref = e.which) === KEY_CODE.RIGHT || ref === KEY_CODE.LEFT || ref === KEY_CODE.UP || ref === KEY_CODE.DOWN);
-  };
+  }
 
-  EditableController.prototype._unwrap = function(node) {
+  _unwrap(node) {
     var next;
     node = $(node).unwrap().get(0);
     if ((next = node.nextSibling) && next.nodeValue) {
@@ -703,9 +781,9 @@ EditableController = (function(superClass) {
       $(next).remove();
     }
     return node;
-  };
+  }
 
-  EditableController.prototype.catchQuery = function(e) {
+  catchQuery(e) {
     var $inserted, $query, _range, index, inserted, isString, lastNode, matched, offset, query, query_content, range;
     if (!(range = this._getRange())) {
       return;
@@ -722,6 +800,9 @@ EditableController = (function(superClass) {
       this._clearRange();
       return;
     }
+    // absorb range
+    // The range at the end of an element is not inside in firefox but not others browsers including IE.
+    // To normolize them, we have to move the range inside the element while deleting content or moving caret right after .atwho-inserted
     if (/firefox/i.test(navigator.userAgent)) {
       if ($(range.startContainer).is(this.$inputor)) {
         this._clearRange();
@@ -741,6 +822,7 @@ EditableController = (function(superClass) {
         }
       }
     }
+    // modifying inserted element
     $(range.startContainer).closest('.atwho-inserted').addClass('atwho-query').siblings().removeClass('atwho-query');
     if (($query = $(".atwho-query", this.app.document)).length > 0 && $query.is(':empty') && $query.text().length === 0) {
       $query.remove();
@@ -760,6 +842,7 @@ EditableController = (function(superClass) {
           return;
       }
     }
+    // matching
     if ($query.length > 0 && (query_content = $query.attr('data-atwho-at-query'))) {
       $query.empty().html(query_content).attr('data-atwho-at-query', null);
       this._setRange('after', $query.get(0), range);
@@ -768,6 +851,7 @@ EditableController = (function(superClass) {
     _range.setStart(range.startContainer, 0);
     matched = this.callbacks("matcher").call(this, this.at, _range.toString(), this.getOpt('startWithSpace'), this.getOpt("acceptSpaceBar"));
     isString = typeof matched === 'string';
+    // wrapping query with .atwho-query
     if ($query.length === 0 && isString && (index = range.startOffset - this.at.length - matched.length) >= 0) {
       range.setStart(range.startContainer, index);
       $query = $('<span/>', this.app.document).attr(this.getOpt("editableAtwhoQueryAttrs")).addClass('atwho-query');
@@ -786,6 +870,7 @@ EditableController = (function(superClass) {
     if (isString && matched.length < this.getOpt('minLen', 0)) {
       return;
     }
+    // handle the matched result
     if (isString && matched.length <= this.getOpt('maxLen', 20)) {
       query = {
         text: matched,
@@ -807,11 +892,16 @@ EditableController = (function(superClass) {
       }
       return null;
     }
-  };
+  }
+
+  // Get offset of current at char(`flag`)
 
-  EditableController.prototype.rect = function() {
+  // @return [Hash] the offset which look likes this: {top: y, left: x, bottom: bottom}
+  rect() {
     var $iframe, iframeOffset, rect;
     rect = this.query.el.offset();
+    // do not use {top: 0, left: 0} from jQuery when element is hidden
+    // happens every other time the menu is displayed on click in contenteditable
     if (!(rect && this.query.el[0].getClientRects().length)) {
       return;
     }
@@ -822,9 +912,12 @@ EditableController = (function(superClass) {
     }
     rect.bottom = rect.top + this.query.el.height();
     return rect;
-  };
+  }
+
+  // Insert value of `data-value` attribute of chosen item into inputor
 
-  EditableController.prototype.insert = function(content, $li) {
+  // @param content [String] string to insert
+  insert(content, $li) {
     var data, overrides, range, suffix, suffixNode;
     if (!this.$inputor.is(':focus')) {
       this.$inputor.focus();
@@ -848,30 +941,35 @@ EditableController = (function(superClass) {
       this.$inputor.focus();
     }
     return this.$inputor.change();
-  };
-
-  return EditableController;
+  }
 
-})(Controller);
+};
 
+// Class to process data
 var Model;
 
-Model = (function() {
-  function Model(context) {
+Model = class Model {
+  constructor(context) {
     this.context = context;
     this.at = this.context.at;
+    // NOTE: bind data storage to inputor maybe App class can handle it.
     this.storage = this.context.$inputor;
   }
 
-  Model.prototype.destroy = function() {
+  destroy() {
     return this.storage.data(this.at, null);
-  };
+  }
 
-  Model.prototype.saved = function() {
+  saved() {
     return this.fetch() > 0;
-  };
+  }
 
-  Model.prototype.query = function(query, callback) {
+  // fetch data from storage by query.
+  // will invoke `callback` to return data
+
+  // @param query [String] catched string for searching
+  // @param callback [Function] for receiving data
+  query(query, callback) {
     var _remoteFilter, data, searchKey;
     data = this.fetch();
     searchKey = this.context.getOpt("searchKey");
@@ -882,51 +980,66 @@ Model = (function() {
     } else {
       return _remoteFilter.call(this.context, query, callback);
     }
-  };
+  }
 
-  Model.prototype.fetch = function() {
+  // get or set current data which would be shown on the list view.
+
+  // @param data [Array] set data
+  // @return [Array|undefined] current data that are showing on the list view.
+  fetch() {
     return this.storage.data(this.at) || [];
-  };
+  }
 
-  Model.prototype.save = function(data) {
+  // save special flag's data to storage
+
+  // @param data [Array] data to save
+  save(data) {
     return this.storage.data(this.at, this.context.callbacks("beforeSave").call(this.context, data || []));
-  };
+  }
 
-  Model.prototype.load = function(data) {
+  // load data. It wouldn't load for a second time if it has been loaded.
+
+  // @param data [Array] data to load
+  load(data) {
     if (!(this.saved() || !data)) {
       return this._load(data);
     }
-  };
+  }
 
-  Model.prototype.reload = function(data) {
+  reload(data) {
     return this._load(data);
-  };
+  }
 
-  Model.prototype._load = function(data) {
+  // load data from local or remote with callback
+
+  // @param data [Array|String] data to load.
+  _load(data) {
     if (typeof data === "string") {
       throw new Error("@gitlab/at.js removed support for $.ajax");
     } else {
       return this.save(data);
     }
-  };
-
-  return Model;
+  }
 
-})();
+};
 
+// View class to control how At.js's view showing.
+// All classes share the same DOM view.
 var View;
 
-View = (function() {
-  function View(context) {
+View = class View {
+  // @param controller [Object] The Controller.
+  constructor(context) {
     this.context = context;
     this.$el = $("<div class='atwho-view'><ul class='atwho-view-ul'></ul></div>");
     this.$elUl = this.$el.children();
     this.timeoutID = null;
+    // create HTML DOM of list view if it does not exist
     this.context.$el.append(this.$el);
     this.bindEvent();
   }
 
-  View.prototype.init = function() {
+  init() {
     var header_tpl, id;
     id = this.context.getOpt("alias") || this.context.at.charCodeAt(0);
     header_tpl = this.context.getOpt("headerTpl");
@@ -934,53 +1047,53 @@ View = (function() {
       this.$el.prepend(header_tpl);
     }
     return this.$el.attr({
-      'id': "at-view-" + id
+      'id': `at-view-${id}`
     });
-  };
+  }
 
-  View.prototype.destroy = function() {
+  destroy() {
     return this.$el.remove();
-  };
+  }
 
-  View.prototype.bindEvent = function() {
+  bindEvent() {
     var $menu, lastCoordX, lastCoordY;
     $menu = this.$el.find('ul');
     lastCoordX = 0;
     lastCoordY = 0;
-    return $menu.on('mousemove.atwho-view', 'li', (function(_this) {
-      return function(e) {
-        var $cur;
-        if (lastCoordX === e.clientX && lastCoordY === e.clientY) {
-          return;
-        }
-        lastCoordX = e.clientX;
-        lastCoordY = e.clientY;
-        $cur = $(e.currentTarget);
-        if ($cur.hasClass('cur')) {
-          return;
-        }
-        $menu.find('.cur').removeClass('cur');
-        return $cur.addClass('cur');
-      };
-    })(this)).on('click.atwho-view', 'li', (function(_this) {
-      return function(e) {
-        $menu.find('.cur').removeClass('cur');
-        $(e.currentTarget).addClass('cur');
-        _this.choose(e);
-        return e.preventDefault();
-      };
-    })(this));
-  };
+    return $menu.on('mousemove.atwho-view', 'li', (e) => {
+      var $cur;
+      // If the mouse hasn't actually moved then exit.
+      if (lastCoordX === e.clientX && lastCoordY === e.clientY) {
+        return;
+      }
+      lastCoordX = e.clientX;
+      lastCoordY = e.clientY;
+      $cur = $(e.currentTarget);
+      if ($cur.hasClass('cur')) {
+        return;
+      }
+      $menu.find('.cur').removeClass('cur');
+      return $cur.addClass('cur');
+    }).on('click.atwho-view', 'li', (e) => {
+      $menu.find('.cur').removeClass('cur');
+      $(e.currentTarget).addClass('cur');
+      this.choose(e);
+      return e.preventDefault();
+    });
+  }
 
-  View.prototype.visible = function() {
+  // Check if view is visible
+
+  // @return [Boolean]
+  visible() {
     return $.expr.filters.visible(this.$el[0]);
-  };
+  }
 
-  View.prototype.highlighted = function() {
+  highlighted() {
     return this.$el.find(".cur").length > 0;
-  };
+  }
 
-  View.prototype.choose = function(e) {
+  choose(e) {
     var $li, content;
     if (($li = this.$el.find(".cur")).length) {
       content = this.context.insertContentFor($li);
@@ -992,9 +1105,9 @@ View = (function() {
     if (this.context.getOpt("hideWithoutSuffix")) {
       return this.stopShowing = true;
     }
-  };
+  }
 
-  View.prototype.reposition = function(rect) {
+  reposition(rect) {
     var _window, offset, overflowOffset, ref;
     _window = this.context.app.iframeAsRoot ? this.context.app.window : window;
     if (rect.bottom + this.$el.height() - $(_window).scrollTop() > $(_window).height()) {
@@ -1012,9 +1125,9 @@ View = (function() {
     }
     this.$el.offset(offset);
     return this.context.trigger("reposition", [offset]);
-  };
+  }
 
-  View.prototype.next = function() {
+  next() {
     var cur, next, nextEl, offset;
     cur = this.$el.find('.cur').removeClass('cur');
     next = cur.next();
@@ -1025,9 +1138,9 @@ View = (function() {
     nextEl = next[0];
     offset = nextEl.offsetTop + nextEl.offsetHeight + (nextEl.nextSibling ? nextEl.nextSibling.offsetHeight : 0);
     return this.scrollTop(Math.max(0, offset - this.$el.height()));
-  };
+  }
 
-  View.prototype.prev = function() {
+  prev() {
     var cur, offset, prev, prevEl;
     cur = this.$el.find('.cur').removeClass('cur');
     prev = cur.prev();
@@ -1038,13 +1151,13 @@ View = (function() {
     prevEl = prev[0];
     offset = prevEl.offsetTop + prevEl.offsetHeight + (prevEl.nextSibling ? prevEl.nextSibling.offsetHeight : 0);
     return this.scrollTop(Math.max(0, offset - this.$el.height()));
-  };
+  }
 
-  View.prototype.scrollTop = function(scrollTop) {
+  scrollTop(scrollTop) {
     return this.$elUl.scrollTop(scrollTop);
-  };
+  }
 
-  View.prototype.show = function() {
+  show() {
     var rect;
     if (this.stopShowing) {
       this.stopShowing = false;
@@ -1058,9 +1171,9 @@ View = (function() {
     if (rect = this.context.rect()) {
       return this.reposition(rect);
     }
-  };
+  }
 
-  View.prototype.hide = function(e, time) {
+  hide(e, time) {
     var callback;
     if (!this.visible()) {
       return;
@@ -1069,17 +1182,16 @@ View = (function() {
       this.$el.hide();
       return this.context.trigger('hidden', [e]);
     } else {
-      callback = (function(_this) {
-        return function() {
-          return _this.hide();
-        };
-      })(this);
+      callback = () => {
+        return this.hide();
+      };
       clearTimeout(this.timeoutID);
       return this.timeoutID = setTimeout(callback, time);
     }
-  };
+  }
 
-  View.prototype.render = function(list) {
+  // render list view
+  render(list) {
     var $li, $ul, i, item, len, li, tpl;
     if (!($.isArray(list) && list.length > 0)) {
       this.hide();
@@ -1102,15 +1214,17 @@ View = (function() {
     if (this.context.getOpt('highlightFirst')) {
       return $ul.find("li:first").addClass("cur");
     }
-  };
-
-  return View;
+  }
 
-})();
+};
 
 var Api;
 
 Api = {
+  // load a flag's data
+
+  // @params at[String] the flag
+  // @params data [Array] data to storage.
   load: function(at, data) {
     var c;
     if (c = this.controller(at)) {
@@ -1158,7 +1272,7 @@ $.fn.atwho = function(method) {
     } else if (Api[method] && app) {
       return result = Api[method].apply(app, Array.prototype.slice.call(_args, 1));
     } else {
-      return $.error("Method " + method + " does not exist on jQuery.atwho");
+      return $.error(`Method ${method} does not exist on jQuery.atwho`);
     }
   });
   if (result != null) {
@@ -1168,7 +1282,7 @@ $.fn.atwho = function(method) {
   }
 };
 
-$.fn.atwho["default"] = {
+$.fn.atwho.default = {
   at: void 0,
   alias: void 0,
   data: null,