diff --git a/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.css b/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.css index e0501ffdf..50691392a 100644 --- a/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.css +++ b/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.css @@ -2,11 +2,9 @@ top: 0; position: fixed; background-color: white; + border-top: 1px solid #9e9e9e; + border-bottom: 1px solid #9e9e9e; } #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 index 4cf833fb3..3f6a62441 100644 --- a/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.less +++ b/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.less @@ -2,11 +2,9 @@ top: 0; position: fixed; background-color: white; + border-top: 1px solid #9e9e9e; + border-bottom: 1px solid #9e9e9e; } #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 index 152e1faf0..369fb45a3 100644 --- a/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.min.css +++ b/src/Orchard.Web/Modules/TinyMce/Assets/Less/orchard-tinymce.min.css @@ -1 +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 +#stickyContainer.sticky-top{top:0;position:fixed;background-color:#fff;border-top:1px solid #9e9e9e;border-bottom:1px solid #9e9e9e;}#stickyContainer.container-layout{width:100%;} \ No newline at end of file diff --git a/src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js b/src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js index aeb3f6c97..d178c28fd 100644 --- a/src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js +++ b/src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js @@ -34,51 +34,75 @@ tinyMCE.init({ $(document).bind("localization.ui.directionalitychanged", function(event, directionality) { editor.getBody().dir = directionality; }); + + // If the focused 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. + + editor.on('focus', function () { + var $contentArea = $(this.contentAreaContainer.parentElement); + stickyToolbar($contentArea); + }); + + editor.on('blur', function () { + var $contentArea = $(this.contentAreaContainer.parentElement); + var isAdded = false; + $contentArea.prepend($contentArea.find("div.mce-toolbar-grp")); + $contentArea.prepend($contentArea.find("div.mce-menubar")); + $("#stickyContainer").remove(); + $("#stickyPlaceholder").remove(); + }); + + function stickyToolbar($contentArea) { + var $container = $("
", { id: "stickyContainer", class: "container-layout" }); + + $contentArea.prepend($container); + $container.append($contentArea.find("div.mce-menubar")); + $container.append($contentArea.find("div.mce-toolbar-grp")); + + var $containerPosition = $container.offset(); + var $placeholder = $("", { id: "stickyPlaceholder" }); + var isAdded = false; + + if ($(window).scrollTop() >= $containerPosition.top && !isAdded) { + $container.addClass("sticky-top"); + $placeholder.insertBefore($container); + $container.width($placeholder.width()); + $placeholder.height($container.height()); + } + + $(window).scroll(function (event) { + var $statusbarPosition = $contentArea.find("div.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()); + }); + isAdded = true; + } else if ($(window).scrollTop() < $containerPosition.top && isAdded) { + $container.removeClass("sticky-top"); + $placeholder.remove(); + $(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(); + } + }); + } } }); -// 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/orchard-tinymce.css b/src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.css index bb0acd05e..4466db7ac 100644 --- a/src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.css +++ b/src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.css @@ -7,13 +7,11 @@ top: 0; position: fixed; background-color: white; + border-top: 1px solid #9e9e9e; + border-bottom: 1px solid #9e9e9e; } #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== */ +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9yY2hhcmQtdGlueW1jZS5jc3MiLCJvcmNoYXJkLXRpbnltY2UubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsQUNMQTtFQUNFLE9BQUE7RUFDQSxnQkFBQTtFQUNBLHdCQUFBO0VBQ0EsOEJBQUE7RUFDQSxpQ0FBQTtDRENEO0FDQ0Q7RUFDRSxZQUFBO0NEQ0QiLCJmaWxlIjoib3JjaGFyZC10aW55bWNlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIiNzdGlja3lDb250YWluZXIuc3RpY2t5LXRvcCB7XG4gIHRvcDogMDtcbiAgcG9zaXRpb246IGZpeGVkO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgYm9yZGVyLXRvcDogMXB4IHNvbGlkICM5ZTllOWU7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjOWU5ZTllO1xufVxuI3N0aWNreUNvbnRhaW5lci5jb250YWluZXItbGF5b3V0IHtcbiAgd2lkdGg6IDEwMCU7XG59XG4iLCLvu78jc3RpY2t5Q29udGFpbmVyLnN0aWNreS10b3Age1xyXG4gIHRvcDogMDtcclxuICBwb3NpdGlvbjogZml4ZWQ7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XHJcbiAgYm9yZGVyLXRvcDogMXB4IHNvbGlkICM5ZTllOWU7XHJcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICM5ZTllOWU7XHJcbn1cclxuI3N0aWNreUNvbnRhaW5lci5jb250YWluZXItbGF5b3V0IHtcclxuICB3aWR0aDogMTAwJTtcclxufVxyXG4iXSwic291cmNlUm9vdCI6Ii9zb3VyY2UvIn0= */ diff --git a/src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.min.css b/src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.min.css index a0cb9dd89..16003b576 100644 --- a/src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.min.css +++ b/src/Orchard.Web/Modules/TinyMce/Styles/orchard-tinymce.min.css @@ -1 +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 +#stickyContainer.sticky-top{top:0;position:fixed;background-color:#fff;border-top:1px solid #9e9e9e;border-bottom:1px solid #9e9e9e}#stickyContainer.container-layout{width:100%} \ No newline at end of file