The TinyMce toolbar is now always visible in the editor, even if scrolled down, fixes #5769

src/Orchard.Web/Modules/TinyMce/Assets.json

@@ -0,0 +1,8 @@
+[
+    {
+        "inputs": [
+            "Assets/Less/orchard-tinymce.less"
+        ],
+        "output": "Styles/orchard-tinymce.css"
+    }
+]

src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.css

@@ -0,0 +1,12 @@
+#stickyContainer.sticky-top {
+  top: 0;
+  position: fixed;
+  background-color: white;
+}
+#stickyContainer.container-layout {
+  width: 100%;
+}
+#stickyContainer.sticky-container-layout {
+  border-top: 1px solid #9e9e9e;
+  border-bottom: 1px solid #9e9e9e;
+}

src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.less

@@ -0,0 +1,12 @@
+#stickyContainer.sticky-top {
+  top: 0;
+  position: fixed;
+  background-color: white;
+}
+#stickyContainer.container-layout {
+  width: 100%;
+}
+#stickyContainer.sticky-container-layout {
+  border-top: 1px solid #9e9e9e;
+  border-bottom: 1px solid #9e9e9e;
+}

src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.min.css

@@ -0,0 +1 @@
+#stickyContainer.sticky-top{top:0;position:fixed;background-color:#fff;}#stickyContainer.container-layout{width:100%;}#stickyContainer.sticky-container-layout{border-top:1px solid #9e9e9e;border-bottom:1px solid #9e9e9e;}

src/Orchard.Web/Modules/TinyMce/ResourceManifest.cs

@@ -6,6 +6,7 @@ namespace TinyMce {
             var manifest = builder.Add();
             manifest.DefineScript("TinyMce").SetUrl("tinymce.min.js").SetVersion("4.1.6").SetDependencies("jQuery");
             manifest.DefineScript("OrchardTinyMce").SetUrl("orchard-tinymce.js").SetDependencies("TinyMce");
+            manifest.DefineStyle("OrchardTinyMce").SetUrl("orchard-tinymce.css");
         }
     }
 }

src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js

@@ -35,4 +35,50 @@ tinyMCE.init({
             editor.getBody().dir = directionality;
         });
     }
-});
+});
+
+// If the editable area is taller than the window, make the menu and the toolbox sticky-positioned within the editor
+// to help the user avoid excessive vertical scrolling.
+// There is a built-in fixed_toolbar_container option in the TinyMCE, but we can't use it, because it is only
+// available if the selector is a DIV with inline mode.
+
+$(window).load(function () {
+
+    var $container = $("<div/>", { id: "stickyContainer", class: "container-layout" });
+    $(".mce-stack-layout:first").prepend($container);
+    $container.append($(".mce-menubar"));
+    $container.append($(".mce-toolbar-grp"));
+
+    var containerPosition = $container.get(0).getBoundingClientRect();
+    var $placeholder = $("<div/>");
+    var isAdded = false;
+
+    $(window).scroll(function (event) {
+        var $statusbarPosition = $(".mce-statusbar").offset();
+        if ($(window).scrollTop() >= containerPosition.top && !isAdded) {
+            $container.addClass("sticky-top");
+            $placeholder.insertBefore($container);
+            $container.width($placeholder.width());
+            $placeholder.height($container.height());
+            $(window).on("resize", function () {
+                $container.width($placeholder.width());
+                $placeholder.height($container.height());
+            });
+            $container.addClass("sticky-container-layout");
+            isAdded = true;
+        } else if ($(window).scrollTop() < containerPosition.top && isAdded) {
+            $container.removeClass("sticky-top");
+            $placeholder.remove();
+            $container.removeClass("sticky-container-layout");
+            $(window).on("resize", function () {
+                $container.width("100%");
+            });
+            isAdded = false;
+        }
+        if ($(window).scrollTop() >= ($statusbarPosition.top - $container.height())) {
+            $container.hide();
+        } else if ($(window).scrollTop() < ($statusbarPosition.top - $container.height()) && isAdded) {
+            $container.show();
+        }
+    });
+});

src/Orchard.Web/Modules/TinyMce/Styles/Web.config

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+    <system.webServer>
+        <staticContent>
+            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
+        </staticContent>
+        <handlers accessPolicy="Script,Read">
+            <!-- For any request to a file exists on disk, return it via native http module. AccessPolicy="Script" above is to allow for a managed 404 page. -->
+            <add name="StaticFile" path="*" verb="*" modules="StaticFileModule" preCondition="integratedMode" resourceType="File" requireAccess="Read" />
+        </handlers>
+    </system.webServer>
+</configuration>

src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.css

@@ -0,0 +1,19 @@
+/*
+** NOTE: This file is generated by Gulp and should not be edited directly!
+** Any changes made directly to this file will be overwritten next time its asset group is processed by Gulp.
+*/
+
+#stickyContainer.sticky-top {
+  top: 0;
+  position: fixed;
+  background-color: white;
+}
+#stickyContainer.container-layout {
+  width: 100%;
+}
+#stickyContainer.sticky-container-layout {
+  border-top: 1px solid #9e9e9e;
+  border-bottom: 1px solid #9e9e9e;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9yY2hhcmQtdGlueW1jZS5jc3MiLCJvcmNoYXJkLXRpbnltY2UubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsQUNMQTtFQUNFLE9BQUE7RUFDQSxnQkFBQTtFQUNBLHdCQUFBO0NEQ0Q7QUNDRDtFQUNFLFlBQUE7Q0RDRDtBQ0NEO0VBQ0UsOEJBQUE7RUFDQSxpQ0FBQTtDRENEIiwiZmlsZSI6Im9yY2hhcmQtdGlueW1jZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIjc3RpY2t5Q29udGFpbmVyLnN0aWNreS10b3Age1xuICB0b3A6IDA7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG59XG4jc3RpY2t5Q29udGFpbmVyLmNvbnRhaW5lci1sYXlvdXQge1xuICB3aWR0aDogMTAwJTtcbn1cbiNzdGlja3lDb250YWluZXIuc3RpY2t5LWNvbnRhaW5lci1sYXlvdXQge1xuICBib3JkZXItdG9wOiAxcHggc29saWQgIzllOWU5ZTtcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICM5ZTllOWU7XG59XG4iLCLvu78jc3RpY2t5Q29udGFpbmVyLnN0aWNreS10b3Age1xyXG4gIHRvcDogMDtcclxuICBwb3NpdGlvbjogZml4ZWQ7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XHJcbn1cclxuI3N0aWNreUNvbnRhaW5lci5jb250YWluZXItbGF5b3V0IHtcclxuICB3aWR0aDogMTAwJTtcclxufVxyXG4jc3RpY2t5Q29udGFpbmVyLnN0aWNreS1jb250YWluZXItbGF5b3V0IHtcclxuICBib3JkZXItdG9wOiAxcHggc29saWQgIzllOWU5ZTtcclxuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgIzllOWU5ZTtcclxufSJdLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ== */

src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.min.css

@@ -0,0 +1 @@
+#stickyContainer.sticky-top{top:0;position:fixed;background-color:#fff}#stickyContainer.container-layout{width:100%}#stickyContainer.sticky-container-layout{border-top:1px solid #9e9e9e;border-bottom:1px solid #9e9e9e}

src/Orchard.Web/Modules/TinyMce/TinyMce.csproj

@@ -88,6 +88,12 @@
     <Reference Include="System.Xml.Linq" />
   </ItemGroup>
   <ItemGroup>
+    <Content Include="Assets\Less\orchard-tinymce.css">
+      <DependentUpon>orchard-tinymce.less</DependentUpon>
+    </Content>
+    <Content Include="Assets\Less\orchard-tinymce.min.css">
+      <DependentUpon>orchard-tinymce.css</DependentUpon>
+    </Content>
     <Content Include="Module.txt" />
     <Content Include="Scripts\langs\ar.js" />
     <Content Include="Scripts\langs\ar_SA.js" />
@@ -258,6 +264,7 @@
     <Compile Include="Services\TinyMceShapeDisplayEvent.cs" />
   </ItemGroup>
   <ItemGroup>
+    <Content Include="Styles\orchard-tinymce.css" />
     <Content Include="Views\Body-Html.Editor.cshtml" />
   </ItemGroup>
   <ItemGroup>
@@ -305,6 +312,15 @@
   <ItemGroup>
     <Content Include="packages.config" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Styles\Web.config">
+      <SubType>Designer</SubType>
+    </Content>
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Assets.json" />
+    <Content Include="Assets\Less\orchard-tinymce.less" />
+  </ItemGroup>
   <PropertyGroup>
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
     <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>

src/Orchard.Web/Modules/TinyMce/Views/Body-Html.Editor.cshtml

@@ -18,6 +18,7 @@
     Script.Require("OrchardTinyMce");
     Script.Require("jQueryColorBox");
     Style.Require("jQueryColorBox");
+    Style.Require("OrchardTinyMce");
 }
 
 @Html.TextArea("Text", (string)Model.Text, 25, 80,