From 4c97c689e9a13b955dd247b6eb51e1039b9581cd Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 22 Dec 2016 14:06:23 +0100
Subject: [PATCH] Fixes: U4-9199 Grid RTE (rich text editor/ tinyMCE) does not
 have a max height, causing the user to have to scroll up to see RTE menu
 buttons

---
 .../components/grid/grid.rte.directive.js     | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/grid/grid.rte.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/grid/grid.rte.directive.js
index 5dd7d266df..60bb4957ae 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/grid/grid.rte.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/grid/grid.rte.directive.js
@@ -172,6 +172,55 @@ angular.module("umbraco.directives")
 
                                 });
 
+                                // pin toolbar to top of screen if we have focus and it scrolls off the screen
+                                var pinToolbar = function () {
+
+                                    var _toolbar = $(editor.editorContainer).find(".mce-toolbar");
+                                    var toolbarHeight = _toolbar.height();
+
+                                    var _tinyMce = $(editor.editorContainer);
+                                    var tinyMceRect = _tinyMce[0].getBoundingClientRect();
+                                    var tinyMceTop = tinyMceRect.top;
+                                    var tinyMceBottom = tinyMceRect.bottom;
+                                    var tinyMceWidth = tinyMceRect.width;
+
+                                    var _tinyMceEditArea = _tinyMce.find(".mce-edit-area");
+
+                                    // set padding in top of mce so the content does not "jump" up
+                                    _tinyMceEditArea.css("padding-top", toolbarHeight);
+
+                                    if (tinyMceTop < 160 && ((160 + toolbarHeight) < tinyMceBottom)) {
+                                        _toolbar
+                                            .css("visibility", "visible")
+                                            .css("position", "fixed")
+                                            .css("top", "160px")
+                                            .css("margin-top", "0")
+                                            .css("width", tinyMceWidth);
+                                    } else {
+                                        _toolbar
+                                            .css("visibility", "visible")
+                                            .css("position", "absolute")
+                                            .css("top", "auto")
+                                            .css("margin-top", "0")
+                                            .css("width", tinyMceWidth);
+                                    }
+                                    
+                                };
+
+                                // unpin toolbar to top of screen
+                                var unpinToolbar = function() {
+
+                                    var _toolbar = $(editor.editorContainer).find(".mce-toolbar");
+                                    var _tinyMce = $(editor.editorContainer);
+                                    var _tinyMceEditArea = _tinyMce.find(".mce-edit-area");
+
+                                    // reset padding in top of mce so the content does not "jump" up
+                                    _tinyMceEditArea.css("padding-top", "0");
+                                        
+                                    _toolbar.css("position", "static");
+
+                                };
+
                                 //when we leave the editor (maybe)
                                 editor.on('blur', function (e) {
                                     editor.save();
@@ -185,6 +234,9 @@ angular.module("umbraco.directives")
                                             scope.onBlur();
                                         }
 
+                                        unpinToolbar();
+                                        $('.umb-panel-body').off('scroll', pinToolbar);
+
                                     });
                                 });
 
@@ -196,6 +248,9 @@ angular.module("umbraco.directives")
                                             scope.onFocus();
                                         }
 
+                                        pinToolbar();
+                                        $('.umb-panel-body').on('scroll', pinToolbar);
+
                                     });
                                 });
 
@@ -207,6 +262,9 @@ angular.module("umbraco.directives")
                                             scope.onClick();
                                         }
 
+                                        pinToolbar();
+                                        $('.umb-panel-body').on('scroll', pinToolbar);
+
                                     });
                                 });