diff --git a/assets/css/multilingual.css b/assets/css/multilingual.css index 3307979f..1b2bc38c 100644 --- a/assets/css/multilingual.css +++ b/assets/css/multilingual.css @@ -1,26 +1,18 @@ .field-multilingual{position:relative} -.field-multilingual .ml-btn{background:transparent;position:absolute;color:#7b7b7b;text-transform:uppercase;font-size:11px;letter-spacing:1px;width:44px;padding-right:0;-webkit-box-shadow:none;box-shadow:none;text-shadow:none;z-index:2} +.field-multilingual .ml-btn{z-index:2;position:absolute;top:1px;bottom:1px;right:1px;width:auto;max-width:44px;max-height:38px;color:#7b7b7b;background-color:#F8F6F3;box-shadow:none;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin:0 !important;padding:0 12px;border-top-left-radius:0;border-bottom-left-radius:0;transition:color 420ms ease} .field-multilingual .ml-btn:hover{color:#555} -.field-multilingual.field-multilingual-text .form-control{padding-right:44px} -.field-multilingual.field-multilingual-text .ml-btn{right:4px;top:50%;margin-top:-44px;height:88px} -.field-multilingual.field-multilingual-textarea textarea{padding-right:30px} -.field-multilingual.field-multilingual-textarea .ml-btn{right:13px;top:5px;width:24px;text-align:right;padding-left:4px} -.field-multilingual.field-multilingual-textarea .ml-dropdown-menu{top:39px;right:1px} -.field-multilingual.field-multilingual-richeditor .ml-btn{top:43px;right:25px;text-align:right} -.field-multilingual.field-multilingual-richeditor .ml-dropdown-menu{top:74px;right:12px} -.field-multilingual.field-multilingual-markdowneditor .ml-btn{top:43px;right:25px;text-align:right} -.field-multilingual.field-multilingual-markdowneditor .ml-dropdown-menu{top:74px !important;right:12px} -.field-multilingual.field-multilingual-repeater .ml-btn, -.field-multilingual.field-multilingual-nestedform .ml-btn{top:-27px;right:11px;text-align:right} +.field-multilingual.field-multilingual-repeater .ml-btn{top:3px;bottom:auto;height:auto;transform:translateY(-100%);border-radius:.375rem} +.field-multilingual.field-multilingual-textarea textarea{padding-right:2rem} +.field-multilingual.field-multilingual-textarea .ml-btn{border-bottom-right-radius:0;border-bottom-left-radius:.375rem} +.field-multilingual.field-multilingual-textarea .ml-dropdown-menu{top:28px;right:1px} +.field-multilingual.field-multilingual-richeditor .ml-btn{border-radius:0;border-bottom-left-radius:.375rem} +.field-multilingual.field-multilingual-richeditor .ml-dropdown-menu{top:28px;right:1px} +.field-multilingual.field-multilingual-markdowneditor .mode-tab .editor-write{padding-right:2rem} +.field-multilingual.field-multilingual-markdowneditor .mode-split .editor-preview{padding-right:2rem} +.field-multilingual.field-multilingual-markdowneditor .editor-code{padding-right:inherit} +.field-multilingual.field-multilingual-markdowneditor .ml-btn{border-radius:0;border-bottom-left-radius:.375rem} +.field-multilingual.field-multilingual-markdowneditor .ml-dropdown-menu{top:28px;right:1px} .field-multilingual.field-multilingual-repeater .ml-dropdown-menu, -.field-multilingual.field-multilingual-nestedform .ml-dropdown-menu{top:0;right:0} -.field-multilingual.field-multilingual-repeater.is-empty, -.field-multilingual.field-multilingual-nestedform.is-empty{padding-top:5px} -.field-multilingual.field-multilingual-repeater.is-empty .ml-btn, -.field-multilingual.field-multilingual-nestedform.is-empty .ml-btn{top:-10px;right:5px;text-align:right} -.field-multilingual.field-multilingual-repeater.is-empty .ml-dropdown-menu, -.field-multilingual.field-multilingual-nestedform.is-empty .ml-dropdown-menu{top:15px;right:-7px} -.fancy-layout .form-tabless-fields .field-multilingual .ml-btn{color:rgba(255,255,255,0.8)} -.fancy-layout .form-tabless-fields .field-multilingual .ml-btn:hover{color:#fff} -.fancy-layout .field-multilingual-text input.form-control{padding-right:44px} -.help-block.before-field + .field-multilingual.field-multilingual-textarea .ml-btn{top:-41px} \ No newline at end of file +.field-multilingual.field-multilingual-nestedform .ml-dropdown-menu{top:2px;right:0} +.field-multilingual.field-multilingual-mediafinder .ml-btn{border-radius:.375rem} +.fancy-layout .form-tabless-fields .field-multilingual .ml-btn{background-color:rgba(248,246,243,0.75)} diff --git a/assets/less/multilingual.less b/assets/less/multilingual.less index 87b77681..a037c667 100644 --- a/assets/less/multilingual.less +++ b/assets/less/multilingual.less @@ -6,107 +6,108 @@ position: relative; .ml-btn { - background: transparent; + z-index: 2; position: absolute; + top: 1px; + bottom: 1px; + right: 1px; + + width: auto; + max-width: 44px; + max-height: 38px; + color: lighten(@multilingual-btn-color, 15%); - text-transform: uppercase; + background-color: #F8F6F3; + box-shadow: none; + font-size: 11px; letter-spacing: 1px; - width: 44px; - padding-right: 0; - .box-shadow(none); - text-shadow: none; - z-index: 2; + text-transform: uppercase; + + margin: 0 !important; + padding: 0 12px; + + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + transition: color 420ms ease; &:hover { color: @multilingual-btn-color; } } - &.field-multilingual-text { - .form-control { - padding-right: 44px; - } - .ml-btn { - right: 4px; - top: 50%; - margin-top: -44px; - height: 88px; - } + &.field-multilingual-repeater .ml-btn { + top: 3px; + bottom: auto; + height: auto; + transform: translateY(-100%); + border-radius: .375rem; } &.field-multilingual-textarea { textarea { - // increase padding on the right so that the textarea content does not overlap with the language button - padding-right: 30px; + padding-right: 2rem; } .ml-btn { - right: 13px; - top: 5px; - width: 24px; - text-align: right; - padding-left: 4px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: .375rem; } - + .ml-dropdown-menu { - top: 39px; + top: 28px; right: 1px; } } &.field-multilingual-richeditor { .ml-btn { - top: 43px; - right: 25px; - text-align: right; + border-radius: 0; + border-bottom-left-radius: .375rem; } .ml-dropdown-menu { - top: 74px; - right: 12px; + top: 28px; + right: 1px; } } &.field-multilingual-markdowneditor { + .mode-tab .editor-write { + padding-right: 2rem; + } + + .mode-split .editor-preview { + padding-right: 2rem; + } + + .editor-code { + padding-right: inherit; + } + .ml-btn { - top: 43px; - right: 25px; - text-align: right; + border-radius: 0; + border-bottom-left-radius: .375rem; } .ml-dropdown-menu { - top: 74px !important; - right: 12px; + top: 28px; + right: 1px; } } &.field-multilingual-repeater, &.field-multilingual-nestedform { - .ml-btn { - top: -27px; - right: 11px; - text-align: right; - } - .ml-dropdown-menu { - top: 0; + top: 2px; right: 0; } + } - &.is-empty { - padding-top: 5px; - - .ml-btn { - top: -10px; - right: 5px; - text-align: right; - } - - .ml-dropdown-menu { - top: 15px; - right: -7px; - } + &.field-multilingual-mediafinder { + .ml-btn { + border-radius: .375rem; } } } @@ -114,20 +115,14 @@ .fancy-layout { .form-tabless-fields .field-multilingual { .ml-btn { - color: rgba(255,255,255,.8); - - &:hover { - color: rgba(255,255,255,1); - } + background-color: rgba(248, 246, 243, 0.75) } } - .field-multilingual-text input.form-control { - padding-right: 44px; - } } -.help-block.before-field + .field-multilingual.field-multilingual-textarea { - .ml-btn { - top: -41px; - } -} +// ?? CHECK THIS +// .help-block.before-field + .field-multilingual.field-multilingual-textarea { +// .ml-btn { +// top: -41px; +// } +// } diff --git a/formwidgets/MLTextarea.php b/formwidgets/MLTextarea.php index 70dfa2b5..48884a19 100644 --- a/formwidgets/MLTextarea.php +++ b/formwidgets/MLTextarea.php @@ -62,6 +62,7 @@ public function getSaveValue($value) protected function loadAssets() { $this->loadLocaleAssets(); + $this->addJs('js/mltextarea.js'); } } diff --git a/formwidgets/mlmarkdowneditor/assets/js/mlmarkdowneditor.js b/formwidgets/mlmarkdowneditor/assets/js/mlmarkdowneditor.js index 35c70494..c1d326ba 100644 --- a/formwidgets/mlmarkdowneditor/assets/js/mlmarkdowneditor.js +++ b/formwidgets/mlmarkdowneditor/assets/js/mlmarkdowneditor.js @@ -46,7 +46,12 @@ this.$el.on('setLocale.oc.multilingual', this.proxy(this.onSetLocale)) this.$textarea.on('changeContent.oc.markdowneditor', this.proxy(this.onChangeContent)) + this.updateLayout() + + $(window).on('resize', this.proxy(this.updateLayout)) + $(window).on('oc.updateUi', this.proxy(this.updateLayout)) this.$el.one('dispose-control', this.proxy(this.dispose)) + } MLMarkdownEditor.prototype.dispose = function() { @@ -75,6 +80,64 @@ this.$el.multiLingual('setLocaleValue', value) } + MLMarkdownEditor.prototype.updateLayout = function() { + var $toolbar = $('.control-toolbar', this.$el), + $btn = $('.ml-btn[data-active-locale]:first', this.$el), + $dropdown = $('.ml-dropdown-menu[data-locale-dropdown]:first', this.$el), + $container = $('.editor-write', this.$el), + $scrollbar = $('.ace_scrollbar', this.$el), + $input = $('.ace_text-input', this.$el) + + if ($toolbar.length) { + var height = $toolbar.outerHeight(true) + if (height) { + $btn.css('top', height + 0.5) + $dropdown.css('top', height + 34) + } + } + + // set ML button position + var $container = $('.editor-write', this.$el), + $previewContainer = $('.editor-preview', this.$el), + $scrollbar = $('.ace_scrollbar', this.$el), + $input = $('.ace_text-input', this.$el) + + // fix exit fullscreen + setTimeout(function() { + setMLButtonPosition() + }, 0) + + // input listener + $input.on('keydown keyup', setMLButtonPosition) + + function setMLButtonPosition() { + + // make sure container is displayed (fix previewmode) + $container.css('display', 'initial') + + var scrollbarWidth = $scrollbar[0].offsetWidth - 5 + if (scrollbarWidth === -5) scrollbarWidth = $previewContainer[0].offsetWidth - $previewContainer[0].clientWidth + + if (scrollbarWidth >= 0) { + $container.css('padding-right', scrollbarWidth + 23) + $btn.css('right', scrollbarWidth - 1) + $dropdown.css('right', scrollbarWidth - 2) + } else { + $container.css('padding-right', '') + $btn.css('right', '') + $dropdown.css('right', '') + } + + // reset container + $container.css('display', '') + + } + + } + + // MLMARKDOWNEDITOR PLUGIN DEFINITION + // ============================ + var old = $.fn.mlMarkdownEditor $.fn.mlMarkdownEditor = function (option) { @@ -94,11 +157,17 @@ $.fn.mlMarkdownEditor.Constructor = MLMarkdownEditor; + // MLMARKDOWNEDITOR NO CONFLICT + // ================= + $.fn.mlMarkdownEditor.noConflict = function () { $.fn.mlMarkdownEditor = old return this } + // MLMARKDOWNEDITOR DATA-API + // =============== + $(document).render(function (){ $('[data-control="mlmarkdowneditor"]').mlMarkdownEditor() }) diff --git a/formwidgets/mlricheditor/assets/js/mlricheditor.js b/formwidgets/mlricheditor/assets/js/mlricheditor.js index 68247fea..75f5d4b9 100644 --- a/formwidgets/mlricheditor/assets/js/mlricheditor.js +++ b/formwidgets/mlricheditor/assets/js/mlricheditor.js @@ -85,15 +85,46 @@ MLRichEditor.prototype.updateLayout = function() { var $toolbar = $('.fr-toolbar', this.$el), $btn = $('.ml-btn[data-active-locale]:first', this.$el), - $dropdown = $('.ml-dropdown-menu[data-locale-dropdown]:first', this.$el) - - if (!$toolbar.length) { - return + $dropdown = $('.ml-dropdown-menu[data-locale-dropdown]:first', this.$el), + $element = $('.fr-element', this.$el) + + if ($toolbar.length) { + var height = $toolbar.outerHeight(true) + if (height) { + $btn.css('top', height) + $dropdown.css('top', height + 34) + } } - var height = $toolbar.outerHeight(true) - $btn.css('top', height + 6) - $dropdown.css('top', height + 40) + // set ML button position + var hasScrollbar = false + var scrollbarWidth = 0 + var elementHeight = $element.outerHeight() + + setMLButtonPosition() + $element.on('keydown keyup', setMLButtonPosition) + + function setMLButtonPosition() { + var scrollHeight = $element[0].scrollHeight + var showScrollbar = scrollHeight > elementHeight + + if (!hasScrollbar && showScrollbar) { + + hasScrollbar = true + if (!scrollbarWidth) scrollbarWidth = $element[0].offsetWidth - $element[0].clientWidth + + $element.css('padding-right', scrollbarWidth + 23) + $btn.css('right', scrollbarWidth - 1) + $dropdown.css('right', scrollbarWidth - 2) + + } else if (hasScrollbar && !showScrollbar) { + hasScrollbar = false + $element.css('padding-right', '') + $btn.css('right', '') + $dropdown.css('right', '') + } + } + } // MLRICHEDITOR PLUGIN DEFINITION diff --git a/formwidgets/mltextarea/assets/js/mltextarea.js b/formwidgets/mltextarea/assets/js/mltextarea.js new file mode 100644 index 00000000..1d6162f9 --- /dev/null +++ b/formwidgets/mltextarea/assets/js/mltextarea.js @@ -0,0 +1,26 @@ +function updateTextareaLayout($element) { + + // get elements + const $parent = $element.parentElement + const $btn = $parent.querySelector('.ml-btn[data-active-locale]') + const $dropdown = $parent.querySelector('.ml-dropdown-menu[data-locale-dropdown]') + + // set ML button position + const elementHeight = $element.offsetHeight + const scrollHeight = $element.scrollHeight + const showScrollbar = (scrollHeight - elementHeight) > 0 ? true : false + + if (showScrollbar) { + const scrollbarWidth = $element.offsetWidth - $element.clientWidth + $element.style.paddingRight = `${scrollbarWidth + 23}px` + $btn.style.right = `${scrollbarWidth - 1}px` + $btn.style.borderTopRightRadius = '0px' + $dropdown.style.right = `${scrollbarWidth - 2}px` + } else { + $element.style.paddingRight = '' + $btn.style.right = '' + $btn.style.borderTopRightRadius = '' + $dropdown.style.right = '' + } + +} diff --git a/formwidgets/mltextarea/partials/_mltextarea.htm b/formwidgets/mltextarea/partials/_mltextarea.htm index 1a710bd2..d349046a 100644 --- a/formwidgets/mltextarea/partials/_mltextarea.htm +++ b/formwidgets/mltextarea/partials/_mltextarea.htm @@ -15,6 +15,7 @@ placeholder="placeholder)) ?>" class="form-control field-textarea size-size ?>" autocomplete="off" + oninput="updateTextareaLayout(this)" getAttributes() ?>>value) ?>