#30 select() and promises

the function specified in the mentio-select attribute can now return Promises instead of only a string. Both are supported.
jeff-collins · Sep 16, 2014 · ae82d52 · ae82d52
1 parent bc4cdd1
commit ae82d52
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 25 deletions.
diff --git a/dist/mentio.js b/dist/mentio.js
@@ -61,11 +61,8 @@ angular.module('mentio', [])
                     }
                 };
 
-                $scope.replaceText = function (triggerChar, item) {
-                    var remoteScope = $scope.triggerCharMap[triggerChar];
-                    var text = remoteScope.select({
-                        item: item
-                    });
+                $scope.replaceText = function (text) {
+                    $scope.hideAll();
                     mentioUtil.replaceTriggerText($scope.targetElement, $scope.targetElementPath,
                         $scope.targetElementSelectedOffset, $scope.triggerCharSet, text, $scope.requireLeadingSpace);
                     $scope.setTriggerText('');
@@ -190,7 +187,7 @@ angular.module('mentio', [])
                     'keydown keypress paste', function (event) {
                         var activeMenuScope = $scope.getActiveMenuScope();
                         if (activeMenuScope) {
-                            if (event.which === 9) {
+                            if (event.which === 9 || event.which === 13) {
                                 event.preventDefault();
                                 activeMenuScope.selectActive();
                             }
@@ -216,10 +213,9 @@ angular.module('mentio', [])
                                 });
                             }
 
-                            if (event.which === 13) {
+                            if (event.which === 37 || event.which === 39) {
                                 event.preventDefault();
-                                activeMenuScope.selectActive();
-                            }
+                             }
                         }
                     }
                 );
@@ -363,8 +359,15 @@ angular.module('mentio', [])
 
                 // callable both with controller (menuItem) and without controller (local)
                 this.selectItem = $scope.selectItem = function (item) {
-                    $scope.hideMenu();
-                    $scope.parentMentio.replaceText($scope.triggerChar, item);
+                    var text = $scope.select({
+                        item: item
+                    });
+                    if (typeof text.then === 'function') {
+                        /* text is a promise, at least our best guess */
+                        text.then($scope.parentMentio.replaceText);
+                    } else {
+                        $scope.parentMentio.replaceText(text);
+                    }
                 };
 
                 $scope.activateNextItem = function () {

diff --git a/dist/mentio.min.js b/dist/mentio.min.js
diff --git a/ment.io/index.html b/ment.io/index.html
@@ -365,7 +365,8 @@ <h4 class="section-heading">Attributes</h4>
                 <strong>Optional.</strong>
                 Specifies a function call to invoke when the user has picked an item in the menu.  The item in <code>mentio-items</code>
                 corresponding to the selected item in the menu is bound to the <code>item</code> parameter of the select function.  The
-                select function must return a string to use to replace the current trigger char and mention text.
+                select function may return a string or a <code>Promise</code> that returns a string value to use to replace the 
+                current trigger char and mention text.
                 <p></p>
                 If no select function is specified, the trigger char is prepended to the <code>label</code> property of the current item.
 

diff --git a/ment.io/scripts.js b/ment.io/scripts.js
@@ -86,7 +86,15 @@ angular.module('mentio-demo', ['mentio', 'ngRoute'])
         };
 
         $scope.getProductTextRaw = function(item) {
-            return '#' + item.sku;
+            /* the select() function can also return a Promise which ment.io will handle
+            propertly during replacement */
+            return new Promise(function(fulfill) {  
+                    // simulated async promise              
+                    $timeout(function() {
+                        fulfill('#' + item.sku);
+                    }, 500);
+                }
+            );
         };
 
         $scope.getPeopleText = function(item) {

diff --git a/src/mentio.directive.js b/src/mentio.directive.js
@@ -61,11 +61,8 @@ angular.module('mentio', [])
                     }
                 };
 
-                $scope.replaceText = function (triggerChar, item) {
-                    var remoteScope = $scope.triggerCharMap[triggerChar];
-                    var text = remoteScope.select({
-                        item: item
-                    });
+                $scope.replaceText = function (text) {
+                    $scope.hideAll();
                     mentioUtil.replaceTriggerText($scope.targetElement, $scope.targetElementPath,
                         $scope.targetElementSelectedOffset, $scope.triggerCharSet, text, $scope.requireLeadingSpace);
                     $scope.setTriggerText('');
@@ -190,7 +187,7 @@ angular.module('mentio', [])
                     'keydown keypress paste', function (event) {
                         var activeMenuScope = $scope.getActiveMenuScope();
                         if (activeMenuScope) {
-                            if (event.which === 9) {
+                            if (event.which === 9 || event.which === 13) {
                                 event.preventDefault();
                                 activeMenuScope.selectActive();
                             }
@@ -216,10 +213,9 @@ angular.module('mentio', [])
                                 });
                             }
 
-                            if (event.which === 13) {
+                            if (event.which === 37 || event.which === 39) {
                                 event.preventDefault();
-                                activeMenuScope.selectActive();
-                            }
+                             }
                         }
                     }
                 );
@@ -363,8 +359,15 @@ angular.module('mentio', [])
 
                 // callable both with controller (menuItem) and without controller (local)
                 this.selectItem = $scope.selectItem = function (item) {
-                    $scope.hideMenu();
-                    $scope.parentMentio.replaceText($scope.triggerChar, item);
+                    var text = $scope.select({
+                        item: item
+                    });
+                    if (typeof text.then === 'function') {
+                        /* text is a promise, at least our best guess */
+                        text.then($scope.parentMentio.replaceText);
+                    } else {
+                        $scope.parentMentio.replaceText(text);
+                    }
                 };
 
                 $scope.activateNextItem = function () {