First stab at new user education - configurable messages that pop up on a user's first

few posts/topics.

Author: eviltrout

app/assets/javascripts/admin/translations.js.erb

@@ -1,4 +1,4 @@
-//= depend_on 'en.yml'
+//= depend_on 'client.en.yml'
 
 <% SimplesIdeias::I18n.assert_usable_configuration! %>
 <% admin = SimplesIdeias::I18n.translation_segments['app/assets/javascripts/i18n/admin.en.js'] 

app/assets/javascripts/discourse/components/div_resizer.js.coffee

@@ -31,14 +31,17 @@
     lastMousePos = thisMousePos
     size = Math.min(size, $(window).height())
     size = Math.max(min, size)
-    div.height size + "px"
+
+    sizePx = size + "px"
+    opts.onDrag?(sizePx)
+    div.height(sizePx)
     endDrag e,opts if size < min
     false
   endDrag = (e,opts) ->
     $(document).unbind("mousemove", wrappedPerformDrag).unbind "mouseup", wrappedEndDrag
     div.removeClass('clear-transitions')
     div.focus()
-    opts.resize() if opts.resize
+    opts.resize?()
     div = null
   mousePosition = (e) ->
     x: e.clientX + document.documentElement.scrollLeft

app/assets/javascripts/discourse/controllers/composer_controller.js.coffee

@@ -2,6 +2,8 @@ window.Discourse.ComposerController = Ember.Controller.extend Discourse.Presence
 
   needs: ['modal', 'topic']
 
+  hasReply: false
+
   togglePreview: ->
     @get('content').togglePreview()
 
@@ -20,11 +22,19 @@ window.Discourse.ComposerController = Ember.Controller.extend Discourse.Presence
       .then (opts) =>
         opts = opts || {}
         @close()
+        Discourse.set('currentUser.post_count', Discourse.get('currentUser.post_count') + 1)
         Discourse.routeTo(opts.post.get('url'))
       , (error) =>
         composer.set('disableDrafts', false)
         bootbox.alert error
 
+  checkReplyLength: ->
+    if @present('content.reply')
+      @set('hasReply', true) 
+    else
+      @set('hasReply', false)
+
+
   saveDraft: ->
     model = @get('content')
     model.saveDraft() if model
@@ -40,6 +50,8 @@ window.Discourse.ComposerController = Ember.Controller.extend Discourse.Presence
   open: (opts={}) ->
     opts.promise = promise = opts.promise || new RSVP.Promise
 
+    @set('hasReply', false)
+
     unless opts.draftKey
       alert("composer was opened without a draft key")
       throw "composer opened without a proper draft key"
@@ -164,7 +176,7 @@ window.Discourse.ComposerController = Ember.Controller.extend Discourse.Presence
 
   # ESC key hit
   hitEsc: ->
-    @shrink() if @get('content.composeState') == @OPEN
+    @shrink() if @get('content.composeState') is Discourse.Composer.OPEN
 
 
   showOptions: ->

app/assets/javascripts/discourse/templates/composer.js.handlebars

@@ -2,6 +2,12 @@
 
 <div class='contents'>
 
+  <div id='new-user-education' {{bindAttr class="view.newUserEducationVisible"}}>
+    <a href='#' {{action closeEducation target="view"}} class='close'>{{i18n ok}}</a>
+
+    {{{view.educationContents}}}
+  </div>
+
   <div class='control'>
     <a href='#' class='toggler' {{action toggle bubbles=false}} title='toggle'></a>      
 

app/assets/javascripts/discourse/translations.js.erb

@@ -1,4 +1,4 @@
-//= depend_on 'en.yml'
+//= depend_on 'client.en.yml'
 
 <% SimplesIdeias::I18n.assert_usable_configuration! %>
 var I18n = I18n || {}; 

app/assets/javascripts/discourse/views/composer_view.js.coffee

@@ -10,6 +10,8 @@ window.Discourse.ComposerView = window.Discourse.View.extend
                       'content.showPreview',
                       'content.hidePreview']
 
+  educationClosed: null
+
   composeState: (->
     state = @get('content.composeState')
     unless state
@@ -49,28 +51,58 @@ window.Discourse.ComposerView = window.Discourse.View.extend
           if $wmdPreview.length > 0
             $wmdPreview.scrollTop($wmdPreview[0].scrollHeight)
 
-
   ).observes('content.reply', 'content.hidePreview')
 
-  willDestroyElement: ->
-    $('body').off 'keydown.composer'
+  closeEducation: ->
+    @set('educationClosed', true)
+    false
+
+  fetchNewUserEducation: (->
+
+    if (Discourse.get('currentUser.post_count') >= Discourse.SiteSettings.educate_until_posts)
+      @set('educationClosed', true)
+      return 
+
+    return unless @get('controller.hasReply')
+
+    @set('educationClosed', false)
+
+    # If visible update the text
+    educationKey = if @get('content.creatingTopic') then 'new-topic' else 'new-reply'
+    $.get("/education/#{educationKey}").then (result) => @set('educationContents', result)
+
+  ).observes('controller.hasReply', 'content.creatingTopic', 'Discourse.currentUser.post_count')
+
+  newUserEducationVisible: (->
+    return 'collapsed' unless @get('educationContents')
+    return 'collapsed' unless @get('content.composeState') is Discourse.Composer.OPEN
+    return 'collapsed' unless @present('content.reply')
+    return 'collapsed' if @get('educationClosed')
+
+    return 'visible'
+  ).property('content.composeState', 'content.reply', 'educationClosed', 'educationContents')
+
+  moveNewUserEducation: (sizePx) ->
+    $('#new-user-education').css('bottom', sizePx)
 
   resize: (->
     # this still needs to wait on animations, need a clean way to do that
     Em.run.next null, =>
       replyControl = $('#reply-control')
       h = replyControl.height() || 0
-      $('.topic-area').css('padding-bottom', "#{h}px")
+      sizePx = "#{h}px"
+      $('.topic-area').css('padding-bottom', sizePx)
+      $('#new-user-education').css('bottom', sizePx)
   ).observes('content.composeState')
 
-  didInsertElement: ->
-
-    # Delegate ESC to the composer
-    $('body').on 'keydown.composer', (e) =>
-      @get('controller').hitEsc() if e.which == 27
+  keyUp: (e) -> 
+    controller = @get('controller')
+    controller.checkReplyLength()
+    controller.hitEsc() if e.which == 27
 
+  didInsertElement: ->
     replyControl = $('#reply-control')
-    replyControl.DivResizer(resize: @resize)
+    replyControl.DivResizer(resize: @resize, onDrag: @moveNewUserEducation)
     Discourse.TransitionHelper.after(replyControl, @resize)
 
   click: ->

app/assets/stylesheets/application/compose.css.scss

@@ -3,6 +3,34 @@
 @import "foundation/variables";
 @import "foundation/mixins";
 
+
+#new-user-education {
+
+  &.collapsed {
+    max-height: 0;
+    visibility: hidden;
+  }
+
+  &.visible {
+    max-height: 1000px;
+    visibility: visible;
+  }
+
+  p {
+    margin: 0 0 10px 0;
+  }
+
+  a.close {
+    float: right;
+  }
+
+  background-color: lighten($yellow, 40%);
+  border: 1px solid $yellow;
+  padding: 10px;
+  width: 600px;
+  position: absolute;
+}
+
 #reply-control {
   .toggle-preview, .saving-draft {
     position: absolute;

app/controllers/education_controller.rb

@@ -0,0 +1,17 @@
+class EducationController < ApplicationController
+
+  before_filter :ensure_logged_in
+
+  def show
+    raise Discourse::InvalidAccess.new unless params[:id] =~ /^[a-z0-9\-\_]+$/
+    raise Discourse::NotFound.new unless I18n.t(:education).include?(params[:id].to_sym)
+    
+    education_posts_text = I18n.t('education.until_posts', count: SiteSetting.educate_until_posts)
+
+    markdown_content = MultisiteI18n.t("education.#{params[:id]}", 
+                                       site_name: SiteSetting.title, 
+                                       education_posts_text: education_posts_text)
+    render text: PrettyText.cook(markdown_content)
+  end
+
+end

app/controllers/posts_controller.rb

@@ -116,6 +116,10 @@ def replies
     render_serialized(post.replies, PostSerializer)
   end
 
+  # Returns the "you're creating a post education"
+  def education_text
+    
+  end
 
   def bookmark
     post = find_post_from_params

app/models/site_setting.rb

@@ -138,6 +138,8 @@ class SiteSetting < ActiveRecord::Base
 
   setting(:new_user_period_days, 2)
 
+  client_setting(:educate_until_posts, 2)
+
   def self.call_discourse_hub?
     self.enforce_global_nicknames? and self.discourse_org_access_key.present?
   end