From cb1c3cc04318c987b9a91d0021a4bce9c3a42d38 Mon Sep 17 00:00:00 2001 From: Jordan Humphreys Date: Mon, 20 Jun 2016 14:59:36 -0700 Subject: [PATCH] Add tribute-replaced event. (#6) * Add tribute-replaced event. * Update readme. --- README.md | 10 +++++++ dist/tribute.js | 71 ++++++++++++++++++++++++++++++---------------- example/index.html | 3 ++ js/tribute.js | 21 ++++++++++++++ 4 files changed, 81 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 4fb78538..d4e64939 100644 --- a/README.md +++ b/README.md @@ -132,6 +132,16 @@ Both the `selectTemplate` and the `menuItemTemplate` have access to the `item` o } ``` +### Replace Event +You can bind to the `tribute-replaced` event to know when we have updated your targeted Tribute element. + +If your element has an ID of `myElement`: +```js +document.getElementById('myElement').addEventListener('tribute-replaced', function (e) { + console.log('Text replaced!'); +}); +``` + ## Tips Some useful approaches to common roadblocks when implementing @mentions. diff --git a/dist/tribute.js b/dist/tribute.js index 40e88093..ccc6d434 100644 --- a/dist/tribute.js +++ b/dist/tribute.js @@ -29,6 +29,22 @@ if (!Array.prototype.find) { }; } +(function () { + + if (typeof window.CustomEvent === "function") return false; + + function CustomEvent(event, params) { + params = params || { bubbles: false, cancelable: false, detail: undefined }; + var evt = document.createEvent('CustomEvent'); + evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); + return evt; + } + + CustomEvent.prototype = window.Event.prototype; + + window.CustomEvent = CustomEvent; +})(); + { (function () { var Tribute = function () { @@ -181,7 +197,7 @@ if (!Array.prototype.find) { value: function showMenuFor(element, collectionItem) { var _this2 = this; - var items = undefined; + var items = void 0; // create the menu if it doesn't exist. if (!this.menu) { this.menu = this.createMenu(); @@ -383,7 +399,7 @@ if (!Array.prototype.find) { var keyCode = instance.getKeyCode(instance, _this5, event); if (isNaN(keyCode)) return { - v: undefined + v: void 0 }; var trigger = instance.tribute.triggers().find(function (trigger) { @@ -421,7 +437,7 @@ if (!Array.prototype.find) { }, { key: 'getKeyCode', value: function getKeyCode(instance, el, event) { - var char = undefined; + var char = void 0; var tribute = instance.tribute; var info = tribute.range.getTriggerInfo(false, false, true); @@ -536,6 +552,7 @@ if (!Array.prototype.find) { // Thanks to https://github.com/jeff-collins/ment.io + var TributeRange = function () { function TributeRange(tribute) { _classCallCheck(this, TributeRange); @@ -547,7 +564,7 @@ if (!Array.prototype.find) { _createClass(TributeRange, [{ key: 'getDocument', value: function getDocument() { - var iframe = undefined; + var iframe = void 0; if (this.tribute.current.collection) { iframe = this.tribute.current.collection.iframe; } @@ -564,7 +581,7 @@ if (!Array.prototype.find) { var _this7 = this; var context = this.tribute.current, - coordinates = undefined; + coordinates = void 0; var info = this.getTriggerInfo(false, false, true); if (info !== undefined) { @@ -587,7 +604,7 @@ if (!Array.prototype.find) { }, { key: 'selectElement', value: function selectElement(targetElement, path, offset) { - var range = undefined; + var range = void 0; var elem = targetElement; if (path) { @@ -638,6 +655,9 @@ if (!Array.prototype.find) { var info = this.getTriggerInfo(requireLeadingSpace, true, hasTrailingSpace); + // Create the event + var replaceEvent = new CustomEvent('tribute-replaced', { detail: text }); + if (info !== undefined) { if (!this.isContentEditable(context.element)) { var myField = this.getDocument().activeElement; @@ -652,13 +672,15 @@ if (!Array.prototype.find) { text += '\xA0'; this.pasteHtml(text, info.mentionPosition, info.mentionPosition + info.mentionText.length + 1); } + + context.element.dispatchEvent(replaceEvent); } } }, { key: 'pasteHtml', value: function pasteHtml(html, startPos, endPos) { - var range = undefined, - sel = undefined; + var range = void 0, + sel = void 0; sel = this.getWindowSelection(); range = this.getDocument().createRange(); range.setStart(sel.anchorNode, startPos); @@ -668,8 +690,8 @@ if (!Array.prototype.find) { var el = this.getDocument().createElement('div'); el.innerHTML = html; var frag = this.getDocument().createDocumentFragment(), - node = undefined, - lastNode = undefined; + node = void 0, + lastNode = void 0; while (node = el.firstChild) { lastNode = frag.appendChild(node); } @@ -715,10 +737,10 @@ if (!Array.prototype.find) { var sel = this.getWindowSelection(); var selected = sel.anchorNode; var path = []; - var offset = undefined; + var offset = void 0; if (selected != null) { - var i = undefined; + var i = void 0; var ce = selected.contentEditable; while (selected !== null && ce !== 'true') { i = this.getNodePositionInParent(selected); @@ -744,7 +766,7 @@ if (!Array.prototype.find) { key: 'getTextPrecedingCurrentSelection', value: function getTextPrecedingCurrentSelection() { var context = this.tribute.current, - text = undefined; + text = void 0; if (!this.isContentEditable(context.element)) { var textComponent = this.getDocument().activeElement; @@ -771,9 +793,9 @@ if (!Array.prototype.find) { var _this8 = this; var ctx = this.tribute.current; - var selected = undefined, - path = undefined, - offset = undefined; + var selected = void 0, + path = void 0, + offset = void 0; if (!this.isContentEditable(ctx.element)) { selected = this.getDocument().activeElement; @@ -793,7 +815,7 @@ if (!Array.prototype.find) { if (effectiveRange !== undefined && effectiveRange !== null) { var _ret3 = function () { var mostRecentTriggerCharPos = -1; - var triggerChar = undefined; + var triggerChar = void 0; _this8.tribute.triggers().forEach(function (c) { var idx = effectiveRange.lastIndexOf(c); @@ -898,9 +920,9 @@ if (!Array.prototype.find) { key: 'getContentEditableCaretPosition', value: function getContentEditableCaretPosition(selectedNodePosition) { var markerTextChar = ''; - var markerEl = undefined, + var markerEl = void 0, markerId = 'sel_' + new Date().getTime() + '_' + Math.random().toString().substr(2); - var range = undefined; + var range = void 0; var sel = this.getWindowSelection(); var prevRange = sel.getRangeAt(0); @@ -931,7 +953,7 @@ if (!Array.prototype.find) { key: 'scrollIntoView', value: function scrollIntoView(elem) { var reasonableBuffer = 20, - clientRect = undefined; + clientRect = void 0; var maxScrollDisplacement = 100; var e = elem; @@ -974,6 +996,7 @@ if (!Array.prototype.find) { // Thanks to https://github.com/mattyork/fuzzy + var TributeSearch = function () { function TributeSearch(tribute) { _classCallCheck(this, TributeSearch); @@ -1008,8 +1031,8 @@ if (!Array.prototype.find) { pre = opts.pre || '', post = opts.post || '', compareString = opts.caseSensitive && string || string.toLowerCase(), - ch = undefined, - compareChar = undefined; + ch = void 0, + compareChar = void 0; pattern = opts.caseSensitive && pattern || pattern.toLowerCase(); @@ -1043,8 +1066,8 @@ if (!Array.prototype.find) { var c = pattern[patternIndex]; var index = string.indexOf(c, stringIndex); - var best = undefined, - temp = undefined; + var best = void 0, + temp = void 0; while (index > -1) { patternCache.push(index); diff --git a/example/index.html b/example/index.html index 6c15f739..509b9237 100644 --- a/example/index.html +++ b/example/index.html @@ -135,6 +135,9 @@
Tribute on traditional form elements!
tributeMultipleTriggers.attach(document.getElementById('testMultiple')); + document.getElementById('test').addEventListener('tribute-replaced', function (e) { + console.log('Text replaced by Tribute!'); + }); diff --git a/js/tribute.js b/js/tribute.js index 49b19fe1..8d097f00 100644 --- a/js/tribute.js +++ b/js/tribute.js @@ -21,6 +21,22 @@ if (!Array.prototype.find) { } } +(function () { + + if ( typeof window.CustomEvent === "function" ) return false + + function CustomEvent ( event, params ) { + params = params || { bubbles: false, cancelable: false, detail: undefined } + var evt = document.createEvent( 'CustomEvent' ) + evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ) + return evt + } + + CustomEvent.prototype = window.Event.prototype + + window.CustomEvent = CustomEvent +})() + { class Tribute { constructor({ @@ -555,6 +571,9 @@ if (!Array.prototype.find) { let info = this.getTriggerInfo(requireLeadingSpace, true, hasTrailingSpace) + // Create the event + let replaceEvent = new CustomEvent('tribute-replaced', { detail: text }) + if (info !== undefined) { if (!this.isContentEditable(context.element)) { let myField = this.getDocument().activeElement @@ -571,6 +590,8 @@ if (!Array.prototype.find) { this.pasteHtml(text, info.mentionPosition, info.mentionPosition + info.mentionText.length + 1) } + + context.element.dispatchEvent(replaceEvent) } }