How to use IframeWrapper method in storybook-root

Best JavaScript code snippet using storybook-root

iframewrapper.js

Source:iframewrapper.js

1/**2 * @license3 * Copyright 2017 Google Inc.4 *5 * Licensed under the Apache License, Version 2.0 (the "License");6 * you may not use this file except in compliance with the License.7 * You may obtain a copy of the License at8 *9 *   http://www.apache.org/licenses/LICENSE-2.010 *11 * Unless required by applicable law or agreed to in writing, software12 * distributed under the License is distributed on an "AS IS" BASIS,13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.14 * See the License for the specific language governing permissions and15 * limitations under the License.16 */17/**18 * @fileoverview Defines fireauth.iframeclient.IframeWrapper used to communicate19 * with the hidden iframe to detect Auth events.20 */21goog.provide('fireauth.iframeclient.IframeWrapper');22goog.require('fireauth.util');23goog.require('goog.Promise');24goog.require('goog.html.TrustedResourceUrl');25goog.require('goog.net.jsloader');26goog.require('goog.string.Const');27/**28 * Defines the hidden iframe wrapper for cross origin communications.29 * @param {string} url The hidden iframe src URL.30 * @constructor31 */32fireauth.iframeclient.IframeWrapper = function (url) {33  /** @private {string} The hidden iframe URL. */34  this.url_ = url;35  /**36   * @type {?gapi.iframes.Iframe}37   * @private38   */39  this.iframe_ = null;40  /** @private {!goog.Promise} A promise that resolves on iframe open. */41  this.onIframeOpen_ = this.open_();42};43/**44 * @typedef {{45 *   type: string46 * }}47 */48fireauth.iframeclient.IframeWrapper.Message;49/**50 * Returns URL, src of the hidden iframe.51 * @return {string}52 * @private53 */54fireauth.iframeclient.IframeWrapper.prototype.getPath_ = function () {55  return this.url_;56};57/**58 * @return {!goog.Promise} The promise that resolves when the iframe is ready.59 */60fireauth.iframeclient.IframeWrapper.prototype.onReady = function () {61  return this.onIframeOpen_;62};63/**64 * Returns options used to open the iframe.65 * @return {!gapi.iframes.OptionsBag}66 * @private67 */68fireauth.iframeclient.IframeWrapper.prototype.getOptions_ = function () {69  var options = /** @type {!gapi.iframes.OptionsBag} */ ({70    'where': document.body,71    'url': this.getPath_(),72    'messageHandlersFilter': /** @type {!gapi.iframes.IframesFilter} */ (73      fireauth.util.getObjectRef('gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER')74    ),75    'attributes': {76      'style': {77        'position': 'absolute',78        'top': '-100px',79        'width': '1px',80        'height': '1px'81      }82    },83    'dontclear': true84  });85  return options;86};87/**88 * Opens an iframe.89 * @return {!goog.Promise} A promise that resolves on successful iframe open.90 * @private91 */92fireauth.iframeclient.IframeWrapper.prototype.open_ = function () {93  var self = this;94  return fireauth.iframeclient.IframeWrapper.loadGApiJs_().then(function () {95    return new goog.Promise(function (resolve, reject) {96      /**97       * @param {?gapi.iframes.Iframe} iframe The new opened iframe.98       */99      var onOpen = function (iframe) {100        self.iframe_ = iframe;101        self.iframe_.restyle({102          // Prevent iframe from closing on mouse out.103          'setHideOnLeave': false104        });105        // Confirm iframe is correctly loaded.106        // To fallback on failure, set a timeout.107        var networkErrorTimer = setTimeout(function () {108          reject(new Error('Network Error'));109        }, fireauth.iframeclient.IframeWrapper.PING_TIMEOUT_.get());110        // Clear timer and resolve pending iframe ready promise.111        var clearTimerAndResolve = function () {112          clearTimeout(networkErrorTimer);113          resolve();114        };115        // This returns an IThenable. However the reject part does not call116        // when the iframe is not loaded.117        iframe118          .ping(clearTimerAndResolve)119          .then(clearTimerAndResolve, function (error) {120            reject(new Error('Network Error'));121          });122      };123      /** @type {function():!gapi.iframes.Context} */ (124        fireauth.util.getObjectRef('gapi.iframes.getContext')125      )().open(self.getOptions_(), onOpen);126    });127  });128};129/**130 * @param {!fireauth.iframeclient.IframeWrapper.Message} message to send.131 * @return {!goog.Promise<?Object>} The promise that resolve when message is132 *     sent.133 */134fireauth.iframeclient.IframeWrapper.prototype.sendMessage = function (message) {135  var self = this;136  return this.onIframeOpen_.then(function () {137    return new goog.Promise(function (resolve, reject) {138      self.iframe_.send(139        message['type'],140        message,141        resolve,142        /** @type {!gapi.iframes.IframesFilter} */ (143          fireauth.util.getObjectRef('gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER')144        )145      );146    });147  });148};149/**150 * Registers a listener to a post message.151 * @param {string} eventName The message to register for.152 * @param {gapi.iframes.MessageHandler} handler Message handler.153 */154fireauth.iframeclient.IframeWrapper.prototype.registerEvent = function (155  eventName,156  handler157) {158  var self = this;159  this.onIframeOpen_.then(function () {160    self.iframe_.register(161      eventName,162      /** @type {function(this:gapi.iframes.Iframe,163       *                  *, gapi.iframes.Iframe): *}164       */ (handler),165      /** @type {!gapi.iframes.IframesFilter} */ (166        fireauth.util.getObjectRef('gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER')167      )168    );169  });170};171/**172 * Unregisters a listener to a post message.173 * @param {string} eventName The message to unregister.174 * @param {gapi.iframes.MessageHandler} handler Message handler.175 */176fireauth.iframeclient.IframeWrapper.prototype.unregisterEvent = function (177  eventName,178  handler179) {180  var self = this;181  this.onIframeOpen_.then(function () {182    self.iframe_.unregister(183      eventName,184      /** @type {(function(this:gapi.iframes.Iframe,185       *                   *, gapi.iframes.Iframe): *|undefined)}186       */ (handler)187    );188  });189};190/** @private @const {!goog.string.Const} The GApi loader URL. */191fireauth.iframeclient.IframeWrapper.GAPI_LOADER_SRC_ = goog.string.Const.from(192  'https://apis.google.com/js/api.js?onload=%{onload}'193);194/**195 * @private @const {!fireauth.util.Delay} The gapi.load network error timeout196 *     delay with units in ms.197 */198fireauth.iframeclient.IframeWrapper.NETWORK_TIMEOUT_ = new fireauth.util.Delay(199  30000,200  60000201);202/**203 * @private @const {!fireauth.util.Delay} The iframe ping error timeout delay204 *     with units in ms.205 */206fireauth.iframeclient.IframeWrapper.PING_TIMEOUT_ = new fireauth.util.Delay(207  5000,208  15000209);210/** @private {?goog.Promise} The cached GApi loader promise. */211fireauth.iframeclient.IframeWrapper.cachedGApiLoader_ = null;212/** Resets the cached GApi loader. */213fireauth.iframeclient.IframeWrapper.resetCachedGApiLoader = function () {214  fireauth.iframeclient.IframeWrapper.cachedGApiLoader_ = null;215};216/**217 * Loads the GApi client library if it is not loaded for gapi.iframes usage.218 * @return {!goog.Promise} A promise that resolves when gapi.iframes is loaded.219 * @private220 */221fireauth.iframeclient.IframeWrapper.loadGApiJs_ = function () {222  // If already pending or resolved, return the cached promise.223  if (fireauth.iframeclient.IframeWrapper.cachedGApiLoader_) {224    return fireauth.iframeclient.IframeWrapper.cachedGApiLoader_;225  }226  // If there is no cached promise, initialize a new one.227  fireauth.iframeclient.IframeWrapper.cachedGApiLoader_ = new goog.Promise(228    function (resolve, reject) {229      // Function to run when gapi.load is ready.230      var onGapiLoad = function () {231        // The developer may have tried to previously run gapi.load and failed.232        // Run this to fix that.233        fireauth.util.resetUnloadedGapiModules();234        var loader = /** @type {function(string, !Object)} */ (235          fireauth.util.getObjectRef('gapi.load')236        );237        loader('gapi.iframes', {238          'callback': resolve,239          'ontimeout': function () {240            // The above reset may be sufficient, but having this reset after241            // failure ensures that if the developer calls gapi.load after the242            // connection is re-established and before another attempt to embed243            // the iframe, it would work and would not be broken because of our244            // failed attempt.245            // Timeout when gapi.iframes.Iframe not loaded.246            fireauth.util.resetUnloadedGapiModules();247            reject(new Error('Network Error'));248          },249          'timeout': fireauth.iframeclient.IframeWrapper.NETWORK_TIMEOUT_.get()250        });251      };252      if (fireauth.util.getObjectRef('gapi.iframes.Iframe')) {253        // If gapi.iframes.Iframe available, resolve.254        resolve();255      } else if (fireauth.util.getObjectRef('gapi.load')) {256        // Gapi loader ready, load gapi.iframes.257        onGapiLoad();258      } else {259        // Create a new iframe callback when this is called so as not to overwrite260        // any previous defined callback. This happens if this method is called261        // multiple times in parallel and could result in the later callback262        // overwriting the previous one. This would end up with a iframe263        // timeout.264        var cbName =265          '__iframefcb' + Math.floor(Math.random() * 1000000).toString();266        // GApi loader not available, dynamically load platform.js.267        goog.global[cbName] = function () {268          // GApi loader should be ready.269          if (fireauth.util.getObjectRef('gapi.load')) {270            onGapiLoad();271          } else {272            // Gapi loader failed, throw error.273            reject(new Error('Network Error'));274          }275        };276        // Build GApi loader.277        var url = goog.html.TrustedResourceUrl.format(278          fireauth.iframeclient.IframeWrapper.GAPI_LOADER_SRC_,279          { 'onload': cbName }280        );281        // Load GApi loader.282        var result = goog.Promise.resolve(goog.net.jsloader.safeLoad(url));283        result.thenCatch(function (error) {284          // In case library fails to load, typically due to a network error,285          // reset cached loader to null to force a refresh on a retrial.286          reject(new Error('Network Error'));287        });288      }289    }290  ).thenCatch(function (error) {291    // Reset cached promise to allow for retrial.292    fireauth.iframeclient.IframeWrapper.cachedGApiLoader_ = null;293    throw error;294  });295  return fireauth.iframeclient.IframeWrapper.cachedGApiLoader_;...

player.ts

Source:player.ts

1import {EventEmitter} from "@angular/core";2import {PlaybackEngine, PlaybackViewPortSize} from "./playback-engine";3import {createVirtualDOM} from "./virtual-dom/virtual-dom";4import {5  IFrameWrapper, PlaybackContainerElement,6  PlaybackWindowRef,7  PlayerElement8} from "../containers/player-container/player-container.component";9import {calculateScale} from "./utils/calculate-scale";10import {createPlaybackSequence} from "./playback-sequence";11import {fromEvent} from "rxjs";12export type CurrentTime = number;13export interface PlayerOptions {14  width: number,15  height: number16}17export class Player {18  private _currentTime: EventEmitter<CurrentTime> = new EventEmitter<CurrentTime>();19  private _totalTime: number;20  //todo: merge subscriptions in order to unsubscribe when player destroyed removed21  constructor(22    private options: PlayerOptions,23    private iframeWrapper: IFrameWrapper,24    private playerEl: PlayerElement,25    private playbackContainerEl: PlaybackContainerElement,26    private playbackEngine: PlaybackEngine27  ) {28    this.iframeWrapper.width = options.width;29    this.iframeWrapper.height = options.height;30    this.keepResponsive();31    fromEvent(window, "resize").subscribe(() => this.keepResponsive());32    this.playbackEngine.onFrameUpdate.subscribe(progress => this._currentTime.emit(progress));33    this.playbackEngine.viewPortChanged.subscribe((viewPortSize: PlaybackViewPortSize) => {34      this.iframeWrapper.width = viewPortSize.width;35      this.iframeWrapper.height = viewPortSize.height;36      this.keepResponsive();37    });38  }39  private keepResponsive() {40    const offsetWidth = 60, offsetHeight = 30;41    const sectionWidth = this.playerEl.width - offsetWidth,42      sectionHeight = this.playerEl.height - offsetHeight;43    const scale = calculateScale(44      sectionWidth,45      sectionHeight,46      this.iframeWrapper.width,47      this.iframeWrapper.height48    );49    const marginLeft = (sectionWidth - this.iframeWrapper.width * scale) / 2 + (offsetWidth / 2);50    const marginTop = (sectionHeight - this.iframeWrapper.height * scale) / 2 + (offsetHeight / 2);51    this.playbackContainerEl.left = marginLeft;52    this.playbackContainerEl.top = marginTop;53    this.playbackContainerEl.scale = scale;54  }55  get currentTime(): EventEmitter<CurrentTime> {56    return this._currentTime;57  }58  get totalTime(): number {59    return this._totalTime;60  }61  play() {62    this.playbackEngine.play();63  }64  stop() {65    this.playbackEngine.stop();66  }67  pause() {68    this.playbackEngine.pause();69  }70}71export const createPlayer = (72  playbackMetadata,73  DOMState,74  recordings,75  windowRef: PlaybackWindowRef,76  iframeWrapper: IFrameWrapper,77  playerElement: PlayerElement,78  playbackContainerElement: PlaybackContainerElement) => {79  //build virtual dom based on DOM snapshot80  const virtualDOM = createVirtualDOM(DOMState, playbackMetadata.userInfo.origin);81  const playbackEngine = new PlaybackEngine(windowRef, virtualDOM);82  playbackEngine.sequence = createPlaybackSequence(playbackMetadata, recordings);83  const options = {84    width: playbackMetadata.userInfo.width,85    height: playbackMetadata.userInfo.height86  };87  return new Player(options, iframeWrapper, playerElement, playbackContainerElement, playbackEngine);...

backend.js

Source:backend.js

1$(document).ready(function($) {2  var body = document.getElementsByTagName('body')[0];3  var cityBlock = document.querySelector('.acf-field-5beac5c82839e');4  var iframeWrapper = document.createElement('div');5  iframeWrapper.style.position = 'fixed';6  iframeWrapper.style.width = '100%';7  iframeWrapper.style.height = '100%';8  iframeWrapper.style.top = 0;9  iframeWrapper.style.left = 0;10  iframeWrapper.style.display = 'none';11  iframeWrapper.style.justifyContent = 'center';12  iframeWrapper.style.alignItems = 'center';13  iframeWrapper.style.backgroundColor = 'white';14  iframeWrapper.style.zIndex = 100;15  var iframeClose = document.createElement('div');16  iframeClose.innerText = 'Close';17  iframeClose.style.position = 'absolute';18  iframeClose.style.top = '100px';19  iframeClose.style.right = '40px';20  iframeClose.style.cursor = 'pointer';21  iframeClose.addEventListener('click', function() {22    iframeWrapper.style.display = 'none';23  });24  var iframe = document.createElement('iframe');25  iframe.style.height = '80vh';26  iframe.style.width = '60%';27  if (cityBlock) {28    var button = document.createElement('p');29    button.innerText = 'validera adress';30    button.style.cursor = 'pointer';31    button.addEventListener('click', function() {32      var street = document.querySelector('#acf-field_5beac5ab2839d').value;33      var city = document.querySelector('#acf-field_5beac5c82839e').value;34      iframe.src =35        'https://nominatim.openstreetmap.org/search?q=' + street + ',' + city;36      iframeWrapper.style.display = 'flex';37    });38    cityBlock.appendChild(button);39    iframeWrapper.appendChild(iframeClose);40    iframeWrapper.appendChild(iframe);41    body.appendChild(iframeWrapper);42  }...

Using AI Code Generation

1import { IframeWrapper } from 'storybook-root-iframe';2export default {3};4const Template = (args) => <IframeWrapper {...args} />;5export const Default = Template.bind({});6Default.args = {7};8import { addDecorator } from '@storybook/react';9import { withRootIframe } from 'storybook-root-iframe';10addDecorator(withRootIframe);11import { addons } from '@storybook/addons';12import { withRootIframe } from 'storybook-root-iframe';13addons.setConfig({14  previewTabs: {15    'storybook-root-iframe/root': {16    },17  },18});19module.exports = {20};21const path = require('path');22module.exports = async ({ config }) => {23  config.resolve.modules.push(path.resolve(__dirname, '../'));24  return config;25};26{27  "compilerOptions": {28  },29}30{31  "compilerOptions": {32  },

Using AI Code Generation

1import { IframeWrapper } from 'storybook-root-iframe';2import MyComponent from './MyComponent.vue';3export default {4};5export const MyComponentStory = () => ({6  components: { MyComponent },7});8MyComponentStory.story = {9};10import { addDecorator } from '@storybook/vue';11import { IframeWrapper } from 'storybook-root-iframe';12addDecorator(IframeWrapper);

Using AI Code Generation

1import { getIframe } from 'storybook-root-iframe';2const iframe = getIframe();3import { getIframe } from 'storybook-preview-iframe';4const iframe = getIframe();5import { getIframe } from 'storybook-preview-iframe';6const iframe = getIframe();7import { getIframe } from 'storybook-preview-iframe';8const iframe = getIframe();9import { getIframe } from 'storybook-preview-iframe';10const iframe = getIframe();11import { getIframe } from 'storybook-preview-iframe';12const iframe = getIframe();13import { getIframe } from 'storybook-preview-iframe';14const iframe = getIframe();15import { getIframe } from 'storybook-preview-iframe';16const iframe = getIframe();17import { getIframe } from 'storybook-preview-iframe';18const iframe = getIframe();19import { getIframe } from 'storybook-preview-iframe';20const iframe = getIframe();21import { getIframe } from 'storybook-preview-iframe';22const iframe = getIframe();23import { getIframe } from 'storybook-preview-iframe';24const iframe = getIframe();25import { getIframe } from 'storybook-preview-iframe';26const iframe = getIframe();27import { getIframe } from 'storybook-preview-iframe';28const iframe = getIframe();29import { getIframe } from

Using AI Code Generation

1import { IFrameWrapper } from 'storybook-root';2export default {3};4"scripts": {5}6module.exports = {7  webpackFinal: async (config) => {8    config.resolve.alias['storybook-root'] = path.resolve(__dirname, '../src');9    return config;10  },11};12import { addDecorator } from '@storybook/react';13import { withA11y } from '@storybook/addon-a11y';14import { withKnobs } from '@storybook/addon-knobs';15import { withTests } from '@storybook/addon-jest';16import results from '../jest-test-results.json';17addDecorator(withA11y);18addDecorator(withKnobs);19addDecorator(withTests({ results }));20  body {21    margin: 0;22  }

Using AI Code Generation

1import { getStorybookIframe } from 'storybook-root-iframe';2const iframe = await getStorybookIframe();3iframe.contentWindow.document.querySelector('body').style.backgroundColor = 'red';4import { IframeWrapper } from 'storybook-root-iframe';5export const parameters = {6  previewTabs: {7    'storybook-root-iframe': {8      render: () => <IframeWrapper />,9    },10  },11};12import { addons } from '@storybook/addons';13import { IframeWrapper } from 'storybook-root-iframe';14addons.setConfig({15  previewTabs: {16    'storybook-root-iframe': {17      render: () => <IframeWrapper />,18    },19  },20});21  window.__STORYBOOK_ADDONS = window.__STORYBOOK_ADDONS || [];22  window.__STORYBOOK_ADDONS.push({23    render: () => '<iframe-wrapper></iframe-wrapper>',24  });25  window.__STORYBOOK_ADDONS = window.__STORYBOOK_ADDONS || [];26  window.__STORYBOOK_ADDONS.push({

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.