Merge da3d43b into f917340

app/assets/javascripts/app/helpers/modal_helper.js

@@ -1,12 +1,34 @@
+
 (function(){
-  app.helpers.showModal = function(id){
+  app.helpers.showModal = function(id, statusMessagePath, title){
     $(id).modal();
-    var modalBody = $(id).find(".modal-body");
 
-    var url = $(id).attr("href");
+    var $modalTitle = $(id).find(".modal-title");
+
+    if($('showMentionModal').modal()) {
+      if(statusMessagePath){
+        if($modalTitle.data("original-title") == null){
+          $modalTitle.data("original-title", $modalTitle[0].textContent);
+        }
+
+        var modalBody = $(id).find(".modal-body");
+
+        $modalTitle.text(title);
+        modalBody.load(statusMessagePath, function(){
+          $(id).find("#modalWaiter").remove();
+        });
+      }
+      else{
+      	if($modalTitle.data("original-title") != null){
+          $modalTitle.text($modalTitle.data("original-title"));
+        }
+        var profileMention = $(id).find(".modal-body");
 
-    modalBody.load(url, function(){
-      $(id).find("#modalWaiter").remove();
-    });
+        var url = $(id).attr("href");
+        profileMention.load(url, function(){
+          $(id).find("#modalWaiter").remove();
+        });
+      }
+    }
   };
 })();

app/assets/javascripts/app/views/hovercard_view.js

@@ -5,15 +5,23 @@ app.views.Hovercard = app.views.Base.extend({
   id: 'hovercard_container',
 
   events: {
-    'mouseleave': '_mouseleaveHandler'
+    'mouseleave': '_mouseleaveHandler',
+    "click #mention_button": "showMentionModal",
+    "click #message_button": "showMessageModal",
   },
 
   initialize: function() {
     this.render();
-
+    
     $(document)
       .on('mouseenter', '.hovercardable', _.bind(this._mouseenterHandler, this))
-      .on('mouseleave', '.hovercardable', _.bind(this._mouseleaveHandler, this));
+      .on('mouseleave', '.hovercardable', _.bind(this._mouseleaveHandler, this))
+      .on('click', '#mention_button', function() {
+        $('#hovercard_container').fadeOut('fast');
+      })
+      .on('click', '#message_button', function() {
+        $('#hovercard_container').fadeOut('fast');
+      });
 
     this.showMe = false;
     this.parent = null;  // current 'hovercardable' element that caused HC to appear
@@ -25,9 +33,12 @@ app.views.Hovercard = app.views.Base.extend({
     this.hashtags = this.$('.hashtags');
     this.person_link = this.$('a.person');
     this.person_handle = this.$('div.handle');
-    this.active = true;
+    this.person_mention_button = this.$('#mention_button');
+    this.person_message_button = this.$('#message_button');
+    this.active = true;  
   },
 
+
   postRenderTemplate: function() {
     this.$el.appendTo($('body'));
   },
@@ -95,6 +106,7 @@ app.views.Hovercard = app.views.Base.extend({
   _populateHovercard: function() {
     var href = this.href();
     href += "/hovercard.json";
+    //console.log('calling ' + href);
 
     var self = this;
     $.ajax(href, {preventGlobalErrorHandling: true}).done(function(person){
@@ -113,12 +125,16 @@ app.views.Hovercard = app.views.Base.extend({
 
   _populateHovercardWith: function(person) {
     var self = this;
-
+    
     this.avatar.attr('src', person.avatar);
     this.avatarLink.attr("href", person.url);
     this.person_link.attr('href', person.url);
     this.person_link.text(person.name);
     this.person_handle.text(person.handle);
+    this.person_mention_button.attr('data-status-message-path', person.status_url);
+    this.person_mention_button.attr('data-title', person.title);
+    this.person_message_button.attr('data-conversation-path', person.message_url);
+
 
     // set hashtags
     this.hashtags.empty();
@@ -137,6 +153,18 @@ app.views.Hovercard = app.views.Base.extend({
     new app.views.AspectMembership({el: self.dropdown_container});
   },
 
+  showMentionModal: function(e) {
+    var statusMessagePath = e.target.getAttribute('data-status-message-path');
+    var title = e.target.getAttribute('data-title');
+    app.helpers.showModal("#mentionModal", statusMessagePath, title);
+  },
+
+  showMessageModal: function(e){
+    var conversationPath = e.target.getAttribute('data-conversation-path');
+    app.helpers.showModal("#conversationModal", conversationPath);
+  },
+
+
   _positionHovercard: function() {
     var p_pos = this.parent.offset();
     var p_height = this.parent.height();
@@ -154,6 +182,6 @@ app.views.Hovercard = app.views.Base.extend({
       event.pageX <= elPos.left + element.width() &&
       event.pageY >= elPos.top &&
       event.pageY <= elPos.top + element.height();
-  },
+  }
 });
 // @license-end

app/assets/javascripts/app/views/profile_header_view.js

@@ -12,6 +12,7 @@ app.views.ProfileHeader = app.views.Base.extend({
     app.events.on('aspect:create', this.postRenderTemplate, this);
     this.photos = _.has(opts, 'photos') ? opts.photos : null;
     this.contacts = _.has(opts, 'contacts') ? opts.contacts : null;
+
   },
 
   presenter: function() {
@@ -47,6 +48,7 @@ app.views.ProfileHeader = app.views.Base.extend({
 
   showMentionModal: function(){
     app.helpers.showModal("#mentionModal");
+
   },
 
   showMessageModal: function(){

app/assets/javascripts/app/views/publisher/mention_view.js

@@ -23,6 +23,7 @@ app.views.PublisherMention = app.views.SearchBase.extend({
     // contains the 'fake text' displayed to the user
     // also has a data-messageText attribute with the original text
     this.inputBox = this.$("#status_message_fake_text");
+    // console.log($('#status_message_fake_text'));
     // contains the mentions displayed to the user
     this.mentionsBox = this.$(".mentions-box");
     this.typeaheadInput = this.$(".typeahead-mention-box");

app/assets/javascripts/app/views/stream_post_views.js

@@ -27,7 +27,12 @@ app.views.StreamPost = app.views.Post.extend({
     "click .block_user": "blockUser",
 
     "click .create_participation": "createParticipation",
-    "click .destroy_participation": "destroyParticipation"
+    "click .destroy_participation": "destroyParticipation",
+    "click #mention_button": "showMentionModal",
+    "click #message_button": "showMessageModal",
+    "keydown textarea#conversation_text" : "keyDown",
+    "conversation:loaded" : "setupConversation",
+    "click .conversation_button": "showMessageModal",
   },
 
   tooltipSelector : [".timeago",
@@ -51,6 +56,35 @@ app.views.StreamPost = app.views.Post.extend({
     this.pollView = new app.views.Poll({model : this.model});
   },
 
+  setupConversation: function() {
+    app.helpers.timeago($(this.el));
+    $(".control-icons a").tooltip({placement: "bottom"});
+
+    var conv = $(".conversation-wrapper .stream_element.selected"),
+        cBadge = $("#conversations-link .badge");
+
+    if(conv.hasClass("unread") ){
+      var unreadCount = parseInt(conv.find(".unread-message-count").text(), 10);
+
+      if(cBadge.text() !== "") {
+        cBadge.text().replace(/\d+/, function(num){
+          num = parseInt(num, 10) - unreadCount;
+          if(num > 0) {
+            cBadge.text(num);
+          } else {
+            cBadge.text(0).addClass("hidden");
+          }
+        });
+      }
+      conv.removeClass("unread");
+      conv.find(".unread-message-count").remove();
+
+      var pos = $("#first_unread").offset().top - 50;
+      $("html").animate({scrollTop:pos});
+    } else {
+      $("html").animate({scrollTop:0});
+    }
+  },
 
   likesInfoView : function(){
     return new app.views.LikesInfo({model : this.model});
@@ -87,6 +121,22 @@ app.views.StreamPost = app.views.Post.extend({
     app.currentUser.toggleNsfwState();
   },
 
+  showMentionModal: function(e){
+    var statusMessagePath = e.target.getAttribute('data-status-message-path');
+    var title = e.target.getAttribute('data-title');
+    app.helpers.showModal("#mentionModal", statusMessagePath, title);
+  },
+
+  showMessageModal: function(e){
+    var conversationPath = e.target.getAttribute('data-conversation-path');
+    app.helpers.showModal("#conversationModal", conversationPath);
+  },
+
+  keyDown : function(evt) {
+    if(evt.which === Keycodes.ENTER && evt.ctrlKey) {
+      $(evt.target).parents("form").submit();
+    }
+  },
 
   blockUser: function(evt){
     if(evt) { evt.preventDefault(); }

app/assets/javascripts/app/views/stream_view.js

@@ -1,6 +1,15 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
 app.views.Stream = app.views.InfScroll.extend({
+  triggerChar: "@",
+  invisibleChar: "\u200B", // zero width space
+  mentionRegex: /@([^@\s]+)$/,
+
+  events: {
+    "click #mention_button": "showMentionModal",
+    "click #message_button": "showMessageModal",
+  },
+
 
   initialize: function() {
     this.stream = this.model;
@@ -23,6 +32,14 @@ app.views.Stream = app.views.InfScroll.extend({
     app.currentUser.bind("nsfwChanged", reRenderPostViews, this);
   },
 
+  showMentionModal: function(){
+    app.helpers.showModal("#mentionModal");
+  },
+
+  showMessageModal: function(){
+    app.helpers.showModal("#conversationModal");
+  },
+
   markNavSelected : function() {
     var activeStream = Backbone.history.fragment;
     var streamSelection = $("#stream_selection");

app/assets/stylesheets/hovercard.scss

@@ -24,8 +24,38 @@
     }
   }
 
+  ul li {
+     display: inline-block;
+     vertical-align: bottom;
+  }
+
+  .mention {
+    font-size: 17px;
+    color: $text-grey;
+    cursor: pointer;
+    position: relative;
+    text-decoration: none;
+    color: lighten($black,75%);
+    &:hover {color: $black; }
+  }
+
+  .message {
+    position: relative;
+    text-decoration: none;
+    cursor:pointer;
+    margin-right: 0px;
+    margin-bottom: 5px;
+    .hovercards-icon {
+      font-size: 17px;
+      line-height: 30px;
+      color: lighten($black,75%);
+      &:hover { color: $black;}
+    }
+  }
+
   $image_width: 80px; /* including margin */
 
+
   > h4,
   > div:not(.card-footer) {
     margin-left: $image_width;
@@ -44,7 +74,7 @@
   }
 
   padding: 5px {
-    bottom: 25px;
+    bottom: 19px;
   };
 
   h4 {

app/assets/templates/hovercard_tpl.jst.hbs

@@ -6,7 +6,20 @@
     <a class="person"></a>
   </h4>
   <div class="handle"></div>
-  <div id="hovercard_dropdown_container"></div>
+    <ul style="width: 100%;">
+      <li>
+        <div id="hovercard_dropdown_container"></div>
+      </li>
+      <li style="width: 45px; float:right">
+        <a class = "mention">
+          <span id="mention_button" class="hovercards-icon" title="{{t 'people.mention'}}" data-placement="bottom" data-toggle="modal" data-target="showMentionModal">@</span>
+        </a>
+
+        <a class="message">
+          <i id="message_button" class="entypo-mail hovercards-icon" title="{{t 'people.message'}}" data-placement="bottom" data-toggle="modal" data-target="showMessageModal"></i>
+        </a>
+      </li>
+    </ul>   
   <div class="card-footer">
     <div class="footer-container">
       <div class="hashtags"></div>

app/controllers/people_controller.rb

@@ -112,7 +112,7 @@ def hovercard
       end
 
       format.json do
-        render :json => HovercardPresenter.new(@person)
+        render :json => HovercardPresenter.new(@person, current_user)
       end
     end
   end
@@ -169,6 +169,12 @@ def aspect_membership_dropdown
     render :partial => 'aspect_membership_dropdown', :locals => {:contact => @contact, :person => @person, :hang => 'left', :size => size}
   end
 
+  def mention
+  end
+
+  def message
+  end
+
   private
 
   def find_person

app/controllers/streams_controller.rb

@@ -12,6 +12,11 @@ class StreamsController < ApplicationController
              :mobile,
              :json
 
+  def handle_mention_feedback(status_message)
+    return unless comes_from_others_profile_page?
+    flash[:notice] = t("status_messages.create.success", names: status_message.mentioned_people_names)
+  end
+
   def aspects
     aspect_ids = (session[:a_ids] || [])
     @stream = Stream::Aspect.new(current_user, aspect_ids,
@@ -48,6 +53,12 @@ def followed_tags
     stream_responder(Stream::FollowedTag)
   end
 
+  def mention
+  end
+
+  def message
+  end
+
   private
 
   def stream_responder(stream_klass=nil)