extensions/amp-story/1.0/amp-story-system-layer.js
/**
   * Reacts to a custom configuration change coming from the player level.
   * Updates UI to match configuration described by publisher.
   * @param {!Array<!Object>} controls
   * @private
   */
Reacts to a custom configuration change coming from the player level.
Updates UI to match configuration described by publisher.
@param {!Array} controls
@private
Reacts to a custom configuration change coming from the player level . Updates UI to match configuration described by publisher . @param { !Array } controls @private
onCustomControls_(controls) {
    if (controls.length <= 0) {
      return;
    }
    controls.forEach((control) => {
      if (!control.name) {
        return;
      }
      const defaultConfig = CONTROL_DEFAULTS[control.name];
      if (!defaultConfig) {
        return;
      }
      const element = scopedQuerySelector(
        this.getShadowRoot(),
        defaultConfig.selector
      );
      if (control.visibility === 'hidden') {
        this.vsync_.mutate(() => {
          element.classList.add('i-amphtml-story-ui-hide-button');
        });
      }
      if (!control.visibility || control.visibility === 'visible') {
        this.vsync_.mutate(() => {
          element.classList.remove('i-amphtml-story-ui-hide-button');
        });
      }
      if (control.position === 'start') {
        const startButtonContainer = this.systemLayerEl_.querySelector(
          '.i-amphtml-story-system-layer-buttons-start-position'
        );
        this.vsync_.mutate(() => {
          element.parentElement.removeChild(element);
          startButtonContainer.appendChild(element);
        });
      }
      if (control.backgroundImageUrl) {
        setImportantStyles(dev().assertElement(element), {
          'background-image': `url(${control.backgroundImageUrl})`,
        });
      }
    });
  }
onCustomControls_ ( controls ) { if ( controls . length <= 0 ) { return ; } controls . forEach ( ( control ) => { if ( ! control . name ) { return ; } const defaultConfig = CONTROL_DEFAULTS [ control . name ] ; if ( ! defaultConfig ) { return ; } const element = scopedQuerySelector ( this . getShadowRoot ( ) , defaultConfig . selector ) ; if ( control . visibility === 'hidden' ) { this . vsync_ . mutate ( ( ) => { element . classList . add ( 'i-amphtml-story-ui-hide-button' ) ; } ) ; } if ( ! control . visibility || control . visibility === 'visible' ) { this . vsync_ . mutate ( ( ) => { element . classList . remove ( 'i-amphtml-story-ui-hide-button' ) ; } ) ; } if ( control . position === 'start' ) { const startButtonContainer = this . systemLayerEl_ . querySelector ( '.i-amphtml-story-system-layer-buttons-start-position' ) ; this . vsync_ . mutate ( ( ) => { element . parentElement . removeChild ( element ) ; startButtonContainer . appendChild ( element ) ; } ) ; } if ( control . backgroundImageUrl ) { setImportantStyles ( dev ( ) . assertElement ( element ) , { 'background-image' : ` ${ control . backgroundImageUrl } ` , } ) ; } } ) ; }
Reacts to a custom configuration change coming from the player level.
Reacts to a custom configuration change coming from the player level .