@total_onion/onion-library 2.0.202 → 2.0.203

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.
Files changed (8) hide show
  1. package/components/webc-post-filter-module/dev-content/dev-content.js +35 -5
  2. package/components/webc-post-filter-module/post-filter-module.css +6 -0
  3. package/components/webc-post-filter-module/post-filter-module.html +3 -0
  4. package/components/webc-post-filter-module/post-filter-module.js +86 -36
  5. package/components/webc-ptfg-9000/index.html +6 -7
  6. package/components/webc-ptfg-9000/ptfg-9000.html +0 -1
  7. package/package.json +1 -1
  8. package/components/webc-ptfg-9000/dev-content/dev-content.js +0 -38
package/components/webc-post-filter-module/dev-content/dev-content.js CHANGED
@@ -1,26 +1,26 @@
1
1
  export const devContentDogz = [
2
2
  {
3
- postname: 'Dogz-1',
3
+ postname: 'Puppy-1',
4
4
  'post-link': '#',
5
5
  'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
6
- categories: new Set([1, 5])
6
+ categories: [1, 5]
7
7
  },
8
8
  {
9
- postname: 'Dogz-2',
9
+ postname: 'Puppy-2',
10
10
  'post-link': '#',
11
11
  'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
12
12
 
13
13
  categories: new Set([2])
14
14
  },
15
15
  {
16
- postname: 'Dogz-3',
16
+ postname: 'Puppy-3',
17
17
  'post-link': '#',
18
18
  'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
19
19
 
20
20
  categories: new Set([1, 3])
21
21
  },
22
22
  {
23
- postname: 'Dogz-4',
23
+ postname: 'Puppy-4',
24
24
  'post-link': '#',
25
25
  'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
26
26
 
@@ -28,6 +28,36 @@ export const devContentDogz = [
28
28
  }
29
29
  ];
30
30
 
31
+ export const devContentCatz = [
32
+ {
33
+ postname: 'Catz-1',
34
+ 'post-link': '#',
35
+ 'image-src': 'https://placekittens.com/g/200/300',
36
+ categories: [1, 5]
37
+ },
38
+ {
39
+ postname: 'Catz-2',
40
+ 'post-link': '#',
41
+ 'image-src': 'https://placekittens.com/g/200/300',
42
+
43
+ categories: [2]
44
+ },
45
+ {
46
+ postname: 'Catz-3',
47
+ 'post-link': '#',
48
+ 'image-src': 'https://placekittens.com/g/200/300',
49
+
50
+ categories: [1, 3]
51
+ },
52
+ {
53
+ postname: 'Catz-4',
54
+ 'post-link': '#',
55
+ 'image-src': 'https://placekittens.com/g/200/300',
56
+
57
+ categories: [4]
58
+ }
59
+ ];
60
+
31
61
  export const devContentCategories = [
32
62
  {name: 'grumpy', id: '1', parentid: '6'},
33
63
  {name: 'fluffy', id: '2', parentid: '6'},
package/components/webc-post-filter-module/post-filter-module.css CHANGED
@@ -1,4 +1,10 @@
1
1
  post-filter-module {
2
2
  display: block;
3
3
  background-color: aquamarine;
4
+ .post-filter-module__filter-category-button {
5
+ border: 1px solid yellow;
6
+ }
7
+ .post-filter-module__filter-category-button.active-cat {
8
+ border: 1px solid red;
9
+ }
4
10
  }
package/components/webc-post-filter-module/post-filter-module.html CHANGED
@@ -7,5 +7,8 @@
7
7
  >
8
8
  <div class="post-filter-module__filter-container">
9
9
  <div class="post-filter-module__filter-categories-display"></div>
10
+ <button class="post-filter-module__clear-filters-button">
11
+ Clear Filters
12
+ </button>
10
13
  </div>
11
14
  </post-filter-module>
package/components/webc-post-filter-module/post-filter-module.js CHANGED
@@ -7,46 +7,34 @@ export default function postfiltermoduleJs(options = {}) {
7
7
  super();
8
8
  this.enableLogs = this.dataset.enablelogs;
9
9
  this.filterState = {
10
- allposts: new Set(),
11
- filteredposts: new Set(),
10
+ allposts: [],
11
+ filteredposts: [],
12
12
  activefilters: new Set(),
13
+ allcategories: [],
14
+ groupingcategories: [],
15
+ filtercategories: [],
13
16
  setActiveFilters: function (newState) {
14
17
  Object.assign(this.filterState, newState);
15
- this.dispatchEvent(
16
- new CustomEvent('activefilters-updated')
17
- );
18
+ this.filterPosts.bind(this)();
18
19
  },
19
20
  setFilteredPosts: function (newState) {
20
21
  Object.assign(this.filterState, newState);
21
22
  this.dispatchEvent(
22
23
  new CustomEvent('filteredposts-updated')
23
24
  );
25
+ console.log('filter state: ', this.filterState);
24
26
  }
25
27
  };
26
28
  this.filterCategoriesDisplay = this.querySelector(
27
29
  '.post-filter-module__filter-categories-display'
28
30
  );
29
31
 
30
- if (this.dataset.enableclear) {
31
- this.filterCategoriesDisplay.insertAdjacentHTML(
32
- 'beforeend',
33
- `<button class="post-filter-module__clear-filters-button">Clear Filters</button>`
34
- );
35
- this.clearFiltersButton = this.querySelector(
36
- '.post-filter-module__clear-filters-button'
37
- );
38
- this.clearFiltersButton.addEventListener(
39
- 'click',
40
- this.clearFilters.bind(this)
41
- );
42
- }
43
- this.setStateButton = this.querySelector(
44
- '.post-filter-module__set-state-button'
32
+ this.clearFiltersButton = this.querySelector(
33
+ '.post-filter-module__clear-filters-button'
45
34
  );
46
-
47
- this.addEventListener(
48
- 'activefilters-updated',
49
- this.filterPosts.bind(this)
35
+ this.clearFiltersButton.addEventListener(
36
+ 'click',
37
+ this.clearFilters.bind(this)
50
38
  );
51
39
  this.devMode = this.dataset.dev;
52
40
  this.devModeContent = this.dataset.devcontent;
@@ -59,18 +47,76 @@ export default function postfiltermoduleJs(options = {}) {
59
47
  }
60
48
  this.filterState.allposts =
61
49
  data[`devContent${this.devModeContent}`];
62
- this.filterState.categories = data[`devContentCategories`];
63
- this.filterState.categories.forEach((category) => {
64
- if (category.parentid) {
65
- this.filterCategoriesDisplay.insertAdjacentHTML(
66
- 'beforeend',
67
- `<button class="post-filter-module__category-button" data-categoryid="${category.id}">${category.name}</button>`
68
- );
69
- }
70
- });
50
+
51
+ this.filterState.allcategories =
52
+ data[`devContentCategories`];
53
+
54
+ if (this.filterState.allcategories.length > 0) {
55
+ this.filterState.allcategories.forEach((category) => {
56
+ if (category.parentid != null) {
57
+ this.filterState.filtercategories.push(
58
+ category
59
+ );
60
+ } else {
61
+ this.filterState.groupingcategories.push(
62
+ category
63
+ );
64
+ }
65
+ });
66
+ }
67
+ if (this.filterState.groupingcategories.length > 0) {
68
+ this.filterState.groupingcategories.forEach(
69
+ (category) => {
70
+ const groupCategoryContainer =
71
+ document.createElement('div');
72
+ groupCategoryContainer.className =
73
+ 'post-filter-module__grouping-category-container';
74
+ groupCategoryContainer.insertAdjacentHTML(
75
+ 'beforeend',
76
+ `<button class="post-filter-module__grouping-category-button" data-categoryid="${category.id}">${category.name}</button>`
77
+ );
78
+ const filterCategoryContainer =
79
+ document.createElement('div');
80
+ filterCategoryContainer.className =
81
+ 'post-filter-module__filter-category-container';
82
+ const groupedFilters =
83
+ this.filterState.filtercategories.filter(
84
+ (filtercat) => {
85
+ return (
86
+ filtercat.parentid ==
87
+ category.id
88
+ );
89
+ }
90
+ );
91
+ groupedFilters.forEach((filter) => {
92
+ filterCategoryContainer.insertAdjacentHTML(
93
+ 'beforeend',
94
+ `<button class="post-filter-module__filter-category-button" data-categoryid="${filter.id}">${filter.name}</button>`
95
+ );
96
+ });
97
+ groupCategoryContainer.appendChild(
98
+ filterCategoryContainer
99
+ );
100
+ this.filterCategoriesDisplay.appendChild(
101
+ groupCategoryContainer
102
+ );
103
+ }
104
+ );
105
+ } else {
106
+ this.filterState.filtercategories.forEach(
107
+ (category) => {
108
+ if (category.parentid) {
109
+ this.filterCategoriesDisplay.insertAdjacentHTML(
110
+ 'beforeend',
111
+ `<button class="post-filter-module__filter-category-button" data-categoryid="${category.id}">${category.name}</button>`
112
+ );
113
+ }
114
+ }
115
+ );
116
+ }
71
117
 
72
118
  this.categorybuttons = this.querySelectorAll(
73
- '.post-filter-module__category-button'
119
+ '.post-filter-module__filter-category-button'
74
120
  );
75
121
 
76
122
  this.categorybuttons.forEach((button) => {
@@ -83,6 +129,7 @@ export default function postfiltermoduleJs(options = {}) {
83
129
  const newActiveFilters = new Set(
84
130
  this.filterState.activefilters
85
131
  );
132
+ button.classList.remove('active-cat');
86
133
  newActiveFilters.delete(
87
134
  Number(button.dataset.categoryid)
88
135
  );
@@ -93,6 +140,7 @@ export default function postfiltermoduleJs(options = {}) {
93
140
  const newActiveFilters = new Set(
94
141
  this.filterState.activefilters
95
142
  );
143
+ button.classList.add('active-cat');
96
144
  newActiveFilters.add(
97
145
  Number(button.dataset.categoryid)
98
146
  );
@@ -105,7 +153,6 @@ export default function postfiltermoduleJs(options = {}) {
105
153
  this.filterState.setFilteredPosts.bind(this)({
106
154
  filteredposts: this.filterState.allposts
107
155
  });
108
-
109
156
  this.classList.add('loaded');
110
157
  }
111
158
 
@@ -124,7 +171,7 @@ export default function postfiltermoduleJs(options = {}) {
124
171
  (post) => {
125
172
  return (
126
173
  this.filterState.activefilters.intersection(
127
- post.categories
174
+ new Set(post.categories)
128
175
  ).size > 0
129
176
  );
130
177
  }
@@ -135,6 +182,9 @@ export default function postfiltermoduleJs(options = {}) {
135
182
  });
136
183
  }
137
184
  clearFilters(event) {
185
+ this.categorybuttons.forEach((button) => {
186
+ button.classList.remove('active-cat');
187
+ });
138
188
  this.filterState.setActiveFilters.bind(this)({
139
189
  activefilters: new Set()
140
190
  });
package/components/webc-ptfg-9000/index.html CHANGED
@@ -18,27 +18,26 @@
18
18
  <body>
19
19
  <ptfg-9000
20
20
  class="ptfg-9000 ptfg-9000__main-container cmpl-block-padding"
21
- data-dev="true"
22
21
  data-assetkey="ptfg-9000"
23
22
  >
24
23
  </ptfg-9000>
25
24
 
26
25
  <script type="module">
27
- const postgriddisplay = await fetch(
26
+ const postfiltermoduletemplate = await fetch(
28
27
  "../webc-post-filter-module/post-filter-module.html"
29
28
  );
30
- const postgriddisplayhtml = await postgriddisplay.text();
29
+ const postfiltermodulehtml = await postfiltermoduletemplate.text();
31
30
  document
32
31
  .querySelector("ptfg-9000")
33
- .insertAdjacentHTML("beforeend", postgriddisplayhtml);
32
+ .insertAdjacentHTML("beforeend", postfiltermodulehtml);
34
33
 
35
- const postfiltermoduletemplate = await fetch(
34
+ const postgriddisplay = await fetch(
36
35
  "../webc-post-grid-display-module/post-grid-display-module.html"
37
36
  );
38
- const postfiltermodulehtml = await postfiltermoduletemplate.text();
37
+ const postgriddisplayhtml = await postgriddisplay.text();
39
38
  document
40
39
  .querySelector("ptfg-9000")
41
- .insertAdjacentHTML("beforeend", postfiltermodulehtml);
40
+ .insertAdjacentHTML("beforeend", postgriddisplayhtml);
42
41
 
43
42
  import blockfilterjs from "../webc-post-filter-module/post-filter-module.js";
44
43
  blockfilterjs();
package/components/webc-ptfg-9000/ptfg-9000.html CHANGED
@@ -1,6 +1,5 @@
1
1
  <ptfg-9000
2
2
  class="ptfg-9000 ptfg-9000__main-container"
3
- data-dev="true"
4
3
  data-assetkey="ptfg-9000"
5
4
  >
6
5
  </ptfg-9000>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.202",
3
+ "version": "2.0.203",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/components/webc-ptfg-9000/dev-content/dev-content.js DELETED
@@ -1,38 +0,0 @@
1
- export const devContentDogz = [
2
- {
3
- postname: 'Dogz-1',
4
- 'post-link': '#',
5
- 'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
6
- categories: new Set([1, 5])
7
- },
8
- {
9
- postname: 'Dogz-2',
10
- 'post-link': '#',
11
- 'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
12
-
13
- categories: new Set([2])
14
- },
15
- {
16
- postname: 'Dogz-3',
17
- 'post-link': '#',
18
- 'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
19
-
20
- categories: new Set([1, 3])
21
- },
22
- {
23
- postname: 'Dogz-4',
24
- 'post-link': '#',
25
- 'image-src': 'https://place-puppy.com/puppy/y:100/x:100',
26
-
27
- categories: new Set([4])
28
- }
29
- ];
30
-
31
- export const devContentCategories = [
32
- {name: 'grumpy', id: '1', parentid: '6'},
33
- {name: 'fluffy', id: '2', parentid: '6'},
34
- {name: 'happy', id: '3', parentid: '6'},
35
- {name: 'sleepy', id: '4', parentid: '6'},
36
- {name: 'sweet', id: '5', parentid: '6'},
37
- {name: 'hounds', id: '6', parentid: null}
38
- ];