Position, Depth, Order Inputs to WI Entry header

This commit is contained in:
RossAscends 2023-10-05 23:40:48 +09:00
parent 2befd69c31
commit 30e5a31591
4 changed files with 87 additions and 26 deletions

View File

@ -124,6 +124,10 @@
max-width: 100px;
}
.width100px {
width: 100px;
}
.widthUnset {
width: unset;
}
@ -374,6 +378,11 @@
cursor: pointer;
}
input:disabled,
textarea:disabled {
cursor: not-allowed;
}
.debug-red {
border: 1px solid red !important;
}
@ -402,6 +411,11 @@
font-size: calc(var(--mainFontSize) * 0.6) !important;
}
.paddingBottom5px {
padding: unset;
padding-bottom: 5px;
}
.paddingTopBot5 {
padding: 5px 0;
}

View File

@ -101,7 +101,7 @@
height: auto;
margin-top: 0;
margin-bottom: 0;
min-height: 32px;
min-height: var(--mainFontSize);
}
.delete_entry_button {
@ -162,11 +162,11 @@
}
.wi-card-entry {
border: 1px groove;
border: 1px solid;
border-color: var(--SmartThemeBorderColor);
border-radius: 8px;
padding: 5px;
margin-bottom: 3px;
border-radius: 10px;
padding: 0 5px;
margin-bottom: 1px;
}
.world_entry {

View File

@ -2726,6 +2726,7 @@
</small>
</label>
</div>
<div id="WIInputWidthReference" style="visibility: hidden;">10000</div>
</div>
<div id="world_popup">
@ -3932,9 +3933,31 @@
<span class="drag-handle">&#9776;</span>
<div class="gap5px world_entry_thin_controls wide100p alignitemscenter">
<small>
<span>
<span class="world_entry_form_position_value"></span>
<select title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" name="entryStateSelector" class="widthNatural height32px margin0">
<span class="flex-container alignitemscenter">
<!-- <span class="world_entry_form_position_value"></span> -->
<div name="PositionBlock" class="world_entry_form_control world_entry_form_radios wi-enter-footer-text">
<!-- <label for="position" data-i18n="Position:">Position:</label> -->
<select name="position" class="widthNatural margin0" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">
<option value="0" data-i18n="Before Char Defs" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↑Char</option>
<option value="1" data-i18n="After Char Defs" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↓Char</option>
<option value="2" data-i18n="Before AN" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↑AN</option>
<option value="3" data-i18n="After AN" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">↓AN</option>
<option value="4" data-i18n="at Depth" title="↑Char: Before Character Definitions&#13;↓Char: After Character Definitions&#13;↑AN: Before Author's Note&#13;↓AN: After Author's Note&#13;@D: at Depth&#13;">@D</option>
</select>
</div>
<div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap">
<!-- <label for="depth" data-i18n="Depth:">Depth:</label> -->
<input title="Depth" class="text_pole wideMax100px margin0" type="number" name="depth" placeholder="" min="0" max="999" />
</div>
<div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap">
<!-- <label for="order" data-i18n="Order:">Order:</label> -->
<input title="Order" class="text_pole wideMax100px margin0" type="number" name="order" placeholder="" min="0" max="999" />
</div>
<select title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" name="entryStateSelector" class="widthNatural margin0">
<option title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" value="constant">🔵</option>
<option title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" value="normal">🟢</option>
<option title="WI Entry Status:&#13;🔵 Constant&#13;🟢 Normal&#13;❌ Disabled" value="disabled"></option>
@ -3950,7 +3973,7 @@
<textarea class="text_pole keyprimarytextpole" name="key" rows="1" data-i18n="[placeholder]Comma separated (required)" placeholder="Comma separated (required)" maxlength="1000"></textarea>
</div>
<div class="flex-container widthFitContent alignItemsFlexEnd">
<select name="entryLogicType" class="height32px widthFitContent margin0">
<select name="entryLogicType" class="widthFitContent margin0">
<option value="0">AND</option>
<option value="1">NOT</option>
</select>
@ -3963,14 +3986,14 @@
</span>
</small>
<div class="flex-container flexFlowRow alignitemscenter">
<textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" data-i18n="[placeholder]Comma separated (ignored if empty)" placeholder="Comma separated (ignored if empty)" maxlength="1000"></textarea>
<textarea class="text_pole keysecondarytextpole" name="keysecondary" rows="1" data-i18n="[placeholder]Comma separated (ignored if empty)" placeholder="Comma separated list" maxlength="1000"></textarea>
<i class="menu_button delete_entry_button fa-solid fa-trash-can" type="submit" data-i18n="" value="" /></i>
</div>
</div>
</div>
<div class="fa-fw fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content flex-container">
<div class="inline-drawer-content flex-container paddingBottom5px">
<div class="WIEntryContentAndMemo flex-container">
<div class="world_entry_thin_controls flex2">
<div class="world_entry_form_control flex1">
@ -4073,7 +4096,7 @@
</div>
-->
<div name="PositionBlock" class="world_entry_form_control world_entry_form_radios wi-enter-footer-text ">
<!-- <div name="PositionBlock" class="world_entry_form_control world_entry_form_radios wi-enter-footer-text ">
<label for="position" data-i18n="Position:">Position:</label>
<small>
<select name="position">
@ -4094,7 +4117,7 @@
<div class="world_entry_form_control wi-enter-footer-text flex-container flexNoGap ">
<label for="order" data-i18n="Order:">Order:</label>
<input class="text_pole wideMax100px margin0" type="number" name="order" placeholder="" min="0" max="10000" />
</div>
</div> -->

View File

@ -52,6 +52,8 @@ let updateEditor = (navigation) => { navigation; };
// Do not optimize. updateEditor is a function that is updated by the displayWorldEntries with new data.
const worldInfoFilter = new FilterHelper(() => updateEditor());
const InputWidthReference = $("#WIInputWidthReference");
const DEFAULT_DEPTH = 4;
export function getWorldInfoSettings() {
@ -289,10 +291,25 @@ function displayWorldEntries(name, data, navigation = navigation_option.none) {
callback: function (page) {
$("#world_popup_entries_list").empty();
const keywordHeaders = `
<div class="flex-container wide100p spaceBetween justifyCenter textAlignCenter">
<div class="flex-container wide100p spaceBetween justifyCenter textAlignCenter" style="padding-left:25px; padding-right:45px;">
<small style="width:${InputWidthReference.width() + 20 + 'px'}">
Position
</small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}">
Depth
</small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}">
Order
</small>
<small style="width:${InputWidthReference.width() + 5 + 'px'}">
Status
</small>
<small class="flex1">
Keywords
</small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}">
Logic
</small>
<small class="flex1">
Optional Filter
</small>
@ -692,6 +709,7 @@ function getWorldEntry(name, data, entry) {
saveWorldInfo(name, data);
});
orderInput.val(entry.order).trigger("input");
orderInput.width(InputWidthReference.width() + 15 + 'px')
// probability
if (entry.probability === undefined) {
@ -711,10 +729,11 @@ function getWorldEntry(name, data, entry) {
saveWorldInfo(name, data);
});
depthInput.val(entry.depth ?? DEFAULT_DEPTH).trigger("input");
depthInput.width(InputWidthReference.width() + 15 + 'px');
// Hide by default unless depth is specified
if (entry.position === world_info_position.atDepth) {
depthInput.parent().hide();
//depthInput.parent().hide();
}
const probabilityInput = template.find('input[name="probability"]');
@ -776,15 +795,20 @@ function getWorldEntry(name, data, entry) {
}
const positionInput = template.find('select[name="position"]');
initScrollHeight(positionInput);
positionInput.data("uid", entry.uid);
positionInput.on("input", function () {
const uid = $(this).data("uid");
const value = Number($(this).val());
data.entries[uid].position = !isNaN(value) ? value : 0;
if (value === world_info_position.atDepth) {
depthInput.parent().show();
depthInput.prop('disabled', false);
depthInput.removeClass('disabledWIEntry')
//depthInput.parent().show();
} else {
depthInput.parent().hide();
depthInput.prop('disabled', true);
depthInput.addClass('disabledWIEntry')
//depthInput.parent().hide();
}
updatePosOrdDisplay(uid)
// Spec v2 only supports before_char and after_char
@ -1583,14 +1607,14 @@ export function checkEmbeddedWorld(chid) {
callPopup(`<h3>This character has an embedded World/Lorebook.</h3>
<h3>Would you like to import it now?</h3>
<div class="m-b-1">If you want to import it later, select "Import Card Lore" in the "More..." dropdown menu on the character panel.</div>`,
'confirm',
'',
{ okButton: 'Yes', })
.then((result) => {
if (result) {
importEmbeddedWorldInfo(true);
}
});
'confirm',
'',
{ okButton: 'Yes', })
.then((result) => {
if (result) {
importEmbeddedWorldInfo(true);
}
});
}
return true;
}