extensions/amp-story-page-attachment/0.1/amp-story-page-attachment.js
/**
   * Builds outlink CTA drawer UI.
   * @private
   */
Builds outlink CTA drawer UI.
@private
Builds outlink CTA drawer UI . @private
buildOutlink_() {
    this.setDragCap_(DRAG_CAP_PX);
    this.setOpenThreshold_(OPEN_THRESHOLD_PX);
    this.headerEl.classList.add(
      'i-amphtml-story-draggable-drawer-header-attachment-remote'
    );
    this.element.classList.add('i-amphtml-story-page-attachment-remote');
    const isPageOutlink = this.element.tagName === 'AMP-STORY-PAGE-OUTLINK';
    const hrefAttr = isPageOutlink
      ? this.element.querySelector('a').getAttribute('href')
      : this.element.getAttribute('href');
    const openImgAttr = this.element.getAttribute('cta-image');
    const image =
      openImgAttr && openImgAttr !== 'none' ? (
        <div
          class="i-amphtml-story-page-attachment-remote-img"
          style={{backgroundImage: `url(${openImgAttr}) !important`}}
        ></div>
      ) : (
        renderOutlinkLinkIconElement()
      );
    const link = (
      <a
        class="i-amphtml-story-page-attachment-remote-content"
        target="_blank"
        onClick={(event) => event.preventDefault()}
      >
        {image}
        <span class="i-amphtml-story-page-attachment-remote-title">
          <span>
            {this.localizationService.getLocalizedString(
              LocalizedStringId_Enum.AMP_STORY_OPEN_OUTLINK_TEXT
            )}
          </span>
          <span>{hrefAttr}</span>
        </span>
        <svg
          class="i-amphtml-story-page-attachment-remote-icon"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 48 48"
        >
          <path d="M38 38H10V10h14V6H10a4 4 0 0 0-4 4v28a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V24h-4v14zM28 6v4h7.2L15.5 29.7l2.8 2.8L38 12.8V20h4V6H28z" />
        </svg>
      </a>
    );
    if (isPageOutlink) {
      this.element.querySelector('a').setAttribute('target', '_top');
    }
    link.setAttribute('href', hrefAttr);
    this.contentEl.appendChild(link);
  }
buildOutlink_ ( ) { this . setDragCap_ ( DRAG_CAP_PX ) ; this . setOpenThreshold_ ( OPEN_THRESHOLD_PX ) ; this . headerEl . classList . add ( 'i-amphtml-story-draggable-drawer-header-attachment-remote' ) ; this . element . classList . add ( 'i-amphtml-story-page-attachment-remote' ) ; const isPageOutlink = this . element . tagName === 'AMP-STORY-PAGE-OUTLINK' ; const hrefAttr = isPageOutlink ? this . element . querySelector ( 'a' ) . getAttribute ( 'href' ) : this . element . getAttribute ( 'href' ) ; const openImgAttr = this . element . getAttribute ( 'cta-image' ) ; const image = openImgAttr && openImgAttr !== 'none' ? ( < div class = "i-amphtml-story-page-attachment-remote-img" style = { { backgroundImage : ` ${ openImgAttr } ` } } > < / div > ) : ( renderOutlinkLinkIconElement ( ) ) ; const link = ( < a class = "i-amphtml-story-page-attachment-remote-content" target = "_blank" onClick = { ( event ) => event . preventDefault ( ) } > { image } < span class = "i-amphtml-story-page-attachment-remote-title" > < span > { this . localizationService . getLocalizedString ( LocalizedStringId_Enum . AMP_STORY_OPEN_OUTLINK_TEXT ) } < / span > < span > { hrefAttr } < / span > < / span > < svg class = "i-amphtml-story-page-attachment-remote-icon" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 48 48" > < path d = "M38 38H10V10h14V6H10a4 4 0 0 0-4 4v28a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V24h-4v14zM28 6v4h7.2L15.5 29.7l2.8 2.8L38 12.8V20h4V6H28z" / > < / svg > < / a > ) ; if ( isPageOutlink ) { this . element . querySelector ( 'a' ) . setAttribute ( 'target' , '_top' ) ; } link . setAttribute ( 'href' , hrefAttr ) ; this . contentEl . appendChild ( link ) ; }
Builds outlink CTA drawer UI.
Builds outlink CTA drawer UI .
// For backwards compatibility if element is amp-story-page-outlink. // Set image. // Attach link icon SVG by default. // Use an anchor element to make this a real link in vertical rendering. // Navigation is handled programmatically. Disable clicks on the placeholder // anchor to prevent from users triggering double navigations, which has // side effects in native contexts opening webviews/CCTs. // The target must be '_top' for page outlinks, which will result in the // link opening in the current tab. Opening links in a new tab requires a // trusted event, and Safari does not consider swiping up to be trusted. // URL will be validated and resolved based on the canonical URL if relative // when navigating. // TODO(wg-stories): It would be much nicer if this attribute was set inline // on the JSX tag above. However, that makes the LGTM analysis fail on // "Potentially unsafe external link". // See https://lgtm.com/rules/1806963085/ // We set the href imperatively here to avoid triggering the warning // (an lgtm-disable comment will not work due to formatting, unfortunately.) // Consider whether we can use `noopener` and/or `noreferrer` so that we // can inline the attribute, and avoid the warning.