Merge pull request #690 from adobecom/mwpw-152920

MWPW-152920 built facade for get app for mobile widget
adobecom · Jun 21, 2024 · 353930c · 353930c
2 parents a98a903 + 1e237de
commit 353930c
Show file tree

Hide file tree

Showing 3 changed files with 360 additions and 1 deletion.
diff --git a/acrobat/blocks/mobile-widget/mobile-widget.css b/acrobat/blocks/mobile-widget/mobile-widget.css
@@ -0,0 +1,305 @@
+.mobile-widget {
+  display: flex;
+  background-color: #fc6767;
+  min-height: 570px;
+  margin-bottom: 50px;
+  font-family: adobe-clean,'Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+}
+
+.mobile-widget_wrapper {
+  align-items: center;
+  background: white;
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0;
+  width: 75%;
+  max-width: 75%;
+  height: auto;
+  margin: auto;
+  position: relative;
+  left: 0;
+  top: 30px;
+  right: 0;
+  z-index: 1;
+}
+
+.mobile-widget_title-wrapper {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  line-height: 22px;
+  margin-bottom: 6px;
+}
+
+.mobile-widget_title-img {
+  width: 24px;
+  height: 24px;
+  background-image: url('/acrobat/img/icons/widget-icon.png');
+  background-size: cover;
+  display: inline-block;
+  margin-right: 14px;
+}
+
+.mobile-widget_title {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 22px;
+}
+
+.mobile-widget_heading {
+  font-size: 44px;
+  font-weight: 700;
+  line-height: 56px;
+  margin: 0;
+  text-align: center;
+}
+
+.mobile-widget_header-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 23px 12px 16px;
+}
+
+.mobile-widget_dropzone {
+  pointer-events: auto;
+  width: calc(100% - 56px);
+  align-items: center;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  border: 3px solid transparent;
+  padding: 0 0 70px;
+}
+
+.mobile-widget_artwork-wrapper {
+  display: flex;
+  align-items: flex-end;
+  flex-grow: 1;
+  padding: 0 0 20px;
+}
+
+.mobile-widget_artwork-inner-wrapper {
+  width: 140px;
+  height: 140px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobile-widget_artwork {
+  width: 112px;
+  height: 112px;
+}
+
+.mobile-widget_copy {
+  font-size: 18px;
+  line-height: 22px;
+  margin-top: 16px;
+}
+
+.mobile-widget_cta-wrapper {
+  flex-grow: 1;
+  margin-top: 16px;
+  height: 48px;
+}
+
+.mobile-widget_cta {
+  flex-grow: 1;
+  margin: 16px 0 0;
+  align-items: center;
+  border: 0 none;
+  box-sizing: border-box;
+  width: 411px;
+  background-color: #0265dc;
+  border-radius: 24px;
+  font-size: 18px;
+  height: 48px;
+  text-align: center;
+  color: white;
+  user-select: none;
+  touch-action: none;
+  cursor: pointer;
+  isolation: isolate;
+  justify-content: center;
+  line-height: 1.3;
+  text-decoration: none;
+  display: inline-flex;
+  position: relative;
+  overflow: visible;
+  font-weight: 700;
+}
+
+@media (min-width: 48rem) and (max-width: 57.5rem) {
+  .mobile-widget_wrapper {
+    max-width: 90%;
+    width: 90%;
+  }
+
+  .mobile-widget_heading {
+    font-size: 36px;
+  }
+
+  .mobile-widget_copy {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .mobile-widget_cta {
+    width: 348px;
+  }
+}
+
+@media (min-width: 295px) and (max-width: 767.9px) {
+  .mobile-widget_title-wrapper {
+    padding-top: 0;
+  }
+
+  .mobile-widget_heading {
+    font-size: 28px;
+    line-height: 35px
+  }
+
+  .mobile-widget_dropzone {
+    height: calc(100% - 24px);
+    width: calc(100% - 24px);
+  }
+
+  .mobile-widget_copy {
+    margin-top: 0;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .mobile-widget_cta-wrapper {
+    display: flex;
+    width: 65vw;
+  }
+
+  .mobile-widget_cta {
+    border-radius: 24px;
+    font-size: 18px;
+    height: 48px;
+  }
+}
+
+@media (max-width: 600px) {
+  .mobile-widget_wrapper {
+    width: 91.6667%;
+    max-width: 91.6667%;
+    top: 40px;
+    height: calc(100vh - 100px) !important;
+  }
+}
+
+.mobile-widget.gen-ai {
+  border-radius: 20px;
+}
+
+.mobile-widget_dropzone.gen-ai {
+  display: flex;
+  border-radius: 20px;
+  align-items: start;
+  padding: 60px;
+  width: unset;
+}
+
+.text-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+.inner-text-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  text-align: start;
+}
+
+.mobile-widget_artwork-wrapper.gen-ai {
+  display: flex;
+  flex: 1 1 45%;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.mobile-widget_artwork.gen-ai {
+  width: 100%;
+  height: 100%;
+  max-width: 90%;
+  padding: 10% 0 0;
+  transform: scale3d(1.8, 1.8, 1.8);
+  overflow: hidden;
+}
+
+.chat-pdf {
+  background-color: #fff;
+  background-image: radial-gradient(at 1% 0, #ff715b 0, transparent 50%), radial-gradient(at 48% 89%, #fff 0, transparent 50%), radial-gradient(at 100% 88%, #fff 0, transparent 50%), radial-gradient(at 1% 85%, #fff 0, transparent 50%), radial-gradient(at 93% 33%, #6d51f9 0, transparent 50%), radial-gradient(at 44% 55%, #c8e1fd 0, transparent 50%), radial-gradient(at 11% 22%, #fe4b38 0, transparent 50%), radial-gradient(at 88% 4%, #ea0f00 0, transparent 50%), radial-gradient(at 45% 0, #fe4b38 0, transparent 50%);
+  min-height: 623px;
+}
+
+.mobile-widget_wrapper.gen-ai {
+  padding: 0;
+  height: unset !important;
+}
+
+.mobile-widget_copy.gen-ai {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 27px;
+  margin-left: 0;
+}
+
+.mobile-widget_subcopy.gen-ai {
+  color: #6d6d6d;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 27px;
+  margin-left: 0;
+}
+
+.mobile-widget_heading.gen-ai {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 35px;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.mobile-widget_cta.gen-ai {
+  margin: 32px 0 25px;
+  border-radius: 24px;
+  font-size: 18px;
+  font-weight: 700;
+  height: 48px;
+  padding: 12px 24px;
+  white-space: nowrap;
+  width: 120px;
+}
+
+.mobile-widget_title-wrapper.gen-ai {
+  padding: 0;
+}
+
+.mobile-widget_title-img.gen-ai {
+  margin-right: 8px
+}
+
+@media (min-width: 601px) {
+  .mobile-widget {
+    display: none;
+  }
+}
diff --git a/acrobat/blocks/mobile-widget/mobile-widget.js b/acrobat/blocks/mobile-widget/mobile-widget.js
@@ -0,0 +1,46 @@
+import { setLibs } from '../../scripts/utils.js';
+
+const miloLibs = setLibs('/libs');
+const { createTag } = await import(`${miloLibs}/utils/utils.js`);
+
+function createMobileWidget(element, content) {
+  const wrapper = createTag('div', { class: 'mobile-widget_wrapper' });
+  const titleWrapper = createTag('div', { class: 'mobile-widget_title-wrapper' });
+  const titleImg = createTag('div', { class: 'mobile-widget_title-img' });
+  const title = createTag('div', { class: 'mobile-widget_title' }, 'Adobe Acrobat');
+  const heading = createTag('div', { class: 'mobile-widget_heading' }, content[0].textContent);
+  const headerWrapper = createTag('div', { class: 'mobile-widget_header-wrapper' });
+  const dropZone = createTag('div', { class: 'mobile-widget_dropzone' });
+  const artwork = createTag('img', { class: 'mobile-widget_artwork', src: `${content[1].querySelector('img').src}` });
+  const artworkInnerWrapper = createTag('div', { class: 'mobile-widget_artwork-inner-wrapper' });
+  const artworkWrapper = createTag('div', { class: 'mobile-widget_artwork-wrapper' });
+  const copy = createTag('div', { class: 'mobile-widget_copy' }, content[2].textContent);
+  // TODO: Add check for OS and apply correct href
+  let appLink = '';
+  if (/iPad|iPhone|iPod/.test(window?.browser?.ua) && !window.MSStream) {
+    appLink = content[4].textContent.toString().trim();
+  } else if (/android/i.test(window?.browser?.ua)) {
+    appLink = content[5].textContent.toString().trim();
+  }
+  const mobileCta = createTag('a', { class: 'mobile-widget_cta', href: appLink }, content[3].textContent);
+  const ctaWrapper = createTag('div', { class: 'mobile-widget_cta-wrapper' });
+
+  // construction of Widget
+  titleWrapper.append(titleImg, title);
+  headerWrapper.append(titleWrapper, heading);
+  wrapper.append(headerWrapper, dropZone);
+  artworkInnerWrapper.append(artwork);
+  artworkWrapper.append(artworkInnerWrapper);
+  ctaWrapper.append(mobileCta);
+  dropZone.append(artworkWrapper, copy, ctaWrapper);
+  element.append(wrapper);
+}
+
+export default async function init(element) {
+  await createTag();
+  const content = Array.from(element.querySelectorAll(':scope > div'));
+  const VERB = element.classList.value.replace('mobile-widget', '');
+  content.forEach((con) => con.classList.add('hide'));
+  element.dataset.verb = VERB.trim();
+  createMobileWidget(element, content);
+}
diff --git a/acrobat/scripts/scripts.js b/acrobat/scripts/scripts.js
@@ -346,8 +346,16 @@ const { ietf } = getLocale(locales);
 (async function loadPage() {
   // Fast track the widget
   const widgetBlock = document.querySelector('[class*="dc-converter-widget"]');
+  const mobileAppBlock = document.querySelector('[class*="mobile-widget"]');
+  const hasMobileAppBlock = window.browser.isMobile && document.querySelector('meta[name="mobile-widget"]')?.content === 'true';
 
-  if (widgetBlock) {
+  if (hasMobileAppBlock) {
+    widgetBlock?.remove();
+  } else {
+    mobileAppBlock?.remove();
+  }
+
+  if (widgetBlock && !hasMobileAppBlock) {
     document.body.classList.add('dc-bc');
     document.querySelector('header').className = 'global-navigation has-breadcrumbs';
     const verb = widgetBlock.children[0].children[0]?.innerText?.trim();