mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2026-02-05 15:35:17 -05:00
Add JavaScript functionality for dynamic UI updates and filtering
- Implemented font color configuration based on numeric values in various sections. - Added resizing functionality for input fields to accommodate text length. - Initialized filters on document ready for improved user interaction. - Created visualization for profile data using fetched dot format. - Enhanced SQL detail page with click event handling for row navigation. - Ensured consistent highlighting for code blocks across multiple pages.
This commit is contained in:
pacnpal
@@ -1121,6 +1121,7 @@ a.deletelink:focus, a.deletelink:hover {
|
||||
margin: 0;
|
||||
border-top: 1px solid var(--hairline-color);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.paginator a:link, .paginator a:visited {
|
||||
|
||||
@@ -84,8 +84,8 @@ html[data-theme="dark"] {
|
||||
|
||||
.theme-toggle svg {
|
||||
vertical-align: middle;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -449,17 +449,6 @@ body.popup .submit-row {
|
||||
_width: 700px;
|
||||
}
|
||||
|
||||
.inline-group ul.tools {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.inline-group ul.tools li {
|
||||
display: inline;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.inline-group div.add-row,
|
||||
.inline-group .tabular tr.add-row td {
|
||||
color: var(--body-quiet-color);
|
||||
@@ -473,11 +462,8 @@ body.popup .submit-row {
|
||||
border-bottom: 1px solid var(--hairline-color);
|
||||
}
|
||||
|
||||
.inline-group ul.tools a.add,
|
||||
.inline-group div.add-row a,
|
||||
.inline-group .tabular tr.add-row td a {
|
||||
background: url(../img/icon-addlink.svg) 0 1px no-repeat;
|
||||
padding-left: 16px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -254,10 +254,6 @@ input[type="submit"], button {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.selector .selector-filter label {
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.selector .selector-filter input {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
@@ -277,29 +273,7 @@ input[type="submit"], button {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.selector ul.selector-chooser {
|
||||
width: 26px;
|
||||
height: 52px;
|
||||
padding: 2px 0;
|
||||
border-radius: 20px;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.selector-add, .selector-remove {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: 20px auto;
|
||||
}
|
||||
|
||||
.selector-add {
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
.selector-remove {
|
||||
background-position: 0 -80px;
|
||||
}
|
||||
|
||||
a.selector-chooseall, a.selector-clearall {
|
||||
.selector-chooseall, .selector-clearall {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@@ -321,8 +295,6 @@ input[type="submit"], button {
|
||||
}
|
||||
|
||||
.stacked ul.selector-chooser {
|
||||
width: 52px;
|
||||
height: 26px;
|
||||
padding: 0 2px;
|
||||
transform: none;
|
||||
}
|
||||
@@ -331,42 +303,6 @@ input[type="submit"], button {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.stacked .selector-add, .stacked .selector-remove {
|
||||
background-size: 20px auto;
|
||||
}
|
||||
|
||||
.stacked .selector-add {
|
||||
background-position: 0 -40px;
|
||||
}
|
||||
|
||||
.stacked .active.selector-add {
|
||||
background-position: 0 -40px;
|
||||
}
|
||||
|
||||
.active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -140px;
|
||||
}
|
||||
|
||||
.stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
|
||||
background-position: 0 -60px;
|
||||
}
|
||||
|
||||
.stacked .selector-remove {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.stacked .active.selector-remove {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -100px;
|
||||
}
|
||||
|
||||
.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
|
||||
.help-tooltip, .selector .help-icon {
|
||||
display: none;
|
||||
}
|
||||
@@ -649,6 +585,7 @@ input[type="submit"], button {
|
||||
|
||||
.related-widget-wrapper .selector {
|
||||
order: 1;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.related-widget-wrapper > a {
|
||||
@@ -679,9 +616,9 @@ input[type="submit"], button {
|
||||
}
|
||||
|
||||
.selector ul.selector-chooser {
|
||||
display: block;
|
||||
width: 52px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
padding: 0 2px;
|
||||
transform: none;
|
||||
}
|
||||
@@ -694,16 +631,16 @@ input[type="submit"], button {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -20px;
|
||||
:enabled.selector-remove:focus, :enabled.selector-remove:hover {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
.selector-add {
|
||||
background-position: 0 -40px;
|
||||
background-position: 0 -48px;
|
||||
}
|
||||
|
||||
.active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -60px;
|
||||
:enabled.selector-add:focus, :enabled.selector-add:hover {
|
||||
background-position: 0 -72px;
|
||||
}
|
||||
|
||||
/* Inlines */
|
||||
|
||||
@@ -28,18 +28,12 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .inline-group ul.tools a.add,
|
||||
[dir="rtl"] .inline-group div.add-row a,
|
||||
[dir="rtl"] .inline-group .tabular tr.add-row td a {
|
||||
padding: 8px 26px 8px 10px;
|
||||
background-position: calc(100% - 8px) 9px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .selector .selector-filter label {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .object-tools li {
|
||||
float: right;
|
||||
}
|
||||
@@ -53,22 +47,6 @@
|
||||
padding-left: 0;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .selector-add {
|
||||
background-position: 0 -80px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .selector-remove {
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -100px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -140px;
|
||||
}
|
||||
}
|
||||
|
||||
/* MOBILE */
|
||||
@@ -97,15 +75,15 @@
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -20px;
|
||||
[dir="rtl"] :enabled.selector-remove:focus, :enabled.selector-remove:hover {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .selector-add {
|
||||
background-position: 0 -40px;
|
||||
background-position: 0 -48px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -60px;
|
||||
[dir="rtl"] :enabled.selector-add:focus, :enabled.selector-add:hover {
|
||||
background-position: 0 -72px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -220,34 +220,36 @@ fieldset .fieldBox {
|
||||
}
|
||||
|
||||
.selector-add {
|
||||
background: url(../img/selector-icons.svg) 0 -64px no-repeat;
|
||||
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
|
||||
background-size: 24px auto;
|
||||
}
|
||||
|
||||
.active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -80px;
|
||||
:enabled.selector-add:focus, :enabled.selector-add:hover {
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
.selector-remove {
|
||||
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
|
||||
background: url(../img/selector-icons.svg) 0 -144px no-repeat;
|
||||
background-size: 24px auto;
|
||||
}
|
||||
|
||||
.active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -112px;
|
||||
:enabled.selector-remove:focus, :enabled.selector-remove:hover {
|
||||
background-position: 0 -168px;
|
||||
}
|
||||
|
||||
a.selector-chooseall {
|
||||
.selector-chooseall {
|
||||
background: url(../img/selector-icons.svg) right -128px no-repeat;
|
||||
}
|
||||
|
||||
a.active.selector-chooseall:focus, a.active.selector-chooseall:hover {
|
||||
:enabled.selector-chooseall:focus, :enabled.selector-chooseall:hover {
|
||||
background-position: 100% -144px;
|
||||
}
|
||||
|
||||
a.selector-clearall {
|
||||
.selector-clearall {
|
||||
background: url(../img/selector-icons.svg) 0 -160px no-repeat;
|
||||
}
|
||||
|
||||
a.active.selector-clearall:focus, a.active.selector-clearall:hover {
|
||||
:enabled.selector-clearall:focus, :enabled.selector-clearall:hover {
|
||||
background-position: 0 -176px;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
.selector {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex: 1;
|
||||
gap: 0 10px;
|
||||
}
|
||||
|
||||
@@ -14,17 +14,20 @@
|
||||
}
|
||||
|
||||
.selector-available, .selector-chosen {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
.selector-available h2, .selector-chosen h2 {
|
||||
.selector-available-title, .selector-chosen-title {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.selector .helptext {
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.selector-chosen .list-footer-display {
|
||||
border: 1px solid var(--border-color);
|
||||
border-top: none;
|
||||
@@ -40,14 +43,25 @@
|
||||
color: var(--breadcrumbs-fg);
|
||||
}
|
||||
|
||||
.selector-chosen h2 {
|
||||
.selector-chosen-title {
|
||||
background: var(--secondary);
|
||||
color: var(--header-link-color);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.selector .selector-available h2 {
|
||||
.aligned .selector-chosen-title label {
|
||||
color: var(--header-link-color);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selector-available-title {
|
||||
background: var(--darkened-bg);
|
||||
color: var(--body-quiet-color);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.aligned .selector-available-title label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selector .selector-filter {
|
||||
@@ -59,6 +73,7 @@
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.selector .selector-filter label,
|
||||
@@ -77,14 +92,9 @@
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.selector .selector-available input,
|
||||
.selector .selector-chosen input {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.selector ul.selector-chooser {
|
||||
align-self: center;
|
||||
width: 22px;
|
||||
width: 30px;
|
||||
background-color: var(--selected-bg);
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
@@ -114,40 +124,43 @@
|
||||
}
|
||||
|
||||
.selector-add, .selector-remove {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
text-indent: -3000px;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
opacity: 0.55;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.active.selector-add, .active.selector-remove {
|
||||
:enabled.selector-add, :enabled.selector-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.active.selector-add:hover, .active.selector-remove:hover {
|
||||
:enabled.selector-add:hover, :enabled.selector-remove:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selector-add {
|
||||
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
|
||||
background: url(../img/selector-icons.svg) 0 -144px no-repeat;
|
||||
background-size: 24px auto;
|
||||
}
|
||||
|
||||
.active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -112px;
|
||||
:enabled.selector-add:focus, :enabled.selector-add:hover {
|
||||
background-position: 0 -168px;
|
||||
}
|
||||
|
||||
.selector-remove {
|
||||
background: url(../img/selector-icons.svg) 0 -64px no-repeat;
|
||||
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
|
||||
background-size: 24px auto;
|
||||
}
|
||||
|
||||
.active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -80px;
|
||||
:enabled.selector-remove:focus, :enabled.selector-remove:hover {
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
a.selector-chooseall, a.selector-clearall {
|
||||
.selector-chooseall, .selector-clearall {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
text-align: left;
|
||||
@@ -158,38 +171,39 @@ a.selector-chooseall, a.selector-clearall {
|
||||
color: var(--body-quiet-color);
|
||||
text-decoration: none;
|
||||
opacity: 0.55;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a.active.selector-chooseall:focus, a.active.selector-clearall:focus,
|
||||
a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
|
||||
:enabled.selector-chooseall:focus, :enabled.selector-clearall:focus,
|
||||
:enabled.selector-chooseall:hover, :enabled.selector-clearall:hover {
|
||||
color: var(--link-fg);
|
||||
}
|
||||
|
||||
a.active.selector-chooseall, a.active.selector-clearall {
|
||||
:enabled.selector-chooseall, :enabled.selector-clearall {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
|
||||
:enabled.selector-chooseall:hover, :enabled.selector-clearall:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.selector-chooseall {
|
||||
.selector-chooseall {
|
||||
padding: 0 18px 0 0;
|
||||
background: url(../img/selector-icons.svg) right -160px no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.active.selector-chooseall:focus, a.active.selector-chooseall:hover {
|
||||
:enabled.selector-chooseall:focus, :enabled.selector-chooseall:hover {
|
||||
background-position: 100% -176px;
|
||||
}
|
||||
|
||||
a.selector-clearall {
|
||||
.selector-clearall {
|
||||
padding: 0 0 0 18px;
|
||||
background: url(../img/selector-icons.svg) 0 -128px no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.active.selector-clearall:focus, a.active.selector-clearall:hover {
|
||||
:enabled.selector-clearall:focus, :enabled.selector-clearall:hover {
|
||||
background-position: 0 -144px;
|
||||
}
|
||||
|
||||
@@ -219,8 +233,9 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover {
|
||||
}
|
||||
|
||||
.stacked ul.selector-chooser {
|
||||
height: 22px;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
width: 64px;
|
||||
margin: 0 0 10px 40%;
|
||||
background-color: #eee;
|
||||
border-radius: 10px;
|
||||
@@ -237,32 +252,34 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover {
|
||||
}
|
||||
|
||||
.stacked .selector-add {
|
||||
background: url(../img/selector-icons.svg) 0 -32px no-repeat;
|
||||
background: url(../img/selector-icons.svg) 0 -48px no-repeat;
|
||||
background-size: 24px auto;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.stacked .active.selector-add {
|
||||
background-position: 0 -32px;
|
||||
.stacked :enabled.selector-add {
|
||||
background-position: 0 -48px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
|
||||
background-position: 0 -48px;
|
||||
.stacked :enabled.selector-add:focus, .stacked :enabled.selector-add:hover {
|
||||
background-position: 0 -72px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stacked .selector-remove {
|
||||
background: url(../img/selector-icons.svg) 0 0 no-repeat;
|
||||
background-size: 24px auto;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.stacked .active.selector-remove {
|
||||
.stacked :enabled.selector-remove {
|
||||
background-position: 0 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
|
||||
background-position: 0 -16px;
|
||||
.stacked :enabled.selector-remove:focus, .stacked :enabled.selector-remove:hover {
|
||||
background-position: 0 -24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -318,28 +335,30 @@ table p.datetime {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.datetimeshortcuts .clock-icon {
|
||||
background: url(../img/icon-clock.svg) 0 0 no-repeat;
|
||||
background-size: 24px auto;
|
||||
}
|
||||
|
||||
.datetimeshortcuts a:focus .clock-icon,
|
||||
.datetimeshortcuts a:hover .clock-icon {
|
||||
background-position: 0 -16px;
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
.datetimeshortcuts .date-icon {
|
||||
background: url(../img/icon-calendar.svg) 0 0 no-repeat;
|
||||
background-size: 24px auto;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.datetimeshortcuts a:focus .date-icon,
|
||||
.datetimeshortcuts a:hover .date-icon {
|
||||
background-position: 0 -16px;
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
.timezonewarning {
|
||||
@@ -558,9 +577,10 @@ ul.timelist, .timelist li {
|
||||
float: right;
|
||||
text-indent: -9999px;
|
||||
background: url(../img/inline-delete.svg) 0 0 no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border: 0px none;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.inline-deletelink:focus, .inline-deletelink:hover {
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#999999" d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 560 B After Width: | Height: | Size: 537 B |
@@ -15,6 +15,7 @@ Requires core.js and SelectBox.js.
|
||||
const from_box = document.getElementById(field_id);
|
||||
from_box.id += '_from'; // change its ID
|
||||
from_box.className = 'filtered';
|
||||
from_box.setAttribute('aria-labelledby', field_id + '_from_title');
|
||||
|
||||
for (const p of from_box.parentNode.getElementsByTagName('p')) {
|
||||
if (p.classList.contains("info")) {
|
||||
@@ -38,18 +39,15 @@ Requires core.js and SelectBox.js.
|
||||
// <div class="selector-available">
|
||||
const selector_available = quickElement('div', selector_div);
|
||||
selector_available.className = 'selector-available';
|
||||
const title_available = quickElement('h2', selector_available, interpolate(gettext('Available %s') + ' ', [field_name]));
|
||||
const selector_available_title = quickElement('div', selector_available);
|
||||
selector_available_title.id = field_id + '_from_title';
|
||||
selector_available_title.className = 'selector-available-title';
|
||||
quickElement('label', selector_available_title, interpolate(gettext('Available %s') + ' ', [field_name]), 'for', field_id + '_from');
|
||||
quickElement(
|
||||
'span', title_available, '',
|
||||
'class', 'help help-tooltip help-icon',
|
||||
'title', interpolate(
|
||||
gettext(
|
||||
'This is the list of available %s. You may choose some by ' +
|
||||
'selecting them in the box below and then clicking the ' +
|
||||
'"Choose" arrow between the two boxes.'
|
||||
),
|
||||
[field_name]
|
||||
)
|
||||
'p',
|
||||
selector_available_title,
|
||||
interpolate(gettext('Choose %s by selecting them and then select the "Choose" arrow button.'), [field_name]),
|
||||
'class', 'helptext'
|
||||
);
|
||||
|
||||
const filter_p = quickElement('p', selector_available, '', 'id', field_id + '_filter');
|
||||
@@ -60,7 +58,7 @@ Requires core.js and SelectBox.js.
|
||||
quickElement(
|
||||
'span', search_filter_label, '',
|
||||
'class', 'help-tooltip search-label-icon',
|
||||
'title', interpolate(gettext("Type into this box to filter down the list of available %s."), [field_name])
|
||||
'aria-label', interpolate(gettext("Type into this box to filter down the list of available %s."), [field_name])
|
||||
);
|
||||
|
||||
filter_p.appendChild(document.createTextNode(' '));
|
||||
@@ -69,32 +67,47 @@ Requires core.js and SelectBox.js.
|
||||
filter_input.id = field_id + '_input';
|
||||
|
||||
selector_available.appendChild(from_box);
|
||||
const choose_all = quickElement('a', selector_available, gettext('Choose all'), 'title', interpolate(gettext('Click to choose all %s at once.'), [field_name]), 'href', '#', 'id', field_id + '_add_all_link');
|
||||
choose_all.className = 'selector-chooseall';
|
||||
const choose_all = quickElement(
|
||||
'button',
|
||||
selector_available,
|
||||
interpolate(gettext('Choose all %s'), [field_name]),
|
||||
'id', field_id + '_add_all',
|
||||
'class', 'selector-chooseall',
|
||||
'type', 'button'
|
||||
);
|
||||
|
||||
// <ul class="selector-chooser">
|
||||
const selector_chooser = quickElement('ul', selector_div);
|
||||
selector_chooser.className = 'selector-chooser';
|
||||
const add_link = quickElement('a', quickElement('li', selector_chooser), gettext('Choose'), 'title', gettext('Choose'), 'href', '#', 'id', field_id + '_add_link');
|
||||
add_link.className = 'selector-add';
|
||||
const remove_link = quickElement('a', quickElement('li', selector_chooser), gettext('Remove'), 'title', gettext('Remove'), 'href', '#', 'id', field_id + '_remove_link');
|
||||
remove_link.className = 'selector-remove';
|
||||
const add_button = quickElement(
|
||||
'button',
|
||||
quickElement('li', selector_chooser),
|
||||
interpolate(gettext('Choose selected %s'), [field_name]),
|
||||
'id', field_id + '_add',
|
||||
'class', 'selector-add',
|
||||
'type', 'button'
|
||||
);
|
||||
const remove_button = quickElement(
|
||||
'button',
|
||||
quickElement('li', selector_chooser),
|
||||
interpolate(gettext('Remove selected %s'), [field_name]),
|
||||
'id', field_id + '_remove',
|
||||
'class', 'selector-remove',
|
||||
'type', 'button'
|
||||
);
|
||||
|
||||
// <div class="selector-chosen">
|
||||
const selector_chosen = quickElement('div', selector_div, '', 'id', field_id + '_selector_chosen');
|
||||
selector_chosen.className = 'selector-chosen';
|
||||
const title_chosen = quickElement('h2', selector_chosen, interpolate(gettext('Chosen %s') + ' ', [field_name]));
|
||||
const selector_chosen_title = quickElement('div', selector_chosen);
|
||||
selector_chosen_title.className = 'selector-chosen-title';
|
||||
selector_chosen_title.id = field_id + '_to_title';
|
||||
quickElement('label', selector_chosen_title, interpolate(gettext('Chosen %s') + ' ', [field_name]), 'for', field_id + '_to');
|
||||
quickElement(
|
||||
'span', title_chosen, '',
|
||||
'class', 'help help-tooltip help-icon',
|
||||
'title', interpolate(
|
||||
gettext(
|
||||
'This is the list of chosen %s. You may remove some by ' +
|
||||
'selecting them in the box below and then clicking the ' +
|
||||
'"Remove" arrow between the two boxes.'
|
||||
),
|
||||
[field_name]
|
||||
)
|
||||
'p',
|
||||
selector_chosen_title,
|
||||
interpolate(gettext('Remove %s by selecting them and then select the "Remove" arrow button.'), [field_name]),
|
||||
'class', 'helptext'
|
||||
);
|
||||
|
||||
const filter_selected_p = quickElement('p', selector_chosen, '', 'id', field_id + '_filter_selected');
|
||||
@@ -105,7 +118,7 @@ Requires core.js and SelectBox.js.
|
||||
quickElement(
|
||||
'span', search_filter_selected_label, '',
|
||||
'class', 'help-tooltip search-label-icon',
|
||||
'title', interpolate(gettext("Type into this box to filter down the list of selected %s."), [field_name])
|
||||
'aria-label', interpolate(gettext("Type into this box to filter down the list of selected %s."), [field_name])
|
||||
);
|
||||
|
||||
filter_selected_p.appendChild(document.createTextNode(' '));
|
||||
@@ -113,21 +126,34 @@ Requires core.js and SelectBox.js.
|
||||
const filter_selected_input = quickElement('input', filter_selected_p, '', 'type', 'text', 'placeholder', gettext("Filter"));
|
||||
filter_selected_input.id = field_id + '_selected_input';
|
||||
|
||||
const to_box = quickElement('select', selector_chosen, '', 'id', field_id + '_to', 'multiple', '', 'size', from_box.size, 'name', from_box.name);
|
||||
to_box.className = 'filtered';
|
||||
|
||||
quickElement(
|
||||
'select',
|
||||
selector_chosen,
|
||||
'',
|
||||
'id', field_id + '_to',
|
||||
'multiple', '',
|
||||
'size', from_box.size,
|
||||
'name', from_box.name,
|
||||
'aria-labelledby', field_id + '_to_title',
|
||||
'class', 'filtered'
|
||||
);
|
||||
const warning_footer = quickElement('div', selector_chosen, '', 'class', 'list-footer-display');
|
||||
quickElement('span', warning_footer, '', 'id', field_id + '_list-footer-display-text');
|
||||
quickElement('span', warning_footer, ' (click to clear)', 'class', 'list-footer-display__clear');
|
||||
|
||||
const clear_all = quickElement('a', selector_chosen, gettext('Remove all'), 'title', interpolate(gettext('Click to remove all chosen %s at once.'), [field_name]), 'href', '#', 'id', field_id + '_remove_all_link');
|
||||
clear_all.className = 'selector-clearall';
|
||||
quickElement('span', warning_footer, ' ' + gettext('(click to clear)'), 'class', 'list-footer-display__clear');
|
||||
const clear_all = quickElement(
|
||||
'button',
|
||||
selector_chosen,
|
||||
interpolate(gettext('Remove all %s'), [field_name]),
|
||||
'id', field_id + '_remove_all',
|
||||
'class', 'selector-clearall',
|
||||
'type', 'button'
|
||||
);
|
||||
|
||||
from_box.name = from_box.name + '_old';
|
||||
|
||||
// Set up the JavaScript event handlers for the select box filter interface
|
||||
const move_selection = function(e, elem, move_func, from, to) {
|
||||
if (elem.classList.contains('active')) {
|
||||
if (!elem.hasAttribute('disabled')) {
|
||||
move_func(from, to);
|
||||
SelectFilter.refresh_icons(field_id);
|
||||
SelectFilter.refresh_filtered_selects(field_id);
|
||||
@@ -138,10 +164,10 @@ Requires core.js and SelectBox.js.
|
||||
choose_all.addEventListener('click', function(e) {
|
||||
move_selection(e, this, SelectBox.move_all, field_id + '_from', field_id + '_to');
|
||||
});
|
||||
add_link.addEventListener('click', function(e) {
|
||||
add_button.addEventListener('click', function(e) {
|
||||
move_selection(e, this, SelectBox.move, field_id + '_from', field_id + '_to');
|
||||
});
|
||||
remove_link.addEventListener('click', function(e) {
|
||||
remove_button.addEventListener('click', function(e) {
|
||||
move_selection(e, this, SelectBox.move, field_id + '_to', field_id + '_from');
|
||||
});
|
||||
clear_all.addEventListener('click', function(e) {
|
||||
@@ -226,13 +252,12 @@ Requires core.js and SelectBox.js.
|
||||
refresh_icons: function(field_id) {
|
||||
const from = document.getElementById(field_id + '_from');
|
||||
const to = document.getElementById(field_id + '_to');
|
||||
// Active if at least one item is selected
|
||||
document.getElementById(field_id + '_add_link').classList.toggle('active', SelectFilter.any_selected(from));
|
||||
document.getElementById(field_id + '_remove_link').classList.toggle('active', SelectFilter.any_selected(to));
|
||||
// Active if the corresponding box isn't empty
|
||||
document.getElementById(field_id + '_add_all_link').classList.toggle('active', from.querySelector('option'));
|
||||
document.getElementById(field_id + '_remove_all_link').classList.toggle('active', to.querySelector('option'));
|
||||
SelectFilter.refresh_filtered_warning(field_id);
|
||||
// Disabled if no items are selected.
|
||||
document.getElementById(field_id + '_add').disabled = !SelectFilter.any_selected(from);
|
||||
document.getElementById(field_id + '_remove').disabled = !SelectFilter.any_selected(to);
|
||||
// Disabled if the corresponding box is empty.
|
||||
document.getElementById(field_id + '_add_all').disabled = !from.querySelector('option');
|
||||
document.getElementById(field_id + '_remove_all').disabled = !to.querySelector('option');
|
||||
},
|
||||
filter_key_press: function(event, field_id, source, target) {
|
||||
const source_box = document.getElementById(field_id + source);
|
||||
|
||||
@@ -55,8 +55,9 @@
|
||||
if (elem.classList.contains('vManyToManyRawIdAdminField') && elem.value) {
|
||||
elem.value += ',' + chosenId;
|
||||
} else {
|
||||
document.getElementById(name).value = chosenId;
|
||||
elem.value = chosenId;
|
||||
}
|
||||
$(elem).trigger('change');
|
||||
const index = relatedWindows.indexOf(win);
|
||||
if (index > -1) {
|
||||
relatedWindows.splice(index, 1);
|
||||
@@ -87,7 +88,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
function updateRelatedSelectsOptions(currentSelect, win, objId, newRepr, newId) {
|
||||
function updateRelatedSelectsOptions(currentSelect, win, objId, newRepr, newId, skipIds = []) {
|
||||
// After create/edit a model from the options next to the current
|
||||
// select (+ or :pencil:) update ForeignKey PK of the rest of selects
|
||||
// in the page.
|
||||
@@ -100,7 +101,7 @@
|
||||
const selectsRelated = document.querySelectorAll(`[data-model-ref="${modelName}"] [data-context="available-source"]`);
|
||||
|
||||
selectsRelated.forEach(function(select) {
|
||||
if (currentSelect === select) {
|
||||
if (currentSelect === select || skipIds && skipIds.includes(select.id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -109,6 +110,11 @@
|
||||
if (!option) {
|
||||
option = new Option(newRepr, newId);
|
||||
select.options.add(option);
|
||||
// Update SelectBox cache for related fields.
|
||||
if (window.SelectBox !== undefined && !SelectBox.cache[currentSelect.id]) {
|
||||
SelectBox.add_to_cache(select.id, option);
|
||||
SelectBox.redisplay(select.id);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -136,9 +142,14 @@
|
||||
$(elem).trigger('change');
|
||||
} else {
|
||||
const toId = name + "_to";
|
||||
const toElem = document.getElementById(toId);
|
||||
const o = new Option(newRepr, newId);
|
||||
SelectBox.add_to_cache(toId, o);
|
||||
SelectBox.redisplay(toId);
|
||||
if (toElem && toElem.nodeName.toUpperCase() === 'SELECT') {
|
||||
const skipIds = [name + "_from"];
|
||||
updateRelatedSelectsOptions(toElem, win, null, newRepr, newId, skipIds);
|
||||
}
|
||||
}
|
||||
const index = relatedWindows.indexOf(win);
|
||||
if (index > -1) {
|
||||
@@ -195,6 +206,7 @@
|
||||
window.dismissChangeRelatedObjectPopup = dismissChangeRelatedObjectPopup;
|
||||
window.dismissDeleteRelatedObjectPopup = dismissDeleteRelatedObjectPopup;
|
||||
window.dismissChildPopups = dismissChildPopups;
|
||||
window.relatedWindows = relatedWindows;
|
||||
|
||||
// Kept for backward compatibility
|
||||
window.showAddAnotherPopup = showRelatedObjectPopup;
|
||||
|
||||
@@ -50,11 +50,11 @@
|
||||
// If forms are laid out as table rows, insert the
|
||||
// "add" button in a new table row:
|
||||
const numCols = $this.eq(-1).children().length;
|
||||
$parent.append('<tr class="' + options.addCssClass + '"><td colspan="' + numCols + '"><a href="#">' + options.addText + "</a></tr>");
|
||||
$parent.append('<tr class="' + options.addCssClass + '"><td colspan="' + numCols + '"><a role="button" class="addlink" href="#">' + options.addText + "</a></tr>");
|
||||
addButton = $parent.find("tr:last a");
|
||||
} else {
|
||||
// Otherwise, insert it immediately after the last form:
|
||||
$this.filter(":last").after('<div class="' + options.addCssClass + '"><a href="#">' + options.addText + "</a></div>");
|
||||
$this.filter(":last").after('<div class="' + options.addCssClass + '"><a role="button" class="addlink" href="#">' + options.addText + "</a></div>");
|
||||
addButton = $this.filter(":last").next().find("a");
|
||||
}
|
||||
}
|
||||
@@ -104,15 +104,15 @@
|
||||
if (row.is("tr")) {
|
||||
// If the forms are laid out in table rows, insert
|
||||
// the remove button into the last table cell:
|
||||
row.children(":last").append('<div><a class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></div>");
|
||||
row.children(":last").append('<div><a role="button" class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></div>");
|
||||
} else if (row.is("ul") || row.is("ol")) {
|
||||
// If they're laid out as an ordered/unordered list,
|
||||
// insert an <li> after the last list item:
|
||||
row.append('<li><a class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></li>");
|
||||
row.append('<li><a role="button" class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></li>");
|
||||
} else {
|
||||
// Otherwise, just insert the remove button as the
|
||||
// last child element of the form's container:
|
||||
row.children(":first").append('<span><a class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></span>");
|
||||
row.children(":first").append('<span><a role="button" class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></span>");
|
||||
}
|
||||
// Add delete handler for each row.
|
||||
row.find("a." + options.deleteCssClass).on('click', inlineDeleteHandler.bind(this));
|
||||
|
||||
@@ -4580,7 +4580,7 @@ S2.define('select2/dropdown/attachBody',[
|
||||
return AttachBody;
|
||||
});
|
||||
|
||||
S2.define('[AWS-SECRET-REMOVED]',[
|
||||
S2.define('select2/dropdown/minimumResultsForSearch',[
|
||||
|
||||
], function () {
|
||||
function countResults (data) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user