extensions/amp-story/1.0/amp-story-page.js
/**
   * Renders the open attachment UI affordance.
   * @private
   */
Renders the open attachment UI affordance.
@private
Renders the open attachment UI affordance . @private
renderOpenAttachmentUI_() {
    const attachmentEl = this.element.querySelector(
      'amp-story-page-attachment, amp-story-page-outlink, amp-story-shopping-attachment'
    );
    if (
      !attachmentEl ||
      (attachmentEl.tagName === 'AMP-STORY-SHOPPING-ATTACHMENT' &&
        this.element.getElementsByTagName('amp-story-shopping-tag').length ===
          0)
    ) {
      return;
    }
    Services.extensionsFor(this.win).installExtensionForDoc(
      this.getAmpDoc(),
      'amp-story-page-attachment',
      '0.1'
    );
    if (attachmentEl.hasAttribute('title')) {
      attachmentEl.setAttribute(
        'data-title',
        attachmentEl.getAttribute('title')
      );
      attachmentEl.removeAttribute('title');
    }
    if (!this.openAttachmentEl_) {
      this.openAttachmentEl_ = renderPageAttachmentUI(
        this.element,
        attachmentEl
      );
      if (this.element.hasAttribute('active')) {
        this.openAttachmentEl_.setAttribute('active', '');
      }
      const container = (
        <div
          class="i-amphtml-story-page-open-attachment-host"
          role="button"
          onClick={(e) => {
            e.preventDefault();
            this.openAttachment();
          }}
        ></div>
      );
      this.mutateElement(() => {
        this.element.appendChild(
          createShadowRootWithStyle(
            container,
            this.openAttachmentEl_,
            pageAttachmentCSS
          )
        );
      });
    }
  }
renderOpenAttachmentUI_ ( ) { const attachmentEl = this . element . querySelector ( 'amp-story-page-attachment, amp-story-page-outlink, amp-story-shopping-attachment' ) ; if ( ! attachmentEl || ( attachmentEl . tagName === 'AMP-STORY-SHOPPING-ATTACHMENT' && this . element . getElementsByTagName ( 'amp-story-shopping-tag' ) . length === 0 ) ) { return ; } Services . extensionsFor ( this . win ) . installExtensionForDoc ( this . getAmpDoc ( ) , 'amp-story-page-attachment' , '0.1' ) ; if ( attachmentEl . hasAttribute ( 'title' ) ) { attachmentEl . setAttribute ( 'data-title' , attachmentEl . getAttribute ( 'title' ) ) ; attachmentEl . removeAttribute ( 'title' ) ; } if ( ! this . openAttachmentEl_ ) { this . openAttachmentEl_ = renderPageAttachmentUI ( this . element , attachmentEl ) ; if ( this . element . hasAttribute ( 'active' ) ) { this . openAttachmentEl_ . setAttribute ( 'active' , '' ) ; } const container = ( < div class = "i-amphtml-story-page-open-attachment-host" role = "button" onClick = { ( e ) => { e . preventDefault ( ) ; this . openAttachment ( ) ; } } > < / div > ) ; this . mutateElement ( ( ) => { this . element . appendChild ( createShadowRootWithStyle ( container , this . openAttachmentEl_ , pageAttachmentCSS ) ) ; } ) ; } }
Renders the open attachment UI affordance.
Renders the open attachment UI affordance .
// AttachmentEl can be any component that extends draggable drawer. // To prevent 'title' attribute from being used by browser, copy value to 'data-title' and remove. // This ensures `active` is set on first render. // Otherwise setState may be called before this.openAttachmentEl_ exists. // Prevent default so link can be opened programmatically after URL preview is shown.