Skip to content

Commit 0a44f7d

Browse files
omiroshnichenkoomiroshnichenko
committed
Implement inline styles conversion
- add stage to bindingContext - extend style binding - revert pbStyle to ko-style
1 parent 30eeef6 commit 0a44f7d

File tree

30 files changed

+179
-153
lines changed

30 files changed

+179
-153
lines changed

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/style.js

Lines changed: 38 additions & 26 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/banner/collage-centered/preview.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
*/
66
-->
77

8-
<div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" data-bind="pbStyles:data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
8+
<div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
99
<render args="getOptions().template" />
1010
<div class="pagebuilder-banner-wrapper"
1111
attr="data.wrapper.attributes"
12-
data-bind="pbStyles:data.wrapper.style"
12+
ko-style="data.wrapper.style"
1313
css="Object.assign(data.wrapper.css(), {
1414
'jarallax': data.wrapper.attributes()['data-background-type'] == 'video'
1515
})"
@@ -18,16 +18,16 @@
1818
<div if="data.video_overlay.attributes()['data-video-overlay-color']"
1919
class="video-overlay"
2020
attr="data.video_overlay.attributes"
21-
data-bind="pbStyles:data.video_overlay.style" />
21+
ko-style="data.video_overlay.style" />
2222
<scope args="getUploader().getUiComponent()">
2323
<render />
2424
</scope>
25-
<div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" data-bind="pbStyles:data.overlay.style">
25+
<div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
2626
<div class="pagebuilder-collage-content" event="mousedown: activateEditor">
2727
<div class="pagebuilder-banner-text-content">
2828
<div if="isWysiwygSupported()"
2929
class="inline-wysiwyg"
30-
data-bind="pbStyles:data.content.style"
30+
ko-style="data.content.style"
3131
css="data.content.css"
3232
attr="data.content.attributes"
3333
afterRender="afterRenderWysiwyg"
@@ -41,7 +41,7 @@
4141
type="button"
4242
class="pagebuilder-banner-button"
4343
attr="data.button.attributes"
44-
data-bind="pbStyles:data.button.style"
44+
ko-style="data.button.style"
4545
css="data.button.css">
4646
<span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
4747
</a>

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
*/
66
-->
77

8-
<div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" data-bind="pbStyles:data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
8+
<div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
99
<render args="getOptions().template" />
1010
<div class="pagebuilder-banner-wrapper"
1111
attr="data.wrapper.attributes"
12-
data-bind="pbStyles:data.wrapper.style"
12+
ko-style="data.wrapper.style"
1313
css="Object.assign(data.wrapper.css(), {
1414
'jarallax': data.wrapper.attributes()['data-background-type'] == 'video'
1515
})"
@@ -18,16 +18,16 @@
1818
<div if="data.video_overlay.attributes()['data-video-overlay-color']"
1919
class="video-overlay"
2020
attr="data.video_overlay.attributes"
21-
data-bind="pbStyles:data.video_overlay.style" />
21+
ko-style="data.video_overlay.style" />
2222
<scope args="getUploader().getUiComponent()">
2323
<render />
2424
</scope>
25-
<div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" data-bind="pbStyles:data.overlay.style">
25+
<div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
2626
<div class="pagebuilder-collage-content" event="mousedown: activateEditor">
2727
<div class="pagebuilder-banner-text-content">
2828
<div if="isWysiwygSupported()"
2929
class="inline-wysiwyg"
30-
data-bind="pbStyles:data.content.style"
30+
ko-style="data.content.style"
3131
css="data.content.css"
3232
attr="data.content.attributes"
3333
afterRender="afterRenderWysiwyg"
@@ -42,7 +42,7 @@
4242
class="pagebuilder-banner-button"
4343
css="data.button.css"
4444
attr="data.button.attributes"
45-
data-bind="pbStyles:data.button.style">
45+
ko-style="data.button.style">
4646
<span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
4747
</a>
4848
</div>

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
*/
66
-->
77

8-
<div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" data-bind="pbStyles:data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
8+
<div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
99
<render args="getOptions().template" />
1010
<div class="pagebuilder-banner-wrapper"
1111
attr="data.wrapper.attributes"
12-
data-bind="pbStyles:data.wrapper.style"
12+
ko-style="data.wrapper.style"
1313
css="Object.assign(data.wrapper.css(), {
1414
'jarallax': data.wrapper.attributes()['data-background-type'] == 'video'
1515
})"
@@ -18,16 +18,16 @@
1818
<div if="data.video_overlay.attributes()['data-video-overlay-color']"
1919
class="video-overlay"
2020
attr="data.video_overlay.attributes"
21-
data-bind="pbStyles:data.video_overlay.style" />
21+
ko-style="data.video_overlay.style" />
2222
<scope args="getUploader().getUiComponent()">
2323
<render />
2424
</scope>
25-
<div class="pagebuilder-overlay" attr="data.overlay.attributes" data-bind="pbStyles:data.overlay.style" css="data.overlay.css">
25+
<div class="pagebuilder-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
2626
<div class="pagebuilder-collage-content" event="mousedown: activateEditor">
2727
<div class="pagebuilder-banner-text-content">
2828
<div if="isWysiwygSupported()"
2929
class="inline-wysiwyg"
30-
data-bind="pbStyles:data.content.style"
30+
ko-style="data.content.style"
3131
css="data.content.css"
3232
attr="data.content.attributes"
3333
afterRender="afterRenderWysiwyg"
@@ -41,7 +41,7 @@
4141
type="button"
4242
class="pagebuilder-banner-button"
4343
attr="data.button.attributes"
44-
data-bind="pbStyles:data.button.style"
44+
ko-style="data.button.style"
4545
css="data.button.css">
4646
<span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
4747
</a>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
*/
66
-->
77

8-
<div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" data-bind="pbStyles:data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
8+
<div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
99
<render args="getOptions().template" />
1010
<div class="pagebuilder-banner-wrapper"
1111
attr="data.wrapper.attributes"
12-
data-bind="pbStyles:data.wrapper.style"
12+
ko-style="data.wrapper.style"
1313
css="Object.assign(data.wrapper.css(), {
1414
'jarallax': data.wrapper.attributes()['data-background-type'] == 'video'
1515
})"
@@ -18,16 +18,16 @@
1818
<div if="data.video_overlay.attributes()['data-video-overlay-color']"
1919
class="video-overlay"
2020
attr="data.video_overlay.attributes"
21-
data-bind="pbStyles:data.video_overlay.style" />
21+
ko-style="data.video_overlay.style" />
2222
<scope args="getUploader().getUiComponent()">
2323
<render />
2424
</scope>
25-
<div class="pagebuilder-overlay pagebuilder-poster-overlay" attr="data.overlay.attributes" data-bind="pbStyles:data.overlay.style" css="data.overlay.css" event="mousedown: activateEditor">
25+
<div class="pagebuilder-overlay pagebuilder-poster-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css" event="mousedown: activateEditor">
2626
<div class="pagebuilder-poster-content">
2727
<div class="pagebuilder-banner-text-content">
2828
<div if="isWysiwygSupported()"
2929
class="inline-wysiwyg"
30-
data-bind="pbStyles:data.content.style"
30+
ko-style="data.content.style"
3131
css="data.content.css"
3232
attr="data.content.attributes"
3333
afterRender="afterRenderWysiwyg"
@@ -41,7 +41,7 @@
4141
type="button"
4242
class="pagebuilder-banner-button"
4343
attr="data.button.attributes"
44-
data-bind="pbStyles:data.button.style"
44+
ko-style="data.button.style"
4545
css="data.button.css">
4646
<span data-bind="liveEdit: { field: 'button_text', placeholder: buttonPlaceholder, selectAll: true }"></span>
4747
</a>

‎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
@@ -6,7 +6,7 @@
66
-->
77

88
<div class="pagebuilder-content-type pagebuilder-block" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false" css="{'pagebuilder-block-overlay': displayingBlockPreview()}">
9-
<div attr="data.main.attributes" data-bind="pbStyles:data.main.style" css="data.main.css">
9+
<div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
1010
<div if="displayingBlockPreview" class="rendered-content" html="data.main.html" afterRender="initializeWidgets"></div>
1111
<div ifnot="displayingBlockPreview" class="pagebuilder-block-placeholder">
1212
<span class="placeholder-text" text="placeholderText"/>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
-->
77

88
<div attr="data.main.attributes"
9-
data-bind="pbStyles:data.main.style"
9+
ko-style="data.main.style"
1010
css="Object.assign({focused: $parent.parentContentType.preview.focusedButton() === $index()}, data.main.css())"
1111
class="pagebuilder-content-type pagebuilder-button-item no-system-border focus-options">
1212
<render args="getOptions().template" />
1313
<a attr="data.link.attributes"
14-
data-bind="pbStyles:data.link.style"
14+
ko-style="data.link.style"
1515
css="data.link.css"
1616
click="function (context, event) { onClick($index(), event); }"
1717
event="{ dragstart: function(context, event) { event.preventDefault(); }}">

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/buttons/inline/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-entity pagebuilder-entity-preview pagebuilder-no-blur pagebuilder-live-edit pagebuilder-buttons" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
99
<render args="getOptions().template" />
10-
<div class="element-children buttons-container" each="contentType.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: contentType.id + '-children' })" css="data.main.css" data-bind="pbStyles:data.main.style, sortableChildren: getSortableOptions()">
10+
<div class="element-children buttons-container" each="contentType.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: contentType.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: getSortableOptions()">
1111
<div class="pagebuilder-content-type-wrapper"
1212
template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }"
1313
attr="{ id: id }"

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/buttons/stacked/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-entity pagebuilder-entity-preview pagebuilder-no-blur pagebuilder-live-edit pagebuilder-buttons" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
99
<render args="getOptions().template" />
10-
<div class="element-children buttons-container" each="contentType.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: contentType.id + '-children' })" css="data.main.css" data-bind="pbStyles:data.main.style, sortableChildren: getSortableOptions('height', 'pointer')">
10+
<div class="element-children buttons-container" each="contentType.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: contentType.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: getSortableOptions('height', 'pointer')">
1111
<div class="pagebuilder-content-type-wrapper" template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
1212
</div>
1313
</div>

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column/full-height/preview.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<div class="pagebuilder-content-type type-container pagebuilder-column children-min-height"
99
attr="data.main.attributes"
10-
data-bind="pbStyles:data.main.style"
10+
ko-style="data.main.style"
1111
event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
1212
css="Object.assign(data.main.css(), {'empty-container': $parent.children().length == 0})"
1313
afterRender="initColumn">
@@ -16,7 +16,7 @@
1616
data-bind="visible: $index() < $parent.parentContentType.children().length - 1"></div>
1717
<div class="pagebuilder-resizing" css="{active: resizing}"></div>
1818
<render args="getOptions().template"></render>
19-
<div class="element-children content-type-container" each="contentType.getChildren()" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="pbStyles:data.container.style, sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
19+
<div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
2020
<if args="$parent.isContainer()">
2121
<div class="pagebuilder-drop-indicator"></div>
2222
</if>

0 commit comments

Comments
 (0)