Started converting the help section into a backbone view. Things missing are: some urls which were calculated and inserted into the yml, all the pre-existing erb templates are still there, it's still at /faq/faq, nothing has been tested, some of the questions don't collapse and expand.

changed the locales to have the hard coded urls in them because they can no longer be calculated server side. this is pretty crap because i'm going to have to change it for all the languages now so i might change my mind about this later.

deleted some unused views.

app/assets/javascripts/app/app.js

@@ -39,6 +39,7 @@ var app = {
     this.setupHeader();
     this.setupBackboneLinks();
     this.setupGlobalViews();
+    this.setupHelpViews();
     this.setupDisabledLinks();
   },
 
@@ -103,6 +104,13 @@ var app = {
     app.sidebar = new app.views.Sidebar();
   },
 
+  setupHelpViews: function() {
+    //TODO RS: Is this the right place from here?
+    app.help = new app.views.Help();
+    $("#help").prepend(app.help.el);
+    app.help.render();
+  },
+
   /* mixpanel wrapper function */
   instrument : function(type, name, object, callback) {
     if(!window.mixpanel) { return }

app/assets/javascripts/app/views.js

@@ -29,6 +29,7 @@ app.views.Base = Backbone.View.extend({
     this.renderSubviews()
     this.renderPluginWidgets()
     this.removeTooltips()
+    this.afterRender()
 
     return this
   },
@@ -99,6 +100,10 @@ app.views.Base = Backbone.View.extend({
           });
         });
     }
+  },
+
+  afterRender: function(){
+    // Do nothing
   }
 });
 

app/assets/javascripts/app/views/faq_question_view.js

@@ -0,0 +1,34 @@
+app.views.FaqQuestionView = app.views.Base.extend({
+
+  templateName: "faq_question",
+
+  events: {
+    "click .question.collapsible a.toggle" : "toggled"
+  },
+
+  initialize : function(d) {
+    this.data = d;
+    return this;
+  },
+
+  presenter : function(){
+    return this.data;
+  },
+
+  afterRender: function(){
+    console.log("Rendered yo")
+    var el = $(this.el)
+    el.find('.question.collapsible').removeClass('opened').addClass('collapsed');
+    el.find('.answer').hide();
+  },
+
+  toggled: function(e) {
+    el = $(e.target);
+    parent = el.parents('.question');
+
+    parent.children('.answer').toggle();
+    parent.toggleClass('opened').toggleClass('collapsed');
+
+    e.preventDefault();
+  },
+});

app/assets/javascripts/app/views/help_view.js

@@ -1,13 +1,84 @@
-$(document).ready(function() {
-  $('#faq .question.collapsible').removeClass('opened').addClass('collapsed');
-  $('#faq .question.collapsible .answer').hide();
+//TODO RS: Would be nice to have #faq as the root elem or something
+app.views.Help = app.views.Base.extend({
+  templateName : "help",
+  // className : "dark-header",
 
-  $('#faq .question.collapsible :first').addClass('opened').removeClass('collapsed');
-  $('#faq .question.collapsible .answer :first').show();
+  events : {
+    "click .faq-link" : "sectionClicked",
+    "click .faq-link-getting-help" : "gettingHelp",
+    "click .faq-link-sharing" : "sharing",
+    "click .faq-link-posts-and-posting" : "postsAndPosting"
+  },
 
-  $('.question.collapsible a.toggle').click(function ( event ) {
-    event.preventDefault();
-    $(".answer", this.parentNode).toggle();
-    $(this.parentNode).toggleClass('opened').toggleClass('collapsed');
-  });
-}); 
+  initialize : function(options) {
+    // TODO RS: Set menu link text from js i18n
+    // TODO RS: Highlight menu item on click
+    return this;
+  },
+
+  afterRender: function() {
+    this.renderStaticSection("getting_help", "faq_getting_help");
+  },
+
+  showItems: function(el) {
+    this.clearItems();
+    var section = el.data('section');
+    var items = el.data('items').split(" ");
+
+    items.forEach(function(item, i){
+      var qa = {question: this.getText(section, item, true),
+              answer: this.getText(section, item, false)};
+      item = new app.views.FaqQuestionView(qa);
+      $('#faq').append(item.render().el);
+    }, this);
+
+    this.setInitialVisibility();
+  },
+
+  getText: function(section, name, question){
+    var q = question ? "_q" : "_a";
+    return Diaspora.I18n.t( section + '.' + name + q);
+  },
+
+  setInitialVisibility: function() {
+    $('#faq .question.collapsible :first').addClass('opened').removeClass('collapsed');
+    $('#faq .question.collapsible .answer :first').show();
+  },
+
+  clearItems: function() {
+    $('#faq').empty();
+  },
+
+  sectionClicked : function(e) {
+    this.showItems($(e.target));
+
+    e.preventDefault();
+  },
+
+  renderStaticSection: function(section, template) {
+    data = Diaspora.I18n.locale[section];
+    section = new app.views.StaticContentView(template, data);
+    $('#faq').append(section.render().el);
+  },
+
+  gettingHelp: function(e) {
+    this.clearItems();
+    this.renderStaticSection("getting_help", "faq_getting_help");
+
+    e.preventDefault();
+  },
+
+  sharing: function(e) {
+    this.clearItems();
+    this.renderStaticSection("sharing", "faq_sharing");
+
+    e.preventDefault();
+  },
+
+  postsAndPosting: function(e) {
+    this.clearItems();
+    this.renderStaticSection("posts_and_posting", "faq_posts_and_posting");
+
+    e.preventDefault();
+  },
+});

app/assets/javascripts/app/views/static_content_view.js

@@ -0,0 +1,16 @@
+app.views.StaticContentView = app.views.Base.extend({
+
+  events: {
+  },
+
+  initialize : function(templateName, data) {
+    this.templateName = templateName;
+    this.data = data;
+
+    return this;
+  },
+
+  presenter : function(){
+    return this.data;
+  },
+});

app/assets/templates/faq_getting_help_tpl.jst.hbs

@@ -0,0 +1,20 @@
+<h1>diaspora* FAQ</h1>
+<br>
+<div class='question opened'>
+  <h4>{{ getting_started_q }}</h4>
+  <div class='answer'>
+    {{ getting_started_a1 }} <a href="{{ getting_started_url }}" target="_blank">{{ getting_started_link }}</a> {{ getting_started_a2 }}
+    </div>
+</div>
+<div class='question opened'>
+  <h4>{{ get_support_q }}</h4>
+  <div class='answer'>
+    <ul>
+      <li>{{ get_support_a_website }} <a href="{{ get_support_a_website_url }}" target="_blank">{{ get_support_a_website_link }}</a></li>
+      <li>{{ get_support_a_tutorials }} <a href="{{ get_support_a_tutorials_url }}" target="_blank">{{ get_support_a_tutorials_link }}</a></li>
+      <li>{{ get_support_a_wiki }} <a href="{{ get_support_a_wiki_url }}" target="_blank">{{ get_support_a_wiki_link }}</a></li>
+      <li>{{ get_support_a_irc_a }} <a href="{{ get_support_a_irc_url }}" target="_blank">{{ get_support_a_irc_link }}</a> {{ get_support_a_irc_b }} </li>
+      <li>{{ get_support_a_hashtag_a }} <a href="{{ get_support_a_hashtag_url }}">{{ get_support_a_hashtag_link }}</a> {{ get_support_a_hashtag_b }}</li>
+    </ul>
+  </div>
+</div>

app/assets/templates/faq_posts_and_posting_tpl.jst.hbs

@@ -0,0 +1,68 @@
+<div class='question opened collapsible'>
+  <a class='toggle' href='#'>
+    <h4>{{ hide_posts_q }}</h4>
+  </a>
+  <div class='answer'>{{ hide_posts_a }}</div>
+  </div>
+  <div class='question opened collapsible'>
+    <a class='toggle' href='#'>
+      <h4>{{ format_text_q }}</h4>
+    </a>
+    <div class='answer'>
+      {{ format_text_a1 }} <a href="{{ format_text_url_1 }}" target="_blank">{{ format_text_link_1 }}</a>{{ format_text_a2 }} <a href="{{ format_text_url_2 }}" target="_blank">{{ format_text_link_2 }}</a>{{ format_text_a3 }}
+    </div>
+  </div>
+  <div class='question opened collapsible'>
+    <a class='toggle' href='#'>
+      <h4>{{ insert_images_q }}</h4>
+    </a>
+    <div class='answer'>{{ insert_images_a }}</div>
+  </div>
+  <div class='question opened collapsible'>
+    <a class='toggle' href='#'>
+      <h4>{{ insert_images_comments_q }}</h4>
+    </a>
+    <div class='answer'>
+      {{ insert_images_comments_a1 }}
+      <pre>![{{ image_text }}]( {{ image_url }})</pre>
+      {{ insert_images_comments_a2 }}
+    </div>
+  </div>
+  <div class='question opened collapsible'>
+    <a class='toggle' href='#'>
+      <h4>{{ size_of_images_q }}</h4>
+    </a>
+    <div class='answer'>{{ size_of_images_a }}</div>
+  </div>
+  <div class='question opened collapsible'>
+    <a class='toggle' href='#'>
+      <h4>{{ embed_multimedia_q }}</h4>
+    </a>
+    <div class='answer'>{{ embed_multimedia_a }}</div>
+  </div>
+  <div class='question opened collapsible'>
+    <a class='toggle' href='#'>
+      <h4>{{ character_limit_q }}</h4>
+    </a>
+    <div class='answer'>{{ character_limit_a }}</div>
+  </div>
+  <div class='question opened collapsible'>
+    <a class='toggle' href='#'>
+      <h4>{{ char_limit_services_q }}</h4>
+    </a>
+    <div class='answer'>{{ char_limit_services_a }}</div>
+  </div>
+  <div class='question opened collapsible'>
+    <a class='toggle' href='#'>
+      <h4>{{ stream_full_of_posts_q }}</h4>
+    </a>
+    <div class='answer'>
+      {{ stream_full_of_posts_a1 }}
+      <ol>
+        <li>{{ stream_full_of_posts_li1 }}</li>
+        <li>{{ stream_full_of_posts_li2 }}</li>
+        <li>{{ stream_full_of_posts_li3 }}</li>
+      </ol>
+    </div>
+  </div>
+</div>

app/assets/templates/faq_question_tpl.jst.hbs

@@ -0,0 +1,8 @@
+<div class='question opened collapsible'>
+  <a class='toggle' href='#'>
+    <h4>{{ question }}</h4>
+  </a>
+  <div class='answer'>
+    {{ answer }}
+  </div>
+</div>

app/assets/templates/faq_sharing_tpl.jst.hbs

@@ -0,0 +1,36 @@
+<div class='question opened collapsible'>
+  <a class='toggle' href='#'>
+    <h4>{{ add_to_aspect_q }}</h4>
+  </a>
+  <div class='answer'>
+    {{ add_to_aspect_a1 }}
+    <ul>
+      <li>{{ add_to_aspect_li1 }}</li>
+      <li>{{ add_to_aspect_li2 }}</li>
+      <li>{{ add_to_aspect_li3 }}</li>
+      <li>{{ add_to_aspect_li4 }}</li>
+      <li>{{ add_to_aspect_li5 }}</li>
+      <li>{{ add_to_aspect_li6 }}</li>
+      <li>{{ add_to_aspect_li7 }}</li>
+    </ul>
+    {{ add_to_aspect_a2 }}
+  </div>
+</div>
+<div class='question opened collapsible'>
+  <a class='toggle' href='#'>
+    <h4>{{ only_sharing_q }}</h4>
+  </a>
+  <div class='answer'>{{ only_sharing_a }}</div>
+</div>
+<div class='question opened collapsible'>
+  <a class='toggle' href='#'>
+    <h4>{{ list_not_sharing_q }}</h4>
+  </a>
+  <div class='answer'>{{ list_not_sharing_a }}</div>
+</div>
+<div class='question opened collapsible'>
+  <a class='toggle' href='#'>
+    <h4>{{ see_old_posts_q }}</h4>
+  </a>
+  <div class='answer'>{{ see_old_posts_a }}</div>
+</div>

app/assets/templates/help_tpl.jst.hbs

@@ -0,0 +1,27 @@
+
+<div id="section_header">
+  <h2 class="help_header">Help</h2>
+</div>
+<div class="span-5">
+  <div id='faq_nav'>
+    <ul>
+      <li><a href="" class="faq-link-getting-help" data-section="getting_help" data-items="">Getting help</a></li>
+      <li><a href="" class="faq-link" data-section="account_and_data_management" data-items="move_pods download_data close_account data_visible_to_podmin data_other_podmins">Account and data management</a></li>
+      <li><a href="#" class="faq-link" data-section="aspects" data-items="what_is_an_aspect who_sees_post restrict_posts_i_see contacts_know_aspect contacts_visible remove_notification rename_aspect change_aspect_of_post post_multiple_aspects person_multiple_aspects delete_aspect">Aspects</a></li>
+      <li><a href="#" class="faq-link" data-section="mentions" data-items="what_is_a_mention how_to_mention mention_in_comment see_mentions">Mentions</a></li>
+      <li><a href="#" class="faq-link" data-section="pods" data-items="what_is_a_pod find_people use_search_box">Pods</a></li>
+      <li><a href="#" class="faq-link-posts-and-posting" data-section="posts_and_posting" data-items="hide_posts format_text insert_images">Posts and posting</a></li>
+      <li><a href="#" class="faq-link" data-section="private_posts" data-items="who_sees_post can_comment can_reshare see_comment">Private posts</a></li>
+      <li><a href="#" class="faq-link" data-section="private_profiles" data-items="who_sees_profile whats_in_profile who_sees_updates">Private profiles</a></li>
+      <li><a href="#" class="faq-link" data-section="public_posts" data-items="who_sees_post find_public_post can_comment_reshare_like see_comment_reshare_like deselect_aspect_posting">Public posts</a></li>
+      <li><a href="#" class="faq-link" data-section="public_profiles" data-items="who_sees_profile whats_in_profile who_sees_updates what_do_tags_do">Public profiles</a></li>
+      <li><a href="#" class="faq-link" data-section="resharing_posts" data-items="reshare_public_post_aspects reshare_private_post_aspects">Resharing posts</a></li>
+      <li><a href="#" class="faq-link-sharing" data-section="sharing" data-items="">Sharing</a></li>
+      <li><a href="#" class="faq-link" data-section="tags" data-items="what_are_tags_for tags_in_comments followed_tags people_tag_page filter_tags">Tags</a></li>
+      <li><a href="#" class="faq-link" data-section="miscellaneous" data-items="back_to_top photo_albums subscribe_feed diaspora_app">Miscellaneous</a></li>
+    </ul>
+  </div>
+</div>
+
+<div class="span-19 last" id=faq>
+</div>

app/helpers/language_helper.rb

@@ -14,12 +14,23 @@ module LanguageHelper
       translations = I18n.t('javascripts', :locale => language)
       defaults.deep_merge!(translations)
     end
-    
+
     defaults['pluralization_rule'] = I18n.t('i18n.plural.js_rule', :locale => language)
     defaults['pod_name'] = pod_name
     defaults
   end
 
+  def get_diaspora_section_strings_for(section, language)
+    defaults = I18n.t(section, :locale => DEFAULT_LANGUAGE)
+
+    if language != DEFAULT_LANGUAGE
+      translations = I18n.t(section, :locale => language)
+      defaults.deep_merge!(translations)
+    end
+
+    defaults
+  end
+
   def direction_for(string)
     return '' unless string.respond_to?(:cleaned_is_rtl?)
     string.cleaned_is_rtl? ? 'rtl' : 'ltr'

app/helpers/layout_helper.rb

@@ -37,6 +37,15 @@ module LayoutHelper
     end
   end
 
+  def load_section_javascript_locales(section)
+    content_tag(:script) do
+      <<-JS.html_safe
+        Diaspora.I18n.loadLocale(#{get_diaspora_section_strings_for(section, I18n.locale).to_json}, "#{I18n.locale}");
+        Diaspora.Page = "#{params[:controller].camelcase}#{params[:action].camelcase}";
+      JS
+    end
+  end
+
   def current_user_atom_tag
     return #temp hax
 

app/views/help/_faq_nav.haml

@@ -1,7 +1,7 @@
 #faq_nav
   %ul
     %li= link_to_unless_current t('help.getting_help.title'), faq_getting_help_path
-    %li= link_to_unless_current t('help.account_and_data_management.title'), faq_account_and_data_management_path
+    %li= link_to_unless_current t('help.account_and_data_management.title'), faq_account_and_data_management_path, class: 'faq-link', data_items: ['move_pods', 'download_data', 'close_account', 'data_visible_to_podmin', 'data_other_podmins']
     %li= link_to_unless_current t('help.aspects.title'), faq_aspects_path
     %li= link_to_unless_current t('help.mentions.title'), faq_mentions_path
     %li= link_to_unless_current t('help.pods.title'), faq_pods_path
@@ -14,3 +14,4 @@
     %li= link_to_unless_current t('help.sharing.title'), faq_sharing_path
     %li= link_to_unless_current t('help.tags.title'), faq_tags_path
     %li= link_to_unless_current t('help.miscellaneous.title'), faq_miscellaneous_path
+    %span.xxx this is text

app/views/help/account_and_data_management.html.back.haml

@@ -0,0 +1,35 @@
+-#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+-#   licensed under the Affero General Public License version 3 or later.  See
+-#   the COPYRIGHT file.
+
+- content_for :page_title do
+  = t('_help')
+
+#section_header
+  %h2
+    = t('_help')
+  //= render('help_nav')
+.span-5
+  = render('faq_nav')
+
+.span-19.last#faq
+  .question.opened.collapsible
+    %a.toggle{ :href => '#' }
+      %h4= t('.move_pods_q')
+    .answer= t('.move_pods_a')
+  .question.opened.collapsible
+    %a.toggle{ :href => '#' }
+      %h4= t('.download_data_q')
+    .answer= t('.download_data_a')
+  .question.opened.collapsible
+    %a.toggle{ :href => '#' }
+      %h4= t('.close_account_q')
+    .answer= t('.close_account_a')
+  .question.opened.collapsible
+    %a.toggle{ :href => '#' }
+      %h4= t('.data_visible_to_podmin_q')
+    .answer= t('.data_visible_to_podmin_a')
+  .question.opened.collapsible
+    %a.toggle{ :href => '#' }
+      %h4= t('.data_other_podmins_q')
+    .answer= t('.data_other_podmins_a')

app/views/help/faq.html.haml

@@ -0,0 +1,8 @@
+-#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+-#   licensed under the Affero General Public License version 3 or later.  See
+-#   the COPYRIGHT file.
+
+- content_for :page_title do
+  = t('_help')
+
+#help

app/views/layouts/application.html.haml

@@ -39,6 +39,7 @@
     - unless @landing_page
       = javascript_include_tag :main, :templates
       = load_javascript_locales
+      = load_section_javascript_locales("help")
 
     = set_asset_host
     = translation_missing_warnings

config/locales/diaspora/en.yml

@@ -378,13 +378,28 @@ en:
     getting_help:
       title: "Getting help"
       getting_started_q: "Help! I need some basic help to get me started!"
-      getting_started_a: "You're in luck. Try the %{tutorial_series} on our project site. It will take you step-by-step through the registration process and teach you all the basic things you need to know about using diaspora*."
+      getting_started_a1: "You're in luck. Try the "
+      getting_started_a2: "on our project site. It will take you step-by-step through the registration process and teach you all the basic things you need to know about using diaspora*."
+      getting_started_link: "'Getting started' tutorial series"
+      getting_started_url: "http://diasporafoundation.org/getting_started/sign_up"
       get_support_q: "What if my question is not answered in this FAQ? Where else can I get support?"
-      get_support_a_website: "visit our %{link}"
-      get_support_a_tutorials: "check out our %{tutorials}"
-      get_support_a_wiki: "search the %{link}"
-      get_support_a_irc: "join us on %{irc} (Live chat)"
-      get_support_a_hashtag: "ask in a public post on diaspora* using the %{question} hashtag"
+      get_support_a_website: "visit our"
+      get_support_a_website_link: "diaspora foundation website"
+      get_support_a_website_url: "https://diasporafoundation.org"
+      get_support_a_tutorials: "check out our"
+      get_support_a_tutorials_link: "tutorials"
+      get_support_a_tutorials_url: "https://diasporafoundation.org/tutorials"
+      get_support_a_wiki: "search the"
+      get_support_a_wiki_link: "wiki"
+      get_support_a_wiki_url: "https://wiki.diasporafoundation.org/Special:Search"
+      get_support_a_irc_a: "join us on"
+      get_support_a_irc_b: "(Live chat)"
+      get_support_a_irc_link: "IRC"
+      get_support_a_irc_url: "https://wiki.diasporafoundation.org/How_We_Communicate#IRC"
+      get_support_a_hashtag_a: "ask in a public post on diaspora* using the"
+      get_support_a_hashtag_b: "hashtag"
+      get_support_a_hashtag_link: "#question"
+      get_support_a_hashtag_url: "/tags/question"
     account_and_data_management:
       title: "Account and data management"
       move_pods_q: "How do I move my seed (account) from one pod to another?"
@@ -444,7 +459,13 @@ en:
       hide_posts_q: "How do I hide a post? / How do I stop getting notifications about a post that I commented on?"
       hide_posts_a: "If you point your mouse at the top of a post, an X appears on the right. Click it to hide the post and mute notifications about it. You can still see the post if you visit the profile page of the person who posted it."
       format_text_q: "How can I format the text in my posts (bold, italics, etc.)?"
-      format_text_a: "By using a simplified system called %{markdown}. You can find the full Markdown syntax %{here}. The preview button is really helpful here, as you can see how your message will look before you share it."
+      format_text_a1: "By using a simplified system called "
+      format_text_a2: ", you can find the full Markdown syntax "
+      format_text_a3: ". The preview button is really helpful here, as you can see how your message will look before you share it."
+      format_text_link_1: "Markdown"
+      format_text_url_1: "http://diasporafoundation.org/formatting"
+      format_text_link_2: "here"
+      format_text_url_12: "http://daringfireball.net/projects/markdown/syntax"
       insert_images_q: "How do I insert images into posts?"
       insert_images_a: "Click the little camera icon to insert an image into a post. Press the photo icon again to add another photo, or you can select multiple photos to upload in one go."
       insert_images_comments_q: "Can I insert images into comments?"

config/routes.rb

@@ -205,7 +205,7 @@ Diaspora::Application.routes.draw do
 
   get 'mobile/toggle', :to => 'home#toggle_mobile', :as => 'toggle_mobile'
 
-  # Help
+  # help
   get 'help' => 'help#getting_help', :as => 'faq_getting_help'
   
   scope path: "/help/faq", :controller => :help, :as => 'faq' do
@@ -222,6 +222,7 @@ Diaspora::Application.routes.draw do
     get :resharing_posts
     get :sharing
     get :tags
+    get :faq
   end
 
   #Protocol Url