Stream Name to Content Editable.

This changes the stream name component to be content editable.

static/js/click_handlers.js

@@ -423,9 +423,8 @@ $(function () {
 
     (function () {
         var map = {
-            ".stream-description-editable": function (e) {
-                subs.change_stream_description(e);
-            },
+            ".stream-description-editable": subs.change_stream_description,
+            ".stream-name-editable": subs.change_stream_name
         };
 
         $(document).on("keydown", ".editable-section", function (e) {
@@ -461,9 +460,13 @@ $(function () {
                 edit_area.text(edit_area.attr("data-prev-text"));
                 $(this).html("");
             } else {
-                $(edit_area).attr("data-prev-text", edit_area.text().trim());
                 $("[data-finish-editing='" + selector + "']").show();
-                edit_area.attr("contenteditable", true).focus().select();
+
+                edit_area.attr("data-prev-text", edit_area.text().trim())
+                    .attr("contenteditable", true);
+
+                place_caret_at_end(edit_area[0]);
+
                 $(this).html("×");
             }
         });

static/js/subs.js

@@ -198,7 +198,7 @@ function update_stream_name(stream_id, new_name) {
     // Update the stream settings
     var sub_settings = settings_for_sub(stream_data.get_sub_by_id(stream_id));
     sub_settings.find(".email-address").text(sub.email_address);
-    sub_settings.find(".stream-name").text(new_name);
+    sub_settings.find(".stream-name-editable").text(new_name);
 
     // Update the subscriptions page
     var sub_row = $(".stream-row[data-stream-id='" + sub.stream_id + "']");
@@ -690,7 +690,7 @@ exports.update_subscription_properties = function (stream_name, property, value)
         update_stream_name(sub.stream_id, value);
         break;
     case 'description':
-        exports.update_stream_description(sub, value);
+        update_stream_description(sub, value);
         break;
     case 'email_address':
         sub.email_address = value;
@@ -875,6 +875,32 @@ exports.change_stream_description = function (e) {
     });
 };
 
+exports.change_stream_name = function (e) {
+    e.preventDefault();
+    var sub_settings = $(e.target).closest('.subscription_settings');
+    var stream_id = $(e.target).closest(".subscription_settings").attr("data-stream-id");
+    var sub = stream_data.get_sub_by_id(stream_id);
+    var new_name_box = sub_settings.find('.stream-name-editable');
+    var new_name = $.trim(new_name_box.text());
+
+    $("#subscriptions-status").hide();
+
+    channel.patch({
+        // Stream names might contain unsafe characters so we must encode it first.
+        url: "/json/streams/" + stream_id,
+        data: {new_name: JSON.stringify(new_name)},
+        success: function () {
+            new_name_box.val('');
+            ui.report_success(i18n.t("The stream has been renamed!"), $("#subscriptions-status "),
+                              'subscriptions-status');
+        },
+        error: function (xhr) {
+            ui.report_error(i18n.t("Error renaming stream"), xhr,
+                            $("#subscriptions-status"), 'subscriptions-status');
+        }
+    });
+};
+
 $(function () {
 
     stream_data.initialize_from_page_params();
@@ -1253,30 +1279,6 @@ $(function () {
                                         removal_failure);
     });
 
-    $("#subscriptions_table").on("submit", ".rename-stream form", function (e) {
-        e.preventDefault();
-        var sub_settings = $(e.target).closest('.subscription_settings');
-        var stream_id = $(e.target).closest(".subscription_settings").attr("data-stream-id");
-        var new_name_box = sub_settings.find('input[name="new-name"]');
-        var new_name = $.trim(new_name_box.val());
-
-        $("#subscriptions-status").hide();
-
-        channel.patch({
-            url: "/json/streams/" + stream_id,
-            data: {new_name: JSON.stringify(new_name)},
-            success: function () {
-                new_name_box.val('');
-                ui.report_success(i18n.t("The stream has been renamed!"), $("#subscriptions-status "),
-                                  'subscriptions-status');
-            },
-            error: function (xhr) {
-                ui.report_error(i18n.t("Error renaming stream"), xhr,
-                                $("#subscriptions-status"), 'subscriptions-status');
-            },
-        });
-    });
-
     function redraw_privacy_related_stuff(sub_row, sub) {
         var stream_settings = settings_for_sub(sub);
         var html;

static/templates/subscription_settings.handlebars

@@ -10,7 +10,11 @@
     <div class="large-icon hash" style="color: {{color}}"></div>
     {{/if}}
     <div class="stream-name">
-      {{name}}
+      <span class="stream-name-editable editable-section">{{name}}</span>
+      {{#if is_admin}}
+        <span class="editable" data-make-editable=".stream-name-editable"></span>
+        <span class="checkmark" data-finish-editing=".stream-name-editable">✓</span>
+      {{/if}}
     </div>
     <button class="button small white rounded subscribe-button sub_unsub_button {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button">
         {{#if subscribed }}Unsubscribe{{else}}Subscribe{{/if}}</button>
@@ -77,12 +81,6 @@
   {{#if is_admin}}
     <div class="admin-settings">
       <div class="sub_settings_title">{{t "Administrator settings" }}</div>
-      <div class="rename-stream">
-        <form class="form-inline">
-          <input type="text" name="new-name" value="" class="input-block new-stream-name" tabindex="-1" />
-          <input type="submit" name="rename" value="{{t 'Rename stream' }}" class="btn btn-danger stream-rename-button" tabindex="-1" />
-        </form>
-      </div>
       <div class="change-stream-privacy">
         {{partial "change_stream_privacy"}}
       </div>