Removed dependency on localizationservice

ampproject · mszylkowski · Jan 12, 2022 · Dec 21, 2021 · Dec 21, 2021 · Dec 21, 2021
commit b2323ff2244f878a47e6b529e0d25f2a916ef27f
diff --git a/build-system/test-configs/dep-check-config.js b/build-system/test-configs/dep-check-config.js
@@ -304,13 +304,10 @@ exports.rules = [
       'extensions/amp-smartlinks/0.1/amp-smartlinks.js->extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter-manager.js',
       'extensions/amp-smartlinks/0.1/linkmate.js->extensions/amp-skimlinks/0.1/link-rewriter/two-steps-response.js',
 
-      'extensions/amp-story-page-attachment/0.1/amp-story-draggable-drawer.js->extensions/amp-story/1.0/amp-story-localization-service.js',
       'extensions/amp-story-page-attachment/0.1/amp-story-draggable-drawer.js->extensions/amp-story/1.0/amp-story-store-service.js',
       'extensions/amp-story-page-attachment/0.1/amp-story-draggable-drawer.js->extensions/amp-story/1.0/utils.js',
-      'extensions/amp-story-page-attachment/0.1/amp-story-form.js->extensions/amp-story/1.0/amp-story-localization-service.js',
       'extensions/amp-story-page-attachment/0.1/amp-story-form.js->extensions/amp-story/1.0/amp-story-store-service.js',
       'extensions/amp-story-page-attachment/0.1/amp-story-form.js->extensions/amp-story/1.0/loading-spinner.js',
-      'extensions/amp-story-page-attachment/0.1/amp-story-page-attachment.js->extensions/amp-story/1.0/amp-story-localization-service.js',
       'extensions/amp-story-page-attachment/0.1/amp-story-page-attachment.js->extensions/amp-story/1.0/amp-story-open-page-attachment.js',
       'extensions/amp-story-page-attachment/0.1/amp-story-page-attachment.js->extensions/amp-story/1.0/amp-story-store-service.js',
       'extensions/amp-story-page-attachment/0.1/amp-story-page-attachment.js->extensions/amp-story/1.0/history.js',

diff --git a/extensions/amp-story-page-attachment/0.1/amp-story-draggable-drawer.js b/extensions/amp-story-page-attachment/0.1/amp-story-draggable-drawer.js
@@ -11,7 +11,6 @@ import {listen} from '#utils/event-helper';
 import {dev} from '#utils/log';
 
 import {CSS} from '../../../build/amp-story-draggable-drawer-header-0.1.css';
-import {localize} from '../../amp-story/1.0/amp-story-localization-service';
 import {
   Action,
   StateProperty,
@@ -121,38 +120,43 @@ export class DraggableDrawer extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
-    this.element.classList.add('amp-story-draggable-drawer-root');
+    return Services.localizationServiceForOrNull(this.element).then(
+      (localizationService) => {
+        this.element.classList.add('amp-story-draggable-drawer-root');
 
-    const templateEl = renderDrawerElement();
-    this.headerEl = renderHeaderElement();
+        const templateEl = renderDrawerElement();
+        this.headerEl = renderHeaderElement();
 
-    this.containerEl = dev().assertElement(
-      templateEl.querySelector('.i-amphtml-story-draggable-drawer-container')
-    );
-    this.contentEl = dev().assertElement(
-      this.containerEl.querySelector(
-        '.i-amphtml-story-draggable-drawer-content'
-      )
-    );
+        this.containerEl = dev().assertElement(
+          templateEl.querySelector(
+            '.i-amphtml-story-draggable-drawer-container'
+          )
+        );
+        this.contentEl = dev().assertElement(
+          this.containerEl.querySelector(
+            '.i-amphtml-story-draggable-drawer-content'
+          )
+        );
 
-    const spacerEl = (
-      <button
-        role="button"
-        class="i-amphtml-story-draggable-drawer-spacer i-amphtml-story-system-reset"
-        aria-label={localize(
-          this.element,
-          LocalizedStringId_Enum.AMP_STORY_CLOSE_BUTTON_LABEL
-        )}
-      ></button>
-    );
+        const spacerEl = (
+          <button
+            role="button"
+            class="i-amphtml-story-draggable-drawer-spacer i-amphtml-story-system-reset"
+            aria-label={localizationService.getLocalizedString(
+              LocalizedStringId_Enum.AMP_STORY_CLOSE_BUTTON_LABEL
+            )}
+          ></button>
+        );
 
-    this.containerEl.insertBefore(spacerEl, this.contentEl);
-    this.contentEl.appendChild(
-      createShadowRootWithStyle(<div />, this.headerEl, CSS)
-    );
+        this.containerEl.insertBefore(spacerEl, this.contentEl);
+        this.contentEl.appendChild(
+          createShadowRootWithStyle(<div />, this.headerEl, CSS)
+        );
 
-    this.element.appendChild(templateEl);
-    this.element.setAttribute('aria-hidden', true);
+        this.element.appendChild(templateEl);
+        this.element.setAttribute('aria-hidden', true);
+      }
+    );
   }
 
   /** @override */

diff --git a/extensions/amp-story-page-attachment/0.1/amp-story-form.js b/extensions/amp-story-page-attachment/0.1/amp-story-form.js
@@ -3,7 +3,6 @@ import * as Preact from '#core/dom/jsx';
 
 import {LocalizedStringId_Enum} from '#service/localization/strings';
 
-import {localize} from '../../amp-story/1.0/amp-story-localization-service';
 import {
   Action,
   getStoreService,
@@ -36,26 +35,31 @@ let FormElementChildrenDef;
 const createStatusChildrenByAttribute = {
   'submitting': () => toggleLoadingSpinner(renderLoadingSpinner(), true),
 
-  'submit-success': (formEl) =>
+  'submit-success': (localizationService) =>
     createFormResultChildren(
-      localize(formEl, LocalizedStringId_Enum.AMP_STORY_FORM_SUBMIT_SUCCESS)
+      localizationService.getLocalizedString(
+        LocalizedStringId_Enum.AMP_STORY_FORM_SUBMIT_SUCCESS
+      )
     ),
 
-  'submit-error': (formEl) =>
+  'submit-error': (localizationService) =>
     createFormResultChildren(
-      localize(formEl, LocalizedStringId_Enum.AMP_STORY_FORM_SUBMIT_ERROR)
+      localizationService.getLocalizedString(
+        LocalizedStringId_Enum.AMP_STORY_FORM_SUBMIT_ERROR
+      )
     ),
 };
 
 /**
  * Add a default form attribute element for each absent response attribute.
  * @param {!Element} formEl The form to which the attribute elements will be
  *     selected or added.
+ * @param {!../../../src/service/localization.LocalizationService} localizationService
  * @return {Array<!Element>} The list of response attribute elements that
  *     belong to the given form.
  * @private
  */
-export function setupResponseAttributeElements(formEl) {
+export function setupResponseAttributeElements(formEl, localizationService) {
   return Object.keys(createStatusChildrenByAttribute).map((attr) => {
     const selected = formEl.querySelector(`[${escapeCssSelectorIdent(attr)}]`);
     if (selected) {
@@ -64,7 +68,7 @@ export function setupResponseAttributeElements(formEl) {
     const created = (
       <div>
         <div class="i-amphtml-story-page-attachment-form-submission-status">
-          {createStatusChildrenByAttribute[attr](formEl)}
+          {createStatusChildrenByAttribute[attr](localizationService)}
         </div>
       </div>
     );

diff --git a/extensions/amp-story-page-attachment/0.1/amp-story-page-attachment.js b/extensions/amp-story-page-attachment/0.1/amp-story-page-attachment.js
@@ -17,7 +17,6 @@ import {
 
 import {CSS} from '../../../build/amp-story-page-attachment-0.1.css';
 import {getSourceOrigin} from '../../../src/url';
-import {localize} from '../../amp-story/1.0/amp-story-localization-service';
 import {
   AttachmentTheme,
   renderOutlinkLinkIconElement,
@@ -82,33 +81,37 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
    * @override
    */
   buildCallback() {
-    super.buildCallback();
-
-    this.maybeSetDarkThemeForElement_(this.headerEl);
-    this.maybeSetDarkThemeForElement_(this.element);
-
-    // Outlinks can be an amp-story-page-outlink or the legacy version,
-    // an amp-story-page-attachment with an href.
-    const isOutlink =
-      this.element.tagName === 'AMP-STORY-PAGE-OUTLINK' ||
-      this.element.hasAttribute('href');
-    this.type_ = isOutlink ? AttachmentType.OUTLINK : AttachmentType.INLINE;
+    super.buildCallback().then(() => {
+      this.maybeSetDarkThemeForElement_(this.headerEl);
+      this.maybeSetDarkThemeForElement_(this.element);
+
+      // Outlinks can be an amp-story-page-outlink or the legacy version,
+      // an amp-story-page-attachment with an href.
+      const isOutlink =
+        this.element.tagName === 'AMP-STORY-PAGE-OUTLINK' ||
+        this.element.hasAttribute('href');
+      this.type_ = isOutlink ? AttachmentType.OUTLINK : AttachmentType.INLINE;
+
+      if (this.type_ === AttachmentType.INLINE) {
+        Services.localizationServiceForOrNull(this.element).then(
+          (localizationService) => {
+            this.buildInline_(localizationService);
+          }
+        );
+      }
 
-    if (this.type_ === AttachmentType.INLINE) {
-      this.buildInline_();
-    }
+      this.win.addEventListener('pageshow', (event) => {
+        // On browser back, Safari does not reload the page but resumes its cached
+        // version. This event's parameter lets us know when this happens so we
+        // can cleanup the remote opening animation.
+        if (event.persisted) {
+          this.closeInternal_(false /** shouldAnimate */);
+        }
+      });
 
-    this.win.addEventListener('pageshow', (event) => {
-      // On browser back, Safari does not reload the page but resumes its cached
-      // version. This event's parameter lets us know when this happens so we
-      // can cleanup the remote opening animation.
-      if (event.persisted) {
-        this.closeInternal_(false /** shouldAnimate */);
-      }
+      toggle(this.element, true);
+      this.element.setAttribute('aria-live', 'assertive');
     });
-
-    toggle(this.element, true);
-    this.element.setAttribute('aria-live', 'assertive');
   }
 
   /**
@@ -124,9 +127,10 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
 
   /**
    * Builds inline page attachment's drawer UI.
+   * @param {../../../src/services/localization/LocalizationService} localizationService
    * @private
    */
-  buildInline_() {
+  buildInline_(localizationService) {
     const titleText =
       this.element.getAttribute('title') ||
       this.element.getAttribute('data-title');
@@ -135,8 +139,7 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
       <div class="i-amphtml-story-draggable-drawer-header-title-and-close">
         <button
           class="i-amphtml-story-page-attachment-close-button"
-          aria-label={localize(
-            this.element,
+          aria-label={localizationService.getLocalizedString(
             LocalizedStringId_Enum.AMP_STORY_CLOSE_BUTTON_LABEL
           )}
           role="button"
@@ -150,22 +153,25 @@ export class AmpStoryPageAttachment extends DraggableDrawer {
     const forms = this.element.querySelectorAll('form');
     if (forms.length > 0) {
       allowlistFormActions(this.win);
+
       forms.forEach((form) => {
         // Scroll each response attribute element into view, when displayed.
-        setupResponseAttributeElements(form).forEach((el) => {
-          // TODO(wg-stories): Share ResizeObserver for runtime performance.
-          new this.win.ResizeObserver((e) => {
-            if (
-              this.state === DrawerState.OPEN &&
-              e[0].contentRect.height > 0
-            ) {
-              el./*OK*/ scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-              });
-            }
-          }).observe(el);
-        });
+        setupResponseAttributeElements(form, localizationService).forEach(
+          (el) => {
+            // TODO(wg-stories): Share ResizeObserver for runtime performance.
+            new this.win.ResizeObserver((e) => {
+              if (
+                this.state === DrawerState.OPEN &&
+                e[0].contentRect.height > 0
+              ) {
+                el./*OK*/ scrollIntoView({
+                  behavior: 'smooth',
+                  block: 'nearest',
+                });
+              }
+            }).observe(el);
+          }
+        );
       });
 
       // Page attachments that contain forms must display the page's publisher