From a9d7309128605f4585ebe794735b5b9d499723dd Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Mon, 22 Jan 2018 18:08:13 +0100
Subject: [PATCH] Only scroll to element if focused from preview

With the former change of focusing the element on every click we get issues if the element body is longer than the viewport. We had this problem before, but as we now focus the element on each click this is getting more annoying.

Solved by only scrolling the element editor into view when focusing the element from within the preview frame.
---
 .../alchemy/alchemy.element_editors.js.coffee         | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee b/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee
index 9c1cfdf473..bfdc4db2e8 100644
--- a/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee
+++ b/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee
@@ -64,7 +64,6 @@ Alchemy.ElementEditors =
     # If we have folded parents we need to unfold each of them
     # and then finally scroll to or unfold ourself
     $folded_parents = $element.parents('.element-editor.folded')
-    @selectElement($element)
     if $folded_parents.length > 0
       @unfoldParents $folded_parents, =>
         @scrollToOrUnfold(element_id)
@@ -82,10 +81,10 @@ Alchemy.ElementEditors =
 
   # Marks an element as selected in the element window and scrolls to it.
   #
-  selectElement: ($element) ->
+  selectElement: ($element, scroll = false) ->
     $("#element_area .element-editor").not($element[0]).removeClass("selected")
     $element.addClass("selected")
-    @scrollToElement($element)
+    @scrollToElement($element) if scroll
     return
 
   # Unfolds given parents until the last one is reached, then calls callback
@@ -108,9 +107,10 @@ Alchemy.ElementEditors =
   #
   scrollToOrUnfold: (element_id, callback) ->
     $el = $("#element_#{element_id}")
-    @selectElement($el)
     if $el.hasClass("folded")
       @toggleFold(element_id, callback)
+    else
+      @selectElement($el, true)
     return
 
   # Scrolls the element window to given element editor dom element.
@@ -118,7 +118,7 @@ Alchemy.ElementEditors =
   scrollToElement: (el) ->
     $("#element_area").scrollTo el,
       duration: 400
-      offset: -10
+      offset: -6
 
   # Expands or folds a element editor
   #
@@ -205,6 +205,7 @@ Alchemy.ElementEditors =
     id = $(e.currentTarget).data('element-toggle')
     @toggle(id)
     e.preventDefault()
+    e.stopPropagation()
     return
 
   # Handles the custom 'FocusElementEditor.Alchemy' event.