From 4fb0ead3b1d0b7dbefeb6567b8b249c31463abd8 Mon Sep 17 00:00:00 2001 From: jckautzmann Date: Mon, 15 Apr 2024 19:03:03 +0200 Subject: [PATCH 1/4] SITES-16562 - [Xwalk] Open Universal Editor from Franklin Sidekick - port code from wknd project --- scripts/scripts.js | 2 ++ scripts/sidekick.js | 62 ++++++++++++++++++++++++++++++++++++++ tools/sidekick/config.json | 10 ++++++ 3 files changed, 74 insertions(+) create mode 100644 scripts/sidekick.js create mode 100644 tools/sidekick/config.json diff --git a/scripts/scripts.js b/scripts/scripts.js index e42988cd9f..b903d1e462 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -11,6 +11,7 @@ import { loadBlocks, loadCSS, } from './aem.js'; +import { initSidekick } from './sidekick.js'; const LCP_BLOCKS = []; // add your LCP blocks to the list @@ -142,6 +143,7 @@ function loadDelayed() { // eslint-disable-next-line import/no-cycle window.setTimeout(() => import('./delayed.js'), 3000); // load anything that can be postponed to the latest here + initSidekick(); } async function loadPage() { diff --git a/scripts/sidekick.js b/scripts/sidekick.js new file mode 100644 index 0000000000..7bd4a3af08 --- /dev/null +++ b/scripts/sidekick.js @@ -0,0 +1,62 @@ +async function getContentSourceUrl(owner, repo, ref) { + const res = await fetch(`https://admin.hlx.page/sidekick/${owner}/${repo}/${ref}/env.json`); + if (!res || !res.ok) { + return null; + } + const env = await res.json(); + if (!env) { + return null; + } + return env.contentSourceUrl; +} +async function openAemEditor(event) { + const { owner, repo, ref } = event.detail.data.config; + const contentSourceUrl = await getContentSourceUrl(owner, repo, ref); + const path = window.location.pathname; + const editorUrl = `${contentSourceUrl}${path}?cmd=open`; + // open the editor in a new tab + window.open(editorUrl, '_blank'); +} + +function getButton(sk, selector) { + let btn = sk.shadowRoot.querySelector(selector); + if (btn) { + return btn; + } + return new Promise((resolve) => { + const check = () => { + btn = sk.shadowRoot.querySelector(selector); + if (btn) { + resolve(btn); + } else { + setTimeout(check, 100); + } + }; + check(); + }); +} + +async function overrideEditButton(sk) { + const oldEditBtn = await getButton(sk, '.edit.plugin'); + const newEditBtn = await getButton(sk, '.aemedit.plugin'); + oldEditBtn.replaceWith(newEditBtn); + // hack to remove the original edit button that is generated again in the DOM + const oldEditBtn1 = await getButton(sk, '.edit.plugin'); + oldEditBtn1.remove(); + sk.addEventListener('custom:aemedit', openAemEditor); +} + +// eslint-disable-next-line import/prefer-default-export +export function initSidekick() { + let sk = document.querySelector('helix-sidekick'); + if (sk) { + // sidekick already loaded + overrideEditButton(sk); + } else { + // wait for sidekick to be loaded + document.addEventListener('sidekick-ready', () => { + sk = document.querySelector('helix-sidekick'); + overrideEditButton(sk); + }, { once: true }); + } +} diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json new file mode 100644 index 0000000000..b9b8e95a25 --- /dev/null +++ b/tools/sidekick/config.json @@ -0,0 +1,10 @@ +{ + "plugins": [ + { + "id": "aemedit", + "title": "Edit", + "environments": [ "dev", "preview", "live" ], + "event": "aemedit" + } + ] +} From ce8a8b0026f5e8ad013bf6db908a43ee2f95350d Mon Sep 17 00:00:00 2001 From: jckautzmann Date: Wed, 17 Apr 2024 17:56:24 +0200 Subject: [PATCH 2/4] SITES-16562 - [Xwalk] Open Universal Editor from Franklin Sidekick - hide the default buttons --- scripts/sidekick.js | 56 ++++++++++++++++++++++++++------------------- 1 file changed, 32 insertions(+), 24 deletions(-) diff --git a/scripts/sidekick.js b/scripts/sidekick.js index 7bd4a3af08..f013e4fefb 100644 --- a/scripts/sidekick.js +++ b/scripts/sidekick.js @@ -4,30 +4,32 @@ async function getContentSourceUrl(owner, repo, ref) { return null; } const env = await res.json(); - if (!env) { - return null; - } - return env.contentSourceUrl; + return env?.contentSourceUrl; } -async function openAemEditor(event) { +async function openWithUniversalEditor(event) { const { owner, repo, ref } = event.detail.data.config; const contentSourceUrl = await getContentSourceUrl(owner, repo, ref); + if (!contentSourceUrl) { + // eslint-disable-next-line no-console + console.error('Content source URL not found'); + return; + } const path = window.location.pathname; const editorUrl = `${contentSourceUrl}${path}?cmd=open`; // open the editor in a new tab window.open(editorUrl, '_blank'); } -function getButton(sk, selector) { - let btn = sk.shadowRoot.querySelector(selector); - if (btn) { - return btn; +function getElement(sk, selector) { + let elt = sk.shadowRoot.querySelector(selector); + if (elt) { + return elt; } return new Promise((resolve) => { const check = () => { - btn = sk.shadowRoot.querySelector(selector); - if (btn) { - resolve(btn); + elt = sk.shadowRoot.querySelector(selector); + if (elt) { + resolve(elt); } else { setTimeout(check, 100); } @@ -36,27 +38,33 @@ function getButton(sk, selector) { }); } -async function overrideEditButton(sk) { - const oldEditBtn = await getButton(sk, '.edit.plugin'); - const newEditBtn = await getButton(sk, '.aemedit.plugin'); - oldEditBtn.replaceWith(newEditBtn); - // hack to remove the original edit button that is generated again in the DOM - const oldEditBtn1 = await getButton(sk, '.edit.plugin'); - oldEditBtn1.remove(); - sk.addEventListener('custom:aemedit', openAemEditor); +async function customizeButtons(sk) { + // hide the default buttons + const container = await getElement(sk, '.plugin-container'); + container.style.visibility = 'hidden'; + for (let i = 0; i < ['edit', 'reload', 'publish', 'delete', 'unpublish'].length; i += 1) { + const action = ['edit', 'reload', 'publish', 'delete', 'unpublish'][i]; + // eslint-disable-next-line no-await-in-loop + const btn = await getElement(sk, `.${action}.plugin`); + btn.style.display = 'none'; + } + container.style.visibility = 'visible'; + + // initialize the custom edit button + sk.addEventListener('custom:aemedit', openWithUniversalEditor); } // eslint-disable-next-line import/prefer-default-export -export function initSidekick() { +export async function initSidekick() { let sk = document.querySelector('helix-sidekick'); if (sk) { // sidekick already loaded - overrideEditButton(sk); + await customizeButtons(sk); } else { // wait for sidekick to be loaded - document.addEventListener('sidekick-ready', () => { + document.addEventListener('sidekick-ready', async () => { sk = document.querySelector('helix-sidekick'); - overrideEditButton(sk); + await customizeButtons(sk); }, { once: true }); } } From 8fd5333b8d0d2074b0cad89dc3a3184be885f3e3 Mon Sep 17 00:00:00 2001 From: jckautzmann Date: Wed, 17 Apr 2024 18:44:47 +0200 Subject: [PATCH 3/4] SITES-16562 - [Xwalk] Open Universal Editor from Franklin Sidekick - address review feedback --- scripts/scripts.js | 3 +-- scripts/sidekick.js | 9 +++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index b903d1e462..1e206db924 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -11,7 +11,6 @@ import { loadBlocks, loadCSS, } from './aem.js'; -import { initSidekick } from './sidekick.js'; const LCP_BLOCKS = []; // add your LCP blocks to the list @@ -143,7 +142,7 @@ function loadDelayed() { // eslint-disable-next-line import/no-cycle window.setTimeout(() => import('./delayed.js'), 3000); // load anything that can be postponed to the latest here - initSidekick(); + import('./sidekick.js').then(({ initSidekick }) => initSidekick()); } async function loadPage() { diff --git a/scripts/sidekick.js b/scripts/sidekick.js index f013e4fefb..9fd64c9dae 100644 --- a/scripts/sidekick.js +++ b/scripts/sidekick.js @@ -14,17 +14,14 @@ async function openWithUniversalEditor(event) { console.error('Content source URL not found'); return; } - const path = window.location.pathname; - const editorUrl = `${contentSourceUrl}${path}?cmd=open`; + const { pathname } = window.location; + const editorUrl = `${contentSourceUrl}${pathname}?cmd=open`; // open the editor in a new tab window.open(editorUrl, '_blank'); } -function getElement(sk, selector) { +async function getElement(sk, selector) { let elt = sk.shadowRoot.querySelector(selector); - if (elt) { - return elt; - } return new Promise((resolve) => { const check = () => { elt = sk.shadowRoot.querySelector(selector); From 5c102d6d6d559aa20bb802fe9cf4a440707944e6 Mon Sep 17 00:00:00 2001 From: jckautzmann Date: Thu, 18 Apr 2024 10:41:36 +0200 Subject: [PATCH 4/4] SITES-16562 - [Xwalk] Open Universal Editor from Franklin Sidekick - address review feedback --- scripts/sidekick.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/scripts/sidekick.js b/scripts/sidekick.js index 9fd64c9dae..be49a5a7b1 100644 --- a/scripts/sidekick.js +++ b/scripts/sidekick.js @@ -39,8 +39,9 @@ async function customizeButtons(sk) { // hide the default buttons const container = await getElement(sk, '.plugin-container'); container.style.visibility = 'hidden'; - for (let i = 0; i < ['edit', 'reload', 'publish', 'delete', 'unpublish'].length; i += 1) { - const action = ['edit', 'reload', 'publish', 'delete', 'unpublish'][i]; + const actions = ['edit', 'reload', 'publish', 'delete', 'unpublish']; + for (let i = 0; i < actions.length; i += 1) { + const action = actions[i]; // eslint-disable-next-line no-await-in-loop const btn = await getElement(sk, `.${action}.plugin`); btn.style.display = 'none';