Skip to content

Commit e330b3b

Browse files
petschkipetschki
committed
Fix multiple pattern occurrences on one page with context stores
1 parent 8a6ee0f commit e330b3b

File tree

8 files changed

+150
-179
lines changed

8 files changed

+150
-179
lines changed

‎src/pat/contentbrowser/contentbrowser.js

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,9 @@ parser.addArgument(
3737
true
3838
);
3939
parser.addArgument("max-depth", "200");
40-
// parser.addArgument("base-path", `/`);
40+
parser.addArgument("base-path", `/`);
4141
parser.addArgument("maximum-selection-size", -1);
42-
// parser.addArgument("selectable-types", [],[], true);
43-
//parser.addArgument("selectable-types", [],[], true);
42+
parser.addArgument("selectable-types", [], null, true);
4443
parser.addArgument("separator", ";");
4544
parser.addArgument("selection", []);
4645

@@ -52,38 +51,26 @@ class Pattern extends BasePattern {
5251
async init() {
5352
this.el.setAttribute('style', 'display: none');
5453

55-
// ensure an id on our elemen (eg TinyMCE doesn't have one)
54+
// ensure an id on our elemen (TinyMCE doesn't have one)
5655
let nodeId = this.el.getAttribute("id");
5756
if (!nodeId) {
5857
nodeId = utils.generateId();
5958
this.el.setAttribute("id", nodeId);
6059
}
6160

62-
const ContentBrowser = (await import("./src/ContentBrowser.svelte")).default;
61+
const ContentBrowserApp = (await import("./src/App.svelte")).default;
6362

64-
// create wrapper
63+
// create browser node
6564
const contentBrowserEl = document.createElement("div");
6665
contentBrowserEl.classList.add("content-browser-wrapper");
6766
this.el.parentNode.insertBefore(contentBrowserEl, this.el);
6867

69-
this.component_instance_browser = new ContentBrowser({
68+
this.component_content_browser = new ContentBrowserApp({
7069
target: contentBrowserEl,
71-
props: this.options,
72-
});
73-
74-
const selectedItemsEl = document.createElement("div");
75-
selectedItemsEl.classList.add("selected-items");
76-
contentBrowserEl.append(selectedItemsEl);
77-
78-
const SelectedItems = (await import("./src/SelectedItems.svelte")).default;
79-
80-
this.component_instance_sel_items = new SelectedItems({
81-
target: selectedItemsEl,
8270
props: {
83-
maximumSelectionSize: this.options.maximumSelectionSize,
84-
selectedItemsNode: this.el,
71+
fieldId: nodeId,
8572
...this.options,
86-
},
73+
}
8774
});
8875
}
8976
}

‎src/pat/contentbrowser/src/App.svelte

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script>
2+
import { getContext } from "svelte";
3+
import ContentBrowser from "./ContentBrowser.svelte";
4+
import SelectedItems from "./SelectedItems.svelte";
5+
import {
6+
setConfig,
7+
setSelectedItems,
8+
setSelectedUids,
9+
setShowContentBrowser,
10+
} from "./stores";
11+
12+
export let maxDepth;
13+
export let basePath = "";
14+
export let selectableTypes = [];
15+
export let maximumSelectionSize = -1;
16+
export let attributes;
17+
export let separator;
18+
export let selection = [];
19+
export let vocabularyUrl;
20+
export let fieldId;
21+
22+
// initialize context stores
23+
setConfig();
24+
setSelectedItems();
25+
setShowContentBrowser();
26+
setSelectedUids();
27+
28+
let config = getContext("config");
29+
$config = {
30+
maxDepth: maxDepth,
31+
basePath: basePath,
32+
selectableTypes: selectableTypes,
33+
maximumSelectionSize: maximumSelectionSize,
34+
attributes: attributes,
35+
separator: separator,
36+
selection: selection,
37+
vocabularyUrl: vocabularyUrl,
38+
fieldId: fieldId,
39+
}
40+
41+
console.log(`Initialized App<${fieldId}> with config ${JSON.stringify($config)}`);
42+
</script>
43+
44+
<ContentBrowser />
45+
<SelectedItems />

‎src/pat/contentbrowser/src/ContentBrowser.svelte

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import utils from "@patternslib/patternslib/src/core/utils";
3-
import { onDestroy, onMount } from "svelte";
3+
import { getContext, onMount } from "svelte";
44
import * as animateScroll from "svelte-scrollto";
55
import { fly } from "svelte/transition";
66
import contentStore from "./ContentStore";
@@ -9,12 +9,7 @@
99
import Upload from "../../upload/upload";
1010
1111
import {
12-
setConfig,
13-
getConfig,
1412
currentPath,
15-
selectedItemsMap,
16-
selectedUids,
17-
showContentBrowser,
1813
} from "./stores.js";
1914
// import Keydown from "svelte-keydown";
2015
@@ -24,17 +19,14 @@
2419
duration: 500,
2520
});
2621
27-
export let maxDepth;
28-
export let basePath = "";
29-
export let attributes;
30-
export let vocabularyUrl;
31-
export let fieldId;
32-
export const contentItems = contentStore();
22+
// get context stores
23+
const config = getContext("config");
24+
const showContentBrowser = getContext("showContentBrowser");
25+
const selectedItems = getContext("selectedItems");
26+
const selectedUids = getContext("selectedUids");
3327
34-
// initialize reactive context config
35-
setConfig();
36-
// get creative context config
37-
const config = getConfig();
28+
// initialize content browser store
29+
const contentItems = contentStore($config);
3830
3931
let showUpload = false;
4032
let previewItem = { UID: "" };
@@ -65,10 +57,6 @@
6557
}
6658
6759
onMount(() => {
68-
$config.maxDepth = maxDepth;
69-
$config.basePath = basePath;
70-
$config.vocabularyUrl = vocabularyUrl;
71-
$config.attributes = attributes;
7260
breakPoint = getBreakPoint();
7361
console.log(
7462
`ContentBrowser initialized reactive context config: ${JSON.stringify($config)}`,
@@ -113,12 +101,12 @@
113101
}
114102
115103
async function selectItem(item) {
116-
console.log(`add ${JSON.stringify(item)} to ${fieldId}`);
117-
$selectedItemsMap.push(fieldId, item);
118-
selectedUids.update(() => $selectedItemsMap.get(fieldId).map((x) => x.UID));
104+
console.log(`add ${JSON.stringify(item)} to ${$config.fieldId}`);
105+
selectedItems.update((n) => [...n, item]);
106+
selectedUids.update(() => $selectedItems.map((x) => x.UID));
119107
$showContentBrowser = false;
120108
previewItem = { UID: "" };
121-
console.log($selectedItemsMap.get(fieldId));
109+
console.log($selectedItems);
122110
console.log($selectedUids);
123111
}
124112
@@ -225,7 +213,7 @@
225213
<button
226214
class="btn btn-primary btn-sm"
227215
disabled={!isSelectable(level)}
228-
on:click={() => selectItem(level)}
216+
on:click|preventDefault={() => selectItem(level)}
229217
>
230218
select
231219
</button>
@@ -275,7 +263,7 @@
275263
<button
276264
class="btn btn-primary btn-sm"
277265
disabled={!isSelectable(previewItem)}
278-
on:click={() => selectItem(previewItem)}
266+
on:click|preventDefault={() => selectItem(previewItem)}
279267
>select</button
280268
>
281269
</div>

‎src/pat/contentbrowser/src/ContentStore.js

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
import { writable, get } from "svelte/store";
2-
import { config, cache } from "./stores";
2+
import { cache } from "./stores";
33

4-
let cfg = get(config);
54

6-
// update cfg when config store changes
7-
export const config_unsubscribe = config.subscribe((value) => {
8-
cfg = value;
9-
});
10-
11-
export default function () {
5+
export default function (config) {
126
const store = writable([]);
137

148
store.request = async ({
@@ -17,8 +11,11 @@ export default function () {
1711
uids = null,
1812
params = null,
1913
searchTerm = null,
14+
selectableTypes = [],
2015
}) => {
21-
let vocabQuery;
16+
let vocabQuery = {
17+
criteria: [],
18+
};
2219
if (path) {
2320
vocabQuery = {
2421
criteria: [
@@ -51,10 +48,21 @@ export default function () {
5148

5249
})
5350
}
54-
55-
let url = `${cfg.vocabularyUrl}&query=${JSON.stringify(
51+
// if(selectableTypes) {
52+
// if(selectableTypes.indexOf("Folder") == -1) {
53+
// // add Folder always to preserve browsing through structure
54+
// selectableTypes.push("Folder");
55+
// }
56+
// // query only selectable types
57+
// vocabQuery.criteria.push({
58+
// i: "portal_type",
59+
// o: "plone.app.querystring.operation.selection.any",
60+
// v: selectableTypes,
61+
// });
62+
// }
63+
let url = `${config.vocabularyUrl}&query=${JSON.stringify(
5664
vocabQuery
57-
)}&attributes=${JSON.stringify(cfg.attributes)}&batch=${JSON.stringify({
65+
)}&attributes=${JSON.stringify(config.attributes)}&batch=${JSON.stringify({
5866
page: 1,
5967
size: 100,
6068
})}`;
@@ -86,7 +94,7 @@ export default function () {
8694

8795
store.get = async (path, searchTerm, levelData) => {
8896
let parts = path.split("/") || [];
89-
const depth = parts.length >= cfg.maxDepth ? cfg.maxDepth : parts.length;
97+
const depth = parts.length >= config.maxDepth ? config.maxDepth : parts.length;
9098
let paths = [];
9199

92100
let partsToShow = parts.slice(parts.length - depth, parts.length);
@@ -113,7 +121,7 @@ export default function () {
113121
let query = {
114122
method: "GET"
115123
};
116-
let queryPath = cfg.basePath;
124+
let queryPath = config.basePath;
117125
if (queryPath === "/") {
118126
queryPath = "";
119127
}
@@ -122,6 +130,9 @@ export default function () {
122130
if(isFirstPath && searchTerm){
123131
query["searchTerm"] = searchTerm + "*";
124132
}
133+
if(config.selectableTypes.length) {
134+
query["selectableTypes"] = config.selectableTypes;
135+
}
125136
level = await store.request(query);
126137
if(!skipCache){
127138
cache.update((n) => {

0 commit comments

Comments
 (0)