extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js
/**
   * Opens the disclaimer dialog and positions it according to the page and itself.
   * @private
   */
Opens the disclaimer dialog and positions it according to the page and itself.
@private
Opens the disclaimer dialog and positions it according to the page and itself . @private
openDisclaimer_() {
    if (this.disclaimerEl_) {
      return;
    }
    const dir = this.rootEl_.getAttribute('dir') || 'ltr';
    this.disclaimerEl_ = buildInteractiveDisclaimer(this, {dir});
    let styles;
    this.measureMutateElement(
      () => {
        const interactiveRect = this.element. getBoundingClientRect();
        const pageRect = this.getPageEl(). getBoundingClientRect();
        const iconRect = this.disclaimerIcon_. getBoundingClientRect();
        const bottomFraction =
          1 - (iconRect.y + iconRect.height - pageRect.y) / pageRect.height;
        const widthFraction = interactiveRect.width / pageRect.width;
        const bottomPercentage = clamp(bottomFraction * 100, 0, 85); 
        const widthPercentage = Math.max(widthFraction * 100, 65); 
        styles = {
          'bottom': bottomPercentage + '%',
          'max-width': widthPercentage + '%',
          'position': 'absolute',
          'z-index': 3,
        };
        if (dir === 'rtl') {
          const leftFraction = (iconRect.x - pageRect.x) / pageRect.width;
          styles['left'] = clamp(leftFraction * 100, 0, 25) + '%'; 
        } else {
          const rightFraction =
            1 - (iconRect.x + iconRect.width - pageRect.x) / pageRect.width;
          styles['right'] = clamp(rightFraction * 100, 0, 25) + '%'; 
        }
      },
      () => {
        setImportantStyles(
          this.disclaimerEl_,
          assertDoesNotContainDisplay(styles)
        );
        this.getPageEl().appendChild(this.disclaimerEl_);
        this.disclaimerIcon_.setAttribute('hide', '');
        this.disclaimerEl_.addEventListener('click', (e) => {
          if (
            e.path[0].classList.contains(
              'i-amphtml-story-interactive-disclaimer-close'
            )
          ) {
            this.closeDisclaimer_();
          }
        });
      }
    );
  }
openDisclaimer_ ( ) { if ( this . disclaimerEl_ ) { return ; } const dir = this . rootEl_ . getAttribute ( 'dir' ) || 'ltr' ; this . disclaimerEl_ = buildInteractiveDisclaimer ( this , { dir } ) ; let styles ; this . measureMutateElement ( ( ) => { const interactiveRect = this . element . getBoundingClientRect ( ) ; const pageRect = this . getPageEl ( ) . getBoundingClientRect ( ) ; const iconRect = this . disclaimerIcon_ . getBoundingClientRect ( ) ; const bottomFraction = 1 - ( iconRect . y + iconRect . height - pageRect . y ) / pageRect . height ; const widthFraction = interactiveRect . width / pageRect . width ; const bottomPercentage = clamp ( bottomFraction * 100 , 0 , 85 ) ; const widthPercentage = Math . max ( widthFraction * 100 , 65 ) ; styles = { 'bottom' : bottomPercentage + '%' , 'max-width' : widthPercentage + '%' , 'position' : 'absolute' , 'z-index' : 3 , } ; if ( dir === 'rtl' ) { const leftFraction = ( iconRect . x - pageRect . x ) / pageRect . width ; styles [ 'left' ] = clamp ( leftFraction * 100 , 0 , 25 ) + '%' ; } else { const rightFraction = 1 - ( iconRect . x + iconRect . width - pageRect . x ) / pageRect . width ; styles [ 'right' ] = clamp ( rightFraction * 100 , 0 , 25 ) + '%' ; } } , ( ) => { setImportantStyles ( this . disclaimerEl_ , assertDoesNotContainDisplay ( styles ) ) ; this . getPageEl ( ) . appendChild ( this . disclaimerEl_ ) ; this . disclaimerIcon_ . setAttribute ( 'hide' , '' ) ; this . disclaimerEl_ . addEventListener ( 'click' , ( e ) => { if ( e . path [ 0 ] . classList . contains ( 'i-amphtml-story-interactive-disclaimer-close' ) ) { this . closeDisclaimer_ ( ) ; } } ) ; } ) ; }
Opens the disclaimer dialog and positions it according to the page and itself.
Opens the disclaimer dialog and positions it according to the page and itself .
// Get rects and calculate position from icon. /*OK*/ /*OK*/ /*OK*/ // Clamp values to ensure dialog has space up and left. // Ensure 15% of space up. // Ensure 65% of max-width. // Align disclaimer to left if RTL, otherwise align to the right. // Ensure 75% of space to the right. // Ensure 75% of space to the left. // Add click listener through the shadow dom using e.path.