Skip to content

Commit a58b418

Browse files
jissereitsmajissereitsma
committed
WIP UiComponents
1 parent 00b9a83 commit a58b418

5 files changed

Lines changed: 10657 additions & 0 deletions

File tree

‎Form/Field/FieldType/Pagebuilder.php‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<?php declare(strict_types=1);
2+
3+
namespace Loki\AdminComponents\Form\Field\FieldType;
4+
5+
use Loki\AdminComponents\Form\Field\FieldTypeInterface;
6+
7+
class Pagebuilder implements FieldTypeInterface
8+
{
9+
public function getTemplate(): string
10+
{
11+
return 'Loki_AdminComponents::form/field_type/pagebuilder.phtml';
12+
}
13+
}

‎view/adminhtml/templates/form/field_type/pagebuilder.phtml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<?php declare(strict_types=1);
2+
3+
/** @version 0.4.2 */
4+
5+
use Magento\Framework\Escaper;
6+
use Magento\Framework\View\Element\Template;
7+
use Loki\AdminComponents\Form\Field\Field;
8+
use Loki\AdminComponents\Form\Field\FieldType\Textarea;
9+
use Loki\Components\Util\Block\TemplateRenderer;
10+
11+
/** @var Escaper $escaper */
12+
/** @var Template $block */
13+
/** @var Field $field */
14+
/** @var Textarea $fieldType */
15+
/** @var TemplateRenderer $templateRenderer */
16+
17+
$field = $block->getField();
18+
$fieldAttributes = $field->getFieldAttributes();
19+
$fieldType = $field->getFieldType();
20+
$identifier = $field->getScope().'.'.$field->getCode();
21+
$domId = preg_replace('/([^a-zA-Z0-9\-]+)/', '-', $block->getNameInLayout().'-'.$identifier);
22+
?>
23+
<div x-data="LokiAdminFormPagebuilderComponent">
24+
<div data-bind="scope: 'LokiAdminFormPagebuilderComponent'">
25+
SCOPE CONTAINER
26+
<!-- ko template: getTemplate() --><!-- /ko --></div>
27+
<script type="text/x-magento-init">
28+
{
29+
"*": {
30+
"Magento_Ui/js/core/app": {
31+
"components": {
32+
"LokiAdminFormPagebuilderComponent": {
33+
"component": "Magento_Ui/js/form/element/text",
34+
"template": "ui/form/field",
35+
"elementTmpl": "ui/form/element/textarea",
36+
"inputName": "foobar",
37+
"cols": 30,
38+
"rows": 10,
39+
"focused": false,
40+
"noticeId": "",
41+
"placeholder": "",
42+
"valueUpdate": ""
43+
}
44+
}
45+
}
46+
}
47+
}</script>
48+
<textarea
49+
x-ref="textarea"
50+
class="admin__control-text"
51+
name="<?= $escaper->escapeHtml($field->getCode()) ?>"
52+
id="<?= $escaper->escapeHtml($domId) ?>"
53+
data-scope="<?= $escaper->escapeHtml($field->getScope()) ?>"
54+
data-code="<?= $escaper->escapeHtml($field->getCode()) ?>"
55+
data-component-scope="<?= $escaper->escapeHtml($field->getCode()) ?>"
56+
<?php foreach ($fieldAttributes as $attributeName => $attributeValue) : ?> <?= /* @noEscape */
57+
$attributeName ?>="<?= /* @noEscape */
58+
$attributeValue ?>"
59+
<?php endforeach; ?> :value="<?= $escaper->escapeHtml($identifier) ?>"
60+
@change="<?= $escaper->escapeHtml($field->getAlpineSetter()) ?>PageBuilder"
61+
></textarea></div>

‎view/adminhtml/templates/script/component/pagebuilder-component.phtml‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<?php declare(strict_types=1); /** @version 0.4.2 */ use Loki\AdminComponents\ViewModel\Form\Field\Editor; use Loki\Components\Factory\ViewModelFactory; use Magento\Framework\View\Element\Template; /** @var Template $block */ /** @var ViewModelFactory $viewModelFactory */ /** @var Editor $editor */ $editor = $viewModelFactory->create(Editor::class); ?> <script>
2+
document.addEventListener('alpine:init', () => {
3+
Alpine.data('LokiAdminFormPagebuilderComponent', () => ({
4+
wysiwygInstance: null,
5+
init() {
6+
const item = this.item;
7+
const elementId = this.$refs.textarea.getAttribute('id');
8+
const componentName = this.$refs.textarea.getAttribute('data-component-scope');
9+
10+
const componentConfig = JSON.parse('<?= $editor->getComponentConfigAsJson() ?>');
11+
12+
return;
13+
require([
14+
'uiLayout',
15+
'uiRegistry',
16+
], (layout, registry) => {
17+
var componentsConfig = [{
18+
name: componentName,
19+
component: 'Magento_Ui/js/form/element/text',
20+
content: 'Hello World',
21+
template: 'ui/form/field',
22+
config: {
23+
template: 'ui/form/field',
24+
},
25+
}];
26+
27+
layout(componentsConfig);
28+
29+
30+
31+
32+
33+
return;
34+
})
35+
36+
return;
37+
require([
38+
'Magento_Ui/js/form/element/wysiwyg',
39+
'ko',
40+
'uiRegistry',
41+
'uiLayout'
42+
], (wysiwyg, ko, registry, layout) => {
43+
const config = {
44+
...componentConfig,
45+
name: componentName,
46+
suffixRegExpPattern: false,
47+
elementSelector: '#' + elementId,
48+
content: this.$refs.textarea.value || '',
49+
dataScope: 'content',
50+
wysiwygConfigData: Object.assign({
51+
height: '300px',
52+
add_variables: true,
53+
add_widgets: true,
54+
add_images: true,
55+
add_directives: true
56+
}, wysiwygConfigData)
57+
};
58+
59+
var componentsConfig = [{
60+
name: componentName,
61+
component: 'Magento_Ui/js/form/element/wysiwyg',
62+
config: config,
63+
}];
64+
65+
layout(componentsConfig);
66+
return;
67+
68+
69+
if (!this.wysiwygInstance) {
70+
71+
this.wysiwygInstance = new wysiwyg(config, {});
72+
73+
const component = registry.get(componentName);
74+
if (!component) {
75+
registry.set(componentName, wysiwyg);
76+
}
77+
}
78+
});
79+
},
80+
setValuePageBuilder(event) {
81+
this.setValue(event);
82+
event.target.dispatchEvent(new Event('change', { bubbles: true }));
83+
}
84+
}));
85+
});</script>

0 commit comments

Comments
 (0)