From 9927489f4e318ad197b75f377a5642d22ed2fb54 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Thu, 13 Apr 2017 16:21:46 -0400
Subject: [PATCH] FEATURE: auto focus text editor when editing themes

---
 .../admin/components/ace-editor.js.es6        | 20 +++++++++++++++++++
 .../admin-customize-themes-edit.js.es6        |  5 +++++
 .../routes/admin-customize-themes-edit.js.es6 |  1 -
 .../admin/templates/customize-themes-edit.hbs |  2 +-
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/admin/components/ace-editor.js.es6 b/app/assets/javascripts/admin/components/ace-editor.js.es6
index 3c1d12ffe9c..b54f7b389c0 100644
--- a/app/assets/javascripts/admin/components/ace-editor.js.es6
+++ b/app/assets/javascripts/admin/components/ace-editor.js.es6
@@ -7,6 +7,13 @@ export default Ember.Component.extend({
   _editor: null,
   _skipContentChangeEvent: null,
 
+  @observes('editorId')
+  editorIdChanged() {
+    if (this.get('autofocus')) {
+      this.send('focus');
+    }
+  },
+
   @observes('content')
   contentChanged() {
     if (this._editor && !this._skipContentChangeEvent) {
@@ -63,7 +70,20 @@ export default Ember.Component.extend({
           // xxx: don't run during qunit tests
           this.appEvents.on('ace:resize', self, self.resize);
         }
+
+        if (this.get("autofocus")) {
+          this.send("focus");
+        }
       });
     });
+  },
+
+  actions: {
+    focus() {
+      if (this._editor) {
+        this._editor.focus();
+        this._editor.navigateFileEnd();
+      }
+    }
   }
 });
diff --git a/app/assets/javascripts/admin/controllers/admin-customize-themes-edit.js.es6 b/app/assets/javascripts/admin/controllers/admin-customize-themes-edit.js.es6
index 0c52b3c8dde..075eba3e943 100644
--- a/app/assets/javascripts/admin/controllers/admin-customize-themes-edit.js.es6
+++ b/app/assets/javascripts/admin/controllers/admin-customize-themes-edit.js.es6
@@ -38,6 +38,11 @@ export default Ember.Controller.extend({
     return fieldName && fieldName.indexOf("scss") > -1 ? "scss" : "html";
   },
 
+  @computed("fieldName", "currentTargetName")
+  editorId(fieldName, currentTarget) {
+    return fieldName + "|" + currentTarget;
+  },
+
   @computed("fieldName", "currentTargetName", "model")
   activeSection: {
     get(fieldName, target, model) {
diff --git a/app/assets/javascripts/admin/routes/admin-customize-themes-edit.js.es6 b/app/assets/javascripts/admin/routes/admin-customize-themes-edit.js.es6
index bd1e2c0dd4c..c1d3b225ffd 100644
--- a/app/assets/javascripts/admin/routes/admin-customize-themes-edit.js.es6
+++ b/app/assets/javascripts/admin/routes/admin-customize-themes-edit.js.es6
@@ -17,7 +17,6 @@ export default Ember.Route.extend({
     };
   },
 
-
   setupController(controller, wrapper) {
     controller.set("model", wrapper.model);
     controller.setTargetName(wrapper.target || "common");
diff --git a/app/assets/javascripts/admin/templates/customize-themes-edit.hbs b/app/assets/javascripts/admin/templates/customize-themes-edit.hbs
index fbdafdd4139..be9ef682f47 100644
--- a/app/assets/javascripts/admin/templates/customize-themes-edit.hbs
+++ b/app/assets/javascripts/admin/templates/customize-themes-edit.hbs
@@ -42,7 +42,7 @@
 
     <div>
       <div class='custom-ace-gutter'></div>
-      {{ace-editor content=activeSection mode=activeSectionMode}}
+      {{ace-editor content=activeSection editorId=editorId mode=activeSectionMode autofocus="true"}}
     </div>
 
     <div class='admin-footer'>