feat(dashboard): implement Inventory Widget (Task 2.4)
- Comprehensive inventory management with 3 sub-tabs (On Person/Stored/Assets) - List/Grid view modes per sub-tab with toggle buttons - Storage locations with add/remove/collapse functionality - Full CRUD operations for items (add/edit/remove) - Inline forms for adding items and locations with Enter/Escape support - Per-widget instance state management for tabs and view modes - Import parseItems/serializeItems utilities for data handling - Import sanitizeItemName/sanitizeLocationName for security - Vanilla JS implementation, no jQuery dependencies - All 4 core widgets now complete
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
@@ -0,0 +1,925 @@
|
|||||||
|
/**
|
||||||
|
* Inventory Widget
|
||||||
|
*
|
||||||
|
* Comprehensive inventory management with three sub-tabs:
|
||||||
|
* - On Person: Items currently carried
|
||||||
|
* - Stored: Items in storage locations
|
||||||
|
* - Assets: Vehicles, property, major possessions
|
||||||
|
*
|
||||||
|
* Features:
|
||||||
|
* - List/Grid view modes per sub-tab
|
||||||
|
* - Add/remove items and storage locations
|
||||||
|
* - Collapsible storage locations
|
||||||
|
* - Editable item names
|
||||||
|
* - Inline forms for adding items
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { parseItems, serializeItems } from '../../../utils/itemParser.js';
|
||||||
|
import { sanitizeItemName, sanitizeLocationName } from '../../../utils/security.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert location name to safe HTML ID
|
||||||
|
*/
|
||||||
|
function getLocationId(locationName) {
|
||||||
|
return locationName.replace(/[^a-zA-Z0-9\s]/g, '').replace(/\s+/g, '-');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Escape HTML to prevent XSS
|
||||||
|
*/
|
||||||
|
function escapeHtml(text) {
|
||||||
|
if (!text) return '';
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register Inventory Widget
|
||||||
|
*/
|
||||||
|
export function registerInventoryWidget(registry, dependencies) {
|
||||||
|
const { getExtensionSettings, onDataChange } = dependencies;
|
||||||
|
|
||||||
|
// Widget state (per-instance)
|
||||||
|
const widgetStates = new Map();
|
||||||
|
|
||||||
|
function getWidgetState(widgetId) {
|
||||||
|
if (!widgetStates.has(widgetId)) {
|
||||||
|
widgetStates.set(widgetId, {
|
||||||
|
activeSubTab: 'onPerson',
|
||||||
|
collapsedLocations: [],
|
||||||
|
viewModes: {
|
||||||
|
onPerson: 'list',
|
||||||
|
stored: 'list',
|
||||||
|
assets: 'list'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return widgetStates.get(widgetId);
|
||||||
|
}
|
||||||
|
|
||||||
|
registry.register('inventory', {
|
||||||
|
name: 'Inventory',
|
||||||
|
icon: '🎒',
|
||||||
|
description: 'Full inventory system with On Person, Stored, and Assets',
|
||||||
|
minSize: { w: 6, h: 4 },
|
||||||
|
defaultSize: { w: 8, h: 6 },
|
||||||
|
requiresSchema: false,
|
||||||
|
|
||||||
|
render(container, config = {}) {
|
||||||
|
const settings = getExtensionSettings();
|
||||||
|
const inventory = settings.userStats.inventory || {
|
||||||
|
version: 2,
|
||||||
|
onPerson: 'None',
|
||||||
|
stored: {},
|
||||||
|
assets: 'None'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get or create widget state
|
||||||
|
const widgetId = container.closest('.dashboard-widget')?.dataset?.widgetId || 'default';
|
||||||
|
const state = getWidgetState(widgetId);
|
||||||
|
|
||||||
|
// Build HTML
|
||||||
|
const html = `
|
||||||
|
<div class="rpg-inventory-widget" data-widget-id="${widgetId}">
|
||||||
|
${renderSubTabs(state.activeSubTab)}
|
||||||
|
<div class="rpg-inventory-views">
|
||||||
|
${renderActiveView(inventory, state)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
container.innerHTML = html;
|
||||||
|
|
||||||
|
// Attach event handlers
|
||||||
|
attachInventoryHandlers(container, widgetId, inventory, state, dependencies);
|
||||||
|
},
|
||||||
|
|
||||||
|
getConfig() {
|
||||||
|
return {
|
||||||
|
compactMode: {
|
||||||
|
type: 'boolean',
|
||||||
|
label: 'Compact Mode',
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfigChange(container, newConfig) {
|
||||||
|
this.render(container, newConfig);
|
||||||
|
},
|
||||||
|
|
||||||
|
onResize(container, newW, newH) {
|
||||||
|
// Adjust layout for narrow widgets
|
||||||
|
const widget = container.querySelector('.rpg-inventory-widget');
|
||||||
|
if (!widget) return;
|
||||||
|
|
||||||
|
if (newW < 6) {
|
||||||
|
widget.classList.add('rpg-inventory-compact');
|
||||||
|
} else {
|
||||||
|
widget.classList.remove('rpg-inventory-compact');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onRemove(widgetId) {
|
||||||
|
// Clean up widget state
|
||||||
|
widgetStates.delete(widgetId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render sub-tab navigation
|
||||||
|
*/
|
||||||
|
function renderSubTabs(activeTab) {
|
||||||
|
return `
|
||||||
|
<div class="rpg-inventory-subtabs">
|
||||||
|
<button class="rpg-inventory-subtab ${activeTab === 'onPerson' ? 'active' : ''}" data-tab="onPerson">
|
||||||
|
On Person
|
||||||
|
</button>
|
||||||
|
<button class="rpg-inventory-subtab ${activeTab === 'stored' ? 'active' : ''}" data-tab="stored">
|
||||||
|
Stored
|
||||||
|
</button>
|
||||||
|
<button class="rpg-inventory-subtab ${activeTab === 'assets' ? 'active' : ''}" data-tab="assets">
|
||||||
|
Assets
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render active view based on state
|
||||||
|
*/
|
||||||
|
function renderActiveView(inventory, state) {
|
||||||
|
switch (state.activeSubTab) {
|
||||||
|
case 'onPerson':
|
||||||
|
return renderOnPersonView(inventory.onPerson, state.viewModes.onPerson);
|
||||||
|
case 'stored':
|
||||||
|
return renderStoredView(inventory.stored, state.collapsedLocations, state.viewModes.stored);
|
||||||
|
case 'assets':
|
||||||
|
return renderAssetsView(inventory.assets, state.viewModes.assets);
|
||||||
|
default:
|
||||||
|
return renderOnPersonView(inventory.onPerson, state.viewModes.onPerson);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render On Person view
|
||||||
|
*/
|
||||||
|
function renderOnPersonView(onPersonItems, viewMode) {
|
||||||
|
const items = parseItems(onPersonItems);
|
||||||
|
const itemsHtml = items.length === 0
|
||||||
|
? '<div class="rpg-inventory-empty">No items carried</div>'
|
||||||
|
: renderItemList(items, 'onPerson', null, viewMode);
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="rpg-inventory-section" data-section="onPerson">
|
||||||
|
<div class="rpg-inventory-header">
|
||||||
|
<h4>Items Currently Carried</h4>
|
||||||
|
<div class="rpg-inventory-header-actions">
|
||||||
|
${renderViewToggle('onPerson', viewMode)}
|
||||||
|
<button class="rpg-inventory-add-btn" data-action="add-item" data-field="onPerson">
|
||||||
|
<i class="fa-solid fa-plus"></i> Add Item
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rpg-inventory-content">
|
||||||
|
<div class="rpg-inline-form" data-form="add-item-onPerson" style="display: none;">
|
||||||
|
<input type="text" class="rpg-inline-input" placeholder="Enter item name..." />
|
||||||
|
<div class="rpg-inline-buttons">
|
||||||
|
<button class="rpg-inline-btn rpg-inline-cancel" data-action="cancel-add-item" data-field="onPerson">
|
||||||
|
<i class="fa-solid fa-times"></i> Cancel
|
||||||
|
</button>
|
||||||
|
<button class="rpg-inline-btn rpg-inline-save" data-action="save-add-item" data-field="onPerson">
|
||||||
|
<i class="fa-solid fa-check"></i> Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rpg-item-list ${viewMode === 'list' ? 'rpg-item-list-view' : 'rpg-item-grid-view'}">
|
||||||
|
${itemsHtml}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render Stored view
|
||||||
|
*/
|
||||||
|
function renderStoredView(stored, collapsedLocations, viewMode) {
|
||||||
|
const locations = Object.keys(stored || {});
|
||||||
|
|
||||||
|
let locationsHtml = '';
|
||||||
|
if (locations.length === 0) {
|
||||||
|
locationsHtml = `
|
||||||
|
<div class="rpg-inventory-empty">
|
||||||
|
No storage locations yet. Click "Add Location" to create one.
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
locationsHtml = locations.map(location => {
|
||||||
|
const items = parseItems(stored[location]);
|
||||||
|
const isCollapsed = collapsedLocations.includes(location);
|
||||||
|
const locationId = getLocationId(location);
|
||||||
|
const itemsHtml = items.length === 0
|
||||||
|
? '<div class="rpg-inventory-empty">No items stored here</div>'
|
||||||
|
: renderItemList(items, 'stored', location, viewMode);
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="rpg-storage-location ${isCollapsed ? 'collapsed' : ''}" data-location="${escapeHtml(location)}">
|
||||||
|
<div class="rpg-storage-header">
|
||||||
|
<button class="rpg-storage-toggle" data-action="toggle-location" data-location="${escapeHtml(location)}">
|
||||||
|
<i class="fa-solid fa-chevron-${isCollapsed ? 'right' : 'down'}"></i>
|
||||||
|
</button>
|
||||||
|
<h5 class="rpg-storage-name">${escapeHtml(location)}</h5>
|
||||||
|
<div class="rpg-storage-actions">
|
||||||
|
<button class="rpg-inventory-remove-btn" data-action="remove-location" data-location="${escapeHtml(location)}">
|
||||||
|
<i class="fa-solid fa-trash"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rpg-storage-content" ${isCollapsed ? 'style="display:none;"' : ''}>
|
||||||
|
<div class="rpg-inline-form" data-form="add-item-stored-${locationId}" style="display: none;">
|
||||||
|
<input type="text" class="rpg-inline-input" placeholder="Enter item name..." />
|
||||||
|
<div class="rpg-inline-buttons">
|
||||||
|
<button class="rpg-inline-btn rpg-inline-cancel" data-action="cancel-add-item" data-field="stored" data-location="${escapeHtml(location)}">
|
||||||
|
<i class="fa-solid fa-times"></i> Cancel
|
||||||
|
</button>
|
||||||
|
<button class="rpg-inline-btn rpg-inline-save" data-action="save-add-item" data-field="stored" data-location="${escapeHtml(location)}">
|
||||||
|
<i class="fa-solid fa-check"></i> Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rpg-item-list ${viewMode === 'list' ? 'rpg-item-list-view' : 'rpg-item-grid-view'}">
|
||||||
|
${itemsHtml}
|
||||||
|
</div>
|
||||||
|
<div class="rpg-storage-add-item-container">
|
||||||
|
<button class="rpg-inventory-add-btn" data-action="add-item" data-field="stored" data-location="${escapeHtml(location)}">
|
||||||
|
<i class="fa-solid fa-plus"></i> Add Item
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rpg-inline-confirmation" data-confirm="remove-location-${locationId}" style="display: none;">
|
||||||
|
<p>Remove "${escapeHtml(location)}"? This will delete all items stored there.</p>
|
||||||
|
<div class="rpg-inline-buttons">
|
||||||
|
<button class="rpg-inline-btn rpg-inline-cancel" data-action="cancel-remove-location" data-location="${escapeHtml(location)}">
|
||||||
|
<i class="fa-solid fa-times"></i> Cancel
|
||||||
|
</button>
|
||||||
|
<button class="rpg-inline-btn rpg-inline-confirm" data-action="confirm-remove-location" data-location="${escapeHtml(location)}">
|
||||||
|
<i class="fa-solid fa-check"></i> Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="rpg-inventory-section" data-section="stored">
|
||||||
|
<div class="rpg-inventory-header">
|
||||||
|
<h4>Storage Locations</h4>
|
||||||
|
<div class="rpg-inventory-header-actions">
|
||||||
|
${renderViewToggle('stored', viewMode)}
|
||||||
|
<button class="rpg-inventory-add-btn" data-action="add-location">
|
||||||
|
<i class="fa-solid fa-plus"></i> Add Location
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rpg-inventory-content">
|
||||||
|
<div class="rpg-inline-form" data-form="add-location" style="display: none;">
|
||||||
|
<input type="text" class="rpg-inline-input" placeholder="Enter location name..." />
|
||||||
|
<div class="rpg-inline-buttons">
|
||||||
|
<button class="rpg-inline-btn rpg-inline-cancel" data-action="cancel-add-location">
|
||||||
|
<i class="fa-solid fa-times"></i> Cancel
|
||||||
|
</button>
|
||||||
|
<button class="rpg-inline-btn rpg-inline-save" data-action="save-add-location">
|
||||||
|
<i class="fa-solid fa-check"></i> Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
${locationsHtml}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render Assets view
|
||||||
|
*/
|
||||||
|
function renderAssetsView(assets, viewMode) {
|
||||||
|
const items = parseItems(assets);
|
||||||
|
const itemsHtml = items.length === 0
|
||||||
|
? '<div class="rpg-inventory-empty">No assets owned</div>'
|
||||||
|
: renderItemList(items, 'assets', null, viewMode);
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="rpg-inventory-section" data-section="assets">
|
||||||
|
<div class="rpg-inventory-header">
|
||||||
|
<h4>Vehicles, Property & Major Possessions</h4>
|
||||||
|
<div class="rpg-inventory-header-actions">
|
||||||
|
${renderViewToggle('assets', viewMode)}
|
||||||
|
<button class="rpg-inventory-add-btn" data-action="add-item" data-field="assets">
|
||||||
|
<i class="fa-solid fa-plus"></i> Add Asset
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rpg-inventory-content">
|
||||||
|
<div class="rpg-inline-form" data-form="add-item-assets" style="display: none;">
|
||||||
|
<input type="text" class="rpg-inline-input" placeholder="Enter asset name..." />
|
||||||
|
<div class="rpg-inline-buttons">
|
||||||
|
<button class="rpg-inline-btn rpg-inline-cancel" data-action="cancel-add-item" data-field="assets">
|
||||||
|
<i class="fa-solid fa-times"></i> Cancel
|
||||||
|
</button>
|
||||||
|
<button class="rpg-inline-btn rpg-inline-save" data-action="save-add-item" data-field="assets">
|
||||||
|
<i class="fa-solid fa-check"></i> Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rpg-item-list ${viewMode === 'list' ? 'rpg-item-list-view' : 'rpg-item-grid-view'}">
|
||||||
|
${itemsHtml}
|
||||||
|
</div>
|
||||||
|
<div class="rpg-inventory-hint">
|
||||||
|
<i class="fa-solid fa-info-circle"></i>
|
||||||
|
Assets include vehicles (cars, motorcycles), property (homes, apartments),
|
||||||
|
and major equipment (workshop tools, special items).
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render view toggle buttons
|
||||||
|
*/
|
||||||
|
function renderViewToggle(field, viewMode) {
|
||||||
|
return `
|
||||||
|
<div class="rpg-view-toggle">
|
||||||
|
<button class="rpg-view-btn ${viewMode === 'list' ? 'active' : ''}" data-action="switch-view" data-field="${field}" data-view="list" title="List view">
|
||||||
|
<i class="fa-solid fa-list"></i>
|
||||||
|
</button>
|
||||||
|
<button class="rpg-view-btn ${viewMode === 'grid' ? 'active' : ''}" data-action="switch-view" data-field="${field}" data-view="grid" title="Grid view">
|
||||||
|
<i class="fa-solid fa-th"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render item list (list or grid view)
|
||||||
|
*/
|
||||||
|
function renderItemList(items, field, location, viewMode) {
|
||||||
|
const locationAttr = location ? `data-location="${escapeHtml(location)}"` : '';
|
||||||
|
|
||||||
|
if (viewMode === 'grid') {
|
||||||
|
return items.map((item, index) => `
|
||||||
|
<div class="rpg-item-card" data-field="${field}" ${locationAttr} data-index="${index}">
|
||||||
|
<button class="rpg-item-remove" data-action="remove-item" data-field="${field}" ${locationAttr} data-index="${index}" title="Remove item">
|
||||||
|
<i class="fa-solid fa-times"></i>
|
||||||
|
</button>
|
||||||
|
<span class="rpg-item-name rpg-editable" contenteditable="true" data-field="${field}" ${locationAttr} data-index="${index}" title="Click to edit">${escapeHtml(item)}</span>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
} else {
|
||||||
|
return items.map((item, index) => `
|
||||||
|
<div class="rpg-item-row" data-field="${field}" ${locationAttr} data-index="${index}">
|
||||||
|
<span class="rpg-item-name rpg-editable" contenteditable="true" data-field="${field}" ${locationAttr} data-index="${index}" title="Click to edit">${escapeHtml(item)}</span>
|
||||||
|
<button class="rpg-item-remove" data-action="remove-item" data-field="${field}" ${locationAttr} data-index="${index}" title="Remove item">
|
||||||
|
<i class="fa-solid fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Attach all event handlers
|
||||||
|
*/
|
||||||
|
function attachInventoryHandlers(container, widgetId, inventory, state, dependencies) {
|
||||||
|
const widget = container.querySelector('.rpg-inventory-widget');
|
||||||
|
if (!widget) return;
|
||||||
|
|
||||||
|
// Sub-tab switching
|
||||||
|
widget.querySelectorAll('.rpg-inventory-subtab').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const tab = btn.dataset.tab;
|
||||||
|
state.activeSubTab = tab;
|
||||||
|
|
||||||
|
// Re-render
|
||||||
|
const settings = getExtensionSettings();
|
||||||
|
const inv = settings.userStats.inventory;
|
||||||
|
widget.querySelector('.rpg-inventory-views').innerHTML = renderActiveView(inv, state);
|
||||||
|
|
||||||
|
// Update active tab styling
|
||||||
|
widget.querySelectorAll('.rpg-inventory-subtab').forEach(b => b.classList.remove('active'));
|
||||||
|
btn.classList.add('active');
|
||||||
|
|
||||||
|
// Re-attach handlers for new view
|
||||||
|
attachInventoryHandlers(container, widgetId, inv, state, dependencies);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// View mode toggle
|
||||||
|
widget.querySelectorAll('[data-action="switch-view"]').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const field = btn.dataset.field;
|
||||||
|
const view = btn.dataset.view;
|
||||||
|
state.viewModes[field] = view;
|
||||||
|
|
||||||
|
// Re-render active view
|
||||||
|
const settings = getExtensionSettings();
|
||||||
|
const inv = settings.userStats.inventory;
|
||||||
|
widget.querySelector('.rpg-inventory-views').innerHTML = renderActiveView(inv, state);
|
||||||
|
attachInventoryHandlers(container, widgetId, inv, state, dependencies);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add item button
|
||||||
|
widget.querySelectorAll('[data-action="add-item"]').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const field = btn.dataset.field;
|
||||||
|
const location = btn.dataset.location;
|
||||||
|
showAddItemForm(widget, field, location);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel add item
|
||||||
|
widget.querySelectorAll('[data-action="cancel-add-item"]').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const field = btn.dataset.field;
|
||||||
|
const location = btn.dataset.location;
|
||||||
|
hideAddItemForm(widget, field, location);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Save add item
|
||||||
|
widget.querySelectorAll('[data-action="save-add-item"]').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const field = btn.dataset.field;
|
||||||
|
const location = btn.dataset.location;
|
||||||
|
saveAddItem(container, widgetId, field, location, state, dependencies);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Enter key in add item form
|
||||||
|
widget.querySelectorAll('.rpg-inline-form input').forEach(input => {
|
||||||
|
input.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
const form = input.closest('.rpg-inline-form');
|
||||||
|
const saveBtn = form.querySelector('[data-action="save-add-item"], [data-action="save-add-location"]');
|
||||||
|
if (saveBtn) saveBtn.click();
|
||||||
|
}
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
e.preventDefault();
|
||||||
|
const form = input.closest('.rpg-inline-form');
|
||||||
|
const cancelBtn = form.querySelector('[data-action="cancel-add-item"], [data-action="cancel-add-location"]');
|
||||||
|
if (cancelBtn) cancelBtn.click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove item
|
||||||
|
widget.querySelectorAll('[data-action="remove-item"]').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const field = btn.dataset.field;
|
||||||
|
const index = parseInt(btn.dataset.index);
|
||||||
|
const location = btn.dataset.location;
|
||||||
|
removeItem(container, widgetId, field, index, location, state, dependencies);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Edit item name
|
||||||
|
widget.querySelectorAll('.rpg-item-name.rpg-editable').forEach(field => {
|
||||||
|
let originalValue = field.textContent.trim();
|
||||||
|
|
||||||
|
field.addEventListener('focus', () => {
|
||||||
|
originalValue = field.textContent.trim();
|
||||||
|
const range = document.createRange();
|
||||||
|
range.selectNodeContents(field);
|
||||||
|
const selection = window.getSelection();
|
||||||
|
selection.removeAllRanges();
|
||||||
|
selection.addRange(range);
|
||||||
|
});
|
||||||
|
|
||||||
|
field.addEventListener('blur', () => {
|
||||||
|
const newValue = field.textContent.trim();
|
||||||
|
if (newValue && newValue !== originalValue) {
|
||||||
|
const fieldName = field.dataset.field;
|
||||||
|
const index = parseInt(field.dataset.index);
|
||||||
|
const location = field.dataset.location;
|
||||||
|
updateItemName(container, widgetId, fieldName, index, newValue, location, state, dependencies);
|
||||||
|
} else if (!newValue) {
|
||||||
|
field.textContent = originalValue;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
field.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
field.blur();
|
||||||
|
}
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
e.preventDefault();
|
||||||
|
field.textContent = originalValue;
|
||||||
|
field.blur();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
field.addEventListener('paste', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const text = (e.clipboardData || window.clipboardData).getData('text/plain');
|
||||||
|
document.execCommand('insertText', false, text);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add location
|
||||||
|
const addLocationBtn = widget.querySelector('[data-action="add-location"]');
|
||||||
|
if (addLocationBtn) {
|
||||||
|
addLocationBtn.addEventListener('click', () => {
|
||||||
|
showAddLocationForm(widget);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cancel add location
|
||||||
|
const cancelAddLocationBtn = widget.querySelector('[data-action="cancel-add-location"]');
|
||||||
|
if (cancelAddLocationBtn) {
|
||||||
|
cancelAddLocationBtn.addEventListener('click', () => {
|
||||||
|
hideAddLocationForm(widget);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save add location
|
||||||
|
const saveAddLocationBtn = widget.querySelector('[data-action="save-add-location"]');
|
||||||
|
if (saveAddLocationBtn) {
|
||||||
|
saveAddLocationBtn.addEventListener('click', () => {
|
||||||
|
saveAddLocation(container, widgetId, state, dependencies);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle location collapse
|
||||||
|
widget.querySelectorAll('[data-action="toggle-location"]').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const location = btn.dataset.location;
|
||||||
|
toggleLocationCollapse(widget, location, state);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove location
|
||||||
|
widget.querySelectorAll('[data-action="remove-location"]').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const location = btn.dataset.location;
|
||||||
|
showRemoveLocationConfirm(widget, location);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel remove location
|
||||||
|
widget.querySelectorAll('[data-action="cancel-remove-location"]').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const location = btn.dataset.location;
|
||||||
|
hideRemoveLocationConfirm(widget, location);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Confirm remove location
|
||||||
|
widget.querySelectorAll('[data-action="confirm-remove-location"]').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const location = btn.dataset.location;
|
||||||
|
removeLocation(container, widgetId, location, state, dependencies);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show add item form
|
||||||
|
*/
|
||||||
|
function showAddItemForm(widget, field, location) {
|
||||||
|
let formSelector;
|
||||||
|
if (field === 'stored') {
|
||||||
|
const locationId = getLocationId(location);
|
||||||
|
formSelector = `[data-form="add-item-stored-${locationId}"]`;
|
||||||
|
} else {
|
||||||
|
formSelector = `[data-form="add-item-${field}"]`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const form = widget.querySelector(formSelector);
|
||||||
|
if (form) {
|
||||||
|
form.style.display = 'block';
|
||||||
|
const input = form.querySelector('input');
|
||||||
|
if (input) {
|
||||||
|
input.value = '';
|
||||||
|
input.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide add item form
|
||||||
|
*/
|
||||||
|
function hideAddItemForm(widget, field, location) {
|
||||||
|
let formSelector;
|
||||||
|
if (field === 'stored') {
|
||||||
|
const locationId = getLocationId(location);
|
||||||
|
formSelector = `[data-form="add-item-stored-${locationId}"]`;
|
||||||
|
} else {
|
||||||
|
formSelector = `[data-form="add-item-${field}"]`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const form = widget.querySelector(formSelector);
|
||||||
|
if (form) {
|
||||||
|
form.style.display = 'none';
|
||||||
|
const input = form.querySelector('input');
|
||||||
|
if (input) input.value = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save new item
|
||||||
|
*/
|
||||||
|
function saveAddItem(container, widgetId, field, location, state, dependencies) {
|
||||||
|
const widget = container.querySelector('.rpg-inventory-widget');
|
||||||
|
let formSelector;
|
||||||
|
if (field === 'stored') {
|
||||||
|
const locationId = getLocationId(location);
|
||||||
|
formSelector = `[data-form="add-item-stored-${locationId}"]`;
|
||||||
|
} else {
|
||||||
|
formSelector = `[data-form="add-item-${field}"]`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const form = widget.querySelector(formSelector);
|
||||||
|
if (!form) return;
|
||||||
|
|
||||||
|
const input = form.querySelector('input');
|
||||||
|
const rawItemName = input.value.trim();
|
||||||
|
|
||||||
|
if (!rawItemName) {
|
||||||
|
hideAddItemForm(widget, field, location);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const itemName = sanitizeItemName(rawItemName);
|
||||||
|
if (!itemName) {
|
||||||
|
alert('Invalid item name.');
|
||||||
|
hideAddItemForm(widget, field, location);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const settings = getExtensionSettings();
|
||||||
|
const inventory = settings.userStats.inventory;
|
||||||
|
|
||||||
|
// Get current items
|
||||||
|
let currentString;
|
||||||
|
if (field === 'stored') {
|
||||||
|
currentString = inventory.stored[location] || 'None';
|
||||||
|
} else {
|
||||||
|
currentString = inventory[field] || 'None';
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = parseItems(currentString);
|
||||||
|
items.push(itemName);
|
||||||
|
const newString = serializeItems(items);
|
||||||
|
|
||||||
|
// Save back
|
||||||
|
if (field === 'stored') {
|
||||||
|
inventory.stored[location] = newString;
|
||||||
|
} else {
|
||||||
|
inventory[field] = newString;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger change callback
|
||||||
|
if (onDataChange) {
|
||||||
|
onDataChange('inventory', field, newString, location);
|
||||||
|
}
|
||||||
|
|
||||||
|
hideAddItemForm(widget, field, location);
|
||||||
|
|
||||||
|
// Re-render view
|
||||||
|
widget.querySelector('.rpg-inventory-views').innerHTML = renderActiveView(inventory, state);
|
||||||
|
attachInventoryHandlers(container, widgetId, inventory, state, dependencies);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove item
|
||||||
|
*/
|
||||||
|
function removeItem(container, widgetId, field, index, location, state, dependencies) {
|
||||||
|
const settings = getExtensionSettings();
|
||||||
|
const inventory = settings.userStats.inventory;
|
||||||
|
|
||||||
|
// Get current items
|
||||||
|
let currentString;
|
||||||
|
if (field === 'stored') {
|
||||||
|
currentString = inventory.stored[location] || 'None';
|
||||||
|
} else {
|
||||||
|
currentString = inventory[field] || 'None';
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = parseItems(currentString);
|
||||||
|
items.splice(index, 1);
|
||||||
|
const newString = serializeItems(items);
|
||||||
|
|
||||||
|
// Save back
|
||||||
|
if (field === 'stored') {
|
||||||
|
inventory.stored[location] = newString;
|
||||||
|
} else {
|
||||||
|
inventory[field] = newString;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger change callback
|
||||||
|
if (onDataChange) {
|
||||||
|
onDataChange('inventory', field, newString, location);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-render view
|
||||||
|
const widget = container.querySelector('.rpg-inventory-widget');
|
||||||
|
widget.querySelector('.rpg-inventory-views').innerHTML = renderActiveView(inventory, state);
|
||||||
|
attachInventoryHandlers(container, widgetId, inventory, state, dependencies);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update item name
|
||||||
|
*/
|
||||||
|
function updateItemName(container, widgetId, field, index, newName, location, state, dependencies) {
|
||||||
|
const sanitized = sanitizeItemName(newName);
|
||||||
|
if (!sanitized) return;
|
||||||
|
|
||||||
|
const settings = getExtensionSettings();
|
||||||
|
const inventory = settings.userStats.inventory;
|
||||||
|
|
||||||
|
// Get current items
|
||||||
|
let currentString;
|
||||||
|
if (field === 'stored') {
|
||||||
|
currentString = inventory.stored[location] || 'None';
|
||||||
|
} else {
|
||||||
|
currentString = inventory[field] || 'None';
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = parseItems(currentString);
|
||||||
|
items[index] = sanitized;
|
||||||
|
const newString = serializeItems(items);
|
||||||
|
|
||||||
|
// Save back
|
||||||
|
if (field === 'stored') {
|
||||||
|
inventory.stored[location] = newString;
|
||||||
|
} else {
|
||||||
|
inventory[field] = newString;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger change callback
|
||||||
|
if (onDataChange) {
|
||||||
|
onDataChange('inventory', field, newString, location);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show add location form
|
||||||
|
*/
|
||||||
|
function showAddLocationForm(widget) {
|
||||||
|
const form = widget.querySelector('[data-form="add-location"]');
|
||||||
|
if (form) {
|
||||||
|
form.style.display = 'block';
|
||||||
|
const input = form.querySelector('input');
|
||||||
|
if (input) {
|
||||||
|
input.value = '';
|
||||||
|
input.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide add location form
|
||||||
|
*/
|
||||||
|
function hideAddLocationForm(widget) {
|
||||||
|
const form = widget.querySelector('[data-form="add-location"]');
|
||||||
|
if (form) {
|
||||||
|
form.style.display = 'none';
|
||||||
|
const input = form.querySelector('input');
|
||||||
|
if (input) input.value = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save new location
|
||||||
|
*/
|
||||||
|
function saveAddLocation(container, widgetId, state, dependencies) {
|
||||||
|
const widget = container.querySelector('.rpg-inventory-widget');
|
||||||
|
const form = widget.querySelector('[data-form="add-location"]');
|
||||||
|
if (!form) return;
|
||||||
|
|
||||||
|
const input = form.querySelector('input');
|
||||||
|
const rawLocationName = input.value.trim();
|
||||||
|
|
||||||
|
if (!rawLocationName) {
|
||||||
|
hideAddLocationForm(widget);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const locationName = sanitizeLocationName(rawLocationName);
|
||||||
|
if (!locationName) {
|
||||||
|
alert('Invalid location name.');
|
||||||
|
hideAddLocationForm(widget);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const settings = getExtensionSettings();
|
||||||
|
const inventory = settings.userStats.inventory;
|
||||||
|
|
||||||
|
// Check if location already exists
|
||||||
|
if (inventory.stored[locationName]) {
|
||||||
|
alert('A location with this name already exists.');
|
||||||
|
hideAddLocationForm(widget);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add new location
|
||||||
|
inventory.stored[locationName] = 'None';
|
||||||
|
|
||||||
|
// Trigger change callback
|
||||||
|
if (onDataChange) {
|
||||||
|
onDataChange('inventory', 'stored', inventory.stored);
|
||||||
|
}
|
||||||
|
|
||||||
|
hideAddLocationForm(widget);
|
||||||
|
|
||||||
|
// Re-render view
|
||||||
|
widget.querySelector('.rpg-inventory-views').innerHTML = renderActiveView(inventory, state);
|
||||||
|
attachInventoryHandlers(container, widgetId, inventory, state, dependencies);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle location collapse
|
||||||
|
*/
|
||||||
|
function toggleLocationCollapse(widget, location, state) {
|
||||||
|
const index = state.collapsedLocations.indexOf(location);
|
||||||
|
if (index === -1) {
|
||||||
|
state.collapsedLocations.push(location);
|
||||||
|
} else {
|
||||||
|
state.collapsedLocations.splice(index, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update DOM
|
||||||
|
const locationDiv = widget.querySelector(`.rpg-storage-location[data-location="${location}"]`);
|
||||||
|
if (locationDiv) {
|
||||||
|
const content = locationDiv.querySelector('.rpg-storage-content');
|
||||||
|
const icon = locationDiv.querySelector('.rpg-storage-toggle i');
|
||||||
|
|
||||||
|
if (index === -1) {
|
||||||
|
// Now collapsed
|
||||||
|
locationDiv.classList.add('collapsed');
|
||||||
|
content.style.display = 'none';
|
||||||
|
icon.className = 'fa-solid fa-chevron-right';
|
||||||
|
} else {
|
||||||
|
// Now expanded
|
||||||
|
locationDiv.classList.remove('collapsed');
|
||||||
|
content.style.display = 'block';
|
||||||
|
icon.className = 'fa-solid fa-chevron-down';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show remove location confirmation
|
||||||
|
*/
|
||||||
|
function showRemoveLocationConfirm(widget, location) {
|
||||||
|
const locationId = getLocationId(location);
|
||||||
|
const confirm = widget.querySelector(`[data-confirm="remove-location-${locationId}"]`);
|
||||||
|
if (confirm) {
|
||||||
|
confirm.style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide remove location confirmation
|
||||||
|
*/
|
||||||
|
function hideRemoveLocationConfirm(widget, location) {
|
||||||
|
const locationId = getLocationId(location);
|
||||||
|
const confirm = widget.querySelector(`[data-confirm="remove-location-${locationId}"]`);
|
||||||
|
if (confirm) {
|
||||||
|
confirm.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove location
|
||||||
|
*/
|
||||||
|
function removeLocation(container, widgetId, location, state, dependencies) {
|
||||||
|
const settings = getExtensionSettings();
|
||||||
|
const inventory = settings.userStats.inventory;
|
||||||
|
|
||||||
|
delete inventory.stored[location];
|
||||||
|
|
||||||
|
// Remove from collapsed locations
|
||||||
|
const index = state.collapsedLocations.indexOf(location);
|
||||||
|
if (index !== -1) {
|
||||||
|
state.collapsedLocations.splice(index, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger change callback
|
||||||
|
if (onDataChange) {
|
||||||
|
onDataChange('inventory', 'stored', inventory.stored);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-render view
|
||||||
|
const widget = container.querySelector('.rpg-inventory-widget');
|
||||||
|
widget.querySelector('.rpg-inventory-views').innerHTML = renderActiveView(inventory, state);
|
||||||
|
attachInventoryHandlers(container, widgetId, inventory, state, dependencies);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user