Skip to content

Commit 8f769d4

Browse files
nathanjosiahnathanjosiah
committed
MC-3651: Implement widget loading on stage for MC-1405
- Refactored widget initializer to work with stage content
1 parent dcb73b6 commit 8f769d4

File tree

11 files changed

+171
-72
lines changed

11 files changed

+171
-72
lines changed

‎app/code/Magento/PageBuilder/Block/WidgetInitializer.php

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,26 @@ class WidgetInitializer extends Template
2222
*/
2323
private $jsonSerializer;
2424

25+
/**
26+
* @var \Magento\PageBuilder\Model\Config\ContentType\WidgetInitializer
27+
*/
28+
private $config;
29+
2530
/**
2631
* WidgetInitializer constructor.
2732
* @param Template\Context $context
2833
* @param \Magento\Framework\Serialize\Serializer\Json $jsonEncoder
34+
* @param \Magento\PageBuilder\Model\Config\ContentType\WidgetInitializer $config
2935
* @param array $data
3036
*/
3137
public function __construct(
3238
\Magento\Framework\View\Element\Template\Context $context,
3339
\Magento\Framework\Serialize\Serializer\Json $jsonEncoder,
40+
\Magento\PageBuilder\Model\Config\ContentType\WidgetInitializer $config,
3441
array $data = []
3542
) {
3643
$this->jsonSerializer = $jsonEncoder;
44+
$this->config = $config;
3745
parent::__construct($context, $data);
3846
}
3947

@@ -44,21 +52,6 @@ public function __construct(
4452
*/
4553
public function getConfig() : string
4654
{
47-
$widgetsConfig = $this->getData('config');
48-
$resultConfig = [];
49-
foreach ($widgetsConfig as $contentTypeName => $config) {
50-
$selector = sprintf('div[data-role="%s"]', $contentTypeName);
51-
foreach ($config as $item) {
52-
if (!isset($item['component'])) {
53-
continue;
54-
}
55-
if (isset($item['appearance'])) {
56-
$selector .= sprintf('[data-appearance="%s"]', $item['appearance']);
57-
}
58-
$componentConfig = isset($item['config']) ? $item['config'] : '{}';
59-
$resultConfig[$selector] = [$item['component'] => $componentConfig];
60-
}
61-
}
62-
return $this->jsonSerializer->serialize($resultConfig);
55+
return $this->jsonSerializer->serialize($this->config->getConfig());
6356
}
6457
}

‎app/code/Magento/PageBuilder/Model/Config/ContentType/WidgetInitializer.php

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
declare(strict_types=1);
8+
9+
namespace Magento\PageBuilder\Model\Config\ContentType;
10+
11+
/**
12+
* Container for the configuration related to the widget initializer mechanism
13+
*/
14+
class WidgetInitializer
15+
{
16+
/**
17+
* @var array The provided configuration
18+
*/
19+
private $config;
20+
21+
/**
22+
* @param array $config
23+
*/
24+
public function __construct(array $config)
25+
{
26+
$this->config = $config;
27+
}
28+
29+
/**
30+
* Retrieves the component-ready configuration for the widget initializer
31+
* @return array
32+
*/
33+
public function getConfig(): array
34+
{
35+
$resultConfig = [];
36+
foreach ($this->config as $contentTypeName => $config) {
37+
$selector = sprintf('div[data-role="%s"]', $contentTypeName);
38+
foreach ($config as $item) {
39+
if (!isset($item['component'])) {
40+
continue;
41+
}
42+
if (isset($item['appearance'])) {
43+
$selector .= sprintf('[data-appearance="%s"]', $item['appearance']);
44+
}
45+
$componentConfig = isset($item['config']) ? $item['config'] : '{}';
46+
$resultConfig[$selector] = [$item['component'] => $componentConfig];
47+
}
48+
}
49+
return $resultConfig;
50+
}
51+
}

‎app/code/Magento/PageBuilder/Model/Stage/Config.php

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,11 @@ class Config
6868
*/
6969
private $inlineEditingChecker;
7070

71+
/**
72+
* @var \Magento\PageBuilder\Model\Config\ContentType\WidgetInitializer
73+
*/
74+
private $widgetInitializerConfig;
75+
7176
/**
7277
* Config constructor.
7378
* @param \Magento\PageBuilder\Model\ConfigInterface $config
@@ -78,6 +83,7 @@ class Config
7883
* @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
7984
* @param \Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor
8085
* @param \Magento\PageBuilder\Model\Wysiwyg\InlineEditingSupportedAdapterList $inlineEditingChecker
86+
* @param \Magento\PageBuilder\Model\Config\ContentType\WidgetInitializer $widgetInitializerConfig
8187
* @param array $data
8288
*/
8389
public function __construct(
@@ -89,6 +95,7 @@ public function __construct(
8995
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
9096
\Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor,
9197
\Magento\PageBuilder\Model\Wysiwyg\InlineEditingSupportedAdapterList $inlineEditingChecker,
98+
\Magento\PageBuilder\Model\Config\ContentType\WidgetInitializer $widgetInitializerConfig,
9299
array $data = []
93100
) {
94101
$this->config = $config;
@@ -99,6 +106,7 @@ public function __construct(
99106
$this->scopeConfig = $scopeConfig;
100107
$this->activeEditor = $activeEditor;
101108
$this->inlineEditingChecker = $inlineEditingChecker;
109+
$this->widgetInitializerConfig = $widgetInitializerConfig;
102110
$this->data = $data;
103111
}
104112

@@ -117,7 +125,8 @@ public function getConfig()
117125
'preview_url' => $this->frontendUrlBuilder->getUrl('pagebuilder/contenttype/preview'),
118126
'column_grid_default' => $this->scopeConfig->getValue(self::XML_PATH_COLUMN_GRID_DEFAULT),
119127
'column_grid_max' => $this->scopeConfig->getValue(self::XML_PATH_COLUMN_GRID_MAX),
120-
'can_use_inline_editing_on_stage' => $this->isWysiwygProvisionedForEditingOnStage()
128+
'can_use_inline_editing_on_stage' => $this->isWysiwygProvisionedForEditingOnStage(),
129+
'widgets' => $this->widgetInitializerConfig->getConfig(),
121130
];
122131
}
123132

‎app/code/Magento/PageBuilder/etc/di.xml

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -481,6 +481,56 @@
481481
<argument name="baseFiles" xsi:type="object">pageBuilderComponentAggregatedSourceBaseSorted</argument>
482482
</arguments>
483483
</type>
484+
<type name="Magento\PageBuilder\Model\Config\ContentType\WidgetInitializer">
485+
<arguments>
486+
<argument name="config" xsi:type="array">
487+
<item name="slider" xsi:type="array">
488+
<item name="default" xsi:type="array">
489+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/slider/appearance/default/widget</item>
490+
<!--optional if you want load widget per appearance-->
491+
<item name="appearance" xsi:type="string">default</item>
492+
</item>
493+
</item>
494+
<item name="map" xsi:type="array">
495+
<item name="default" xsi:type="array">
496+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/map/appearance/default/widget</item>
497+
</item>
498+
</item>
499+
<item name="row" xsi:type="array">
500+
<item name="default" xsi:type="array">
501+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/row/appearance/default/widget</item>
502+
</item>
503+
</item>
504+
<item name="tabs" xsi:type="array">
505+
<item name="default" xsi:type="array">
506+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/tabs/appearance/default/widget</item>
507+
</item>
508+
</item>
509+
<item name="slide" xsi:type="array">
510+
<item name="default" xsi:type="array">
511+
<!--required argument-->
512+
<item name="component" xsi:type="string">Magento_PageBuilder/js/widget/show-on-hover</item>
513+
<!--optional if you need provide some config for your widget-->
514+
<item name="config" xsi:type="array">
515+
<item name="buttonSelector" xsi:type="string">.pagebuilder-slide-button</item>
516+
<item name="showOverlay" xsi:type="string">hover</item>
517+
<item name="dataRole" xsi:type="string">slide</item>
518+
</item>
519+
</item>
520+
</item>
521+
<item name="banner" xsi:type="array">
522+
<item name="default" xsi:type="array">
523+
<item name="component" xsi:type="string">Magento_PageBuilder/js/widget/show-on-hover</item>
524+
<item name="config" xsi:type="array">
525+
<item name="buttonSelector" xsi:type="string">.pagebuilder-banner-button</item>
526+
<item name="showOverlay" xsi:type="string">hover</item>
527+
<item name="dataRole" xsi:type="string">banner</item>
528+
</item>
529+
</item>
530+
</item>
531+
</argument>
532+
</arguments>
533+
</type>
484534
<virtualType name="pageBuilderComponentAggregatedSourceBase" type="Magento\Framework\View\File\Collector\Base">
485535
<arguments>
486536
<argument name="subDir" xsi:type="string">pagebuilder</argument>

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/block/preview.js

Lines changed: 12 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/block/default/preview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<div class="pagebuilder-content-type pagebuilder-block" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
99
<div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
10-
<div if="displayPreview" class="rendered-content" html="data.main.html"></div>
10+
<div if="displayPreview" class="rendered-content" html="data.main.html" afterRender="initializeWidgets"></div>
1111
<div ifnot="displayPreview" class="pagebuilder-block-placeholder">
1212
<span class="placeholder-text" text="placeholderText"/>
1313
</div>

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/block/preview.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import $ from "jquery";
77
import ko from "knockout";
88
import $t from "mage/translate";
99
import events from "Magento_PageBuilder/js/events";
10+
import widgetInitializer from "Magento_PageBuilder/js/widget-initializer";
1011
import Config from "../../config";
1112
import ContentTypeInterface from "../../content-type";
1213
import ContentTypeConfigInterface from "../../content-type-config";
@@ -42,6 +43,15 @@ export default class Preview extends BasePreview {
4243
this.placeholderText = ko.observable(this.messages.NOT_SELECTED);
4344
}
4445

46+
/**
47+
* Runs the widget initializer for each configured widget
48+
*/
49+
public initializeWidgets() {
50+
widgetInitializer({
51+
config: Config.getConfig("widgets"),
52+
});
53+
}
54+
4555
/**
4656
* @inheritdoc
4757
*/

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/widget-intializer.d.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
interface WidgetIntializerConfigInterface {
7+
config: any;
8+
}
9+
10+
declare function WidgetInitializer(data: WidgetIntializerConfigInterface): void;
11+
12+
declare module "Magento_PageBuilder/js/widget-initializer" {
13+
export = WidgetInitializer;
14+
}

‎app/code/Magento/PageBuilder/view/base/layout/default.xml

Lines changed: 0 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -11,57 +11,5 @@
1111
<block class="Magento\PageBuilder\Block\GoogleMapsApi" name="google.maps.api" template="Magento_PageBuilder::googlemaps.phtml" />
1212
<block class="Magento\PageBuilder\Block\WysiwygSetup" name="wysiwyg.setup" template="Magento_PageBuilder::wysiwyg_setup.phtml" />
1313
</referenceContainer>
14-
<referenceBlock name="head.components">
15-
<block class="Magento\PageBuilder\Block\WidgetInitializer" name="pagebuilder.widget.initializer" template="Magento_PageBuilder::widget_initializer.phtml">
16-
<arguments>
17-
<argument name="config" xsi:type="array">
18-
<item name="slider" xsi:type="array">
19-
<item name="default" xsi:type="array">
20-
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/slider/appearance/default/widget</item>
21-
<!--optional if you want load widget per appearance-->
22-
<item name="appearance" xsi:type="string">default</item>
23-
</item>
24-
</item>
25-
<item name="map" xsi:type="array">
26-
<item name="default" xsi:type="array">
27-
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/map/appearance/default/widget</item>
28-
</item>
29-
</item>
30-
<item name="row" xsi:type="array">
31-
<item name="default" xsi:type="array">
32-
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/row/appearance/default/widget</item>
33-
</item>
34-
</item>
35-
<item name="tabs" xsi:type="array">
36-
<item name="default" xsi:type="array">
37-
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/tabs/appearance/default/widget</item>
38-
</item>
39-
</item>
40-
<item name="slide" xsi:type="array">
41-
<item name="default" xsi:type="array">
42-
<!--required argument-->
43-
<item name="component" xsi:type="string">Magento_PageBuilder/js/widget/show-on-hover</item>
44-
<!--optional if you need provide some config for your widget-->
45-
<item name="config" xsi:type="array">
46-
<item name="buttonSelector" xsi:type="string">.pagebuilder-slide-button</item>
47-
<item name="showOverlay" xsi:type="string">hover</item>
48-
<item name="dataRole" xsi:type="string">slide</item>
49-
</item>
50-
</item>
51-
</item>
52-
<item name="banner" xsi:type="array">
53-
<item name="default" xsi:type="array">
54-
<item name="component" xsi:type="string">Magento_PageBuilder/js/widget/show-on-hover</item>
55-
<item name="config" xsi:type="array">
56-
<item name="buttonSelector" xsi:type="string">.pagebuilder-banner-button</item>
57-
<item name="showOverlay" xsi:type="string">hover</item>
58-
<item name="dataRole" xsi:type="string">banner</item>
59-
</item>
60-
</item>
61-
</item>
62-
</argument>
63-
</arguments>
64-
</block>
65-
</referenceBlock>
6614
</body>
6715
</page>

‎app/code/Magento/PageBuilder/view/frontend/layout/default.xml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
9+
<body>
10+
<referenceBlock name="head.components">
11+
<block class="Magento\PageBuilder\Block\WidgetInitializer" name="pagebuilder.widget.initializer" template="Magento_PageBuilder::widget_initializer.phtml" />
12+
</referenceBlock>
13+
</body>
14+
</page>

0 commit comments

Comments
 (0)