extensions/amp-story-page-attachment/0.1/amp-story-page-attachment.js
/**
   * Builds inline page attachment's drawer UI.
   * @private
   */
Builds inline page attachment's drawer UI.
@private
Builds inline page attachment ' s drawer UI . @private
buildInline_() {
    const titleText =
      this.element.getAttribute('title') ||
      this.element.getAttribute('data-title');
    this.headerEl.appendChild(
      <div class="i-amphtml-story-draggable-drawer-header-title-and-close">
        <button
          class="i-amphtml-story-page-attachment-close-button"
          aria-label={this.localizationService.getLocalizedString(
            LocalizedStringId_Enum.AMP_STORY_CLOSE_BUTTON_LABEL
          )}
          role="button"
        ></button>
        {titleText && (
          <span class="i-amphtml-story-page-attachment-title">{titleText}</span>
        )}
      </div>
    );
    const forms = this.element.querySelectorAll('form');
    if (forms.length > 0) {
      allowlistFormActions(this.win);
      forms.forEach((form) => {
        setupResponseAttributeElements(form, this.localizationService).forEach(
          (el) => {
            new this.win.ResizeObserver((e) => {
              if (
                this.state === DrawerState.OPEN &&
                e[0].contentRect.height > 0
              ) {
                el. scrollIntoView({
                  behavior: 'smooth',
                  block: 'nearest',
                });
              }
            }).observe(el);
          }
        );
      });
      this.headerEl.append(this.createDomainLabelElement_());
      this.headerEl.classList.add('i-amphtml-story-page-attachment-with-form');
    }
    const templateEl = this.element.querySelector(
      '.i-amphtml-story-draggable-drawer'
    );
    while (this.element.firstChild && this.element.firstChild !== templateEl) {
      this.contentEl.appendChild(this.element.firstChild);
    }
    toggle(dev().assertElement(this.containerEl), true);
  }
buildInline_ ( ) { const titleText = this . element . getAttribute ( 'title' ) || this . element . getAttribute ( 'data-title' ) ; this . headerEl . appendChild ( < div class = "i-amphtml-story-draggable-drawer-header-title-and-close" > < button class = "i-amphtml-story-page-attachment-close-button" aria-label = { this . localizationService . getLocalizedString ( LocalizedStringId_Enum . AMP_STORY_CLOSE_BUTTON_LABEL ) } role = "button" > < / button > { titleText && ( < span class = "i-amphtml-story-page-attachment-title" > { titleText } < / span > ) } < / div > ) ; const forms = this . element . querySelectorAll ( 'form' ) ; if ( forms . length > 0 ) { allowlistFormActions ( this . win ) ; forms . forEach ( ( form ) => { setupResponseAttributeElements ( form , this . localizationService ) . forEach ( ( el ) => { new this . win . ResizeObserver ( ( e ) => { if ( this . state === DrawerState . OPEN && e [ 0 ] . contentRect . height > 0 ) { el . scrollIntoView ( { behavior : 'smooth' , block : 'nearest' , } ) ; } } ) . observe ( el ) ; } ) ; } ) ; this . headerEl . append ( this . createDomainLabelElement_ ( ) ) ; this . headerEl . classList . add ( 'i-amphtml-story-page-attachment-with-form' ) ; } const templateEl = this . element . querySelector ( '.i-amphtml-story-draggable-drawer' ) ; while ( this . element . firstChild && this . element . firstChild !== templateEl ) { this . contentEl . appendChild ( this . element . firstChild ) ; } toggle ( dev ( ) . assertElement ( this . containerEl ) , true ) ; }
Builds inline page attachment's drawer UI.
Builds inline page attachment ' s drawer UI .
// Scroll each response attribute element into view, when displayed. // TODO(wg-stories): Share ResizeObserver for runtime performance. /*OK*/ // Page attachments that contain forms must display the page's publisher // domain above the attachment's contents. This enables users to gauge // the trustworthiness of publishers before sending data to them. // Ensures the content of the attachment won't be rendered/loaded until we // actually need it.