sizeiframe(size, animate) {
    let theSize;
    const self = this;

    // @todo: refactor to better handle the iframe async rendering
    if (this.iframe) {
      if (animate === true) {
        this.iframeContainer.classList.add('is-animating');
        this.iframe.classList.add('is-animating');
      }

      if (size < maxViewportWidth) {
        theSize = size;
      } else {
        //If the entered size is larger than the max allowed viewport size, cap value at max vp size
        theSize = maxViewportWidth;
      }

      if (size < minViewportWidth) {
        //If the entered size is less than the minimum allowed viewport size, cap value at min vp size
        theSize = minViewportWidth;
      }

      if (theSize > this.clientWidth) {
        theSize = this.clientWidth;
      }

      // resize viewport wrapper to desired size + size of drag resize handler
      // this.iframeContainer.style.width = theSize + this.viewportResizeHandleWidth + 'px';
      this.iframeContainer.style.width = theSize + 'px';
      // this.iframe.style.width = theSize + 'px'; // resize viewport to desired size

      // auto-remove transition classes if not the animate param isn't set to true
      setTimeout(function () {
        if (animate === true) {
          self.iframeContainer.classList.remove('is-animating');
          self.iframe.classList.remove('is-animating');
        }
      }, 800);

      const targetOrigin =
        window.location.protocol === 'file:'
          ? '*'
          : window.location.protocol + '//' + window.location.host;

      const obj = JSON.stringify({
        event: 'patternLab.resize',
        resize: 'true',
      });

      // only tell the iframe to resize when it's ready
      if (this._hasInitiallyRendered) {
        this.iframe.contentWindow.postMessage(obj, targetOrigin);
      }

      this.updateSizeReading(theSize); // update the displayed values in the toolbar
    }
  }
//'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging
'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging
' animate ' is a boolean for switching the CSS animation on or off . ' animate ' is true by default but can be set to false for things like nudging and dragging
sizeiframe(size, animate) {
    let theSize;
    const self = this;
    if (this.iframe) {
      if (animate === true) {
        this.iframeContainer.classList.add('is-animating');
        this.iframe.classList.add('is-animating');
      }
      if (size < maxViewportWidth) {
        theSize = size;
      } else {
        theSize = maxViewportWidth;
      }
      if (size < minViewportWidth) {
        theSize = minViewportWidth;
      }
      if (theSize > this.clientWidth) {
        theSize = this.clientWidth;
      }
      this.iframeContainer.style.width = theSize + 'px';
      setTimeout(function () {
        if (animate === true) {
          self.iframeContainer.classList.remove('is-animating');
          self.iframe.classList.remove('is-animating');
        }
      }, 800);
      const targetOrigin =
        window.location.protocol === 'file:'
          ? '*'
          : window.location.protocol + '//' + window.location.host;
      const obj = JSON.stringify({
        event: 'patternLab.resize',
        resize: 'true',
      });
      if (this._hasInitiallyRendered) {
        this.iframe.contentWindow.postMessage(obj, targetOrigin);
      }
      this.updateSizeReading(theSize); 
    }
  }
sizeiframe ( size , animate ) { let theSize ; const self = this ; if ( this . iframe ) { if ( animate === true ) { this . iframeContainer . classList . add ( 'is-animating' ) ; this . iframe . classList . add ( 'is-animating' ) ; } if ( size < maxViewportWidth ) { theSize = size ; } else { theSize = maxViewportWidth ; } if ( size < minViewportWidth ) { theSize = minViewportWidth ; } if ( theSize > this . clientWidth ) { theSize = this . clientWidth ; } this . iframeContainer . style . width = theSize + 'px' ; setTimeout ( function ( ) { if ( animate === true ) { self . iframeContainer . classList . remove ( 'is-animating' ) ; self . iframe . classList . remove ( 'is-animating' ) ; } } , 800 ) ; const targetOrigin = window . location . protocol === 'file:' ? '*' : window . location . protocol + '//' + window . location . host ; const obj = JSON . stringify ( { event : 'patternLab.resize' , resize : 'true' , } ) ; if ( this . _hasInitiallyRendered ) { this . iframe . contentWindow . postMessage ( obj , targetOrigin ) ; } this . updateSizeReading ( theSize ) ; } }
'animate' is a boolean for switching the CSS animation on or off.
' animate ' is a boolean for switching the CSS animation on or off .
// @todo: refactor to better handle the iframe async rendering //If the entered size is larger than the max allowed viewport size, cap value at max vp size //If the entered size is less than the minimum allowed viewport size, cap value at min vp size // resize viewport wrapper to desired size + size of drag resize handler // this.iframeContainer.style.width = theSize + this.viewportResizeHandleWidth + 'px'; // this.iframe.style.width = theSize + 'px'; // resize viewport to desired size // auto-remove transition classes if not the animate param isn't set to true // only tell the iframe to resize when it's ready // update the displayed values in the toolbar