diff --git a/modules/backend/formwidgets/RichEditor.php b/modules/backend/formwidgets/RichEditor.php index 87e8e4f64..e205ee05e 100644 --- a/modules/backend/formwidgets/RichEditor.php +++ b/modules/backend/formwidgets/RichEditor.php @@ -50,7 +50,7 @@ class RichEditor extends FormWidgetBase public function loadAssets() { // Plugins - // $this->addJs('js/plugin.fullscreen.js', 'core'); + $this->addJs('js/plugin.fullscreen.js', 'core'); // Redactor $this->addCss('vendor/redactor/redactor.css', 'core'); diff --git a/modules/backend/formwidgets/richeditor/assets/css/iframe.css b/modules/backend/formwidgets/richeditor/assets/css/iframe.css index 9a6c3408d..b4d4c2675 100644 --- a/modules/backend/formwidgets/richeditor/assets/css/iframe.css +++ b/modules/backend/formwidgets/richeditor/assets/css/iframe.css @@ -1,14 +1,14 @@ html { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } body { - margin: 0; - padding: 10px; - font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; - color: #333; + margin: 0; + padding: 10px; + font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; + color: #333; } - +/* code, pre { font-family: Menlo, Monaco, monospace, sans-serif; @@ -206,3 +206,197 @@ body.redactor_editor_wym { border: none !important; } +*/ +figure { + position: relative; +} +figcaption { + text-align: center; + line-height: 1.428571429; + font-size: 14px; +} +figure[data-type=table] { + clear: both; +} +figure[data-type=video] { + position: relative; + margin-bottom: 1.428571429; + text-align: center; + clear: both; +} +figure[data-type=video] p { + margin: 0; +} +figure[data-type=video].wy-figure-full:before { + position: relative; + padding-bottom: 51%; + width: 100%; + height: 0; + content: ""; + display: block; +} +figure[data-type=video].wy-figure-full iframe { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} +figure[data-type=image] { + position: relative; + margin-bottom: 1.428571429; +} +figure[data-type=image] .wy-figure-controls { + top: 0px; +} +figure[data-type=image] img { + width: 100%; +} +figure[data-type=image].wy-figure-large { + width: 100%; + clear: both; +} +figure[data-type=image].wy-figure-medium { + width: 50%; +} +figure[data-type=image].wy-figure-small { + width: 33%; +} +figure[data-type=quote] { + margin-bottom: 1.428571429; + margin-left: 1.428571429; + font-style: italic; + position: relative; + border-left: solid 5px #333333; + padding-left: 1.428571429; +} +figure[data-type=quote] figcaption { + font-weight: bold; + text-align: left; +} +figure[data-type=quote] .wy-figure-controls { + margin-left: -5px; +} +figure[data-type=quote].wy-figure-medium { + font-size: 20px; +} +figure[data-type=quote].wy-figure-large { + font-size: 24px; +} +figure[data-type=quote].wy-figure-right { + width: 33%; +} +figure[data-type=quote].wy-figure-left { + width: 33%; + border-left: none; + border-right: solid 5px #333333; + padding-left: 0; + padding-right: 1.428571429; + margin-left: 0; + margin-right: 1.428571429; +} +figure[data-type=quote].wy-figure-left .wy-figure-controls { + margin-left: 0; + margin-right: -5px; +} +figure[data-type=quote] cite { + display: block; + text-align: left; + font-weight: bold; +} +figure[data-type=quote] cite:before { + content: "\2014\00a0"; +} +figure[data-type=quote] cite:empty:before { + opacity: 0.4; + content: "\2014 Type to add citation (optional)"; +} +figure:hover .wy-figure-controls { + display: block; +} +.wy-figure-controls { + background: #555555; + padding: 0.35714285725; + position: absolute; + display: none; + min-width: 100%; + white-space: nowrap; + left: 0; + height: 37px; + top: -37px; + margin: 0 auto; + font-family: 'Open Sans', Arial, sans-serif; + border-bottom: solid 3px #3c3c3c; + line-height: 1.428571429; + font-style: normal; + z-index: 5; + text-align: center; +} +.wy-figure-controls span { + display: inline-block; + border: none; + background: none; + color: #fff; + vertical-align: top; + font-size: 14px; + width: 24px; + height: 24px; + line-height: 24px; + text-align: center; + cursor: pointer; +} +.wy-figure-controls span:hover { + background: rgba(255, 255, 255, 0.3); + color: #fff; +} +.wy-figure-controls span.on { + background: #fff; + color: #555555; +} +.wy-figure-controls span.wy-figure-controls-divider { + width: 1px; + background: #6f6f6f; + padding: 0; + margin: 0 2px; + cursor: normal; +} +.wy-figure-controls span.wy-figure-controls-small { + font-size: 50%; +} +.wy-figure-controls span.wy-figure-controls-medium { + font-size: 75%; +} +.wy-figure-controls span.wy-figure-controls-delete { + margin-left: 1.428571429; +} +.wy-figure-controls span.wy-figure-controls-delete:hover { + background: #ff0000; +} +.wy-figure-controls span.wy-figure-controls-table { + width: auto; + padding-left: 0.35714285725; + text-align: left; +} +.wy-figure-right { + float: right; + margin-left: 1.428571429; +} +.wy-figure-right .wy-figure-controls { + right: 0; +} +.wy-figure-left { + float: left; + margin-right: 1.428571429; +} +@media (max-width: 769px) { + figure[data-type=image] { + width: 100% !important; + float: none !important; + margin-left: 0; + margin-right: 0; + } + figure[data-type=video] iframe { + width: 100% !important; + height: auto !important; + } +} diff --git a/modules/backend/formwidgets/richeditor/assets/css/richeditor.css b/modules/backend/formwidgets/richeditor/assets/css/richeditor.css index f9c89328d..6ed5a102f 100644 --- a/modules/backend/formwidgets/richeditor/assets/css/richeditor.css +++ b/modules/backend/formwidgets/richeditor/assets/css/richeditor.css @@ -1,3 +1,7 @@ +.field-flush .field-richeditor, +.field-flush .field-richeditor.editor-focus { + border: none; +} .field-richeditor { border: 1px solid #e0e0e0; } @@ -11,63 +15,107 @@ .field-richeditor.editor-focus { border-color: #808c8d; } -.field-richeditor.size-tiny textarea { - height: 20px; +.field-richeditor.size-tiny .redactor_editor { + height: 20px !important; } -.field-richeditor.size-small textarea { - height: 70px; +.field-richeditor.size-small .redactor_editor { + height: 70px !important; } -.field-richeditor.size-large textarea { - height: 170px; +.field-richeditor.size-large .redactor_editor { + height: 170px !important; } -.field-richeditor.size-huge textarea { - height: 220px; +.field-richeditor.size-huge .redactor_editor { + height: 220px !important; } -.field-richeditor.size-giant textarea { - height: 320px; +.field-richeditor.size-giant .redactor_editor { + height: 320px !important; } -.field-richeditor .redactor_box { +.field-richeditor .redactor_box, +.redactor_box_fullscreen.redactor_box { border: none; } -.field-richeditor .redactor_box .redactor_toolbar { +.field-richeditor .redactor_box iframe, +.redactor_box_fullscreen.redactor_box iframe { + border: none; +} +.field-richeditor .redactor_box .redactor_toolbar, +.redactor_box_fullscreen.redactor_box .redactor_toolbar { border-top-right-radius: 3px; border-top-left-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; - background: #f6f6f6; - border-bottom: 1px solid #e0e0e0; + background: #dddddd; + border-bottom: none; -webkit-box-shadow: none; box-shadow: none; -} -.field-richeditor .redactor_box iframe { border: none; } -.field-richeditor.stretch .redactor_box { +.field-richeditor .redactor_box .redactor_toolbar li.redactor_btn_right, +.redactor_box_fullscreen.redactor_box .redactor_toolbar li.redactor_btn_right { + float: right; + margin-right: 2px; +} +.field-richeditor .redactor_box .redactor_toolbar li a, +.redactor_box_fullscreen.redactor_box .redactor_toolbar li a { + zoom: 1; + font-size: 14px; + color: #404040; + width: 20px; + line-height: 20px; + text-align: center; +} +.field-richeditor .redactor_box .redactor_toolbar li a:hover, +.redactor_box_fullscreen.redactor_box .redactor_toolbar li a:hover { + outline: none; + background-color: #999999; + color: #ffffff; +} +.field-richeditor .redactor_box .redactor_toolbar li a:active, +.redactor_box_fullscreen.redactor_box .redactor_toolbar li a:active, +.field-richeditor .redactor_box .redactor_toolbar li a.redactor_act, +.redactor_box_fullscreen.redactor_box .redactor_toolbar li a.redactor_act { + outline: none; + background-color: #404040; + color: #ffffff; +} +.field-richeditor .redactor_box.stretch .redactor_box, +.redactor_box_fullscreen.redactor_box.stretch .redactor_box { display: block; position: relative; height: 100%; width: 100%; overflow: hidden; } -.field-richeditor.stretch .redactor_box .redactor_toolbar { +.field-richeditor .redactor_box.stretch .redactor_box .redactor_toolbar, +.redactor_box_fullscreen.redactor_box.stretch .redactor_box .redactor_toolbar { display: block; border-bottom: none; position: absolute; top: 0; width: 100%; } -.field-richeditor.stretch .redactor_box .redactor_toolbar > li:first-child:after { - position: absolute; - content: ' '; - width: 100%; - height: 1px; - left: 0; - top: 32px; - background-color: #e0e0e0; -} -.field-richeditor.stretch .redactor_box iframe, -.field-richeditor.stretch .redactor_box textarea { +.field-richeditor .redactor_box.stretch .redactor_box iframe, +.redactor_box_fullscreen.redactor_box.stretch .redactor_box iframe, +.field-richeditor .redactor_box.stretch .redactor_box textarea, +.redactor_box_fullscreen.redactor_box.stretch .redactor_box textarea { display: block; position: absolute; - height: 100%!important; + height: 100% !important; +} +.redactor_box_fullscreen { + background: #fafafa; + overflow-y: scroll !important; +} +.redactor_box_fullscreen .redactor_editor { + max-width: 960px; + margin: 20px auto !important; + padding: 20px; +} +.redactor_box_fullscreen { + z-index: 1060 !important; +} +#redactor_modal_overlay, +#redactor_modal, +.redactor_dropdown { + z-index: 1061 !important; } diff --git a/modules/backend/formwidgets/richeditor/assets/js/plugin.fullscreen.js b/modules/backend/formwidgets/richeditor/assets/js/plugin.fullscreen.js new file mode 100644 index 000000000..e5d51f738 --- /dev/null +++ b/modules/backend/formwidgets/richeditor/assets/js/plugin.fullscreen.js @@ -0,0 +1,184 @@ +(function ($) { + 'use strict'; + + window.RedactorPlugins = window.RedactorPlugins || {}; + + window.RedactorPlugins.fullscreen = { + + init: function() { + + this.fullscreen = false + + this.buttonAdd('fullscreen', 'Fullscreen', $.proxy(this.toggleFullscreen, this)) + this.buttonGet('fullscreen').addClass('redactor_btn_fullscreen').removeClass('redactor-btn-image') + this.buttonGet('fullscreen').parent().addClass('redactor_btn_right') + + if (this.opts.fullscreen) + this.toggleFullscreen() + + }, + + toggleFullscreen: function() { + if (!this.fullscreen) + this.enableFullScreen() + else + this.disableFullScreen() + }, + + enableFullScreen: function() { + var html + + this.buttonChangeIcon('fullscreen', 'normalscreen') + this.buttonActive('fullscreen') + this.fullscreen = true + + if (this.opts.toolbarExternal) { + this.toolcss = {} + this.boxcss = {} + this.toolcss.width = this.$toolbar.css('width') + this.toolcss.top = this.$toolbar.css('top') + this.toolcss.position = this.$toolbar.css('position') + this.boxcss.top = this.$box.css('top') + } + + this.fsheight = this.$editor.height() + + if (this.opts.iframe) + this.fsheight = this.$frame.height() + + if (this.opts.maxHeight) + this.$editor.css('max-height', '') + + if (this.opts.iframe) + html = this.get() + + if (!this.$fullscreenPlaceholder) + this.$fullscreenPlaceholder = $('
') + + this.$fullscreenPlaceholder.insertAfter(this.$box) + + this.$box.appendTo(document.body) + + this.$box.addClass('redactor_box_fullscreen') + $('body, html').css('overflow', 'hidden') + + if (this.opts.iframe) + this.fullscreenIframe(html) + + this.fullScreenResize() + $(window).resize($.proxy(this.fullScreenResize, this)) + $(document).scrollTop(0, 0) + + this.focus() + this.observeStart() + }, + + disableFullScreen: function() { + var height + + this.buttonRemoveIcon('fullscreen', 'normalscreen') + this.buttonInactive('fullscreen') + this.fullscreen = false + + $(window).off('resize', $.proxy(this.fullScreenResize, this)) + $('body, html').css('overflow', '') + + this.$box.insertBefore(this.$fullscreenPlaceholder) + this.$fullscreenPlaceholder.remove() + + this.$box.removeClass('redactor_box_fullscreen').css({ width: 'auto', height: 'auto' }) + + if (this.opts.iframe) + html = this.$editor.html() + + if (this.opts.iframe) + this.fullscreenIframe(html) + else + this.sync() + + height = this.fsheight + if (this.opts.autoresize) + height = 'auto' + + if (this.opts.maxHeight) + this.$editor.css('max-height', this.opts.maxHeight) + + if (this.opts.toolbarExternal) { + this.$box.css('top', this.boxcss.top) + this.$toolbar.css({ + 'width': this.toolcss.width, + 'top': this.toolcss.top, + 'position': this.toolcss.position + }) + } + + if (!this.opts.iframe) + this.$editor.css('height', height) + else + this.$frame.css('height', height) + + this.$editor.css('height', height) + this.focus() + this.observeStart() + }, + + fullscreenIframe: function(html) { + this.$editor = this.$frame.contents().find('body') + this.$editor.attr({ + contenteditable: true, + dir: this.opts.direction + }); + + // Set document & window + if (this.$editor.get(0)) { + this.document = this.$editor.get(0).ownerDocument + this.window = this.document.defaultView || window + } + + // Iframe css + this.iframeAddCss() + + if (this.opts.fullpage) + this.setFullpageOnInit(html) + else + this.set(html) + + if (this.opts.wym) + this.$editor.addClass('redactor_editor_wym') + }, + + fullScreenResize: function() { + if (!this.fullscreen) + return false + + var pad = this.$editor.css('padding-top').replace('px', '') + + var toolbarHeight = this.$toolbar.height(), + height = $(window).height() - toolbarHeight + + this.$box.width($(window).width() - 2).height(height + toolbarHeight) + + if (this.opts.toolbarExternal) { + this.$toolbar.css({ + 'top': '0px', + 'position': 'absolute', + 'width': '100%' + }) + + this.$box.css('top', toolbarHeight + 'px') + } + + // if (!this.opts.iframe) { + // this.$editor.height(height - (pad * 2)) + // } + // else { + // setTimeout($.proxy(function() { + // this.$frame.height(height) + // }, this), 1) + // } + + // this.$editor.height(height) + } + }; + +}(jQuery)); \ No newline at end of file diff --git a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js index 928e3f1bc..8ba9855fc 100644 --- a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js +++ b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js @@ -44,6 +44,7 @@ */ var redactorOptions = { observeImages: false, + // autoresize: false, focusCallback: function() { self.$el.addClass('editor-focus') }, blurCallback: function() { self.$el.removeClass('editor-focus') }, initCallback: function() { self.build() }, @@ -54,16 +55,12 @@ } } - if (this.options.stylesheet) { - redactorOptions.iframe = true - redactorOptions.css = this.options.stylesheet - } - if (this.options.fullpage) { redactorOptions.fullpage = true } // redactorOptions.plugins = ['cleanup', 'fullscreen', 'figure', 'table', 'quote'] + redactorOptions.plugins = ['fullscreen'] this.$textarea.redactor(redactorOptions) } diff --git a/modules/backend/formwidgets/richeditor/assets/less/richeditor.less b/modules/backend/formwidgets/richeditor/assets/less/richeditor.less index 2ecec04b7..d9d9b87b4 100644 --- a/modules/backend/formwidgets/richeditor/assets/less/richeditor.less +++ b/modules/backend/formwidgets/richeditor/assets/less/richeditor.less @@ -1,12 +1,15 @@ @import "../../../../assets/less/core/boot.less"; @richeditor-toolbar-size: 30px; +@richeditor-zindex: 1060; +@richeditor-gutter: 20px; .field-flush .field-richeditor { &, &.editor-focus { border: none; } } + .field-richeditor { border: 1px solid @color-form-field-border; &, .redactor_box, .redactor_toolbar { @@ -17,19 +20,23 @@ border-color: @color-form-field-border-focus; } - &.size-tiny textarea { height: (@size-tiny - @richeditor-toolbar-size); } - &.size-small textarea { height: (@size-small - @richeditor-toolbar-size); } - &.size-large textarea { height: (@size-large - @richeditor-toolbar-size); } - &.size-huge textarea { height: (@size-huge - @richeditor-toolbar-size); } - &.size-giant textarea { height: (@size-giant - @richeditor-toolbar-size); } + &.size-tiny .redactor_editor { height: (@size-tiny - @richeditor-toolbar-size) !important; } + &.size-small .redactor_editor { height: (@size-small - @richeditor-toolbar-size) !important; } + &.size-large .redactor_editor { height: (@size-large - @richeditor-toolbar-size) !important; } + &.size-huge .redactor_editor { height: (@size-huge - @richeditor-toolbar-size) !important; } + &.size-giant .redactor_editor { height: (@size-giant - @richeditor-toolbar-size) !important; } +} - .redactor_box { +// +// Redactor Box +// + +.field-richeditor .redactor_box, +.redactor_box_fullscreen.redactor_box { + border: none; + iframe { border: none; - iframe { - border: none; - } } - .redactor_toolbar { .border-top-radius(3px); .border-bottom-radius(0); @@ -38,6 +45,11 @@ .box-shadow(none); border: none; + li.redactor_btn_right { + float: right; + margin-right: 2px; + } + li a { zoom: 1; font-size: 14px; @@ -77,10 +89,37 @@ iframe, textarea { display: block; position: absolute; - height: 100%!important; + height: 100% !important; } } } - } +// +// Fullscreen specific +// + +.redactor_box_fullscreen { + background: @color-body-bg; + overflow-y: scroll !important; + + .redactor_editor { + max-width: 960px; + margin: @richeditor-gutter auto !important; + padding: @richeditor-gutter; + } +} + +// +// zIndex +// + +.redactor_box_fullscreen { + z-index: @richeditor-zindex !important; +} + +#redactor_modal_overlay, +#redactor_modal, +.redactor_dropdown { + z-index: @richeditor-zindex + 1 !important; +} \ No newline at end of file diff --git a/modules/backend/formwidgets/richeditor/partials/_richeditor.htm b/modules/backend/formwidgets/richeditor/partials/_richeditor.htm index 20d04c351..1d831ae6e 100644 --- a/modules/backend/formwidgets/richeditor/partials/_richeditor.htm +++ b/modules/backend/formwidgets/richeditor/partials/_richeditor.htm @@ -4,7 +4,6 @@
data-fullpage="true" data-control="richeditor">