Keep market drawer actions in card header
This commit is contained in:
gitea_admin committed
1 parent
5825d37e83
commit
1d0e71c5db
1 file changed
+43
-1
@@ -1205,7 +1205,49 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $otcM
|
||||
echo " if (!contentRoot || !definitionContent || !drawer || !readCard || !card || !form || !editButton || definitionContent.dataset.marketDefinitionsBound === 'true') { return; }";
|
||||
echo " definitionContent.dataset.marketDefinitionsBound = 'true';";
|
||||
echo " let activeMarket = null;";
|
||||
echo " const prepareMarketDefinitionDeleteCard = () => { const existingCard = drawer.querySelector('[data-market-definition-card]'); if (!existingCard || drawer.querySelector('[data-market-definition-delete-id]')) { return; } const stage = document.createElement('div'); stage.className = 'sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host'; stage.dataset.pattern = 'overlay-card'; stage.dataset.dialogOpen = 'false'; const target = document.createElement('div'); target.className = 'sg-delete-confirmation-pattern__target'; target.dataset.sharedEditableActionCard = ''; target.dataset.sharedEditableDeleteToken = 'DELETE'; target.dataset.marketDefinitionDeleteId = ''; target.dataset.marketDefinitionCard = ''; const titleCard = document.createElement('article'); titleCard.className = 'sg-card sg-card--content-card market-delete-confirmation-card'; const header = document.createElement('header'); header.className = 'sg-card-segment sg-card-segment--header sg-card-segment--gray sg-object-card__header'; const heading = document.createElement('h2'); heading.className = 'sg-heading-h2 market-delete-confirmation-card__title'; heading.dataset.marketDefinitionReadTitle = ''; heading.dataset.marketDefinitionDrawerTitle = ''; heading.textContent = 'Markt'; const actions = document.createElement('div'); actions.className = 'sg-component-row'; const deleteButton = document.createElement('button'); deleteButton.className = 'sg-interaction-element sg-button sg-button--warning'; deleteButton.type = 'button'; deleteButton.dataset.sharedEditableCardDelete = ''; deleteButton.dataset.marketDefinitionDelete = ''; deleteButton.textContent = 'Löschen'; actions.append(deleteButton); header.append(heading, actions); titleCard.append(header); existingCard.querySelector('[data-market-definition-read-title]')?.remove(); existingCard.removeAttribute('data-shared-editable-action-card'); const confirmation = document.createElement('article'); confirmation.className = 'sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card'; confirmation.setAttribute('aria-label', 'Löschbestätigung'); confirmation.setAttribute('role', 'dialog'); confirmation.setAttribute('aria-modal', 'true'); confirmation.dataset.overlayDialog = 'delete'; confirmation.dataset.sharedEditableCardDeleteConfirmation = ''; confirmation.hidden = true; confirmation.innerHTML = '<div class=\"sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body\"><p class=\"sg-body sg-delete-confirmation-pattern__text\"><strong>Möchtest du diesen Markt wirklich löschen?</strong></p><p class=\"sg-body sg-delete-confirmation-pattern__text\">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class=\"sg-delete-confirmation-pattern__code\">DELETE</span>.</p><label class=\"sg-labeled-input-row sg-delete-confirmation-pattern__input-row\"><span class=\"sg-label\">Bestätigung</span><input class=\"sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable\" type=\"text\" placeholder=\"DELETE\" aria-label=\"Löschbestätigung durch DELETE\" data-shared-editable-card-delete-input></label><p class=\"sg-body\" data-market-definition-delete-status aria-live=\"polite\"></p><div class=\"sg-delete-confirmation-pattern__actions\"><button class=\"sg-interaction-element sg-button sg-button--active\" type=\"button\" data-shared-editable-card-delete-cancel>Abbrechen</button><button class=\"sg-interaction-element sg-button sg-button--process sg-button--process-inactive\" type=\"button\" disabled aria-disabled=\"true\" data-shared-editable-card-delete-submit data-market-definition-delete-submit>Löschen</button></div></div>'; target.append(titleCard, existingCard, confirmation); stage.append(target); drawer.querySelector('[data-market-definition-drawer-content]')?.append(stage); };";
|
||||
echo <<<'JS';
|
||||
const prepareMarketDefinitionDeleteCard = () => {
|
||||
const existingCard = drawer.querySelector('[data-market-definition-card]');
|
||||
if (!existingCard || drawer.querySelector('[data-market-definition-delete-id]')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const header = existingCard.querySelector(':scope > .sg-object-card__header');
|
||||
const actions = header?.querySelector(':scope > .sg-component-row');
|
||||
if (!header || !actions) {
|
||||
return;
|
||||
}
|
||||
|
||||
const stage = document.createElement('div');
|
||||
stage.className = 'sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host';
|
||||
stage.dataset.pattern = 'overlay-card';
|
||||
stage.dataset.dialogOpen = 'false';
|
||||
existingCard.classList.add('sg-delete-confirmation-pattern__target');
|
||||
existingCard.dataset.sharedEditableDeleteToken = 'DELETE';
|
||||
existingCard.dataset.marketDefinitionDeleteId = '';
|
||||
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.className = 'sg-interaction-element sg-button sg-button--warning';
|
||||
deleteButton.type = 'button';
|
||||
deleteButton.dataset.sharedEditableCardDelete = '';
|
||||
deleteButton.dataset.marketDefinitionDelete = '';
|
||||
deleteButton.textContent = 'Löschen';
|
||||
actions.append(deleteButton);
|
||||
|
||||
const confirmation = document.createElement('article');
|
||||
confirmation.className = 'sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card';
|
||||
confirmation.setAttribute('aria-label', 'Löschbestätigung');
|
||||
confirmation.setAttribute('role', 'dialog');
|
||||
confirmation.setAttribute('aria-modal', 'true');
|
||||
confirmation.dataset.overlayDialog = 'delete';
|
||||
confirmation.dataset.sharedEditableCardDeleteConfirmation = '';
|
||||
confirmation.hidden = true;
|
||||
confirmation.innerHTML = '<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body"><p class="sg-body sg-delete-confirmation-pattern__text"><strong>Möchtest du diesen Markt wirklich löschen?</strong></p><p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p><label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row"><span class="sg-label">Bestätigung</span><input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-shared-editable-card-delete-input></label><p class="sg-body" data-market-definition-delete-status aria-live="polite"></p><div class="sg-delete-confirmation-pattern__actions"><button class="sg-interaction-element sg-button sg-button--active" type="button" data-shared-editable-card-delete-cancel>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-shared-editable-card-delete-submit data-market-definition-delete-submit>Löschen</button></div></div>';
|
||||
existingCard.append(confirmation);
|
||||
stage.append(existingCard);
|
||||
drawer.querySelector('[data-market-definition-drawer-content]')?.append(stage);
|
||||
};
|
||||
JS;
|
||||
echo " prepareMarketDefinitionDeleteCard();";
|
||||
echo " const sharedCard = drawer.querySelector('[data-market-definition-card]');";
|
||||
echo " if (window.SharedEditableActionCard) { window.SharedEditableActionCard.init(definitionContent); }";
|
||||
|
||||
Reference in new issue
Block a user