primo commit
This commit is contained in:
857
media/regularlabs/css/admin-form.css
Normal file
857
media/regularlabs/css/admin-form.css
Normal file
@ -0,0 +1,857 @@
|
||||
/**
|
||||
* @package Regular Labs Library
|
||||
* @version 24.11.1459
|
||||
*
|
||||
* @author Peter van Westen <info@regularlabs.com>
|
||||
* @link https://regularlabs.com
|
||||
* @copyright Copyright © 2024 Regular Labs All Rights Reserved
|
||||
* @license GNU General Public License version 2 or later
|
||||
*/
|
||||
.icon-reglab {
|
||||
background-color: #000000;
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
height: 1em;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 100 760 760'%3E%3Cpath d='M444.22,100.12H175.9A40,40,0,0,0,140.12,158L247.45,372.67a40,40,0,0,0,53.66,17.89L515.78,283.23a40,40,0,0,0,17.89-53.67L480,122.23A40,40,0,0,0,444.22,100.12Z' /%3E%3Cpath d='M658.89,569.44,444.22,676.77a40,40,0,0,0-17.89,53.67L480,837.77a40,40,0,0,0,35.78,22.11H784.1A40,40,0,0,0,819.88,802L712.55,587.33A40,40,0,0,0,658.89,569.44Z' /%3E%3Cpath d='M229.56,426.33,122.23,480a40,40,0,0,0-22.11,35.78V784.1A40,40,0,0,0,158,819.88L372.67,712.55a40,40,0,0,0,17.89-53.66L283.23,444.22A40,40,0,0,0,229.56,426.33Z' /%3E%3Cpath d='M840.91,141.87A40,40,0,0,0,802,140.12L587.33,247.45a40,40,0,0,0-17.89,53.66L676.77,515.78a40,40,0,0,0,53.67,17.89L837.77,480a40,40,0,0,0,22.11-35.78V175.9A40,40,0,0,0,840.91,141.87Z' /%3E%3C/svg%3E%0A");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 100 760 760'%3E%3Cpath d='M444.22,100.12H175.9A40,40,0,0,0,140.12,158L247.45,372.67a40,40,0,0,0,53.66,17.89L515.78,283.23a40,40,0,0,0,17.89-53.67L480,122.23A40,40,0,0,0,444.22,100.12Z' /%3E%3Cpath d='M658.89,569.44,444.22,676.77a40,40,0,0,0-17.89,53.67L480,837.77a40,40,0,0,0,35.78,22.11H784.1A40,40,0,0,0,819.88,802L712.55,587.33A40,40,0,0,0,658.89,569.44Z' /%3E%3Cpath d='M229.56,426.33,122.23,480a40,40,0,0,0-22.11,35.78V784.1A40,40,0,0,0,158,819.88L372.67,712.55a40,40,0,0,0,17.89-53.66L283.23,444.22A40,40,0,0,0,229.56,426.33Z' /%3E%3Cpath d='M840.91,141.87A40,40,0,0,0,802,140.12L587.33,247.45a40,40,0,0,0-17.89,53.66L676.77,515.78a40,40,0,0,0,53.67,17.89L837.77,480a40,40,0,0,0,22.11-35.78V175.9A40,40,0,0,0,840.91,141.87Z' /%3E%3C/svg%3E%0A");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
speak: none;
|
||||
text-transform: none;
|
||||
width: 1em;
|
||||
}
|
||||
.page-title .icon-reglab {
|
||||
background-color: #ffffff;
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
|
||||
.icon-file-import:before {
|
||||
content: "\f56f";
|
||||
}
|
||||
|
||||
.icon-file-export:before {
|
||||
content: "\f56e";
|
||||
}
|
||||
|
||||
.icon-hand-pointer:before {
|
||||
content: "\f25a";
|
||||
}
|
||||
|
||||
/*
|
||||
* Regular Labs specific styles
|
||||
*/
|
||||
.rl-flex {
|
||||
display: flex;
|
||||
}
|
||||
.rl-mr-1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.rl-w-2em,
|
||||
.input-group.rl-w-2em,
|
||||
.form-control.rl-w-2em,
|
||||
.input-group > .form-control.rl-w-2em {
|
||||
max-width: 100%;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.rl-min-w-2em {
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
.rl-w-3em,
|
||||
.input-group.rl-w-3em,
|
||||
.form-control.rl-w-3em,
|
||||
.input-group > .form-control.rl-w-3em {
|
||||
max-width: 100%;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
.rl-min-w-3em {
|
||||
min-width: 3em;
|
||||
}
|
||||
|
||||
.rl-w-4em,
|
||||
.input-group.rl-w-4em,
|
||||
.form-control.rl-w-4em,
|
||||
.input-group > .form-control.rl-w-4em {
|
||||
max-width: 100%;
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.rl-min-w-4em {
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
.rl-w-5em,
|
||||
.input-group.rl-w-5em,
|
||||
.form-control.rl-w-5em,
|
||||
.input-group > .form-control.rl-w-5em {
|
||||
max-width: 100%;
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
.rl-min-w-5em {
|
||||
min-width: 5em;
|
||||
}
|
||||
|
||||
.rl-w-6em,
|
||||
.input-group.rl-w-6em,
|
||||
.form-control.rl-w-6em,
|
||||
.input-group > .form-control.rl-w-6em {
|
||||
max-width: 100%;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
.rl-min-w-6em {
|
||||
min-width: 6em;
|
||||
}
|
||||
|
||||
.rl-w-7em,
|
||||
.input-group.rl-w-7em,
|
||||
.form-control.rl-w-7em,
|
||||
.input-group > .form-control.rl-w-7em {
|
||||
max-width: 100%;
|
||||
width: 7em;
|
||||
}
|
||||
|
||||
.rl-min-w-7em {
|
||||
min-width: 7em;
|
||||
}
|
||||
|
||||
.rl-w-8em,
|
||||
.input-group.rl-w-8em,
|
||||
.form-control.rl-w-8em,
|
||||
.input-group > .form-control.rl-w-8em {
|
||||
max-width: 100%;
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
.rl-min-w-8em {
|
||||
min-width: 8em;
|
||||
}
|
||||
|
||||
.rl-w-9em,
|
||||
.input-group.rl-w-9em,
|
||||
.form-control.rl-w-9em,
|
||||
.input-group > .form-control.rl-w-9em {
|
||||
max-width: 100%;
|
||||
width: 9em;
|
||||
}
|
||||
|
||||
.rl-min-w-9em {
|
||||
min-width: 9em;
|
||||
}
|
||||
|
||||
.rl-w-10em,
|
||||
.input-group.rl-w-10em,
|
||||
.form-control.rl-w-10em,
|
||||
.input-group > .form-control.rl-w-10em {
|
||||
max-width: 100%;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
.rl-min-w-10em {
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
.rl-w-12em,
|
||||
.input-group.rl-w-12em,
|
||||
.form-control.rl-w-12em,
|
||||
.input-group > .form-control.rl-w-12em {
|
||||
max-width: 100%;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.rl-min-w-12em {
|
||||
min-width: 12em;
|
||||
}
|
||||
|
||||
.rl-w-16em,
|
||||
.input-group.rl-w-16em,
|
||||
.form-control.rl-w-16em,
|
||||
.input-group > .form-control.rl-w-16em {
|
||||
max-width: 100%;
|
||||
width: 16em;
|
||||
}
|
||||
|
||||
.rl-min-w-16em {
|
||||
min-width: 16em;
|
||||
}
|
||||
|
||||
.rl-w-20em,
|
||||
.input-group.rl-w-20em,
|
||||
.form-control.rl-w-20em,
|
||||
.input-group > .form-control.rl-w-20em {
|
||||
max-width: 100%;
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.rl-min-w-20em {
|
||||
min-width: 20em;
|
||||
}
|
||||
|
||||
.rl-w-24em,
|
||||
.input-group.rl-w-24em,
|
||||
.form-control.rl-w-24em,
|
||||
.input-group > .form-control.rl-w-24em {
|
||||
max-width: 100%;
|
||||
width: 24em;
|
||||
}
|
||||
|
||||
.rl-min-w-24em {
|
||||
min-width: 24em;
|
||||
}
|
||||
|
||||
.rl-gray {
|
||||
color: #4f5a6c;
|
||||
}
|
||||
|
||||
.rl-bg-gray {
|
||||
background-color: #637188;
|
||||
}
|
||||
|
||||
.rl-border-gray {
|
||||
border-color: #637188;
|
||||
}
|
||||
|
||||
.rl-red {
|
||||
color: #b02120;
|
||||
}
|
||||
|
||||
.rl-bg-red {
|
||||
background-color: #dc2a28;
|
||||
}
|
||||
|
||||
.rl-border-red {
|
||||
border-color: #dc2a28;
|
||||
}
|
||||
|
||||
.rl-orange {
|
||||
color: #c85510;
|
||||
}
|
||||
|
||||
.rl-bg-orange {
|
||||
background-color: #fb6b14;
|
||||
}
|
||||
|
||||
.rl-border-orange {
|
||||
border-color: #fb6b14;
|
||||
}
|
||||
|
||||
.rl-yellow {
|
||||
color: #cc860f;
|
||||
}
|
||||
|
||||
.rl-bg-yellow {
|
||||
background-color: #ffa813;
|
||||
}
|
||||
|
||||
.rl-border-yellow {
|
||||
border-color: #ffa813;
|
||||
}
|
||||
|
||||
.rl-green {
|
||||
color: #138038;
|
||||
}
|
||||
|
||||
.rl-bg-green {
|
||||
background-color: #18a047;
|
||||
}
|
||||
|
||||
.rl-border-green {
|
||||
border-color: #18a047;
|
||||
}
|
||||
|
||||
.rl-teal {
|
||||
color: #0c7b83;
|
||||
}
|
||||
|
||||
.rl-bg-teal {
|
||||
background-color: #0f9aa4;
|
||||
}
|
||||
|
||||
.rl-border-teal {
|
||||
border-color: #0f9aa4;
|
||||
}
|
||||
|
||||
.rl-blue {
|
||||
color: #0d4aae;
|
||||
}
|
||||
|
||||
.rl-bg-blue {
|
||||
background-color: #115dda;
|
||||
}
|
||||
|
||||
.rl-border-blue {
|
||||
border-color: #115dda;
|
||||
}
|
||||
|
||||
.rl-purple {
|
||||
color: #5e15ae;
|
||||
}
|
||||
|
||||
.rl-bg-purple {
|
||||
background-color: #761bda;
|
||||
}
|
||||
|
||||
.rl-border-purple {
|
||||
border-color: #761bda;
|
||||
}
|
||||
|
||||
.rl-pink {
|
||||
color: #a81483;
|
||||
}
|
||||
|
||||
.rl-bg-pink {
|
||||
background-color: #d319a4;
|
||||
}
|
||||
|
||||
.rl-border-pink {
|
||||
border-color: #d319a4;
|
||||
}
|
||||
|
||||
.rl-license,
|
||||
.rl-footer {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.rl-license div,
|
||||
.rl-footer div {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.rl-license a:before,
|
||||
.rl-license a[target=_blank]:before,
|
||||
.rl-footer a:before,
|
||||
.rl-footer a[target=_blank]:before {
|
||||
content: "";
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.rl-footer .rl-footer-review a.stars {
|
||||
display: inline-block;
|
||||
}
|
||||
.rl-footer .rl-footer-review a.stars .icon-star {
|
||||
color: #ffb514;
|
||||
margin: 0;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
.rl-footer .rl-footer-review a.stars:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.rl-footer .rl-footer-review a.stars:hover .icon-star {
|
||||
transform: rotate(216deg);
|
||||
}
|
||||
.rl-footer .rl-footer-copyright {
|
||||
font-size: 0.7em;
|
||||
margin-top: 3px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.rl-code {
|
||||
background-color: var(--template-bg-dark-3);
|
||||
border: 1px solid var(--template-bg-dark-10);
|
||||
border-radius: 0.25rem;
|
||||
color: var(--alert-success);
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.1rem;
|
||||
}
|
||||
.rl-code.rl-code-block {
|
||||
max-width: 100%;
|
||||
padding: 0.25rem 0.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.rl-pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.rl-form .form-control {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.rl-form select.form-control {
|
||||
padding: 0;
|
||||
}
|
||||
.rl-form select.form-control option {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
.rl-form .options-form legend {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.rl-form.labels-sm .control-label {
|
||||
width: 150px;
|
||||
}
|
||||
.rl-form .is-flipped.is-open .choices__inner {
|
||||
border-radius: 2.5px 2.5px 0 0;
|
||||
}
|
||||
.rl-form .is-flipped .choices__list--dropdown {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0 0 2.5px 2.5px;
|
||||
}
|
||||
|
||||
a.rl-no-styling {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
a.rl-no-styling:before {
|
||||
content: "" !important;
|
||||
-webkit-padding-end: 0 !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
input.rl-code-field.form-control {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
input.rl-code-field.form-control.inactive {
|
||||
font-weight: 700;
|
||||
color: #666e76;
|
||||
background-color: #f8f9fa;
|
||||
border-color: #e8e8e8;
|
||||
}
|
||||
input.rl-code-field.form-control::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
color: #cdcdcd;
|
||||
}
|
||||
input.rl-code-field.form-control:-ms-input-placeholder {
|
||||
opacity: 1;
|
||||
color: #cdcdcd;
|
||||
}
|
||||
input.rl-code-field.form-control ::placeholder {
|
||||
opacity: 1;
|
||||
color: #cdcdcd;
|
||||
}
|
||||
|
||||
input.rl-key-field.form-control {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
.rl-admin-popover-container {
|
||||
display: none;
|
||||
position: relative;
|
||||
}
|
||||
.rl-admin-popover-container.show {
|
||||
display: block;
|
||||
}
|
||||
.rl-admin-popover-container.rl-admin-popover-full {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.rl-admin-popover {
|
||||
background: #fff;
|
||||
border: 1px solid #adb5bd;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0 40px 10px rgba(0, 28, 73, 0.15);
|
||||
color: #343a40;
|
||||
font-size: 1rem;
|
||||
left: 0;
|
||||
margin: 0.25em;
|
||||
max-width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1060;
|
||||
}
|
||||
.form-vertical .rl-admin-popover {
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
|
||||
.rl-panel {
|
||||
border: 1px solid #dee2e6;
|
||||
border-left-width: 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
.rl-panel:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.rl-panel:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.rl-panel.rl-panel-success {
|
||||
border-color: #457d54;
|
||||
}
|
||||
.rl-panel.rl-panel-warning {
|
||||
border-color: #f9d71c;
|
||||
}
|
||||
.rl-panel.rl-panel-error {
|
||||
border-color: #900;
|
||||
}
|
||||
|
||||
.rl-alert.alert.alert-info {
|
||||
background-color: #2a69b7;
|
||||
border: 1px solid #2a69b7;
|
||||
color: #fff;
|
||||
}
|
||||
.rl-alert.alert.rl-alert-light.alert-info {
|
||||
background-color: #e7eff9;
|
||||
border: 2px solid #2a69b7;
|
||||
color: #000;
|
||||
}
|
||||
.rl-alert.alert.rl-alert-light.alert-success {
|
||||
background-color: #f9fbf9;
|
||||
border: 2px solid #457d54;
|
||||
color: #000;
|
||||
}
|
||||
.rl-alert.alert.rl-alert-light.alert-warning {
|
||||
background-color: #fffaef;
|
||||
border: 2px solid #ffb514;
|
||||
color: #000;
|
||||
}
|
||||
.rl-alert.alert.rl-alert-light.alert-error {
|
||||
background-color: #fcefef;
|
||||
border: 2px solid #c52827;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.rl-badge.badge {
|
||||
padding-right: 0.25rem;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.rl-badge.badge.bg-info {
|
||||
background-color: #2a69b7 !important;
|
||||
color: #fff;
|
||||
}
|
||||
.rl-badge.badge.bg-warning {
|
||||
background-color: #ffb514 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rl-treeselect.card {
|
||||
border: solid 1px var(--template-bg-dark-20);
|
||||
}
|
||||
.rl-treeselect .card-header {
|
||||
border-bottom: solid 1px var(--template-bg-dark-20);
|
||||
}
|
||||
.rl-treeselect .card-body {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.rl-treeselect .treeselect {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.rl-treeselect .treeselect .dropdown-toggle::after {
|
||||
font-size: 1.1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.rl-treeselect .dropdown-header {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
||||
padding: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.rl-treeselect .dropdown-item {
|
||||
border-bottom: none;
|
||||
line-height: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.rl-treeselect .rl-item-checked > .treeselect-item {
|
||||
margin: 0 -0.25rem;
|
||||
padding: 0 0.25rem;
|
||||
background-color: #d8e5f9;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rl-btn-group.btn-group.radio > .btn-check + .btn {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.rl-btn-group.btn-group.radio > .btn-check + .btn:hover, .rl-btn-group.btn-group.radio > .btn-check:checked + .btn {
|
||||
opacity: 1;
|
||||
}
|
||||
.rl-btn-group.btn-group.radio > .btn-check[disabled] + .btn, .rl-btn-group.btn-group.radio > .btn-check:disabled + .btn {
|
||||
background-color: #dee2e6;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.rl-btn-group.btn-group.rl-btn-group-separate {
|
||||
display: block;
|
||||
}
|
||||
.rl-btn-group.btn-group.rl-btn-group-separate > .btn {
|
||||
border-radius: 0.2rem !important;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.rl-btn-group.btn-group.rl-btn-group-separate.radio > .btn-check + .btn {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.rl-btn-group.btn-group.rl-btn-group-separate.radio > .btn-check + .btn:hover, .rl-btn-group.btn-group.rl-btn-group-separate.radio > .btn-check:checked + .btn {
|
||||
opacity: 1;
|
||||
}
|
||||
.rl-btn-group.btn-group.rl-btn-group-separate.radio > .btn-check[disabled] + .btn, .rl-btn-group.btn-group.rl-btn-group-separate.radio > .btn-check:disabled + .btn {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.rl-btn-group.btn-group.rl-btn-group-separate.rl-btn-group-min-size > .btn {
|
||||
min-width: 4rem;
|
||||
}
|
||||
|
||||
.rl-bg-transparent {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.table > * > tr.rl-tr-bg-transparent > * {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.rl-w-md-25 {
|
||||
width: 25%;
|
||||
}
|
||||
.rl-w-md-30 {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
.rl-badge > small {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.rl-modal .btn-group > .btn {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
padding: 0.6rem 1rem;
|
||||
}
|
||||
|
||||
.control-group > div > .rl-alert:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.control-group > div > .rl-alert:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.rl-form-checkboxes-not-inline .form-check-inline,
|
||||
.rl-form-check-not-inline .form-check-inline {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rl-form-checkboxes-style-disabled .rl-checkbox-checked label {
|
||||
color: #c52827;
|
||||
}
|
||||
|
||||
.rl-button-no-text.header-item-content {
|
||||
-webkit-padding-end: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
.subhead joomla-toolbar-button .rl-button-no-text.btn > span {
|
||||
-webkit-margin-end: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
.card.rl-card {
|
||||
border: solid 1px var(--template-bg-dark-20);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.card.rl-card:first-child,
|
||||
.card.rl-card .card-body > *:first-child,
|
||||
.card.rl-card .alert > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.card.rl-card:last-child,
|
||||
.card.rl-card .card-body > *:last-child,
|
||||
.card.rl-card .alert > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.card.rl-card .card-body:not(:first-child) {
|
||||
padding-top: 0;
|
||||
}
|
||||
.card.rl-card .rl-card-button {
|
||||
order: 1;
|
||||
-webkit-margin-start: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
.card.rl-card .rl-card-button > * {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.rl-spinner {
|
||||
position: absolute;
|
||||
animation: rl-spinner 1.2s infinite linear;
|
||||
border: 3px solid #637188;
|
||||
border-top-color: #18a047;
|
||||
border-right-color: #ffa813;
|
||||
border-bottom-color: #dc2a28;
|
||||
border-left-color: #115dda;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
top: calc(50% - 9px);
|
||||
}
|
||||
.rl-spinner.rl-spinner-lg {
|
||||
border-width: 4px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: calc(50% - 12px);
|
||||
}
|
||||
|
||||
.rl-has-spinner {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
@keyframes rl-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
/*
|
||||
* Global extra styles
|
||||
*/
|
||||
.btn-md, .btn-group-md > .btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
|
||||
joomla-field-subform.rl-subform.rl-hide-main-buttons > .btn-toolbar {
|
||||
display: none;
|
||||
}
|
||||
joomla-field-subform.rl-subform.rl-move-add-button div.subform-repeatable-group {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
joomla-field-subform.rl-subform.rl-move-add-button div.subform-repeatable-group:last-child {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
joomla-field-subform.rl-subform.rl-move-add-button div.subform-repeatable-group > .btn-toolbar .btn.group-add {
|
||||
right: auto;
|
||||
left: 0;
|
||||
bottom: -3rem;
|
||||
border-radius: 0.25rem;
|
||||
min-width: 6rem;
|
||||
}
|
||||
joomla-field-subform.rl-subform .subform-repeatable-group {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.rl-cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rl-bg-danger-light {
|
||||
background-color: #fef8f8;
|
||||
}
|
||||
|
||||
button.rl-webkit-no-appearance, [type=button].rl-webkit-no-appearance, [type=reset].rl-webkit-no-appearance, [type=submit].rl-webkit-no-appearance {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.form-select.rl-form-select-info {
|
||||
color: var(--info);
|
||||
background-color: var(--info);
|
||||
border-color: var(--info);
|
||||
}
|
||||
.form-select.rl-form-select-info option {
|
||||
color: #212529;
|
||||
background-color: var(--white-offset);
|
||||
}
|
||||
.form-select.rl-form-select-ghosted {
|
||||
color: #adb5bd;
|
||||
}
|
||||
.form-select.rl-form-select-ghosted option {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
/*
|
||||
* Joomla core style overrides
|
||||
*/
|
||||
.control-group > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-vertical .control-group .control-label {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.control-group .form-select {
|
||||
padding-right: 3.5rem;
|
||||
}
|
||||
|
||||
joomla-field-subform .icon-info-circle {
|
||||
color: var(--template-text-dark) !important;
|
||||
font-size: 0.8571rem !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.text-left,
|
||||
.btn.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right,
|
||||
.btn.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.js-stools-column-order > .icon-sort:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.display-block:not(.hidden) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-danger code {
|
||||
color: #2a69b7;
|
||||
}
|
||||
|
||||
.CodeMirror-fullscreen {
|
||||
z-index: 1060 !important;
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.disabled .btn.disabled,
|
||||
.disabled a.disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rl-ajax-wrapper > *:first-child {
|
||||
opacity: 0;
|
||||
}
|
||||
.rl-ajax-wrapper:has(.rl-ajax-field) {
|
||||
display: flex;
|
||||
}
|
||||
.rl-ajax-wrapper > .rl-ajax-field {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
padding: 9px 1.25rem !important;
|
||||
}
|
||||
.rl-ajax-wrapper.loaded > *:first-child {
|
||||
opacity: 1;
|
||||
}
|
||||
.rl-ajax-wrapper.loaded > .rl-ajax-field {
|
||||
opacity: 0;
|
||||
animation: rl-fade-in 0.5s 3s 1 forwards;
|
||||
}
|
||||
|
||||
.switcher input ~ input:checked.rl-radio-warning ~ .toggle-outside {
|
||||
background-color: #ffb514;
|
||||
}
|
||||
|
||||
@keyframes rl-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
1
media/regularlabs/css/admin-form.min.css
vendored
Normal file
1
media/regularlabs/css/admin-form.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
88
media/regularlabs/css/mini-colors.css
Normal file
88
media/regularlabs/css/mini-colors.css
Normal file
@ -0,0 +1,88 @@
|
||||
/**
|
||||
* @package Regular Labs Library
|
||||
* @version 24.11.1459
|
||||
*
|
||||
* @author Peter van Westen <info@regularlabs.com>
|
||||
* @link https://regularlabs.com
|
||||
* @copyright Copyright © 2024 Regular Labs All Rights Reserved
|
||||
* @license GNU General Public License version 2 or later
|
||||
*/
|
||||
.rl-mini-colors-button {
|
||||
background-image: repeating-linear-gradient(45deg, #dddddd 25%, transparent 25%, transparent 75%, #dddddd 75%, #dddddd), repeating-linear-gradient(45deg, #dddddd 25%, #ffffff 25%, #ffffff 75%, #dddddd 75%, #dddddd);
|
||||
background-position: 0 0, 4px 4px;
|
||||
background-size: 8px 8px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
text-indent: -1000px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.rl-mini-colors-button:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
box-shadow: inset 0 0 2px #adb5bd;
|
||||
}
|
||||
.rl-mini-colors-button:hover:after, .rl-mini-colors-button:focus:after {
|
||||
box-shadow: inset 0 0 0 2px var(--focus);
|
||||
}
|
||||
|
||||
.rl-mini-colors-field {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: transparent;
|
||||
}
|
||||
.rl-mini-colors-field input {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
.rl-mini-colors-field .rl-mini-colors-button {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.rl-mini-colors-picker {
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border: 1px solid #adb5bd;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0 40px 10px rgba(0, 28, 73, 0.15);
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
width: 178px;
|
||||
z-index: 1100;
|
||||
justify-content: space-between;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
padding: 12px;
|
||||
}
|
||||
.rl-mini-colors-picker.rl-mini-colors-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rl-mini-colors-swatches {
|
||||
margin: 0;
|
||||
}
|
||||
.rl-mini-colors-swatches div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.rl-mini-colors-swatches .rl-mini-colors-button {
|
||||
position: relative;
|
||||
margin: 6px;
|
||||
}
|
||||
1
media/regularlabs/css/mini-colors.min.css
vendored
Normal file
1
media/regularlabs/css/mini-colors.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.rl-mini-colors-button{background-image:repeating-linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd),repeating-linear-gradient(45deg,#ddd 25%,#fff 25%,#fff 75%,#ddd 75%,#ddd);background-position:0 0,4px 4px;background-size:8px 8px;width:26px;height:26px;padding:0;border:0;border-radius:50%;color:inherit;cursor:pointer;text-indent:-1000px;white-space:nowrap;overflow:hidden}.rl-mini-colors-button:after{content:"";display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:50%;background-color:currentColor;box-shadow:inset 0 0 2px #adb5bd}.rl-mini-colors-button:focus:after,.rl-mini-colors-button:hover:after{box-shadow:inset 0 0 0 2px var(--focus)}.rl-mini-colors-field{display:inline-block;position:relative;color:transparent}.rl-mini-colors-field input{width:26px;height:26px;cursor:pointer;opacity:0}.rl-mini-colors-field .rl-mini-colors-button{position:absolute}.rl-mini-colors-picker{box-sizing:border-box;background:#fff;border:1px solid #adb5bd;border-radius:.3rem;box-shadow:0 0 40px 10px rgba(0,28,73,.15);display:none;flex-wrap:wrap;position:absolute;width:178px;z-index:1100;justify-content:space-between;-moz-user-select:none;-webkit-user-select:none;user-select:none;padding:12px}.rl-mini-colors-picker.rl-mini-colors-open{display:flex}.rl-mini-colors-swatches{margin:0}.rl-mini-colors-swatches div{display:flex;flex-wrap:wrap;justify-content:center}.rl-mini-colors-swatches .rl-mini-colors-button{position:relative;margin:6px}
|
||||
26
media/regularlabs/js/LICENCE
Normal file
26
media/regularlabs/js/LICENCE
Normal file
@ -0,0 +1,26 @@
|
||||
MIT License
|
||||
|
||||
Copyright 2021 Regular Labs <https://github.com/regularlabs/regularjs>
|
||||
|
||||
====
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
====
|
||||
436
media/regularlabs/js/README.md
Normal file
436
media/regularlabs/js/README.md
Normal file
@ -0,0 +1,436 @@
|
||||
|
||||
|
||||
### *A light and simple JavaScript Library*
|
||||
|
||||
[](https://github.com/regularlabs/regularjs/blob/master/LICENCE)
|
||||
[](https://github.com/regularlabs/regularjs/pulls)
|
||||
[](https://github.com/regularlabs)
|
||||
|
||||
Very small:  😮
|
||||
|
||||
---
|
||||
|
||||
This library contains a number of simple static javascript functions.
|
||||
|
||||
[hasClasses](#hasclasses)<br>
|
||||
[addClasses](#addclasses)<br>
|
||||
[removeClasses](#removeclasses)<br>
|
||||
[toggleClasses](#toggleclasses)<br>
|
||||
[show](#show)<br>
|
||||
[hide](#hide)<br>
|
||||
[fadeIn](#fadein)<br>
|
||||
[fadeOut](#fadeout)<br>
|
||||
[createElementFromHTML](#createelementfromhtml)<br>
|
||||
[onReady](#onready)<br>
|
||||
[loadUrl](#loadurl)<br>
|
||||
[alias](#alias)<br>
|
||||
<br>
|
||||
[Function Aliases](#function-aliases)
|
||||
|
||||
---
|
||||
|
||||
## hasClasses
|
||||
|
||||
Checks if the element contains one or more of the given class names.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.hasClasses(selector, classes, true)
|
||||
```
|
||||
|
||||
| Parameter | Description | Default |
|
||||
|------------|----------------------------------------------------------------------------------------------------|:-------:|
|
||||
| `selector` | A CSS selector string or a HTMLElement object. | |
|
||||
| `classes` | A string or array of class names. | |
|
||||
| `matchAll` | Optional boolean whether the element should have all given classes (true) or at least one (false). | `true` |
|
||||
|
||||
##### Returns
|
||||
|
||||
`boolean` true or false based on whether the element contains one or more of the given class names.
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<div id="mydiv" class="foo bar">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
|
||||
Regular.hasClasses('#mydiv', 'foo');
|
||||
// => true
|
||||
|
||||
Regular.hasClasses('#mydiv', 'baz');
|
||||
// => false
|
||||
|
||||
Regular.hasClasses('#mydiv', 'bar baz');
|
||||
// => false
|
||||
|
||||
Regular.hasClasses('#mydiv', ['bar', 'baz']);
|
||||
// => false
|
||||
|
||||
const div = document.querySelector('#mydiv');
|
||||
Regular.hasClasses(div, ['bar', 'baz'], false);
|
||||
// => true
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## addClasses
|
||||
|
||||
Adds given class name(s) to the element.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.addClasses(selector, classes)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|------------|-------------------------------------------------------------------------------------|
|
||||
| `selector` | A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
|
||||
| `classes` | A string or array of class names. |
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<div id="mydiv" class="foo">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Regular.addClasses('#mydiv', 'bar');
|
||||
// => class="foo bar"
|
||||
|
||||
Regular.addClasses('#mydiv', 'foo');
|
||||
// => class="foo"
|
||||
|
||||
Regular.addClasses('#mydiv', 'bar baz');
|
||||
// => class="foo bar baz"
|
||||
|
||||
const div = document.querySelector('#mydiv');
|
||||
Regular.addClasses(div, ['bar', 'baz']);
|
||||
// => class="foo bar baz"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## removeClasses
|
||||
|
||||
Removes given class name(s) from the element.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.removeClasses(selector, classes)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|------------|-------------------------------------------------------------------------------------|
|
||||
| `selector` | A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
|
||||
| `classes` | A string or array of class names. |
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<div id="mydiv" class="foo bar baz">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Regular.removeClasses('#mydiv', 'bar');
|
||||
// => class="foo baz"
|
||||
|
||||
Regular.removeClasses('#mydiv', 'bar baz');
|
||||
// => class="foo"
|
||||
|
||||
Regular.removeClasses('#mydiv', ['bar', 'baz']);
|
||||
// => class="foo"
|
||||
|
||||
const div = document.querySelector('#mydiv');
|
||||
Regular.removeClasses(div, 'qux');
|
||||
// => class="foo bar baz"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## toggleClasses
|
||||
|
||||
Toggles given class name(s) of the element.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.toggleClasses(selector, classes)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|------------|-------------------------------------------------------------------------------------|
|
||||
| `selector` | A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
|
||||
| `classes` | A string or array of class names. |
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<div id="mydiv" class="foo bar baz">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Regular.toggleClasses('#mydiv', 'bar');
|
||||
// => class="foo baz"
|
||||
|
||||
Regular.toggleClasses('#mydiv', 'bar baz');
|
||||
// => class="foo"
|
||||
|
||||
Regular.toggleClasses('#mydiv', ['bar', 'qux']);
|
||||
// => class="foo baz qux"
|
||||
|
||||
const div = document.querySelector('#mydiv');
|
||||
Regular.toggleClasses(div, 'qux');
|
||||
// => class="foo bar baz qux"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## show
|
||||
|
||||
Shows the given element (changes opacity and display attributes).
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.show(el)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|------------|-------------------------------------------------------------------------------------|
|
||||
| `selector` | A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<div id="mydiv" style="display:none;">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Regular.show('#mydiv');
|
||||
|
||||
const div = document.querySelector('#mydiv');
|
||||
Regular.show(div);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## hide
|
||||
|
||||
Hides the given element (changes opacity and display attributes).
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.hide(el)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|------------|-------------------------------------------------------------------------------------|
|
||||
| `selector` | A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<div id="mydiv">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Regular.hide(div);
|
||||
|
||||
const div = document.querySelector('#mydiv');
|
||||
Regular.hide('#mydiv');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## fadeIn
|
||||
|
||||
Fades in the the given element.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.fadeIn(selector, duration, oncomplete)
|
||||
```
|
||||
|
||||
| Parameter | Description | Default |
|
||||
|--------------|-------------------------------------------------------------------------------------|:-------:|
|
||||
| `selector` | A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. | |
|
||||
| `duration` | Optional duration of the effect in milliseconds. | `250` |
|
||||
| `oncomplete` | Optional callback function to execute when effect is completed. | |
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<div id="mydiv" style="display:none;">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Regular.fadeIn('#mydiv');
|
||||
|
||||
const div = document.querySelector('#mydiv');
|
||||
Regular.fadeIn(div, 1000, () => console.log('Faded in'));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## fadeOut
|
||||
|
||||
Fades out the the given element.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.fadeOut(selector, duration, oncomplete)
|
||||
```
|
||||
|
||||
| Parameter | Description | Default |
|
||||
|--------------|-------------------------------------------------------------------------------------|:-------:|
|
||||
| `selector` | A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. | |
|
||||
| `duration` | Optional duration of the effect in milliseconds. | `250` |
|
||||
| `oncomplete` | Optional callback function to execute when effect is completed. | |
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<div id="mydiv">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Regular.fadeOut('#mydiv');
|
||||
|
||||
const div = document.querySelector('#mydiv');
|
||||
Regular.fadeOut(div, 1000, () => console.log('Faded out'));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## createElementFromHTML
|
||||
|
||||
Converts a string with HTML code to a HTMLElement object.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.createElementFromHTML(html)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|------------------------|
|
||||
| `html` | String with HTML code. |
|
||||
|
||||
##### Returns
|
||||
|
||||
`HTMLElement` object based on the given string.
|
||||
|
||||
#### Example
|
||||
|
||||
```javascript
|
||||
const mydiv = Regular.createElementFromHTML(`<div id="mydiv" class="foo">My <strong>cool</strong> element!</div>`);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## onReady
|
||||
|
||||
Runs a function when the document is loaded (on ready state).
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.onReady(func)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|------------------------------------------------------|
|
||||
| `func` | Callback function to execute when document is ready. |
|
||||
|
||||
#### Example
|
||||
|
||||
```
|
||||
Regular.onReady(`console.log('Document is ready!')`);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## loadUrl
|
||||
|
||||
Loads a url with optional POST data and optionally calls a function on success or fail.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.loadUrl(url, data, success, fail)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------------------------------------------------------------------------------|
|
||||
| `url` | String containing the url to load. |
|
||||
| `data` | Optional string representing the POST data to send along. |
|
||||
| `success` | Optional callback function to execute when the url loads successfully (status 200). |
|
||||
| `fail` | Optional callback function to execute when the url fails to load. |
|
||||
|
||||
The result (responseText), status and the full XMLHttpRequest object will be passed to the callback functions.
|
||||
|
||||
#### Example
|
||||
|
||||
```javascript
|
||||
Regular.loadUrl('my/url.php');
|
||||
|
||||
Regular.loadUrl(
|
||||
'my/url.php',
|
||||
'id=123&format=ajax',
|
||||
(result) => {
|
||||
console.log('Yeah!');
|
||||
console.log(result);
|
||||
},
|
||||
(result, status) => console.log(`Oh no! Failed with status: ${status}`)
|
||||
);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## alias
|
||||
|
||||
Sets a global alias for the Regular class.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.alias(word)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|----------------------------------------------------------------------------|
|
||||
| `word` | A string (character or word) representing the alias for the Regular class. |
|
||||
|
||||
##### Returns
|
||||
|
||||
`boolean` true if the alias is created, false if the given alias already exists as a global variable names.
|
||||
|
||||
#### Example
|
||||
|
||||
```javascript
|
||||
Regular.alias('$');
|
||||
|
||||
$.addClass('#myDiv', 'foo');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Function Aliases
|
||||
|
||||
There are some aliases for some of the functions:
|
||||
|
||||
| Function | Alias for |
|
||||
|-------------|---------------|
|
||||
| hasClass | hasClasses |
|
||||
| addClass | addClasses |
|
||||
| removeClass | removeClasses |
|
||||
| toggleClass | toggleClasses |
|
||||
| as | alias |
|
||||
134
media/regularlabs/js/admin-form-descriptions.js
Normal file
134
media/regularlabs/js/admin-form-descriptions.js
Normal file
@ -0,0 +1,134 @@
|
||||
/**
|
||||
* @package Regular Labs Library
|
||||
* @version 24.11.1459
|
||||
*
|
||||
* @author Peter van Westen <info@regularlabs.com>
|
||||
* @link https://regularlabs.com
|
||||
* @copyright Copyright © 2024 Regular Labs All Rights Reserved
|
||||
* @license GNU General Public License version 2 or later
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.RegularLabs = window.RegularLabs || {};
|
||||
|
||||
window.RegularLabs.AdminFormDescriptions = window.RegularLabs.AdminFormDescriptions || {
|
||||
moveLabelDescriptions: function() {
|
||||
document.querySelectorAll('div[id$="-desc"]:not(.rl-moved)').forEach((description) => {
|
||||
const control_group = description.closest('.control-group');
|
||||
|
||||
if ( ! control_group) {
|
||||
return;
|
||||
}
|
||||
|
||||
const label = control_group.querySelector('label');
|
||||
|
||||
if ( ! label) {
|
||||
return;
|
||||
}
|
||||
|
||||
const controls = control_group.querySelector('.controls');
|
||||
|
||||
this.create(label, controls, description);
|
||||
});
|
||||
},
|
||||
|
||||
createFromClasses: function() {
|
||||
document.querySelectorAll('.rl-popover:not(.rl-moved)').forEach((description) => {
|
||||
const label = description.previousElementSibling;
|
||||
|
||||
if ( ! label) {
|
||||
return;
|
||||
}
|
||||
|
||||
let parent = description.closest('.rl-popover-parent');
|
||||
let position = 'after';
|
||||
|
||||
if ( ! parent) {
|
||||
parent = description.parentElement;
|
||||
position = 'end';
|
||||
}
|
||||
|
||||
this.create(label, parent, description, position);
|
||||
});
|
||||
},
|
||||
|
||||
create: function(label, controls, description, position = 'start') {
|
||||
if ( ! label) {
|
||||
return;
|
||||
}
|
||||
|
||||
description.classList.add('hidden');
|
||||
description.classList.add('rl-moved');
|
||||
|
||||
const popover = document.createElement('div');
|
||||
const popover_inner = document.createElement('div');
|
||||
|
||||
popover.classList.add('rl-admin-popover-container');
|
||||
|
||||
if (description.classList.contains('rl-popover-full')) {
|
||||
popover.classList.add('rl-admin-popover-full');
|
||||
}
|
||||
|
||||
popover_inner.classList.add('rl-admin-popover');
|
||||
popover_inner.innerHTML = description.querySelector('small').innerHTML;
|
||||
|
||||
popover.append(popover_inner);
|
||||
|
||||
const button = document.createElement('span');
|
||||
button.classList.add('icon-info-circle', 'text-muted', 'fs-6', 'ms-1', 'align-text-top');
|
||||
|
||||
label.setAttribute('role', 'button');
|
||||
label.setAttribute('tabindex', '0');
|
||||
|
||||
const action_show = function() {
|
||||
popover.classList.add('show');
|
||||
};
|
||||
const action_hide = function() {
|
||||
popover.classList.remove('show');
|
||||
};
|
||||
|
||||
label.addEventListener('mouseenter', action_show);
|
||||
label.addEventListener('mouseleave', action_hide);
|
||||
label.addEventListener('focus', action_show);
|
||||
label.addEventListener('blur', action_hide);
|
||||
|
||||
label.append(button);
|
||||
|
||||
switch (position) {
|
||||
case 'start':
|
||||
controls.prepend(popover);
|
||||
break;
|
||||
case 'end':
|
||||
controls.append(popover);
|
||||
break;
|
||||
case 'after':
|
||||
default:
|
||||
controls.parentNode.insertBefore(popover, controls.nextSibling);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
removeInlineHelpToggleButton: function() {
|
||||
const toolbar_inlinehelp = document.getElementById('toolbar-inlinehelp');
|
||||
|
||||
if (toolbar_inlinehelp) {
|
||||
toolbar_inlinehelp.remove();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
RegularLabs.AdminFormDescriptions.removeInlineHelpToggleButton();
|
||||
RegularLabs.AdminFormDescriptions.moveLabelDescriptions();
|
||||
RegularLabs.AdminFormDescriptions.createFromClasses();
|
||||
|
||||
document.addEventListener('subform-row-add', () => {
|
||||
document.dispatchEvent(new Event('rl-update-form-descriptions'));
|
||||
});
|
||||
|
||||
document.addEventListener('rl-update-form-descriptions', () => {
|
||||
RegularLabs.AdminFormDescriptions.moveLabelDescriptions();
|
||||
RegularLabs.AdminFormDescriptions.createFromClasses();
|
||||
});
|
||||
})();
|
||||
11
media/regularlabs/js/admin-form-descriptions.min.js
vendored
Normal file
11
media/regularlabs/js/admin-form-descriptions.min.js
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
/*
|
||||
* Copyright © 2024 Regular Labs - All Rights Reserved
|
||||
* GNU General Public License version 2 or later
|
||||
*/
|
||||
(function(){'use strict';window.RegularLabs=window.RegularLabs||{};window.RegularLabs.AdminFormDescriptions=window.RegularLabs.AdminFormDescriptions||{moveLabelDescriptions:function(){document.querySelectorAll('div[id$="-desc"]:not(.rl-moved)').forEach((description)=>{const control_group=description.closest('.control-group');if(!control_group){return;}
|
||||
const label=control_group.querySelector('label');if(!label){return;}
|
||||
const controls=control_group.querySelector('.controls');this.create(label,controls,description);});},createFromClasses:function(){document.querySelectorAll('.rl-popover:not(.rl-moved)').forEach((description)=>{const label=description.previousElementSibling;if(!label){return;}
|
||||
let parent=description.closest('.rl-popover-parent');let position='after';if(!parent){parent=description.parentElement;position='end';}
|
||||
this.create(label,parent,description,position);});},create:function(label,controls,description,position='start'){if(!label){return;}
|
||||
description.classList.add('hidden');description.classList.add('rl-moved');const popover=document.createElement('div');const popover_inner=document.createElement('div');popover.classList.add('rl-admin-popover-container');if(description.classList.contains('rl-popover-full')){popover.classList.add('rl-admin-popover-full');}
|
||||
popover_inner.classList.add('rl-admin-popover');popover_inner.innerHTML=description.querySelector('small').innerHTML;popover.append(popover_inner);const button=document.createElement('span');button.classList.add('icon-info-circle','text-muted','fs-6','ms-1','align-text-top');label.setAttribute('role','button');label.setAttribute('tabindex','0');const action_show=function(){popover.classList.add('show');};const action_hide=function(){popover.classList.remove('show');};label.addEventListener('mouseenter',action_show);label.addEventListener('mouseleave',action_hide);label.addEventListener('focus',action_show);label.addEventListener('blur',action_hide);label.append(button);switch(position){case'start':controls.prepend(popover);break;case'end':controls.append(popover);break;case'after':default:controls.parentNode.insertBefore(popover,controls.nextSibling);break;}},removeInlineHelpToggleButton:function(){const toolbar_inlinehelp=document.getElementById('toolbar-inlinehelp');if(toolbar_inlinehelp){toolbar_inlinehelp.remove();}}};RegularLabs.AdminFormDescriptions.removeInlineHelpToggleButton();RegularLabs.AdminFormDescriptions.moveLabelDescriptions();RegularLabs.AdminFormDescriptions.createFromClasses();document.addEventListener('subform-row-add',()=>{document.dispatchEvent(new Event('rl-update-form-descriptions'));});document.addEventListener('rl-update-form-descriptions',()=>{RegularLabs.AdminFormDescriptions.moveLabelDescriptions();RegularLabs.AdminFormDescriptions.createFromClasses();});})();
|
||||
307
media/regularlabs/js/admin-form.js
Normal file
307
media/regularlabs/js/admin-form.js
Normal file
@ -0,0 +1,307 @@
|
||||
/**
|
||||
* @package Regular Labs Library
|
||||
* @version 24.11.1459
|
||||
*
|
||||
* @author Peter van Westen <info@regularlabs.com>
|
||||
* @link https://regularlabs.com
|
||||
* @copyright Copyright © 2024 Regular Labs All Rights Reserved
|
||||
* @license GNU General Public License version 2 or later
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.RegularLabs = window.RegularLabs || {};
|
||||
|
||||
window.RegularLabs.AdminForm = window.RegularLabs.AdminForm || {
|
||||
setToggleTitleClass: function(input, value) {
|
||||
const panel = input.closest('.rl-panel');
|
||||
|
||||
if ( ! panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
panel.classList.remove('rl-panel-info');
|
||||
panel.classList.remove('rl-panel-success');
|
||||
panel.classList.remove('rl-panel-error');
|
||||
|
||||
switch (value) {
|
||||
case 2:
|
||||
panel.classList.add('rl-panel-error');
|
||||
break;
|
||||
case 1:
|
||||
panel.classList.add('rl-panel-success');
|
||||
break;
|
||||
default:
|
||||
panel.classList.add('rl-panel-info');
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
loadAjaxButton: function(id, url) {
|
||||
const button = document.querySelector(`#${id}`);
|
||||
const icon = button.querySelector("span:nth-child(1)");
|
||||
const message = document.querySelector(`#message_${id}`);
|
||||
|
||||
icon.className = "icon-refresh icon-spin";
|
||||
message.className = "";
|
||||
message.innerHTML = "";
|
||||
|
||||
const constants = `
|
||||
const button = document.querySelector("#${id}");
|
||||
const icon = button.querySelector("span:nth-child(1)");
|
||||
const message = document.querySelector("#message_${id}");
|
||||
`;
|
||||
|
||||
let success = `${constants}
|
||||
Regular.removeClass(button, "btn-warning");
|
||||
Regular.addClass(button, "btn-success");
|
||||
button.querySelector("span:nth-child(1)").className = "icon-ok";
|
||||
if (data) {
|
||||
Regular.addClass(message, "alert alert-success alert-noclose alert-inline");
|
||||
message.innerHTML = data;
|
||||
}
|
||||
`;
|
||||
|
||||
let error = `${constants}
|
||||
Regular.removeClass(button, "btn-success");
|
||||
Regular.addClass(button, "btn-warning");
|
||||
button.querySelector("span:nth-child(1)").className = "icon-warning";
|
||||
|
||||
if(data){
|
||||
let error = data;
|
||||
if(data.statusText) {
|
||||
error = data.statusText;
|
||||
if(data.responseText.test(/<blockquote>/)) {
|
||||
error = data.responseText.replace(/^[.\\s\\S]*?<blockquote>([.\\s\\S]*?)<\\/blockquote>[.\\s\\S]*$/gm, "$1");
|
||||
}
|
||||
}
|
||||
Regular.addClass(message, "alert alert-danger alert-noclose alert-inline");
|
||||
message.innerHTML = error;
|
||||
}
|
||||
`;
|
||||
|
||||
success = `
|
||||
if(data == "" || data.substring(0,1) == "+") {
|
||||
data = data.trim().replace(/^[+]/, "");
|
||||
${success}
|
||||
} else {
|
||||
data = data.trim().replace(/^[-]/, "");
|
||||
${error}
|
||||
}
|
||||
`;
|
||||
|
||||
RegularLabs.Scripts.loadAjax(url, success, error);
|
||||
},
|
||||
|
||||
loadAjaxFields: function() {
|
||||
if (typeof RegularLabs.Scripts === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll('textarea[data-rl-ajax]').forEach((el) => {
|
||||
this.loadAjaxField(el);
|
||||
});
|
||||
},
|
||||
|
||||
loadAjaxField: function(el) {
|
||||
if (el.dataset['rlAjaxDone']) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! this.isInView(el)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const wrapper = el.closest('.rl-ajax-wrapper');
|
||||
|
||||
if (wrapper) {
|
||||
wrapper.classList.add('loaded');
|
||||
}
|
||||
|
||||
let attributes = JSON.parse(el.dataset['rlAjax']);
|
||||
|
||||
attributes.id = el.id;
|
||||
attributes.name = el.name;
|
||||
|
||||
const query_attributes = createCompressedAttributes(attributes);
|
||||
|
||||
const url = `index.php?option=com_ajax&plugin=regularlabs&format=raw&fieldid=${el.id}&${query_attributes}`;
|
||||
|
||||
const set_field = `const field = document.querySelector("#${el.id}");`;
|
||||
const replace_field = `if(field && '${el.id}'.indexOf('X__') < 0){` + 'field.parentNode.replaceChild(' + 'Regular.createElementFromHTML(data),' + `document.querySelector("#${el.id}")` + ');' + '}';
|
||||
const remove_spinner = `if(field && '${el.id}'.indexOf('X__') < 0){` + 'field.parentNode.querySelectorAll(`.rl-spinner`).forEach((el) => {' + 'el.remove();' + '})' + '}';
|
||||
|
||||
let success = replace_field;
|
||||
|
||||
if (attributes.treeselect) {
|
||||
success += `if(data.indexOf('rl-treeselect-') > -1){RegularLabs.TreeSelect.init('${el.id}');}`;
|
||||
}
|
||||
|
||||
success += `RegularLabs.AdminForm.updateShowOn('${attributes.name}');`;
|
||||
|
||||
const error = `${set_field}${remove_spinner}`;
|
||||
success = `if(data){${set_field}${remove_spinner}${success}}`;
|
||||
|
||||
el.dataset['rlAjaxDone'] = 1;
|
||||
|
||||
RegularLabs.Scripts.addToLoadAjaxList(url, success, error);
|
||||
|
||||
function createCompressedAttributes(object) {
|
||||
const string = JSON.stringify(object);
|
||||
|
||||
const compressed = btoa(string);
|
||||
const chunk_length = Math.ceil(compressed.length / 10);
|
||||
const chunks = compressed.match(new RegExp('.{1,' + chunk_length + '}', 'g'));
|
||||
|
||||
const attributes = [];
|
||||
|
||||
chunks.forEach((chunk, i) => {
|
||||
attributes.push(`rlatt_${i}=${encodeURIComponent(chunk)}`);
|
||||
});
|
||||
|
||||
return attributes.join('&');
|
||||
}
|
||||
},
|
||||
|
||||
updateShowOn: function(fieldName) {
|
||||
fieldName = fieldName.replace(/\[\]$/g, '');
|
||||
const showonFields = document.querySelectorAll('[data-showon]');
|
||||
|
||||
showonFields.forEach(field => {
|
||||
if ( ! field.hasAttribute('data-showon-initialised')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const jsonData = field.getAttribute('data-showon') || '';
|
||||
const showOnData = JSON.parse(jsonData);
|
||||
|
||||
showOnData.forEach((showOnItem) => {
|
||||
if (showOnItem.field !== fieldName) {
|
||||
return;
|
||||
}
|
||||
|
||||
field.removeAttribute('data-showon-initialised');
|
||||
Joomla.Showon.initialise(field.parentElement);
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
isInView: function(el) {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
|
||||
|
||||
if ((rect.bottom < 0 || rect.top - viewHeight >= 0)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// check if element is inside any hidden parents
|
||||
let parent = el.parentElement;
|
||||
|
||||
while (parent) {
|
||||
if (window.getComputedStyle(parent).display === 'none') {
|
||||
return false;
|
||||
}
|
||||
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
removeEmptyControlGroups: function() {
|
||||
// remove all empty control groups
|
||||
document.querySelectorAll('div.control-group > div.control-label label').forEach((el) => {
|
||||
if (el.innerHTML.trim() === '') {
|
||||
el.remove();
|
||||
}
|
||||
});
|
||||
document.querySelectorAll('div.control-group > div.control-label,div.control-group > div.controls').forEach((el) => {
|
||||
if (el.innerHTML.trim() === '') {
|
||||
el.remove();
|
||||
}
|
||||
});
|
||||
document.querySelectorAll('div.control-group').forEach((el) => {
|
||||
if (el.innerHTML.trim() === '') {
|
||||
el.remove();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setParentClassOnCheckboxes: function() {
|
||||
document.querySelectorAll('fieldset.rl-form-checkboxes-set-parent-classes input').forEach((el) => {
|
||||
this.setParentClassOnCheckbox(el);
|
||||
document.addEventListener('change', (event) => {
|
||||
this.setParentClassOnCheckbox(el);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
setParentClassOnCheckbox: function(el) {
|
||||
el.parentElement.classList.toggle('rl-checkbox-checked', el.checked);
|
||||
},
|
||||
|
||||
updateColoursOnSelectboxes: function() {
|
||||
document.querySelectorAll('[class*="rl-form-select-color"]').forEach((el) => {
|
||||
this.updateColoursOnSelectbox(el);
|
||||
document.addEventListener('change', (event) => {
|
||||
this.updateColoursOnSelectbox(el);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
updateColoursOnSelectbox: function(el) {
|
||||
const value = parseInt(el.value, 10); // Add class on page load
|
||||
|
||||
el.classList.remove('form-select-success', 'form-select-danger', 'rl-form-select-info', 'rl-form-select-ghosted');
|
||||
|
||||
if (value === -1) {
|
||||
el.classList.add('rl-form-select-ghosted');
|
||||
return;
|
||||
}
|
||||
|
||||
if (el.classList.contains('rl-form-select-color-has-global') && value === -2) {
|
||||
el.classList.add('rl-form-select-info');
|
||||
}
|
||||
|
||||
if ( ! el.classList.contains('rl-form-select-color-has-states')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (value === -2 || value === 0) {
|
||||
el.classList.add('form-select-danger');
|
||||
return;
|
||||
}
|
||||
|
||||
if (value === 1) {
|
||||
el.classList.add('form-select-success');
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
updateForm: function() {
|
||||
this.loadAjaxFields();
|
||||
this.removeEmptyControlGroups();
|
||||
}
|
||||
};
|
||||
|
||||
RegularLabs.AdminForm.updateForm();
|
||||
RegularLabs.AdminForm.setParentClassOnCheckboxes();
|
||||
RegularLabs.AdminForm.updateColoursOnSelectboxes();
|
||||
|
||||
document.addEventListener('joomla:showon-show', (event) => {
|
||||
event.target.querySelectorAll('.CodeMirror').forEach((editor) => {
|
||||
editor.CodeMirror.refresh();
|
||||
});
|
||||
});
|
||||
document.addEventListener('joomla.tab.show', (event) => {
|
||||
document.querySelectorAll('.CodeMirror').forEach((editor) => {
|
||||
editor.CodeMirror.refresh();
|
||||
});
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
RegularLabs.AdminForm.updateForm();
|
||||
}, 1000);
|
||||
})();
|
||||
23
media/regularlabs/js/admin-form.min.js
vendored
Normal file
23
media/regularlabs/js/admin-form.min.js
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* Copyright © 2024 Regular Labs - All Rights Reserved
|
||||
* GNU General Public License version 2 or later
|
||||
*/
|
||||
(function(){'use strict';window.RegularLabs=window.RegularLabs||{};window.RegularLabs.AdminForm=window.RegularLabs.AdminForm||{setToggleTitleClass:function(input,value){const panel=input.closest('.rl-panel');if(!panel){return;}
|
||||
panel.classList.remove('rl-panel-info');panel.classList.remove('rl-panel-success');panel.classList.remove('rl-panel-error');switch(value){case 2:panel.classList.add('rl-panel-error');break;case 1:panel.classList.add('rl-panel-success');break;default:panel.classList.add('rl-panel-info');break;}},loadAjaxButton:function(id,url){const button=document.querySelector(`#${id}`);const icon=button.querySelector("span:nth-child(1)");const message=document.querySelector(`#message_${id}`);icon.className="icon-refresh icon-spin";message.className="";message.innerHTML="";const constants=`const button=document.querySelector("#${id}");const icon=button.querySelector("span:nth-child(1)");const message=document.querySelector("#message_${id}");`;let success=`${constants}
|
||||
Regular.removeClass(button,"btn-warning");Regular.addClass(button,"btn-success");button.querySelector("span:nth-child(1)").className="icon-ok";if(data){Regular.addClass(message,"alert alert-success alert-noclose alert-inline");message.innerHTML=data;}`;let error=`${constants}
|
||||
Regular.removeClass(button,"btn-success");Regular.addClass(button,"btn-warning");button.querySelector("span:nth-child(1)").className="icon-warning";if(data){let error=data;if(data.statusText){error=data.statusText;if(data.responseText.test(/<blockquote>/)){error=data.responseText.replace(/^[.\\s\\S]*?<blockquote>([.\\s\\S]*?)<\\/blockquote>[.\\s\\S]*$/gm,"$1");}}
|
||||
Regular.addClass(message,"alert alert-danger alert-noclose alert-inline");message.innerHTML=error;}`;success=`if(data==""||data.substring(0,1)=="+"){data=data.trim().replace(/^[+]/,"");${success}}else{data=data.trim().replace(/^[-]/,"");${error}}`;RegularLabs.Scripts.loadAjax(url,success,error);},loadAjaxFields:function(){if(typeof RegularLabs.Scripts==='undefined'){return;}
|
||||
document.querySelectorAll('textarea[data-rl-ajax]').forEach((el)=>{this.loadAjaxField(el);});},loadAjaxField:function(el){if(el.dataset['rlAjaxDone']){return;}
|
||||
if(!this.isInView(el)){return;}
|
||||
const wrapper=el.closest('.rl-ajax-wrapper');if(wrapper){wrapper.classList.add('loaded');}
|
||||
let attributes=JSON.parse(el.dataset['rlAjax']);attributes.id=el.id;attributes.name=el.name;const query_attributes=createCompressedAttributes(attributes);const url=`index.php?option=com_ajax&plugin=regularlabs&format=raw&fieldid=${el.id}&${query_attributes}`;const set_field=`const field=document.querySelector("#${el.id}");`;const replace_field=`if(field&&'${el.id}'.indexOf('X__')<0){`+'field.parentNode.replaceChild('+'Regular.createElementFromHTML(data),'+`document.querySelector("#${el.id}")`+');'+'}';const remove_spinner=`if(field&&'${el.id}'.indexOf('X__')<0){`+'field.parentNode.querySelectorAll(`.rl-spinner`).forEach((el) => {'+'el.remove();'+'})'+'}';let success=replace_field;if(attributes.treeselect){success+=`if(data.indexOf('rl-treeselect-')>-1){RegularLabs.TreeSelect.init('${el.id}');}`;}
|
||||
success+=`RegularLabs.AdminForm.updateShowOn('${attributes.name}');`;const error=`${set_field}${remove_spinner}`;success=`if(data){${set_field}${remove_spinner}${success}}`;el.dataset['rlAjaxDone']=1;RegularLabs.Scripts.addToLoadAjaxList(url,success,error);function createCompressedAttributes(object){const string=JSON.stringify(object);const compressed=btoa(string);const chunk_length=Math.ceil(compressed.length/10);const chunks=compressed.match(new RegExp('.{1,'+chunk_length+'}','g'));const attributes=[];chunks.forEach((chunk,i)=>{attributes.push(`rlatt_${i}=${encodeURIComponent(chunk)}`);});return attributes.join('&');}},updateShowOn:function(fieldName){fieldName=fieldName.replace(/\[\]$/g,'');const showonFields=document.querySelectorAll('[data-showon]');showonFields.forEach(field=>{if(!field.hasAttribute('data-showon-initialised')){return;}
|
||||
const jsonData=field.getAttribute('data-showon')||'';const showOnData=JSON.parse(jsonData);showOnData.forEach((showOnItem)=>{if(showOnItem.field!==fieldName){return;}
|
||||
field.removeAttribute('data-showon-initialised');Joomla.Showon.initialise(field.parentElement);});});},isInView:function(el){const rect=el.getBoundingClientRect();const viewHeight=Math.max(document.documentElement.clientHeight,window.innerHeight);if((rect.bottom<0||rect.top-viewHeight>=0)){return false;}
|
||||
let parent=el.parentElement;while(parent){if(window.getComputedStyle(parent).display==='none'){return false;}
|
||||
parent=parent.parentElement;}
|
||||
return true;},removeEmptyControlGroups:function(){document.querySelectorAll('div.control-group > div.control-label label').forEach((el)=>{if(el.innerHTML.trim()===''){el.remove();}});document.querySelectorAll('div.control-group > div.control-label,div.control-group > div.controls').forEach((el)=>{if(el.innerHTML.trim()===''){el.remove();}});document.querySelectorAll('div.control-group').forEach((el)=>{if(el.innerHTML.trim()===''){el.remove();}});},setParentClassOnCheckboxes:function(){document.querySelectorAll('fieldset.rl-form-checkboxes-set-parent-classes input').forEach((el)=>{this.setParentClassOnCheckbox(el);document.addEventListener('change',(event)=>{this.setParentClassOnCheckbox(el);});});},setParentClassOnCheckbox:function(el){el.parentElement.classList.toggle('rl-checkbox-checked',el.checked);},updateColoursOnSelectboxes:function(){document.querySelectorAll('[class*="rl-form-select-color"]').forEach((el)=>{this.updateColoursOnSelectbox(el);document.addEventListener('change',(event)=>{this.updateColoursOnSelectbox(el);});});},updateColoursOnSelectbox:function(el){const value=parseInt(el.value,10);el.classList.remove('form-select-success','form-select-danger','rl-form-select-info','rl-form-select-ghosted');if(value===-1){el.classList.add('rl-form-select-ghosted');return;}
|
||||
if(el.classList.contains('rl-form-select-color-has-global')&&value===-2){el.classList.add('rl-form-select-info');}
|
||||
if(!el.classList.contains('rl-form-select-color-has-states')){return;}
|
||||
if(value===-2||value===0){el.classList.add('form-select-danger');return;}
|
||||
if(value===1){el.classList.add('form-select-success');return;}},updateForm:function(){this.loadAjaxFields();this.removeEmptyControlGroups();}};RegularLabs.AdminForm.updateForm();RegularLabs.AdminForm.setParentClassOnCheckboxes();RegularLabs.AdminForm.updateColoursOnSelectboxes();document.addEventListener('joomla:showon-show',(event)=>{event.target.querySelectorAll('.CodeMirror').forEach((editor)=>{editor.CodeMirror.refresh();});});document.addEventListener('joomla.tab.show',(event)=>{document.querySelectorAll('.CodeMirror').forEach((editor)=>{editor.CodeMirror.refresh();});});setInterval(()=>{RegularLabs.AdminForm.updateForm();},1000);})();
|
||||
341
media/regularlabs/js/downloadkey.js
Normal file
341
media/regularlabs/js/downloadkey.js
Normal file
@ -0,0 +1,341 @@
|
||||
/**
|
||||
* @package Regular Labs Library
|
||||
* @version 24.11.1459
|
||||
*
|
||||
* @author Peter van Westen <info@regularlabs.com>
|
||||
* @link https://regularlabs.com
|
||||
* @copyright Copyright © 2024 Regular Labs All Rights Reserved
|
||||
* @license GNU General Public License version 2 or later
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.RegularLabs = window.RegularLabs || {};
|
||||
|
||||
window.RegularLabs.DownloadKey = window.RegularLabs.DownloadKey || {
|
||||
init: function() {
|
||||
const downloadKeys = document.querySelectorAll('div.rl-download-key');
|
||||
|
||||
downloadKeys.forEach((container) => {
|
||||
const spinner = container.querySelector('span.rl-spinner');
|
||||
const inputField = container.querySelector('input.rl-code-field');
|
||||
const editButton = container.querySelector('.button-edit');
|
||||
const applyButton = container.querySelector('.button-apply');
|
||||
const cancelButton = container.querySelector('.button-cancel');
|
||||
const emptyError = container.querySelector('.key-error-empty');
|
||||
const localError = container.querySelector('.key-error-local');
|
||||
const modal = container.querySelector(`#downloadKeyModal_${inputField.id}`);
|
||||
const extension = inputField.dataset['keyExtension'];
|
||||
|
||||
let key = '';
|
||||
|
||||
if (modal) {
|
||||
// Move modal to end of body, to prevent it getting hidden if inside hidden tab
|
||||
document.body.appendChild(modal);
|
||||
|
||||
modal.addEventListener('shown.bs.modal', () => {
|
||||
const modalInputField = modal.querySelector('input.rl-download-key-field');
|
||||
modalInputField.focus();
|
||||
});
|
||||
}
|
||||
|
||||
const getKey = async function() {
|
||||
const url = 'index.php?option=com_ajax&plugin=regularlabs&format=raw&getDownloadKey=1';
|
||||
|
||||
const response = await RegularLabs.Scripts.loadUrl(url);
|
||||
|
||||
if (response.status !== 200) {
|
||||
handleGetKeyFail();
|
||||
return;
|
||||
}
|
||||
|
||||
const responseText = response.responseText.trim();
|
||||
|
||||
handleGetKeySuccess(responseText);
|
||||
};
|
||||
|
||||
const handleGetKeySuccess = async function(data) {
|
||||
if ( ! data.match(/^[a-z0-9]*$/i)) {
|
||||
handleGetKeyFail();
|
||||
return;
|
||||
}
|
||||
|
||||
key = data;
|
||||
|
||||
await checkDownloadKey();
|
||||
|
||||
reset();
|
||||
|
||||
addListeners();
|
||||
};
|
||||
|
||||
const handleGetKeyFail = function() {
|
||||
localError.classList.remove('hidden');
|
||||
|
||||
showModal();
|
||||
};
|
||||
|
||||
const checkDownloadKey = async function() {
|
||||
const result = await RegularLabs.DownloadKey.check(extension, key, container, false);
|
||||
|
||||
if (['empty', 'invalid'].indexOf(result.error) > -1) {
|
||||
showModal();
|
||||
}
|
||||
};
|
||||
|
||||
const showModal = function() {
|
||||
if ( ! modal) {
|
||||
return;
|
||||
}
|
||||
|
||||
RegularLabs.DownloadKey.check(extension, key, modal);
|
||||
|
||||
if (window.bootstrap && window.bootstrap.Modal && ! window.bootstrap.Modal.getInstance(modal)) {
|
||||
Joomla.initialiseModal(modal, {
|
||||
isJoomla: true
|
||||
});
|
||||
}
|
||||
|
||||
window.bootstrap.Modal.getInstance(modal).show();
|
||||
};
|
||||
|
||||
const addListeners = function() {
|
||||
inputField.addEventListener('focus', selectField);
|
||||
inputField.addEventListener('keydown', handleKeyPressField);
|
||||
document.addEventListener('mousedown', deselectField);
|
||||
editButton.addEventListener('click', () => {
|
||||
inputField.focus();
|
||||
});
|
||||
applyButton.addEventListener('click', clickSave);
|
||||
cancelButton.addEventListener('click', clickCancel);
|
||||
};
|
||||
|
||||
const selectField = function() {
|
||||
inputField.value = '';
|
||||
inputField.classList.remove('inactive');
|
||||
editButton.classList.add('hidden');
|
||||
applyButton.classList.remove('hidden');
|
||||
cancelButton.classList.remove('hidden');
|
||||
};
|
||||
|
||||
const handleKeyPressField = function(event) {
|
||||
switch (event.keyCode) {
|
||||
case 13: // ENTER
|
||||
save();
|
||||
break;
|
||||
|
||||
case 27: // ESC
|
||||
cancel();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const deselectField = function(event) {
|
||||
if (event.target.closest('div.rl-download-key') === container) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputField.classList.contains('inactive')) {
|
||||
return;
|
||||
}
|
||||
|
||||
cancel();
|
||||
};
|
||||
|
||||
const clickSave = function(event) {
|
||||
event.preventDefault();
|
||||
save();
|
||||
};
|
||||
|
||||
const clickCancel = function(event) {
|
||||
event.preventDefault();
|
||||
cancel();
|
||||
};
|
||||
|
||||
const save = async function() {
|
||||
const saved = await RegularLabs.DownloadKey.save(extension, inputField.value, container);
|
||||
|
||||
if ( ! saved) {
|
||||
return;
|
||||
}
|
||||
|
||||
key = inputField.value;
|
||||
|
||||
container.dataset.callback && eval(`(() => {
|
||||
${container.dataset.callback}
|
||||
})()`);
|
||||
|
||||
reset();
|
||||
};
|
||||
|
||||
const cancel = async function() {
|
||||
reset();
|
||||
|
||||
RegularLabs.DownloadKey.resetErrors(container);
|
||||
RegularLabs.DownloadKey.check(extension, key, container);
|
||||
};
|
||||
|
||||
const reset = function() {
|
||||
inputField.value = cloak(key);
|
||||
|
||||
inputField.blur();
|
||||
spinner.classList.add('hidden');
|
||||
inputField.classList.remove('hidden');
|
||||
inputField.classList.add('inactive');
|
||||
editButton.classList.remove('hidden');
|
||||
applyButton.classList.add('hidden');
|
||||
cancelButton.classList.add('hidden');
|
||||
};
|
||||
|
||||
const cloak = function(string) {
|
||||
return RegularLabs.DownloadKey.cloak(string, inputField.dataset['keyCloakLength']);
|
||||
};
|
||||
|
||||
getKey();
|
||||
});
|
||||
},
|
||||
|
||||
cloak: function(string, cloakLength = 4) {
|
||||
if (string.length <= cloakLength) {
|
||||
return string;
|
||||
}
|
||||
|
||||
return "*".repeat(string.length - cloakLength) + string.substr(-cloakLength);
|
||||
},
|
||||
|
||||
showError: function(type, element, focus = true) {
|
||||
element.querySelector(`.key-error-${type}`) && element.querySelector(`.key-error-${type}`).classList.remove('hidden');
|
||||
|
||||
if (type === 'empty' || type === 'expired' || type === 'invalid') {
|
||||
element.querySelector('div.rl-download-key-wrapper') && element.querySelector('div.rl-download-key-wrapper').classList.remove('hidden');
|
||||
}
|
||||
|
||||
if ( ! focus) {
|
||||
return;
|
||||
}
|
||||
|
||||
const inputField = element.querySelector('input.rl-download-key-field');
|
||||
|
||||
inputField.classList.add('invalid');
|
||||
inputField.click();
|
||||
},
|
||||
|
||||
resetErrors: function(element) {
|
||||
const inputField = element.querySelector('input.rl-download-key-field');
|
||||
|
||||
inputField.classList.remove('invalid');
|
||||
|
||||
element.querySelectorAll('[class*="key-error-"]').forEach((error) => {
|
||||
error.classList.add('hidden');
|
||||
});
|
||||
},
|
||||
|
||||
save: function(extension, key, element) {
|
||||
return new Promise(async (resolve) => {
|
||||
|
||||
const result = await RegularLabs.DownloadKey.check(extension, key, element);
|
||||
|
||||
if ( ! result.pass) {
|
||||
resolve(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await RegularLabs.DownloadKey.store(extension, key);
|
||||
|
||||
if (window.bootstrap.Modal && window.bootstrap.Modal.getInstance(element)) {
|
||||
const mainId = element.id.replace('downloadKeyModal_', 'downloadKeyWrapper_');
|
||||
const mainElement = document.querySelector(`#${mainId}`);
|
||||
RegularLabs.DownloadKey.resetErrors(mainElement);
|
||||
await RegularLabs.DownloadKey.check(extension, key, mainElement);
|
||||
window.bootstrap.Modal.getInstance(element).hide();
|
||||
} else {
|
||||
RegularLabs.DownloadKey.resetErrors(element);
|
||||
await RegularLabs.DownloadKey.check(extension, key, element);
|
||||
}
|
||||
|
||||
resolve(true);
|
||||
});
|
||||
},
|
||||
|
||||
check: function(extension, key, element, focus = true) {
|
||||
return new Promise(async (resolve) => {
|
||||
const url = `index.php?option=com_ajax&plugin=regularlabs&format=raw&checkDownloadKey=1&extension=${extension}&key=${key}`;
|
||||
const inputField = element.querySelector('input.rl-download-key-field');
|
||||
|
||||
RegularLabs.DownloadKey.resetErrors(element);
|
||||
|
||||
const result = {pass: false, error: ''};
|
||||
|
||||
if ( ! key) {
|
||||
result.error = 'empty';
|
||||
RegularLabs.DownloadKey.showError(result.error, element, focus);
|
||||
inputField.value = RegularLabs.DownloadKey.cloak(key);
|
||||
|
||||
result.pass = true;
|
||||
resolve(result);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await RegularLabs.Scripts.loadUrl(url);
|
||||
|
||||
if (response.status !== 200) {
|
||||
result.error = 'local';
|
||||
RegularLabs.DownloadKey.showError(result.error, element, false);
|
||||
|
||||
resolve(result);
|
||||
return;
|
||||
}
|
||||
|
||||
const responseText = response.responseText.trim();
|
||||
|
||||
if ( ! responseText || responseText.charAt(0) !== '{') {
|
||||
result.error = 'external';
|
||||
RegularLabs.DownloadKey.showError(result.error, element, false);
|
||||
|
||||
resolve(result);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = JSON.parse(responseText);
|
||||
|
||||
if ( ! data.valid) {
|
||||
result.error = 'invalid';
|
||||
RegularLabs.DownloadKey.showError(result.error, element, focus);
|
||||
|
||||
resolve(result);
|
||||
return;
|
||||
}
|
||||
|
||||
const is_modal = element.id.indexOf('downloadKeyModal_') > -1;
|
||||
|
||||
if ( ! data.active && is_modal) {
|
||||
result.error = 'expired';
|
||||
RegularLabs.DownloadKey.showError(result.error, element, focus);
|
||||
|
||||
resolve(result);
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! data.active) {
|
||||
RegularLabs.DownloadKey.showError('expired', element, false);
|
||||
}
|
||||
|
||||
inputField.value = RegularLabs.DownloadKey.cloak(key);
|
||||
|
||||
result.pass = true;
|
||||
resolve(result);
|
||||
});
|
||||
},
|
||||
|
||||
store: function(extension, key) {
|
||||
const url = `index.php?option=com_ajax&plugin=regularlabs&format=raw&saveDownloadKey=1&key=${key}`;
|
||||
return RegularLabs.Scripts.loadUrl(url);
|
||||
},
|
||||
};
|
||||
|
||||
RegularLabs.DownloadKey.init();
|
||||
})();
|
||||
24
media/regularlabs/js/downloadkey.min.js
vendored
Normal file
24
media/regularlabs/js/downloadkey.min.js
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
/*
|
||||
* Copyright © 2024 Regular Labs - All Rights Reserved
|
||||
* GNU General Public License version 2 or later
|
||||
*/
|
||||
(function(){'use strict';window.RegularLabs=window.RegularLabs||{};window.RegularLabs.DownloadKey=window.RegularLabs.DownloadKey||{init:function(){const downloadKeys=document.querySelectorAll('div.rl-download-key');downloadKeys.forEach((container)=>{const spinner=container.querySelector('span.rl-spinner');const inputField=container.querySelector('input.rl-code-field');const editButton=container.querySelector('.button-edit');const applyButton=container.querySelector('.button-apply');const cancelButton=container.querySelector('.button-cancel');const emptyError=container.querySelector('.key-error-empty');const localError=container.querySelector('.key-error-local');const modal=container.querySelector(`#downloadKeyModal_${inputField.id}`);const extension=inputField.dataset['keyExtension'];let key='';if(modal){document.body.appendChild(modal);modal.addEventListener('shown.bs.modal',()=>{const modalInputField=modal.querySelector('input.rl-download-key-field');modalInputField.focus();});}
|
||||
const getKey=async function(){const url='index.php?option=com_ajax&plugin=regularlabs&format=raw&getDownloadKey=1';const response=await RegularLabs.Scripts.loadUrl(url);if(response.status!==200){handleGetKeyFail();return;}
|
||||
const responseText=response.responseText.trim();handleGetKeySuccess(responseText);};const handleGetKeySuccess=async function(data){if(!data.match(/^[a-z0-9]*$/i)){handleGetKeyFail();return;}
|
||||
key=data;await checkDownloadKey();reset();addListeners();};const handleGetKeyFail=function(){localError.classList.remove('hidden');showModal();};const checkDownloadKey=async function(){const result=await RegularLabs.DownloadKey.check(extension,key,container,false);if(['empty','invalid'].indexOf(result.error)>-1){showModal();}};const showModal=function(){if(!modal){return;}
|
||||
RegularLabs.DownloadKey.check(extension,key,modal);if(window.bootstrap&&window.bootstrap.Modal&&!window.bootstrap.Modal.getInstance(modal)){Joomla.initialiseModal(modal,{isJoomla:true});}
|
||||
window.bootstrap.Modal.getInstance(modal).show();};const addListeners=function(){inputField.addEventListener('focus',selectField);inputField.addEventListener('keydown',handleKeyPressField);document.addEventListener('mousedown',deselectField);editButton.addEventListener('click',()=>{inputField.focus();});applyButton.addEventListener('click',clickSave);cancelButton.addEventListener('click',clickCancel);};const selectField=function(){inputField.value='';inputField.classList.remove('inactive');editButton.classList.add('hidden');applyButton.classList.remove('hidden');cancelButton.classList.remove('hidden');};const handleKeyPressField=function(event){switch(event.keyCode){case 13:save();break;case 27:cancel();break;default:break;}};const deselectField=function(event){if(event.target.closest('div.rl-download-key')===container){return;}
|
||||
if(inputField.classList.contains('inactive')){return;}
|
||||
cancel();};const clickSave=function(event){event.preventDefault();save();};const clickCancel=function(event){event.preventDefault();cancel();};const save=async function(){const saved=await RegularLabs.DownloadKey.save(extension,inputField.value,container);if(!saved){return;}
|
||||
key=inputField.value;container.dataset.callback&&eval(`(()=>{${container.dataset.callback}})()`);reset();};const cancel=async function(){reset();RegularLabs.DownloadKey.resetErrors(container);RegularLabs.DownloadKey.check(extension,key,container);};const reset=function(){inputField.value=cloak(key);inputField.blur();spinner.classList.add('hidden');inputField.classList.remove('hidden');inputField.classList.add('inactive');editButton.classList.remove('hidden');applyButton.classList.add('hidden');cancelButton.classList.add('hidden');};const cloak=function(string){return RegularLabs.DownloadKey.cloak(string,inputField.dataset['keyCloakLength']);};getKey();});},cloak:function(string,cloakLength=4){if(string.length<=cloakLength){return string;}
|
||||
return"*".repeat(string.length-cloakLength)+string.substr(-cloakLength);},showError:function(type,element,focus=true){element.querySelector(`.key-error-${type}`)&&element.querySelector(`.key-error-${type}`).classList.remove('hidden');if(type==='empty'||type==='expired'||type==='invalid'){element.querySelector('div.rl-download-key-wrapper')&&element.querySelector('div.rl-download-key-wrapper').classList.remove('hidden');}
|
||||
if(!focus){return;}
|
||||
const inputField=element.querySelector('input.rl-download-key-field');inputField.classList.add('invalid');inputField.click();},resetErrors:function(element){const inputField=element.querySelector('input.rl-download-key-field');inputField.classList.remove('invalid');element.querySelectorAll('[class*="key-error-"]').forEach((error)=>{error.classList.add('hidden');});},save:function(extension,key,element){return new Promise(async(resolve)=>{const result=await RegularLabs.DownloadKey.check(extension,key,element);if(!result.pass){resolve(false);return;}
|
||||
await RegularLabs.DownloadKey.store(extension,key);if(window.bootstrap.Modal&&window.bootstrap.Modal.getInstance(element)){const mainId=element.id.replace('downloadKeyModal_','downloadKeyWrapper_');const mainElement=document.querySelector(`#${mainId}`);RegularLabs.DownloadKey.resetErrors(mainElement);await RegularLabs.DownloadKey.check(extension,key,mainElement);window.bootstrap.Modal.getInstance(element).hide();}else{RegularLabs.DownloadKey.resetErrors(element);await RegularLabs.DownloadKey.check(extension,key,element);}
|
||||
resolve(true);});},check:function(extension,key,element,focus=true){return new Promise(async(resolve)=>{const url=`index.php?option=com_ajax&plugin=regularlabs&format=raw&checkDownloadKey=1&extension=${extension}&key=${key}`;const inputField=element.querySelector('input.rl-download-key-field');RegularLabs.DownloadKey.resetErrors(element);const result={pass:false,error:''};if(!key){result.error='empty';RegularLabs.DownloadKey.showError(result.error,element,focus);inputField.value=RegularLabs.DownloadKey.cloak(key);result.pass=true;resolve(result);return;}
|
||||
const response=await RegularLabs.Scripts.loadUrl(url);if(response.status!==200){result.error='local';RegularLabs.DownloadKey.showError(result.error,element,false);resolve(result);return;}
|
||||
const responseText=response.responseText.trim();if(!responseText||responseText.charAt(0)!=='{'){result.error='external';RegularLabs.DownloadKey.showError(result.error,element,false);resolve(result);return;}
|
||||
const data=JSON.parse(responseText);if(!data.valid){result.error='invalid';RegularLabs.DownloadKey.showError(result.error,element,focus);resolve(result);return;}
|
||||
const is_modal=element.id.indexOf('downloadKeyModal_')>-1;if(!data.active&&is_modal){result.error='expired';RegularLabs.DownloadKey.showError(result.error,element,focus);resolve(result);return;}
|
||||
if(!data.active){RegularLabs.DownloadKey.showError('expired',element,false);}
|
||||
inputField.value=RegularLabs.DownloadKey.cloak(key);result.pass=true;resolve(result);});},store:function(extension,key){const url=`index.php?option=com_ajax&plugin=regularlabs&format=raw&saveDownloadKey=1&key=${key}`;return RegularLabs.Scripts.loadUrl(url);},};RegularLabs.DownloadKey.init();})();
|
||||
498
media/regularlabs/js/mini-colors.js
Normal file
498
media/regularlabs/js/mini-colors.js
Normal file
@ -0,0 +1,498 @@
|
||||
/**
|
||||
* @package Regular Labs Library
|
||||
* @version 24.11.1459
|
||||
*
|
||||
* @author Peter van Westen <info@regularlabs.com>
|
||||
* @link https://regularlabs.com
|
||||
* @copyright Copyright © 2024 Regular Labs All Rights Reserved
|
||||
* @license GNU General Public License version 2 or later
|
||||
*/
|
||||
|
||||
(function(window, document, Math) {
|
||||
var picker, currentEl, oldColor;
|
||||
|
||||
// Default settings
|
||||
var settings = {
|
||||
el : '[data-rl-mini-colors]',
|
||||
parent : null,
|
||||
wrap : true,
|
||||
margin : 2,
|
||||
swatches : [],
|
||||
swatchesOnly: false,
|
||||
alpha : true,
|
||||
autoClose : false,
|
||||
|
||||
a11y: {
|
||||
open : 'Open color picker',
|
||||
swatch: 'Color swatch',
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Configure the color picker.
|
||||
* @param {object} options Configuration options.
|
||||
*/
|
||||
function configure(options) {
|
||||
if (typeof options !== 'object') {
|
||||
return;
|
||||
}
|
||||
|
||||
for (var key in options) {
|
||||
switch (key) {
|
||||
case 'el':
|
||||
bindFields(options.el);
|
||||
if (options.wrap !== false) {
|
||||
wrapFields(options.el);
|
||||
}
|
||||
break;
|
||||
case 'parent':
|
||||
settings.parent = document.querySelector(options.parent);
|
||||
if (settings.parent) {
|
||||
settings.parent.appendChild(picker);
|
||||
}
|
||||
break;
|
||||
case 'margin':
|
||||
options.margin *= 1;
|
||||
settings.margin = ! isNaN(options.margin) ? options.margin : settings.margin;
|
||||
break;
|
||||
case 'wrap':
|
||||
if (options.el && options.wrap) {
|
||||
wrapFields(options.el);
|
||||
}
|
||||
break;
|
||||
case 'swatches':
|
||||
if (Array.isArray(options.swatches)) {
|
||||
(function() {
|
||||
var swatches = [];
|
||||
|
||||
options.swatches.forEach(function(swatch, i) {
|
||||
swatches.push("<button id=\"rl-mini-colors-swatch-" + i + "\" class=\"rl-mini-colors-button\" aria-labelledby=\"rl-mini-colors-swatch-label rl-mini-colors-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>");
|
||||
});
|
||||
|
||||
if (swatches.length) {
|
||||
getEl('rl-mini-colors-swatches').innerHTML = "<div>" + swatches.join('') + "</div>";
|
||||
}
|
||||
})();
|
||||
}
|
||||
break;
|
||||
case 'swatchesOnly':
|
||||
settings.swatchesOnly = !! options.swatchesOnly;
|
||||
picker.setAttribute('data-minimal', settings.swatchesOnly);
|
||||
|
||||
if (settings.swatchesOnly) {
|
||||
settings.autoClose = true;
|
||||
}
|
||||
break;
|
||||
case 'a11y':
|
||||
var labels = options.a11y;
|
||||
var update = false;
|
||||
|
||||
if (typeof labels === 'object') {
|
||||
for (var label in labels) {
|
||||
if (labels[label] && settings.a11y[label]) {
|
||||
settings.a11y[label] = labels[label];
|
||||
update = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (update) {
|
||||
var openLabel = getEl('rl-mini-colors-open-label');
|
||||
var swatchLabel = getEl('rl-mini-colors-swatch-label');
|
||||
|
||||
openLabel.innerHTML = settings.a11y.open;
|
||||
swatchLabel.innerHTML = settings.a11y.swatch;
|
||||
}
|
||||
default:
|
||||
settings[key] = options[key];
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Bind the color picker to input fields that match the selector.
|
||||
* @param {string} selector One or more selectors pointing to input fields.
|
||||
*/
|
||||
function bindFields(selector) {
|
||||
// Show the color picker on click on the input fields that match the selector
|
||||
addListener(document, 'click', selector, function(event) {
|
||||
|
||||
var parent = settings.parent;
|
||||
var coords = event.target.getBoundingClientRect();
|
||||
var scrollY = window.scrollY;
|
||||
var reposition = {left: false, top: false};
|
||||
var offset = {x: 0, y: 0};
|
||||
var left = coords.x;
|
||||
var top = scrollY + coords.y + coords.height + settings.margin;
|
||||
|
||||
currentEl = event.target;
|
||||
picker.classList.add('rl-mini-colors-open');
|
||||
|
||||
var pickerWidth = picker.offsetWidth;
|
||||
var pickerHeight = picker.offsetHeight;
|
||||
|
||||
// If the color picker is inside a custom container
|
||||
// set the position relative to it
|
||||
if (parent) {
|
||||
var style = window.getComputedStyle(parent);
|
||||
var marginTop = parseFloat(style.marginTop);
|
||||
var borderTop = parseFloat(style.borderTopWidth);
|
||||
|
||||
offset = parent.getBoundingClientRect();
|
||||
offset.y += borderTop + scrollY;
|
||||
left -= offset.x;
|
||||
top -= offset.y;
|
||||
|
||||
if (left + pickerWidth > parent.clientWidth) {
|
||||
left += coords.width - pickerWidth;
|
||||
reposition.left = true;
|
||||
}
|
||||
|
||||
if (top + pickerHeight > parent.clientHeight - marginTop) {
|
||||
top -= coords.height + pickerHeight + settings.margin * 2;
|
||||
reposition.top = true;
|
||||
}
|
||||
|
||||
top += parent.scrollTop;
|
||||
|
||||
// Otherwise set the position relative to the whole document
|
||||
} else {
|
||||
if (left + pickerWidth > document.documentElement.clientWidth) {
|
||||
left += coords.width - pickerWidth;
|
||||
reposition.left = true;
|
||||
}
|
||||
|
||||
if (top + pickerHeight - scrollY > document.documentElement.clientHeight) {
|
||||
top = scrollY + coords.y - pickerHeight - settings.margin;
|
||||
reposition.top = true;
|
||||
}
|
||||
}
|
||||
|
||||
picker.classList.toggle('rl-mini-colors-left', reposition.left);
|
||||
picker.classList.toggle('rl-mini-colors-top', reposition.top);
|
||||
picker.style.left = left + "px";
|
||||
picker.style.top = top + "px";
|
||||
|
||||
deselectRow(currentEl);
|
||||
});
|
||||
}
|
||||
|
||||
function deselectRow(el) {
|
||||
const tr = el.closest('tr');
|
||||
|
||||
if ( ! tr) {
|
||||
return;
|
||||
}
|
||||
|
||||
const input = tr.querySelector('.form-check-input');
|
||||
|
||||
if ( ! input) {
|
||||
return;
|
||||
}
|
||||
|
||||
input.checked = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrap the linked input fields in a div that adds a color preview.
|
||||
* @param {string} selector One or more selectors pointing to input fields.
|
||||
*/
|
||||
function wrapFields(selector) {
|
||||
document.querySelectorAll(selector).forEach(function(field) {
|
||||
var parentNode = field.parentNode;
|
||||
|
||||
if ( ! parentNode.classList.contains('rl-mini-colors-field')) {
|
||||
var wrapper = document.createElement('div');
|
||||
|
||||
wrapper.innerHTML = "<button class=\"rl-mini-colors-button\" aria-labelledby=\"rl-mini-colors-open-label\"></button>";
|
||||
parentNode.insertBefore(wrapper, field);
|
||||
wrapper.setAttribute('class', 'rl-mini-colors-field');
|
||||
wrapper.style.color = field.value;
|
||||
wrapper.appendChild(field);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the color picker.
|
||||
* @param {boolean} [revert] If true, revert the color to the original value.
|
||||
*/
|
||||
function closePicker(color) {
|
||||
if ( ! currentEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
picker.classList.remove('rl-mini-colors-open');
|
||||
|
||||
currentEl = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Copy the active color to the linked input field.
|
||||
* @param {number} [color] Color value to override the active color.
|
||||
*/
|
||||
function pickColor(color) {
|
||||
if ( ! currentEl) {
|
||||
return;
|
||||
}
|
||||
currentEl.value = color;
|
||||
currentEl.dispatchEvent(new Event('input', {bubbles: true}));
|
||||
currentEl.dispatchEvent(new Event('change', {bubbles: true}));
|
||||
|
||||
const parent = currentEl.parentNode;
|
||||
|
||||
if (parent.classList.contains('rl-mini-colors-field')) {
|
||||
parent.style.color = color;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Init the color picker.
|
||||
*/
|
||||
function init() {
|
||||
// Render the UI
|
||||
picker = document.createElement('div');
|
||||
picker.setAttribute('id', 'rl-mini-colors-picker');
|
||||
picker.className = 'rl-mini-colors-picker';
|
||||
picker.innerHTML =
|
||||
'<div id="rl-mini-colors-swatches" class="rl-mini-colors-swatches"></div>'
|
||||
+ ("<span id=\"rl-mini-colors-open-label\" hidden>" + settings.a11y.open + "</span>")
|
||||
+ ("<span id=\"rl-mini-colors-swatch-label\" hidden>" + settings.a11y.swatch + "</span>");
|
||||
|
||||
// Append the color picker to the DOM
|
||||
document.body.appendChild(picker);
|
||||
|
||||
// Bind the picker to the default selector
|
||||
bindFields(settings.el);
|
||||
wrapFields(settings.el);
|
||||
|
||||
addListener(picker, 'click', '.rl-mini-colors-swatches .rl-mini-colors-button', (event) => {
|
||||
pickColor(event.target.textContent);
|
||||
closePicker(event.target.textContent);
|
||||
});
|
||||
|
||||
addListener(document, 'click', '.rl-mini-colors-field .rl-mini-colors-button', (event) => {
|
||||
event.target.nextElementSibling.dispatchEvent(new Event('click', {bubbles: true}));
|
||||
});
|
||||
|
||||
addListener(document, 'mousedown', (event) => {
|
||||
if (event.target.classList.contains('rl-mini-colors')
|
||||
|| event.target.classList.contains('rl-mini-colors-picker')
|
||||
|| event.target.closest('.rl-mini-colors-picker')) {
|
||||
return;
|
||||
}
|
||||
|
||||
closePicker();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Shortcut for getElementById to optimize the minified JS.
|
||||
* @param {string} id The element id.
|
||||
* @return {object} The DOM element with the provided id.
|
||||
*/
|
||||
function getEl(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Shortcut for addEventListener to optimize the minified JS.
|
||||
* @param {object} context The context to which the listener is attached.
|
||||
* @param {string} type Event type.
|
||||
* @param {(string|function)} selector Event target if delegation is used, event handler if not.
|
||||
* @param {function} [fn] Event handler if delegation is used.
|
||||
*/
|
||||
function addListener(context, type, selector, fn) {
|
||||
var matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
|
||||
|
||||
// Delegate event to the target of the selector
|
||||
if (typeof selector === 'string') {
|
||||
context.addEventListener(type, function(event) {
|
||||
if (matches.call(event.target, selector)) {
|
||||
fn.call(event.target, event);
|
||||
}
|
||||
});
|
||||
|
||||
// If the selector is not a string then it's a function
|
||||
// in which case we need regular event listener
|
||||
} else {
|
||||
fn = selector;
|
||||
context.addEventListener(type, fn);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Call a function only when the DOM is ready.
|
||||
* @param {function} fn The function to call.
|
||||
* @param {array} [args] Arguments to pass to the function.
|
||||
*/
|
||||
function DOMReady(fn, args) {
|
||||
args = args !== undefined ? args : [];
|
||||
|
||||
if (document.readyState !== 'loading') {
|
||||
fn.apply(void 0, args);
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
fn.apply(void 0, args);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Polyfill for Nodelist.forEach
|
||||
if (NodeList !== undefined && NodeList.prototype && ! NodeList.prototype.forEach) {
|
||||
NodeList.prototype.forEach = Array.prototype.forEach;
|
||||
}
|
||||
|
||||
// Expose the color picker to the global scope
|
||||
window.RegularLabs_MiniColors = function() {
|
||||
var methods = {
|
||||
set : configure,
|
||||
wrap : wrapFields,
|
||||
close: closePicker
|
||||
};
|
||||
|
||||
function RegularLabs_MiniColors(options) {
|
||||
DOMReady(function() {
|
||||
if (options) {
|
||||
if (typeof options === 'string') {
|
||||
bindFields(options);
|
||||
} else {
|
||||
configure(options);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var _loop = function _loop(key) {
|
||||
RegularLabs_MiniColors[key] = function() {
|
||||
for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
|
||||
args[_key2] = arguments[_key2];
|
||||
}
|
||||
DOMReady(methods[key], args);
|
||||
};
|
||||
};
|
||||
for (var key in methods) {
|
||||
_loop(key);
|
||||
}
|
||||
|
||||
return RegularLabs_MiniColors;
|
||||
}();
|
||||
|
||||
// Init the color picker when the DOM is ready
|
||||
DOMReady(init);
|
||||
|
||||
})(window, document, Math);
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.RegularLabs = window.RegularLabs || {};
|
||||
|
||||
window.RegularLabs.MiniColors = window.RegularLabs.MiniColors || {
|
||||
init: function() {
|
||||
const minicolors = document.querySelectorAll('div.rl-mini-colors');
|
||||
const options = Joomla.getOptions ? Joomla.getOptions('rl_minicolors', {}) : Joomla.optionsStorage.rl_minicolors || {};
|
||||
|
||||
minicolors.forEach((minicolor) => {
|
||||
const field = minicolor.querySelector('input');
|
||||
RegularLabs_MiniColors({
|
||||
el : `#${field.id}`,
|
||||
theme : 'default',
|
||||
alpha : false,
|
||||
swatchesOnly: true,
|
||||
swatches : options.swatches
|
||||
});
|
||||
|
||||
if ( ! field.dataset['table'] || ! field.dataset['item_id']) {
|
||||
return;
|
||||
}
|
||||
|
||||
field.addEventListener('change', () => {
|
||||
RegularLabs.MiniColors.save(field.dataset['table'], field.dataset['item_id'], field.dataset['id_column'], field.value, field);
|
||||
});
|
||||
|
||||
RegularLabs.MiniColors.setTableRowBackground(field, field.value);
|
||||
});
|
||||
},
|
||||
|
||||
setTableRowBackground: async function(element, color, opacity = .1) {
|
||||
|
||||
if ( ! element) {
|
||||
return;
|
||||
}
|
||||
|
||||
const table_row = element.closest('tr');
|
||||
|
||||
if ( ! table_row) {
|
||||
return;
|
||||
}
|
||||
const table_cells = table_row.querySelectorAll('td, th');
|
||||
|
||||
if ( ! table_cells.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bg_color = RegularLabs.MiniColors.getColorWithOpacity(color, opacity);
|
||||
|
||||
if (color[0] === '#') {
|
||||
table_cells[0].style.borderLeft = `4px solid ${color}`;
|
||||
}
|
||||
|
||||
table_cells.forEach((table_cell) => {
|
||||
table_cell.style.backgroundColor = bg_color;
|
||||
});
|
||||
},
|
||||
|
||||
save: async function(table, item_id, id_column, color, element) {
|
||||
let spinner = null;
|
||||
id_column = id_column ? id_column : 'id';
|
||||
|
||||
if (element) {
|
||||
spinner = document.createElement('div');
|
||||
spinner.classList.add('rl-spinner');
|
||||
|
||||
element.closest('div.rl-mini-colors-field').append(spinner);
|
||||
|
||||
RegularLabs.MiniColors.setTableRowBackground(element, color);
|
||||
}
|
||||
|
||||
const url = 'index.php?option=com_ajax&plugin=regularlabs&format=raw&saveColor=1'
|
||||
+ '&table=' + table
|
||||
+ '&item_id=' + item_id
|
||||
+ '&id_column=' + id_column
|
||||
+ '&color=' + encodeURIComponent(color);
|
||||
|
||||
await RegularLabs.Scripts.loadUrl(url);
|
||||
|
||||
RegularLabs.MiniColors.saved(spinner);
|
||||
|
||||
},
|
||||
|
||||
saved: function(spinner = null) {
|
||||
if ( ! spinner) {
|
||||
return;
|
||||
}
|
||||
|
||||
spinner.remove();
|
||||
},
|
||||
|
||||
getColorWithOpacity: function(hex, opacity) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
|
||||
if ( ! result) {
|
||||
return 'var(--table-bg)';
|
||||
}
|
||||
|
||||
return 'rgba('
|
||||
+ parseInt(result[1], 16) + ','
|
||||
+ parseInt(result[2], 16) + ','
|
||||
+ parseInt(result[3], 16) + ','
|
||||
+ opacity
|
||||
+ ')';
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
RegularLabs.MiniColors.init();
|
||||
})();
|
||||
44
media/regularlabs/js/mini-colors.min.js
vendored
Normal file
44
media/regularlabs/js/mini-colors.min.js
vendored
Normal file
@ -0,0 +1,44 @@
|
||||
/*
|
||||
* Copyright © 2024 Regular Labs - All Rights Reserved
|
||||
* GNU General Public License version 2 or later
|
||||
*/
|
||||
(function(window,document,Math){var picker,currentEl,oldColor;var settings={el:'[data-rl-mini-colors]',parent:null,wrap:true,margin:2,swatches:[],swatchesOnly:false,alpha:true,autoClose:false,a11y:{open:'Open color picker',swatch:'Color swatch',}};function configure(options){if(typeof options!=='object'){return;}
|
||||
for(var key in options){switch(key){case'el':bindFields(options.el);if(options.wrap!==false){wrapFields(options.el);}
|
||||
break;case'parent':settings.parent=document.querySelector(options.parent);if(settings.parent){settings.parent.appendChild(picker);}
|
||||
break;case'margin':options.margin*=1;settings.margin=!isNaN(options.margin)?options.margin:settings.margin;break;case'wrap':if(options.el&&options.wrap){wrapFields(options.el);}
|
||||
break;case'swatches':if(Array.isArray(options.swatches)){(function(){var swatches=[];options.swatches.forEach(function(swatch,i){swatches.push("<button id=\"rl-mini-colors-swatch-"+i+"\" class=\"rl-mini-colors-button\" aria-labelledby=\"rl-mini-colors-swatch-label rl-mini-colors-swatch-"+i+"\" style=\"color: "+swatch+";\">"+swatch+"</button>");});if(swatches.length){getEl('rl-mini-colors-swatches').innerHTML="<div>"+swatches.join('')+"</div>";}})();}
|
||||
break;case'swatchesOnly':settings.swatchesOnly=!!options.swatchesOnly;picker.setAttribute('data-minimal',settings.swatchesOnly);if(settings.swatchesOnly){settings.autoClose=true;}
|
||||
break;case'a11y':var labels=options.a11y;var update=false;if(typeof labels==='object'){for(var label in labels){if(labels[label]&&settings.a11y[label]){settings.a11y[label]=labels[label];update=true;}}}
|
||||
if(update){var openLabel=getEl('rl-mini-colors-open-label');var swatchLabel=getEl('rl-mini-colors-swatch-label');openLabel.innerHTML=settings.a11y.open;swatchLabel.innerHTML=settings.a11y.swatch;}
|
||||
default:settings[key]=options[key];}}}
|
||||
function bindFields(selector){addListener(document,'click',selector,function(event){var parent=settings.parent;var coords=event.target.getBoundingClientRect();var scrollY=window.scrollY;var reposition={left:false,top:false};var offset={x:0,y:0};var left=coords.x;var top=scrollY+coords.y+coords.height+settings.margin;currentEl=event.target;picker.classList.add('rl-mini-colors-open');var pickerWidth=picker.offsetWidth;var pickerHeight=picker.offsetHeight;if(parent){var style=window.getComputedStyle(parent);var marginTop=parseFloat(style.marginTop);var borderTop=parseFloat(style.borderTopWidth);offset=parent.getBoundingClientRect();offset.y+=borderTop+scrollY;left-=offset.x;top-=offset.y;if(left+pickerWidth>parent.clientWidth){left+=coords.width-pickerWidth;reposition.left=true;}
|
||||
if(top+pickerHeight>parent.clientHeight-marginTop){top-=coords.height+pickerHeight+settings.margin*2;reposition.top=true;}
|
||||
top+=parent.scrollTop;}else{if(left+pickerWidth>document.documentElement.clientWidth){left+=coords.width-pickerWidth;reposition.left=true;}
|
||||
if(top+pickerHeight-scrollY>document.documentElement.clientHeight){top=scrollY+coords.y-pickerHeight-settings.margin;reposition.top=true;}}
|
||||
picker.classList.toggle('rl-mini-colors-left',reposition.left);picker.classList.toggle('rl-mini-colors-top',reposition.top);picker.style.left=left+"px";picker.style.top=top+"px";deselectRow(currentEl);});}
|
||||
function deselectRow(el){const tr=el.closest('tr');if(!tr){return;}
|
||||
const input=tr.querySelector('.form-check-input');if(!input){return;}
|
||||
input.checked=false;}
|
||||
function wrapFields(selector){document.querySelectorAll(selector).forEach(function(field){var parentNode=field.parentNode;if(!parentNode.classList.contains('rl-mini-colors-field')){var wrapper=document.createElement('div');wrapper.innerHTML="<button class=\"rl-mini-colors-button\" aria-labelledby=\"rl-mini-colors-open-label\"></button>";parentNode.insertBefore(wrapper,field);wrapper.setAttribute('class','rl-mini-colors-field');wrapper.style.color=field.value;wrapper.appendChild(field);}});}
|
||||
function closePicker(color){if(!currentEl){return;}
|
||||
picker.classList.remove('rl-mini-colors-open');currentEl=null;}
|
||||
function pickColor(color){if(!currentEl){return;}
|
||||
currentEl.value=color;currentEl.dispatchEvent(new Event('input',{bubbles:true}));currentEl.dispatchEvent(new Event('change',{bubbles:true}));const parent=currentEl.parentNode;if(parent.classList.contains('rl-mini-colors-field')){parent.style.color=color;}}
|
||||
function init(){picker=document.createElement('div');picker.setAttribute('id','rl-mini-colors-picker');picker.className='rl-mini-colors-picker';picker.innerHTML='<div id="rl-mini-colors-swatches" class="rl-mini-colors-swatches"></div>'+("<span id=\"rl-mini-colors-open-label\" hidden>"+settings.a11y.open+"</span>")+("<span id=\"rl-mini-colors-swatch-label\" hidden>"+settings.a11y.swatch+"</span>");document.body.appendChild(picker);bindFields(settings.el);wrapFields(settings.el);addListener(picker,'click','.rl-mini-colors-swatches .rl-mini-colors-button',(event)=>{pickColor(event.target.textContent);closePicker(event.target.textContent);});addListener(document,'click','.rl-mini-colors-field .rl-mini-colors-button',(event)=>{event.target.nextElementSibling.dispatchEvent(new Event('click',{bubbles:true}));});addListener(document,'mousedown',(event)=>{if(event.target.classList.contains('rl-mini-colors')||event.target.classList.contains('rl-mini-colors-picker')||event.target.closest('.rl-mini-colors-picker')){return;}
|
||||
closePicker();});}
|
||||
function getEl(id){return document.getElementById(id);}
|
||||
function addListener(context,type,selector,fn){var matches=Element.prototype.matches||Element.prototype.msMatchesSelector;if(typeof selector==='string'){context.addEventListener(type,function(event){if(matches.call(event.target,selector)){fn.call(event.target,event);}});}else{fn=selector;context.addEventListener(type,fn);}}
|
||||
function DOMReady(fn,args){args=args!==undefined?args:[];if(document.readyState!=='loading'){fn.apply(void 0,args);}else{document.addEventListener('DOMContentLoaded',function(){fn.apply(void 0,args);});}}
|
||||
if(NodeList!==undefined&&NodeList.prototype&&!NodeList.prototype.forEach){NodeList.prototype.forEach=Array.prototype.forEach;}
|
||||
window.RegularLabs_MiniColors=function(){var methods={set:configure,wrap:wrapFields,close:closePicker};function RegularLabs_MiniColors(options){DOMReady(function(){if(options){if(typeof options==='string'){bindFields(options);}else{configure(options);}}});}
|
||||
var _loop=function _loop(key){RegularLabs_MiniColors[key]=function(){for(var _len=arguments.length,args=new Array(_len),_key2=0;_key2<_len;_key2++){args[_key2]=arguments[_key2];}
|
||||
DOMReady(methods[key],args);};};for(var key in methods){_loop(key);}
|
||||
return RegularLabs_MiniColors;}();DOMReady(init);})(window,document,Math);(function(){'use strict';window.RegularLabs=window.RegularLabs||{};window.RegularLabs.MiniColors=window.RegularLabs.MiniColors||{init:function(){const minicolors=document.querySelectorAll('div.rl-mini-colors');const options=Joomla.getOptions?Joomla.getOptions('rl_minicolors',{}):Joomla.optionsStorage.rl_minicolors||{};minicolors.forEach((minicolor)=>{const field=minicolor.querySelector('input');RegularLabs_MiniColors({el:`#${field.id}`,theme:'default',alpha:false,swatchesOnly:true,swatches:options.swatches});if(!field.dataset['table']||!field.dataset['item_id']){return;}
|
||||
field.addEventListener('change',()=>{RegularLabs.MiniColors.save(field.dataset['table'],field.dataset['item_id'],field.dataset['id_column'],field.value,field);});RegularLabs.MiniColors.setTableRowBackground(field,field.value);});},setTableRowBackground:async function(element,color,opacity=.1){if(!element){return;}
|
||||
const table_row=element.closest('tr');if(!table_row){return;}
|
||||
const table_cells=table_row.querySelectorAll('td, th');if(!table_cells.length){return;}
|
||||
const bg_color=RegularLabs.MiniColors.getColorWithOpacity(color,opacity);if(color[0]==='#'){table_cells[0].style.borderLeft=`4px solid ${color}`;}
|
||||
table_cells.forEach((table_cell)=>{table_cell.style.backgroundColor=bg_color;});},save:async function(table,item_id,id_column,color,element){let spinner=null;id_column=id_column?id_column:'id';if(element){spinner=document.createElement('div');spinner.classList.add('rl-spinner');element.closest('div.rl-mini-colors-field').append(spinner);RegularLabs.MiniColors.setTableRowBackground(element,color);}
|
||||
const url='index.php?option=com_ajax&plugin=regularlabs&format=raw&saveColor=1'+'&table='+table+'&item_id='+item_id+'&id_column='+id_column+'&color='+encodeURIComponent(color);await RegularLabs.Scripts.loadUrl(url);RegularLabs.MiniColors.saved(spinner);},saved:function(spinner=null){if(!spinner){return;}
|
||||
spinner.remove();},getColorWithOpacity:function(hex,opacity){const result=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);if(!result){return'var(--table-bg)';}
|
||||
return'rgba('+parseInt(result[1],16)+','+parseInt(result[2],16)+','+parseInt(result[3],16)+','+opacity+')';}};RegularLabs.MiniColors.init();})();
|
||||
627
media/regularlabs/js/regular.js
Normal file
627
media/regularlabs/js/regular.js
Normal file
@ -0,0 +1,627 @@
|
||||
/**
|
||||
* @package Regular.js
|
||||
* @description A light and simple JavaScript Library
|
||||
*
|
||||
* @author Peter van Westen <info@regularlabs.com>
|
||||
* @link https://github.com/regularlabs/regularjs
|
||||
* @copyright Copyright © 2024 Regular Labs - All Rights Reserved
|
||||
* @license https://github.com/regularlabs/regularjs/blob/master/LICENCE MIT
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
if (typeof window.Regular === 'undefined'
|
||||
|| typeof Regular.version === 'undefined'
|
||||
|| Regular.version < 1.5) {
|
||||
|
||||
window.Regular = new function() {
|
||||
/**
|
||||
*
|
||||
* PUBLIC PROPERTIES
|
||||
*
|
||||
*/
|
||||
|
||||
this.version = 1.5;
|
||||
|
||||
/**
|
||||
*
|
||||
* PUBLIC METHODS
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Sets a global alias for the Regular class.
|
||||
*
|
||||
* @param word A string (character or word) representing the alias for the Regular class.
|
||||
*
|
||||
* @return boolean
|
||||
*/
|
||||
this.alias = function(word) {
|
||||
if (typeof window[word] !== 'undefined') {
|
||||
console.error(`Cannot set '${word}' as an alias of Regular, as it already exists.`);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
window[word] = $;
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a boolean based on whether the element contains one or more of the given class names.
|
||||
*
|
||||
* @param selector A CSS selector string or a HTMLElement object.
|
||||
* @param classes A string or array of class names.
|
||||
* @param matchAll Optional boolean whether the element should have all given classes (true) or at least one (false).
|
||||
*
|
||||
* @return boolean
|
||||
*/
|
||||
this.hasClasses = function(selector, classes, matchAll = true) {
|
||||
if ( ! selector) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const element = typeof selector === 'string'
|
||||
? document.querySelector(selector)
|
||||
: selector;
|
||||
|
||||
if ( ! element) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (typeof classes === 'string') {
|
||||
classes = classes.split(' ');
|
||||
}
|
||||
|
||||
let hasClass = false;
|
||||
|
||||
for (const clss of classes) {
|
||||
hasClass = element.classList.contains(clss);
|
||||
|
||||
if (matchAll && ! hasClass) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( ! matchAll && hasClass) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return hasClass;
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds given class name(s) to the element(s).
|
||||
*
|
||||
* @param selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
|
||||
* @param classes A string or array of class names.
|
||||
*/
|
||||
this.addClasses = function(selector, classes) {
|
||||
doClasses('add', selector, classes);
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes given class name(s) from the element(s).
|
||||
*
|
||||
* @param selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
|
||||
* @param classes A string or array of class names.
|
||||
*/
|
||||
this.removeClasses = function(selector, classes) {
|
||||
doClasses('remove', selector, classes);
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles given class name(s) of the element(s).
|
||||
*
|
||||
* @param selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
|
||||
* @param classes A string or array of class names.
|
||||
* @param force An optional boolean value that forces the class to be added or removed.
|
||||
*/
|
||||
this.toggleClasses = function(selector, classes, force) {
|
||||
switch (force) {
|
||||
case true:
|
||||
doClasses('add', selector, classes);
|
||||
break;
|
||||
|
||||
case false:
|
||||
doClasses('remove', selector, classes);
|
||||
break;
|
||||
|
||||
default:
|
||||
doClasses('toggle', selector, classes);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Makes the given element(s) visible (changes visibility and display attributes).
|
||||
*
|
||||
* @param selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
|
||||
*/
|
||||
this.makeVisible = function(selector) {
|
||||
if ( ! selector) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = typeof selector === 'string'
|
||||
? document.querySelectorAll(selector)
|
||||
: selector;
|
||||
|
||||
if ('forEach' in element) {
|
||||
element.forEach(subElement => $.makeVisible(subElement));
|
||||
return;
|
||||
}
|
||||
|
||||
let computedDisplay = getComputedStyle(element, 'display');
|
||||
|
||||
if ( ! ('origDisplay' in element)) {
|
||||
element.origDisplay = computedDisplay === 'none'
|
||||
? getDefaultComputedStyle(element, 'display')
|
||||
: computedDisplay;
|
||||
}
|
||||
|
||||
if (computedDisplay === 'none') {
|
||||
element.style.display = ('origDisplay' in element) ? element.origDisplay : '';
|
||||
}
|
||||
|
||||
let elementType = element.nodeName.toLowerCase();
|
||||
|
||||
switch (elementType) {
|
||||
case 'tr':
|
||||
elementType = 'table-row';
|
||||
break;
|
||||
case 'td':
|
||||
case 'th':
|
||||
elementType = 'table-cell';
|
||||
break;
|
||||
case 'caption':
|
||||
elementType = 'table-caption';
|
||||
break;
|
||||
case 'col':
|
||||
elementType = 'table-column';
|
||||
break;
|
||||
case 'colgroup':
|
||||
elementType = 'table-column-group';
|
||||
break;
|
||||
case 'table':
|
||||
elementType = 'table';
|
||||
break;
|
||||
case 'thead':
|
||||
elementType = 'table-header-group';
|
||||
break;
|
||||
case 'tbody':
|
||||
elementType = 'table-row-group';
|
||||
break;
|
||||
case 'tfoot':
|
||||
elementType = 'table-footer-group';
|
||||
break;
|
||||
default:
|
||||
elementType = 'block';
|
||||
break;
|
||||
}
|
||||
|
||||
element.style.display = elementType;
|
||||
element.style.visibility = 'visible';
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows the given element(s) (makes visible and changes opacity attribute).
|
||||
*
|
||||
* @param selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
|
||||
*/
|
||||
this.show = function(selector) {
|
||||
if ( ! selector) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = typeof selector === 'string'
|
||||
? document.querySelectorAll(selector)
|
||||
: selector;
|
||||
|
||||
if ('forEach' in element) {
|
||||
element.forEach(subElement => $.show(subElement));
|
||||
return;
|
||||
}
|
||||
|
||||
this.makeVisible(element);
|
||||
|
||||
element.style.opacity = 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Hides the given element(s) (changes opacity and display attributes).
|
||||
*
|
||||
* @param selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
|
||||
*/
|
||||
this.hide = function(selector) {
|
||||
if ( ! selector) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = typeof selector === 'string'
|
||||
? document.querySelectorAll(selector)
|
||||
: selector;
|
||||
|
||||
if ('forEach' in element) {
|
||||
element.forEach(subElement => $.hide(subElement));
|
||||
return;
|
||||
}
|
||||
|
||||
const computedDisplay = getComputedStyle(element, 'display');
|
||||
|
||||
if (computedDisplay !== 'none' && ! ('origDisplay' in element)) {
|
||||
element.origDisplay = computedDisplay;
|
||||
}
|
||||
|
||||
element.style.display = 'none';
|
||||
element.style.visibility = 'hidden';
|
||||
element.style.opacity = 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows or hides the given element(s).
|
||||
*
|
||||
* @param selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
|
||||
* @param force An optional boolean value that forces the class to be added or removed.
|
||||
*/
|
||||
this.toggle = function(selector, force) {
|
||||
if ( ! selector) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (force) {
|
||||
case true:
|
||||
$.show(selector);
|
||||
break;
|
||||
|
||||
case false:
|
||||
$.hide(selector);
|
||||
break;
|
||||
|
||||
default:
|
||||
const element = typeof selector === 'string'
|
||||
? document.querySelectorAll(selector)
|
||||
: selector;
|
||||
|
||||
if ('forEach' in element) {
|
||||
element.forEach(subElement => $.toggle(subElement));
|
||||
return;
|
||||
}
|
||||
|
||||
element.style.display === 'none' ? $.show(selector) : $.hide(selector);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Fades in the given element(s).
|
||||
*
|
||||
* @param selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
|
||||
* @param duration Optional duration of the effect in milliseconds.
|
||||
* @param oncomplete Optional callback function to execute when effect is completed.
|
||||
*/
|
||||
this.fadeIn = function(selector, duration = 250, oncomplete) {
|
||||
if ( ! selector) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = typeof selector === 'string'
|
||||
? document.querySelectorAll(selector)
|
||||
: selector;
|
||||
|
||||
this.makeVisible(element);
|
||||
|
||||
$.fadeTo(
|
||||
element,
|
||||
1,
|
||||
duration,
|
||||
() => {
|
||||
$.show(element);
|
||||
if (oncomplete) {
|
||||
oncomplete.call(element);
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Fades out the given element(s).
|
||||
*
|
||||
* @param selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
|
||||
* @param duration Optional duration of the effect in milliseconds.
|
||||
* @param oncomplete Optional callback function to execute when effect is completed.
|
||||
*/
|
||||
this.fadeOut = function(selector, duration = 250, oncomplete) {
|
||||
if ( ! selector) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = typeof selector === 'string'
|
||||
? document.querySelectorAll(selector)
|
||||
: selector;
|
||||
|
||||
$.fadeTo(
|
||||
element,
|
||||
0,
|
||||
duration,
|
||||
() => {
|
||||
$.hide(element);
|
||||
if (oncomplete) {
|
||||
oncomplete.call(element);
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Fades out the given element(s).
|
||||
*
|
||||
* @param selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
|
||||
* @param opacity Opacity Value to fade to
|
||||
* @param duration Optional duration of the effect in milliseconds.
|
||||
* @param oncomplete Optional callback function to execute when effect is completed.
|
||||
*/
|
||||
this.fadeTo = function(selector, opacity, duration = 250, oncomplete) {
|
||||
if ( ! selector) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = typeof selector === 'string'
|
||||
? document.querySelectorAll(selector)
|
||||
: selector;
|
||||
|
||||
if ('forEach' in element) {
|
||||
element.forEach(subElement => $.fadeTo(subElement, opacity, duration));
|
||||
return;
|
||||
}
|
||||
|
||||
const wait = 50; // amount of time between steps
|
||||
const nr_of_steps = duration / wait;
|
||||
const change = 1 / nr_of_steps; // time to wait before next step
|
||||
|
||||
element.style.opacity = getComputedStyle(element, 'opacity');
|
||||
|
||||
if (opacity === element.style.opacity) {
|
||||
element.setAttribute('data-fading', '');
|
||||
|
||||
if (oncomplete) {
|
||||
oncomplete.call(element);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.makeVisible(element);
|
||||
|
||||
const direction = opacity > element.style.opacity ? 'in' : 'out';
|
||||
|
||||
element.setAttribute('data-fading', direction);
|
||||
|
||||
(function fade() {
|
||||
if (element.getAttribute('data-fading')
|
||||
&& element.getAttribute('data-fading') !== direction
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const new_opacity = direction === 'out'
|
||||
? parseFloat(element.style.opacity) - change
|
||||
: parseFloat(element.style.opacity) + change;
|
||||
|
||||
if ((direction === 'in' && new_opacity >= opacity)
|
||||
|| (direction === 'out' && new_opacity <= opacity)
|
||||
) {
|
||||
element.style.opacity = opacity;
|
||||
|
||||
element.setAttribute('data-fading', '');
|
||||
|
||||
if (oncomplete) {
|
||||
oncomplete.call(element);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
element.style.opacity = new_opacity;
|
||||
|
||||
setTimeout(() => {
|
||||
fade.call();
|
||||
}, wait);
|
||||
})();
|
||||
};
|
||||
|
||||
/**
|
||||
* Runs a function when the document is loaded (on ready state).
|
||||
*
|
||||
* @param func Callback function to execute when document is ready.
|
||||
*/
|
||||
this.onReady = function(func) {
|
||||
document.addEventListener('DOMContentLoaded', func);
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts a string with HTML code to 'DOM' elements.
|
||||
*
|
||||
* @param html String with HTML code.
|
||||
*
|
||||
* @return element
|
||||
*/
|
||||
this.createElementFromHTML = function(html) {
|
||||
return document.createRange().createContextualFragment(html);
|
||||
};
|
||||
|
||||
/**
|
||||
* Loads a url with optional POST data and optionally calls a function on success or fail.
|
||||
*
|
||||
* @param url String containing the url to load.
|
||||
* @param data Optional string representing the POST data to send along.
|
||||
* @param success Optional callback function to execute when the url loads successfully (status 200).
|
||||
* @param fail Optional callback function to execute when the url fails to load.
|
||||
*/
|
||||
this.loadUrl = function(url, data, success, fail) {
|
||||
const request = new XMLHttpRequest();
|
||||
|
||||
request.open('POST', url, true);
|
||||
|
||||
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
|
||||
request.onreadystatechange = function() {
|
||||
if (this.readyState !== 4) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.status === 200) {
|
||||
success && success.call(null, this.responseText, this.status, this);
|
||||
return;
|
||||
}
|
||||
|
||||
fail && fail.call(null, this.responseText, this.status, this);
|
||||
};
|
||||
|
||||
|
||||
request.send(this.toUrlQueryString(data));
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts a data object (key, value) to a serialized query string.
|
||||
*
|
||||
* @param data The object with the data to serialize.
|
||||
* @param prefix An Optional prefix.
|
||||
*/
|
||||
this.toUrlQueryString = function(data, prefix) {
|
||||
if (typeof data !== 'object') {
|
||||
return data;
|
||||
}
|
||||
|
||||
const parts = [];
|
||||
|
||||
if ( ! (Symbol.iterator in Object(data))) {
|
||||
data = Object.entries(data);
|
||||
}
|
||||
|
||||
for (let i in data) {
|
||||
let value = data[i];
|
||||
let name = '';
|
||||
|
||||
if (value instanceof Array) {
|
||||
[name, value] = value;
|
||||
}
|
||||
|
||||
let key = name ? (prefix ? `${prefix}[${name}]` : name) : prefix;
|
||||
|
||||
if ( ! key) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (value !== null && typeof value === 'object') {
|
||||
if (value instanceof Array) {
|
||||
key += '[]';
|
||||
}
|
||||
|
||||
parts.push(this.toUrlQueryString(value, key));
|
||||
continue;
|
||||
}
|
||||
|
||||
parts.push(`${key}=${value}`);
|
||||
}
|
||||
|
||||
return parts.join('&');
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* ALIASES
|
||||
*
|
||||
*/
|
||||
|
||||
this.as = this.alias;
|
||||
this.hasClass = this.hasClasses;
|
||||
this.addClass = this.addClasses;
|
||||
this.removeClass = this.removeClasses;
|
||||
this.toggleClass = this.toggleClasses;
|
||||
|
||||
/**
|
||||
*
|
||||
* PRIVATE FUNCTIONS
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* Executes an action on the element(s) to add/remove/toggle classes.
|
||||
*
|
||||
* @param action A string that identifies the action: add|remove|toggle.
|
||||
* @param selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
|
||||
* @param classes A string or array of class names.
|
||||
*/
|
||||
const doClasses = function(action, selector, classes) {
|
||||
if ( ! selector) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = typeof selector === 'string'
|
||||
? document.querySelectorAll(selector)
|
||||
: selector;
|
||||
|
||||
if ('forEach' in element) {
|
||||
element.forEach(subElement => doClasses(action, subElement, classes));
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof classes === 'string') {
|
||||
classes = classes.split(' ');
|
||||
}
|
||||
|
||||
element.classList[action](...classes);
|
||||
};
|
||||
|
||||
/**
|
||||
* Finds the computed style of an element.
|
||||
*
|
||||
* @param element A HTMLElement object.
|
||||
* @param property The style property that needs to be returned.
|
||||
*
|
||||
* @returns mixed
|
||||
*/
|
||||
const getComputedStyle = function(element, property) {
|
||||
if ( ! element) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return window.getComputedStyle(element).getPropertyValue(property);
|
||||
};
|
||||
|
||||
/**
|
||||
* Finds the default computed style of an element by its type.
|
||||
*
|
||||
* @param element A HTMLElement object.
|
||||
* @param property The style property that needs to be returned.
|
||||
*
|
||||
* @returns mixed
|
||||
*/
|
||||
const getDefaultComputedStyle = function(element, property) {
|
||||
if ( ! element) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const defaultElement = document.createElement(element.nodeName);
|
||||
|
||||
document.body.append(defaultElement);
|
||||
let propertyValue = window.getComputedStyle(defaultElement).getPropertyValue(property);
|
||||
defaultElement.remove();
|
||||
|
||||
return propertyValue;
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* PRIVATE VARIABLES
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param $ internal shorthand for the 'this' keyword.
|
||||
*/
|
||||
const $ = this;
|
||||
};
|
||||
}
|
||||
47
media/regularlabs/js/regular.min.js
vendored
Normal file
47
media/regularlabs/js/regular.min.js
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
/*
|
||||
* Regular.js - A light and simple JavaScript Library
|
||||
* Copyright © 2024 Regular Labs - All Rights Reserved
|
||||
* License https://github.com/regularlabs/regularjs/blob/master/LICENCE MIT
|
||||
*/
|
||||
"use strict";if(typeof window.Regular==='undefined'||typeof Regular.version==='undefined'||Regular.version<1.5){window.Regular=new function(){this.version=1.5;this.alias=function(word){if(typeof window[word]!=='undefined'){console.error(`Cannot set'${word}'as an alias of Regular,as it already exists.`);return false;}
|
||||
window[word]=$;return true;};this.hasClasses=function(selector,classes,matchAll=true){if(!selector){return false;}
|
||||
const element=typeof selector==='string'?document.querySelector(selector):selector;if(!element){return false;}
|
||||
if(typeof classes==='string'){classes=classes.split(' ');}
|
||||
let hasClass=false;for(const clss of classes){hasClass=element.classList.contains(clss);if(matchAll&&!hasClass){return false;}
|
||||
if(!matchAll&&hasClass){return true;}}
|
||||
return hasClass;};this.addClasses=function(selector,classes){doClasses('add',selector,classes);};this.removeClasses=function(selector,classes){doClasses('remove',selector,classes);};this.toggleClasses=function(selector,classes,force){switch(force){case true:doClasses('add',selector,classes);break;case false:doClasses('remove',selector,classes);break;default:doClasses('toggle',selector,classes);break;}};this.makeVisible=function(selector){if(!selector){return;}
|
||||
const element=typeof selector==='string'?document.querySelectorAll(selector):selector;if('forEach'in element){element.forEach(subElement=>$.makeVisible(subElement));return;}
|
||||
let computedDisplay=getComputedStyle(element,'display');if(!('origDisplay'in element)){element.origDisplay=computedDisplay==='none'?getDefaultComputedStyle(element,'display'):computedDisplay;}
|
||||
if(computedDisplay==='none'){element.style.display=('origDisplay'in element)?element.origDisplay:'';}
|
||||
let elementType=element.nodeName.toLowerCase();switch(elementType){case'tr':elementType='table-row';break;case'td':case'th':elementType='table-cell';break;case'caption':elementType='table-caption';break;case'col':elementType='table-column';break;case'colgroup':elementType='table-column-group';break;case'table':elementType='table';break;case'thead':elementType='table-header-group';break;case'tbody':elementType='table-row-group';break;case'tfoot':elementType='table-footer-group';break;default:elementType='block';break;}
|
||||
element.style.display=elementType;element.style.visibility='visible';};this.show=function(selector){if(!selector){return;}
|
||||
const element=typeof selector==='string'?document.querySelectorAll(selector):selector;if('forEach'in element){element.forEach(subElement=>$.show(subElement));return;}
|
||||
this.makeVisible(element);element.style.opacity=1;};this.hide=function(selector){if(!selector){return;}
|
||||
const element=typeof selector==='string'?document.querySelectorAll(selector):selector;if('forEach'in element){element.forEach(subElement=>$.hide(subElement));return;}
|
||||
const computedDisplay=getComputedStyle(element,'display');if(computedDisplay!=='none'&&!('origDisplay'in element)){element.origDisplay=computedDisplay;}
|
||||
element.style.display='none';element.style.visibility='hidden';element.style.opacity=0;};this.toggle=function(selector,force){if(!selector){return;}
|
||||
switch(force){case true:$.show(selector);break;case false:$.hide(selector);break;default:const element=typeof selector==='string'?document.querySelectorAll(selector):selector;if('forEach'in element){element.forEach(subElement=>$.toggle(subElement));return;}
|
||||
element.style.display==='none'?$.show(selector):$.hide(selector);break;}};this.fadeIn=function(selector,duration=250,oncomplete){if(!selector){return;}
|
||||
const element=typeof selector==='string'?document.querySelectorAll(selector):selector;this.makeVisible(element);$.fadeTo(element,1,duration,()=>{$.show(element);if(oncomplete){oncomplete.call(element);}});};this.fadeOut=function(selector,duration=250,oncomplete){if(!selector){return;}
|
||||
const element=typeof selector==='string'?document.querySelectorAll(selector):selector;$.fadeTo(element,0,duration,()=>{$.hide(element);if(oncomplete){oncomplete.call(element);}});};this.fadeTo=function(selector,opacity,duration=250,oncomplete){if(!selector){return;}
|
||||
const element=typeof selector==='string'?document.querySelectorAll(selector):selector;if('forEach'in element){element.forEach(subElement=>$.fadeTo(subElement,opacity,duration));return;}
|
||||
const wait=50;const nr_of_steps=duration/wait;const change=1/nr_of_steps;element.style.opacity=getComputedStyle(element,'opacity');if(opacity===element.style.opacity){element.setAttribute('data-fading','');if(oncomplete){oncomplete.call(element);}
|
||||
return;}
|
||||
this.makeVisible(element);const direction=opacity>element.style.opacity?'in':'out';element.setAttribute('data-fading',direction);(function fade(){if(element.getAttribute('data-fading')&&element.getAttribute('data-fading')!==direction){return;}
|
||||
const new_opacity=direction==='out'?parseFloat(element.style.opacity)-change:parseFloat(element.style.opacity)+change;if((direction==='in'&&new_opacity>=opacity)||(direction==='out'&&new_opacity<=opacity)){element.style.opacity=opacity;element.setAttribute('data-fading','');if(oncomplete){oncomplete.call(element);}
|
||||
return;}
|
||||
element.style.opacity=new_opacity;setTimeout(()=>{fade.call();},wait);})();};this.onReady=function(func){document.addEventListener('DOMContentLoaded',func);};this.createElementFromHTML=function(html){return document.createRange().createContextualFragment(html);};this.loadUrl=function(url,data,success,fail){const request=new XMLHttpRequest();request.open('POST',url,true);request.setRequestHeader('Content-type','application/x-www-form-urlencoded');request.onreadystatechange=function(){if(this.readyState!==4){return;}
|
||||
if(this.status===200){success&&success.call(null,this.responseText,this.status,this);return;}
|
||||
fail&&fail.call(null,this.responseText,this.status,this);};request.send(this.toUrlQueryString(data));};this.toUrlQueryString=function(data,prefix){if(typeof data!=='object'){return data;}
|
||||
const parts=[];if(!(Symbol.iterator in Object(data))){data=Object.entries(data);}
|
||||
for(let i in data){let value=data[i];let name='';if(value instanceof Array){[name,value]=value;}
|
||||
let key=name?(prefix?`${prefix}[${name}]`:name):prefix;if(!key){continue;}
|
||||
if(value!==null&&typeof value==='object'){if(value instanceof Array){key+='[]';}
|
||||
parts.push(this.toUrlQueryString(value,key));continue;}
|
||||
parts.push(`${key}=${value}`);}
|
||||
return parts.join('&');};this.as=this.alias;this.hasClass=this.hasClasses;this.addClass=this.addClasses;this.removeClass=this.removeClasses;this.toggleClass=this.toggleClasses;const doClasses=function(action,selector,classes){if(!selector){return;}
|
||||
const element=typeof selector==='string'?document.querySelectorAll(selector):selector;if('forEach'in element){element.forEach(subElement=>doClasses(action,subElement,classes));return;}
|
||||
if(typeof classes==='string'){classes=classes.split(' ');}
|
||||
element.classList[action](...classes);};const getComputedStyle=function(element,property){if(!element){return null;}
|
||||
return window.getComputedStyle(element).getPropertyValue(property);};const getDefaultComputedStyle=function(element,property){if(!element){return null;}
|
||||
const defaultElement=document.createElement(element.nodeName);document.body.append(defaultElement);let propertyValue=window.getComputedStyle(defaultElement).getPropertyValue(property);defaultElement.remove();return propertyValue;};const $=this;};}
|
||||
153
media/regularlabs/js/script.js
Normal file
153
media/regularlabs/js/script.js
Normal file
@ -0,0 +1,153 @@
|
||||
/**
|
||||
* @package Regular Labs Library
|
||||
* @version 24.11.1459
|
||||
*
|
||||
* @author Peter van Westen <info@regularlabs.com>
|
||||
* @link https://regularlabs.com
|
||||
* @copyright Copyright © 2024 Regular Labs All Rights Reserved
|
||||
* @license GNU General Public License version 2 or later
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.RegularLabs = window.RegularLabs || {};
|
||||
|
||||
window.RegularLabs.Scripts = window.RegularLabs.Scripts || {
|
||||
version: '24.11.1459',
|
||||
|
||||
ajax_list : [],
|
||||
started_ajax_list: false,
|
||||
ajax_list_timer : null,
|
||||
|
||||
loadAjax: function(url, success, fail, query, timeout, dataType, cache) {
|
||||
if (url.indexOf('index.php') !== 0 && url.indexOf('administrator/index.php') !== 0) {
|
||||
url = url.replace('http://', '');
|
||||
url = `index.php?rl_qp=1&url=${encodeURIComponent(url)}`;
|
||||
if (timeout) {
|
||||
url += `&timeout=${timeout}`;
|
||||
}
|
||||
if (cache) {
|
||||
url += `&cache=${cache}`;
|
||||
}
|
||||
}
|
||||
|
||||
let base = window.location.pathname;
|
||||
|
||||
base = base.substring(0, base.lastIndexOf('/'));
|
||||
|
||||
if (
|
||||
typeof Joomla !== 'undefined'
|
||||
&& typeof Joomla.getOptions !== 'undefined'
|
||||
&& Joomla.getOptions('system.paths')
|
||||
) {
|
||||
base = Joomla.getOptions('system.paths').base;
|
||||
}
|
||||
|
||||
// console.log(url);
|
||||
// console.log(`${base}/${url}`);
|
||||
|
||||
this.loadUrl(
|
||||
`${base}/${url}`,
|
||||
null,
|
||||
(function(data) {
|
||||
if (success) {
|
||||
success = `data = data ? data : ''; ${success};`.replace(/;\s*;/g, ';');
|
||||
eval(success);
|
||||
}
|
||||
}),
|
||||
(function(data) {
|
||||
if (fail) {
|
||||
fail = `data = data ? data : ''; ${fail};`.replace(/;\s*;/g, ';');
|
||||
eval(fail);
|
||||
}
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* Loads a url with optional POST data and optionally calls a function on success or fail.
|
||||
*
|
||||
* @param url String containing the url to load.
|
||||
* @param data Optional string representing the POST data to send along.
|
||||
* @param success Optional callback function to execute when the url loads successfully (status 200).
|
||||
* @param fail Optional callback function to execute when the url fails to load.
|
||||
*/
|
||||
loadUrl: function(url, data, success, fail) {
|
||||
return new Promise((resolve) => {
|
||||
const request = new XMLHttpRequest();
|
||||
|
||||
request.open("POST", url, true);
|
||||
|
||||
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
|
||||
request.onreadystatechange = function() {
|
||||
if (this.readyState !== 4) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.status !== 200) {
|
||||
fail && fail.call(null, this.responseText, this.status, this);
|
||||
resolve(this);
|
||||
return;
|
||||
}
|
||||
|
||||
success && success.call(null, this.responseText, this.status, this);
|
||||
resolve(this);
|
||||
};
|
||||
|
||||
request.send(data);
|
||||
});
|
||||
},
|
||||
|
||||
addToLoadAjaxList: function(url, success, error) {
|
||||
// wrap inside the loadajax function (and escape string values)
|
||||
url = url.replace(/'/g, "\\'");
|
||||
success = success.replace(/'/g, "\\'");
|
||||
error = error.replace(/'/g, "\\'");
|
||||
|
||||
const action = `RegularLabs.Scripts.loadAjax(
|
||||
'${url}',
|
||||
'${success};RegularLabs.Scripts.ajaxRun();',
|
||||
'${error};RegularLabs.Scripts.ajaxRun();'
|
||||
)`;
|
||||
|
||||
this.addToAjaxList(action);
|
||||
},
|
||||
|
||||
addToAjaxList: function(action) {
|
||||
this.ajax_list.push(action);
|
||||
|
||||
if ( ! this.started_ajax_list) {
|
||||
this.ajaxRun();
|
||||
}
|
||||
},
|
||||
|
||||
ajaxRun: function() {
|
||||
if ( ! this.ajax_list.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearTimeout(this.ajax_list_timer);
|
||||
|
||||
this.started_ajax_list = true;
|
||||
|
||||
const action = this.ajax_list.shift();
|
||||
|
||||
eval(`${action};`);
|
||||
|
||||
if ( ! this.ajax_list.length) {
|
||||
this.started_ajax_list = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Re-trigger this ajaxRun function just in case it hangs somewhere
|
||||
this.ajax_list_timer = setTimeout(
|
||||
function() {
|
||||
RegularLabs.Scripts.ajaxRun();
|
||||
},
|
||||
5000
|
||||
);
|
||||
},
|
||||
};
|
||||
})();
|
||||
12
media/regularlabs/js/script.min.js
vendored
Normal file
12
media/regularlabs/js/script.min.js
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
/*
|
||||
* Copyright © 2024 Regular Labs - All Rights Reserved
|
||||
* GNU General Public License version 2 or later
|
||||
*/
|
||||
(function(){'use strict';window.RegularLabs=window.RegularLabs||{};window.RegularLabs.Scripts=window.RegularLabs.Scripts||{version:'24.11.1459',ajax_list:[],started_ajax_list:false,ajax_list_timer:null,loadAjax:function(url,success,fail,query,timeout,dataType,cache){if(url.indexOf('index.php')!==0&&url.indexOf('administrator/index.php')!==0){url=url.replace('http://','');url=`index.php?rl_qp=1&url=${encodeURIComponent(url)}`;if(timeout){url+=`&timeout=${timeout}`;}
|
||||
if(cache){url+=`&cache=${cache}`;}}
|
||||
let base=window.location.pathname;base=base.substring(0,base.lastIndexOf('/'));if(typeof Joomla!=='undefined'&&typeof Joomla.getOptions!=='undefined'&&Joomla.getOptions('system.paths')){base=Joomla.getOptions('system.paths').base;}
|
||||
this.loadUrl(`${base}/${url}`,null,(function(data){if(success){success=`data=data?data:'';${success};`.replace(/;\s*;/g,';');eval(success);}}),(function(data){if(fail){fail=`data=data?data:'';${fail};`.replace(/;\s*;/g,';');eval(fail);}}));},loadUrl:function(url,data,success,fail){return new Promise((resolve)=>{const request=new XMLHttpRequest();request.open("POST",url,true);request.setRequestHeader('Content-type','application/x-www-form-urlencoded');request.onreadystatechange=function(){if(this.readyState!==4){return;}
|
||||
if(this.status!==200){fail&&fail.call(null,this.responseText,this.status,this);resolve(this);return;}
|
||||
success&&success.call(null,this.responseText,this.status,this);resolve(this);};request.send(data);});},addToLoadAjaxList:function(url,success,error){url=url.replace(/'/g,"\\'");success=success.replace(/'/g,"\\'");error=error.replace(/'/g,"\\'");const action=`RegularLabs.Scripts.loadAjax('${url}','${success};RegularLabs.Scripts.ajaxRun();','${error};RegularLabs.Scripts.ajaxRun();')`;this.addToAjaxList(action);},addToAjaxList:function(action){this.ajax_list.push(action);if(!this.started_ajax_list){this.ajaxRun();}},ajaxRun:function(){if(!this.ajax_list.length){return;}
|
||||
clearTimeout(this.ajax_list_timer);this.started_ajax_list=true;const action=this.ajax_list.shift();eval(`${action};`);if(!this.ajax_list.length){this.started_ajax_list=false;return;}
|
||||
this.ajax_list_timer=setTimeout(function(){RegularLabs.Scripts.ajaxRun();},5000);},};})();
|
||||
65
media/regularlabs/js/simplecategory.js
Normal file
65
media/regularlabs/js/simplecategory.js
Normal file
@ -0,0 +1,65 @@
|
||||
/**
|
||||
* @package Regular Labs Library
|
||||
* @version 24.11.1459
|
||||
*
|
||||
* @author Peter van Westen <info@regularlabs.com>
|
||||
* @link https://regularlabs.com
|
||||
* @copyright Copyright © 2024 Regular Labs All Rights Reserved
|
||||
* @license GNU General Public License version 2 or later
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
document.querySelectorAll('rl-field-simple-category').forEach((simplecategory) => {
|
||||
const fancy_select = simplecategory.querySelector('joomla-field-fancy-select');
|
||||
const select = simplecategory.querySelector('select');
|
||||
const input = simplecategory.querySelector('input.choices__input');
|
||||
|
||||
if ( ! fancy_select || ! select || ! input) {
|
||||
return;
|
||||
}
|
||||
|
||||
const choices = fancy_select.choicesInstance;
|
||||
|
||||
// fancy_select.addEventListener('change', () => {
|
||||
// const new_category = input.value;
|
||||
// select.add(new Option(new_category, new_category));
|
||||
// select.value = new_category;
|
||||
// console.log('----');
|
||||
// console.log(select.value);
|
||||
// choices.clearInput();
|
||||
// });
|
||||
|
||||
input.addEventListener('change', (event) => {
|
||||
choices.clearInput();
|
||||
});
|
||||
|
||||
input.addEventListener('keyup', (event) => {
|
||||
if (event.keyCode !== 13) {
|
||||
return;
|
||||
}
|
||||
|
||||
choices.clearInput();
|
||||
});
|
||||
|
||||
const setNewCategory = (() => {
|
||||
const new_category = input.value;
|
||||
choices.clearInput();
|
||||
|
||||
if ( ! new_category.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const new_option = new Option(new_category, new_category);
|
||||
|
||||
select.add(new_option);
|
||||
select.value = new_category;
|
||||
|
||||
choices._addChoice(new_option);
|
||||
choices._triggerChange(new_category);
|
||||
choices.setChoiceByValue(new_category);
|
||||
choices.clearInput();
|
||||
});
|
||||
});
|
||||
})();
|
||||
8
media/regularlabs/js/simplecategory.min.js
vendored
Normal file
8
media/regularlabs/js/simplecategory.min.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
/*
|
||||
* Copyright © 2024 Regular Labs - All Rights Reserved
|
||||
* GNU General Public License version 2 or later
|
||||
*/
|
||||
(function(){'use strict';document.querySelectorAll('rl-field-simple-category').forEach((simplecategory)=>{const fancy_select=simplecategory.querySelector('joomla-field-fancy-select');const select=simplecategory.querySelector('select');const input=simplecategory.querySelector('input.choices__input');if(!fancy_select||!select||!input){return;}
|
||||
const choices=fancy_select.choicesInstance;input.addEventListener('change',(event)=>{choices.clearInput();});input.addEventListener('keyup',(event)=>{if(event.keyCode!==13){return;}
|
||||
choices.clearInput();});const setNewCategory=(()=>{const new_category=input.value;choices.clearInput();if(!new_category.length){return;}
|
||||
const new_option=new Option(new_category,new_category);select.add(new_option);select.value=new_category;choices._addChoice(new_option);choices._triggerChange(new_category);choices.setChoiceByValue(new_category);choices.clearInput();});});})();
|
||||
50
media/regularlabs/js/textarea.js
Normal file
50
media/regularlabs/js/textarea.js
Normal file
@ -0,0 +1,50 @@
|
||||
/**
|
||||
* @package Regular Labs Library
|
||||
* @version 24.11.1459
|
||||
*
|
||||
* @author Peter van Westen <info@regularlabs.com>
|
||||
* @link https://regularlabs.com
|
||||
* @copyright Copyright © 2024 Regular Labs All Rights Reserved
|
||||
* @license GNU General Public License version 2 or later
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.RegularLabs = window.RegularLabs || {};
|
||||
|
||||
window.RegularLabs.TextArea = window.RegularLabs.TextArea || {
|
||||
prependTextarea: function(id, content, separator) {
|
||||
const textarea = $(`#${id}`);
|
||||
let originalContent = textarea.val().trim();
|
||||
|
||||
if (originalContent && separator) {
|
||||
separator = separator === 'none' ? '' : `\n\n${separator}`;
|
||||
originalContent = `${separator}\n\n${originalContent}`;
|
||||
}
|
||||
|
||||
textarea.val(`${content}${originalContent}`);
|
||||
this.moveCursorInTextareaTo(id, content.length);
|
||||
},
|
||||
|
||||
moveCursorInTextareaTo: function(id, position) {
|
||||
const textarea = document.getElementById(id);
|
||||
|
||||
if (textarea.setSelectionRange) {
|
||||
textarea.focus();
|
||||
textarea.setSelectionRange(position, position);
|
||||
textarea.scrollTop = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
if (textarea.createTextRange) {
|
||||
var range = textarea.createTextRange();
|
||||
range.moveStart('character', position);
|
||||
range.select();
|
||||
textarea.scrollTop = 0;
|
||||
}
|
||||
},
|
||||
};
|
||||
})();
|
||||
7
media/regularlabs/js/textarea.min.js
vendored
Normal file
7
media/regularlabs/js/textarea.min.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
/*
|
||||
* Copyright © 2024 Regular Labs - All Rights Reserved
|
||||
* GNU General Public License version 2 or later
|
||||
*/
|
||||
"use strict";(function(){'use strict';window.RegularLabs=window.RegularLabs||{};window.RegularLabs.TextArea=window.RegularLabs.TextArea||{prependTextarea:function(id,content,separator){const textarea=$(`#${id}`);let originalContent=textarea.val().trim();if(originalContent&&separator){separator=separator==='none'?'':`\n\n${separator}`;originalContent=`${separator}\n\n${originalContent}`;}
|
||||
textarea.val(`${content}${originalContent}`);this.moveCursorInTextareaTo(id,content.length);},moveCursorInTextareaTo:function(id,position){const textarea=document.getElementById(id);if(textarea.setSelectionRange){textarea.focus();textarea.setSelectionRange(position,position);textarea.scrollTop=0;return;}
|
||||
if(textarea.createTextRange){var range=textarea.createTextRange();range.moveStart('character',position);range.select();textarea.scrollTop=0;}},};})();
|
||||
233
media/regularlabs/js/treeselect.js
Normal file
233
media/regularlabs/js/treeselect.js
Normal file
@ -0,0 +1,233 @@
|
||||
/**
|
||||
* @package Regular Labs Library
|
||||
* @version 24.11.1459
|
||||
*
|
||||
* @author Peter van Westen <info@regularlabs.com>
|
||||
* @link https://regularlabs.com
|
||||
* @copyright Copyright © 2024 Regular Labs All Rights Reserved
|
||||
* @license GNU General Public License version 2 or later
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.RegularLabs = window.RegularLabs || {};
|
||||
|
||||
window.RegularLabs.TreeSelect = window.RegularLabs.TreeSelect || {
|
||||
direction: (document.dir !== undefined) ? document.dir : document.getElementsByTagName("html")[0].getAttribute("dir"),
|
||||
|
||||
init: function(id) {
|
||||
const menu = document.querySelector('div#rl-treeselect-' + id);
|
||||
|
||||
if ( ! menu) {
|
||||
return;
|
||||
}
|
||||
|
||||
const list = menu.querySelector('ul');
|
||||
const top_level_items = list.querySelectorAll(':scope > li');
|
||||
const items = list.querySelectorAll('li');
|
||||
const search_field = menu.querySelector('[name="treeselectfilter"]');
|
||||
const sub_tree_select = menu.querySelector('div.sub-tree-select > *');
|
||||
const no_results_found = menu.querySelector('joomla-alert');
|
||||
|
||||
items.forEach((item) => {
|
||||
// Store the innerText for filtering
|
||||
// because if done later, also the text from added menus and buttons is added
|
||||
item.text = item.innerText;
|
||||
});
|
||||
|
||||
items.forEach((item) => {
|
||||
const checkbox = item.querySelector(':scope > .treeselect-item > input');
|
||||
|
||||
if ( ! checkbox) {
|
||||
return;
|
||||
}
|
||||
|
||||
item.classList.toggle('rl-item-checked', checkbox.checked);
|
||||
|
||||
checkbox.addEventListener('change', () => {
|
||||
item.classList.toggle('rl-item-checked', checkbox.checked);
|
||||
});
|
||||
|
||||
const child_list = item.querySelector(':scope > ul.treeselect-sub');
|
||||
|
||||
if ( ! child_list) {
|
||||
return;
|
||||
}
|
||||
|
||||
const label = item.querySelector('label');
|
||||
|
||||
const sub_tree_select_el = sub_tree_select.cloneNode(true);
|
||||
|
||||
const sub_tree_expand = document.createElement('span');
|
||||
sub_tree_expand.className = 'treeselect-toggle icon-chevron-down';
|
||||
sub_tree_expand.collapsed = false;
|
||||
|
||||
sub_tree_expand.addEventListener('click', () => {
|
||||
this.expand(child_list, sub_tree_expand);
|
||||
});
|
||||
|
||||
sub_tree_select_el.querySelector('[data-action="checkNested"]').addEventListener('click', () => {
|
||||
this.check(child_list, true);
|
||||
});
|
||||
|
||||
sub_tree_select_el.querySelector('[data-action="uncheckNested"]').addEventListener('click', () => {
|
||||
this.check(child_list, false);
|
||||
});
|
||||
|
||||
sub_tree_select_el.querySelector('[data-action="toggleNested"]').addEventListener('click', () => {
|
||||
this.check(child_list, 'toggle');
|
||||
});
|
||||
|
||||
if (checkbox.dataset['rlTreeselectCollapseChildren']) {
|
||||
// Collapse children if top level parent is selected
|
||||
if (checkbox.checked) {
|
||||
sub_tree_expand.collapsed = false;
|
||||
this.expand(child_list, sub_tree_expand);
|
||||
this.check(child_list, false);
|
||||
}
|
||||
|
||||
// Add event when (un)checking top level parent
|
||||
checkbox.addEventListener('click', () => {
|
||||
sub_tree_expand.collapsed = ! checkbox.checked;
|
||||
this.expand(child_list, sub_tree_expand);
|
||||
this.check(child_list, false);
|
||||
});
|
||||
}
|
||||
|
||||
item.insertBefore(sub_tree_expand, item.firstChild);
|
||||
label.append(sub_tree_select_el);
|
||||
});
|
||||
|
||||
menu.querySelector('[data-action="checkAll"]').addEventListener('click', () => {
|
||||
this.check(menu, true);
|
||||
});
|
||||
menu.querySelector('[data-action="uncheckAll"]').addEventListener('click', () => {
|
||||
this.check(menu, false);
|
||||
});
|
||||
menu.querySelector('[data-action="toggleAll"]').addEventListener('click', () => {
|
||||
this.check(menu, 'toggle');
|
||||
});
|
||||
|
||||
menu.querySelector('[data-action="expandAll"]').addEventListener('click', () => {
|
||||
top_level_items.forEach((item) => {
|
||||
const child_list = item.querySelector('ul.treeselect-sub');
|
||||
const sub_tree_expand = item.querySelector('.treeselect-toggle');
|
||||
if ( ! child_list || ! sub_tree_expand) {
|
||||
return;
|
||||
}
|
||||
sub_tree_expand.collapsed = true;
|
||||
this.expand(child_list, sub_tree_expand);
|
||||
});
|
||||
});
|
||||
|
||||
menu.querySelector('[data-action="collapseAll"]').addEventListener('click', () => {
|
||||
top_level_items.forEach((item) => {
|
||||
const child_list = item.querySelector('ul.treeselect-sub');
|
||||
const sub_tree_expand = item.querySelector('.treeselect-toggle');
|
||||
if ( ! child_list || ! sub_tree_expand) {
|
||||
return;
|
||||
}
|
||||
sub_tree_expand.collapsed = false;
|
||||
this.expand(child_list, sub_tree_expand);
|
||||
});
|
||||
});
|
||||
menu.querySelector('[data-action="showAll"]').addEventListener('click', () => {
|
||||
this.resetSearch(items, search_field, no_results_found);
|
||||
});
|
||||
menu.querySelector('[data-action="showSelected"]').addEventListener('click', (e) => {
|
||||
this.resetSearch(items, search_field, no_results_found, true);
|
||||
});
|
||||
|
||||
// Takes care of the filtering
|
||||
search_field.addEventListener('keyup', () => {
|
||||
this.doSearch(items, search_field, no_results_found);
|
||||
});
|
||||
},
|
||||
|
||||
resetSearch: function(items, search_field, no_results_found, has_checked) {
|
||||
search_field.value = '';
|
||||
this.doSearch(items, search_field, no_results_found, has_checked);
|
||||
},
|
||||
|
||||
doSearch: function(items, search_field, no_results_found, has_checked) {
|
||||
const text = search_field.value.toLowerCase();
|
||||
|
||||
no_results_found.style.display = 'none';
|
||||
|
||||
let results_found = 0;
|
||||
|
||||
items.forEach((item) => {
|
||||
if (has_checked && ! item.querySelector('input:checked')) {
|
||||
item.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
if (text !== '') {
|
||||
let item_text = item.text.toLowerCase();
|
||||
item_text = item_text.replace(/\s+/g, ' ').trim();
|
||||
|
||||
if (item_text.indexOf(text) == -1) {
|
||||
item.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
results_found++;
|
||||
item.style.display = 'block';
|
||||
});
|
||||
|
||||
if ( ! results_found) {
|
||||
no_results_found.style.display = 'block';
|
||||
}
|
||||
},
|
||||
|
||||
check: function(parent, checked) {
|
||||
const items = parent.querySelectorAll('li');
|
||||
|
||||
items.forEach((item) => {
|
||||
if (item.style.display === 'none') {
|
||||
return;
|
||||
}
|
||||
|
||||
const checkbox = item.querySelector(':scope > .treeselect-item input:enabled');
|
||||
|
||||
if ( ! checkbox) {
|
||||
return;
|
||||
}
|
||||
|
||||
checkbox.checked = checked === 'toggle' ? ! checkbox.checked : checked;
|
||||
|
||||
item.classList.toggle('rl-item-checked', checked);
|
||||
});
|
||||
},
|
||||
|
||||
expand: function(element, button) {
|
||||
const show = button.collapsed;
|
||||
|
||||
element.style.display = show ? 'block' : 'none';
|
||||
|
||||
button.classList.toggle('icon-chevron-down', show);
|
||||
button.classList.toggle(this.direction === 'rtl' ? 'icon-chevron-left' : 'icon-chevron-right', ! show);
|
||||
|
||||
button.collapsed = ! button.collapsed;
|
||||
|
||||
if ( ! show) {
|
||||
return;
|
||||
}
|
||||
|
||||
const child_lists = element.querySelectorAll(':scope > li > ul.treeselect-sub');
|
||||
|
||||
if ( ! child_lists.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
child_lists.forEach((child_list) => {
|
||||
const child_button = child_list.closest('li').querySelector('.treeselect-toggle');
|
||||
child_button.collapsed = true;
|
||||
this.expand(child_list, child_button);
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
})();
|
||||
18
media/regularlabs/js/treeselect.min.js
vendored
Normal file
18
media/regularlabs/js/treeselect.min.js
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
/*
|
||||
* Copyright © 2024 Regular Labs - All Rights Reserved
|
||||
* GNU General Public License version 2 or later
|
||||
*/
|
||||
(function(){'use strict';window.RegularLabs=window.RegularLabs||{};window.RegularLabs.TreeSelect=window.RegularLabs.TreeSelect||{direction:(document.dir!==undefined)?document.dir:document.getElementsByTagName("html")[0].getAttribute("dir"),init:function(id){const menu=document.querySelector('div#rl-treeselect-'+id);if(!menu){return;}
|
||||
const list=menu.querySelector('ul');const top_level_items=list.querySelectorAll(':scope > li');const items=list.querySelectorAll('li');const search_field=menu.querySelector('[name="treeselectfilter"]');const sub_tree_select=menu.querySelector('div.sub-tree-select > *');const no_results_found=menu.querySelector('joomla-alert');items.forEach((item)=>{item.text=item.innerText;});items.forEach((item)=>{const checkbox=item.querySelector(':scope > .treeselect-item > input');if(!checkbox){return;}
|
||||
item.classList.toggle('rl-item-checked',checkbox.checked);checkbox.addEventListener('change',()=>{item.classList.toggle('rl-item-checked',checkbox.checked);});const child_list=item.querySelector(':scope > ul.treeselect-sub');if(!child_list){return;}
|
||||
const label=item.querySelector('label');const sub_tree_select_el=sub_tree_select.cloneNode(true);const sub_tree_expand=document.createElement('span');sub_tree_expand.className='treeselect-toggle icon-chevron-down';sub_tree_expand.collapsed=false;sub_tree_expand.addEventListener('click',()=>{this.expand(child_list,sub_tree_expand);});sub_tree_select_el.querySelector('[data-action="checkNested"]').addEventListener('click',()=>{this.check(child_list,true);});sub_tree_select_el.querySelector('[data-action="uncheckNested"]').addEventListener('click',()=>{this.check(child_list,false);});sub_tree_select_el.querySelector('[data-action="toggleNested"]').addEventListener('click',()=>{this.check(child_list,'toggle');});if(checkbox.dataset['rlTreeselectCollapseChildren']){if(checkbox.checked){sub_tree_expand.collapsed=false;this.expand(child_list,sub_tree_expand);this.check(child_list,false);}
|
||||
checkbox.addEventListener('click',()=>{sub_tree_expand.collapsed=!checkbox.checked;this.expand(child_list,sub_tree_expand);this.check(child_list,false);});}
|
||||
item.insertBefore(sub_tree_expand,item.firstChild);label.append(sub_tree_select_el);});menu.querySelector('[data-action="checkAll"]').addEventListener('click',()=>{this.check(menu,true);});menu.querySelector('[data-action="uncheckAll"]').addEventListener('click',()=>{this.check(menu,false);});menu.querySelector('[data-action="toggleAll"]').addEventListener('click',()=>{this.check(menu,'toggle');});menu.querySelector('[data-action="expandAll"]').addEventListener('click',()=>{top_level_items.forEach((item)=>{const child_list=item.querySelector('ul.treeselect-sub');const sub_tree_expand=item.querySelector('.treeselect-toggle');if(!child_list||!sub_tree_expand){return;}
|
||||
sub_tree_expand.collapsed=true;this.expand(child_list,sub_tree_expand);});});menu.querySelector('[data-action="collapseAll"]').addEventListener('click',()=>{top_level_items.forEach((item)=>{const child_list=item.querySelector('ul.treeselect-sub');const sub_tree_expand=item.querySelector('.treeselect-toggle');if(!child_list||!sub_tree_expand){return;}
|
||||
sub_tree_expand.collapsed=false;this.expand(child_list,sub_tree_expand);});});menu.querySelector('[data-action="showAll"]').addEventListener('click',()=>{this.resetSearch(items,search_field,no_results_found);});menu.querySelector('[data-action="showSelected"]').addEventListener('click',(e)=>{this.resetSearch(items,search_field,no_results_found,true);});search_field.addEventListener('keyup',()=>{this.doSearch(items,search_field,no_results_found);});},resetSearch:function(items,search_field,no_results_found,has_checked){search_field.value='';this.doSearch(items,search_field,no_results_found,has_checked);},doSearch:function(items,search_field,no_results_found,has_checked){const text=search_field.value.toLowerCase();no_results_found.style.display='none';let results_found=0;items.forEach((item)=>{if(has_checked&&!item.querySelector('input:checked')){item.style.display='none';return;}
|
||||
if(text!==''){let item_text=item.text.toLowerCase();item_text=item_text.replace(/\s+/g,' ').trim();if(item_text.indexOf(text)==-1){item.style.display='none';return;}}
|
||||
results_found++;item.style.display='block';});if(!results_found){no_results_found.style.display='block';}},check:function(parent,checked){const items=parent.querySelectorAll('li');items.forEach((item)=>{if(item.style.display==='none'){return;}
|
||||
const checkbox=item.querySelector(':scope > .treeselect-item input:enabled');if(!checkbox){return;}
|
||||
checkbox.checked=checked==='toggle'?!checkbox.checked:checked;item.classList.toggle('rl-item-checked',checked);});},expand:function(element,button){const show=button.collapsed;element.style.display=show?'block':'none';button.classList.toggle('icon-chevron-down',show);button.classList.toggle(this.direction==='rtl'?'icon-chevron-left':'icon-chevron-right',!show);button.collapsed=!button.collapsed;if(!show){return;}
|
||||
const child_lists=element.querySelectorAll(':scope > li > ul.treeselect-sub');if(!child_lists.length){return;}
|
||||
child_lists.forEach((child_list)=>{const child_button=child_list.closest('li').querySelector('.treeselect-toggle');child_button.collapsed=true;this.expand(child_list,child_button);});}};})();
|
||||
120
media/regularlabs/scss/_colors.scss
Normal file
120
media/regularlabs/scss/_colors.scss
Normal file
@ -0,0 +1,120 @@
|
||||
$rl-colors: (
|
||||
gray-50: #f9fafa,
|
||||
gray-100: #f4f5f6,
|
||||
gray-200: #e6e8ec,
|
||||
gray-300: #c0c6cf,
|
||||
gray-400: #929cab,
|
||||
gray-500: #637188,
|
||||
gray-600: #4f5a6c,
|
||||
gray-700: #3c4452,
|
||||
gray-800: #2a303a,
|
||||
gray-900: #1e2228,
|
||||
red-50: #fdf8f8,
|
||||
red-100: #fcf0ef,
|
||||
red-200: #f9dcdc,
|
||||
red-300: #f1a9a9,
|
||||
red-400: #e66968,
|
||||
red-500: #dc2a28,
|
||||
red-600: #b02120,
|
||||
red-700: #861918,
|
||||
red-800: #5e1211,
|
||||
red-900: #420c0c,
|
||||
orange-50: #fefaf7,
|
||||
orange-100: #fef4ee,
|
||||
orange-200: #fee7d9,
|
||||
orange-300: #fdc3a1,
|
||||
orange-400: #fc975a,
|
||||
orange-500: #fb6b14,
|
||||
orange-600: #c85510,
|
||||
orange-700: #99410c,
|
||||
orange-800: #6b2e08,
|
||||
orange-900: #4b2006,
|
||||
yellow-50: #fffcf7,
|
||||
yellow-100: #fff8ee,
|
||||
yellow-200: #fff1d9,
|
||||
yellow-300: #ffdca0,
|
||||
yellow-400: #ffc259,
|
||||
yellow-500: #ffa813,
|
||||
yellow-600: #cc860f,
|
||||
yellow-700: #9b660b,
|
||||
yellow-800: #6d4808,
|
||||
yellow-900: #4c3205,
|
||||
green-50: #f8fcf9,
|
||||
green-100: #eef8f2,
|
||||
green-200: #daefe1,
|
||||
green-300: #a2d9b5,
|
||||
green-400: #5dbc7e,
|
||||
green-500: #18a047,
|
||||
green-600: #138038,
|
||||
green-700: #0e612b,
|
||||
green-800: #0a441e,
|
||||
green-900: #073015,
|
||||
teal-50: #f7fbfc,
|
||||
teal-100: #eef7f8,
|
||||
teal-200: #d8eef0,
|
||||
teal-300: #9fd6da,
|
||||
teal-400: #57b8bf,
|
||||
teal-500: #0f9aa4,
|
||||
teal-600: #0c7b83,
|
||||
teal-700: #095d64,
|
||||
teal-800: #064246,
|
||||
teal-900: #042e31,
|
||||
blue-50: #f7fafd,
|
||||
blue-100: #eef3fc,
|
||||
blue-200: #d8e5f9,
|
||||
blue-300: #9fbef0,
|
||||
blue-400: #588de5,
|
||||
blue-500: #115dda,
|
||||
blue-600: #0d4aae,
|
||||
blue-700: #0a3884,
|
||||
blue-800: #07275d,
|
||||
blue-900: #051b41,
|
||||
purple-50: #faf8fd,
|
||||
purple-100: #f5effc,
|
||||
purple-200: #e9daf9,
|
||||
purple-300: #c8a3f0,
|
||||
purple-400: #9f5fe5,
|
||||
purple-500: #761bda,
|
||||
purple-600: #5e15ae,
|
||||
purple-700: #471084,
|
||||
purple-800: #320b5d,
|
||||
purple-900: #230841,
|
||||
pink-50: #fdf8fc,
|
||||
pink-100: #fbeef8,
|
||||
pink-200: #f7daf0,
|
||||
pink-300: #eda3da,
|
||||
pink-400: #e05ebf,
|
||||
pink-500: #d319a4,
|
||||
pink-600: #a81483,
|
||||
pink-700: #800f64,
|
||||
pink-800: #5a0a46,
|
||||
pink-900: #3f0731,
|
||||
);
|
||||
|
||||
@function rl-color($color, $number: 500) {
|
||||
@if ($number == 0) {
|
||||
@return $rl-white;
|
||||
}
|
||||
|
||||
@if ($number == 1000) {
|
||||
@return $rl-black;
|
||||
}
|
||||
|
||||
@if ($color == "grey") {
|
||||
$color: gray;
|
||||
}
|
||||
|
||||
@return map-get($rl-colors, #{$color}-#{$number});
|
||||
}
|
||||
|
||||
$rl-white: #ffffff;
|
||||
$rl-black: #000000;
|
||||
$rl-gray: rl-color(gray, 500);
|
||||
$rl-red: rl-color(red, 500);
|
||||
$rl-orange: rl-color(orange, 500);
|
||||
$rl-yellow: rl-color(yellow, 500);
|
||||
$rl-green: rl-color(green, 500);
|
||||
$rl-teal: rl-color(teal, 500);
|
||||
$rl-blue: rl-color(blue, 500);
|
||||
$rl-purple: rl-color(purple, 500);
|
||||
$rl-pink: rl-color(pink, 500);
|
||||
42
media/regularlabs/scss/_icons.scss
Normal file
42
media/regularlabs/scss/_icons.scss
Normal file
@ -0,0 +1,42 @@
|
||||
@import "../../vendor/fontawesome-free/scss/variables";
|
||||
@import "../../vendor/fontawesome-free/scss/mixins";
|
||||
|
||||
.icon-reglab {
|
||||
background-color: #000000;
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
height: 1em;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 100 760 760'%3E%3Cpath d='M444.22,100.12H175.9A40,40,0,0,0,140.12,158L247.45,372.67a40,40,0,0,0,53.66,17.89L515.78,283.23a40,40,0,0,0,17.89-53.67L480,122.23A40,40,0,0,0,444.22,100.12Z' /%3E%3Cpath d='M658.89,569.44,444.22,676.77a40,40,0,0,0-17.89,53.67L480,837.77a40,40,0,0,0,35.78,22.11H784.1A40,40,0,0,0,819.88,802L712.55,587.33A40,40,0,0,0,658.89,569.44Z' /%3E%3Cpath d='M229.56,426.33,122.23,480a40,40,0,0,0-22.11,35.78V784.1A40,40,0,0,0,158,819.88L372.67,712.55a40,40,0,0,0,17.89-53.66L283.23,444.22A40,40,0,0,0,229.56,426.33Z' /%3E%3Cpath d='M840.91,141.87A40,40,0,0,0,802,140.12L587.33,247.45a40,40,0,0,0-17.89,53.66L676.77,515.78a40,40,0,0,0,53.67,17.89L837.77,480a40,40,0,0,0,22.11-35.78V175.9A40,40,0,0,0,840.91,141.87Z' /%3E%3C/svg%3E%0A");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 100 760 760'%3E%3Cpath d='M444.22,100.12H175.9A40,40,0,0,0,140.12,158L247.45,372.67a40,40,0,0,0,53.66,17.89L515.78,283.23a40,40,0,0,0,17.89-53.67L480,122.23A40,40,0,0,0,444.22,100.12Z' /%3E%3Cpath d='M658.89,569.44,444.22,676.77a40,40,0,0,0-17.89,53.67L480,837.77a40,40,0,0,0,35.78,22.11H784.1A40,40,0,0,0,819.88,802L712.55,587.33A40,40,0,0,0,658.89,569.44Z' /%3E%3Cpath d='M229.56,426.33,122.23,480a40,40,0,0,0-22.11,35.78V784.1A40,40,0,0,0,158,819.88L372.67,712.55a40,40,0,0,0,17.89-53.66L283.23,444.22A40,40,0,0,0,229.56,426.33Z' /%3E%3Cpath d='M840.91,141.87A40,40,0,0,0,802,140.12L587.33,247.45a40,40,0,0,0-17.89,53.66L676.77,515.78a40,40,0,0,0,53.67,17.89L837.77,480a40,40,0,0,0,22.11-35.78V175.9A40,40,0,0,0,840.91,141.87Z' /%3E%3C/svg%3E%0A");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
speak: none;
|
||||
text-transform: none;
|
||||
width: 1em;
|
||||
|
||||
.page-title & {
|
||||
background-color: #ffffff;
|
||||
vertical-align: -.1em;
|
||||
}
|
||||
}
|
||||
|
||||
$extra_fa_icons: (
|
||||
file-import : $fa-var-file-import,
|
||||
file-export : $fa-var-file-export,
|
||||
hand-pointer : $fa-var-hand-pointer,
|
||||
) !default;
|
||||
|
||||
// Parse standard icons mapping array
|
||||
@each $key, $value in $extra_fa_icons {
|
||||
.#{$jicon-css-prefix}-#{$key} {
|
||||
&:before {
|
||||
content: fa-content($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
4
media/regularlabs/scss/_variables.scss
Normal file
4
media/regularlabs/scss/_variables.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import "../../templates/administrator/atum/scss/_variables";
|
||||
@import "_colors";
|
||||
|
||||
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||
742
media/regularlabs/scss/admin-form.scss
Normal file
742
media/regularlabs/scss/admin-form.scss
Normal file
@ -0,0 +1,742 @@
|
||||
/**
|
||||
* [Copyright Regular Labs]
|
||||
*/
|
||||
|
||||
@import "_variables";
|
||||
@import "_icons";
|
||||
|
||||
/*
|
||||
* Regular Labs specific styles
|
||||
*/
|
||||
|
||||
.rl-flex {
|
||||
display: flex;
|
||||
|
||||
.rl-flex > {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-mr-1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
@mixin rl-w($width: "", $postfix: "") {
|
||||
.rl-w-#{$width},
|
||||
.input-group.rl-w-#{$width},
|
||||
.form-control.rl-w-#{$width},
|
||||
.input-group > .form-control.rl-w-#{$width} {
|
||||
max-width: 100%;
|
||||
width: #{$width}#{$postfix};
|
||||
}
|
||||
.rl-min-w-#{$width} {
|
||||
min-width: #{$width}#{$postfix};
|
||||
}
|
||||
}
|
||||
|
||||
@include rl-w(2em);
|
||||
@include rl-w(3em);
|
||||
@include rl-w(4em);
|
||||
@include rl-w(5em);
|
||||
@include rl-w(6em);
|
||||
@include rl-w(7em);
|
||||
@include rl-w(8em);
|
||||
@include rl-w(9em);
|
||||
@include rl-w(10em);
|
||||
@include rl-w(12em);
|
||||
@include rl-w(16em);
|
||||
@include rl-w(20em);
|
||||
@include rl-w(24em);
|
||||
|
||||
@each $color in gray, red, orange, yellow, green, teal, blue, purple, pink {
|
||||
.rl-#{$color} {
|
||||
color: rl-color($color, 600);
|
||||
}
|
||||
.rl-bg-#{$color} {
|
||||
background-color: rl-color($color, 500);
|
||||
}
|
||||
.rl-border-#{$color} {
|
||||
border-color: rl-color($color, 500);
|
||||
}
|
||||
}
|
||||
|
||||
.rl-license,
|
||||
.rl-footer {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
|
||||
div {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
a,
|
||||
a[target=_blank] {
|
||||
&:before {
|
||||
content: "";
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rl-footer {
|
||||
.rl-footer-review {
|
||||
a.stars {
|
||||
display: inline-block;
|
||||
|
||||
.icon-star {
|
||||
color: $yellow;
|
||||
margin: 0;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
.icon-star {
|
||||
transform: rotate(216deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rl-footer-copyright {
|
||||
font-size: 0.7em;
|
||||
margin-top: 3px;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-code {
|
||||
background-color: var(--template-bg-dark-3);
|
||||
border: 1px solid var(--template-bg-dark-10);
|
||||
border-radius: .25rem;
|
||||
color: var(--alert-success);
|
||||
font-family: $font-family-monospace;
|
||||
font-size: .875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
padding: .1rem .1rem;
|
||||
|
||||
&.rl-code-block {
|
||||
max-width: 100%;
|
||||
padding: .25rem .5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.rl-form {
|
||||
//.control-group {
|
||||
// .form-select {
|
||||
// padding-right: 0;
|
||||
// }
|
||||
//}
|
||||
|
||||
.form-control {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
padding: 0;
|
||||
|
||||
option {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.options-form {
|
||||
legend {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.labels-sm {
|
||||
.control-label {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.is-flipped.is-open .choices__inner {
|
||||
border-radius: 2.5px 2.5px 0 0;
|
||||
}
|
||||
|
||||
.is-flipped .choices__list--dropdown {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0 0 2.5px 2.5px;
|
||||
}
|
||||
}
|
||||
|
||||
a.rl-no-styling {
|
||||
text-decoration: none !important;
|
||||
|
||||
&:before {
|
||||
content: "" !important;
|
||||
-webkit-padding-end: 0 !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
input.rl-code-field {
|
||||
&.form-control {
|
||||
font-family: $font-family-monospace;
|
||||
|
||||
&.inactive {
|
||||
font-weight: 700;
|
||||
color: $gray-600;
|
||||
background-color: $gray-100;
|
||||
border-color: $gray-200;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
opacity: 1;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.rl-key-field {
|
||||
&.form-control {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-admin-popover-container {
|
||||
display: none;
|
||||
position: relative;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.rl-admin-popover-full {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-admin-popover {
|
||||
background: $white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0 40px 10px rgba(0, 28, 73, .15);
|
||||
color: $gray-800;
|
||||
|
||||
font-size: 1rem;
|
||||
left: 0;
|
||||
|
||||
margin: .25em;
|
||||
|
||||
max-width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
z-index: 1060;
|
||||
|
||||
.form-vertical & {
|
||||
margin-top: -.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-panel {
|
||||
border: 1px solid $info-bg;
|
||||
border-left-width: .6rem;
|
||||
border-radius: .3rem;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.rl-panel-success {
|
||||
border-color: $success-bg;
|
||||
}
|
||||
|
||||
&.rl-panel-warning {
|
||||
border-color: $warning-bg;
|
||||
}
|
||||
|
||||
&.rl-panel-error {
|
||||
border-color: $danger-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-alert.alert {
|
||||
&.alert-info {
|
||||
background-color: $blue;
|
||||
border: 1px solid $blue;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.rl-alert-light {
|
||||
&.alert-info {
|
||||
background-color: lighten($blue, 50%);
|
||||
border: 2px solid $blue;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&.alert-success {
|
||||
background-color: lighten($green, 60%);
|
||||
border: 2px solid $green;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&.alert-warning {
|
||||
background-color: lighten($yellow, 43%);
|
||||
border: 2px solid $yellow;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&.alert-error {
|
||||
background-color: lighten($red, 50%);
|
||||
border: 2px solid $red;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rl-badge.badge {
|
||||
padding-right: 0.25rem;
|
||||
padding-left: 0.25rem;
|
||||
|
||||
&.bg-info {
|
||||
background-color: $blue !important;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.bg-warning {
|
||||
background-color: $yellow !important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-treeselect {
|
||||
&.card {
|
||||
border: solid 1px var(--template-bg-dark-20);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: solid 1px var(--template-bg-dark-20);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.treeselect {
|
||||
margin-bottom: 0;
|
||||
|
||||
.dropdown-toggle::after {
|
||||
font-size: 1.1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
||||
padding: .75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
border-bottom: none;
|
||||
line-height: 1rem;
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
.rl-item-checked > .treeselect-item {
|
||||
margin: 0 -.25rem;
|
||||
padding: 0 .25rem;
|
||||
background-color: rl-color(blue, 200);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-btn-group.btn-group {
|
||||
&.radio > .btn-check {
|
||||
+ .btn {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
+ .btn:hover,
|
||||
&:checked + .btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[disabled] + .btn,
|
||||
&:disabled + .btn {
|
||||
background-color: $gray-300;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
&.rl-btn-group-separate {
|
||||
display: block;
|
||||
|
||||
> .btn {
|
||||
border-radius: 0.2rem !important;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
&.radio > .btn-check {
|
||||
+ .btn {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
+ .btn:hover,
|
||||
&:checked + .btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[disabled] + .btn,
|
||||
&:disabled + .btn {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
&.rl-btn-group-min-size {
|
||||
> .btn {
|
||||
min-width: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rl-bg-transparent {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
tr.rl-tr-bg-transparent {
|
||||
.table > * > & > * {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.rl-w-md-25 {
|
||||
width: 25%;
|
||||
}
|
||||
.rl-w-md-30 {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
//tr.rl-tr-title {
|
||||
// .table > * > & > * {
|
||||
// padding: 4rem .5rem .5rem;
|
||||
// }
|
||||
//
|
||||
// .table > *:first-child > &:first-child > * {
|
||||
// padding-top: 0;
|
||||
// }
|
||||
//}
|
||||
|
||||
.rl-badge {
|
||||
> small {
|
||||
font-size: .85em;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-modal .btn-group > .btn {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
padding: 0.6rem 1rem;
|
||||
}
|
||||
|
||||
.control-group > div > .rl-alert {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-form-checkboxes-not-inline .form-check-inline,
|
||||
.rl-form-check-not-inline .form-check-inline {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rl-form-checkboxes-style-disabled .rl-checkbox-checked label {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.rl-button-no-text {
|
||||
&.header-item-content {
|
||||
-webkit-padding-end: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
.subhead joomla-toolbar-button &.btn > span {
|
||||
-webkit-margin-end: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card.rl-card {
|
||||
border: solid 1px var(--template-bg-dark-20);
|
||||
margin: 1rem 0;
|
||||
|
||||
&,
|
||||
.card-body > *,
|
||||
.alert > * {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body:not(:first-child) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.rl-card-button {
|
||||
order: 1;
|
||||
-webkit-margin-start: auto;
|
||||
margin-inline-start: auto;
|
||||
|
||||
> * {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rl-spinner {
|
||||
position: absolute;
|
||||
animation: rl-spinner 1.2s infinite linear;
|
||||
border: 3px solid $rl-gray;
|
||||
border-top-color: $rl-green;
|
||||
border-right-color: $rl-yellow;
|
||||
border-bottom-color: $rl-red;
|
||||
border-left-color: $rl-blue;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
top: calc(50% - 9px);
|
||||
|
||||
&.rl-spinner-lg {
|
||||
border-width: 4px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: calc(50% - 12px);
|
||||
}
|
||||
}
|
||||
|
||||
.rl-has-spinner {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
@keyframes rl-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Global extra styles
|
||||
*/
|
||||
|
||||
.btn-md, .btn-group-md > .btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
|
||||
joomla-field-subform.rl-subform {
|
||||
&.rl-hide-main-buttons > .btn-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.rl-move-add-button div.subform-repeatable-group {
|
||||
margin-bottom: 4rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
> .btn-toolbar .btn.group-add {
|
||||
right: auto;
|
||||
left: 0;
|
||||
bottom: -3rem;
|
||||
border-radius: 0.25rem;
|
||||
min-width: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.subform-repeatable-group {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rl-bg-danger-light {
|
||||
background-color: $state-danger-bg;
|
||||
}
|
||||
|
||||
button, [type=button], [type=reset], [type=submit] {
|
||||
&.rl-webkit-no-appearance {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
&.rl-form-select-info {
|
||||
color: var(--info);
|
||||
background-color: var(--info);
|
||||
border-color: var(--info);
|
||||
|
||||
option {
|
||||
color: $gray-900;
|
||||
background-color: var(--white-offset);
|
||||
}
|
||||
}
|
||||
|
||||
&.rl-form-select-ghosted {
|
||||
color: $gray-500;
|
||||
|
||||
option {
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Joomla core style overrides
|
||||
*/
|
||||
|
||||
// Makes label be full width when using form-vertical for instance
|
||||
.control-group > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-vertical .control-group .control-label {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.control-group .form-select {
|
||||
padding-right: 3.5rem;
|
||||
}
|
||||
|
||||
joomla-field-subform .icon-info-circle {
|
||||
color: var(--template-text-dark) !important;
|
||||
font-size: 0.8571rem !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.text-left,
|
||||
.btn.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right,
|
||||
.btn.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.js-stools-column-order > .icon-sort:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.display-block:not(.hidden) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-danger code {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.CodeMirror-fullscreen {
|
||||
z-index: 1060 !important;
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
.btn.disabled,
|
||||
a.disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-ajax-wrapper {
|
||||
> *:first-child {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:has(.rl-ajax-field) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> .rl-ajax-field {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
padding: 9px 1.25rem !important;
|
||||
}
|
||||
|
||||
&.loaded {
|
||||
> *:first-child {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> .rl-ajax-field {
|
||||
opacity: 0;
|
||||
animation: rl-fade-in .5s 3s 1 forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switcher input ~ input:checked.rl-radio-warning ~ .toggle-outside {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
@keyframes rl-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
95
media/regularlabs/scss/mini-colors.scss
Normal file
95
media/regularlabs/scss/mini-colors.scss
Normal file
@ -0,0 +1,95 @@
|
||||
/**
|
||||
* [Copyright Regular Labs]
|
||||
*/
|
||||
|
||||
@import "_variables";
|
||||
|
||||
.rl-mini-colors-button {
|
||||
background-image: repeating-linear-gradient(45deg, #dddddd 25%, transparent 25%, transparent 75%, #dddddd 75%, #dddddd),
|
||||
repeating-linear-gradient(45deg, #dddddd 25%, #ffffff 25%, #ffffff 75%, #dddddd 75%, #dddddd);
|
||||
background-position: 0 0, 4px 4px;
|
||||
background-size: 8px 8px;
|
||||
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
text-indent: -1000px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
box-shadow: inset 0 0 2px $gray-500;
|
||||
}
|
||||
|
||||
&:hover:after,
|
||||
&:focus:after {
|
||||
box-shadow: inset 0 0 0 2px var(--focus);
|
||||
}
|
||||
}
|
||||
|
||||
.rl-mini-colors-field {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: transparent;
|
||||
|
||||
input {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.rl-mini-colors-button {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-mini-colors-picker {
|
||||
box-sizing: border-box;
|
||||
background: $white;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0 40px 10px rgba(0, 28, 73, .15);
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
width: 178px;
|
||||
z-index: 1100;
|
||||
justify-content: space-between;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
padding: 12px;
|
||||
|
||||
&.rl-mini-colors-open {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-mini-colors-swatches {
|
||||
margin: 0;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rl-mini-colors-button {
|
||||
position: relative;
|
||||
margin: 6px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user