CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2026-01-20 15:22:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

push

Browse Source
This commit is contained in:
Markos Gogoulos
2026-01-09 13:29:18 +02:00
parent fdfa857794
commit 4bd56da2d8
10 changed files with 177 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
templates/cms/add-media.html
View File

@@ -19,6 +19,7 @@
{% block topimports %}
<link href="{% static "css/add-media.css" %}" rel="preload" as="style">
<link href="{% static "css/add-media.css" %}" rel="stylesheet">
<link href="{% static "css/category_modal.css" %}" rel="stylesheet">
{%endblock topimports %}
{% block innercontent %}
@@ -84,7 +85,7 @@
<span class="filename-edit qq-edit-filename-icon-selector" aria-label="Edit filename">Edit filename <i class="material-icons">create</i></span>
<button type="button" class="delete-media-upload-item qq-upload-delete-selector" aria-label="Delete">Delete <i class="material-icons">delete</i></button>
<button type="button" class="cancel-media-upload-item qq-upload-cancel-selector" aria-label="Cancel">Cancel <i class="material-icons">cancel</i></button>
<a href="#" class="view-uploaded-media-link qq-hide" target="_blank">{{ "View media" | custom_translate:LANGUAGE_CODE}}<i class="material-icons">open_in_new</i></a>
<a href="#" class="view-uploaded-media-link qq-hide">{{ "View media" | custom_translate:LANGUAGE_CODE}}<i class="material-icons">open_in_new</i></a>
</div>
<div class="media-upload-item-bottom-actions">
<button type="button" class="continue-media-upload-item qq-upload-continue-selector" aria-label="Continue"><i class="material-icons">play_circle_outline</i> Continue</button>
@@ -119,6 +120,31 @@
</div>
</script>
<div class="media-uploader"></div>
<!-- Category Selector -->
<div class="category-selector-section" style="margin-top: 30px; padding: 20px; background: #f9f9f9; border-radius: 8px; max-width: 600px;">
<h3 style="margin: 0 0 15px; font-size: 18px; font-weight: 500;">{{ "Publish in categories (optional)" | custom_translate:LANGUAGE_CODE}}</h3>
<div id="category-widget-container" class="category-widget" data-name="publish_to_category" style="max-width: 100%;">
<div class="category-content">
<div class="category-panel">
<input type="text" class="category-search" placeholder="{{ 'Search categories...' | custom_translate:LANGUAGE_CODE}}">
<div class="category-list scrollable" data-panel="left">
<div class="empty-message">{{ "Loading categories..." | custom_translate:LANGUAGE_CODE}}</div>
</div>
</div>
<div class="category-panel">
<h3>{{ "Selected Categories" | custom_translate:LANGUAGE_CODE}}</h3>
<div class="category-list scrollable" data-panel="right">
<div class="empty-message">{{ "No categories selected" | custom_translate:LANGUAGE_CODE}}</div>
</div>
</div>
</div>
<div class="hidden-inputs"></div>
</div>
<p style="margin-top: 15px; font-size: 14px; color: #666;">
{{ "Select the categories that the media will be published in" | custom_translate:LANGUAGE_CODE}}
</p>
</div>
</div>
{% else %}
@@ -156,11 +182,94 @@
}
return cookieVal;
}
// Initialize category widget
var categoryWidget = document.getElementById('category-widget-container');
var selectedCategorySet = new Set();
var allCategories = [];
var searchInput = categoryWidget.querySelector('.category-search');
var leftPanel = categoryWidget.querySelector('[data-panel="left"]');
var rightPanel = categoryWidget.querySelector('[data-panel="right"]');
var hiddenInputs = categoryWidget.querySelector('.hidden-inputs');
function updateCategoryUI() {
// Update left panel (available categories)
var filteredCategories = allCategories.filter(function(c) {
return !selectedCategorySet.has(c.uid) &&
(!searchInput.value || c.title.toLowerCase().includes(searchInput.value.toLowerCase()));
});
leftPanel.innerHTML = filteredCategories.map(function(c) {
return '<div class="category-item" data-id="' + c.uid + '">' +
'<span>' + c.title + '</span>' +
'<button class="add-btn" type="button">+</button>' +
'</div>';
}).join('') || '<div class="empty-message">No categories available</div>';
// Update right panel (selected categories)
var selectedCategories = Array.from(selectedCategorySet).map(function(id) {
return allCategories.find(function(c) { return c.uid === id; });
}).filter(Boolean);
rightPanel.innerHTML = selectedCategories.map(function(c) {
return '<div class="category-item" data-id="' + c.uid + '">' +
'<span>' + c.title + '</span>' +
'<button class="remove-btn" type="button">&times;</button>' +
'</div>';
}).join('') || '<div class="empty-message">No categories selected</div>';
// Update hidden inputs
hiddenInputs.innerHTML = Array.from(selectedCategorySet).map(function(id) {
return '<input type="hidden" name="publish_to_category" value="' + id + '">';
}).join('');
}
// Fetch categories from API
fetch('/api/v1/categories/contributor')
.then(function(response) { return response.json(); })
.then(function(categories) {
allCategories = categories;
updateCategoryUI();
})
.catch(function(error) {
console.error('Error fetching categories:', error);
leftPanel.innerHTML = '<div class="empty-message">Error loading categories</div>';
});
// Event handlers
searchInput.addEventListener('input', updateCategoryUI);
leftPanel.addEventListener('click', function(e) {
var item = e.target.closest('.category-item');
if (item) {
selectedCategorySet.add(item.dataset.id);
updateCategoryUI();
}
});
rightPanel.addEventListener('click', function(e) {
var item = e.target.closest('.category-item');
if (item) {
selectedCategorySet.delete(item.dataset.id);
updateCategoryUI();
}
});
// Function to get selected categories for FineUploader
function getSelectedCategories() {
return Array.from(selectedCategorySet).join(',');
}
var default_concurrent_chunked_uploader = new qq.FineUploader({
debug: false,
debug: true,
element: document.querySelector('.media-uploader'),
request: {
endpoint: '{% url 'uploader:upload' %}{% if lti_category_uid %}?publish_to_category={{ lti_category_uid }}{% endif %}',
endpoint: '{% url 'uploader:upload' %}',
params: {
'publish_to_category': function() {
return getSelectedCategories();
}
},
customHeaders: {
'X-CSRFToken': getCSRFToken('csrftoken'),
},
@@ -179,7 +288,7 @@
enabled: true,
},
success: {
endpoint: '{% url 'uploader:upload' %}?done{% if lti_category_uid %}&publish_to_category={{ lti_category_uid }}{% endif %}',
endpoint: '{% url 'uploader:upload' %}?done',
},
},
callbacks: {