From 2bcaba4f111efd45d02fa09583a0dc2fe190f669 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Wed, 8 Mar 2023 15:38:12 -0700 Subject: [PATCH 01/28] Adding tool button. --- tools/sidekick/config.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/tools/sidekick/config.js b/tools/sidekick/config.js index b4f3781b2b..9c0673bf3f 100644 --- a/tools/sidekick/config.js +++ b/tools/sidekick/config.js @@ -108,6 +108,17 @@ function hasSchema(host) { }, }, }, + { + id: 'region-selector', + condition: (s) => s.isEditor(), + button: { + text: 'Region Selector', + action: (_, s) => { + const { config } = s; + console.log('Region Selector is on', config); + }, + }, + }, ], }); })(); From fedd071b59115998da7a05ab52e2f7a200c28dcb Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Thu, 9 Mar 2023 12:39:32 -0700 Subject: [PATCH 02/28] WIP --- .../region-selector-loader/region-selector-loader.css | 3 +++ .../region-selector-loader/region-selector-loader.js | 9 +++++++++ libs/templates/region-selector/region-selector.css | 3 +++ libs/templates/region-selector/region-selector.js | 1 + tools/sidekick/config.js | 11 ----------- tools/sidekick/config.json | 9 +++++++++ 6 files changed, 25 insertions(+), 11 deletions(-) create mode 100644 libs/blocks/region-selector-loader/region-selector-loader.css create mode 100644 libs/blocks/region-selector-loader/region-selector-loader.js create mode 100644 libs/templates/region-selector/region-selector.css create mode 100644 libs/templates/region-selector/region-selector.js diff --git a/libs/blocks/region-selector-loader/region-selector-loader.css b/libs/blocks/region-selector-loader/region-selector-loader.css new file mode 100644 index 0000000000..fd0b284664 --- /dev/null +++ b/libs/blocks/region-selector-loader/region-selector-loader.css @@ -0,0 +1,3 @@ +/* +Common styles for the block region selector loader +*/ diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js new file mode 100644 index 0000000000..3ef8aa0fba --- /dev/null +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -0,0 +1,9 @@ +import { createTag, getConfig } from '../../utils/utils.js'; + +const init = () => { + const config = getConfig(); + const { contentRoot } = config.locale; + console.log(contentRoot); +} + +export default init; diff --git a/libs/templates/region-selector/region-selector.css b/libs/templates/region-selector/region-selector.css new file mode 100644 index 0000000000..5cfb31d70b --- /dev/null +++ b/libs/templates/region-selector/region-selector.css @@ -0,0 +1,3 @@ +main > .section > .content { + max-width: 100%; +} diff --git a/libs/templates/region-selector/region-selector.js b/libs/templates/region-selector/region-selector.js new file mode 100644 index 0000000000..b582cb6365 --- /dev/null +++ b/libs/templates/region-selector/region-selector.js @@ -0,0 +1 @@ +export default function init() {} diff --git a/tools/sidekick/config.js b/tools/sidekick/config.js index 9c0673bf3f..b4f3781b2b 100644 --- a/tools/sidekick/config.js +++ b/tools/sidekick/config.js @@ -108,17 +108,6 @@ function hasSchema(host) { }, }, }, - { - id: 'region-selector', - condition: (s) => s.isEditor(), - button: { - text: 'Region Selector', - action: (_, s) => { - const { config } = s; - console.log('Region Selector is on', config); - }, - }, - }, ], }); })(); diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json index 155c6c0e86..26de46830a 100644 --- a/tools/sidekick/config.json +++ b/tools/sidekick/config.json @@ -49,6 +49,15 @@ "url": "/tools/library", "includePaths": [ "**.docx**" ] }, + { + "id": "region-selector", + "title": "Region Selector", + "environments": [ "edit" ], + "isPalette": true, + "paletteRect": "top: auto; bottom: 20px; left: 20px; height: 500px; width: 800px;", + "url": "https://region-selector--milo--adobecom.hlx.page/tools/region-selector", + "includePaths": [ "**.docx**" ] + }, { "title": "Preflight", "id": "preflight", From 53786d47f5532128c0e2f4adc09396d4dc8cbf05 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Fri, 10 Mar 2023 03:21:50 -0700 Subject: [PATCH 03/28] wip --- .../region-selector-loader.js | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 3ef8aa0fba..0bab663adc 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -1,9 +1,22 @@ import { createTag, getConfig } from '../../utils/utils.js'; -const init = () => { - const config = getConfig(); - const { contentRoot } = config.locale; - console.log(contentRoot); +const LOC_CONFIG = 'https://main--milo--adobecom.hlx.page/drafts/localization/configs/config.json'; +const HELIX_ADMIN = 'https://admin.hlx.page'; + +const getLivecopies = async () => { + const livecopies = []; + const res = await fetch(LOC_CONFIG); + const json = await res.json(); + json.locales.data.forEach((d) => { + livecopies.push(...d.livecopies.split(',')); + }); + return livecopies; +}; + +const init = async () => { + const livecopies = getLivecopies(); + const { origin, pathname } = window.location; + console.log(origin, pathname); } export default init; From a4aa9fb7ead7d337e1c951d76370e51546b2172d Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Fri, 10 Mar 2023 04:12:15 -0700 Subject: [PATCH 04/28] for testing. --- tools/sidekick/config.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/tools/sidekick/config.js b/tools/sidekick/config.js index b4f3781b2b..0bc47fbeda 100644 --- a/tools/sidekick/config.js +++ b/tools/sidekick/config.js @@ -108,6 +108,20 @@ function hasSchema(host) { }, }, }, + { + id: 'region-selector', + condition: (s) => s.isEditor(), + button: { + text: 'Region Selector', + action: (_, s) => { + const { config } = s; + // Change this for local development + const domain = `https://${config.innerHost}`; + console.log(config); + console.log(s); + }, + }, + }, ], }); })(); From ae741c9fc56bf34b55bd96d7650c116d9ede2cf6 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Sat, 11 Mar 2023 07:49:16 -0700 Subject: [PATCH 05/28] For testing --- .../region-selector-loader.css | 4 ++ .../region-selector-loader.js | 63 +++++++++++++++++-- tools/sidekick/config.js | 14 ----- tools/sidekick/config.json | 5 +- 4 files changed, 65 insertions(+), 21 deletions(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.css b/libs/blocks/region-selector-loader/region-selector-loader.css index fd0b284664..149fc7db51 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.css +++ b/libs/blocks/region-selector-loader/region-selector-loader.css @@ -1,3 +1,7 @@ /* Common styles for the block region selector loader */ + +.region-selector-loader { + padding: 0 15px; +} diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 0bab663adc..1d3352f140 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -1,4 +1,4 @@ -import { createTag, getConfig } from '../../utils/utils.js'; +import { createTag } from '../../utils/utils.js'; const LOC_CONFIG = 'https://main--milo--adobecom.hlx.page/drafts/localization/configs/config.json'; const HELIX_ADMIN = 'https://admin.hlx.page'; @@ -13,10 +13,63 @@ const getLivecopies = async () => { return livecopies; }; -const init = async () => { - const livecopies = getLivecopies(); - const { origin, pathname } = window.location; - console.log(origin, pathname); +const getWebPath = async (owner, repo, referrer) => { + try { + const res = await fetch(`${HELIX_ADMIN}/status/${owner}/${repo}/ref?editUrl=${referrer}`); + const json = await res.json(); + return json.webPath; + } catch (e) { + return false; + } +} + +const getEditUrl = async (owner, repo, locale, path) => { + try { + const res = await fetch(`${HELIX_ADMIN}/status/${owner}/${repo}/main/${locale}/${path}?editUrl=auto`); + const json = await res.json(); + if (json.edit.status === 200) { + return json.edit.url; + } + return false; + } catch (e) { + return false; + } +} + +const init = async (el) => { + const livecopies = await getLivecopies(); + const { search } = window.location; + const params = new URLSearchParams(search); + const referrer = params.get('referrer'); + const owner = params.get('owner'); + const repo = params.get('repo'); + let currentPath = await getWebPath(owner, repo, referrer); + if (!currentPath) { + return; + } + const currentLocale = currentPath.split('/')[1]; + const index = livecopies.indexOf(currentLocale); + if (index > -1) { + livecopies.splice(index, 1); + // taking off the locale part. + currentPath = currentPath.substring(currentPath.indexOf(currentLocale) + currentLocale.length); + } + livecopies.forEach(async l => { + const editUrl = await getEditUrl(owner, repo, l, currentPath); + if (editUrl) { + const div = createTag('div', { class: 'sk-edit-link' }) + const link = createTag('a', { target: '_blank' }); + link.href = editUrl; + link.innerHTML = `${l ? `/${l}` : ''}${currentPath}`; + div.append(link); + el.querySelector('div div').append(div); + } + }); + if (!el.querySelector('.sk-edit-link')) { + const noLinkDiv = createTag('div', { class: 'sk-no-edit-link' }) + noLinkDiv.innerHTML = 'There is no other locale content.'; + el.append(noLinkDiv); + } } export default init; diff --git a/tools/sidekick/config.js b/tools/sidekick/config.js index 0bc47fbeda..b4f3781b2b 100644 --- a/tools/sidekick/config.js +++ b/tools/sidekick/config.js @@ -108,20 +108,6 @@ function hasSchema(host) { }, }, }, - { - id: 'region-selector', - condition: (s) => s.isEditor(), - button: { - text: 'Region Selector', - action: (_, s) => { - const { config } = s; - // Change this for local development - const domain = `https://${config.innerHost}`; - console.log(config); - console.log(s); - }, - }, - }, ], }); })(); diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json index 26de46830a..13a1c9139c 100644 --- a/tools/sidekick/config.json +++ b/tools/sidekick/config.json @@ -54,9 +54,10 @@ "title": "Region Selector", "environments": [ "edit" ], "isPalette": true, + "passConfig": true, + "passReferrer": true, "paletteRect": "top: auto; bottom: 20px; left: 20px; height: 500px; width: 800px;", - "url": "https://region-selector--milo--adobecom.hlx.page/tools/region-selector", - "includePaths": [ "**.docx**" ] + "url": "https://region-selector--milo--adobecom.hlx.page/tools/region-selector" }, { "title": "Preflight", From dd598c4917b3505562b27442861b3b7f8d780a44 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Sat, 11 Mar 2023 22:05:26 -0700 Subject: [PATCH 06/28] Fixing few stuff after testing. --- .../region-selector-loader.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 1d3352f140..8984c158a9 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -43,7 +43,8 @@ const init = async (el) => { const referrer = params.get('referrer'); const owner = params.get('owner'); const repo = params.get('repo'); - let currentPath = await getWebPath(owner, repo, referrer); + const currentPath = await getWebPath(owner, repo, referrer); + let currentPathWithOutLocale = currentPath; if (!currentPath) { return; } @@ -51,25 +52,24 @@ const init = async (el) => { const index = livecopies.indexOf(currentLocale); if (index > -1) { livecopies.splice(index, 1); - // taking off the locale part. - currentPath = currentPath.substring(currentPath.indexOf(currentLocale) + currentLocale.length); + currentPathWithOutLocale = currentPath.substring(currentPath.indexOf(currentLocale) + currentLocale.length); } + const editUrls = new Set(); livecopies.forEach(async l => { - const editUrl = await getEditUrl(owner, repo, l, currentPath); - if (editUrl) { + const editUrl = await getEditUrl(owner, repo, l, currentPathWithOutLocale); + if (editUrl && !editUrls.has(editUrl)) { + const previewUrl = `${l ? `/${l}` : ''}${currentPathWithOutLocale}`; + if(previewUrl === currentPath) return; + const div = createTag('div', { class: 'sk-edit-link' }) const link = createTag('a', { target: '_blank' }); link.href = editUrl; - link.innerHTML = `${l ? `/${l}` : ''}${currentPath}`; + link.innerHTML = previewUrl; div.append(link); el.querySelector('div div').append(div); + editUrls.add(editUrl); } }); - if (!el.querySelector('.sk-edit-link')) { - const noLinkDiv = createTag('div', { class: 'sk-no-edit-link' }) - noLinkDiv.innerHTML = 'There is no other locale content.'; - el.append(noLinkDiv); - } } export default init; From 98a289cb03d1cc8252026a7b736e30c2b0522958 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Sat, 11 Mar 2023 22:12:19 -0700 Subject: [PATCH 07/28] Adjust palette size, change div to ol --- .../region-selector-loader/region-selector-loader.js | 11 +++++++---- tools/sidekick/config.json | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 8984c158a9..6e09c7bf8d 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -55,21 +55,24 @@ const init = async (el) => { currentPathWithOutLocale = currentPath.substring(currentPath.indexOf(currentLocale) + currentLocale.length); } const editUrls = new Set(); + const ol = createTag('ol', { class: 'sk-edit-links' }); livecopies.forEach(async l => { const editUrl = await getEditUrl(owner, repo, l, currentPathWithOutLocale); if (editUrl && !editUrls.has(editUrl)) { const previewUrl = `${l ? `/${l}` : ''}${currentPathWithOutLocale}`; - if(previewUrl === currentPath) return; + + if (previewUrl === currentPath) return; - const div = createTag('div', { class: 'sk-edit-link' }) + const li = createTag('li', { class: 'sk-edit-link' }) const link = createTag('a', { target: '_blank' }); link.href = editUrl; link.innerHTML = previewUrl; - div.append(link); - el.querySelector('div div').append(div); + li.append(link); + ol.append(li); editUrls.add(editUrl); } }); + el.querySelector('div').append(ol); } export default init; diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json index 13a1c9139c..0cfe8000a7 100644 --- a/tools/sidekick/config.json +++ b/tools/sidekick/config.json @@ -56,7 +56,7 @@ "isPalette": true, "passConfig": true, "passReferrer": true, - "paletteRect": "top: auto; bottom: 20px; left: 20px; height: 500px; width: 800px;", + "paletteRect": "top: auto; bottom: 20px; left: 20px; height: 500px; width: 600px;", "url": "https://region-selector--milo--adobecom.hlx.page/tools/region-selector" }, { From 5df9d01094e8aecfa3be1e11397571a7f5be8f3b Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Sat, 11 Mar 2023 22:51:45 -0700 Subject: [PATCH 08/28] Sort the locale array alphabetically. --- libs/blocks/region-selector-loader/region-selector-loader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 6e09c7bf8d..02dc5d2de4 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -10,7 +10,7 @@ const getLivecopies = async () => { json.locales.data.forEach((d) => { livecopies.push(...d.livecopies.split(',')); }); - return livecopies; + return livecopies.sort(); }; const getWebPath = async (owner, repo, referrer) => { From 497f1f3575ac37d53794caab4b2bee8c151cdced Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Sat, 11 Mar 2023 23:49:48 -0700 Subject: [PATCH 09/28] nit: little refactoring. --- .../region-selector-loader/region-selector-loader.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 02dc5d2de4..e69f28060a 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -36,7 +36,7 @@ const getEditUrl = async (owner, repo, locale, path) => { } } -const init = async (el) => { +const decorateRegionLinks = async (block) => { const livecopies = await getLivecopies(); const { search } = window.location; const params = new URLSearchParams(search); @@ -44,6 +44,7 @@ const init = async (el) => { const owner = params.get('owner'); const repo = params.get('repo'); const currentPath = await getWebPath(owner, repo, referrer); + let currentPathWithOutLocale = currentPath; if (!currentPath) { return; @@ -54,6 +55,7 @@ const init = async (el) => { livecopies.splice(index, 1); currentPathWithOutLocale = currentPath.substring(currentPath.indexOf(currentLocale) + currentLocale.length); } + const editUrls = new Set(); const ol = createTag('ol', { class: 'sk-edit-links' }); livecopies.forEach(async l => { @@ -63,7 +65,7 @@ const init = async (el) => { if (previewUrl === currentPath) return; - const li = createTag('li', { class: 'sk-edit-link' }) + const li = createTag('li', { class: 'sk-edit-link', 'data-locale': l}); const link = createTag('a', { target: '_blank' }); link.href = editUrl; link.innerHTML = previewUrl; @@ -72,7 +74,11 @@ const init = async (el) => { editUrls.add(editUrl); } }); - el.querySelector('div').append(ol); + block.querySelector('div').append(ol); +}; + +const init = async (block) => { + await decorateRegionLinks(block); } export default init; From d4cecf2247350eb21e756c8782111a887b6adf93 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Sun, 12 Mar 2023 23:36:11 -0600 Subject: [PATCH 10/28] UI/UX update. --- .../region-selector-loader.css | 12 ++++++++++++ .../region-selector-loader.js | 16 ++++++++++++---- tools/sidekick/config.json | 3 ++- 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.css b/libs/blocks/region-selector-loader/region-selector-loader.css index 149fc7db51..b0d5accbf0 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.css +++ b/libs/blocks/region-selector-loader/region-selector-loader.css @@ -4,4 +4,16 @@ Common styles for the block region selector loader .region-selector-loader { padding: 0 15px; + background-color: #303030; + color: #fff; + font-family: 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif; +} + +.sk-region-select-item { + display: flex; + justify-content: space-between; +} + +.sk-region-select-item a { + color: #5fa0ff; } diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index e69f28060a..120944ccc0 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -43,6 +43,7 @@ const decorateRegionLinks = async (block) => { const referrer = params.get('referrer'); const owner = params.get('owner'); const repo = params.get('repo'); + const branch = params.get('ref'); const currentPath = await getWebPath(owner, repo, referrer); let currentPathWithOutLocale = currentPath; @@ -65,11 +66,18 @@ const decorateRegionLinks = async (block) => { if (previewUrl === currentPath) return; + const item = createTag('div', { class: 'sk-region-select-item' }); const li = createTag('li', { class: 'sk-edit-link', 'data-locale': l}); - const link = createTag('a', { target: '_blank' }); - link.href = editUrl; - link.innerHTML = previewUrl; - li.append(link); + const previewLink = createTag('a', { class: 'sk-preview-link', target: '_blank' }); + const editLink = createTag('a', { class: 'sk-edit-link', target: '_blank' }); + previewLink.href = `http://${branch}--${repo}--${owner}.hlx.page${previewUrl}`; + previewLink.innerHTML = previewUrl; + editLink.href = editUrl; + editLink.innerHTML = 'Edit'; + + item.append(previewLink); + item.append(editLink); + li.append(item); ol.append(li); editUrls.add(editUrl); } diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json index 0cfe8000a7..cfe6782a6d 100644 --- a/tools/sidekick/config.json +++ b/tools/sidekick/config.json @@ -57,7 +57,8 @@ "passConfig": true, "passReferrer": true, "paletteRect": "top: auto; bottom: 20px; left: 20px; height: 500px; width: 600px;", - "url": "https://region-selector--milo--adobecom.hlx.page/tools/region-selector" + "url": "https://region-selector--milo--adobecom.hlx.page/tools/region-selector", + "includePaths": [ "**.docx**" ] }, { "title": "Preflight", From ca0dd1b6d70194c488abbbb32e629c8ba0f95c9e Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Sun, 12 Mar 2023 23:41:08 -0600 Subject: [PATCH 11/28] remove white bg --- .../region-selector-loader/region-selector-loader.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.css b/libs/blocks/region-selector-loader/region-selector-loader.css index b0d5accbf0..ad860cef1e 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.css +++ b/libs/blocks/region-selector-loader/region-selector-loader.css @@ -7,6 +7,12 @@ Common styles for the block region selector loader background-color: #303030; color: #fff; font-family: 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif; + min-height: 500px; +} + +.region-selector-loader h2 { + margin: 0; + padding: 0.8em 0 0; } .sk-region-select-item { From 49797c825f6850a1cd2d9d9053d1ffa1ac89dafc Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Mon, 13 Mar 2023 04:50:02 -0600 Subject: [PATCH 12/28] Added guide line for each item --- .../region-selector-loader.css | 13 +++++++++++++ .../region-selector-loader.js | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.css b/libs/blocks/region-selector-loader/region-selector-loader.css index ad860cef1e..3d870a8430 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.css +++ b/libs/blocks/region-selector-loader/region-selector-loader.css @@ -15,11 +15,24 @@ Common styles for the block region selector loader padding: 0.8em 0 0; } +.region-selector-loader ol { + margin: 0; + padding: 1em; +} + .sk-region-select-item { display: flex; justify-content: space-between; } +.sk-edit-list { + border-bottom: 1px solid #888; +} + +.sk-edit-list:last-child { + border: none; +} + .sk-region-select-item a { color: #5fa0ff; } diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 120944ccc0..3e18907780 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -67,7 +67,7 @@ const decorateRegionLinks = async (block) => { if (previewUrl === currentPath) return; const item = createTag('div', { class: 'sk-region-select-item' }); - const li = createTag('li', { class: 'sk-edit-link', 'data-locale': l}); + const li = createTag('li', { class: 'sk-edit-list', 'data-locale': l}); const previewLink = createTag('a', { class: 'sk-preview-link', target: '_blank' }); const editLink = createTag('a', { class: 'sk-edit-link', target: '_blank' }); previewLink.href = `http://${branch}--${repo}--${owner}.hlx.page${previewUrl}`; From 8050153ae1e52d232b453eb24144aeeb2f677c68 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Mon, 13 Mar 2023 14:51:09 -0600 Subject: [PATCH 13/28] Fail condition added. --- libs/blocks/region-selector-loader/region-selector-loader.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 3e18907780..67c448cc2f 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -44,6 +44,9 @@ const decorateRegionLinks = async (block) => { const owner = params.get('owner'); const repo = params.get('repo'); const branch = params.get('ref'); + + if (!owner || !repo || !referrer) return; + const currentPath = await getWebPath(owner, repo, referrer); let currentPathWithOutLocale = currentPath; From 942dad8ec9b0bd0f34962102b0f1200fa55b8459 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Wed, 15 Mar 2023 09:40:10 -0600 Subject: [PATCH 14/28] Update libs/blocks/region-selector-loader/region-selector-loader.js Co-authored-by: Chris Peyer --- .../blocks/region-selector-loader/region-selector-loader.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 67c448cc2f..366a635fa0 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -30,10 +30,8 @@ const getEditUrl = async (owner, repo, locale, path) => { if (json.edit.status === 200) { return json.edit.url; } - return false; - } catch (e) { - return false; - } + } catch (e) { /* ignore */ } + return false; } const decorateRegionLinks = async (block) => { From 1460647b93490de6dfef9e164e756a86ca24e633 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Wed, 15 Mar 2023 09:47:05 -0600 Subject: [PATCH 15/28] Print result alphabetically. --- .../region-selector-loader.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 366a635fa0..932662731e 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -34,6 +34,17 @@ const getEditUrl = async (owner, repo, locale, path) => { return false; } +const insertAlphabetically = (ol, li) => { + const locale = li.getAttribute('data-locale'); + const items = [...ol.getElementsByTagName('li')]; + const insertBefore = items.find((item) => locale < item.getAttribute('data-locale')); + if (insertBefore) { + ol.insertBefore(li, insertBefore); + } else { + ol.append(li); + } +}; + const decorateRegionLinks = async (block) => { const livecopies = await getLivecopies(); const { search } = window.location; @@ -79,7 +90,7 @@ const decorateRegionLinks = async (block) => { item.append(previewLink); item.append(editLink); li.append(item); - ol.append(li); + insertAlphabetically(ol, li); editUrls.add(editUrl); } }); From 5b8a24ad3c74851ebe004af06f0afb5ed5699213 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Wed, 15 Mar 2023 09:51:39 -0600 Subject: [PATCH 16/28] nit: update getAttribute('data-locale') to dataset.locale --- libs/blocks/region-selector-loader/region-selector-loader.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 932662731e..6a50c35af3 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -35,9 +35,9 @@ const getEditUrl = async (owner, repo, locale, path) => { } const insertAlphabetically = (ol, li) => { - const locale = li.getAttribute('data-locale'); + const locale = li.dataset.locale; const items = [...ol.getElementsByTagName('li')]; - const insertBefore = items.find((item) => locale < item.getAttribute('data-locale')); + const insertBefore = items.find((item) => locale < item.dataset.locale); if (insertBefore) { ol.insertBefore(li, insertBefore); } else { From 5118f69c31dee40ee9f7b2602abe9f651dec61b8 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Wed, 15 Mar 2023 12:59:06 -0600 Subject: [PATCH 17/28] Color code added for un-previewed webPath. --- .../region-selector-loader.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 6a50c35af3..03b14f09d7 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -23,12 +23,13 @@ const getWebPath = async (owner, repo, referrer) => { } } -const getEditUrl = async (owner, repo, locale, path) => { +const getStatusFromHelixAdmin = async (owner, repo, locale, path) => { try { const res = await fetch(`${HELIX_ADMIN}/status/${owner}/${repo}/main/${locale}/${path}?editUrl=auto`); const json = await res.json(); if (json.edit.status === 200) { - return json.edit.url; + console.log(json); + return json; } } catch (e) { /* ignore */ } return false; @@ -52,7 +53,6 @@ const decorateRegionLinks = async (block) => { const referrer = params.get('referrer'); const owner = params.get('owner'); const repo = params.get('repo'); - const branch = params.get('ref'); if (!owner || !repo || !referrer) return; @@ -72,19 +72,19 @@ const decorateRegionLinks = async (block) => { const editUrls = new Set(); const ol = createTag('ol', { class: 'sk-edit-links' }); livecopies.forEach(async l => { - const editUrl = await getEditUrl(owner, repo, l, currentPathWithOutLocale); - if (editUrl && !editUrls.has(editUrl)) { - const previewUrl = `${l ? `/${l}` : ''}${currentPathWithOutLocale}`; - - if (previewUrl === currentPath) return; - + const adminStatus = await getStatusFromHelixAdmin(owner, repo, l, currentPathWithOutLocale); + if (adminStatus && !editUrls.has(adminStatus.edit.url)) { + if (adminStatus.webPath === currentPath) return; const item = createTag('div', { class: 'sk-region-select-item' }); const li = createTag('li', { class: 'sk-edit-list', 'data-locale': l}); const previewLink = createTag('a', { class: 'sk-preview-link', target: '_blank' }); const editLink = createTag('a', { class: 'sk-edit-link', target: '_blank' }); - previewLink.href = `http://${branch}--${repo}--${owner}.hlx.page${previewUrl}`; - previewLink.innerHTML = previewUrl; - editLink.href = editUrl; + previewLink.href = adminStatus.preview.url; + previewLink.innerHTML = adminStatus.webPath; + if (adminStatus.preview.status !== 200) { + previewLink.style.color = 'red'; + } + editLink.href = adminStatus.edit.url; editLink.innerHTML = 'Edit'; item.append(previewLink); From 17b6a277389d7e31dba74a473f1dbcdd808d3ead Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Wed, 15 Mar 2023 14:18:29 -0600 Subject: [PATCH 18/28] Updated style as Rikkio and Ryan agreed. --- .../region-selector-loader.css | 30 ++++++++++++++-- .../region-selector-loader.js | 34 +++++++++++-------- 2 files changed, 48 insertions(+), 16 deletions(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.css b/libs/blocks/region-selector-loader/region-selector-loader.css index 3d870a8430..3d162ffcaf 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.css +++ b/libs/blocks/region-selector-loader/region-selector-loader.css @@ -15,7 +15,7 @@ Common styles for the block region selector loader padding: 0.8em 0 0; } -.region-selector-loader ol { +.region-selector-loader ul { margin: 0; padding: 1em; } @@ -27,12 +27,38 @@ Common styles for the block region selector loader .sk-edit-list { border-bottom: 1px solid #888; + list-style: none; } .sk-edit-list:last-child { border: none; } -.sk-region-select-item a { +.icon-checkmark, +.sk-preview-link.previewed, +.sk-edit-link { color: #5fa0ff; } + +.icon-checkmark { + position: relative; + left: -18px; +} + +.sk-preview-link { + color: #999; +} + +.sk-preview-link:hover { + text-decoration: none; + color: #999; +} + +.sk-preview-link.previewed { + position: relative; + left: -18px; +} + +.sk-preview-link.previewed:hover { + color: var(--link-hover-color); +} diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index 03b14f09d7..ee83db2dd5 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -28,27 +28,28 @@ const getStatusFromHelixAdmin = async (owner, repo, locale, path) => { const res = await fetch(`${HELIX_ADMIN}/status/${owner}/${repo}/main/${locale}/${path}?editUrl=auto`); const json = await res.json(); if (json.edit.status === 200) { - console.log(json); return json; } } catch (e) { /* ignore */ } return false; } -const insertAlphabetically = (ol, li) => { +const insertAlphabetically = (ul, li) => { const locale = li.dataset.locale; - const items = [...ol.getElementsByTagName('li')]; + const items = [...ul.getElementsByTagName('li')]; const insertBefore = items.find((item) => locale < item.dataset.locale); if (insertBefore) { - ol.insertBefore(li, insertBefore); + ul.insertBefore(li, insertBefore); } else { - ol.append(li); + ul.append(li); } }; const decorateRegionLinks = async (block) => { const livecopies = await getLivecopies(); - const { search } = window.location; + // const { search } = window.location; + // const search = '?ref=main&repo=bacom&owner=adobecom&host=milo.adobe.com&project=Milo&referrer=https%3A%2F%2Fadobe.sharepoint.com%2F%3Aw%3A%2Fr%2Fsites%2Fadobecom%2F_layouts%2F15%2FDoc.aspx%3Fsourcedoc%3D%257B1C8CDBDF-F5BD-4AA2-B18E-D2488AC04131%257D%26file%3Dcustomer-success-stories.docx%26action%3Ddefault%26mobileredirect%3Dtrue'; + const search = '?ref=main&repo=milo&owner=adobecom&host=milo.adobe.com&project=Milo&referrer=https%3A%2F%2Fadobe.sharepoint.com%2F%3Aw%3A%2Fr%2Fsites%2Fadobecom%2F_layouts%2F15%2FDoc.aspx%3Fsourcedoc%3D%257B664D4A7F-CD90-4B72-80FD-428FBB7D66EB%257D%26cid%3D2d780159-195c-4f7d-9b8b-22008fc1d64b'; const params = new URLSearchParams(search); const referrer = params.get('referrer'); const owner = params.get('owner'); @@ -70,31 +71,36 @@ const decorateRegionLinks = async (block) => { } const editUrls = new Set(); - const ol = createTag('ol', { class: 'sk-edit-links' }); + const ul = createTag('ul', { class: 'sk-edit-links' }); livecopies.forEach(async l => { const adminStatus = await getStatusFromHelixAdmin(owner, repo, l, currentPathWithOutLocale); if (adminStatus && !editUrls.has(adminStatus.edit.url)) { if (adminStatus.webPath === currentPath) return; const item = createTag('div', { class: 'sk-region-select-item' }); const li = createTag('li', { class: 'sk-edit-list', 'data-locale': l}); + const previewContainer = createTag('div', { class: 'sk-preview-container' }); const previewLink = createTag('a', { class: 'sk-preview-link', target: '_blank' }); const editLink = createTag('a', { class: 'sk-edit-link', target: '_blank' }); - previewLink.href = adminStatus.preview.url; previewLink.innerHTML = adminStatus.webPath; - if (adminStatus.preview.status !== 200) { - previewLink.style.color = 'red'; + if (adminStatus.preview.status === 200) { + previewLink.classList.add('previewed'); + previewLink.href = adminStatus.preview.url; + const checkmark = createTag('span', { class: 'icon icon-checkmark'}); + checkmark.innerHTML = ``; + previewContainer.append(checkmark); } editLink.href = adminStatus.edit.url; editLink.innerHTML = 'Edit'; - item.append(previewLink); + previewContainer.append(previewLink); + item.append(previewContainer); item.append(editLink); li.append(item); - insertAlphabetically(ol, li); - editUrls.add(editUrl); + insertAlphabetically(ul, li); + editUrls.add(adminStatus.edit.url); } }); - block.querySelector('div').append(ol); + block.querySelector('div').append(ul); }; const init = async (block) => { From 2d5dfe15ddcc685109718d9df07bf3643ba79acc Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Wed, 15 Mar 2023 14:19:00 -0600 Subject: [PATCH 19/28] Taking off the test code. --- libs/blocks/region-selector-loader/region-selector-loader.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index ee83db2dd5..a4326583cc 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -47,9 +47,7 @@ const insertAlphabetically = (ul, li) => { const decorateRegionLinks = async (block) => { const livecopies = await getLivecopies(); - // const { search } = window.location; - // const search = '?ref=main&repo=bacom&owner=adobecom&host=milo.adobe.com&project=Milo&referrer=https%3A%2F%2Fadobe.sharepoint.com%2F%3Aw%3A%2Fr%2Fsites%2Fadobecom%2F_layouts%2F15%2FDoc.aspx%3Fsourcedoc%3D%257B1C8CDBDF-F5BD-4AA2-B18E-D2488AC04131%257D%26file%3Dcustomer-success-stories.docx%26action%3Ddefault%26mobileredirect%3Dtrue'; - const search = '?ref=main&repo=milo&owner=adobecom&host=milo.adobe.com&project=Milo&referrer=https%3A%2F%2Fadobe.sharepoint.com%2F%3Aw%3A%2Fr%2Fsites%2Fadobecom%2F_layouts%2F15%2FDoc.aspx%3Fsourcedoc%3D%257B664D4A7F-CD90-4B72-80FD-428FBB7D66EB%257D%26cid%3D2d780159-195c-4f7d-9b8b-22008fc1d64b'; + const { search } = window.location; const params = new URLSearchParams(search); const referrer = params.get('referrer'); const owner = params.get('owner'); From 8b6f20d26f68075bc15372082ac23bd3dcde2c48 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Thu, 16 Mar 2023 14:03:18 -0600 Subject: [PATCH 20/28] UI/UX update and enabling it on pages as well. --- .../img/Adobe_Experience_Cloud_logo_RGB.svg | 1 + .../region-selector-loader/img/word-icon.svg | 50 ++++++++ .../region-selector-loader.css | 63 ++++------ .../region-selector-loader.js | 117 +++++++++++++----- tools/sidekick/config.json | 20 +-- 5 files changed, 171 insertions(+), 80 deletions(-) create mode 100644 libs/blocks/region-selector-loader/img/Adobe_Experience_Cloud_logo_RGB.svg create mode 100644 libs/blocks/region-selector-loader/img/word-icon.svg diff --git a/libs/blocks/region-selector-loader/img/Adobe_Experience_Cloud_logo_RGB.svg b/libs/blocks/region-selector-loader/img/Adobe_Experience_Cloud_logo_RGB.svg new file mode 100644 index 0000000000..c952af6c62 --- /dev/null +++ b/libs/blocks/region-selector-loader/img/Adobe_Experience_Cloud_logo_RGB.svg @@ -0,0 +1 @@ +ec_appicon_noshadowArtboard 1 \ No newline at end of file diff --git a/libs/blocks/region-selector-loader/img/word-icon.svg b/libs/blocks/region-selector-loader/img/word-icon.svg new file mode 100644 index 0000000000..2060f52895 --- /dev/null +++ b/libs/blocks/region-selector-loader/img/word-icon.svg @@ -0,0 +1,50 @@ + + + + + + + + + + +]> + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/blocks/region-selector-loader/region-selector-loader.css b/libs/blocks/region-selector-loader/region-selector-loader.css index 3d162ffcaf..6d523b84ea 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.css +++ b/libs/blocks/region-selector-loader/region-selector-loader.css @@ -3,62 +3,51 @@ Common styles for the block region selector loader */ .region-selector-loader { - padding: 0 15px; background-color: #303030; color: #fff; font-family: 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif; - min-height: 500px; + min-height: 398px; } -.region-selector-loader h2 { - margin: 0; - padding: 0.8em 0 0; +img.icon { + width: 35px; } -.region-selector-loader ul { - margin: 0; - padding: 1em; +a.disabled { + filter: grayscale(100%); } -.sk-region-select-item { +.sk-header { display: flex; justify-content: space-between; + align-items: end; + margin-bottom: 1.5rem; + padding: 0 15px; } -.sk-edit-list { - border-bottom: 1px solid #888; - list-style: none; -} - -.sk-edit-list:last-child { - border: none; -} - -.icon-checkmark, -.sk-preview-link.previewed, -.sk-edit-link { - color: #5fa0ff; -} - -.icon-checkmark { - position: relative; - left: -18px; +.right-headings { + display: flex; + gap: 20px; + font-weight: bolder; } -.sk-preview-link { - color: #999; +.region-selector-loader h2 { + margin: 0; + padding: 0.8em 0 0; } -.sk-preview-link:hover { - text-decoration: none; - color: #999; +.sk-region-select-item-container { + padding: 15px; + background-color: #353535; } -.sk-preview-link.previewed { - position: relative; - left: -18px; +.sk-region-select-item { + display: flex; + justify-content: space-between; + align-items: center; } -.sk-preview-link.previewed:hover { - color: var(--link-hover-color); +.sk-link-container { + display: flex; + gap: 38.5px; } diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/region-selector-loader/region-selector-loader.js index a4326583cc..aa9f4e0043 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/region-selector-loader/region-selector-loader.js @@ -2,6 +2,8 @@ import { createTag } from '../../utils/utils.js'; const LOC_CONFIG = 'https://main--milo--adobecom.hlx.page/drafts/localization/configs/config.json'; const HELIX_ADMIN = 'https://admin.hlx.page'; +const ADOBE_ICON = ''; +const WORD_ICON = ''; const getLivecopies = async () => { const livecopies = []; @@ -26,22 +28,21 @@ const getWebPath = async (owner, repo, referrer) => { const getStatusFromHelixAdmin = async (owner, repo, locale, path) => { try { const res = await fetch(`${HELIX_ADMIN}/status/${owner}/${repo}/main/${locale}/${path}?editUrl=auto`); + if (!res.ok) return false; const json = await res.json(); - if (json.edit.status === 200) { - return json; - } + return json; } catch (e) { /* ignore */ } return false; } -const insertAlphabetically = (ul, li) => { - const locale = li.dataset.locale; - const items = [...ul.getElementsByTagName('li')]; +const insertAlphabetically = (containerParent, itemContainer) => { + const locale = itemContainer.dataset.locale; + const items = [...containerParent.querySelectorAll('.sk-region-select-item-container')]; const insertBefore = items.find((item) => locale < item.dataset.locale); if (insertBefore) { - ul.insertBefore(li, insertBefore); + containerParent.insertBefore(itemContainer, insertBefore); } else { - ul.append(li); + containerParent.append(itemContainer); } }; @@ -55,8 +56,13 @@ const decorateRegionLinks = async (block) => { if (!owner || !repo || !referrer) return; - const currentPath = await getWebPath(owner, repo, referrer); - + let currentPath; + if (referrer.includes('google.com') || referrer.includes('sharepoint.com')) { + currentPath = await getWebPath(owner, repo, referrer); + } else { + currentPath = new URL(referrer).pathname; + } + let currentPathWithOutLocale = currentPath; if (!currentPath) { return; @@ -64,44 +70,89 @@ const decorateRegionLinks = async (block) => { const currentLocale = currentPath.split('/')[1]; const index = livecopies.indexOf(currentLocale); if (index > -1) { - livecopies.splice(index, 1); currentPathWithOutLocale = currentPath.substring(currentPath.indexOf(currentLocale) + currentLocale.length); } const editUrls = new Set(); - const ul = createTag('ul', { class: 'sk-edit-links' }); - livecopies.forEach(async l => { - const adminStatus = await getStatusFromHelixAdmin(owner, repo, l, currentPathWithOutLocale); - if (adminStatus && !editUrls.has(adminStatus.edit.url)) { - if (adminStatus.webPath === currentPath) return; + const containerParent = createTag('div', { class: 'sk-region-select-item-containers' }); + livecopies.forEach(async loc => { + const adminStatus = await getStatusFromHelixAdmin(owner, repo, loc, currentPathWithOutLocale); + if (!editUrls.has(adminStatus.edit.url)) { + const itemContainer = createTag('div', { class: 'sk-region-select-item-container', 'data-locale': loc}); const item = createTag('div', { class: 'sk-region-select-item' }); - const li = createTag('li', { class: 'sk-edit-list', 'data-locale': l}); - const previewContainer = createTag('div', { class: 'sk-preview-container' }); - const previewLink = createTag('a', { class: 'sk-preview-link', target: '_blank' }); - const editLink = createTag('a', { class: 'sk-edit-link', target: '_blank' }); - previewLink.innerHTML = adminStatus.webPath; + + const localeText = createTag('div', { class: 'localeText' }); + localeText.innerHTML = loc || 'en_us'; + + const linkContainer = createTag('div', { class: 'sk-link-container' }); + const editLink = createTag('a', { class: 'sk-edit-link disabled', target: '_blank' }); + const previewLink = createTag('a', { class: 'sk-preview-link disabled', target: '_blank' }); + const liveLink = createTag('a', { class: 'sk-live-link disabled', target: '_blank' }); + + editLink.innerHTML = WORD_ICON; + previewLink.innerHTML = ADOBE_ICON; + liveLink.innerHTML = ADOBE_ICON; + + if (adminStatus.edit.status === 200) { + editLink.classList.remove('disabled'); + editLink.href = adminStatus.edit.url; + } + if (adminStatus.preview.status === 200) { - previewLink.classList.add('previewed'); + previewLink.classList.remove('disabled'); previewLink.href = adminStatus.preview.url; - const checkmark = createTag('span', { class: 'icon icon-checkmark'}); - checkmark.innerHTML = ``; - previewContainer.append(checkmark); } - editLink.href = adminStatus.edit.url; - editLink.innerHTML = 'Edit'; - previewContainer.append(previewLink); - item.append(previewContainer); - item.append(editLink); - li.append(item); - insertAlphabetically(ul, li); + if (adminStatus.live.status === 200) { + liveLink.classList.remove('disabled'); + liveLink.href = adminStatus.live.url; + } + + linkContainer.append(editLink, previewLink, liveLink); + item.append(localeText, linkContainer); + itemContainer.append(item); + + if (adminStatus.webPath === currentPath) { + const origin = document.referrer; + console.log(origin); + if (origin.includes('google.com') || origin.includes('sharepoint.com')) { + editLink.style.opacity = 0; + editLink.removeAttribute('href'); + } else if(origin.includes('hlx.page')) { + previewLink.style.opacity = 0; + previewLink.removeAttribute('href'); + } else { + liveLink.style.opacity = 0; + liveLink.removeAttribute('href'); + } + itemContainer.classList.add('current'); + const localeHeader = block.querySelector('.locale-header'); + localeHeader.parentElement.insertBefore(itemContainer, localeHeader); + } else { + insertAlphabetically(containerParent, itemContainer); + } editUrls.add(adminStatus.edit.url); } }); - block.querySelector('div').append(ul); + block.querySelector('div').append(containerParent); }; +const decorateHeader = (block) => { + const headingParent = block.querySelector('h1, h2, h3')?.parentElement; + headingParent.classList.add('sk-header'); + const rightHeading = createTag('div', { class: 'right-headings' }); + rightHeading.innerHTML = '
EDIT
PREVIEW
LIVE
'; + headingParent.append(rightHeading); + + const localeHeader = createTag('div', { class: 'sk-header locale-header' }); + const localeHeading = createTag('h2'); + localeHeading.innerHTML = 'LOCALES'; + localeHeader.append(localeHeading); + headingParent.parentElement.append(localeHeader); +} + const init = async (block) => { + decorateHeader(block); await decorateRegionLinks(block); } diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json index cfe6782a6d..a2e8d90e17 100644 --- a/tools/sidekick/config.json +++ b/tools/sidekick/config.json @@ -50,21 +50,21 @@ "includePaths": [ "**.docx**" ] }, { - "id": "region-selector", - "title": "Region Selector", - "environments": [ "edit" ], + "title": "Preflight", + "id": "preflight", + "environments": ["dev", "preview", "live"], + "event": "preflight" + }, + { + "id": "regions", + "title": "Regions", + "environments": [ "edit", "dev", "preview", "live", "prod" ], "isPalette": true, "passConfig": true, "passReferrer": true, - "paletteRect": "top: auto; bottom: 20px; left: 20px; height: 500px; width: 600px;", + "paletteRect": "top: auto; bottom: 20px; left: 20px; height: 398px; width: 360px;", "url": "https://region-selector--milo--adobecom.hlx.page/tools/region-selector", "includePaths": [ "**.docx**" ] - }, - { - "title": "Preflight", - "id": "preflight", - "environments": ["dev", "preview", "live"], - "event": "preflight" } ] } From 0c380dbd74dfd180f2430793057311d166c897aa Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Thu, 16 Mar 2023 15:29:22 -0600 Subject: [PATCH 21/28] Renaming the block --- .../region-selector-loader.css | 53 ----------- .../img/Adobe_Experience_Cloud_logo_RGB.svg | 0 .../img/word-icon.svg | 0 libs/blocks/regions-loader/regions-loader.css | 91 +++++++++++++++++++ .../regions-loader.js} | 18 +++- tools/sidekick/config.json | 2 +- 6 files changed, 105 insertions(+), 59 deletions(-) delete mode 100644 libs/blocks/region-selector-loader/region-selector-loader.css rename libs/blocks/{region-selector-loader => regions-loader}/img/Adobe_Experience_Cloud_logo_RGB.svg (100%) rename libs/blocks/{region-selector-loader => regions-loader}/img/word-icon.svg (100%) create mode 100644 libs/blocks/regions-loader/regions-loader.css rename libs/blocks/{region-selector-loader/region-selector-loader.js => regions-loader/regions-loader.js} (85%) diff --git a/libs/blocks/region-selector-loader/region-selector-loader.css b/libs/blocks/region-selector-loader/region-selector-loader.css deleted file mode 100644 index 6d523b84ea..0000000000 --- a/libs/blocks/region-selector-loader/region-selector-loader.css +++ /dev/null @@ -1,53 +0,0 @@ -/* -Common styles for the block region selector loader -*/ - -.region-selector-loader { - background-color: #303030; - color: #fff; - font-family: 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif; - min-height: 398px; -} - -img.icon { - width: 35px; -} - -a.disabled { - filter: grayscale(100%); -} - -.sk-header { - display: flex; - justify-content: space-between; - align-items: end; - margin-bottom: 1.5rem; - padding: 0 15px; -} - -.right-headings { - display: flex; - gap: 20px; - font-weight: bolder; -} - -.region-selector-loader h2 { - margin: 0; - padding: 0.8em 0 0; -} - -.sk-region-select-item-container { - padding: 15px; - background-color: #353535; -} - -.sk-region-select-item { - display: flex; - justify-content: space-between; - align-items: center; -} - -.sk-link-container { - display: flex; - gap: 38.5px; -} diff --git a/libs/blocks/region-selector-loader/img/Adobe_Experience_Cloud_logo_RGB.svg b/libs/blocks/regions-loader/img/Adobe_Experience_Cloud_logo_RGB.svg similarity index 100% rename from libs/blocks/region-selector-loader/img/Adobe_Experience_Cloud_logo_RGB.svg rename to libs/blocks/regions-loader/img/Adobe_Experience_Cloud_logo_RGB.svg diff --git a/libs/blocks/region-selector-loader/img/word-icon.svg b/libs/blocks/regions-loader/img/word-icon.svg similarity index 100% rename from libs/blocks/region-selector-loader/img/word-icon.svg rename to libs/blocks/regions-loader/img/word-icon.svg diff --git a/libs/blocks/regions-loader/regions-loader.css b/libs/blocks/regions-loader/regions-loader.css new file mode 100644 index 0000000000..f82c5b1f45 --- /dev/null +++ b/libs/blocks/regions-loader/regions-loader.css @@ -0,0 +1,91 @@ +/* +Common styles for the block region selector loader +*/ + +.regions-loader { + background-color: #303030; + color: #fff; + font-family: 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif; + min-height: 398px; + font-size: 1rem; +} + +img.icon { + width: 35px; + height: 35px; +} + +a.disabled { + filter: grayscale(100%); +} + +.sk-header { + display: flex; + justify-content: space-between; + align-items: end; + padding: 1.5rem 15px; +} + +.right-headings { + display: flex; + gap: 20px; + font-weight: bolder; +} + +.locale-header { + position: relative; + align-items: center; +} + +.locale-header::after { + position: absolute; + content: ''; + background: url('../../ui/img/spectrum-search.svg') no-repeat; + width: 16px; + height: 16px; + right: 22px; + top: calc(50% - 8px); + opacity: 0.6; +} + +.sk-regions-search { + width: 137px; + background: rgb(0 0 0 / 100%); + color: #FFF; + font-family: inherit; + font-size: 14px; + border: none; + height: 26px; + padding: 0 35px 0 10px; + border-top: 1px solid rgba(100 100 100 / 20%); + border-bottom: 1px solid rgba(100 100 100 / 20%); +} + +.regions-loader h2 { + margin: 0; +} + +.sk-region-select-item-container { + padding: 15px; + background-color: #353535; +} + +.sk-region-select-item { + display: flex; + justify-content: space-between; + align-items: center; +} + +.sk-link-container { + display: flex; + align-items: center; + gap: 31.5px; +} + +.locale-text { + font-size: 1.5rem; +} + +.sk-link-container a { + line-height: 0; +} diff --git a/libs/blocks/region-selector-loader/region-selector-loader.js b/libs/blocks/regions-loader/regions-loader.js similarity index 85% rename from libs/blocks/region-selector-loader/region-selector-loader.js rename to libs/blocks/regions-loader/regions-loader.js index aa9f4e0043..7c58bc7bd4 100644 --- a/libs/blocks/region-selector-loader/region-selector-loader.js +++ b/libs/blocks/regions-loader/regions-loader.js @@ -2,8 +2,8 @@ import { createTag } from '../../utils/utils.js'; const LOC_CONFIG = 'https://main--milo--adobecom.hlx.page/drafts/localization/configs/config.json'; const HELIX_ADMIN = 'https://admin.hlx.page'; -const ADOBE_ICON = ''; -const WORD_ICON = ''; +const ADOBE_ICON = ''; +const WORD_ICON = ''; const getLivecopies = async () => { const livecopies = []; @@ -48,7 +48,9 @@ const insertAlphabetically = (containerParent, itemContainer) => { const decorateRegionLinks = async (block) => { const livecopies = await getLivecopies(); - const { search } = window.location; + // const { search } = window.location; + let search = '?ref=main&repo=milo&owner=adobecom&host=milo.adobe.com&project=Milo&referrer=https%3A%2F%2Fmain--milo--adobecom.hlx.page%2Fae_en%2Fdrafts%2Fcmillar%2Fabout-adobe-demo-jingle'; + // search = `?ref=main&repo=bacom&owner=adobecom&referrer=https://adobe.sharepoint.com/:w:/r/sites/adobecom/_layouts/15/Doc.aspx?sourcedoc=%7BEC9ED2CF-7532-43C6-B9B2-608CBCF524E7%7D&cid=c8cdcb33-9caa-41ce-bc09-d96e87f215b7`; const params = new URLSearchParams(search); const referrer = params.get('referrer'); const owner = params.get('owner'); @@ -81,7 +83,7 @@ const decorateRegionLinks = async (block) => { const itemContainer = createTag('div', { class: 'sk-region-select-item-container', 'data-locale': loc}); const item = createTag('div', { class: 'sk-region-select-item' }); - const localeText = createTag('div', { class: 'localeText' }); + const localeText = createTag('div', { class: 'locale-text' }); localeText.innerHTML = loc || 'en_us'; const linkContainer = createTag('div', { class: 'sk-link-container' }); @@ -114,7 +116,6 @@ const decorateRegionLinks = async (block) => { if (adminStatus.webPath === currentPath) { const origin = document.referrer; - console.log(origin); if (origin.includes('google.com') || origin.includes('sharepoint.com')) { editLink.style.opacity = 0; editLink.removeAttribute('href'); @@ -137,6 +138,10 @@ const decorateRegionLinks = async (block) => { block.querySelector('div').append(containerParent); }; +const searchEvent = (e) => { + +} + const decorateHeader = (block) => { const headingParent = block.querySelector('h1, h2, h3')?.parentElement; headingParent.classList.add('sk-header'); @@ -146,8 +151,11 @@ const decorateHeader = (block) => { const localeHeader = createTag('div', { class: 'sk-header locale-header' }); const localeHeading = createTag('h2'); + const searchInput = createTag('input',{ class: 'sk-regions-search', placeholder: 'Search...' }); + searchInput.addEventListener('keyup', searchEvent); localeHeading.innerHTML = 'LOCALES'; localeHeader.append(localeHeading); + // localeHeader.append(searchInput); headingParent.parentElement.append(localeHeader); } diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json index a2e8d90e17..9625ad1ae4 100644 --- a/tools/sidekick/config.json +++ b/tools/sidekick/config.json @@ -63,7 +63,7 @@ "passConfig": true, "passReferrer": true, "paletteRect": "top: auto; bottom: 20px; left: 20px; height: 398px; width: 360px;", - "url": "https://region-selector--milo--adobecom.hlx.page/tools/region-selector", + "url": "https://region-selector--milo--adobecom.hlx.page/tools/regions-loader", "includePaths": [ "**.docx**" ] } ] From 58981d6bef3e4e66a316ba1890eb3af7682a2db3 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Thu, 16 Mar 2023 16:31:55 -0600 Subject: [PATCH 22/28] Taking off the test urls --- libs/blocks/regions-loader/regions-loader.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/libs/blocks/regions-loader/regions-loader.js b/libs/blocks/regions-loader/regions-loader.js index 7c58bc7bd4..3032e4c38a 100644 --- a/libs/blocks/regions-loader/regions-loader.js +++ b/libs/blocks/regions-loader/regions-loader.js @@ -48,9 +48,7 @@ const insertAlphabetically = (containerParent, itemContainer) => { const decorateRegionLinks = async (block) => { const livecopies = await getLivecopies(); - // const { search } = window.location; - let search = '?ref=main&repo=milo&owner=adobecom&host=milo.adobe.com&project=Milo&referrer=https%3A%2F%2Fmain--milo--adobecom.hlx.page%2Fae_en%2Fdrafts%2Fcmillar%2Fabout-adobe-demo-jingle'; - // search = `?ref=main&repo=bacom&owner=adobecom&referrer=https://adobe.sharepoint.com/:w:/r/sites/adobecom/_layouts/15/Doc.aspx?sourcedoc=%7BEC9ED2CF-7532-43C6-B9B2-608CBCF524E7%7D&cid=c8cdcb33-9caa-41ce-bc09-d96e87f215b7`; + const { search } = window.location; const params = new URLSearchParams(search); const referrer = params.get('referrer'); const owner = params.get('owner'); From 1cfe3b88889a28e4cbf8de35de06997975ff66b6 Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Thu, 16 Mar 2023 16:53:01 -0600 Subject: [PATCH 23/28] Added search. --- libs/blocks/regions-loader/regions-loader.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/libs/blocks/regions-loader/regions-loader.js b/libs/blocks/regions-loader/regions-loader.js index 3032e4c38a..ac1ded7b24 100644 --- a/libs/blocks/regions-loader/regions-loader.js +++ b/libs/blocks/regions-loader/regions-loader.js @@ -137,7 +137,15 @@ const decorateRegionLinks = async (block) => { }; const searchEvent = (e) => { - + const search = regionsSearch.value; + const subjects = document.querySelectorAll('.sk-region-select-item-containers .sk-region-select-item-container'); + subjects.forEach(subject => { + if (subject.textContent.includes(search)) { + subject.style.display = 'block'; + } else { + subject.style.display = 'none'; + } + }); } const decorateHeader = (block) => { @@ -149,11 +157,11 @@ const decorateHeader = (block) => { const localeHeader = createTag('div', { class: 'sk-header locale-header' }); const localeHeading = createTag('h2'); - const searchInput = createTag('input',{ class: 'sk-regions-search', placeholder: 'Search...' }); + const searchInput = createTag('input',{ id: 'regionsSearch', class: 'sk-regions-search', placeholder: 'Search...' }); searchInput.addEventListener('keyup', searchEvent); localeHeading.innerHTML = 'LOCALES'; localeHeader.append(localeHeading); - // localeHeader.append(searchInput); + localeHeader.append(searchInput); headingParent.parentElement.append(localeHeader); } From b4fff8aeb2806437a53a0f66225d446311ed90ca Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Thu, 16 Mar 2023 17:00:24 -0600 Subject: [PATCH 24/28] Matching the search bar size as icons. --- libs/blocks/regions-loader/regions-loader.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/regions-loader/regions-loader.css b/libs/blocks/regions-loader/regions-loader.css index f82c5b1f45..c86cb9f2ce 100644 --- a/libs/blocks/regions-loader/regions-loader.css +++ b/libs/blocks/regions-loader/regions-loader.css @@ -49,7 +49,7 @@ a.disabled { } .sk-regions-search { - width: 137px; + width: 123px; background: rgb(0 0 0 / 100%); color: #FFF; font-family: inherit; From b7b29bfb360afa4afb98422d0495c529ce6bacab Mon Sep 17 00:00:00 2001 From: Sean Choi Date: Thu, 16 Mar 2023 17:08:00 -0600 Subject: [PATCH 25/28] Fixed the set logic. --- libs/blocks/regions-loader/regions-loader.js | 97 ++++++++++---------- 1 file changed, 47 insertions(+), 50 deletions(-) diff --git a/libs/blocks/regions-loader/regions-loader.js b/libs/blocks/regions-loader/regions-loader.js index ac1ded7b24..5639698837 100644 --- a/libs/blocks/regions-loader/regions-loader.js +++ b/libs/blocks/regions-loader/regions-loader.js @@ -73,64 +73,61 @@ const decorateRegionLinks = async (block) => { currentPathWithOutLocale = currentPath.substring(currentPath.indexOf(currentLocale) + currentLocale.length); } - const editUrls = new Set(); + const locales = new Set(livecopies); const containerParent = createTag('div', { class: 'sk-region-select-item-containers' }); - livecopies.forEach(async loc => { + locales.forEach(async loc => { const adminStatus = await getStatusFromHelixAdmin(owner, repo, loc, currentPathWithOutLocale); - if (!editUrls.has(adminStatus.edit.url)) { - const itemContainer = createTag('div', { class: 'sk-region-select-item-container', 'data-locale': loc}); - const item = createTag('div', { class: 'sk-region-select-item' }); + const itemContainer = createTag('div', { class: 'sk-region-select-item-container', 'data-locale': loc}); + const item = createTag('div', { class: 'sk-region-select-item' }); - const localeText = createTag('div', { class: 'locale-text' }); - localeText.innerHTML = loc || 'en_us'; + const localeText = createTag('div', { class: 'locale-text' }); + localeText.innerHTML = loc || 'en_us'; - const linkContainer = createTag('div', { class: 'sk-link-container' }); - const editLink = createTag('a', { class: 'sk-edit-link disabled', target: '_blank' }); - const previewLink = createTag('a', { class: 'sk-preview-link disabled', target: '_blank' }); - const liveLink = createTag('a', { class: 'sk-live-link disabled', target: '_blank' }); - - editLink.innerHTML = WORD_ICON; - previewLink.innerHTML = ADOBE_ICON; - liveLink.innerHTML = ADOBE_ICON; - - if (adminStatus.edit.status === 200) { - editLink.classList.remove('disabled'); - editLink.href = adminStatus.edit.url; - } - - if (adminStatus.preview.status === 200) { - previewLink.classList.remove('disabled'); - previewLink.href = adminStatus.preview.url; - } + const linkContainer = createTag('div', { class: 'sk-link-container' }); + const editLink = createTag('a', { class: 'sk-edit-link disabled', target: '_blank' }); + const previewLink = createTag('a', { class: 'sk-preview-link disabled', target: '_blank' }); + const liveLink = createTag('a', { class: 'sk-live-link disabled', target: '_blank' }); + + editLink.innerHTML = WORD_ICON; + previewLink.innerHTML = ADOBE_ICON; + liveLink.innerHTML = ADOBE_ICON; + + if (adminStatus.edit.status === 200) { + editLink.classList.remove('disabled'); + editLink.href = adminStatus.edit.url; + } + + if (adminStatus.preview.status === 200) { + previewLink.classList.remove('disabled'); + previewLink.href = adminStatus.preview.url; + } - if (adminStatus.live.status === 200) { - liveLink.classList.remove('disabled'); - liveLink.href = adminStatus.live.url; - } - - linkContainer.append(editLink, previewLink, liveLink); - item.append(localeText, linkContainer); - itemContainer.append(item); + if (adminStatus.live.status === 200) { + liveLink.classList.remove('disabled'); + liveLink.href = adminStatus.live.url; + } + + linkContainer.append(editLink, previewLink, liveLink); + item.append(localeText, linkContainer); + itemContainer.append(item); - if (adminStatus.webPath === currentPath) { - const origin = document.referrer; - if (origin.includes('google.com') || origin.includes('sharepoint.com')) { - editLink.style.opacity = 0; - editLink.removeAttribute('href'); - } else if(origin.includes('hlx.page')) { - previewLink.style.opacity = 0; - previewLink.removeAttribute('href'); - } else { - liveLink.style.opacity = 0; - liveLink.removeAttribute('href'); - } - itemContainer.classList.add('current'); - const localeHeader = block.querySelector('.locale-header'); - localeHeader.parentElement.insertBefore(itemContainer, localeHeader); + if (adminStatus.webPath === currentPath) { + const origin = document.referrer; + if (origin.includes('google.com') || origin.includes('sharepoint.com')) { + editLink.style.opacity = 0; + editLink.removeAttribute('href'); + } else if(origin.includes('hlx.page')) { + previewLink.style.opacity = 0; + previewLink.removeAttribute('href'); } else { - insertAlphabetically(containerParent, itemContainer); + liveLink.style.opacity = 0; + liveLink.removeAttribute('href'); } - editUrls.add(adminStatus.edit.url); + itemContainer.classList.add('current'); + const localeHeader = block.querySelector('.locale-header'); + localeHeader.parentElement.insertBefore(itemContainer, localeHeader); + } else { + insertAlphabetically(containerParent, itemContainer); } }); block.querySelector('div').append(containerParent); From f5cca626e730e87f87ef8c6ebd88d0849398d421 Mon Sep 17 00:00:00 2001 From: Chris Millar Date: Fri, 17 Mar 2023 14:54:38 -0600 Subject: [PATCH 26/28] Polish (#575) --- .../img/aec-icon.svg} | 0 .../img/word-icon.svg | 0 libs/blocks/locale-nav/locale-nav.css | 118 ++++++++++++ libs/blocks/locale-nav/locale-nav.js | 106 +++++++++++ libs/blocks/regions-loader/regions-loader.css | 91 ---------- libs/blocks/regions-loader/regions-loader.js | 170 ------------------ .../region-selector/region-selector.css | 3 - .../region-selector/region-selector.js | 1 - tools/sidekick/config.json | 39 ++-- 9 files changed, 249 insertions(+), 279 deletions(-) rename libs/blocks/{regions-loader/img/Adobe_Experience_Cloud_logo_RGB.svg => locale-nav/img/aec-icon.svg} (100%) rename libs/blocks/{regions-loader => locale-nav}/img/word-icon.svg (100%) create mode 100644 libs/blocks/locale-nav/locale-nav.css create mode 100644 libs/blocks/locale-nav/locale-nav.js delete mode 100644 libs/blocks/regions-loader/regions-loader.css delete mode 100644 libs/blocks/regions-loader/regions-loader.js delete mode 100644 libs/templates/region-selector/region-selector.css delete mode 100644 libs/templates/region-selector/region-selector.js diff --git a/libs/blocks/regions-loader/img/Adobe_Experience_Cloud_logo_RGB.svg b/libs/blocks/locale-nav/img/aec-icon.svg similarity index 100% rename from libs/blocks/regions-loader/img/Adobe_Experience_Cloud_logo_RGB.svg rename to libs/blocks/locale-nav/img/aec-icon.svg diff --git a/libs/blocks/regions-loader/img/word-icon.svg b/libs/blocks/locale-nav/img/word-icon.svg similarity index 100% rename from libs/blocks/regions-loader/img/word-icon.svg rename to libs/blocks/locale-nav/img/word-icon.svg diff --git a/libs/blocks/locale-nav/locale-nav.css b/libs/blocks/locale-nav/locale-nav.css new file mode 100644 index 0000000000..27cb0dc96e --- /dev/null +++ b/libs/blocks/locale-nav/locale-nav.css @@ -0,0 +1,118 @@ +.in-page { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +/* +Common styles for the block region selector loader +*/ + +.locale-nav { + width: 360px; + height: 360px; + overflow: scroll; + background-color: #303030; + color: #fff; + font-size: 0.875rem; +} + +.sk-header { + background: rgb(0 0 0 / 35%); + display: flex; + justify-content: space-between; + padding: 0 12px; + line-height: 36px; + text-transform: uppercase; + font-weight: 700; +} + +.actions { + display: grid; + gap: 12px; + grid-template-columns: 48px 60px 60px; + text-align: center; +} + +.detail { + display: flex; + justify-content: space-between; + padding: 0 12px; + line-height: 72px; + font-size: 1.125rem; + text-transform: uppercase; +} + +.action { + display: inline-block; + overflow: hidden; + text-indent: -1000px; +} + +.action.edit { + background: url('./img/word-icon.svg') center / 26px no-repeat; +} + +.action.preview, .action.live { + background: url('./img/aec-icon.svg') center / 26px no-repeat; +} + +.status-404 { + opacity: 0.25; + pointer-events: none; +} + +/* Locale List */ +ul.locales { + margin: 0; + padding: 0; + list-style: none; +} + +.locale-search-wrapper { + position: relative; +} + +.locale-search { + width: 100%; + display: block; + font-family: var(--body-font-family); + background: rgb(0 0 0 / 35%); + border: none; + margin: 0; + padding: 0 12px; + line-height: 36px; + text-transform: uppercase; + font-weight: 700; + color: #FFF; + box-sizing: border-box; + transition: padding .2s ease-in-out; +} + +.locale-search-icon { + position: absolute; + content: ''; + width: 36px; + height: 36px; + left: -36px; + top: 0; + background: url('/libs/ui/img/spectrum-search.svg') center / 24px no-repeat; + transition: left .2s ease-in-out; +} + +.locale-search:hover + .locale-search-icon, .locale-search:focus + .locale-search-icon { + left: 6px; +} + +.locale-search:hover, .locale-search:focus { + padding: 0 42px; +} + +.locale-search::placeholder { + color: #FFF; +} + +.locale-search:focus::placeholder { + color: #676767; +} diff --git a/libs/blocks/locale-nav/locale-nav.js b/libs/blocks/locale-nav/locale-nav.js new file mode 100644 index 0000000000..ef51631e2d --- /dev/null +++ b/libs/blocks/locale-nav/locale-nav.js @@ -0,0 +1,106 @@ +import { createTag, getConfig, getLocale } from '../../utils/utils.js'; + +const { locales } = getConfig(); + +const params = new URLSearchParams(window.location.search); +const referrer = params.get('referrer'); +const owner = params.get('owner'); +const repo = params.get('repo'); + +const isEditUrl = () => referrer.includes('google.com') || referrer.includes('sharepoint.com'); + +const formatJson = (json) => { + const { pathname } = new URL(json.preview.url); + const locale = getLocale(locales, pathname); + const editHref = json.edit.url ? json.edit.url : '#'; + return { + locale, + pathname, + edit: createTag('a', { class: `edit action status-${json.edit.status}`, href: editHref, target: '_blank', title: 'Edit' }, 'Edit'), + preview: createTag('a', { class: `preview action status-${json.preview.status}`, href: json.preview.url, target: '_blank', title: 'Preview' }, 'Preview'), + live: createTag('a', { class: `live action status-${json.live.status}`, href: json.live.url, target: '_blank', title: 'Live' }, 'Live'), + }; +}; + +const getDetails = async (path) => { + const url = path + ? `https://admin.hlx.page/status/${owner}/${repo}/main${path}?editUrl=auto` + : `https://admin.hlx.page/status/${owner}/${repo}/main?editUrl=${referrer}`; + try { + const res = await fetch(url); + const json = await res.json(); + return formatJson(json); + } catch (e) { + return false; + } +}; + +const getCurrentDetails = async () => ( + isEditUrl() + ? getDetails() + : getDetails(new URL(referrer).pathname)); + +const getStatus = async (li, localePath) => { + const page = await getDetails(localePath); + const actions = createTag('div', { class: 'actions' }, [page.edit, page.preview, page.live]); + li.append(actions); +}; + +const decorateLocales = (current) => { + const currLocale = current.locale.prefix.replace('/', ''); + delete locales[currLocale]; + return Object.keys(locales).map((key) => { + const prefix = key === '' ? key : `/${key}`; + const localePath = currLocale === '' + ? `/${key}${current.pathname}` + : current.pathname.replace(current.locale.prefix, prefix); + const li = createTag('li', { class: 'detail' }, `${key || 'us'}`); + getStatus(li, localePath); + return li; + }); +}; + +const handleSearch = (e, els) => { + const search = e.target.value; + els.forEach((subject) => { + if (subject.textContent.includes(search)) { + subject.style.display = 'flex'; + } else { + subject.style.display = 'none'; + } + }); +}; + +const decorateSearch = (el, current) => { + const search = createTag('input', { class: 'locale-search', placeholder: 'Locales' }); + const icon = createTag('div', { class: 'locale-search-icon' }); + const wrapper = createTag('div', { class: 'locale-search-wrapper' }, [search, icon]); + const localeEls = decorateLocales(current); + const list = createTag('ul', { class: 'locales' }, localeEls); + search.addEventListener('keyup', (e) => { handleSearch(e, localeEls); }); + el.append(wrapper, list); +}; + +const decorateHeader = (el, page) => { + const currentHeading = createTag('span', null, 'Current'); + const actionsText = 'EditPreviewLive'; + const actionsHeading = createTag('div', { class: 'actions' }, actionsText); + const header = createTag('div', { class: 'sk-header' }); + header.append(currentHeading, actionsHeading); + const currentLocale = page.locale.prefix.replace('/', '') || 'us'; + const currentPage = createTag('div', { class: 'current-page detail' }, `${currentLocale}`); + const currentActions = createTag('div', { class: 'actions' }, [page.edit, page.preview, page.live]); + currentPage.append(currentActions); + el.append(header, currentPage); +}; + +function detectContext() { + if (window.self === window.top) document.body.classList.add('in-page'); +} + +export default async function init(el) { + detectContext(); + const current = await getCurrentDetails(); + decorateHeader(el, current); + decorateSearch(el, current); +} diff --git a/libs/blocks/regions-loader/regions-loader.css b/libs/blocks/regions-loader/regions-loader.css deleted file mode 100644 index c86cb9f2ce..0000000000 --- a/libs/blocks/regions-loader/regions-loader.css +++ /dev/null @@ -1,91 +0,0 @@ -/* -Common styles for the block region selector loader -*/ - -.regions-loader { - background-color: #303030; - color: #fff; - font-family: 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif; - min-height: 398px; - font-size: 1rem; -} - -img.icon { - width: 35px; - height: 35px; -} - -a.disabled { - filter: grayscale(100%); -} - -.sk-header { - display: flex; - justify-content: space-between; - align-items: end; - padding: 1.5rem 15px; -} - -.right-headings { - display: flex; - gap: 20px; - font-weight: bolder; -} - -.locale-header { - position: relative; - align-items: center; -} - -.locale-header::after { - position: absolute; - content: ''; - background: url('../../ui/img/spectrum-search.svg') no-repeat; - width: 16px; - height: 16px; - right: 22px; - top: calc(50% - 8px); - opacity: 0.6; -} - -.sk-regions-search { - width: 123px; - background: rgb(0 0 0 / 100%); - color: #FFF; - font-family: inherit; - font-size: 14px; - border: none; - height: 26px; - padding: 0 35px 0 10px; - border-top: 1px solid rgba(100 100 100 / 20%); - border-bottom: 1px solid rgba(100 100 100 / 20%); -} - -.regions-loader h2 { - margin: 0; -} - -.sk-region-select-item-container { - padding: 15px; - background-color: #353535; -} - -.sk-region-select-item { - display: flex; - justify-content: space-between; - align-items: center; -} - -.sk-link-container { - display: flex; - align-items: center; - gap: 31.5px; -} - -.locale-text { - font-size: 1.5rem; -} - -.sk-link-container a { - line-height: 0; -} diff --git a/libs/blocks/regions-loader/regions-loader.js b/libs/blocks/regions-loader/regions-loader.js deleted file mode 100644 index 5639698837..0000000000 --- a/libs/blocks/regions-loader/regions-loader.js +++ /dev/null @@ -1,170 +0,0 @@ -import { createTag } from '../../utils/utils.js'; - -const LOC_CONFIG = 'https://main--milo--adobecom.hlx.page/drafts/localization/configs/config.json'; -const HELIX_ADMIN = 'https://admin.hlx.page'; -const ADOBE_ICON = ''; -const WORD_ICON = ''; - -const getLivecopies = async () => { - const livecopies = []; - const res = await fetch(LOC_CONFIG); - const json = await res.json(); - json.locales.data.forEach((d) => { - livecopies.push(...d.livecopies.split(',')); - }); - return livecopies.sort(); -}; - -const getWebPath = async (owner, repo, referrer) => { - try { - const res = await fetch(`${HELIX_ADMIN}/status/${owner}/${repo}/ref?editUrl=${referrer}`); - const json = await res.json(); - return json.webPath; - } catch (e) { - return false; - } -} - -const getStatusFromHelixAdmin = async (owner, repo, locale, path) => { - try { - const res = await fetch(`${HELIX_ADMIN}/status/${owner}/${repo}/main/${locale}/${path}?editUrl=auto`); - if (!res.ok) return false; - const json = await res.json(); - return json; - } catch (e) { /* ignore */ } - return false; -} - -const insertAlphabetically = (containerParent, itemContainer) => { - const locale = itemContainer.dataset.locale; - const items = [...containerParent.querySelectorAll('.sk-region-select-item-container')]; - const insertBefore = items.find((item) => locale < item.dataset.locale); - if (insertBefore) { - containerParent.insertBefore(itemContainer, insertBefore); - } else { - containerParent.append(itemContainer); - } -}; - -const decorateRegionLinks = async (block) => { - const livecopies = await getLivecopies(); - const { search } = window.location; - const params = new URLSearchParams(search); - const referrer = params.get('referrer'); - const owner = params.get('owner'); - const repo = params.get('repo'); - - if (!owner || !repo || !referrer) return; - - let currentPath; - if (referrer.includes('google.com') || referrer.includes('sharepoint.com')) { - currentPath = await getWebPath(owner, repo, referrer); - } else { - currentPath = new URL(referrer).pathname; - } - - let currentPathWithOutLocale = currentPath; - if (!currentPath) { - return; - } - const currentLocale = currentPath.split('/')[1]; - const index = livecopies.indexOf(currentLocale); - if (index > -1) { - currentPathWithOutLocale = currentPath.substring(currentPath.indexOf(currentLocale) + currentLocale.length); - } - - const locales = new Set(livecopies); - const containerParent = createTag('div', { class: 'sk-region-select-item-containers' }); - locales.forEach(async loc => { - const adminStatus = await getStatusFromHelixAdmin(owner, repo, loc, currentPathWithOutLocale); - const itemContainer = createTag('div', { class: 'sk-region-select-item-container', 'data-locale': loc}); - const item = createTag('div', { class: 'sk-region-select-item' }); - - const localeText = createTag('div', { class: 'locale-text' }); - localeText.innerHTML = loc || 'en_us'; - - const linkContainer = createTag('div', { class: 'sk-link-container' }); - const editLink = createTag('a', { class: 'sk-edit-link disabled', target: '_blank' }); - const previewLink = createTag('a', { class: 'sk-preview-link disabled', target: '_blank' }); - const liveLink = createTag('a', { class: 'sk-live-link disabled', target: '_blank' }); - - editLink.innerHTML = WORD_ICON; - previewLink.innerHTML = ADOBE_ICON; - liveLink.innerHTML = ADOBE_ICON; - - if (adminStatus.edit.status === 200) { - editLink.classList.remove('disabled'); - editLink.href = adminStatus.edit.url; - } - - if (adminStatus.preview.status === 200) { - previewLink.classList.remove('disabled'); - previewLink.href = adminStatus.preview.url; - } - - if (adminStatus.live.status === 200) { - liveLink.classList.remove('disabled'); - liveLink.href = adminStatus.live.url; - } - - linkContainer.append(editLink, previewLink, liveLink); - item.append(localeText, linkContainer); - itemContainer.append(item); - - if (adminStatus.webPath === currentPath) { - const origin = document.referrer; - if (origin.includes('google.com') || origin.includes('sharepoint.com')) { - editLink.style.opacity = 0; - editLink.removeAttribute('href'); - } else if(origin.includes('hlx.page')) { - previewLink.style.opacity = 0; - previewLink.removeAttribute('href'); - } else { - liveLink.style.opacity = 0; - liveLink.removeAttribute('href'); - } - itemContainer.classList.add('current'); - const localeHeader = block.querySelector('.locale-header'); - localeHeader.parentElement.insertBefore(itemContainer, localeHeader); - } else { - insertAlphabetically(containerParent, itemContainer); - } - }); - block.querySelector('div').append(containerParent); -}; - -const searchEvent = (e) => { - const search = regionsSearch.value; - const subjects = document.querySelectorAll('.sk-region-select-item-containers .sk-region-select-item-container'); - subjects.forEach(subject => { - if (subject.textContent.includes(search)) { - subject.style.display = 'block'; - } else { - subject.style.display = 'none'; - } - }); -} - -const decorateHeader = (block) => { - const headingParent = block.querySelector('h1, h2, h3')?.parentElement; - headingParent.classList.add('sk-header'); - const rightHeading = createTag('div', { class: 'right-headings' }); - rightHeading.innerHTML = '
EDIT
PREVIEW
LIVE
'; - headingParent.append(rightHeading); - - const localeHeader = createTag('div', { class: 'sk-header locale-header' }); - const localeHeading = createTag('h2'); - const searchInput = createTag('input',{ id: 'regionsSearch', class: 'sk-regions-search', placeholder: 'Search...' }); - searchInput.addEventListener('keyup', searchEvent); - localeHeading.innerHTML = 'LOCALES'; - localeHeader.append(localeHeading); - localeHeader.append(searchInput); - headingParent.parentElement.append(localeHeader); -} - -const init = async (block) => { - decorateHeader(block); - await decorateRegionLinks(block); -} - -export default init; diff --git a/libs/templates/region-selector/region-selector.css b/libs/templates/region-selector/region-selector.css deleted file mode 100644 index 5cfb31d70b..0000000000 --- a/libs/templates/region-selector/region-selector.css +++ /dev/null @@ -1,3 +0,0 @@ -main > .section > .content { - max-width: 100%; -} diff --git a/libs/templates/region-selector/region-selector.js b/libs/templates/region-selector/region-selector.js deleted file mode 100644 index b582cb6365..0000000000 --- a/libs/templates/region-selector/region-selector.js +++ /dev/null @@ -1 +0,0 @@ -export default function init() {} diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json index 9625ad1ae4..3ee5a41fce 100644 --- a/tools/sidekick/config.json +++ b/tools/sidekick/config.json @@ -9,6 +9,21 @@ ], "plugins": [ { + "id": "library", + "title": "Library", + "environments": [ "edit" ], + "isPalette": true, + "paletteRect": "top: auto; bottom: 25px; left: 25px; height: 388px; width: 360px;", + "url": "/tools/library", + "includePaths": [ "**.docx**" ] + }, + { + "id": "tools", + "title": "Tools", + "isContainer": true + }, + { + "containerId": "tools", "id": "localize", "title": "Localize", "environments": [ "edit" ], @@ -18,6 +33,7 @@ "includePaths": [ "**/:x**" ] }, { + "containerId": "tools", "id": "floodgate", "title": "Floodgate", "environments": [ "edit" ], @@ -27,6 +43,7 @@ "includePaths": [ "**/:x**" ] }, { + "containerId": "tools", "title": "Send to CaaS", "id": "sendtocaas", "environments": ["dev","preview", "live", "prod"], @@ -34,6 +51,7 @@ "excludePaths": ["/tools/caas**", "*.json"] }, { + "containerId": "tools", "title": "Check Schema", "id": "checkschema", "environments": ["prod"], @@ -41,29 +59,22 @@ "excludePaths": ["/tools**", "*.json"] }, { - "id": "library", - "title": "Library", - "environments": [ "edit" ], - "isPalette": true, - "paletteRect": "top: auto; bottom: 20px; left: 20px; height: 398px; width: 360px;", - "url": "/tools/library", - "includePaths": [ "**.docx**" ] - }, - { + "containerId": "tools", "title": "Preflight", "id": "preflight", "environments": ["dev", "preview", "live"], "event": "preflight" }, { - "id": "regions", - "title": "Regions", - "environments": [ "edit", "dev", "preview", "live", "prod" ], + "containerId": "tools", + "id": "locales", + "title": "Locales", + "environments": [ "edit", "dev", "preview", "live" ], "isPalette": true, "passConfig": true, "passReferrer": true, - "paletteRect": "top: auto; bottom: 20px; left: 20px; height: 398px; width: 360px;", - "url": "https://region-selector--milo--adobecom.hlx.page/tools/regions-loader", + "paletteRect": "top: auto; bottom: 25px; left: 75px; height: 388px; width: 360px;", + "url": "/tools/locale-nav", "includePaths": [ "**.docx**" ] } ] From 44ba0ddf07f08d9e07f6cc3414aed8d7dcaacd4b Mon Sep 17 00:00:00 2001 From: Chris Millar Date: Fri, 17 Mar 2023 17:16:41 -0600 Subject: [PATCH 27/28] Fix security issue --- libs/blocks/locale-nav/locale-nav.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/libs/blocks/locale-nav/locale-nav.js b/libs/blocks/locale-nav/locale-nav.js index ef51631e2d..37cfb28b45 100644 --- a/libs/blocks/locale-nav/locale-nav.js +++ b/libs/blocks/locale-nav/locale-nav.js @@ -7,8 +7,6 @@ const referrer = params.get('referrer'); const owner = params.get('owner'); const repo = params.get('repo'); -const isEditUrl = () => referrer.includes('google.com') || referrer.includes('sharepoint.com'); - const formatJson = (json) => { const { pathname } = new URL(json.preview.url); const locale = getLocale(locales, pathname); @@ -35,10 +33,11 @@ const getDetails = async (path) => { } }; -const getCurrentDetails = async () => ( - isEditUrl() - ? getDetails() - : getDetails(new URL(referrer).pathname)); +const getCurrentDetails = async () => { + const { origin, pathname } = new URL(referrer); + const isEdit = origin.endsWith('google.com') || origin.endsWith('sharepoint.com'); + return isEdit ? getDetails() : getDetails(pathname); +} const getStatus = async (li, localePath) => { const page = await getDetails(localePath); From 5830687c1d925e67b66d41075212fcec5c6c60c4 Mon Sep 17 00:00:00 2001 From: Chris Millar Date: Fri, 17 Mar 2023 17:30:05 -0600 Subject: [PATCH 28/28] Fix security issue --- libs/blocks/locale-nav/locale-nav.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/libs/blocks/locale-nav/locale-nav.js b/libs/blocks/locale-nav/locale-nav.js index 37cfb28b45..91ea66dc62 100644 --- a/libs/blocks/locale-nav/locale-nav.js +++ b/libs/blocks/locale-nav/locale-nav.js @@ -35,7 +35,9 @@ const getDetails = async (path) => { const getCurrentDetails = async () => { const { origin, pathname } = new URL(referrer); - const isEdit = origin.endsWith('google.com') || origin.endsWith('sharepoint.com'); + const split = origin.split('.'); + const topLevel = split.slice(Math.max(split.length - 2, 1)).join('.'); + const isEdit = topLevel === 'google.com' || topLevel === 'sharepoint.com'; return isEdit ? getDetails() : getDetails(pathname); }