Skip to content

Commit

Permalink
feat: rearrange frontend edit button on website to avoid conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
@jackd248
jackd248 committed Aug 7, 2024
1 parent e64cfde commit d7bf4b8
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 41 deletions.
16 changes: 10 additions & 6 deletions Classes/Controller/EditController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,21 +71,25 @@ public function editableContentElementsByPage(ServerRequestInterface $request):
$result[$contentElement['uid']] = [
'uid' => $contentElement['uid'],
'type' => $contentElement['CType'],
'label' => $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:editMenu'),
'label' => $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:edit_menu'),
'icon' => $iconFactory->getIcon('actions-open', 'small')->getAlternativeMarkup('inline'),
'actions' => [
'div_info' => [
'type' => 'divider',
'label' => $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:div_info'),
],
'intro' => [
'type' => 'header',
'label' => $GLOBALS['LANG']->sL($contentElementConfig['label']),
'label' => $GLOBALS['LANG']->sL($contentElementConfig['label']) . '<p><small><strong>[' . $contentElement['uid'] . ']</strong> ' . ($contentElement['header'] ? (strlen($contentElement['header']) > 30 ? substr($contentElement['header'],0,30).'...' : $contentElement['header']) : '') . '</small></p>',
'icon' => $iconFactory->getIcon($contentElementConfig['icon'], 'small')->getAlternativeMarkup('inline'),
],
'div_edit' => [
'type' => 'divider',
'label' => $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:divEdit'),
'label' => $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:div_edit'),
],
'edit' => [
'type' => 'link',
'label' => $contentElement['CType'] === 'list' ? $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:editPlugin') : $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:editContentElement'),
'label' => $contentElement['CType'] === 'list' ? $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:edit_plugin') : $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:edit_content_element'),
'icon' => $iconFactory->getIcon($contentElement['CType'] === 'list' ? 'content-plugin' : 'content-textpic', 'small')->getAlternativeMarkup('inline'),
'url' => GeneralUtility::makeInstance(UriBuilder::class)->buildUriFromRoute(
'record_edit',
Expand All @@ -101,7 +105,7 @@ public function editableContentElementsByPage(ServerRequestInterface $request):
],
'page' => [
'type' => 'link',
'label' => $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:editPage'),
'label' => $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:edit_pages'),
'icon' => $iconFactory->getIcon('apps-pagetree-page-default', 'small')->getAlternativeMarkup('inline'),
'url' => GeneralUtility::makeInstance(UriBuilder::class)->buildUriFromRoute(
'web_layout',
Expand All @@ -113,7 +117,7 @@ public function editableContentElementsByPage(ServerRequestInterface $request):
],
'div_action' => [
'type' => 'divider',
'label' => $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:divAction'),
'label' => $GLOBALS['LANG']->sL('LLL:EXT:xima_typo3_toolbox/Resources/Private/Language/locallang.xlf:div_action'),
],
'hide' => [
'type' => 'link',
Expand Down
68 changes: 68 additions & 0 deletions Resources/Private/Language/de.locallang.xlf
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
<file source-language="en" datatype="plaintext" original="messages">
<header/>
<body>
<trans-unit id="usages.toolbar-label">
<source />
<target>Letzte Aktualisierung</target>
</trans-unit>
<trans-unit id="edit_menu">
<source />
<target>Bearbeitungsmenü</target>
</trans-unit>
<trans-unit id="edit_content_element">
<source />
<target>Inhaltselement bearbeiten</target>
</trans-unit>
<trans-unit id="edit_plugin">
<source />
<target>Plugin bearbeiten</target>
</trans-unit>
<trans-unit id="edit_pages">
<source />
<target>Seite bearbeiten</target>
</trans-unit>
<trans-unit id="history">
<source />
<target>Verlauf</target>
</trans-unit>
<trans-unit id="info">
<source />
<target>Info</target>
</trans-unit>
<trans-unit id="hide">
<source />
<target>Deaktivieren</target>
</trans-unit>
<trans-unit id="div_info">
<source />
<target>Info</target>
</trans-unit>
<trans-unit id="div_edit">
<source />
<target>Bearbeiten</target>
</trans-unit>
<trans-unit id="div_action">
<source />
<target>Aktionen</target>
</trans-unit>
<trans-unit id="contentelement.technical_headline.label">
<source />
<target>Technische Überschrift</target>
</trans-unit>
<trans-unit id="contentelement.technical_headline.description">
<source />
<target>Hilfsinhalt um technische Informationen als Headline Element auszuspielen</target>
</trans-unit>
<trans-unit id="technical_headline.headline.link.title">
<source />
<target>Link auf sich selbst</target>
</trans-unit>
<trans-unit id="technical_headline.headline.top.title">
<source />
<target>Nach oben</target>
</trans-unit>
</body>
</file>
</xliff>
15 changes: 9 additions & 6 deletions Resources/Private/Language/locallang.xlf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@
<trans-unit id="usages.toolbar-label">
<source>Last Update</source>
</trans-unit>
<trans-unit id="editMenu">
<trans-unit id="edit_menu">
<source>Edit menu</source>
</trans-unit>
<trans-unit id="editContentElement">
<trans-unit id="edit_content_element">
<source>Edit content element</source>
</trans-unit>
<trans-unit id="editPlugin">
<trans-unit id="edit_plugin">
<source>Edit plugin</source>
</trans-unit>
<trans-unit id="editPage">
<trans-unit id="edit_pages">
<source>Edit page</source>
</trans-unit>
<trans-unit id="history">
Expand All @@ -27,10 +27,13 @@
<trans-unit id="hide">
<source>Hide</source>
</trans-unit>
<trans-unit id="divEdit">
<trans-unit id="div_info">
<source>Info</source>
</trans-unit>
<trans-unit id="div_edit">
<source>Edit</source>
</trans-unit>
<trans-unit id="divAction">
<trans-unit id="div_action">
<source>Action</source>
</trans-unit>
<trans-unit id="contentelement.technical_headline.label">
Expand Down
43 changes: 24 additions & 19 deletions Resources/Public/Css/FrontendEditing.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
.xima-typo3-toolbox--edit-container {
outline: 1px dashed gray;
}

.xima-typo3-toolbox--edit-button {
position: absolute;
top: 10px;
right: 10px;
display: none;
width: 30px;
height: 30px;
background-color: white;
Expand All @@ -24,31 +27,28 @@
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
}

.xima-typo3-toolbox--edit-container {
position: relative;
}

.xima-typo3-toolbox--edit-container:hover {
outline: 1px dashed gray;
}
.xima-typo3-toolbox--dropdown-menu {
position: absolute;
display: none;
top: 40px;
right: 10px;
padding: .5em;
margin: 0;
min-width: 120px;
z-index: 1000;
direction: ltr;
background: transparent;
}

.xima-typo3-toolbox--dropdown-menu-inner {
margin: 10px;
background: white;
border: 0 none;
border-radius: .75rem;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
z-index: 1000;
direction: ltr;
padding: .5em;
}

.xima-typo3-toolbox--dropdown-menu a, .xima-typo3-toolbox--dropdown-menu div {
.xima-typo3-toolbox--dropdown-menu-inner a, .xima-typo3-toolbox--dropdown-menu-inner div {
display: flex;
align-items: flex-start;
gap: 5px;
padding: 10px;
color: #333;
Expand All @@ -63,23 +63,28 @@
font-weight: normal;
}

.xima-typo3-toolbox--dropdown-menu div {
.xima-typo3-toolbox--dropdown-menu-inner div {
border-radius: 0;
}

.xima-typo3-toolbox--dropdown-menu div.xima-typo3-toolbox--divider {
.xima-typo3-toolbox--dropdown-menu-inner p {
margin-top: 10px;
margin-bottom: 0;
}

.xima-typo3-toolbox--dropdown-menu-inner div.xima-typo3-toolbox--divider {
color: #666;
text-transform: uppercase;
font-size: 10px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
padding: 5px;
}

.xima-typo3-toolbox--dropdown-menu a svg, .xima-typo3-toolbox--dropdown-menu div svg {
.xima-typo3-toolbox--dropdown-menu-inner a svg, .xima-typo3-toolbox--dropdown-menu-inner div svg {
width: 16px;
}

.xima-typo3-toolbox--dropdown-menu a:hover {
.xima-typo3-toolbox--dropdown-menu-inner a:hover {
background-color: #f0f0f0;
}

Expand Down
50 changes: 40 additions & 10 deletions Resources/Public/JavaScript/frontend_editing.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
const getContentElements = async () => {
if (!pid) return;

Expand All @@ -7,7 +7,7 @@ document.addEventListener('DOMContentLoaded', function() {
const endpoint = `${base}/typo3/editable-content-elements?pid=${pid}&returnUrl=${url}`.replace(/([^:]\/)\/+/g, "$1");

try {
const response = await fetch(endpoint, { cache: 'no-cache' });
const response = await fetch(endpoint, {cache: 'no-cache'});
if (!response.ok) return;

const jsonResponse = await response.json();
Expand All @@ -17,15 +17,19 @@ document.addEventListener('DOMContentLoaded', function() {
const element = document.querySelector(`#c${uid}`);
if (!element) continue;

element.classList.add('xima-typo3-toolbox--edit-container');

const editButton = document.createElement('button');
editButton.className = 'xima-typo3-toolbox--edit-button';
editButton.title = contentElement.label;
editButton.innerHTML = contentElement.icon;
editButton.setAttribute('data-cid', uid);

const dropdownMenu = document.createElement('div');
dropdownMenu.className = 'xima-typo3-toolbox--dropdown-menu';
dropdownMenu.setAttribute('data-cid', uid);

const dropdownMenuInner = document.createElement('div');
dropdownMenuInner.className = 'xima-typo3-toolbox--dropdown-menu-inner';
dropdownMenu.appendChild(dropdownMenuInner);

for (let actionName in contentElement.actions) {
const action = contentElement.actions[actionName];
Expand All @@ -42,19 +46,45 @@ document.addEventListener('DOMContentLoaded', function() {
}

actionElement.innerHTML = `${action.icon ?? ''} <span>${action.label}</span>`;
dropdownMenu.appendChild(actionElement);
dropdownMenuInner.appendChild(actionElement);
}

editButton.addEventListener('click', function(event) {
editButton.addEventListener('click', function (event) {
event.preventDefault();
dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
});

element.appendChild(editButton);
element.appendChild(dropdownMenu);
document.body.appendChild(editButton);
document.body.appendChild(dropdownMenu);

element.addEventListener('mouseover', function () {
let rect = element.getBoundingClientRect();
editButton.style.top = `${rect.top + document.documentElement.scrollTop + 10}px`;
editButton.style.left = `${rect.right - 40}px`;
editButton.style.display = 'block';
dropdownMenu.style.top = `${rect.top + document.documentElement.scrollTop + 40}px`;
dropdownMenu.style.right = `${document.documentElement.clientWidth - rect.right +5}px`;
element.classList.add('xima-typo3-toolbox--edit-container');
});

element.addEventListener('mouseout', function (event) {
if (event.relatedTarget === editButton || event.relatedTarget === dropdownMenu) return;
editButton.style.display = 'none';
dropdownMenu.style.display = 'none';
element.classList.remove('xima-typo3-toolbox--edit-container');
});

document.querySelectorAll('.xima-typo3-toolbox--dropdown-menu').forEach(function (menu) {
menu.addEventListener('mouseleave', function (event) {
const cid = menu.getAttribute('data-cid');
menu.style.display = 'none';
document.querySelector(`.xima-typo3-toolbox--edit-button[data-cid="${cid}"]`).style.display = 'none';
document.querySelector(`#c${cid}`).classList.remove('xima-typo3-toolbox--edit-container');
});
});

document.addEventListener('click', function(event) {
document.querySelectorAll('.xima-typo3-toolbox--dropdown-menu').forEach(function(menu) {
document.addEventListener('click', function (event) {
document.querySelectorAll('.xima-typo3-toolbox--dropdown-menu').forEach(function (menu) {
const button = menu.previousElementSibling;
if (!menu.contains(event.target) && !button.contains(event.target)) {
menu.style.display = 'none';
Expand Down

0 comments on commit d7bf4b8

Please sign in to comment.