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 @@ + + + + + + + + + + + + diff --git a/src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.css b/src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.css new file mode 100644 index 000000000..bb0acd05e --- /dev/null +++ b/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== */ diff --git a/src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.min.css b/src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.min.css new file mode 100644 index 000000000..a0cb9dd89 --- /dev/null +++ b/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} \ No newline at end of file diff --git a/src/Orchard.Web/Modules/TinyMce/TinyMce.csproj b/src/Orchard.Web/Modules/TinyMce/TinyMce.csproj index 9b47ca460..85b983fca 100644 --- a/src/Orchard.Web/Modules/TinyMce/TinyMce.csproj +++ b/src/Orchard.Web/Modules/TinyMce/TinyMce.csproj @@ -88,6 +88,12 @@ + + orchard-tinymce.less + + + orchard-tinymce.css + @@ -258,6 +264,7 @@ + @@ -305,6 +312,15 @@ + + + Designer + + + + + + 10.0 $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion) diff --git a/src/Orchard.Web/Modules/TinyMce/Views/Body-Html.Editor.cshtml b/src/Orchard.Web/Modules/TinyMce/Views/Body-Html.Editor.cshtml index 9a06658b1..42ffeddcf 100644 --- a/src/Orchard.Web/Modules/TinyMce/Views/Body-Html.Editor.cshtml +++ b/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,