Merge branch 'MAGETWO-86673-frontend-rendering' into MAGETWO-87081-video

Author: irenelagno

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

@@ -0,0 +1,63 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types=1);
+
+namespace Magento\PageBuilder\Block;
+
+use Magento\Framework\View\Element\Template;
+
+/**
+ * Class WidgetInitializer provides configuration for content types widgets need to be loaded on frontend
+ * @api
+ */
+class WidgetInitializer extends Template
+{
+    /**
+     * @var \Magento\Framework\Serialize\Serializer\Json
+     */
+    private $jsonSerializer;
+
+    /**
+     * WidgetInitializer constructor.
+     * @param Template\Context $context
+     * @param \Magento\Framework\Serialize\Serializer\Json $jsonEncoder
+     * @param array $data
+     */
+    public function __construct(
+        \Magento\Framework\View\Element\Template\Context $context,
+        \Magento\Framework\Serialize\Serializer\Json $jsonEncoder,
+        array $data = []
+    ) {
+        $this->jsonSerializer = $jsonEncoder;
+        parent::__construct($context, $data);
+    }
+
+    /**
+     * Returns config for widgets initializer component.
+     * @return string
+     * @api
+     */
+    public function getConfig() : string
+    {
+        $widgetsConfig = $this->getData('config');
+        $resultConfig = [];
+        foreach ($widgetsConfig as $contentTypeName => $config) {
+            $selector = sprintf('div[data-role="%s"]', $contentTypeName);
+            foreach ($config as $item) {
+                if (!isset($item['component'])) {
+                    continue;
+                }
+                if (isset($item['appearance'])) {
+                    $selector .= sprintf('[data-appearance="%s"]', $item['appearance']);
+                }
+                $componentConfig = isset($item['config']) ? $item['config'] : '{}';
+                $resultConfig[$selector] = [$item['component'] => $componentConfig];
+            }
+        }
+        return $this->jsonSerializer->serialize($resultConfig);
+    }
+}

app/code/Magento/PageBuilder/docs/content-type-configuration.md

@@ -406,6 +406,84 @@ The `tag` element allows you to read the tag name of the element and map back to
 <tag name="heading_type"/>
 ```
 
+## Add custom logic to content types
+
+You can customize Page Builder content types by adding your own logic on the frontend.
+
+To add custom logic to content types:
+1. [Create a JavaScript widget](#create-a-javascript-widget)
+2. [Add XML configuration to load it on the frontend](#add-xml-configuration-to-load-it-on-the-frontend)
+
+### Create a JavaScript widget
+
+Create a JavaScript widget in your module's `/view/frontend/web/js/content-type/{content-type-name}/appearance/{appearance-name}/widget.js` file:
+
+``` javascript
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'slick'
+], function ($) {
+    'use strict';
+
+    return function (config, sliderElement) {
+
+        var $element = $(sliderElement);
+
+        /**
+         * Prevent each slick slider from being initialized more than once which could throw an error.
+         */
+        if ($element.hasClass('slick-initialized')) {
+            $element.slick('unslick');
+        }
+
+        $element.slick({
+            autoplay: $element.data('autoplay') === 1,
+            autoplaySpeed: $element.data('autoplay-speed') || 0,
+            fade: $element.data('fade') === 1,
+            infinite: $element.data('is-infinite') === 1,
+            arrows: $element.data('show-arrows') === 1,
+            dots: $element.data('show-dots') === 1
+        });
+    };
+});
+
+``` 
+
+### Add XML configuration to load it on the frontend
+
+To load this file on the frontend, add the following configuration to the `default.xml` file in your custom module's `frontend/layout/` directory:
+
+``` xml
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceBlock name="pagebuilder.widget.initializer">
+            <arguments>
+                <argument name="config" xsi:type="array">
+                    <item name="%content-type-name%" xsi:type="array">
+                        <item name="default" xsi:type="array">
+                            <!--required argument-->
+                            <item name="component" xsi:type="string">%{vendor-path}/js/content-type/{content-type-name}/appearance/{appearance-name}/widget%</item>
+                            <!--optional if you need provide some config for your widget-->                          
+                            <item name="config" xsi:type="array">
+                                <item name="buttonSelector" xsi:type="string">.pagebuilder-slide-button</item>
+                                <item name="showOverlay" xsi:type="string">hover</item>
+                            </item>
+                            <!--optional if you want load widget per appearance-->
+                            <item name="appearance" xsi:type="string">default</item>
+                        </item>
+                    </item>
+                </argument>
+            </arguments>
+        </referenceBlock>
+    </body>
+</page>
+```
+
 ## Converter Interfaces
 
 Converter and mass converter are the two types of converters. Both converters expect `fromDom` and `toDom` methods, with usage examples described below.

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

@@ -6,8 +6,59 @@
  */
 -->
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
-    <head>
-        <link src="Magento_PageBuilder::js/default.js"/>
-    </head>
+    <body>
+        <referenceBlock name="head.components">
+            <block class="Magento\PageBuilder\Block\WidgetInitializer" name="pagebuilder.widget.initializer" template="Magento_PageBuilder::widget_initializer.phtml">
+                <arguments>
+                    <argument name="config" xsi:type="array">
+                        <item name="slider" xsi:type="array">
+                            <item name="default" xsi:type="array">
+                                <item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/slider/appearance/default/widget</item>
+                                <!--optional if you want load widget per appearance-->
+                                <item name="appearance" xsi:type="string">default</item>
+                            </item>
+                        </item>
+                        <item name="map" xsi:type="array">
+                            <item name="default" xsi:type="array">
+                                <item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/map/appearance/default/widget</item>
+                            </item>
+                        </item>
+                        <item name="row" xsi:type="array">
+                            <item name="default" xsi:type="array">
+                                <item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/row/appearance/default/widget</item>
+                            </item>
+                        </item>
+                        <item name="tabs" xsi:type="array">
+                            <item name="default" xsi:type="array">
+                                <item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/tabs/appearance/default/widget</item>
+                            </item>
+                        </item>
+                        <item name="slide" xsi:type="array">
+                            <item name="default" xsi:type="array">
+                                <!--required argument-->
+                                <item name="component" xsi:type="string">Magento_PageBuilder/js/widget/show-on-hover</item>
+                                <!--optional if you need provide some config for your widget-->
+                                <item name="config" xsi:type="array">
+                                    <item name="buttonSelector" xsi:type="string">.pagebuilder-slide-button</item>
+                                    <item name="showOverlay" xsi:type="string">hover</item>
+                                    <item name="dataRole" xsi:type="string">slide</item>
+                                </item>
+                            </item>
+                        </item>
+                        <item name="banner" xsi:type="array">
+                            <item name="default" xsi:type="array">
+                                <item name="component" xsi:type="string">Magento_PageBuilder/js/widget/show-on-hover</item>
+                                <item name="config" xsi:type="array">
+                                    <item name="buttonSelector" xsi:type="string">.pagebuilder-banner-button</item>
+                                    <item name="showOverlay" xsi:type="string">on_hover</item>
+                                    <item name="dataRole" xsi:type="string">banner</item>
+                                </item>
+                            </item>
+                        </item>
+                    </argument>
+                </arguments>
+            </block>
+        </referenceBlock>
+    </body>
 </page>
 

app/code/Magento/PageBuilder/view/frontend/templates/widget_initializer.phtml

@@ -0,0 +1,17 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/** @var \Magento\PageBuilder\Block\WidgetInitializer $block */
+?>
+<script type="text/x-magento-init">
+    {
+        "*": {
+            "Magento_PageBuilder/js/widget-initializer": {
+                "config": <?= /* @noEscape */ $block->getConfig(); ?>
+            }
+        }
+    }
+</script>

app/code/Magento/PageBuilder/view/frontend/web/js/content-type/map/appearance/default/widget.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'jquery',
+    'Magento_PageBuilder/js/utils/map'
+], function ($, GoogleMap) {
+    'use strict';
+
+    return function (config, element) {
+        var locations,
+            controls,
+            mapOptions = {},
+            $element = $(element);
+
+        /**
+         * Sets height to 300px as default if no height input. But will not be saved to database
+         */
+        if ($element.context.style.height === '') {
+            $element.height('300px');
+        }
+
+        if (element.hasAttribute('data-locations') && element.getAttribute('data-locations') !== '[]') {
+            locations = JSON.parse(element.getAttribute('data-locations'));
+            locations.forEach(function (location) {
+                location.position.latitude = parseFloat(location.position.latitude);
+                location.position.longitude = parseFloat(location.position.longitude);
+            });
+            controls = element.getAttribute('data-show-controls');
+            mapOptions.center = locations[0].position;
+            mapOptions.disableDefaultUI = controls !== 'true';
+            mapOptions.mapTypeControl = controls === 'true';
+            new GoogleMap(element, locations, mapOptions);
+        }
+    };
+});

app/code/Magento/PageBuilder/view/frontend/web/js/content-type/row/appearance/default/widget.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'jquery',
+    'jarallax'
+], function ($) {
+    'use strict';
+
+    return function (config, element) {
+        var $element = $(element);
+
+        if ($element.data('enableParallax') !== 1) {
+            return;
+        }
+
+        $element.addClass('jarallax');
+        $element.attr('data-jarallax', '');
+
+        window.jarallax(element, {
+            imgPosition: element.style.backgroundPosition || '50% 50%',
+            imgRepeat: element.style.backgroundRepeat || 'no-repeat',
+            imgSize: element.style.backgroundSize || 'cover',
+            speed: parseFloat($element.data('parallaxSpeed')) || 0.5
+        });
+    };
+});

app/code/Magento/PageBuilder/view/frontend/web/js/content-type/slider/appearance/default/widget.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'slick'
+], function ($) {
+    'use strict';
+
+    return function (config, sliderElement) {
+
+        var $element = $(sliderElement);
+
+        /**
+         * Prevent each slick slider from being initialized more than once which could throw an error.
+         */
+        if ($element.hasClass('slick-initialized')) {
+            $element.slick('unslick');
+        }
+
+        $element.slick({
+            autoplay: $element.data('autoplay') === 1,
+            autoplaySpeed: $element.data('autoplay-speed') || 0,
+            fade: $element.data('fade') === 1,
+            infinite: $element.data('is-infinite') === 1,
+            arrows: $element.data('show-arrows') === 1,
+            dots: $element.data('show-dots') === 1
+        });
+    };
+});

app/code/Magento/PageBuilder/view/frontend/web/js/content-type/tabs/appearance/default/widget.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'jquery',
+    'jquery/ui'
+], function ($) {
+    'use strict';
+
+    return function (config, element) {
+        var $element = $(element);
+
+        // Disambiguate between the mage/tabs component which is loaded randomly depending on requirejs order.
+        $.ui.tabs({
+            active: $element.data('activeTab') || 0,
+            create:
+
+                /**
+                 * Adjust the margin bottom of the navigation to correctly display the active tab
+                 */
+                function () {
+                    var borderWidth = parseInt($element.find('.tabs-content').css('borderWidth').toString(), 10);
+
+                    $element.find('.tabs-navigation').css('marginBottom', -borderWidth);
+                    $element.find('.tabs-navigation li:not(:first-child)').css('marginLeft', -borderWidth);
+                }
+        }, element);
+    };
+});