Merge branch 'stage' into unittestfix

acrobat/blocks/app-banner/app-banner.css

@@ -0,0 +1,143 @@
+.placeholder-banner {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 76px;
+}
+
+.has-app-banner header.global-navigation {
+  top: 76px;
+}
+
+.app-banner-close {
+  display: inline;
+  width: 24px;
+  text-align: center;
+  color: grey;
+  font-size: 20px;
+  box-sizing: content-box;
+}
+
+.app-banner-icon {
+  border-radius: 10px;
+  width: 63px;
+  height: 63px;
+  margin-right: 10px;
+  box-sizing: content-box;
+}
+
+.app-banner-icon img {
+  width: 63px;
+  height: 63px;
+  border-radius: 10px;
+  box-sizing: content-box;
+}
+
+.app-banner-title {
+  min-height: 2px;
+  font-weight: bold;
+  color: #333;
+  font-size: 12px;
+  height: 11px;
+  box-sizing: content-box;
+  margin: 0;
+}
+
+.app-banner-description {
+  min-height: 2px;
+  overflow: hidden;
+  color: #333;
+  font-size: 11px;
+  height: 18px;
+  box-sizing: content-box;
+  margin: 0;
+}
+
+.app-banner-button {
+  font-size: 12px;
+  border: 1px solid;
+  border-radius: 10px;
+  text-decoration: none;
+  color: #1CADCE;
+  font-weight: bold;
+  text-align: center;
+  letter-spacing: 1.15px;
+  display: inline;
+  vertical-align: middle;
+  margin-right: 9px;
+  height: 33px;
+  width: 46px;
+  box-sizing: content-box;
+  background: transparent;
+}
+
+.app-banner-stars {
+  display: inline-block;
+  color: #ffb400;
+  letter-spacing: -2px;
+  font-size: 16px;
+  margin-left: -2px;
+  box-sizing: content-box;
+}
+
+.app-banner-reviews {
+  min-height: 10px;
+  min-width: 10px;
+  font-size: 12px;
+  color: #777;
+  display: inline-block;
+  margin-left: 4px;
+  top: -1px;
+  box-sizing: content-box;
+}
+
+.app-banner-stars span {
+  box-sizing: content-box;
+}
+
+.app-banner-content {
+  width: 100%;
+  overflow: hidden;
+  height: 76px;
+  background: white;
+  color: #333;
+  border-top: 1px solid #ddd;
+  display: flex;
+  box-sizing: content-box;
+  align-items: center;
+}
+
+.app-banner-details {
+  margin-top: 8px;
+  margin-right: 16px;
+  box-sizing: content-box;
+}
+
+.app-banner-right {
+  height: 100%;
+  margin-left: auto;
+  box-sizing: content-box;
+}
+
+.app-banner-right::before {
+  display: inline-block;
+  vertical-align: middle;
+  content: "";
+  height: 100%;
+  box-sizing: content-box;
+}
+
+.app-banner {
+  font-family: 'Open Sans', sans-serif;
+  width: 100%;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+  transition: all 00.25s ease;
+  position: sticky;
+  top: 0;
+  left: 0;
+  box-shadow: 0 0 5px #00000059;
+  display: none;
+  box-sizing: content-box;
+  z-index: 11;
+}

acrobat/blocks/app-banner/app-banner.js

@@ -0,0 +1,130 @@
+import { setLibs } from '../../scripts/utils.js';
+
+const miloLibs = setLibs('/libs');
+/**
+ * Reusing from express codebase,
+ * can be replaced once Milo provides an implementation
+ * @returns mobileOS
+ */
+function getMobileOperatingSystem() {
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+
+  // Windows Phone must come first because its UA also contains "Android"
+  if (/windows phone/i.test(userAgent)) {
+    return 'Windows Phone';
+  }
+
+  if (/android/i.test(userAgent)) {
+    return 'Android';
+  }
+
+  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+    return 'iOS';
+  }
+
+  return 'unknown';
+}
+
+let link = '';
+let mobileOS = getMobileOperatingSystem();
+
+function closeBanner() {
+  const appBanner = document.querySelector('.app-banner');
+  document.body.classList.remove('has-app-banner');
+  appBanner.remove();
+}
+
+function openLink() {
+  window.open(link, '_blank');
+  closeBanner();
+}
+
+const { createTag } = await import(`${miloLibs}/utils/utils.js`);
+
+function getDecoratedBannerRight(children) {
+  const openText = children[3].textContent.trim();
+  const appBannerRight = createTag('div', { class: 'app-banner-right' });
+  const openButton = createTag('button', { class: 'app-banner-button', role: 'text', 'aria-label': openText }, openText);
+  appBannerRight.addEventListener('click', openLink);
+  appBannerRight.append(openButton);
+  return appBannerRight;
+}
+
+function getDecoratedAppDetails(children) {
+  let rating = 0;
+  let reviews = 0;
+
+  if (mobileOS === 'Android') {
+    rating = children[5].textContent.trim();
+    reviews = children[6].textContent.trim();
+  } else if (mobileOS === 'iOS') {
+    rating = children[8].textContent.trim();
+    reviews = children[9].textContent.trim();
+  }
+
+  const appTitle = createTag('h5', { class: 'app-banner-title' }, children[0].textContent.trim());
+  const appDesc = createTag('p', { class: 'app-banner-description' }, children[2].textContent.trim());
+  const appStars = createTag('div', { class: 'app-banner-stars', role: 'text', 'aria-label': `Average rating ${rating} stars` });
+
+  rating = rating > 5 ? 5 : rating;
+  rating = rating < 0 ? 0 : rating;
+
+  for (let i = 0; i < rating; i += 1) {
+    appStars.append(createTag('span', {}, '★'));
+  }
+
+  const appBannerDetails = createTag('div', { class: 'app-banner-details' });
+  const appReviews = createTag('div', { class: 'app-banner-reviews', 'aria-label': '' }, `(${reviews})`);
+  appBannerDetails.append(appTitle, appDesc, appStars, appReviews);
+  appBannerDetails.addEventListener('click', openLink);
+  return appBannerDetails;
+}
+
+function getDecoratedBannerLeft(children) {
+  const appBannerLeft = createTag('div', { class: 'app-banner-left' });
+  const picture = children[1].querySelector('img');
+  const iconSrc = picture ? picture.getAttribute('src') : '';
+  const icon = createTag('div', { class: 'app-banner-icon' });
+  const appIcon = createTag('img', { src: `${iconSrc}` });
+  icon.append(appIcon);
+  icon.addEventListener('click', openLink);
+  appBannerLeft.append(icon);
+  return appBannerLeft;
+}
+
+export default async function init(el) {
+  if (mobileOS === 'unknown') {
+    el.innerHTML = '';
+    return;
+  }
+  await createTag();
+  const bannerPlaceHolder = createTag('div', { class: 'placeholder-banner' });
+  document.body.prepend(bannerPlaceHolder);
+  const { children } = el;
+  if (mobileOS === 'Android') {
+    link = children[4].textContent.trim();
+  } else if (mobileOS === 'iOS') {
+    link = children[7].textContent.trim();
+  }
+  const appBanner = createTag('div', { class: 'app-banner' });
+  // Close banner button on the left, also the icon
+  const closeBtn = createTag('div', { class: 'app-banner-close', role: 'text', 'aria-label': 'Close banner' }, '×');
+  closeBtn.addEventListener('click', closeBanner);
+  const appBannerContent = createTag('div', { class: 'app-banner-content' });
+  appBannerContent.append(
+    closeBtn,
+    getDecoratedBannerLeft(children),
+    getDecoratedAppDetails(children),
+    getDecoratedBannerRight(children),
+  );
+  appBanner.append(appBannerContent);
+  el.innerHTML = '';
+  appBanner.style.display = 'block';
+  bannerPlaceHolder.remove();
+  document.body.classList.add('has-app-banner');
+  document.body.prepend(appBanner);
+}
+
+export function setMobileOS(testOS) {
+  mobileOS = testOS;
+}

acrobat/blocks/dc-converter-widget/dc-converter-widget.js

@@ -4,7 +4,7 @@ let cacheLoad = false;
 setTimeout(() => {
   const skeletonLoader = new CustomEvent('DC_Skeleton:Ready');
   window.dispatchEvent(skeletonLoader);
-}, 2000);
+}, 250);
 
 setTimeout(() => {
   const skeletonLoader = new CustomEvent('DC_SkeletonShimmer:Ready');

acrobat/styles/styles.css

@@ -15,6 +15,11 @@ div[data-section="widget"] {
   background-color: #fc6767;
   min-height: 570px;
 }
+@media (max-width: 600px) {
+  #dc-converter-widget {
+    height: calc(100vh - 110px);
+  }
+}
 
 #CID {
   width: 75%;