mentions are clickable in framer

app/assets/javascripts/app/helpers/text_formatter.js

@@ -68,10 +68,16 @@
     var mentionRegex = /@\{([^;]+); ([^\}]+)\}/g
     return text.replace(mentionRegex, function(mentionText, fullName, diasporaId) {
       var person = _.find(mentions, function(person){
-        return person.diaspora_id == diasporaId
+        return (diasporaId == person.diaspora_id || person.handle) //jquery.mentionsInput gives us person.handle
       })
+      if(person) {
+        var url = person.url || "/people/" + person.guid //jquery.mentionsInput gives us person.url
+          , personText = "<a href='" + url + "' class='mention'>" + fullName + "</a>"
+      } else {
+        personText = fullName;
+      }
 
-      return person ? "<a href='/people/" + person.guid + "' class='mention'>" + fullName + "</a>" : fullName;
+      return personText
     })
   }
 

app/assets/javascripts/app/pages/composer.js

@@ -24,23 +24,28 @@ app.pages.Composer = app.views.Base.extend({
   },
 
   navigateNext : function(){
-    this.$("form textarea.text").mentionsInput('val',
+    var self = this,
-      _.bind(function(markup){
+        textArea = this.$("form textarea.text")
-        $('#text_with_markup').val(markup);
+
-        this.setModelAttributes();
+    textArea.mentionsInput('val', function(markup){
+      textArea.mentionsInput('getMentions', function(mentions){
+        var overrides = {
+          text : markup,
+          mentioned_people : mentions
+        }
+
+        self.setModelAttributes(overrides);
         app.router.navigate("framer", true);
-      }, this)
+      })
-    );
+    });
   },
 
-  setModelAttributes : function(evt){
+  setModelAttributes : function(overrides){
-    if(evt){ evt.preventDefault(); }
-
     var form = this.$el;
-
     this.model.set(_.inject(this.formAttrs, setValueFromField, {}))
     this.model.photos = this.postForm.pictureForm.photos
     this.model.set({"photos": this.model.photos.toJSON() })
+    this.model.set(overrides)
 
     function setValueFromField(memo, attribute, selector){
       var selectors = form.find(selector);

features/step_definitions/trumpeter_steps.rb

@@ -1,21 +1,18 @@
-def mention_alice(user_name)
+def type_to_mention(typed, user_name)
-  #find(selector).native.send_keys(value)
+  #add each of the charcters to jquery.mentionsInput's buffer
-  page.execute_script <<-JAVASCRIPT
+  typed.each_char do |char|
-    var mentionsInput = $("textarea.text")
+    key_code = char.ord
-
+    page.execute_script <<-JAVASCRIPT
-    triggerKeypress(64) //@
-    triggerKeypress(97) //a
-    mentionsInput.trigger("input") //bring up c
-
-
-    function triggerKeypress(keyCode){
       var e = new $.Event("keypress")
-      e.which = keyCode //@
+      e.which = #{key_code}
-      mentionsInput.trigger(e)
+      $("textarea.text").trigger(e)
-    }
+    JAVASCRIPT
-  JAVASCRIPT
+  end
-  page.find(".mentions-autocomplete-list li:contains('Alice Smith')").click()
+
-  sleep(1)
+  #trigger event that brings up mentions input
+  page.execute_script('$("textarea.text").trigger("input")')
+
+  page.find(".mentions-autocomplete-list li:contains('#{user_name}')").click()
 end
 
 def aspects_dropdown
@@ -76,8 +73,8 @@ When /^I write "([^"]*)"(?:| with body "([^"]*)")$/ do |headline, body|
   fill_in 'text', :with => [headline, body].join("\n")
 end
 
-Then /I mention "([^"]*)"$/ do |text|
+Then /I type "([^"]*)" to mention "([^"]*)"$/ do |typed, user_name|
-  mention_alice('@a')
+  type_to_mention(typed, user_name)
 end
 
 When /^I select "([^"]*)" in my aspects dropdown$/ do |title|

features/trumpeter.feature

@@ -28,8 +28,10 @@ Feature: Creating a new post
    And a user with email "bob@bob.bob" is connected with "alice@alice.alice"
    And I trumpet
    And I wait for the ajax to finish
-   And I mention "Alice Smith"
+   And I type "@a" to mention "Alice Smith"
-   And I go through the default composer
+   And I start the framing process
+   Then the post should mention "Alice Smith"
+   When I finalize my frame
    Then the post should mention "Alice Smith"
 
   Scenario: Uploading multiple photos

spec/javascripts/app/helpers/text_formatter_spec.js

@@ -107,6 +107,21 @@ describe("app.helpers.textFormatter", function(){
         })
       });
 
+      it("returns mentions for on posts that haven't been saved yet (framer posts)", function(){
+        var freshBob = factory.author({
+          name : "Bob Grimm",
+          handle : "bob@example.com",
+          url : 'googlebot.com',
+          id : "666"
+        })
+
+        this.statusMessage.set({'mentioned_people' : [freshBob] })
+
+        var formattedText = this.formatter.mentionify(this.statusMessage.get("text"), this.statusMessage.get("mentioned_people"))
+        var wrapper = $("<div>").html(formattedText);
+        expect(wrapper.find("a[href='googlebot.com']").text()).toContain(freshBob.name)
+      })
+
       it('returns the name of the mention if the mention does not exist in the array', function(){
         var text = "hey there @{Chris Smith; chris@example.com}"
         var formattedText = this.formatter.mentionify(text, [])

spec/javascripts/app/pages/composer_spec.js

@@ -46,7 +46,7 @@ describe("app.pages.Composer", function(){
 
         it("instantiates a post on form submit", function(){
           this.page.$("button.next").click()
-          waitsFor(function(){ return this.page.$("#text_with_markup").text() == "Oh My" })
+          waitsFor(function(){ app.router.navigate.callCount > 1 })
           runs(function(){
             expect(this.page.model.get("aspect_ids")).toBe("public")
             expect(this.page.model.get("services").length).toBe(2)