yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement EditorWidget for dynamic textarea resizing and content rendering

Browse source
This commit is contained in:
Yaro Kasear 2025-07-25 10:15:50 -05:00
parent ded5ff6ddb
commit 16959b8e2f
4 changed files with 33 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

30
inventory/static/js/editor.js Normal file
View file

@ -0,0 +1,30 @@
const EditorWidget = (() => {
let tempIdCounter = 1;
function autoResizeTextarea(textarea) {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight + 2}px`;
}
function createEditorWidget(template, id, timestamp, content = '') {
let html = template.innerHTML
.replace(/__ID__/g, id)
.replace(/__TIMESTAMP__/g, timestamp)
.replace(/__CONTENT__/g, content);
const wrapper = document.createElement("div");
wrapper.innerHTML = html;
return wrapper.firstElementChild;
}
function createTempId(prefix = "temp") {
return `${prefix}-${tempIdCounter++}`;
}
return {
autoResizeTextarea,
createEditorWidget,
createTempId
};
})();

31
inventory/static/js/widget.js
View file

@ -1,34 +1,3 @@
const EditorWidget = (() => {
let tempIdCounter = 1;
function autoResizeTextarea(textarea) {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight + 2}px`;
}
function createEditorWidget(template, id, timestamp, content = '') {
let html = template.innerHTML
.replace(/__ID__/g, id)
.replace(/__TIMESTAMP__/g, timestamp)
.replace(/__CONTENT__/g, content);
const wrapper = document.createElement("div");
wrapper.innerHTML = html;
return wrapper.firstElementChild;
}
function createTempId(prefix = "temp") {
return `${prefix}-${tempIdCounter++}`;
}
return {
autoResizeTextarea,
createEditorWidget,
createTempId
};
})();
const ComboBoxWidget = (() => {
let tempIdCounter = 1;

4
inventory/templates/fragments/_dropdown_fragment.html
View file

@ -11,14 +11,14 @@
<div class="dropdown">
<div class="btn-group w-100">
<button
class="btn btn-outline-dark dropdown-toggle overflow-x-hidden w-100 rounded-end{% if current_item %}-0 border-end-0{% endif %} dropdown-button"
class="btn btn-outline-dark dropdown-toggle overflow-x-hidden w-100 rounded-end{% if current_item and enabled %}-0 border-end-0{% endif %} dropdown-button"
type="button" data-bs-toggle="dropdown" data-inv-value="{{ current_item.id if current_item else '' }}"
id="{{ id }}Button" {% if not enabled %} disabled{% endif %}
style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
{{ current_item.identifier if current_item else '-' }}
</button>
<button
class="btn btn-outline-danger rounded-end font-weight-bold border-start-0{% if not current_item %} d-none{% endif %}"
class="btn btn-outline-danger rounded-end font-weight-bold border-start-0{% if not current_item or not enabled %} d-none{% endif %}"
type="button" id="{{ id }}ClearButton"
style="z-index: 9999; border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}"
onclick="DropdownWidget.clear('{{ id }}')">

1
inventory/templates/layout.html
View file

@ -77,6 +77,7 @@
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
<script src="{{ url_for('static', filename='js/csv.js') }}"></script>
<script src="{{ url_for('static', filename='js/dropdown.js') }}"></script>
<script src="{{ url_for('static', filename='js/editor.js') }}"></script>
<script src="{{ url_for('static', filename='js/image.js') }}"></script>
<script src="{{ url_for('static', filename='js/toast.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/widget.js') }}"></script>