How to use panels method in storybook-root

Best JavaScript code snippet using storybook-root

panels_ipe.js

Source:panels_ipe.js

1// Ensure the $ alias is owned by jQuery.2(function($) {3// randomly lock a pane.4// @debug only5Drupal.settings.Panels = Drupal.settings.Panels || {};6Drupal.settings.Panels.RegionLock = {7  10: { 'top': false, 'left': true, 'middle': true }8}9Drupal.PanelsIPE = {10  editors: {},11  bindClickDelete: function(context) {12    $('a.pane-delete:not(.pane-delete-processed)', context)13      .addClass('pane-delete-processed')14      .click(function() {15        if (confirm('Remove this pane?')) {16          $(this).parents('div.panels-ipe-portlet-wrapper').fadeOut('medium', function() {17            $(this).empty().remove();18          });19          $(this).parents('div.panels-ipe-display-container').addClass('changed');20        }21        return false;22      });23  }24}25Drupal.behaviors.PanelsIPE = {26  attach: function(context) {27    for (var i in Drupal.settings.PanelsIPECacheKeys) {28      var key = Drupal.settings.PanelsIPECacheKeys[i];29      $('div#panels-ipe-display-' + key + ':not(.panels-ipe-processed)')30        .addClass('panels-ipe-processed')31        .each(function() {32          Drupal.PanelsIPE.editors[key] = new DrupalPanelsIPE(key);33          Drupal.PanelsIPE.editors[key].showContainer();34        });35    }36    Drupal.PanelsIPE.bindClickDelete(context);37  }38};39/**40 * Base object (class) definition for the Panels In-Place Editor.41 *42 * A new instance of this object is instanciated for every unique IPE on a given43 * page.44 *45 * Note that this form is provisional, and we hope to replace it with a more46 * flexible, loosely-coupled model that utilizes separate controllers for the47 * discrete IPE elements. This will result in greater IPE flexibility.48 */49function DrupalPanelsIPE(cache_key, cfg) {50  cfg = cfg || {};51  var ipe = this;52  this.key = cache_key;53  this.lockPath = null;54  this.state = {};55  this.container = $('#panels-ipe-control-container');56  this.control = $('div#panels-ipe-control-' + cache_key);57  this.initButton = $('div.panels-ipe-startedit', this.control);58  this.cfg = cfg;59  this.changed = false;60  this.sortableOptions = $.extend({61    opacity: 0.75, // opacity of sortable while sorting62    items: 'div.panels-ipe-portlet-wrapper',63    handle: 'div.panels-ipe-draghandle',64    cancel: '.panels-ipe-nodrag',65    dropOnEmpty: true66  }, cfg.sortableOptions || {});67  this.regions = [];68  this.sortables = {};69  $(document).bind('CToolsDetachBehaviors', function() {70    // If the IPE is off and the container is not visible, then we need71    // to reshow the container on modal close.72    if (!$('.panels-ipe-form-container', ipe.control).html() && !ipe.container.is(':visible')) {73      ipe.showContainer();74      ipe.cancelLock();75    }76  });77  // If a user navigates away from a locked IPE, cancel the lock in the background.78  $(window).bind('unload', function() {79    ipe.cancelLock(true);80  });81  /**82   * If something caused us to abort what we were doing, send a background83   * cancel lock request to the server so that we do not leave stale locks84   * hanging around.85   */86  this.cancelLock = function(sync) {87    // If there's a lockpath and an ajax available, inform server to clear lock.88    // We borrow the ajax options from the customize this page link.89    if (ipe.lockPath && Drupal.ajax['panels-ipe-customize-page']) {90      var ajaxOptions = {91        type: 'POST',92        url: ipe.lockPath93      }94      if (sync) {95        ajaxOptions.async = false;96      }97      // Make sure we don't somehow get another one:98      ipe.lockPath = null;99      // Send the request. This is synchronous to prevent being cancelled.100      $.ajax(ajaxOptions);101    }102  }103  this.activateSortable = function(event, ui) {104    if (!Drupal.settings.Panels || !Drupal.settings.Panels.RegionLock) {105      // don't bother if there are no region locks in play.106      return;107    }108    var region = event.data.region;109    var paneId = ui.item.attr('id').replace('panels-ipe-paneid-', '');110    var disabledRegions = false;111    // Determined if this pane is locked out of this region.112    if (!Drupal.settings.Panels.RegionLock[paneId] || Drupal.settings.Panels.RegionLock[paneId][region]) {113      ipe.sortables[region].sortable('enable');114      ipe.sortables[region].sortable('refresh');115    }116    else {117      disabledRegions = true;118      ipe.sortables[region].sortable('disable');119      ipe.sortables[region].sortable('refresh');120    }121    // If we disabled regions, we need to122    if (disabledRegions) {123      $(event.srcElement).bind('dragstop', function(event, ui) {124        // Go through125      });126    }127  };128  // When dragging is stopped, we need to ensure all sortable regions are enabled.129  this.enableRegions = function(event, ui) {130    for (var i in ipe.regions) {131      ipe.sortables[ipe.regions[i]].sortable('enable');132      ipe.sortables[ipe.regions[i]].sortable('refresh');133    }134  }135  this.initSorting = function() {136    var $region = $(this).parents('.panels-ipe-region');137    var region = $region.attr('id').replace('panels-ipe-regionid-', '');138    ipe.sortables[region] = $(this).sortable(ipe.sortableOptions);139    ipe.regions.push(region);140    $(this).bind('sortactivate', {region: region}, ipe.activateSortable);141  };142  this.initEditing = function(formdata) {143    ipe.topParent = $('div#panels-ipe-display-' + cache_key);144    ipe.backup = this.topParent.clone();145    // See http://jqueryui.com/demos/sortable/ for details on the configuration146    // parameters used here.147    ipe.changed = false;148    $('div.panels-ipe-sort-container', ipe.topParent).each(ipe.initSorting);149    // Since the connectWith option only does a one-way hookup, iterate over150    // all sortable regions to connect them with one another.151    $('div.panels-ipe-sort-container', ipe.topParent)152      .sortable('option', 'connectWith', ['div.panels-ipe-sort-container']);153    $('div.panels-ipe-sort-container', ipe.topParent).bind('sortupdate', function() {154      ipe.changed = true;155    });156    $('div.panels-ipe-sort-container', ipe.topParent).bind('sortstop', this.enableRegions);157    $('.panels-ipe-form-container', ipe.control).append(formdata);158    $('input:submit:not(.ajax-processed)', ipe.control).addClass('ajax-processed').each(function() {159      var element_settings = {};160      element_settings.url = $(this.form).attr('action');161      element_settings.setClick = true;162      element_settings.event = 'click';163      element_settings.progress = { 'type': 'throbber' };164      element_settings.ipe_cache_key = cache_key;165      var base = $(this).attr('id');166      Drupal.ajax[ipe.base] = new Drupal.ajax(base, this, element_settings);167    });168    // Perform visual effects in a particular sequence.169    // .show() + .hide() cannot have speeds associated with them, otherwise170    // it clears out inline styles.171    $('.panels-ipe-on').show();172    ipe.showForm();173    ipe.topParent.addClass('panels-ipe-editing');174    //Reposition the "Add new pane" button175    $('.panels-ipe-newblock').each(function() {176      var link_width_half = parseInt($(this).children('a').outerWidth() / 2);177      $(this).css('margin-left', '-' + link_width_half + 'px');178      $(this).css('margin-top', '-' + parseInt($(this).children('a').outerHeight() / 2) + 'px');179      $(this).parents('.panels-ipe-placeholder').find('h3').css('width', parseInt(($(this).parents('.panels-ipe-placeholder').width() / 2) - link_width_half) + 'px');180    });181  };182  this.hideContainer = function() {183    ipe.container.slideUp('fast');184  };185  this.showContainer = function() {186    ipe.container.slideDown('normal');187  };188  this.showButtons = function() {189    $('.panels-ipe-form-container').hide();190    $('.panels-ipe-button-container').show();191    ipe.showContainer();192  };193  this.showForm = function() {194    $('.panels-ipe-button-container').hide();195    $('.panels-ipe-form-container').show();196    ipe.showContainer();197  };198  this.endEditing = function() {199    ipe.lockPath = null;200    $('.panels-ipe-form-container', ipe.control).empty();201    // Re-show all the IPE non-editing meta-elements202    $('div.panels-ipe-off').show('fast');203    ipe.showButtons();204    // Re-hide all the IPE meta-elements205    $('div.panels-ipe-on').hide();206    if (ipe.topParent) {207      ipe.topParent.removeClass('panels-ipe-editing');208      $('div.panels-ipe-sort-container', ipe.topParent).sortable("destroy");209    }210  };211  this.saveEditing = function() {212    $('div.panels-ipe-region', ipe.topParent).each(function() {213      var val = '';214      var region = $(this).attr('id').split('panels-ipe-regionid-')[1];215      $(this).find('div.panels-ipe-portlet-wrapper').each(function() {216        var id = $(this).attr('id').split('panels-ipe-paneid-')[1];217        if (id) {218          if (val) {219            val += ',';220          }221          val += id;222        }223      });224      $('input[name="panel[pane][' +  region + ']"]', ipe.control).val(val);225    });226  }227  this.cancelIPE = function() {228    ipe.hideContainer();229    ipe.topParent.fadeOut('medium', function() {230      ipe.topParent.replaceWith(ipe.backup.clone());231      ipe.topParent = $('div#panels-ipe-display-' + ipe.key);232      // Processing of these things got lost in the cloning, but the classes remained behind.233      // @todo this isn't ideal but I can't seem to figure out how to keep an unprocessed backup234      // that will later get processed.235      $('.ctools-use-modal-processed', ipe.topParent).removeClass('ctools-use-modal-processed');236      $('.pane-delete-processed', ipe.topParent).removeClass('pane-delete-processed');237      ipe.topParent.fadeIn('medium');238      Drupal.attachBehaviors();239    });240  };241  this.cancelEditing = function() {242    if (ipe.topParent.hasClass('changed')) {243      ipe.changed = true;244    }245    if (!ipe.changed || confirm(Drupal.t('This will discard all unsaved changes. Are you sure?'))) {246      this.cancelIPE();247      return true;248    }249    else {250      // Cancel the submission.251      return false;252    }253  };254  this.createSortContainers = function() {255    $('div.panels-ipe-region', this.topParent).each(function() {256      $('div.panels-ipe-portlet-marker', this).parent()257        .wrapInner('<div class="panels-ipe-sort-container" />');258      // Move our gadgets outside of the sort container so that sortables259      // cannot be placed after them.260      $('div.panels-ipe-portlet-static', this).each(function() {261        $(this).prependTo($(this).parent().parent());262      });263      // Also remove the last panel separator.264      $('div.panel-separator', this).filter(':last').remove();265    });266  }267  this.createSortContainers();268};269$(function() {270  Drupal.ajax.prototype.commands.initIPE = function(ajax, data, status) {271    if (Drupal.PanelsIPE.editors[data.key]) {272      Drupal.PanelsIPE.editors[data.key].initEditing(data.data);273      Drupal.PanelsIPE.editors[data.key].lockPath = data.lockPath;274    }275  };276  Drupal.ajax.prototype.commands.IPEsetLockState = function(ajax, data, status) {277    if (Drupal.PanelsIPE.editors[data.key]) {278      Drupal.PanelsIPE.editors[data.key].lockPath = data.lockPath;279    }280  };281  Drupal.ajax.prototype.commands.cancelIPE = function(ajax, data, status) {282    if (Drupal.PanelsIPE.editors[data.key]) {283      Drupal.PanelsIPE.editors[data.key].cancelIPE();284      Drupal.PanelsIPE.editors[data.key].endEditing();285    }286  };287  Drupal.ajax.prototype.commands.unlockIPE = function(ajax, data, status) {288    if (confirm(data.message)) {289      var ajaxOptions = ajax.options;290      ajaxOptions.url = data.break_path;291      $.ajax(ajaxOptions);292    }293    else {294      Drupal.PanelsIPE.editors[data.key].endEditing();295    }296  };297  Drupal.ajax.prototype.commands.endIPE = function(ajax, data, status) {298    if (Drupal.PanelsIPE.editors[data.key]) {299      Drupal.PanelsIPE.editors[data.key].endEditing();300    }301  };302  /**303   * Override the eventResponse on ajax.js so we can add a little extra304   * behavior.305   */306  Drupal.ajax.prototype.ipeReplacedEventResponse = Drupal.ajax.prototype.eventResponse;307  Drupal.ajax.prototype.eventResponse = function (element, event) {308    if ($(this.element).attr('id') == 'panels-ipe-cancel') {309      if (!Drupal.PanelsIPE.editors[this.element_settings.ipe_cache_key].cancelEditing()) {310        return false;311      }312    }313    var retval = this.ipeReplacedEventResponse(element, event);314    if (this.ajaxing && this.element_settings.ipe_cache_key) {315      // Move the throbber so that it appears outside our container.316      if (this.progress.element) {317        $(this.progress.element).addClass('ipe-throbber').appendTo($('body'));318      }319      Drupal.PanelsIPE.editors[this.element_settings.ipe_cache_key].hideContainer();320    }321    // @TODO $('#panels-ipe-throbber-backdrop').remove();322    return retval;323  };324  /**325   * Override the eventResponse on ajax.js so we can add a little extra326   * behavior.327   */328  Drupal.ajax.prototype.ipeReplacedError = Drupal.ajax.prototype.error;329  Drupal.ajax.prototype.error = function (response, uri) {330    var retval = this.ipeReplacedError(response, uri);331    if (this.element_settings.ipe_cache_key) {332      Drupal.PanelsIPE.editors[this.element_settings.ipe_cache_key].showContainer();333    }334  };335  Drupal.ajax.prototype.ipeReplacedBeforeSerialize = Drupal.ajax.prototype.beforeSerialize;336  Drupal.ajax.prototype.beforeSerialize = function (element_settings, options) {337    if ($(this.element).attr('id') == 'panels-ipe-save') {338      Drupal.PanelsIPE.editors[this.element_settings.ipe_cache_key].saveEditing();339    };340    return this.ipeReplacedBeforeSerialize(element_settings, options);341  };342});343/**344 * Apply margin to bottom of the page.345 *346 * Note that directly applying marginBottom does not work in IE. To prevent347 * flickering/jumping page content with client-side caching, this is a regular348 * Drupal behavior.349 *350 * @see admin_menu.js via https://drupal.org/project/admin_menu351 */352Drupal.behaviors.panelsIpeMarginBottom = {353  attach: function () {354    $('body:not(.panels-ipe)').addClass('panels-ipe');355  }356};...

siteorigin-panels-layout-block.js

Source:siteorigin-panels-layout-block.js

1"use strict";2function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }3function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }4function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }5function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }6function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }7function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }8function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }9function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }10function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }11var _lodash = lodash,12    isEqual = _lodash.isEqual,13    debounce = _lodash.debounce,14    isEmpty = _lodash.isEmpty,15    isFunction = _lodash.isFunction;16var registerBlockType = wp.blocks.registerBlockType;17var _wp$element = wp.element,18    Component = _wp$element.Component,19    Fragment = _wp$element.Fragment,20    RawHTML = _wp$element.RawHTML,21    createRef = _wp$element.createRef;22var BlockControls = wp.editor.BlockControls;23var _wp$components = wp.components,24    Toolbar = _wp$components.Toolbar,25    IconButton = _wp$components.IconButton,26    Spinner = _wp$components.Spinner;27var __ = wp.i18n.__;28var _window = window,29    soPanelsBlockEditorAdmin = _window.soPanelsBlockEditorAdmin;30var SiteOriginPanelsLayoutBlock =31/*#__PURE__*/32function (_Component) {33  _inherits(SiteOriginPanelsLayoutBlock, _Component);34  function SiteOriginPanelsLayoutBlock(props) {35    var _this;36    _classCallCheck(this, SiteOriginPanelsLayoutBlock);37    _this = _possibleConstructorReturn(this, _getPrototypeOf(SiteOriginPanelsLayoutBlock).call(this, props));38    var editMode = soPanelsBlockEditorAdmin.defaultMode === 'edit' || isEmpty(props.panelsData);39    _this.state = {40      editing: editMode,41      loadingPreview: !editMode,42      previewHtml: ''43    };44    _this.panelsContainer = createRef();45    _this.previewContainer = createRef();46    _this.panelsInitialized = false;47    _this.previewInitialized = false;48    return _this;49  }50  _createClass(SiteOriginPanelsLayoutBlock, [{51    key: "componentDidMount",52    value: function componentDidMount() {53      this.isStillMounted = true;54      if (this.state.editing) {55        this.setupPanels();56      } else if (!this.state.editing && !this.previewInitialized) {57        this.fetchPreview(this.props);58        this.fetchPreview = debounce(this.fetchPreview, 500);59      }60    }61  }, {62    key: "componentWillUnmount",63    value: function componentWillUnmount() {64      this.isStillMounted = false;65      if (this.builderView) {66        this.builderView.off('content_change');67      }68    }69  }, {70    key: "componentDidUpdate",71    value: function componentDidUpdate(prevProps) {72      // let propsChanged = !isEqual( prevProps.panelsData, this.props.panelsData );73      if (this.state.editing && !this.panelsInitialized) {74        this.setupPanels();75      } else if (this.state.loadingPreview) {76        this.fetchPreview(this.props);77      } else if (!this.previewInitialized && this.previewContainer.current) {78        jQuery(document).trigger('panels_setup_preview');79        this.previewInitialized = true;80      }81    }82  }, {83    key: "setupPanels",84    value: function setupPanels() {85      var _this2 = this;86      var $panelsContainer = jQuery(this.panelsContainer.current);87      var config = {88        editorType: 'standalone'89      };90      var builderModel = new panels.model.builder();91      this.builderView = new panels.view.builder({92        model: builderModel,93        config: config94      }); // Make sure panelsData is defined and clone so that we don't alter the underlying attribute.95      var panelsData = JSON.parse(JSON.stringify(jQuery.extend({}, this.props.panelsData))); // Disable block selection while dragging rows or widgets.96      var rowOrWidgetMouseDown = function rowOrWidgetMouseDown() {97        if (isFunction(_this2.props.onRowOrWidgetMouseDown)) {98          _this2.props.onRowOrWidgetMouseDown();99        }100        var rowOrWidgetMouseUp = function rowOrWidgetMouseUp() {101          jQuery(document).off('mouseup', rowOrWidgetMouseUp);102          if (isFunction(_this2.props.onRowOrWidgetMouseUp)) {103            _this2.props.onRowOrWidgetMouseUp();104          }105        };106        jQuery(document).on('mouseup', rowOrWidgetMouseUp);107      };108      this.builderView.on('row_added', function () {109        _this2.builderView.$('.so-row-move').off('mousedown', rowOrWidgetMouseDown);110        _this2.builderView.$('.so-row-move').on('mousedown', rowOrWidgetMouseDown);111        _this2.builderView.$('.so-widget').off('mousedown', rowOrWidgetMouseDown);112        _this2.builderView.$('.so-widget').on('mousedown', rowOrWidgetMouseDown);113      });114      this.builderView.on('widget_added', function () {115        _this2.builderView.$('.so-widget').off('mousedown', rowOrWidgetMouseDown);116        _this2.builderView.$('.so-widget').on('mousedown', rowOrWidgetMouseDown);117      });118      this.builderView.render().attach({119        container: $panelsContainer120      }).setData(panelsData);121      this.builderView.trigger('builder_resize');122      this.builderView.on('content_change', function () {123        var newPanelsData = _this2.builderView.getData();124        _this2.panelsDataChanged = !isEqual(panelsData, newPanelsData);125        if (_this2.panelsDataChanged) {126          if (_this2.props.onContentChange && isFunction(_this2.props.onContentChange)) {127            _this2.props.onContentChange(newPanelsData);128          }129          _this2.setState({130            loadingPreview: true,131            previewHtml: ''132          });133        }134      });135      jQuery(document).trigger('panels_setup', this.builderView);136      this.panelsInitialized = true;137    }138  }, {139    key: "fetchPreview",140    value: function fetchPreview(props) {141      var _this3 = this;142      if (!this.isStillMounted) {143        return;144      }145      this.previewInitialized = false;146      var fetchRequest = this.currentFetchRequest = jQuery.post({147        url: soPanelsBlockEditorAdmin.previewUrl,148        data: {149          action: 'so_panels_layout_block_preview',150          panelsData: JSON.stringify(props.panelsData)151        }152      }).then(function (preview) {153        if (_this3.isStillMounted && fetchRequest === _this3.currentFetchRequest && preview) {154          _this3.setState({155            previewHtml: preview,156            loadingPreview: false157          });158        }159      });160      return fetchRequest;161    }162  }, {163    key: "render",164    value: function render() {165      var _this4 = this;166      var panelsData = this.props.panelsData;167      var switchToEditing = function switchToEditing() {168        _this4.panelsInitialized = false;169        _this4.setState({170          editing: true171        });172      };173      var switchToPreview = function switchToPreview() {174        if (panelsData) {175          _this4.setState({176            editing: false177          });178        }179      };180      if (this.state.editing) {181        return React.createElement(Fragment, null, React.createElement(BlockControls, null, React.createElement(Toolbar, null, React.createElement(IconButton, {182          icon: "visibility",183          className: "components-icon-button components-toolbar__control",184          label: __('Preview layout.', 'siteorigin-panels'),185          onClick: switchToPreview186        }))), React.createElement("div", {187          key: "layout-block",188          className: "siteorigin-panels-layout-block-container",189          ref: this.panelsContainer190        }));191      } else {192        var loadingPreview = this.state.loadingPreview;193        return React.createElement(Fragment, null, React.createElement(BlockControls, null, React.createElement(Toolbar, null, React.createElement(IconButton, {194          icon: "edit",195          className: "components-icon-button components-toolbar__control",196          label: __('Edit layout.', 'siteorigin-panels'),197          onClick: switchToEditing198        }))), React.createElement("div", {199          key: "preview",200          className: "so-panels-block-layout-preview-container"201        }, loadingPreview ? React.createElement("div", {202          className: "so-panels-spinner-container"203        }, React.createElement("span", null, React.createElement(Spinner, null))) : React.createElement("div", {204          className: "so-panels-raw-html-container",205          ref: this.previewContainer206        }, React.createElement(RawHTML, null, this.state.previewHtml))));207      }208    }209  }]);210  return SiteOriginPanelsLayoutBlock;211}(Component);212registerBlockType('siteorigin-panels/layout-block', {213  title: __('SiteOrigin Layout', 'siteorigin-panels'),214  description: __("Build a layout using SiteOrigin's Page Builder.", 'siteorigin-panels'),215  icon: function icon() {216    return React.createElement("span", {217      className: "siteorigin-panels-block-icon"218    });219  },220  category: 'layout',221  keywords: ['page builder', 'column,grid', 'panel'],222  supports: {223    html: false224  },225  attributes: {226    panelsData: {227      type: 'object'228    }229  },230  edit: function edit(_ref) {231    var attributes = _ref.attributes,232        setAttributes = _ref.setAttributes,233        toggleSelection = _ref.toggleSelection;234    var onLayoutBlockContentChange = function onLayoutBlockContentChange(newPanelsData) {235      if (!_.isEmpty(newPanelsData.widgets)) {236        // Send panelsData to server for sanitization.237        jQuery.post(soPanelsBlockEditorAdmin.sanitizeUrl, {238          action: 'so_panels_layout_block_sanitize',239          panelsData: JSON.stringify(newPanelsData)240        }, function (sanitizedPanelsData) {241          if (sanitizedPanelsData !== '') {242            setAttributes({243              panelsData: sanitizedPanelsData244            });245          }246        });247      }248    };249    var disableSelection = function disableSelection() {250      toggleSelection(false);251    };252    var enableSelection = function enableSelection() {253      toggleSelection(true);254    };255    return React.createElement(SiteOriginPanelsLayoutBlock, {256      panelsData: attributes.panelsData,257      onContentChange: onLayoutBlockContentChange,258      onRowOrWidgetMouseDown: disableSelection,259      onRowOrWidgetMouseUp: enableSelection260    });261  },262  save: function save() {263    // Render in PHP264    return null;265  }266});267(function (jQuery) {268  if (soPanelsBlockEditorAdmin.showAddButton) {269    jQuery(function () {270      setTimeout(function () {271        var editorDispatch = wp.data.dispatch('core/editor');272        var editorSelect = wp.data.select('core/editor');273        var tmpl = jQuery('#siteorigin-panels-add-layout-block-button').html();274        var $addButton = jQuery(tmpl).insertAfter('.editor-writing-flow > div:first');275        $addButton.on('click', function () {276          var layoutBlock = wp.blocks.createBlock('siteorigin-panels/layout-block', {});277          var isEmpty = editorSelect.isEditedPostEmpty();278          if (isEmpty) {279            var blocks = editorSelect.getBlocks();280            if (blocks.length) {281              editorDispatch.replaceBlock(blocks[0].clientId, layoutBlock);282            } else {283              editorDispatch.insertBlock(layoutBlock);284            }285          } else {286            editorDispatch.insertBlock(layoutBlock);287          }288        });289        var hideButtonIfBlocks = function hideButtonIfBlocks() {290          var isEmpty = wp.data.select('core/editor').isEditedPostEmpty();291          if (isEmpty) {292            $addButton.show();293          } else {294            $addButton.hide();295          }296        };297        wp.data.subscribe(hideButtonIfBlocks);298        hideButtonIfBlocks();299      }, 100);300    });301  }...

Using AI Code Generation

1import { storiesOf } from '@storybook/react';2import { withKnobs, boolean } from '@storybook/addon-knobs';3import { withInfo } from '@storybook/addon-info';4import { withA11y } from '@storybook/addon-a11y';5import { withTests } from '@storybook/addon-jest';6import { withBackgrounds } from '@storybook/addon-backgrounds';7import { withViewport } from '@storybook/addon-viewport';8import { withOptions } from '@storybook/addon-options';9import { withNotes } from '@storybook/addon-notes';10import { withLinks } from '@storybook/addon-links';11import { withConsole } from '@storybook/addon-console';12import { withPropsTable } from 'storybook-addon-react-docgen';13import { withDocs } from 'storybook-readme';14import { withReadme } from 'storybook-readme';15import { withTests } from '@storybook/addon-jest';16import { withReadme } from 'storybook-readme';17import { withPanel } from 'storybook-root';18import results from '../.jest-test-results.json';19import readme from './README.md';20const stories = storiesOf('Test', module);21stories.addDecorator(withKnobs);22stories.addDecorator(withInfo);23stories.addDecorator(withA11y);24stories.addDecorator(withTests({ results }));25stories.addDecorator(withBackgrounds);26stories.addDecorator(withViewport);27stories.addDecorator(withOptions);28stories.addDecorator(withNotes);29stories.addDecorator(withLinks);30stories.addDecorator(withConsole);31stories.addDecorator(withPropsTable);32stories.addDecorator(withDocs(readme));33stories.addDecorator(withReadme(readme));34stories.addDecorator(withTests({ results }));35stories.addDecorator(withReadme(readme));36stories.add('test', () => <div>Test</div>, {37  panel: {38    notes: { text: 'test' },39    readme: { text: 'test' },40    jest: { text: 'test' },41  },42});43stories.add('test', () => <div>Test</div>, {44  panel: {45    notes: { text: 'test' },46    readme: { text: 'test' },47    jest: { text: 'test' },48  },49});50stories.add('test', () => <div>Test</div>, {51  panel: {52    notes: { text: 'test' },53    readme: { text: 'test' },54    jest: { text: '

Using AI Code Generation

1import { withPanel } from 'storybook-root-decorator';2export default {3};4export const Test = () => <div>Test</div>;5import { withPanel } from 'storybook-root-decorator';6export default {7};8export const Test = () => <div>Test</div>;9import { withPanel } from 'storybook-root-decorator';10export default {11};12import { withPanel } from 'storybook-root-decorator';13export default {14};15import { withPanel } from 'storybook-root-decorator';16export default {17};18import { withPanel } from 'storybook-root-decorator';19export default {20};21import { withPanel } from 'storybook-root-decorator';22export default {23};24import { withPanel } from 'storybook-root-decorator';25export default {26};27export const Test = () => <div>Test</div>;28import { withPanel } from 'storybook-root-decorator';29export default {30};31export const Test = () => <div

Using AI Code Generation

1import { storiesOf } from '@storybook/react';2import { panels } from 'storybook-root';3import MyComponent from './MyComponent';4storiesOf('MyComponent', module)5  .add('default', () => <MyComponent />)6  .add('with panel', () => <MyComponent />, {7    panels: panels({8      'panel-1': {9        render: () => <div>Panel 1</div>,10      },11      'panel-2': {12        render: () => <div>Panel 2</div>,13      },14    }),15  });16import { configure } from '@storybook/react';17import { setOptions } from '@storybook/addon-options';18import { setDefaults } from 'storybook-root';19setDefaults({20});21configure(() => {22  require('../test.js');23}, module);24const path = require('path');25const webpack = require('webpack');26module.exports = {27    new webpack.DefinePlugin({28      'process.env': {29        NODE_ENV: JSON.stringify(process.env.NODE_ENV),30      },31    }),32  module: {33      {34        include: path.resolve(__dirname, '../'),35      },36  },37};38import 'storybook-root/register';39import { addons } from '@storybook/addons';40import { register } from 'storybook-root';41register(addons);

Using AI Code Generation

1import { panels } from 'storybook-root';2const { Panel, PanelHeader, PanelBody } = panels;3export default {4};5export const test = () => {6  return (7  );8};9import { panels } from 'storybook-root';10const { Panel, PanelHeader, PanelBody } = panels;11export { Panel, PanelHeader, PanelBody };

Using AI Code Generation

1import { panels } from 'storybook-root';2const test = () => {3  const { Panel } = panels;4  return <Panel title="test">test</Panel>;5};6export default test;7import React from 'react';8import { addDecorator } from '@storybook/react';9import { withRoot } from 'storybook-root';10addDecorator(withRoot);11const path = require('path');12module.exports = ({ config }) => {13  config.resolve.alias['storybook-root'] = path.resolve(__dirname, '../');14  return config;15};16module.exports = {17  webpackFinal: require('./webpack.config.js'),18};19import { addons } from '@storybook/addons';20import { themes } from '@storybook/theming';21addons.setConfig({22});23  .sb-show-main {24    display: none;25  }26  .sb-show-main {27    display: none;28  }29  .sb-show-main {30    display: none;31  }32import React from 'react';33import { addDecorator } from '@storybook/react';34import { withRoot } from 'storybook-root';35addDecorator(withRoot);36const path = require('path');37module.exports = ({ config }) => {38  config.resolve.alias['storybook-root'] = path.resolve(__dirname, '../');39  return config;40};41module.exports = {42  webpackFinal: require('./webpack.config.js'),43};44import { addons } from '@storybook/addons';45import { themes } from '@storybook/theming';46addons.setConfig({

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.