change asset selector to rail. add stage button

hlxsites · Aug 17, 2023 · f958526 · f958526
1 parent 3a63ee1
commit f958526
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 26 deletions.
diff --git a/blocks/aem-asset-selector/aem-asset-selector-util.js b/blocks/aem-asset-selector/aem-asset-selector-util.js
@@ -52,10 +52,6 @@ export function init(cfg, callback) {
   });
 }
 
-function onClose() {
-  document.getElementById('asset-selector-dialog').close();
-}
-
 async function getAssetPublicUrl(url) {
   const response = await fetch(`${WEB_TOOLS}/asset-bin?src=${url}`, {
     headers: {
@@ -93,30 +89,26 @@ async function handleSelection(selection) {
   ];
   // Write the new clipboard contents
   await navigator.clipboard.write(data);
-  // onClose();
 }
 
 // eslint-disable-next-line no-unused-vars
 function handleNavigateToAsset(asset) {
-  // onClose();
+
 }
 
 export async function renderAssetSelectorWithImsFlow(cfg) {
   const assetSelectorProps = {
     repositoryId: cfg['repository-id'],
     imsOrg: cfg['ims-org-id'],
-    onClose,
     handleSelection,
     handleNavigateToAsset,
     env: cfg.environment.toUpperCase(),
     apiKey: API_KEY,
+    rail: true
   };
   const container = document.getElementById('asset-selector');
   // eslint-disable-next-line no-undef
-  PureJSSelectors.renderAssetSelectorWithAuthFlow(container, assetSelectorProps, () => {
-    const assetSelectorDialog = document.getElementById('asset-selector-dialog');
-    assetSelectorDialog.showModal();
-  });
+  PureJSSelectors.renderAssetSelectorWithAuthFlow(container, assetSelectorProps);
 }
 
 export async function logoutImsFlow() {

diff --git a/blocks/aem-asset-selector/aem-asset-selector.css b/blocks/aem-asset-selector/aem-asset-selector.css
@@ -1,27 +1,35 @@
-#asset-selector {
-  height: calc(100vh - 80px);
-  width: calc(100vw - 60px);
-  margin: -20px;
-}
-
 footer,
 header {
   display: none;
 }
 
-.aem-asset-selector-container {
-  display: flex;
+main .section.aem-asset-selector-container {
+  padding: 0;
+  margin: 0;
+}
+
+main .section > div.aem-asset-selector-wrapper {
+  padding: 0;
+  margin: 0;
+  max-width: unset;
 }
 
 .action-container {
-  display: flex;
-  justify-content: space-around;
+  position: absolute;
+  right: 20px;
+  z-index: 1;
 }
 
 .action-container > button {
   padding: 10px;
 }
 
+#asset-selector {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
 main .asset-overlay {
   position: absolute;
   inset: 0;
@@ -33,6 +41,7 @@ main .asset-overlay {
 }
 
 main #login {
+  display: none;
   justify-content: center;
   align-items: center;
   flex-direction: column;

diff --git a/blocks/aem-asset-selector/aem-asset-selector.js b/blocks/aem-asset-selector/aem-asset-selector.js
@@ -9,6 +9,7 @@ export default function decorate(block) {
   block.textContent = '';
   block.innerHTML = `
     <div class="asset-overlay">
+      <img id="loading" src="${cfg.loading}" />
       <div id="login">
         <p>Welcome to the Asset Selector! After signing in you'll have the option to select which assets to use.</p>
         <button id="as-login">Sign In</button>
@@ -17,11 +18,9 @@ export default function decorate(block) {
     <div class="action-container">
         <button id="as-cancel">Sign Out</button>
     </div>
-    <dialog id="asset-selector-dialog">
-        <div id="asset-selector" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
-        </div>
-    </dialog>
-    `;
+    <div id="asset-selector">
+    </div>
+  `;
   block.querySelector('#as-login').addEventListener('click', (e) => {
     e.preventDefault();
     renderAssetSelectorWithImsFlow(cfg);
@@ -32,6 +31,17 @@ export default function decorate(block) {
     logoutImsFlow();
   });
 
+  // give a little time for onAccessTokenReceived() to potentially come in
+  setTimeout(() => {
+    if (block.querySelector('.asset-overlay').style.display !== 'none') {
+      // at this point the overlay is still visible, meaning that we haven't
+      // gotten an event indicating the user is logged in. Display the
+      // sign in interface
+      block.querySelector('#loading').style.display = 'none';
+      block.querySelector('#login').style.display = 'flex';
+    }
+  }, 2000);
+
   // this will be sent by the auth service if the user has a token, meaning
   // they're logged in. if that happens, hide the login overlay and show
   // the asset selector

diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json
@@ -11,6 +11,16 @@
       "isPalette": true,
       "includePaths": [ "**.docx**" ],
       "paletteRect": "top: auto; bottom: 20px; left: 20px; width:1000px; height:700px"
+    }, {
+      "id": "asset-library",
+      "title": "AEM Assets Library Stage",
+      "environments": [
+        "edit"
+      ],
+      "url": "/aem-asset-selector-stage",
+      "isPalette": true,
+      "includePaths": [ "**.docx**" ],
+      "paletteRect": "top: 50px; bottom: 10px; right: 10px; left: auto; width:400px; height: calc(100vh - 60px)"
     }
   ]
 }