/** @global */
29 | global.QuillMentions = require("./mentions");
30 | if (window.Quill) {
31 | Quill.registerModule('mentions', QuillMentions);
32 | }
33 | else {
34 | throw new Error("Quill is not defined in the global scope.");
35 | }
36 | module.exports = addFormat;
29 |
30 | function addFormat(QuillMentions) {
31 | /**
32 | * @method
33 | */
34 | QuillMentions.prototype.addFormat = function(className) {
35 | this.quill.addFormat('mention', { tag: 'SPAN', "class": "ql-", });
36 | };
37 | }/** @module utilities/identity */
29 |
30 | module.exports = identity;
31 |
32 | /** @function identity */
33 | function identity(d) {
34 | return d;
35 | }var escapeRegExp = require("./regexp").escapeRegExp;
29 |
30 | module.exports = {
31 | all: replaceAll,
32 | };
33 |
34 | /**
35 | * @param {stirng} [options] - RegExp options (like "i").
36 | **/
37 | function replaceAll(string, toReplace, replaceWith, options) {
38 | options = options || "";
39 | var reOpts = "g" + options,
40 | re = new RegExp(escapeRegExp(toReplace), reOpts);
41 |
42 | return string.replace(re, replaceWith);
43 | }/** @module utilities/ajax */
29 | module.exports = {
30 |
31 | // from stackoverflow
32 | // https://stackoverflow.com/questions/9838812/how-can-i-open-a-json-file-in-javascript-without-jquery
33 | /**
34 | * @function loadJSON
35 | */
36 | loadJSON: function loadJSON(path, success, error) {
37 | var xhr = new XMLHttpRequest();
38 | xhr.onreadystatechange = function()
39 | {
40 | if (xhr.readyState === XMLHttpRequest.DONE) {
41 | if (xhr.status === 200) {
42 | if (success)
43 | success(JSON.parse(xhr.responseText));
44 | } else {
45 | if (error)
46 | error(xhr);
47 | }
48 | }
49 | };
50 | xhr.open("GET", path, true);
51 | xhr.send();
52 | return xhr;
53 | },
54 | };/**
29 | * Extend module
30 | * @module utilities/extend
31 | */
32 | module.exports = extend;
33 |
34 | /**
35 | * Shallow-copies an arbitrary number of objects' properties into the first argument. Applies "last-in-wins" policy to conflicting property names.
36 | * @function extend
37 | * @param {...Object} o
38 | */
39 | function extend(o) {
40 | var args = [].slice.call(arguments, 0),
41 | result = args[0];
42 |
43 | for (var i=1; i < args.length; i++) {
44 | result = extendHelper(result, args[i]);
45 | }
46 |
47 | return result;
48 | }
49 |
50 | /**
51 | * Shallow-copies one object into another.
52 | * @function extendHelper
53 | * @param {Object} destination - Object into which `source` properties will be copied.
54 | * @param {Object} source - Object whose properties will be copied into `destination`.
55 | */
56 | function extendHelper(destination, source) {
57 | // thanks be to angus kroll
58 | // https://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/
59 | for (var k in source) {
60 | if (source.hasOwnProperty(k)) {
61 | destination[k] = source[k];
62 | }
63 | }
64 | return destination;
65 | }| Name | 71 | 72 | 73 |Type | 74 | 75 | 76 | 77 | 78 | 79 |Description | 80 |
|---|---|---|
database |
89 |
90 |
91 | 92 | 93 | 94 | object[] 95 | 96 | 97 | 98 | | 99 | 100 | 101 | 102 | 103 | 104 |All possible choices for a given mention. | 105 |
// TODO - rename to "model"
29 | var loadJSON = require("./utilities/ajax").loadJSON;
30 | /**
31 | * @callback searchCallback
32 | * @param {Object[]} data - An array of objects that represent possible matches to data. The data are mapped over a formatter to provide a consistent interface.
33 | */
34 |
35 | function search(qry, callback) {
36 | var searcher = this.options.ajax ? this.ajaxSearch : this.staticSearch;
37 | searcher.call(this, qry, callback);
38 | }
39 |
40 | module.exports = function addSearch(QuillMentions) {
41 | /**
42 | * Dispatches search for possible matches to a query.
43 | * @method
44 | * @param {string} qry
45 | * @param {searchCallback} callback - Callback that handles the possible matches
46 | */
47 | QuillMentions.prototype.search = search;
48 |
49 | /**
50 | * @method
51 | * @param {string} qry
52 | * @param {searchCallback} callback - Callback that handles possible matches
53 | */
54 | QuillMentions.prototype.staticSearch = function staticSearch(qry, callback) {
55 | console.log("Static Search Query", qry);
56 | var data = this.options.choices.filter(staticFilter(qry).bind(this));
57 | if (!callback) noCallbackError("staticSearch");
58 | callback(data);
59 | };
60 |
61 | /**
62 | * @method
63 | * @param {string} qry
64 | * @param {searchCallback} callback - Callback that handles possible matches
65 | */
66 | QuillMentions.prototype.ajaxSearch = function ajaxSearch(qry, callback) {
67 | // TODO - remember last ajax request, and if it's still pending, cancel it.
68 | // ... to that end, just use promises.
69 |
70 | if (ajaxSearch.latest) ajaxSearch.latest.abort();
71 |
72 | var path = this.options.ajax.path,
73 | formatData = this.options.ajax.format,
74 | queryParameter = this.options.ajax.queryParameter,
75 | qryString = path + "?" + queryParameter + "=" + encodeURIComponent(qry);
76 |
77 | ajaxSearch.latest = loadJSON(qryString, ajaxSuccess(callback, formatData), ajaxError);
78 | };
79 | };
80 |
81 | function staticFilter(qry) {
82 | return function(choice) {
83 | var formatter = this.options.format;
84 | return choice.name.toLowerCase().indexOf(qry.toLowerCase()) !== -1;
85 | };
86 | }
87 |
88 | function ajaxSuccess(callback, formatter) {
89 | return function(data) {
90 | if (callback) callback(data.map(formatter));
91 | else noCallbackError("ajaxSearch");
92 | };
93 | }
94 |
95 | function ajaxError(error) {
96 | console.log("Loading json errored...", error);
97 | }
98 |
99 | function noCallbackError(functionName) {
100 | console.log("Warning!", functionName, "was not provided a callback. Don't be a ding-dong.");
101 | }/**
29 | * @module defaults/defaults
30 | */
31 |
32 | var extend = require("../utilities/extend"),
33 | identity = require("../utilities/identity");
34 |
35 | /**
36 | * @namespace
37 | * @prop {object} ajax - The default ajax configuration.
38 | * @prop {number} choiceMax - The maximum number of possible matches to display.
39 | * @prop {object[]} choices - A static array of possible choices. Ignored if `ajax` is truthy.
40 | * @prop {string} choiceTemplate - A string used as a template for possible choices.
41 | * @prop {string} containerClassName - The class attached to the mentions view container.
42 | * @prop {function} format - Function used by a Controller instance to munge data into expected form.
43 | * @prop {boolean} hotkeys - If false, disables navigating the popover with the keyboard.
44 | * @prop {boolean} includeTrigger - Whether to prepend triggerSymbol to the inserted mention.
45 | * @prop {number} marginTop - Amount of margin to place on top of the popover. (Controls space, in px, between the line and the popover)
46 | * @prop {RegExp} matcher - The regular expression used to trigger Controller#search
47 | * @prop {string} mentionClass - Prefixed with `ql-` for now because of how quill handles custom formats. The class given to inserted mention.
48 | * @prop {string} noMatchMessage - A message to display
49 | * @prop {string} noMatchTemplate - A template in which to display error message
50 | * @prop {string} template - A template for the popover, into which possible choices are inserted.
51 | * @prop {string} triggerSymbol - Symbol that triggers the mentioning state.
52 | */
53 | var defaults = {
54 | ajax: false,
55 | choiceMax: 6,
56 | choices: [],
57 | choiceTemplate: "<li data-display=\"{{value}}\" data-mention=\"{{data}}\">{{value}}</li>",
58 | containerClassName: "ql-mentions",
59 | format: identity,
60 | hotkeys: true,
61 | includeTrigger: false,
62 | marginTop: 10,
63 | matcher: /@\w+$/i,
64 | mentionClass: "mention-item",
65 | noMatchMessage: "Ruh Roh Raggy!",
66 | noMatchTemplate: "<div class='ql-mention-no-match'><i>{{message}}</i></div>",
67 | template: '<ul>{{choices}}</ul>',
68 | triggerSymbol: "@",
69 | };
70 |
71 | /**
72 | * @namespace
73 | * @prop {function} format - Mapped onto the array of possible matches returned by call to `path`. Should yield the expected interface for data, which is an object with `name` and `data` properties.
74 | * @prop {string} path - The path to endpoint we should query for possible matches.
75 | * @prop {string} queryParameter - The name of the query paramater in the url sent to `path`.
76 | */
77 | var ajaxDefaults = {
78 | format: identity,
79 | path: null,
80 | queryParameter: "q",
81 | };
82 |
83 | /**
84 | * Returns a configuration object for QuillMentions constructor.
85 | * @name defaultFactory
86 | */
87 | function defaultFactory(options) {
88 | var result = extend({}, defaults, options);
89 | if (options.ajax) {
90 | result.ajax = extend({}, ajaxDefaults, options.ajax);
91 | }
92 | return result;
93 | }
94 | module.exports = defaultFactory;
29 |
30 | var DOM = require("./utilities/dom"),
31 | addClass = DOM.addClass,
32 | removeClass = DOM.removeClass;
33 |
34 | var SELECTED_CLASS = "ql-mention-choice-selected";
35 |
36 | /**
37 | * Dispatches keyboard events to handlers
38 | * @namespace
39 | * @prop {function}
40 | */
41 | /**
42 | * @namespace
43 | * @prop {Number} 13 - Handler for the enter key.
44 | * @prop {Number} 27 - Handler for the escape key.
45 | * @prop {Number} 38 - Handler for the up arrow key.
46 | * @prop {Number} 40 - Handler for the down arrow key.
47 | */
48 | var keydown = {
49 | 27: keydownEscape,
50 | 38: keydownUpKey,
51 | 40: keydownDownKey,
52 | };
53 |
54 | var keyup = {
55 | 13: keyupEnter,
56 | };
57 |
58 | /**
59 | * @method
60 | * @this {QuillMentions}
61 | */
62 | function keydownDownKey() {
63 | if (this.view.isHidden()) return;
64 | _moveSelection.call(this, 1);
65 | }
66 |
67 | /**
68 | * @method
69 | * @this {QuillMentions}
70 | */
71 | function keydownUpKey() {
72 | if (this.view.isHidden()) return;
73 | _moveSelection.call(this, -1);
74 | }
75 |
76 | /**
77 | * @method
78 | * @this {QuillMentions}
79 | */
80 | function keyupEnter() {
81 | var nodes,
82 | currIndex = this.selectedChoiceIndex,
83 | currNode;
84 |
85 | if (currIndex === -1) return;
86 | if (!this.view.hasMatches()) return;
87 |
88 | this.quill.setSelection(this._cachedRange);
89 | nodes = this.view.getMatches();
90 | currNode = nodes[currIndex];
91 | this.addMention(currNode);
92 | this.selectedChoiceIndex = -1;
93 | }
94 |
95 | /**
96 | * @method
97 | * @this {QuillMentions}
98 | */
99 | function keydownEscape() {
100 | this.view.hide();
101 | this.selectedChoiceIndex = -1;
102 | this.quill.focus();
103 | }
104 |
105 | /**
106 | * Moves the selected list item up or down. (+steps means down, -steps means up) PUT THIS IN THE VIEW
107 | * @method
108 | * @private
109 | * @this {QuillMentions}
110 | */
111 | function _moveSelection(steps) {
112 | var nodes,
113 | currIndex = this.selectedChoiceIndex,
114 | currNode,
115 | nextIndex,
116 | nextNode;
117 |
118 | nodes = this.view.container.querySelectorAll("li");
119 |
120 | if (nodes.length === 0) {
121 | this.selectedChoiceIndex = -1;
122 | return;
123 | }
124 | if (currIndex !== -1) {
125 | currNode = nodes[currIndex];
126 | removeClass(currNode, SELECTED_CLASS);
127 | }
128 |
129 | nextIndex = _normalizeIndex(currIndex + steps, nodes.length);
130 | nextNode = nodes[nextIndex];
131 |
132 | if (nextNode) {
133 | addClass(nextNode, SELECTED_CLASS);
134 | this.selectedChoiceIndex = nextIndex;
135 | }
136 | else {
137 | console.log("Indexing error on node returned by querySelectorAll");
138 | }
139 |
140 | }
141 |
142 | function _normalizeIndex(i, modulo) {
143 | if (modulo <= 0) throw new Error("TF are you doing? _normalizeIndex needs a nonnegative, nonzero modulo.");
144 | while (i < 0) {
145 | i += modulo;
146 | }
147 | return i % modulo;
148 | }
149 |
150 | module.exports = {keyup: keyup, keydown: keydown};| Name | 57 | 58 | 59 |Type | 60 | 61 | 62 | 63 | 64 | 65 |Description | 66 |
|---|---|---|
format |
75 |
76 |
77 | 78 | 79 | 80 | function 81 | 82 | 83 | 84 | | 85 | 86 | 87 | 88 | 89 | 90 |Mapped onto the array of possible matches returned by call to `path`. Should yield the expected interface for data, which is an object with `name` and `data` properties. | 91 |
path |
98 |
99 |
100 | 101 | 102 | 103 | string 104 | 105 | 106 | 107 | | 108 | 109 | 110 | 111 | 112 | 113 |The path to endpoint we should query for possible matches. | 114 |
queryParameter |
121 |
122 |
123 | 124 | 125 | 126 | string 127 | 128 | 129 | 130 | | 131 | 132 | 133 | 134 | 135 | 136 |The name of the query paramater in the url sent to `path`. | 137 |
| Name | 55 | 56 | 57 |Type | 58 | 59 | 60 | 61 | 62 | 63 |Description | 64 |
|---|---|---|
13 |
73 |
74 |
75 | 76 | 77 | 78 | Number 79 | 80 | 81 | 82 | | 83 | 84 | 85 | 86 | 87 | 88 |Handler for the enter key. | 89 |
27 |
96 |
97 |
98 | 99 | 100 | 101 | Number 102 | 103 | 104 | 105 | | 106 | 107 | 108 | 109 | 110 | 111 |Handler for the escape key. | 112 |
38 |
119 |
120 |
121 | 122 | 123 | 124 | Number 125 | 126 | 127 | 128 | | 129 | 130 | 131 | 132 | 133 | 134 |Handler for the up arrow key. | 135 |
40 |
142 |
143 |
144 | 145 | 146 | 147 | Number 148 | 149 | 150 | 151 | | 152 | 153 | 154 | 155 | 156 | 157 |Handler for the down arrow key. | 158 |
| Name | 55 | 56 | 57 |Type | 58 | 59 | 60 | 61 | 62 | 63 |Description | 64 |
|---|---|---|
13 |
73 |
74 |
75 | 76 | 77 | 78 | Number 79 | 80 | 81 | 82 | | 83 | 84 | 85 | 86 | 87 | 88 |Handler for the enter key. | 89 |
27 |
96 |
97 |
98 | 99 | 100 | 101 | Number 102 | 103 | 104 | 105 | | 106 | 107 | 108 | 109 | 110 | 111 |Handler for the escape key. | 112 |
38 |
119 |
120 |
121 | 122 | 123 | 124 | Number 125 | 126 | 127 | 128 | | 129 | 130 | 131 | 132 | 133 | 134 |Handler for the up arrow key. | 135 |
40 |
142 |
143 |
144 | 145 | 146 | 147 | Number 148 | 149 | 150 | 151 | | 152 | 153 | 154 | 155 | 156 | 157 |Handler for the down arrow key. | 158 |
// TODO - factor out data munging into separate object
29 |
30 | /** @module controller */
31 |
32 | var loadJSON = require("./utilities/ajax").loadJSON,
33 | escapeRegExp = require("./utilities/regexp").escapeRegExp;
34 |
35 | module.exports = {
36 | Controller: Controller,
37 | AJAXController: AJAXController,
38 | };
39 |
40 | /**
41 | * @callback searchCallback
42 | * @param {Object[]} data - An array of objects that represent possible matches to data. The data are mapped over a formatter to provide a consistent interface.
43 | */
44 |
45 |
46 | function Controller(formatter, view, options) {
47 | this.format = formatter;
48 | this.view = view;
49 | this.database = this.munge(options.data);
50 | this.max = options.max;
51 | }
52 |
53 |
54 | /**
55 | * @interface
56 | * @param {function} formatter - Munges data
57 | * @param {View} view
58 | * @param {object} options
59 | * @prop {function} format - Munges data
60 | * @prop {View} view
61 | * @prop {number} max - Maximum number of matches to pass to the View.
62 | */
63 | function AbstractController(formatter, view, options) {
64 | this.format = formatter;
65 | this.view = view;
66 | this.max = options.max;
67 | }
68 |
69 | /**
70 | * @abstract
71 | */
72 | AbstractController.prototype.search = function search() {
73 | throw new Error("NYI");
74 | };
75 |
76 | /**
77 | * Transforms data to conform to config.
78 | * @method
79 | * @param {string} qry
80 | * @param {searchCallback} callback
81 | */
82 | AbstractController.prototype.munge = function(data) {
83 | return data.map(this.format);
84 | };
85 |
86 |
87 | /**
88 | * @constructor
89 | * @prop {object[]} database - All possible choices for a given mention.
90 | */
91 | function Controller(formatter, view, options) {
92 | AbstractController.call(this, formatter, view, options);
93 | this.database = this.munge(options.data);
94 | }
95 | Controller.prototype = Object.create(AbstractController.prototype);
96 |
97 | Controller.prototype.search = function search(qry, callback) {
98 | var qryRE = new RegExp(escapeRegExp(qry), "i"),
99 | data;
100 |
101 | data = this.database.filter(function(d) {
102 | return qryRE.test(d.value);
103 | }).sort(function(d1, d2) {
104 | return d1.value.indexOf(qry) - d2.value.indexOf(qry);
105 | });
106 |
107 | this.view.render(data.slice(0, this.max));
108 | if (callback) callback();
109 | };
110 |
111 |
112 | /**
113 | * @constructor
114 | * @augments Controller
115 | * @prop {string} path - The path from which to request data.
116 | * @prop {string} queryParameter - The name of the paramter in the request to Controller~path
117 | * @prop {Object} _latestCall - Cached ajax call. Aborted if a new search is made.
118 | */
119 | function AJAXController(formatter, view, options) {
120 | AbstractController.call(this, formatter, view, options);
121 | this.path = options.path;
122 | this.queryParameter = options.queryParameter;
123 | this._latestCall = null;
124 | }
125 | AJAXController.prototype = Object.create(AbstractController.prototype);
126 |
127 | /**
128 | * @method
129 | * @param {String} qry
130 | * @param {searchCallback} callback
131 | */
132 | AJAXController.prototype.search = function search(qry, callback) {
133 |
134 | if (this._latestCall) this._latestCall.abort(); // caches ajax calls so we can cancel them as the input is updated
135 | var qryString = this.path +
136 | "?" + this.queryParameter +
137 | "=" + encodeURIComponent(qry);
138 |
139 | this._latestCall = loadJSON(qryString, success.bind(this), ajaxError);
140 |
141 | function success(data) {
142 | this._callback(data);
143 | if (callback) callback();
144 | }
145 | };
146 |
147 | /**
148 | * Munges the callback data
149 | * @method
150 | * @private
151 | * @param {array} data
152 | */
153 | AJAXController.prototype._callback = function(data) {
154 | data = this.munge(data).slice(0, this.max);
155 | this.view.render(data);
156 | };
157 |
158 | function ajaxError(error) {
159 | console.log("Loading json errored! Likely due to aborted request, but there's the error: ", error);
160 | }| Name | 130 | 131 | 132 |Type | 133 | 134 | 135 | 136 | 137 | 138 |Description | 139 |
|---|---|---|
formatter |
148 |
149 |
150 | 151 | 152 | 153 | function 154 | 155 | 156 | 157 | | 158 | 159 | 160 | 161 | 162 | 163 |Munges data | 164 |
view |
171 |
172 |
173 | 174 | 175 | 176 | View 177 | 178 | 179 | 180 | | 181 | 182 | 183 | 184 | 185 | 186 |187 | |
options |
194 |
195 |
196 | 197 | 198 | 199 | object 200 | 201 | 202 | 203 | | 204 | 205 | 206 | 207 | 208 | 209 |210 | |
| Name | 230 | 231 | 232 |Type | 233 | 234 | 235 | 236 | 237 | 238 |Description | 239 |
|---|---|---|
format |
248 |
249 |
250 | 251 | 252 | 253 | function 254 | 255 | 256 | 257 | | 258 | 259 | 260 | 261 | 262 | 263 |Munges data | 264 |
view |
271 |
272 |
273 | 274 | 275 | 276 | View 277 | 278 | 279 | 280 | | 281 | 282 | 283 | 284 | 285 | 286 |287 | |
max |
294 |
295 |
296 | 297 | 298 | 299 | number 300 | 301 | 302 | 303 | | 304 | 305 | 306 | 307 | 308 | 309 |Maximum number of matches to pass to the View. | 310 |
var DOM = require("./utilities/dom"),
29 | extend = require("./utilities/extend"),
30 | replaceAll = require("./utilities/string-replace").all,
31 | escapeRegExp = require("./utilities/regexp").escapeRegExp;
32 |
33 | module.exports = View;
34 |
35 |
36 | /**
37 | * @constructor
38 | * @param {HTMLElement} container
39 | * @param {Object} templates - a set of templates into which we render munged data
40 | * @param {Object} options
41 | */
42 | function View(container, templates, options) {
43 | this.container = container;
44 | this.templates = extend({}, templates);
45 | this.marginTop = options.marginTop;
46 | this.errMessage = options.errMessage;
47 | }
48 |
49 | /**
50 | * Creates view from data and calls View~_renderSuccess. If there are no data, calls View~_renderError.
51 | * @method
52 | * @param {array} data
53 | */
54 | View.prototype.render = function(data) {
55 | var templates = this.templates,
56 | items,
57 | err,
58 | toRender;
59 | if (!data || !data.length) {
60 | err = templates.error.replace("{{message}}", this.errMessage);
61 | this.container.innerHTML = err;
62 | }
63 | else {
64 | items = data.map(this._renderLI, this).join("");
65 | this.container.innerHTML = templates.list.replace("{{choices}}", items);
66 | }
67 | return this;
68 | };
69 |
70 | /**
71 | * Renders listItem template with a datum as the context
72 | * @method
73 | * @private
74 | * @param {object} datum - A piece of data
75 | */
76 | View.prototype._renderLI = function(datum) {
77 | var template = this.templates.listItem;
78 | return this._renderWithContext(template, datum);
79 | };
80 |
81 | /**
82 | * Renders a template given the context of an object
83 | * @method
84 | * @private
85 | * @param {string} template
86 | * @param {object} o - Context for a template string.
87 | */
88 | View.prototype._renderWithContext = function(template, o) {
89 | var prop,
90 | result = template;
91 |
92 | for (prop in o) {
93 | if (o.hasOwnProperty(prop)) {
94 | result = replaceAll(result, "{{"+prop+"}}", o[prop]);
95 | }
96 | }
97 |
98 | return result;
99 | };
100 |
101 | /**
102 | * Makes the popover disappear
103 | * @method
104 | * @param {Quill} quill
105 | * @param {Object} range
106 | */
107 | View.prototype.hide = function hide(quill, range) {
108 | DOM.removeClass(this.container, "ql-is-mentioning");
109 | this.container.style.marginTop = "0";
110 | if (range) quill.setSelection(range);
111 | return this;
112 | };
113 |
114 | /**
115 | * @method
116 | * @returns {HTMLElement[]}
117 | */
118 | View.prototype.getMatches = function getMatches() {
119 | return this.container.querySelectorAll("li");
120 | };
121 |
122 | /**
123 | * @method
124 | * @returns {HTMLElement[]}
125 | */
126 | View.prototype.hasMatches = function hasMatches() {
127 | return this.getMatches().length > 0;
128 | };
129 |
130 | /**
131 | * Returns whether the popover is in view. I had bad feels about this method but it's coming in hand re: keyboard events right now.
132 | * @method
133 | * @returns {boolean}
134 | */
135 | View.prototype.isHidden = function isHidden() {
136 | return !DOM.hasClass(this.container, "ql-is-mentioning");
137 | };
138 |
139 | /**
140 | * Adds an active class to the mentions popover and sits it beneath the cursor.
141 | * [TODO - add active class to config]
142 | * @method
143 | * @param {Quill} quill
144 | */
145 | View.prototype.show = function show(quill) {
146 |
147 | this.container.style.marginTop = this._getTopMargin(quill);
148 | this.container.style.marginLeft = this._getLeftMargin(quill);
149 | DOM.addClass(this.container, "ql-is-mentioning"); // TODO - config active class
150 | this.container.focus(); // Does this even do anything? It would if we were using form elements instead of LIs prob
151 |
152 | return this;
153 | };
154 |
155 | /**
156 | * Return an array of dom nodes corresponding to all lines at or before the line corresponding to the current range.
157 | * @method
158 | * @private
159 | * @param {Range} range
160 | * @return {Node[]}
161 | */
162 | View.prototype._findOffsetLines = function(quill) {
163 | var node = this._findMentionContainerNode(quill);
164 | return DOM.getOlderSiblingsInclusive(node);
165 | };
166 |
167 | /**
168 | * Return the DOM node that encloses the line on which current mention is being typed.
169 | * @method
170 | * @private
171 | * @param {Range} range
172 | * @return {Node|null}
173 | */
174 | View.prototype._findMentionContainerNode = function _findMentionContainerNode(quill) {
175 | var range = quill.getSelection(),
176 | leafAndOffset,
177 | leaf,
178 | offset,
179 | node;
180 |
181 |
182 | leafAndOffset = quill.editor.doc.findLeafAt(range.start, true);
183 | leaf = leafAndOffset[0];
184 | offset = leafAndOffset[1]; // how many chars in front of current range
185 | if (leaf) node = leaf.node;
186 | while (node) {
187 | if (node.tagName === "DIV") break;
188 | node = node.parentNode;
189 | }
190 | if (!node) return null;
191 | return node;
192 | };
193 |
194 | /**
195 | * Return the (hopefully inline-positioned) DOM node that encloses the mention itself.
196 | * @method
197 | * @private
198 | * @param {Range} range
199 | * @return {Node|null}
200 | */
201 | View.prototype._findMentionNode = function _findMentionNode(quill) {
202 | var range = quill.getSelection(),
203 | leafAndOffset,
204 | leaf,
205 | offset,
206 | node;
207 |
208 |
209 | leafAndOffset = quill.editor.doc.findLeafAt(range.start, true);
210 | leaf = leafAndOffset[0];
211 | offset = leafAndOffset[1]; // how many chars in front of current range
212 | if (leaf) node = leaf.node;
213 | while (node) {
214 | if (node.tagName === "SPAN") break;
215 | node = node.parentNode;
216 | }
217 | if (!node) return null;
218 | return node;
219 | };
220 |
221 | View.prototype._getLeftMargin = function(quill) {
222 | var mentionNode = this._findMentionNode(quill),
223 | mentionParent = this._findMentionContainerNode(quill);
224 |
225 | var mentionRect = mentionNode.getBoundingClientRect(),
226 | parentRect = mentionParent.getBoundingClientRect(),
227 | editorRect = quill.container.getBoundingClientRect();
228 |
229 | var marginLeft = mentionRect.left - parentRect.left;
230 |
231 | var overflow = marginLeft + mentionRect.width - editorRect.width;
232 |
233 | if (overflow > 0) {
234 | marginLeft -= (overflow);
235 | }
236 |
237 | return marginLeft + "px";
238 | };
239 |
240 | /**
241 | * @method
242 | * @private
243 | */
244 | View.prototype._getTopMargin = function(quill) {
245 | var qlEditor = quill.editor.root,
246 | qlLines,
247 | marginTop = this.marginTop,
248 | negMargin = -marginTop,
249 | range;
250 |
251 | qlLines = this._findOffsetLines(quill);
252 |
253 | negMargin += this._nodeHeight(qlEditor);
254 | negMargin -= qlLines.reduce(function(total, line) {
255 | return total + this._nodeHeight(line);
256 | }.bind(this), 0);
257 |
258 | return "-" + negMargin + "px";
259 | };
260 |
261 | /**
262 | * @method
263 | * @private
264 | */
265 | View.prototype._nodeHeight = function(node) {
266 | return node.getBoundingClientRect().height;
267 | };
268 |
269 |
270 | // TODO - write QuillEditor View
271 | function QuillEditorView() {
272 | throw new Error("NYI");
273 | }| Name | 71 | 72 | 73 |Type | 74 | 75 | 76 | 77 | 78 | 79 |Description | 80 |
|---|---|---|
path |
89 |
90 |
91 | 92 | 93 | 94 | string 95 | 96 | 97 | 98 | | 99 | 100 | 101 | 102 | 103 | 104 |The path from which to request data. | 105 |
queryParameter |
112 |
113 |
114 | 115 | 116 | 117 | string 118 | 119 | 120 | 121 | | 122 | 123 | 124 | 125 | 126 | 127 |The name of the paramter in the request to Controller~path | 128 |
_latestCall |
135 |
136 |
137 | 138 | 139 | 140 | Object 141 | 142 | 143 | 144 | | 145 | 146 | 147 | 148 | 149 | 150 |Cached ajax call. Aborted if a new search is made. | 151 |
| Name | 255 | 256 | 257 |Type | 258 | 259 | 260 | 261 | 262 | 263 |Description | 264 |
|---|---|---|
data |
273 |
274 |
275 | 276 | 277 | 278 | array 279 | 280 | 281 | 282 | | 283 | 284 | 285 | 286 | 287 | 288 |289 | |
| Name | 368 | 369 | 370 |Type | 371 | 372 | 373 | 374 | 375 | 376 |Description | 377 |
|---|---|---|
qry |
386 |
387 |
388 | 389 | 390 | 391 | String 392 | 393 | 394 | 395 | | 396 | 397 | 398 | 399 | 400 | 401 |402 | |
callback |
409 |
410 |
411 | 412 | 413 | 414 | searchCallback 415 | 416 | 417 | 418 | | 419 | 420 | 421 | 422 | 423 | 424 |425 | |
/** @module mentions */
29 |
30 | var AJAXController = require("./controller").AJAXController,
31 | Controller = require("./controller").Controller,
32 | View = require("./view");
33 |
34 | var extend = require("./utilities/extend"),
35 | defaultFactory = require("./defaults/defaults"), // keep in defaults so we can write specific defaults for each object
36 | KEYUP = require("./keyboard").keyup,
37 | KEYDOWN = require("./keyboard").keydown;
38 |
39 | module.exports = QuillMentions;
40 |
41 | /**
42 | * @constructor
43 | * @param {Object} quill - An instance of `Quill`.
44 | * @param {Object} [options] - User configuration passed to the mentions module. It's mixed in with defaults.
45 | * @prop {Quill} quill
46 | * @prop {HTMLElement} container - Container for the popover (a.k.a. the View)
47 | * @prop {RegExp} matcher - Used to scan contents of editor for mentions.
48 | */
49 | function QuillMentions(quill, options) {
50 |
51 | this.quill = quill;
52 | var modOptions = defaultFactory(options),
53 | container = this.quill.addContainer(modOptions.containerClassName);
54 |
55 | this.triggerSymbol = modOptions.triggerSymbol;
56 | this.includeTrigger = modOptions.includeTrigger;
57 | this.matcher = modOptions.matcher;
58 | this.mentionClass = modOptions.mentionClass;
59 | this.currentMention = null;
60 |
61 | this.selectedChoiceIndex = -1;
62 |
63 | this.setView(container, modOptions)
64 | .setController(modOptions)
65 | .listenTextChange(quill)
66 | .listenSelectionChange(quill)
67 | .listenClick(container)
68 | .addFormat();
69 |
70 | if (modOptions.hotkeys) {
71 | this.listenHotKeys(quill);
72 | }
73 |
74 | this._cachedRange = null;
75 | this.charSinceMention = 0;
76 | }
77 |
78 | /**
79 | * Sets QuillMentions.view to a View object
80 | * @method
81 | * @private
82 | * @param {HTMLElement} container
83 | * @param {Object} options - Configuration for the view
84 | */
85 | QuillMentions.prototype.setView = function(container, options) {
86 | var templates = {},
87 | errMessage = options.noMatchMessage,
88 | marginTop = options.marginTop;
89 | templates.list = options.template;
90 | templates.listItem = options.choiceTemplate;
91 | templates.error = options.noMatchTemplate;
92 | this.view = new View(container, templates, {errMessage: errMessage, marginTop: marginTop });
93 | return this;
94 | };
95 |
96 | /**
97 | * Sets QuillMentions.controller to a Controller or AJAXController object (depending on options).
98 | * @method
99 | * @private
100 | * @param {Object} options - Configuration for the controller.
101 | */
102 | QuillMentions.prototype.setController = function(options) {
103 | if (!this.view) throw new Error("Must set view before controller.");
104 |
105 | var formatter,
106 | config = {
107 | max: options.choiceMax,
108 | };
109 | if (!options.ajax) {
110 | formatter = options.format;
111 | config.data = options.choices;
112 | this.controller = new Controller(formatter, this.view, config);
113 | } else {
114 | formatter = options.ajax.format;
115 | extend(config, options.ajax);
116 | this.controller = new AJAXController(formatter, this.view, config);
117 | }
118 | return this;
119 | };
120 |
121 | /**
122 | * Sets a listener for text-change events on the given Quill instance
123 | * @method
124 | * @param {Quill} quill - An instance of Quill
125 | */
126 | QuillMentions.prototype.listenTextChange = function listenTextChange(quill) {
127 | var eventName = this.quill.constructor.events.TEXT_CHANGE;
128 | quill.on(eventName, textChangeHandler.bind(this));
129 | return this;
130 |
131 | function textChangeHandler(delta, source) {
132 | if (source === "api") return;
133 | var mention = this.findMention(),
134 | query,
135 | _this;
136 |
137 | if (mention) {
138 | _this = this;
139 |
140 | this.charSinceMention = 0;
141 | this._cachedRange = quill.getSelection();
142 | this.currentMention = mention;
143 | this._addTemporaryMentionSpan();
144 |
145 | query = mention[0].replace(this.triggerSymbol, "");
146 |
147 | this.controller.search(query, function() {
148 | _this.view.show(_this.quill);
149 | });
150 | }
151 | else {
152 | this.charSinceMention++;
153 | this.view.hide();
154 | }
155 | }
156 | };
157 |
158 |
159 | /**
160 | * Sets a listener for selection-change events on the given Quill instance
161 | * @method
162 | * @param {Quill} quill - An instance of Quill
163 | */
164 | QuillMentions.prototype.listenSelectionChange = function(quill) {
165 | var eventName = quill.constructor.events.SELECTION_CHANGE;
166 | quill.on(eventName, selectionChangeHandler.bind(this));
167 | return this;
168 |
169 | function selectionChangeHandler(range) {
170 | if (!range) this.view.hide();
171 | }
172 | };
173 |
174 | /**
175 | * Sets a listener for keyboard events on the given container.
176 | * Events are dispatched through the KEYS object.
177 | * @method
178 | * @param {Quill} quill - An instance of Quill
179 | */
180 | QuillMentions.prototype.listenHotKeys = function(quill) {
181 | quill.container
182 | .addEventListener('keydown',
183 | keydownHandler.bind(this)); // TIL keypress is intended for keys that normally produce a character
184 |
185 | quill.container
186 | .addEventListener('keyup',
187 | keyupHandler.bind(this));
188 |
189 | return this;
190 |
191 | function keydownHandler(event) {
192 | var code = event.keyCode || event.which;
193 | if (!this.view.isHidden()) { // need special logic for enter key :sob:
194 | if (KEYDOWN[code]) {
195 | KEYDOWN[code].call(this);
196 | event.stopPropagation();
197 | event.preventDefault();
198 | }
199 | }
200 | }
201 | function keyupHandler(event) {
202 | var code = event.keyCode || event.which;
203 | if (!this.view.isHidden() || this.charSinceMention === 1) { // this weird if condition solve an issue where hitting enter would hide the view and we wouldn't be able to insert the mention...
204 | if (KEYUP[code]) {
205 | KEYUP[code].call(this);
206 | }
207 | }
208 | }
209 | };
210 |
211 | /**
212 | * Listens for a click or touchend event on the View.
213 | * @method
214 | * @param {HTMLElement} elt
215 | */
216 | QuillMentions.prototype.listenClick = function(elt) {
217 |
218 | elt.addEventListener("click", addMention.bind(this));
219 | elt.addEventListener("touchend", addMention.bind(this));
220 | return this;
221 |
222 | /** Wraps the QuillMentions~addMention method */
223 | function addMention(event) {
224 | var target = event.target || event.srcElement;
225 | if (target.tagName.toLowerCase() === "li") {
226 | this.addMention(target);
227 | }
228 | event.stopPropagation();
229 | }
230 | };
231 |
232 | /**
233 | * Looks for a string in the editor (up to the cursor's current position) for a match to QuillMentions~matcher
234 | * @method
235 | * @return {Match}
236 | */
237 | QuillMentions.prototype.findMention = function findMention() {
238 | var range = this.quill.getSelection() || this._cachedRange;
239 | if (!range) return;
240 | var cursor = range.end,
241 | contents = this.quill.getText(0, cursor);
242 |
243 | return this.matcher.exec(contents);
244 | };
245 |
246 | /**
247 | * Needs to be refactored! QuillMention should be responsible for this action.
248 | * @method
249 | * @param {HTMLElement}
250 | */
251 | QuillMentions.prototype.addMention = function addMention(node) {
252 | var insertAt = this.currentMention.index,
253 | toInsert = (this.includeTrigger ? this.triggerSymbol : "") + node.dataset.display,
254 | toFocus = insertAt + toInsert.length + 1;
255 |
256 |
257 | this.quill.deleteText(insertAt, insertAt + this.currentMention[0].length);
258 | this.quill.insertText(insertAt, toInsert, "mention", this.mentionClass+"-"+node.dataset.mention);
259 | this.quill.insertText(insertAt + toInsert.length, " ");
260 | this.quill.setSelection(toFocus, toFocus);
261 |
262 | this.view.hide();
263 | };
264 |
265 | QuillMentions.prototype._addTemporaryMentionSpan = function(range) {
266 | var insertAt = this.currentMention.index,
267 | toInsert = this.currentMention[0];
268 |
269 | this.quill.deleteText(insertAt, insertAt + this.currentMention[0].length);
270 | this.quill.insertText(insertAt, toInsert, "mention", "is-typing-mention");
271 | };
272 |
273 |
274 | /**
275 | * Refactor.
276 | * @method
277 | */
278 | QuillMentions.prototype.hasSelection = function() {
279 | return this.selectedChoiceIndex !== -1;
280 | };
281 |
282 | /**
283 | * Waiting on new custom formats in Quill to beef this up.
284 | * @method
285 | * @private
286 | */
287 | QuillMentions.prototype.addFormat = function(className) {
288 | this.quill.addFormat('mention', { tag: 'SPAN', "class": "ql-", }); // a mention is a span with the class prefix "ql-". the naming is an artifact of the current custom formats implementation
289 | return this;
290 | };
291 |
292 |