profile-pane 3.2.3-1 → 3.2.3-2

package/lib/ProfileView.js

@@ -20,30 +20,31 @@ var _SocialSection = require("./sections/social/SocialSection");
 var _QRCodeSection = require("./sections/qrcode/QRCodeSection");
 function getViewerMode(subject) {
   let mode = 'anonymous';
-  if (_solidLogic.authn.currentUser() && _solidLogic.authn.currentUser().sameTerm(subject)) mode = 'owner';
-  if (_solidLogic.authn.currentUser() && !_solidLogic.authn.currentUser().sameTerm(subject)) mode = 'authenticated';
+  const currentUser = _solidLogic.authn.currentUser();
+  const sameTerm = currentUser ? currentUser.sameTerm(subject) : false;
+  if (currentUser && sameTerm) mode = 'owner';
+  if (currentUser && !sameTerm) mode = 'authenticated';
   return mode;
 }
-function renderSidebar(store, subject, accounts, skills, languages, contactInfo, viewerMode, onSaved) {
+function renderSidebar(store, subject, accounts, skills, languages, contactInfo, viewerMode, layout, onSaved) {
   return (0, _litHtml.html)`
     <div
       class="profile__sidebar"
     >
       <aside class="profile__sidebar-content" aria-labelledby="profile-sidebar-heading">
         <h2 id="profile-sidebar-heading" class="sr-only">Profile sidebar</h2>
-        ${(0, _SocialSection.renderSocialSection)(store, subject, accounts, viewerMode, onSaved)}
-        ${(0, _SkillsSection.renderSkillsSection)(store, subject, skills, viewerMode, onSaved)}
-        ${(0, _LanguageSection.renderLanguageSection)(store, subject, languages, viewerMode, onSaved)}
-        ${(0, _ContactInfoSection.renderContactInfoSection)(store, subject, contactInfo, viewerMode, onSaved)}
+        ${(0, _SocialSection.renderSocialSection)(store, subject, accounts, viewerMode, layout, onSaved)}
+        ${(0, _SkillsSection.renderSkillsSection)(store, subject, skills, viewerMode, layout, onSaved)}
+        ${(0, _LanguageSection.renderLanguageSection)(store, subject, languages, viewerMode, layout, onSaved)}
+        ${(0, _ContactInfoSection.renderContactInfoSection)(store, subject, contactInfo, viewerMode, layout, onSaved)}
         ${(0, _QRCodeSection.renderQRCodeSection)(subject, store)}
       </aside>
     </div>
   `;
 }
-async function ProfileView(subject, context, onSaved) {
+async function ProfileView(subject, context, layout, onSaved) {
   const store = context.session.store;
   const viewerMode = getViewerMode(subject);
-  const layout = context.environment?.layout ?? 'desktop';
   const theme = context.environment?.theme ?? 'light';
   const inputMode = context.environment?.inputMode ?? 'pointer';
   const viewModel = await (0, _ProfileViewModelPresenter.presentProfileViewModel)(subject, store);
@@ -55,14 +56,14 @@ async function ProfileView(subject, context, onSaved) {
   const bioDetails = viewModel.bioDetails;
   const accounts = viewModel.social;
   const contactInfo = viewModel.contactInfo;
-  const headingSection = await (0, _HeadingSection.renderHeadingSection)(context, subject, profileDetails, viewerMode, onSaved);
-  const bioSection = (0, _BioSection.renderBioSection)(store, subject, bioDetails, viewerMode, onSaved);
-  const skillsSection = (0, _SkillsSection.renderSkillsSection)(store, subject, skills, viewerMode, onSaved);
-  const languageSection = (0, _LanguageSection.renderLanguageSection)(store, subject, languages, viewerMode, onSaved);
-  const cvSection = (0, _ResumeSection.renderCVSection)(store, subject, rolesByType, viewerMode, onSaved);
-  const projectSection = (0, _ProjectSection.renderProjectSection)(store, subject, projects, viewerMode, onSaved);
-  const socialSection = (0, _SocialSection.renderSocialSection)(store, subject, accounts, viewerMode, onSaved);
-  const contactInfoSection = (0, _ContactInfoSection.renderContactInfoSection)(store, subject, contactInfo, viewerMode, onSaved);
+  const headingSection = await (0, _HeadingSection.renderHeadingSection)(context, subject, profileDetails, viewerMode, layout, onSaved);
+  const bioSection = (0, _BioSection.renderBioSection)(store, subject, bioDetails, viewerMode, layout, onSaved);
+  const skillsSection = (0, _SkillsSection.renderSkillsSection)(store, subject, skills, viewerMode, layout, onSaved);
+  const languageSection = (0, _LanguageSection.renderLanguageSection)(store, subject, languages, viewerMode, layout, onSaved);
+  const cvSection = (0, _ResumeSection.renderCVSection)(store, subject, rolesByType, viewerMode, layout, onSaved);
+  const projectSection = (0, _ProjectSection.renderProjectSection)(store, subject, projects, viewerMode, layout, onSaved);
+  const socialSection = (0, _SocialSection.renderSocialSection)(store, subject, accounts, viewerMode, layout, onSaved);
+  const contactInfoSection = (0, _ContactInfoSection.renderContactInfoSection)(store, subject, contactInfo, viewerMode, layout, onSaved);
   const qrCodeSection = (0, _QRCodeSection.renderQRCodeSection)(subject, store);
   if (layout === 'mobile') {
     return (0, _litHtml.html)`
@@ -110,7 +111,7 @@ async function ProfileView(subject, context, onSaved) {
           ${projectSection}
 
         </section>
-        ${renderSidebar(store, subject, accounts, skills, languages, contactInfo, viewerMode, onSaved)}
+        ${renderSidebar(store, subject, accounts, skills, languages, contactInfo, viewerMode, layout, onSaved)}
       </div>
     </div>
   `;

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AAK7C,OAAO,EACL,qBAAqB,EACrB,8BAA8B,EAC9B,YAAY,EACZ,kBAAkB,EACnB,MAAM,qCAAqC,CAAA;AAsG5C,QAAA,MAAM,IAAI;;;;qBAKG,SAAS,WACT,kBAAkB,KAC1B,MAAM,GAAG,IAAI;sBAWE,SAAS,WAAW,kBAAkB,KAAG,WAAW;CAqBvE,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AAO7C,OAAO,EACL,qBAAqB,EACrB,8BAA8B,EAC9B,YAAY,EACZ,kBAAkB,EACnB,MAAM,qCAAqC,CAAA;AAwF5C,QAAA,MAAM,IAAI;;;;qBAKG,SAAS,WACT,kBAAkB,KAC1B,MAAM,GAAG,IAAI;sBAWE,SAAS,WAAW,kBAAkB,KAAG,WAAW;CA8BvE,CAAA;AAED,eAAe,IAAI,CAAA"}

package/lib/index.js

@@ -32,19 +32,39 @@ var _litHtml = require("lit-html");
 var _ProfileView = require("./ProfileView");
 var _solidUi = require("solid-ui");
 var _QRCodeCard = require("./sections/qrcode/QRCodeCard");
+var _resize = require("./utils/resize");
 var _addMeToYourFriends = require("./specialButtons/addMeToYourFriends");
+const MOBILE_LAYOUT_MAX_WIDTH = 768;
+const HEADING_SECTION_SELECTOR = '[data-profile-section="heading"]';
+const SOCIAL_SECTION_SELECTOR = '[data-profile-section="social"]';
 async function loadExtendedProfile(store, subject) {
   const otherProfiles = store.each(subject, _solidUi.ns.rdfs('seeAlso'), null, subject.doc());
   if (otherProfiles.length > 0) {
     await store.fetcher.load(otherProfiles);
   }
 }
-const HEADING_SECTION_SELECTOR = '[data-profile-section="heading"]';
-const SOCIAL_SECTION_SELECTOR = '[data-profile-section="social"]';
+function measureLayout(context, root) {
+  if (context.environment?.layout === 'mobile') {
+    return 'mobile';
+  }
+  if (typeof window === 'undefined') {
+    return 'desktop';
+  }
+  const measuredWidth = root?.getBoundingClientRect().width || window.innerWidth;
+  return measuredWidth <= MOBILE_LAYOUT_MAX_WIDTH ? 'mobile' : 'desktop';
+}
+function syncRenderedLayout(root, context, onLayoutChange) {
+  const updateLayout = () => {
+    const nextLayout = measureLayout(context, root);
+    if (nextLayout !== root.dataset.layout) {
+      onLayoutChange(nextLayout);
+    }
+  };
+  const grid = root.querySelector('.profile-grid');
+  return (0, _resize.createResizeDrivenSync)(updateLayout, [root, grid]);
+}
 function syncSocialSectionHeight(root) {
-  let animationFrameId = 0;
   const updateHeight = () => {
-    animationFrameId = 0;
     const grid = root.querySelector('.profile-grid');
     const headingSection = root.querySelector(HEADING_SECTION_SELECTOR);
     const socialSection = root.querySelector(SOCIAL_SECTION_SELECTOR);
@@ -61,38 +81,9 @@ function syncSocialSectionHeight(root) {
       socialSection.style.minHeight = nextMinHeight;
     }
   };
-  const scheduleUpdate = () => {
-    if (animationFrameId !== 0) {
-      return;
-    }
-    animationFrameId = window.requestAnimationFrame(updateHeight);
-  };
-  updateHeight();
-  if (typeof ResizeObserver === 'undefined') {
-    window.addEventListener('resize', scheduleUpdate);
-    return () => {
-      if (animationFrameId !== 0) {
-        window.cancelAnimationFrame(animationFrameId);
-      }
-      window.removeEventListener('resize', scheduleUpdate);
-    };
-  }
-  const resizeObserver = new ResizeObserver(scheduleUpdate);
-  resizeObserver.observe(root);
   const headingSection = root.querySelector(HEADING_SECTION_SELECTOR);
   const socialSection = root.querySelector(SOCIAL_SECTION_SELECTOR);
-  if (headingSection) {
-    resizeObserver.observe(headingSection);
-  }
-  if (socialSection) {
-    resizeObserver.observe(socialSection);
-  }
-  return () => {
-    if (animationFrameId !== 0) {
-      window.cancelAnimationFrame(animationFrameId);
-    }
-    resizeObserver.disconnect();
-  };
+  return (0, _resize.createResizeDrivenSync)(updateHeight, [root, headingSection, socialSection]);
 }
 function applyEnvironmentAttributes(element, context) {
   const layout = context.environment?.layout ?? 'desktop';
@@ -118,12 +109,21 @@ const Pane = {
     const target = context.dom.createElement('div');
     const store = context.session.store;
     let cleanupSocialSectionHeightSync = null;
+    let cleanupLayoutSync = null;
+    let currentLayout = measureLayout(context, target);
     applyEnvironmentAttributes(target, context);
+    target.dataset.layout = currentLayout;
     const renderWithData = async () => {
       applyEnvironmentAttributes(target, context);
-      (0, _litHtml.render)(await (0, _ProfileView.ProfileView)(subject, context, renderWithData), target);
+      target.dataset.layout = currentLayout;
+      (0, _litHtml.render)(await (0, _ProfileView.ProfileView)(subject, context, currentLayout, renderWithData), target);
       cleanupSocialSectionHeightSync?.();
       cleanupSocialSectionHeightSync = syncSocialSectionHeight(target);
+      cleanupLayoutSync?.();
+      cleanupLayoutSync = syncRenderedLayout(target, context, nextLayout => {
+        currentLayout = nextLayout;
+        void renderWithData();
+      });
       await (0, _QRCodeCard.hydrateQRCodes)(target);
     };
     loadExtendedProfile(store, subject).then(async () => {