@total_onion/onion-library 2.0.232 → 2.0.235
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-carousel-multi-layout-v3/carousel-multi-layout-v3.scss +117 -116
- package/components/component-core-head-v3/core-head-v3.twig +8 -8
- package/components/webc-loadmore-trigger/loadmore-trigger.css +18 -0
- package/components/webc-loadmore-trigger/loadmore-trigger.html +5 -1
- package/components/webc-post-filter-module/post-filter-module.css +32 -11
- package/components/webc-post-filter-module/post-filter-module.html +1 -0
- package/components/webc-post-filter-module/post-filter-module.js +67 -19
- package/components/webc-post-grid-display-module/post-grid-display-module.css +33 -7
- package/components/webc-ptfg-9000/index.html +55 -44
- package/components/webc-ptfg-9000/ptfg-9000.css +8 -2
- package/components/webc-text-input-trigger/index.html +30 -0
- package/components/webc-text-input-trigger/text-input-trigger.css +6 -0
- package/components/webc-text-input-trigger/text-input-trigger.html +4 -0
- package/components/webc-text-input-trigger/text-input-trigger.js +33 -0
- package/components/webc-toggle-trigger/toggle-trigger.css +4 -1
- package/package.json +1 -1
- package/public/publicBundleBase.css +7383 -3483
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
<link rel="stylesheet" href="../../public/publicBundleBase.css" />
|
|
7
7
|
<link rel="stylesheet" href="./ptfg-9000.css" />
|
|
8
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" />
|
|
9
11
|
<link
|
|
10
12
|
rel="stylesheet"
|
|
11
13
|
href="../webc-post-filter-module/post-filter-module.css"
|
|
@@ -27,58 +29,30 @@
|
|
|
27
29
|
data-dev="true"
|
|
28
30
|
data-devdatalocation="local"
|
|
29
31
|
class="post-filter-module__filter"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
data-
|
|
33
|
-
data-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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
|
+
>
|
|
37
44
|
</post-filter-module>
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
data-toggletext="Toggle Text"
|
|
41
|
-
data-toggletarget="#filter-module"
|
|
42
|
-
data-toggleclass="active"
|
|
43
|
-
class="toggle-trigger"
|
|
44
|
-
>
|
|
45
|
-
</toggle-trigger>
|
|
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>
|
|
46
47
|
<post-grid-display-module
|
|
47
48
|
id="display-module"
|
|
48
49
|
data-posts=""
|
|
49
50
|
class="post-grid-display-module cmpl-block-padding cmpl-block-settings"
|
|
50
|
-
>
|
|
51
|
-
|
|
51
|
+
></post-grid-display-module>
|
|
52
|
+
<loadmore-trigger id="loadmore-trigger" data-buttontext="Load More" class="loadmore-trigger"></loadmore-trigger>
|
|
52
53
|
</ptfg-9000>
|
|
53
54
|
|
|
54
55
|
<script type="module">
|
|
55
|
-
// Post filter module
|
|
56
|
-
// const postfiltermoduletemplate = await fetch(
|
|
57
|
-
// "../webc-post-filter-module/post-filter-module.html"
|
|
58
|
-
// );
|
|
59
|
-
// const postfiltermodulehtml = await postfiltermoduletemplate.text();
|
|
60
|
-
// document
|
|
61
|
-
// .querySelector("ptfg-9000")
|
|
62
|
-
// .insertAdjacentHTML("beforeend", postfiltermodulehtml);
|
|
63
|
-
|
|
64
|
-
//toggle trigger
|
|
65
|
-
// const toggletrigger = await fetch(
|
|
66
|
-
// "../webc-toggle-trigger/toggle-trigger.html"
|
|
67
|
-
// );
|
|
68
|
-
// const toggletriggerhtml = await toggletrigger.text();
|
|
69
|
-
// document
|
|
70
|
-
// .querySelector("ptfg-9000")
|
|
71
|
-
// .insertAdjacentHTML("beforeend", toggletriggerhtml);
|
|
72
|
-
|
|
73
|
-
//post grid display
|
|
74
|
-
// const postgriddisplay = await fetch(
|
|
75
|
-
// "../webc-post-grid-display-module/post-grid-display-module.html"
|
|
76
|
-
// );
|
|
77
|
-
// const postgriddisplayhtml = await postgriddisplay.text();
|
|
78
|
-
// document
|
|
79
|
-
// .querySelector("ptfg-9000")
|
|
80
|
-
// .insertAdjacentHTML("beforeend", postgriddisplayhtml);
|
|
81
|
-
|
|
82
56
|
//Run Component JS
|
|
83
57
|
import blockfilterjs from "../webc-post-filter-module/post-filter-module.js";
|
|
84
58
|
blockfilterjs();
|
|
@@ -86,6 +60,12 @@
|
|
|
86
60
|
import toggletriggerjs from "../webc-toggle-trigger/toggle-trigger.js";
|
|
87
61
|
toggletriggerjs();
|
|
88
62
|
|
|
63
|
+
import textInputTrigger from "../webc-text-input-trigger/text-input-trigger.js";
|
|
64
|
+
textInputTrigger();
|
|
65
|
+
|
|
66
|
+
import loadmoreTrigger from "../webc-loadmore-trigger/loadmore-trigger.js";
|
|
67
|
+
loadmoreTrigger();
|
|
68
|
+
|
|
89
69
|
import blockgridjs from "../webc-post-grid-display-module/post-grid-display-module.js";
|
|
90
70
|
blockgridjs();
|
|
91
71
|
|
|
@@ -94,3 +74,34 @@
|
|
|
94
74
|
</script>
|
|
95
75
|
</body>
|
|
96
76
|
</html>
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
<!--
|
|
80
|
+
<script type="module">
|
|
81
|
+
// Post filter module
|
|
82
|
+
const postfiltermoduletemplate = await fetch(
|
|
83
|
+
"../webc-post-filter-module/post-filter-module.html"
|
|
84
|
+
);
|
|
85
|
+
const postfiltermodulehtml = await postfiltermoduletemplate.text();
|
|
86
|
+
document
|
|
87
|
+
.querySelector("ptfg-9000")
|
|
88
|
+
.insertAdjacentHTML("beforeend", postfiltermodulehtml);
|
|
89
|
+
// toggle trigger
|
|
90
|
+
const toggletrigger = await fetch(
|
|
91
|
+
"../webc-toggle-trigger/toggle-trigger.html"
|
|
92
|
+
);
|
|
93
|
+
const toggletriggerhtml = await toggletrigger.text();
|
|
94
|
+
document
|
|
95
|
+
.querySelector("ptfg-9000")
|
|
96
|
+
.insertAdjacentHTML("beforeend", toggletriggerhtml);
|
|
97
|
+
|
|
98
|
+
// post grid display
|
|
99
|
+
const postgriddisplay = await fetch(
|
|
100
|
+
"../webc-post-grid-display-module/post-grid-display-module.html"
|
|
101
|
+
);
|
|
102
|
+
const postgriddisplayhtml = await postgriddisplay.text();
|
|
103
|
+
document
|
|
104
|
+
.querySelector("ptfg-9000")
|
|
105
|
+
.insertAdjacentHTML("beforeend", postgriddisplayhtml);
|
|
106
|
+
|
|
107
|
+
</script> -->
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
ptfg-9000 {
|
|
2
|
-
display:
|
|
3
|
-
|
|
2
|
+
display: grid;
|
|
3
|
+
grid-template:
|
|
4
|
+
'filter ..'
|
|
5
|
+
'textinput toggleclass'
|
|
6
|
+
'display display'
|
|
7
|
+
'loadmore loadmore' / 1fr 1fr;
|
|
8
|
+
background-color: black;
|
|
9
|
+
|
|
4
10
|
--padding-block-multiplier-mobile-top: 1;
|
|
5
11
|
--padding-inline-multiplier-mobile-right: 1;
|
|
6
12
|
--padding-block-multiplier-mobile-bottom: 1;
|
|
@@ -0,0 +1,30 @@
|
|
|
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="./text-input-trigger.css" />
|
|
8
|
+
<title>PTFG</title>
|
|
9
|
+
<style>
|
|
10
|
+
body {
|
|
11
|
+
background-color: #e7b8b8;
|
|
12
|
+
}
|
|
13
|
+
main {
|
|
14
|
+
max-width: 600px;
|
|
15
|
+
margin-inline: auto;
|
|
16
|
+
padding: 50px;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<main class="main-container"></main>
|
|
22
|
+
<script async type="module">
|
|
23
|
+
const template = await fetch("./text-input-trigger.html");
|
|
24
|
+
const html = await template.text();
|
|
25
|
+
document.querySelector(".main-container").innerHTML = html;
|
|
26
|
+
import blockjs from "./text-input-trigger.js";
|
|
27
|
+
blockjs();
|
|
28
|
+
</script>
|
|
29
|
+
</body>
|
|
30
|
+
</html>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
export default function loadmoreTriggerJs(options = {}) {
|
|
2
|
+
try {
|
|
3
|
+
if (!customElements.get('text-input-trigger')) {
|
|
4
|
+
customElements.define(
|
|
5
|
+
'text-input-trigger',
|
|
6
|
+
class extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
this.enableLogs = this.dataset.enablelogs;
|
|
10
|
+
this.textInput = document.createElement('input');
|
|
11
|
+
this.textInput.setAttribute('type', 'text');
|
|
12
|
+
this.textInput.className = 'text-input-trigger__input';
|
|
13
|
+
this.appendChild(this.textInput);
|
|
14
|
+
this.textInput.placeholder =
|
|
15
|
+
this.dataset.placeholdertext || 'Start typing...';
|
|
16
|
+
this.textInput.addEventListener('input', (e) => {
|
|
17
|
+
this.dispatchEvent(new CustomEvent('textinput'));
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
connectedCallback() {
|
|
21
|
+
console.log('text input module added to page.');
|
|
22
|
+
this.classList.add('loaded');
|
|
23
|
+
}
|
|
24
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
25
|
+
// console.log(`Attribute ${name} has changed.`);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
} catch (error) {
|
|
31
|
+
console.error(error);
|
|
32
|
+
}
|
|
33
|
+
}
|