Add tribute-replaced event. (#6)

* Add tribute-replaced event. * Update readme.
zurb · Jun 20, 2016 · cb1c3cc · cb1c3cc
1 parent 9da5c1d
commit cb1c3cc
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 24 deletions.
diff --git 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
@@ -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
@@ -135,6 +135,9 @@ <h5>Tribute on traditional form elements!</h5>
 
       tributeMultipleTriggers.attach(document.getElementById('testMultiple'));
 
+      document.getElementById('test').addEventListener('tribute-replaced', function (e) {
+        console.log('Text replaced by Tribute!');
+      });
     </script>
   </body>
 </html>
diff --git 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)
       }
     }