Release v2.15.2
This commit is contained in:
lzstealth committed
1 parent
ddcc665f81
commit
7295f83f04
43 files changed
+2526
-104
No files matched your search
@@ -3709,28 +3709,48 @@ td[data-label="Actions"] > div {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.playlist-duration-input {
|
||||
.playlist-duration-input,
|
||||
.playlist-group-block-quota {
|
||||
width: 4rem !important;
|
||||
min-width: 4rem !important;
|
||||
flex: 0 0 4rem !important;
|
||||
min-width: 0 !important;
|
||||
flex: 1 1 4rem !important;
|
||||
}
|
||||
|
||||
.playlist-duration-input-group {
|
||||
.playlist-duration-input-group,
|
||||
.playlist-group-block-quota-wrap {
|
||||
display: inline-flex !important;
|
||||
flex: 0 0 auto !important;
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !important;
|
||||
width: 6rem !important;
|
||||
max-width: 6rem !important;
|
||||
flex-wrap: nowrap;
|
||||
border-radius: var(--bs-border-radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.playlist-group-block-quota-wrap {
|
||||
width: calc(6rem + 0.5rem + 2rem) !important;
|
||||
max-width: calc(6rem + 0.5rem + 2rem) !important;
|
||||
}
|
||||
|
||||
.playlist-use-video-duration,
|
||||
.playlist-disable-audio,
|
||||
[data-playlist-group-shuffle] {
|
||||
flex: 0 0 2rem;
|
||||
width: 2rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.playlist-duration-input::-webkit-outer-spin-button,
|
||||
.playlist-duration-input::-webkit-inner-spin-button {
|
||||
.playlist-duration-input::-webkit-inner-spin-button,
|
||||
.playlist-group-block-quota::-webkit-outer-spin-button,
|
||||
.playlist-group-block-quota::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.playlist-duration-input {
|
||||
.playlist-duration-input,
|
||||
.playlist-group-block-quota {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
@@ -3839,6 +3859,156 @@ table.table > :not(caption) > * > * {
|
||||
gap: 0.02rem;
|
||||
}
|
||||
|
||||
.playlist-group-block-row > td {
|
||||
padding: 0.5rem 0.5rem !important;
|
||||
border-top: 1px solid var(--bs-border-color) !important;
|
||||
border-bottom: 1px solid var(--bs-border-color) !important;
|
||||
background: color-mix(in srgb, var(--playlist-group-bg, var(--bs-primary-bg-subtle)) 45%, var(--bs-table-bg)) !important;
|
||||
}
|
||||
|
||||
.playlist-group-icon {
|
||||
color: var(--playlist-group-accent, var(--bs-primary));
|
||||
}
|
||||
|
||||
.playlist-group-block-row > td[data-label="Actions"] {
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
|
||||
.playlist-group-block-row > td[data-label="Order"] {
|
||||
padding-left: 1.5rem !important;
|
||||
}
|
||||
|
||||
.playlist-group-block-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.playlist-group-block-slide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.playlist-group-block-name {
|
||||
flex: 1 1 8rem;
|
||||
width: auto;
|
||||
min-width: 6rem;
|
||||
max-width: 24rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.playlist-group-mode {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
[data-playlist-group-select-controls][hidden],
|
||||
[data-playlist-group-repeat-controls][hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.playlist-group-child > td[data-label="Slide"] {
|
||||
padding-left: 1.5rem !important;
|
||||
}
|
||||
|
||||
.playlist-group-empty > td {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.playlist-group-child > td {
|
||||
background-color: color-mix(in srgb, var(--playlist-group-bg, var(--bs-primary-bg-subtle)) 45%, var(--bs-table-bg));
|
||||
}
|
||||
|
||||
.table > tbody > tr.playlist-group-block-row > td {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.table > tbody > tr.playlist-group-child > td:first-child {
|
||||
box-shadow: inset 4px 0 var(--playlist-group-accent, var(--bs-primary)), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
|
||||
}
|
||||
|
||||
.playlist-schedule-conflict-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-left: 0.35rem;
|
||||
border: 1px solid var(--bs-danger-border-subtle);
|
||||
background: var(--bs-danger-bg-subtle);
|
||||
color: var(--bs-danger-text-emphasis);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.playlist-group-block-dragging > td {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.playlist-group-block-placeholder > td {
|
||||
border-bottom: 1px dashed var(--bs-border-color) !important;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.playlist-group-drag-preview {
|
||||
overflow: hidden;
|
||||
padding: 0.65rem;
|
||||
border: 1px solid var(--playlist-group-accent, var(--bs-primary));
|
||||
border-left-width: 4px;
|
||||
border-radius: 0.25rem;
|
||||
background: color-mix(in srgb, var(--playlist-group-bg, var(--bs-primary-bg-subtle)) 45%, var(--bs-body-bg));
|
||||
box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.32);
|
||||
opacity: 0.98;
|
||||
}
|
||||
|
||||
.playlist-group-drag-preview-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding-bottom: 0.45rem;
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.playlist-group-drag-preview-members {
|
||||
padding-top: 0.35rem;
|
||||
}
|
||||
|
||||
.playlist-group-drag-preview-member {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
min-width: 0;
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
|
||||
.playlist-group-drag-preview-member img,
|
||||
.playlist-group-drag-preview-placeholder {
|
||||
flex: 0 0 2.5rem;
|
||||
width: 2.5rem;
|
||||
height: 1.45rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.playlist-group-drag-preview-placeholder {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bs-secondary-bg);
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.playlist-group-drag-preview-member > span:last-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.playlist-group-drag-preview-more {
|
||||
padding: 0.25rem 0 0 3.05rem;
|
||||
color: var(--bs-secondary-color);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.playlist-drag-handle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -3901,6 +4071,10 @@ table.table > :not(caption) > * > * {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.playlist-row-ghost.playlist-group-child {
|
||||
background: color-mix(in srgb, var(--playlist-group-bg, var(--bs-primary-bg-subtle)) 45%, var(--bs-table-bg)) !important;
|
||||
}
|
||||
|
||||
.playlist-row-dragging {
|
||||
box-shadow: 0 0.85rem 2rem rgba(15, 23, 42, 0.18);
|
||||
opacity: 0.98;
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -14,11 +14,26 @@
|
||||
function measureDraggedRowWidths(row) {
|
||||
var metrics = {
|
||||
rowRect: row.getBoundingClientRect(),
|
||||
cellRects: []
|
||||
cellRects: [],
|
||||
rowStyles: {
|
||||
width: row.style.width,
|
||||
height: row.style.height,
|
||||
boxSizing: row.style.boxSizing
|
||||
},
|
||||
cellStyles: []
|
||||
};
|
||||
|
||||
Array.prototype.forEach.call(row.children, function (cell) {
|
||||
metrics.cellRects.push(cell.getBoundingClientRect());
|
||||
metrics.cellStyles.push({
|
||||
width: cell.style.width,
|
||||
height: cell.style.height,
|
||||
boxSizing: cell.style.boxSizing,
|
||||
paddingLeft: cell.style.paddingLeft,
|
||||
paddingRight: cell.style.paddingRight,
|
||||
paddingTop: cell.style.paddingTop,
|
||||
paddingBottom: cell.style.paddingBottom
|
||||
});
|
||||
});
|
||||
|
||||
return metrics;
|
||||
@@ -61,19 +76,25 @@
|
||||
});
|
||||
}
|
||||
|
||||
function unlockDraggedRowWidths(row) {
|
||||
function unlockDraggedRowWidths(row, metrics) {
|
||||
if (!row) {
|
||||
return;
|
||||
}
|
||||
|
||||
row.style.width = '';
|
||||
row.style.height = '';
|
||||
row.style.boxSizing = '';
|
||||
var rowStyles = metrics && metrics.rowStyles ? metrics.rowStyles : {};
|
||||
row.style.width = rowStyles.width || '';
|
||||
row.style.height = rowStyles.height || '';
|
||||
row.style.boxSizing = rowStyles.boxSizing || '';
|
||||
|
||||
Array.prototype.forEach.call(row.children, function (cell) {
|
||||
cell.style.width = '';
|
||||
cell.style.height = '';
|
||||
cell.style.boxSizing = '';
|
||||
Array.prototype.forEach.call(row.children, function (cell, index) {
|
||||
var cellStyles = metrics && metrics.cellStyles && metrics.cellStyles[index] ? metrics.cellStyles[index] : {};
|
||||
cell.style.width = cellStyles.width || '';
|
||||
cell.style.height = cellStyles.height || '';
|
||||
cell.style.boxSizing = cellStyles.boxSizing || '';
|
||||
cell.style.paddingLeft = cellStyles.paddingLeft || '';
|
||||
cell.style.paddingRight = cellStyles.paddingRight || '';
|
||||
cell.style.paddingTop = cellStyles.paddingTop || '';
|
||||
cell.style.paddingBottom = cellStyles.paddingBottom || '';
|
||||
});
|
||||
}
|
||||
|
||||
@@ -130,6 +151,7 @@
|
||||
function initPlaylistTableDrag(options) {
|
||||
var tbody = options && options.tbody ? options.tbody : null;
|
||||
var onOrderChanged = options && typeof options.onOrderChanged === 'function' ? options.onOrderChanged : function () {};
|
||||
var onRowDrop = options && typeof options.onRowDrop === 'function' ? options.onRowDrop : function () {};
|
||||
var rowDragState = null;
|
||||
|
||||
if (!tbody) {
|
||||
@@ -148,6 +170,64 @@
|
||||
return Array.prototype.slice.call(tbody.querySelectorAll('tr[data-playlist-slide-row]:not([data-playlist-ghost-row])'));
|
||||
}
|
||||
|
||||
function getDropTargets() {
|
||||
return Array.prototype.slice.call(tbody.children).filter(function (node) {
|
||||
return node === rowDragState.placeholder
|
||||
|| node.matches('[data-playlist-group-row]')
|
||||
|| (node.matches('[data-playlist-slide-row]') && !node.hasAttribute('data-playlist-ghost-row'));
|
||||
});
|
||||
}
|
||||
|
||||
function getGroupAtY(clientY) {
|
||||
var headers = Array.prototype.slice.call(tbody.querySelectorAll('[data-playlist-group-row]'));
|
||||
for (var index = 0; index < headers.length; index += 1) {
|
||||
var header = headers[index];
|
||||
var groupKey = String(header.getAttribute('data-group-key') || '');
|
||||
var top = header.getBoundingClientRect().top;
|
||||
var bottom = header.getBoundingClientRect().bottom;
|
||||
var member = header.nextElementSibling;
|
||||
while (member && member.matches('[data-playlist-slide-row], [data-playlist-group-empty]')
|
||||
&& String(member.getAttribute('data-group-key') || '') === groupKey) {
|
||||
bottom = member.getBoundingClientRect().bottom;
|
||||
member = member.nextElementSibling;
|
||||
}
|
||||
if (clientY >= top && clientY <= bottom) {
|
||||
return { key: groupKey, header: header };
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function syncDropTarget(clientY) {
|
||||
var groupTarget = getGroupAtY(clientY);
|
||||
var rows = getRows();
|
||||
var rowTarget = rows.find(function (row) {
|
||||
var rect = row.getBoundingClientRect();
|
||||
return clientY >= rect.top && clientY <= rect.bottom;
|
||||
}) || null;
|
||||
var nextHeader = groupTarget ? groupTarget.header : null;
|
||||
var nextRow = !groupTarget ? rowTarget : null;
|
||||
if (rowDragState.highlightedGroupHeader && rowDragState.highlightedGroupHeader !== nextHeader) {
|
||||
rowDragState.highlightedGroupHeader.classList.remove('playlist-group-drop-target');
|
||||
}
|
||||
if (rowDragState.highlightedRow && rowDragState.highlightedRow !== nextRow) {
|
||||
rowDragState.highlightedRow.classList.remove('playlist-row-drop-target');
|
||||
}
|
||||
if (nextHeader) nextHeader.classList.add('playlist-group-drop-target');
|
||||
if (nextRow) nextRow.classList.add('playlist-row-drop-target');
|
||||
rowDragState.highlightedGroupHeader = nextHeader;
|
||||
rowDragState.highlightedRow = nextRow;
|
||||
rowDragState.targetGroupKey = groupTarget ? groupTarget.key : '';
|
||||
}
|
||||
|
||||
function clearDropTarget() {
|
||||
if (!rowDragState) return;
|
||||
if (rowDragState.highlightedGroupHeader) rowDragState.highlightedGroupHeader.classList.remove('playlist-group-drop-target');
|
||||
if (rowDragState.highlightedRow) rowDragState.highlightedRow.classList.remove('playlist-row-drop-target');
|
||||
rowDragState.highlightedGroupHeader = null;
|
||||
rowDragState.highlightedRow = null;
|
||||
}
|
||||
|
||||
function getDragHandle(target) {
|
||||
return target && target.closest ? target.closest('[data-playlist-drag-handle]') : null;
|
||||
}
|
||||
@@ -242,30 +322,44 @@
|
||||
}
|
||||
|
||||
function repositionGhostRow(clientY) {
|
||||
var rows = getRows();
|
||||
var insertBeforeRow = null;
|
||||
var targets;
|
||||
var insertBeforeNode = null;
|
||||
var previousRects = new Map();
|
||||
var moved = false;
|
||||
syncDropTarget(clientY);
|
||||
if (rowDragState.placeholder) {
|
||||
rowDragState.placeholder.setAttribute('data-group-key', rowDragState.targetGroupKey || '');
|
||||
rowDragState.placeholder.classList.toggle('playlist-group-child', Boolean(rowDragState.targetGroupKey));
|
||||
['--playlist-group-accent', '--playlist-group-bg'].forEach(function (property) {
|
||||
var header = rowDragState.highlightedGroupHeader;
|
||||
if (header) {
|
||||
rowDragState.placeholder.style.setProperty(property, header.style.getPropertyValue(property));
|
||||
} else {
|
||||
rowDragState.placeholder.style.removeProperty(property);
|
||||
}
|
||||
});
|
||||
}
|
||||
targets = getDropTargets();
|
||||
|
||||
rows.forEach(function (row) {
|
||||
if (row !== rowDragState.placeholder) {
|
||||
previousRects.set(row, row.getBoundingClientRect());
|
||||
targets.forEach(function (node) {
|
||||
if (node !== rowDragState.placeholder) {
|
||||
previousRects.set(node, node.getBoundingClientRect());
|
||||
}
|
||||
});
|
||||
|
||||
for (var index = 0; index < rows.length; index += 1) {
|
||||
var candidateRow = rows[index];
|
||||
var rect = candidateRow.getBoundingClientRect();
|
||||
for (var index = 0; index < targets.length; index += 1) {
|
||||
var candidateNode = targets[index];
|
||||
var rect = candidateNode.getBoundingClientRect();
|
||||
|
||||
if (clientY < rect.top + rect.height / 2) {
|
||||
insertBeforeRow = candidateRow;
|
||||
insertBeforeNode = candidateNode;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (insertBeforeRow) {
|
||||
if (rowDragState.placeholder !== insertBeforeRow && rowDragState.placeholder.nextSibling !== insertBeforeRow) {
|
||||
tbody.insertBefore(rowDragState.placeholder, insertBeforeRow);
|
||||
if (insertBeforeNode) {
|
||||
if (rowDragState.placeholder !== insertBeforeNode && rowDragState.placeholder.nextSibling !== insertBeforeNode) {
|
||||
tbody.insertBefore(rowDragState.placeholder, insertBeforeNode);
|
||||
moved = true;
|
||||
}
|
||||
} else if (rowDragState.placeholder.parentNode !== tbody || rowDragState.placeholder.nextSibling) {
|
||||
@@ -310,7 +404,9 @@
|
||||
rowDragState.row.classList.remove('playlist-row-dragging');
|
||||
rowDragState.row.style.pointerEvents = rowDragState.previousPointerEvents;
|
||||
rowDragState.row.removeAttribute('aria-grabbed');
|
||||
unlockDraggedRowWidths(rowDragState.row);
|
||||
unlockDraggedRowWidths(rowDragState.row, rowDragState.metrics);
|
||||
onRowDrop(rowDragState.row, rowDragState.targetGroupKey || '');
|
||||
clearDropTarget();
|
||||
onOrderChanged();
|
||||
}
|
||||
|
||||
@@ -374,6 +470,7 @@
|
||||
metrics: measureDraggedRowWidths(row),
|
||||
startX: point.x,
|
||||
startY: point.y,
|
||||
targetGroupKey: String(row.getAttribute('data-group-key') || ''),
|
||||
currentPoint: point,
|
||||
threshold: 3,
|
||||
active: false,
|
||||
@@ -406,5 +503,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
window.animatePlaylistRowReorder = animateRowReorder;
|
||||
window.initPlaylistTableDrag = initPlaylistTableDrag;
|
||||
}());
|
||||
Reference in new issue
Block a user