Region selector

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;
+}

libs/blocks/locale-nav/locale-nav.js

@@ -0,0 +1,107 @@
+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 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 () => {
+  const { origin, pathname } = new URL(referrer);
+  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);
+}
+
+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' }, `<span>${key || 'us'}</span>`);
+    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 = '<span>Edit</span><span>Preview</span><span>Live</span>';
+  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' }, `<span>${currentLocale}</span>`);
+  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);
+}

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,33 +43,39 @@
       "includePaths": [ "**/:x**" ]
     },
     {
+      "containerId": "tools",
       "title": "Send to CaaS",
       "id": "sendtocaas",
       "environments": ["dev","preview", "live", "prod"],
       "event": "send-to-caas",
       "excludePaths": ["/tools/caas**", "*.json"]
     },
     {
+      "containerId": "tools",
       "title": "Check Schema",
       "id": "checkschema",
       "environments": ["prod"],
       "event": "check-schema",
       "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"
+    },
+    {
+      "containerId": "tools",
+      "id": "locales",
+      "title": "Locales",
+      "environments": [ "edit", "dev", "preview", "live" ],
+      "isPalette": true,
+      "passConfig": true,
+      "passReferrer": true,
+      "paletteRect": "top: auto; bottom: 25px; left: 75px; height: 388px; width: 360px;",
+      "url": "/tools/locale-nav",
+      "includePaths": [ "**.docx**" ]
     }
   ]
 }