@total_onion/onion-library 3.0.24 → 3.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/block-accent-image-v3/accent-image-v3.twig +8 -5
- package/components/block-block-interactions-v3/block-interactions-v3.twig +16 -33
- package/components/webc-layout-container/index.html +108 -0
- package/components/webc-layout-container/layout-container.css +9 -0
- package/components/webc-layout-container/layout-container.html +5 -0
- package/components/webc-layout-container/layout-container.js +22 -0
- package/components/webc-responsive-image/index.html +108 -0
- package/components/webc-responsive-image/layout-container.css +9 -0
- package/components/webc-responsive-image/layout-container.js +22 -0
- package/components/webc-responsive-image/responsive-image.html +15 -0
- package/components/webc-slot-test/slot-test.html +25 -0
- package/createNewBlock.js +3 -41
- package/new-block-templates/template-block-json.js +11 -9
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{% set blockClassName = "accent-image-v3" %}
|
|
2
|
-
{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
|
|
2
|
+
{% set classNameEntryPoint = include('entry-points/entry-point-classes-v3.twig', { fields: fields, block: block }, with_context = false) %}
|
|
3
3
|
{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
|
|
4
|
-
{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
|
|
4
|
+
{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute-v3.twig', { fields: fields, block: block }, with_context = false) %}
|
|
5
5
|
{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
|
|
6
|
-
{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
|
|
6
|
+
{% set previewEntryPoint = include('entry-points/entry-point-preview-info-v3.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
|
|
7
7
|
{% set sectionStyles = styleEntryPoint %}
|
|
8
8
|
{{previewEntryPoint}}
|
|
9
9
|
<style>
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
{% if image.animations.enable_animations %}
|
|
46
46
|
{{include('components/animations-style-v3.twig', { fields: image, suffix }, with_context = false)}}
|
|
47
47
|
{% endif %}
|
|
48
|
-
<style>
|
|
48
|
+
<style accentimagestyle>
|
|
49
49
|
.loaded .{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
|
|
50
50
|
{{include('components/animations-v3.twig', { fields: image, block: block, blockClassName: blockClassName, suffix }, with_context = false)}}
|
|
51
51
|
animation: var(--animation-name) var(--animation-duration) var(--animation-delay) var(--animation-easing) var(--animation-repeat) var(--animation-fill-mode) var(--animation-direction);
|
|
@@ -109,6 +109,9 @@
|
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
</style>
|
|
112
|
+
|
|
113
|
+
<!--pattern-replace-var:accentImageSrc={{accentImage.src}}-->
|
|
114
|
+
|
|
112
115
|
<{{accentImageContainerElement}}
|
|
113
116
|
{{accentImageCtaType == 'link' ? 'href="' ~ image.accent_image_link.url ~ '" ' ~ 'target="' ~ image.accent_image_link.target ~ '" ' : ''}}
|
|
114
117
|
class="{{block.id}}-{{ loop.index }} {{blockClassName}}__accent-image">
|
|
@@ -131,4 +134,4 @@
|
|
|
131
134
|
</{{accentImageContainerElement}}>
|
|
132
135
|
{% endfor %}
|
|
133
136
|
{% endif %}
|
|
134
|
-
</section>
|
|
137
|
+
</section>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{% set blockClassName = "block-interactions-v3" %}
|
|
2
|
-
{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
|
|
2
|
+
{% set classNameEntryPoint = include('entry-points/entry-point-classes-v3.twig', { fields: fields, block: block }, with_context = false) %}
|
|
3
3
|
{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
|
|
4
|
-
{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
|
|
4
|
+
{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute-v3.twig', { fields: fields, block: block }, with_context = false) %}
|
|
5
5
|
{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
|
|
6
|
-
{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
|
|
6
|
+
{% set previewEntryPoint = include('entry-points/entry-point-preview-info-v3.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
|
|
7
7
|
{% set sectionStyles = styleEntryPoint %}
|
|
8
8
|
{{previewEntryPoint}}
|
|
9
9
|
<style>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
{{sectionStyles}}
|
|
12
12
|
}
|
|
13
13
|
</style>
|
|
14
|
-
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{
|
|
14
|
+
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-parentblockid="{{block.videoIdPrefix}}" data-assetkey="{{blockClassName}}">
|
|
15
15
|
{% set blockInteractionsEnabled = fields.enable_block_interactions %}
|
|
16
16
|
{% set enableInteractionsButton = fields.enable_interactions_button %}
|
|
17
17
|
{% set interactionsButtonType = fields.interactions_button_type %}
|
|
@@ -19,15 +19,13 @@
|
|
|
19
19
|
{% set animationDuration = fields.animation_duration|ru %}
|
|
20
20
|
|
|
21
21
|
{% if blockInteractionsEnabled %}
|
|
22
|
-
{% for item in fields.
|
|
23
|
-
{% if item.
|
|
24
|
-
{
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
{% set ctaAnimationStyle = ctaData.cta_settings.cta_animation_style %}
|
|
22
|
+
{% for item in fields.interaction_triggers %}
|
|
23
|
+
{% if item.acf_fc_layout == 'video_trigger' %}
|
|
24
|
+
<button class="{{item.button_class}}" data-triggerid="{{ block.videoIdPrefix ~ item.video_trigger_id }}">
|
|
25
|
+
<span class="cmpl-cta-span">{{ item.button_text }}</span>
|
|
26
|
+
</button>
|
|
28
27
|
{% endif %}
|
|
29
|
-
|
|
30
|
-
{% for item in fields.modal_popup_triggers %}
|
|
28
|
+
{% if item.acf_fc_layout == 'modal_popup_trigger' %}
|
|
31
29
|
{% if item.cta_style|ru matches '/^\\d+$/' %}
|
|
32
30
|
{% set ctaData = attribute(cta_styles['theme_cta_styles'], item.cta_style|ru - 1) %}
|
|
33
31
|
{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
|
|
@@ -39,11 +37,10 @@
|
|
|
39
37
|
{% if item.modal_popup_trigger_text %}
|
|
40
38
|
<span class="{{blockClassName}}__popup-trigger-text">{{ item.modal_popup_trigger_text }}</span>
|
|
41
39
|
{% endif %}
|
|
42
|
-
<span
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
40
|
+
<span
|
|
41
|
+
class="{{blockClassName}}__popup-trigger-icon">
|
|
42
|
+
{# <img src="{{ get_image(options.theme_cta_icons[item.trigger_icon_type|ru]).src }}"> #}
|
|
43
|
+
<img src="{{ options.cta_icons[item.trigger_icon_type|ru].src }}" alt="modal trigger icon">
|
|
47
44
|
</span>
|
|
48
45
|
</button>
|
|
49
46
|
{% else %}
|
|
@@ -51,22 +48,8 @@
|
|
|
51
48
|
<span class="cmpl-cta-span">{{ item.modal_popup_trigger_text }}</span>
|
|
52
49
|
</button>
|
|
53
50
|
{% endif %}
|
|
54
|
-
{% endfor %}
|
|
55
|
-
{% endfor %}
|
|
56
|
-
|
|
57
|
-
{% if enableInteractionsButton %}
|
|
58
|
-
{% if (interactionsButtonType|ru == 'close-block') %}
|
|
59
|
-
{% set closeButtonIcon = get_image(fields.upload_close_icon) %}
|
|
60
|
-
{% set closeButtonCookie = fields.enable_closed_cookie %}
|
|
61
|
-
<button class="block-interactions-v3__block-close-button" data-animationname="{{animationName}}" data-animationduration="{{animationDuration}}" data-store-cookie="{{closeButtonCookie ? 'true' : 'false' }}">
|
|
62
|
-
{% set iconType = options.theme_cta_icons.cta_close_icon %}
|
|
63
|
-
{% set iconImage = get_image(iconType) %}
|
|
64
|
-
{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
|
|
65
|
-
{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '" alt="close button">'}}
|
|
66
|
-
</button>
|
|
67
51
|
{% endif %}
|
|
68
|
-
{%
|
|
69
|
-
|
|
52
|
+
{% endfor %}
|
|
70
53
|
{% endif %}
|
|
71
54
|
{{htmlEntryPoint}}
|
|
72
|
-
</section>
|
|
55
|
+
</section>
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<link rel="stylesheet" href="../../public/publicBundleBase.css" />
|
|
7
|
+
<link rel="stylesheet" href="./ptfg-9000.css" />
|
|
8
|
+
<link rel="stylesheet" href="../webc-toggle-trigger/toggle-trigger.css" />
|
|
9
|
+
<link rel="stylesheet" href="../webc-text-input-trigger/text-input-trigger.css" />
|
|
10
|
+
<link rel="stylesheet" href="../webc-loadmore-trigger/loadmore-trigger.css" />
|
|
11
|
+
<link
|
|
12
|
+
rel="stylesheet"
|
|
13
|
+
href="../webc-post-filter-module/post-filter-module.css"
|
|
14
|
+
/>
|
|
15
|
+
<link
|
|
16
|
+
rel="stylesheet"
|
|
17
|
+
href="../webc-post-carousel-display-module/post-carousel-display-module.css"
|
|
18
|
+
/>
|
|
19
|
+
<title>PTFG</title>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<ptfg-9000
|
|
23
|
+
class="ptfg-9000 ptfg-9000__main-container cmpl-block-padding"
|
|
24
|
+
data-assetkey="ptfg-9000"
|
|
25
|
+
>
|
|
26
|
+
<post-filter-module
|
|
27
|
+
id="filter-module"
|
|
28
|
+
data-dataobjectid=""
|
|
29
|
+
data-dev="true"
|
|
30
|
+
data-devdatalocation="local"
|
|
31
|
+
class="post-filter-module__filter"
|
|
32
|
+
data-postsperpagedesktop="8"
|
|
33
|
+
data-postsperpagemobile="6"
|
|
34
|
+
data-loadmoretriggerclass="loadmore-trigger"
|
|
35
|
+
data-textinputclass="text-input-trigger"
|
|
36
|
+
>
|
|
37
|
+
<toggle-trigger
|
|
38
|
+
id="toggle-trigger"
|
|
39
|
+
data-toggletext="Toggle Text"
|
|
40
|
+
data-toggletarget="#filter-module"
|
|
41
|
+
data-toggleclass="active"
|
|
42
|
+
class="toggle-trigger"
|
|
43
|
+
>
|
|
44
|
+
</post-filter-module>
|
|
45
|
+
<text-input-trigger id="text-input-trigger" class="text-input-trigger"></text-input-trigger>
|
|
46
|
+
<toggle-trigger id="toggle-trigger" data-toggletext="Filter" data-toggletarget="#filter-module" data-toggleclass="active" class="toggle-trigger"></toggle-trigger>
|
|
47
|
+
<post-carousel-display-module
|
|
48
|
+
id="display-module"
|
|
49
|
+
data-posts=""
|
|
50
|
+
class="post-carousel-display-module cmpl-block-padding cmpl-block-settings"
|
|
51
|
+
>
|
|
52
|
+
</post-carousel-display-module>
|
|
53
|
+
<loadmore-trigger id="loadmore-trigger" data-buttontext="Load More" class="loadmore-trigger"></loadmore-trigger>
|
|
54
|
+
</ptfg-9000>
|
|
55
|
+
|
|
56
|
+
<script type="module">
|
|
57
|
+
//Run Component JS
|
|
58
|
+
import blockfilterjs from "../webc-post-filter-module/post-filter-module.js";
|
|
59
|
+
blockfilterjs();
|
|
60
|
+
|
|
61
|
+
import toggletriggerjs from "../webc-toggle-trigger/toggle-trigger.js";
|
|
62
|
+
toggletriggerjs();
|
|
63
|
+
|
|
64
|
+
import textInputTrigger from "../webc-text-input-trigger/text-input-trigger.js";
|
|
65
|
+
textInputTrigger();
|
|
66
|
+
|
|
67
|
+
import loadmoreTrigger from "../webc-loadmore-trigger/loadmore-trigger.js";
|
|
68
|
+
loadmoreTrigger();
|
|
69
|
+
|
|
70
|
+
import blockcarouseljs from "../webc-post-carousel-display-module/post-carousel-display-module.js";
|
|
71
|
+
blockcarouseljs();
|
|
72
|
+
|
|
73
|
+
import blockptfgjs from "./ptfg-9000.js";
|
|
74
|
+
blockptfgjs();
|
|
75
|
+
</script>
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
<!--
|
|
81
|
+
<script type="module">
|
|
82
|
+
// Post filter module
|
|
83
|
+
const postfiltermoduletemplate = await fetch(
|
|
84
|
+
"../webc-post-filter-module/post-filter-module.html"
|
|
85
|
+
);
|
|
86
|
+
const postfiltermodulehtml = await postfiltermoduletemplate.text();
|
|
87
|
+
document
|
|
88
|
+
.querySelector("ptfg-9000")
|
|
89
|
+
.insertAdjacentHTML("beforeend", postfiltermodulehtml);
|
|
90
|
+
// toggle trigger
|
|
91
|
+
const toggletrigger = await fetch(
|
|
92
|
+
"../webc-toggle-trigger/toggle-trigger.html"
|
|
93
|
+
);
|
|
94
|
+
const toggletriggerhtml = await toggletrigger.text();
|
|
95
|
+
document
|
|
96
|
+
.querySelector("ptfg-9000")
|
|
97
|
+
.insertAdjacentHTML("beforeend", toggletriggerhtml);
|
|
98
|
+
|
|
99
|
+
// post grid display
|
|
100
|
+
const postgriddisplay = await fetch(
|
|
101
|
+
"../webc-post-grid-display-module/post-grid-display-module.html"
|
|
102
|
+
);
|
|
103
|
+
const postgriddisplayhtml = await postgriddisplay.text();
|
|
104
|
+
document
|
|
105
|
+
.querySelector("ptfg-9000")
|
|
106
|
+
.insertAdjacentHTML("beforeend", postgriddisplayhtml);
|
|
107
|
+
|
|
108
|
+
</script> -->
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export default function layoutContainerJs(options = {}) {
|
|
2
|
+
try {
|
|
3
|
+
if (!customElements.get('layout-container')) {
|
|
4
|
+
customElements.define(
|
|
5
|
+
'layout-container',
|
|
6
|
+
class extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
this.data = this.dataset;
|
|
10
|
+
}
|
|
11
|
+
connectedCallback() {
|
|
12
|
+
console.log('Layout container element added to page.');
|
|
13
|
+
this.classList.add('loaded');
|
|
14
|
+
}
|
|
15
|
+
attributeChangedCallback(name, oldValue, newValue) {}
|
|
16
|
+
}
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
} catch (error) {
|
|
20
|
+
console.error(error);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<link rel="stylesheet" href="../../public/publicBundleBase.css" />
|
|
7
|
+
<link rel="stylesheet" href="./ptfg-9000.css" />
|
|
8
|
+
<link rel="stylesheet" href="../webc-toggle-trigger/toggle-trigger.css" />
|
|
9
|
+
<link rel="stylesheet" href="../webc-text-input-trigger/text-input-trigger.css" />
|
|
10
|
+
<link rel="stylesheet" href="../webc-loadmore-trigger/loadmore-trigger.css" />
|
|
11
|
+
<link
|
|
12
|
+
rel="stylesheet"
|
|
13
|
+
href="../webc-post-filter-module/post-filter-module.css"
|
|
14
|
+
/>
|
|
15
|
+
<link
|
|
16
|
+
rel="stylesheet"
|
|
17
|
+
href="../webc-post-carousel-display-module/post-carousel-display-module.css"
|
|
18
|
+
/>
|
|
19
|
+
<title>PTFG</title>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<ptfg-9000
|
|
23
|
+
class="ptfg-9000 ptfg-9000__main-container cmpl-block-padding"
|
|
24
|
+
data-assetkey="ptfg-9000"
|
|
25
|
+
>
|
|
26
|
+
<post-filter-module
|
|
27
|
+
id="filter-module"
|
|
28
|
+
data-dataobjectid=""
|
|
29
|
+
data-dev="true"
|
|
30
|
+
data-devdatalocation="local"
|
|
31
|
+
class="post-filter-module__filter"
|
|
32
|
+
data-postsperpagedesktop="8"
|
|
33
|
+
data-postsperpagemobile="6"
|
|
34
|
+
data-loadmoretriggerclass="loadmore-trigger"
|
|
35
|
+
data-textinputclass="text-input-trigger"
|
|
36
|
+
>
|
|
37
|
+
<toggle-trigger
|
|
38
|
+
id="toggle-trigger"
|
|
39
|
+
data-toggletext="Toggle Text"
|
|
40
|
+
data-toggletarget="#filter-module"
|
|
41
|
+
data-toggleclass="active"
|
|
42
|
+
class="toggle-trigger"
|
|
43
|
+
>
|
|
44
|
+
</post-filter-module>
|
|
45
|
+
<text-input-trigger id="text-input-trigger" class="text-input-trigger"></text-input-trigger>
|
|
46
|
+
<toggle-trigger id="toggle-trigger" data-toggletext="Filter" data-toggletarget="#filter-module" data-toggleclass="active" class="toggle-trigger"></toggle-trigger>
|
|
47
|
+
<post-carousel-display-module
|
|
48
|
+
id="display-module"
|
|
49
|
+
data-posts=""
|
|
50
|
+
class="post-carousel-display-module cmpl-block-padding cmpl-block-settings"
|
|
51
|
+
>
|
|
52
|
+
</post-carousel-display-module>
|
|
53
|
+
<loadmore-trigger id="loadmore-trigger" data-buttontext="Load More" class="loadmore-trigger"></loadmore-trigger>
|
|
54
|
+
</ptfg-9000>
|
|
55
|
+
|
|
56
|
+
<script type="module">
|
|
57
|
+
//Run Component JS
|
|
58
|
+
import blockfilterjs from "../webc-post-filter-module/post-filter-module.js";
|
|
59
|
+
blockfilterjs();
|
|
60
|
+
|
|
61
|
+
import toggletriggerjs from "../webc-toggle-trigger/toggle-trigger.js";
|
|
62
|
+
toggletriggerjs();
|
|
63
|
+
|
|
64
|
+
import textInputTrigger from "../webc-text-input-trigger/text-input-trigger.js";
|
|
65
|
+
textInputTrigger();
|
|
66
|
+
|
|
67
|
+
import loadmoreTrigger from "../webc-loadmore-trigger/loadmore-trigger.js";
|
|
68
|
+
loadmoreTrigger();
|
|
69
|
+
|
|
70
|
+
import blockcarouseljs from "../webc-post-carousel-display-module/post-carousel-display-module.js";
|
|
71
|
+
blockcarouseljs();
|
|
72
|
+
|
|
73
|
+
import blockptfgjs from "./ptfg-9000.js";
|
|
74
|
+
blockptfgjs();
|
|
75
|
+
</script>
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
<!--
|
|
81
|
+
<script type="module">
|
|
82
|
+
// Post filter module
|
|
83
|
+
const postfiltermoduletemplate = await fetch(
|
|
84
|
+
"../webc-post-filter-module/post-filter-module.html"
|
|
85
|
+
);
|
|
86
|
+
const postfiltermodulehtml = await postfiltermoduletemplate.text();
|
|
87
|
+
document
|
|
88
|
+
.querySelector("ptfg-9000")
|
|
89
|
+
.insertAdjacentHTML("beforeend", postfiltermodulehtml);
|
|
90
|
+
// toggle trigger
|
|
91
|
+
const toggletrigger = await fetch(
|
|
92
|
+
"../webc-toggle-trigger/toggle-trigger.html"
|
|
93
|
+
);
|
|
94
|
+
const toggletriggerhtml = await toggletrigger.text();
|
|
95
|
+
document
|
|
96
|
+
.querySelector("ptfg-9000")
|
|
97
|
+
.insertAdjacentHTML("beforeend", toggletriggerhtml);
|
|
98
|
+
|
|
99
|
+
// post grid display
|
|
100
|
+
const postgriddisplay = await fetch(
|
|
101
|
+
"../webc-post-grid-display-module/post-grid-display-module.html"
|
|
102
|
+
);
|
|
103
|
+
const postgriddisplayhtml = await postgriddisplay.text();
|
|
104
|
+
document
|
|
105
|
+
.querySelector("ptfg-9000")
|
|
106
|
+
.insertAdjacentHTML("beforeend", postgriddisplayhtml);
|
|
107
|
+
|
|
108
|
+
</script> -->
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export default function layoutContainerJs(options = {}) {
|
|
2
|
+
try {
|
|
3
|
+
if (!customElements.get('layout-container')) {
|
|
4
|
+
customElements.define(
|
|
5
|
+
'layout-container',
|
|
6
|
+
class extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
this.data = this.dataset;
|
|
10
|
+
}
|
|
11
|
+
connectedCallback() {
|
|
12
|
+
console.log('Layout container element added to page.');
|
|
13
|
+
this.classList.add('loaded');
|
|
14
|
+
}
|
|
15
|
+
attributeChangedCallback(name, oldValue, newValue) {}
|
|
16
|
+
}
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
} catch (error) {
|
|
20
|
+
console.error(error);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<responsive-image class="responsive-image-v3" data-assetkey="responsive-image" data-enableparallax="{{ parallaxEnabled }}">
|
|
2
|
+
|
|
3
|
+
<picture class="responsive-image-v3__picture {{picture_id|default(block.id)}}" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" data-assetkey="responsive-image" data-enableparallax="{{ parallaxEnabled }}">
|
|
4
|
+
|
|
5
|
+
<source data-type="srcSetDesktop" data-pattern-suffix="{{suffix}}" media="(min-width: 1024px)" class="responsive-image-v3__source responsive-image-v3--desktop" width="{{ desktopImage.width }}" height="{{ desktopImage.height }}" srcset="{{desktopSrcset}}"/>
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
<source data-type="srcSetTablet" data-pattern-suffix="{{suffix}}" media="(min-width: 768px)" width="{{ tabletImage.width }}" height="{{ tabletImage.height }}" class="responsive-image-v3__source responsive-image-v3--tablet" srcset="{{ tabletSrcset }}"/>
|
|
9
|
+
|
|
10
|
+
<source data-type="srcSetMobile" data-pattern-suffix="{{suffix}}" class="responsive-image-v3__source responsive-image-v3__source--mobile" width="{{ mobileImage.width }}" height="{{ mobileImage.height }}" srcset="{{ mobileSrcset }}"/>
|
|
11
|
+
|
|
12
|
+
<img data-type="srcGeneral" data-elementname="main-image" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" {{ enableEagerLoading }} sizes="{{ sizes }}" class="responsive-image-v3__image" src="{{mainImageSrc}}" alt="{{ desktopImage.alt }}" {{ parallaxDepth }} {{ parallaxOffsetY }}/>
|
|
13
|
+
</picture>
|
|
14
|
+
|
|
15
|
+
</responsive-image>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<my-paragraph>
|
|
2
|
+
<span slot="my-text">Let's have some different text!</span>
|
|
3
|
+
<slot name="my-text">My default text</slot>
|
|
4
|
+
|
|
5
|
+
</my-paragraph>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
class MyParagraph extends HTMLElement {
|
|
9
|
+
constructor() {
|
|
10
|
+
super();
|
|
11
|
+
const shadow = this.attachShadow({ mode: 'open' });
|
|
12
|
+
shadow.innerHTML = `
|
|
13
|
+
<style>
|
|
14
|
+
p {
|
|
15
|
+
color: blue;
|
|
16
|
+
font-size: 18px;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
19
|
+
<p><slot name="my-text">My default text</slot></p>
|
|
20
|
+
`;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
customElements.define('my-paragraph', MyParagraph);
|
|
25
|
+
</script>
|
package/createNewBlock.js
CHANGED
|
@@ -73,39 +73,11 @@ if (dynamicEntryPoints.indexOf(newBlockName) !== -1) {
|
|
|
73
73
|
);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
const imageTemplate = `
|
|
77
|
-
{{ include("components/responsive-image.twig", {fields : fields, block : block, blockClassName: blockClassName}, with_context = false) }}
|
|
78
|
-
`;
|
|
79
|
-
|
|
80
|
-
const contentContainerTemplate = `
|
|
81
|
-
<div class="${newBlockName}__content-container">
|
|
82
|
-
<h1 class="${newBlockName}__title">${newBlockName} title!</h1>
|
|
83
|
-
</div>
|
|
84
|
-
`;
|
|
85
|
-
|
|
86
76
|
const templateData = `
|
|
87
77
|
{% set blockClassName = "${newBlockName}" %}
|
|
88
|
-
|
|
89
|
-
{
|
|
90
|
-
|
|
91
|
-
{% set styleEntryPoint = include('entry-points/entry-point-style.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
|
|
92
|
-
{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
|
|
93
|
-
|
|
94
|
-
{% set sectionStyles = styleEntryPoint %}
|
|
95
|
-
|
|
96
|
-
{{previewEntryPoint}}
|
|
97
|
-
<style>
|
|
98
|
-
.{{blockClassName}}.{{block.id}}{
|
|
99
|
-
{{sectionStyles}}
|
|
100
|
-
}
|
|
101
|
-
</style>
|
|
102
|
-
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
|
|
103
|
-
${swiper ? swiperTemplates.templatetwig(newBlockName) : ''}${
|
|
104
|
-
image ? imageTemplate : ''
|
|
105
|
-
}
|
|
106
|
-
${content ? contentContainerTemplate : ''}
|
|
107
|
-
${vue ? vueTemplates.templatetwig(newBlockName) : ''}
|
|
108
|
-
{{htmlEntryPoint}}
|
|
78
|
+
|
|
79
|
+
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{block.id}} lazy-fade" data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
|
|
80
|
+
|
|
109
81
|
</section>`;
|
|
110
82
|
|
|
111
83
|
let jsData;
|
|
@@ -140,16 +112,6 @@ fs.writeFileSync(
|
|
|
140
112
|
`${themePath}/inc/acf-blocks/${newBlockName}/block.json`,
|
|
141
113
|
acfTemplate(newBlockName, projectName)
|
|
142
114
|
);
|
|
143
|
-
// fs.writeFileSync(
|
|
144
|
-
// `./cypress/e2e/components/${newBlockName}.cy.js`,
|
|
145
|
-
// cypressJs(newBlockName)
|
|
146
|
-
// );
|
|
147
|
-
if (vue) {
|
|
148
|
-
fs.writeFileSync(
|
|
149
|
-
`${themePath}/assets/vue/blocks/${newBlockName}.vue`,
|
|
150
|
-
vueTemplates.templatevuefile(newBlockName)
|
|
151
|
-
);
|
|
152
|
-
}
|
|
153
115
|
|
|
154
116
|
console.log(
|
|
155
117
|
`👑 👑 👑 Hurrah! You made a new block called ${newBlockName} 👑 👑 👑`
|
|
@@ -7,17 +7,23 @@ module.exports = function (newBlockName, projectName) {
|
|
|
7
7
|
return `{
|
|
8
8
|
"$schema": "https://schemas.wp.org/trunk/block.json",
|
|
9
9
|
"apiVersion": 3,
|
|
10
|
-
"name": "
|
|
10
|
+
"name": "acf/${newBlockName}",
|
|
11
11
|
"title": "${blockTitle}",
|
|
12
|
-
"category": "
|
|
13
|
-
"icon": "smiley",
|
|
12
|
+
"category": "project-blocks",
|
|
14
13
|
"description": "${blockTitle} block",
|
|
15
|
-
"
|
|
14
|
+
"icon": "green-brick",
|
|
15
|
+
"keywords": ["content"],
|
|
16
16
|
"version": "1.0.0",
|
|
17
17
|
"textdomain": "${namespace}",
|
|
18
|
+
"acf": {
|
|
19
|
+
"mode": "preview",
|
|
20
|
+
"renderCallback": "core_block_render_post_object_v3",
|
|
21
|
+
"blockVersion": 3
|
|
22
|
+
},
|
|
18
23
|
"supports": {
|
|
24
|
+
"align": false,
|
|
19
25
|
"anchor": true,
|
|
20
|
-
"
|
|
26
|
+
"jsx": true
|
|
21
27
|
},
|
|
22
28
|
"example": {
|
|
23
29
|
"attributes": {
|
|
@@ -26,10 +32,6 @@ module.exports = function (newBlockName, projectName) {
|
|
|
26
32
|
"is_example": true
|
|
27
33
|
}
|
|
28
34
|
}
|
|
29
|
-
},
|
|
30
|
-
"acf": {
|
|
31
|
-
"mode": "preview",
|
|
32
|
-
"renderCallback": "core_block_render_post_object_v3"
|
|
33
35
|
}
|
|
34
36
|
}`;
|
|
35
37
|
};
|