diff --git a/build/build-modules-js/init/patches.es6.js b/build/build-modules-js/init/patches.es6.js index e53844864def3..99dfe6937e236 100644 --- a/build/build-modules-js/init/patches.es6.js +++ b/build/build-modules-js/init/patches.es6.js @@ -27,7 +27,11 @@ module.exports.patchPackages = async (options) => { dest = join(mediaVendorPath, 'short-and-sweet'); const shortandsweetPath = `${dest}/${options.settings.vendors['short-and-sweet'].js['dist/short-and-sweet.min.js']}`; let ShortandsweetJs = await readFile(shortandsweetPath, { encoding: 'utf8' }); - ShortandsweetJs = ShortandsweetJs.concat('shortAndSweet(\'textarea.charcount\', {counterClassName: \'small text-muted\'});'); + ShortandsweetJs = ShortandsweetJs.concat(` +shortAndSweet('textarea.charcount,input.charcount', {counterClassName: 'small text-muted'}); +/** Repeatable */ +document.addEventListener("joomla:updated", (event) => [].slice.call(event.target.querySelectorAll('textarea.charcount,input.charcount')).map((el) => shortAndSweet(el, {counterClassName: 'small text-muted'}))); +`); await writeFile(shortandsweetPath, ShortandsweetJs, { encoding: 'utf8', mode: 0o644 }); // Patch the Font Awesome math.div sass deprecations diff --git a/build/build-modules-js/stylesheets/handle-scss.es6.js b/build/build-modules-js/stylesheets/handle-scss.es6.js index a68e186cc735c..64b75b12e6643 100644 --- a/build/build-modules-js/stylesheets/handle-scss.es6.js +++ b/build/build-modules-js/stylesheets/handle-scss.es6.js @@ -1,5 +1,6 @@ const Autoprefixer = require('autoprefixer'); const CssNano = require('cssnano'); +const rtlcss = require('rtlcss'); const { writeFile } = require('fs').promises; const { ensureDir } = require('fs-extra'); const { dirname, sep } = require('path'); @@ -20,8 +21,11 @@ module.exports.handleScssFile = async (file) => { process.exit(1); } + const plugins = [Autoprefixer]; + if (cssFile.endsWith('-rtl.css')) plugins.push(rtlcss); + // Auto prefixing - const cleaner = Postcss([Autoprefixer()]); + const cleaner = Postcss(plugins); const res = await cleaner.process(compiled.css.toString(), { from: undefined }); // Ensure the folder exists or create it diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_header.scss b/build/media_source/templates/administrator/atum/scss/blocks/_header.scss index 7b7b700ed457f..d1d2b08ee7165 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_header.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_header.scss @@ -58,10 +58,6 @@ object-fit: contain; object-position: left center; - [dir=rtl] & { - object-position: right center; - } - &.logo-collapsed { display: none; } diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss b/build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss index e161f24c46b12..316e26683de0e 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss @@ -19,24 +19,10 @@ text-decoration: none; &::before { - margin-right: .5rem; + margin-inline-end: .5rem; font-family: "Font Awesome 5 Free"; font-weight: 900; - content: "\f054"; - - [dir="rtl"] & { - margin-right: 0; - content: none; - } - } - - &::after { - [dir="rtl"] & { - margin-inline-end: .5rem; - font-family: "Font Awesome 5 Free"; - font-weight: 900; - content: "\f053"; - } + content: "\f054" #{"/*!rtl:\"\f053\"*/"}; } } diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss b/build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss index ad0af74c350e2..5a37488b07da1 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss @@ -143,14 +143,7 @@ width: 2rem; font-family: "Font Awesome 5 Free"; font-weight: 900; - - [dir="ltr"] & { - content: "\f054"; - } - - [dir="rtl"] & { - content: "\f053"; - } + content: "\f054" #{"/*!rtl:\"\f053\"*/"}; } } @@ -256,11 +249,6 @@ z-index: $zindex-mobile-toggle; padding: 10px 15px; - [dir="rtl"] & { - right: auto; - left: 0; - } - &:focus { box-shadow: none; } diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss b/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss index f176b259e05a2..7a7752ea546e4 100644 --- a/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss +++ b/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss @@ -123,14 +123,7 @@ .btn-group:not(:last-child) > .dropdown-toggle-split { order: 1; margin-inline-start: -$border-radius; - - [dir="ltr"] & { - border-radius: 0 $border-radius $border-radius 0; - } - - [dir="rtl"] & { - border-radius: $border-radius 0 0 $border-radius; - } + border-radius: 0 $border-radius $border-radius 0; } .dropdown-menu joomla-toolbar-button, diff --git a/build/media_source/templates/administrator/atum/scss/template-rtl.scss b/build/media_source/templates/administrator/atum/scss/template-rtl.scss index 78d2b9387f6d3..3c6f9d6b785bc 100644 --- a/build/media_source/templates/administrator/atum/scss/template-rtl.scss +++ b/build/media_source/templates/administrator/atum/scss/template-rtl.scss @@ -1,47 +1,2 @@ +// This file is a placeholder for the rtl template @import "template"; -@import "vendor/bootstrap/bootstrap-rtl"; - -// Global -dl, -ol, -ul { - padding-right: 0; -} - -// Redirect urls fields -#jform_new_url, -#jform_old_url, -#new_url { - text-align: left; -} - -// Database prefix -#jform_dbprefix { - text-align: right; - direction: ltr; -} - -.input-group > .form-control:not(:last-child), -.input-group > .form-select:not(:last-child) { - @include border-start-radius(0); - @include border-end-radius($border-radius); -} - -.btn-group > .btn:first-child:not(.dropdown-toggle) { - @include border-end-radius($border-radius); -} - -.btn-group > .btn:not(:last-child):not(.dropdown-toggle), -.btn-group > .btn-group:not(:last-child) > .btn { - @include border-start-radius(0); - margin-left: -1px; -} - -.btn-group > .btn:last-child:not(.dropdown-toggle) { - @include border-start-radius($border-radius); -} - -.btn-group > .btn:not(:first-child), -.btn-group > .btn-group:not(:first-child) { - @include border-end-radius(0); -} diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_bootstrap-rtl.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_bootstrap-rtl.scss deleted file mode 100644 index 656fe887cac16..0000000000000 --- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_bootstrap-rtl.scss +++ /dev/null @@ -1,180 +0,0 @@ -// Bootstrap rtl overrides - -.float-start { - float: right !important; -} - -.float-end { - float: left !important; -} - -.modal-header { - .btn-close { - margin: -.5rem auto -.5rem -.5rem; - } -} - -.text-start { - text-align: right !important; -} - -.text-end { - text-align: left !important; -} - -.me-0 { - margin-right: auto !important; - margin-left: 0 !important; -} - -.me-1 { - margin-right: auto !important; - margin-left: .25rem !important; -} - -.me-2 { - margin-right: auto !important; - margin-left: .5rem !important; -} - -.me-3 { - margin-right: auto !important; - margin-left: 1rem !important; -} - -.me-4 { - margin-right: auto !important; - margin-left: 1.5rem !important; -} - -.me-5 { - margin-right: auto !important; - margin-left: 3rem !important; -} - -.me-auto { - margin-right: 0 !important; - margin-left: auto !important; -} - -.ms-0 { - margin-right: 0 !important; - margin-left: auto !important; -} - -.ms-1 { - margin-right: .25rem !important; - margin-left: auto !important; -} - -.ms-2 { - margin-right: .5rem !important; - margin-left: auto !important; -} - -.ms-3 { - margin-right: 1rem !important; - margin-left: auto !important; -} - -.ms-4 { - margin-right: 1.5rem !important; - margin-left: auto !important; -} - -.ms-5 { - margin-right: 3rem !important; - margin-left: auto !important; -} - -.ms-auto { - margin-right: auto !important; - margin-left: 0 !important; -} - -.pe-0 { - padding-right: 0 !important; - padding-left: 0 !important; -} -.pe-1 { - padding-right: 0 !important; - padding-left: .25rem !important; -} -.pe-2 { - padding-right: 0 !important; - padding-left: .5rem !important; -} -.pe-3 { - padding-right: 0 !important; - padding-left: 1rem !important; -} -.pe-4 { - padding-right: 0 !important; - padding-left: 1.5rem !important; -} -.pe-5 { - padding-right: 0 !important; - padding-left: 3rem !important; -} - -.ps-0 { - padding-right: 0 !important; - padding-left: 0 !important; -} -.ps-1 { - padding-right: .25rem !important; - padding-left: 0 !important; -} -.ps-2 { - padding-right: .5rem !important; - padding-left: 0 !important; -} -.ps-3 { - padding-right: 1rem !important; - padding-left: 0 !important; -} -.ps-4 { - padding-right: 1.5rem !important; - padding-left: 0 !important; -} -.ps-5 { - padding-right: 3rem !important; - padding-left: 0 !important; -} - - -.input-group { - &:not(.has-validation) { - > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), - > .dropdown-toggle:nth-last-child(n + 3) { - @include border-end-radius($border-radius); - } - } - - &.has-validation { - > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu), - > .dropdown-toggle:nth-last-child(n + 4) { - @include border-end-radius(0); - } - } - $validation-messages: ""; - @each $state in map-keys($form-validation-states) { - $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)"; - } - - > :not(:first-child):not(.dropdown-menu)#{$validation-messages} { - margin-left: -$input-border-width; - @include border-start-radius(0); - @include border-end-radius(0); - } - - > :last-child:not(.dropdown-menu)#{$validation-messages} { - margin-left: -$input-border-width; - @include border-start-radius($border-radius); - @include border-end-radius(0); - } -} - -.dropdown-menu { - text-align: right; // Bootstrap uses left instead of logical properties for this -} diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss index 85b6bb2bf252f..7509b4bc72724 100644 --- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss +++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss @@ -7,16 +7,10 @@ .form-select { max-width: $input-max-width; cursor: pointer; - background: $form-select-background; + background: $form-select-background #{"/* rtl:"}$form-select-background-rtl#{"*/"};; background-color: $form-select-bg; border: $input-border; - [dir=rtl] & { - padding: $form-select-padding-y $form-select-padding-x $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding); - background: $form-select-background-rtl; - background-color: $form-select-bg; - } - &[multiple] { padding: 0; background-color: var(--white-offset); diff --git a/build/media_source/templates/site/cassiopeia/scss/blocks/_footer.scss b/build/media_source/templates/site/cassiopeia/scss/blocks/_footer.scss index afb614a9b91f1..4aa0ad776c95d 100644 --- a/build/media_source/templates/site/cassiopeia/scss/blocks/_footer.scss +++ b/build/media_source/templates/site/cassiopeia/scss/blocks/_footer.scss @@ -4,7 +4,7 @@ margin-top: $cassiopeia-grid-gutter; color: $white; background-color: var(--cassiopeia-color-primary); - background-image: $cassiopeia-header-grad; + background-image: $cassiopeia-header-grad #{"/* rtl:"}$cassiopeia-header-grad-rtl #{"*/"}; .grid-child { align-items: center; @@ -16,10 +16,6 @@ color: currentColor; } - [dir=rtl] & { - background-image: $cassiopeia-header-grad-rtl; - } - .mod-menu { position: relative; } diff --git a/build/media_source/templates/site/cassiopeia/scss/blocks/_frontend-edit.scss b/build/media_source/templates/site/cassiopeia/scss/blocks/_frontend-edit.scss index 1400d34bdf6ad..722b42ebdeda4 100644 --- a/build/media_source/templates/site/cassiopeia/scss/blocks/_frontend-edit.scss +++ b/build/media_source/templates/site/cassiopeia/scss/blocks/_frontend-edit.scss @@ -12,7 +12,3 @@ border-radius: .25rem; } -[dir="rtl"] .btn.jmodedit { - right: auto; - left: 0; -} diff --git a/build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss b/build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss index 465b184101e7e..5b4e719388436 100644 --- a/build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss +++ b/build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss @@ -94,13 +94,6 @@ a { } } -[dir="rtl"] .btn-group { - > input { - @include border-end-radius($border-radius); - @include border-start-radius(0); - } -} - .com-content-article { ol, ul { @@ -122,11 +115,6 @@ dd { word-wrap: break-word; } -[dir="rtl"] dd { - margin-right: 0; - margin-left: auto; -} - th dd { font-weight: var(--cassiopeia-font-weight-normal, $font-weight-normal); } @@ -182,12 +170,6 @@ th dd { } } - [dir="rtl"] dl.dl-horizontal { - dd { - padding: 0 $cassiopeia-grid-gutter 0 0; - } - } - .com-users-profile { dt { min-width: 180px; @@ -203,14 +185,6 @@ figure { &.float-end { margin-left: $cassiopeia-grid-gutter; } - [dir="rtl"] &.float-start { - margin-right: 0; - margin-left: $cassiopeia-grid-gutter; - } - [dir="rtl"] &.float-end { - margin-right: $cassiopeia-grid-gutter; - margin-left: 0; - } } figcaption { @@ -238,11 +212,6 @@ meter { .next:only-child { margin-left: auto; } - - [dir="rtl"] &>.next:only-child { - margin-right: auto; - margin-left: $cassiopeia-grid-gutter; - } } } diff --git a/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss b/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss index 2f2c5fa1757c4..a79cf655c3070 100644 --- a/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss +++ b/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss @@ -174,11 +174,6 @@ &.active > button.mm-toggler-link::before { right: 0; left: .5em; - - [dir="rtl"] & { - right: .5em; - left: 0; - } } } diff --git a/build/media_source/templates/site/cassiopeia/scss/blocks/_toolbar.scss b/build/media_source/templates/site/cassiopeia/scss/blocks/_toolbar.scss index dd4430cfe32fa..cc993c9772146 100644 --- a/build/media_source/templates/site/cassiopeia/scss/blocks/_toolbar.scss +++ b/build/media_source/templates/site/cassiopeia/scss/blocks/_toolbar.scss @@ -124,14 +124,7 @@ .btn-group:not(:last-child) > .dropdown-toggle-split { order: 1; margin-inline-start: -$border-radius; - - [dir="ltr"] & { - border-radius: 0 $border-radius $border-radius 0; - } - - [dir="rtl"] & { - border-radius: $border-radius 0 0 $border-radius; - } + border-radius: 0 $border-radius $border-radius 0; } .dropdown-menu joomla-toolbar-button, diff --git a/build/media_source/templates/site/cassiopeia/scss/template-rtl.scss b/build/media_source/templates/site/cassiopeia/scss/template-rtl.scss index 7fd29360825f9..3c6f9d6b785bc 100644 --- a/build/media_source/templates/site/cassiopeia/scss/template-rtl.scss +++ b/build/media_source/templates/site/cassiopeia/scss/template-rtl.scss @@ -1,79 +1,2 @@ +// This file is a placeholder for the rtl template @import "template"; -@import "vendor/bootstrap/bootstrap-rtl"; - -body, -.dropdown-item { - text-align: right; -} - -.float-right { - float: left !important; -} - -.float-left { - float: right !important; -} - -.form-check { - padding-right: 1.25rem; - padding-left: 0; -} - -.form-check-input { - margin-right: -1.25rem; -} - -.list-unstyled { - padding-right: 0; -} - -.nav { - padding-right: 0; -} - -.container-header { - background-image: $cassiopeia-header-grad-rtl; - - .container-nav .container-search:only-child { - margin-right: auto; - margin-left: 0; - } - - .mod-menu { - > li { - margin-left: 1.55em; - } - } -} - -// SearchTools rounded corners -.awesomplete { - input { - @include border-start-radius(0); - } -} - -.input-group > .form-control:not(:last-child), -.input-group > .form-select:not(:last-child) { - @include border-start-radius(0); - @include border-end-radius($border-radius); -} - -.btn-group > .btn:first-child:not(.dropdown-toggle) { - @include border-end-radius($border-radius); -} - -.btn-group > .btn:not(:last-child):not(.dropdown-toggle), -.btn-group > .btn-group:not(:last-child) > .btn { - @include border-start-radius(0); - margin-left: -1px; -} - -.btn-group > .btn:last-child:not(.dropdown-toggle) { - @include border-start-radius($border-radius); -} - -.btn-group > .btn:not(:first-child), -.btn-group > .btn-group:not(:first-child) { - @include border-end-radius(0); -} diff --git a/build/media_source/templates/site/cassiopeia/scss/vendor/bootstrap/_bootstrap-rtl.scss b/build/media_source/templates/site/cassiopeia/scss/vendor/bootstrap/_bootstrap-rtl.scss deleted file mode 100644 index 3870ebc60d9f1..0000000000000 --- a/build/media_source/templates/site/cassiopeia/scss/vendor/bootstrap/_bootstrap-rtl.scss +++ /dev/null @@ -1,196 +0,0 @@ -// Bootstrap rtl overrides - -.float-start { - float: right !important; -} - -.float-end { - float: left !important; -} - -.modal-header { - .btn-close { - margin: -.5rem auto -.5rem -.5rem; - } -} - -.text-start { - text-align: right !important; -} - -.text-end { - text-align: left !important; -} - -.me-0 { - margin-right: auto !important; - margin-left: 0 !important; -} - -.me-1 { - margin-right: auto !important; - margin-left: .25rem !important; -} - -.me-2 { - margin-right: auto !important; - margin-left: .5rem !important; -} - -.me-3 { - margin-right: auto !important; - margin-left: 1rem !important; -} - -.me-4 { - margin-right: auto !important; - margin-left: 1.5rem !important; -} - -.me-5 { - margin-right: auto !important; - margin-left: 3rem !important; -} - -.me-auto { - margin-right: 0 !important; - margin-left: auto !important; -} - -.ms-0 { - margin-right: 0 !important; - margin-left: auto !important; -} - -.ms-1 { - margin-right: .25rem !important; - margin-left: auto !important; -} - -.ms-2 { - margin-right: .5rem !important; - margin-left: auto !important; -} - -.ms-3 { - margin-right: 1rem !important; - margin-left: auto !important; -} - -.ms-4 { - margin-right: 1.5rem !important; - margin-left: auto !important; -} - -.ms-5 { - margin-right: 3rem !important; - margin-left: auto !important; -} - -.ms-auto { - margin-right: auto !important; - margin-left: 0 !important; -} - -.pe-0 { - padding-right: 0 !important; - padding-left: 0 !important; -} -.pe-1 { - padding-right: 0 !important; - padding-left: .25rem !important; -} -.pe-2 { - padding-right: 0 !important; - padding-left: .5rem !important; -} -.pe-3 { - padding-right: 0 !important; - padding-left: 1rem !important; -} -.pe-4 { - padding-right: 0 !important; - padding-left: 1.5rem !important; -} -.pe-5 { - padding-right: 0 !important; - padding-left: 3rem !important; -} - -.ps-0 { - padding-right: 0 !important; - padding-left: 0 !important; -} -.ps-1 { - padding-right: .25rem !important; - padding-left: 0 !important; -} -.ps-2 { - padding-right: .5rem !important; - padding-left: 0 !important; -} -.ps-3 { - padding-right: 1rem !important; - padding-left: 0 !important; -} -.ps-4 { - padding-right: 1.5rem !important; - padding-left: 0 !important; -} -.ps-5 { - padding-right: 3rem !important; - padding-left: 0 !important; -} - - -.input-group { - &:not(.has-validation) { - > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), - > .dropdown-toggle:nth-last-child(n + 3) { - @include border-end-radius($border-radius); - } - } - - &.has-validation { - > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu), - > .dropdown-toggle:nth-last-child(n + 4) { - @include border-end-radius(0); - } - } - $validation-messages: ""; - @each $state in map-keys($form-validation-states) { - $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)"; - } - - > :not(:first-child):not(.dropdown-menu)#{$validation-messages} { - margin-left: -$input-border-width; - @include border-start-radius(0); - @include border-end-radius(0); - } - - > :last-child:not(.dropdown-menu)#{$validation-messages} { - margin-left: -$input-border-width; - @include border-start-radius($border-radius); - @include border-end-radius(0); - } -} - -.breadcrumb-item { - // The separator between breadcrumbs (by default, a forward-slash: "/") - + .breadcrumb-item { - padding-right: $breadcrumb-item-padding-x; - padding-left: 0 !important; - - &::before { - float: right; // Suppress inline spacings and underlining of the separator - padding-right: 0 !important; - padding-left: $breadcrumb-item-padding-x; - color: $breadcrumb-divider-color; - content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; - } - } - - &.active { - color: $breadcrumb-active-color; - } -} diff --git a/build/media_source/templates/site/cassiopeia/scss/vendor/bootstrap/_custom-forms.scss b/build/media_source/templates/site/cassiopeia/scss/vendor/bootstrap/_custom-forms.scss index a1aa0da7cba28..b190b0e30b37c 100644 --- a/build/media_source/templates/site/cassiopeia/scss/vendor/bootstrap/_custom-forms.scss +++ b/build/media_source/templates/site/cassiopeia/scss/vendor/bootstrap/_custom-forms.scss @@ -7,7 +7,7 @@ .form-select { max-width: $input-max-width; cursor: pointer; - background: $form-select-background; + background: $form-select-background #{"/* rtl:"}$form-select-background-rtl#{"*/"}; background-color: $form-select-bg; border: $input-border; // var needed @@ -18,12 +18,6 @@ box-shadow: $cassiopeia-input-focus-shadow; } - [dir=rtl] & { - padding: $form-select-padding-y $form-select-padding-x $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding); - background: $form-select-background-rtl; - background-color: $form-select-bg; - } - &[multiple] { padding: 0; background-color: $white; diff --git a/build/media_source/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss b/build/media_source/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss index c6a745c943675..837bab84d22dd 100644 --- a/build/media_source/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss +++ b/build/media_source/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss @@ -77,11 +77,6 @@ &:not(.level-1) > ul, &:not(.level-2) > ul { margin-right: -1em; - - [dir="rtl"] & { - margin-right: 0; - margin-left: -1em; - } } &.divider:not(.parent) { diff --git a/layouts/joomla/form/field/text.php b/layouts/joomla/form/field/text.php index a01f49309a8bf..90e710b5e3af0 100644 --- a/layouts/joomla/form/field/text.php +++ b/layouts/joomla/form/field/text.php @@ -10,6 +10,7 @@ defined('_JEXEC') or die; +use Joomla\CMS\Factory; use Joomla\CMS\Language\Text; extract($displayData); @@ -50,6 +51,7 @@ * @var string $dirname The directory name * @var string $addonBefore The text to use in a bootstrap input group prepend * @var string $addonAfter The text to use in a bootstrap input group append + * @var boolean $charcounter Does this field support a character counter? */ $list = ''; @@ -58,8 +60,23 @@ $list = 'list="' . $id . '_datalist"'; } +$charcounterclass = ''; + +if ($charcounter) { + // Load the js file + /** @var Joomla\CMS\WebAsset\WebAssetManager $wa */ + $wa = Factory::getApplication()->getDocument()->getWebAssetManager(); + $wa->useScript('short-and-sweet'); + + // Set the css class to be used as the trigger + $charcounterclass = ' charcount'; + + // Set the text + $counterlabel = 'data-counter-label="' . $this->escape(Text::_('JFIELD_META_DESCRIPTION_COUNTER')) . '"'; +} + $attributes = array( - !empty($class) ? 'class="form-control ' . $class . '"' : 'class="form-control"', + !empty($class) ? 'class="form-control ' . $class . $charcounterclass . '"' : 'class="form-control' . $charcounterclass . '"', !empty($size) ? 'size="' . $size . '"' : '', !empty($description) ? 'aria-describedby="' . ($id ?: $name) . '-desc"' : '', $disabled ? 'disabled' : '', @@ -74,6 +91,7 @@ $autofocus ? ' autofocus' : '', $spellcheck ? '' : 'spellcheck="false"', !empty($inputmode) ? $inputmode : '', + !empty($counterlabel) ? $counterlabel : '', !empty($pattern) ? 'pattern="' . $pattern . '"' : '', // @TODO add a proper string here!!! diff --git a/libraries/src/Form/Field/TextField.php b/libraries/src/Form/Field/TextField.php index d97c15cf61267..6a0a5b63c17df 100644 --- a/libraries/src/Form/Field/TextField.php +++ b/libraries/src/Form/Field/TextField.php @@ -45,6 +45,14 @@ class TextField extends FormField */ protected $maxLength; + /** + * Does this field support a character counter? + * + * @var boolean + * @since __DEPLOY_VERSION__ + */ + protected $charcounter = false; + /** * The mode of input associated with the field. * @@ -102,6 +110,7 @@ public function __get($name) case 'addonBefore': case 'addonAfter': case 'inputmode': + case 'charcounter': return $this->$name; } @@ -142,6 +151,10 @@ public function __set($name, $value) $this->addonAfter = (string) $value; break; + case 'charcounter': + $this->charcounter = strtolower($value) === 'true'; + break; + default: parent::__set($name, $value); } @@ -188,6 +201,7 @@ public function setup(\SimpleXMLElement $element, $value, $group = null) $this->dirname = $dirname ? $this->getName($this->fieldname . '_dir') : false; $this->maxLength = (int) $this->element['maxlength']; + $this->charcounter = isset($this->element['charcounter']) ? strtolower($this->element['charcounter']) === 'true' : false; $this->addonBefore = (string) $this->element['addonBefore']; $this->addonAfter = (string) $this->element['addonAfter']; @@ -295,6 +309,7 @@ protected function getLayoutData() 'addonBefore' => $this->addonBefore, 'addonAfter' => $this->addonAfter, 'options' => $options, + 'charcounter' => $this->charcounter, ); return array_merge($data, $extraData); diff --git a/package-lock.json b/package-lock.json index 27b360b2d24d6..4ce0c25f7da36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "punycode": "^2.1.1", "qrcode-generator": "^1.4.4", "roboto-fontface": "^0.10.0", + "rtlcss": "^3.5.0", "short-and-sweet": "^1.0.4", "skipto": "^4.1.6", "tinymce": "^5.10.2", @@ -8325,6 +8326,85 @@ "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==", "dev": true }, + "node_modules/rtlcss": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz", + "integrity": "sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==", + "dependencies": { + "find-up": "^5.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.3.11", + "strip-json-comments": "^3.1.1" + }, + "bin": { + "rtlcss": "bin/rtlcss.js" + } + }, + "node_modules/rtlcss/node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/rtlcss/node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/rtlcss/node_modules/p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dependencies": { + "yocto-queue": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/rtlcss/node_modules/p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/rtlcss/node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "engines": { + "node": ">=8" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -8817,7 +8897,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", - "dev": true, "engines": { "node": ">=8" }, @@ -9740,6 +9819,17 @@ "buffer-crc32": "~0.2.3", "fd-slicer": "~1.1.0" } + }, + "node_modules/yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } } }, "dependencies": { @@ -15797,6 +15887,57 @@ } } }, + "rtlcss": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz", + "integrity": "sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==", + "requires": { + "find-up": "^5.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.3.11", + "strip-json-comments": "^3.1.1" + }, + "dependencies": { + "find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "requires": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + } + }, + "locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "requires": { + "p-locate": "^5.0.0" + } + }, + "p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "requires": { + "yocto-queue": "^0.1.0" + } + }, + "p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "requires": { + "p-limit": "^3.0.2" + } + }, + "path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==" + } + } + }, "run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -16167,8 +16308,7 @@ "strip-json-comments": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", - "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", - "dev": true + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==" }, "style-search": { "version": "0.1.0", @@ -16867,6 +17007,11 @@ "buffer-crc32": "~0.2.3", "fd-slicer": "~1.1.0" } + }, + "yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" } } } diff --git a/package.json b/package.json index 71e10478d890a..e74d27d150205 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "punycode": "^2.1.1", "qrcode-generator": "^1.4.4", "roboto-fontface": "^0.10.0", + "rtlcss": "^3.5.0", "short-and-sweet": "^1.0.4", "skipto": "^4.1.6", "tinymce": "^5.10.2",