diff --git a/src/Orchard.Web/Modules/TinyMce/Assets.json b/src/Orchard.Web/Modules/TinyMce/Assets.json new file mode 100644 index 000000000..c2eab346d --- /dev/null +++ b/src/Orchard.Web/Modules/TinyMce/Assets.json @@ -0,0 +1,8 @@ +[ + { + "inputs": [ + "Assets/Less/orchard-tinymce.less" + ], + "output": "Styles/orchard-tinymce.css" + } +] \ No newline at end of file diff --git a/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.css b/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.css new file mode 100644 index 000000000..e0501ffdf --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.less b/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.less new file mode 100644 index 000000000..4cf833fb3 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.min.css b/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.min.css new file mode 100644 index 000000000..152e1faf0 --- /dev/null +++ b/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;} \ No newline at end of file diff --git a/src/Orchard.Web/Modules/TinyMce/ResourceManifest.cs b/src/Orchard.Web/Modules/TinyMce/ResourceManifest.cs index a1c938388..9b89b8092 100644 --- a/src/Orchard.Web/Modules/TinyMce/ResourceManifest.cs +++ b/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"); } } } diff --git a/src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js b/src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js index 63e5a4927..aeb3f6c97 100644 --- a/src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js +++ b/src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js @@ -35,4 +35,50 @@ tinyMCE.init({ editor.getBody().dir = directionality; }); } -}); \ No newline at end of file +}); + +// 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 = $("
", { 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 = $(""); + 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(); + } + }); +}); diff --git a/src/Orchard.Web/Modules/TinyMce/Styles/Web.config b/src/Orchard.Web/Modules/TinyMce/Styles/Web.config new file mode 100644 index 000000000..93eab9a73 --- /dev/null +++ b/src/Orchard.Web/Modules/TinyMce/Styles/Web.config @@ -0,0 +1,12 @@ + +