diff --git a/package.json b/package.json index 05b67c96f..9cde9fea2 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@11ty/eleventy-upgrade-help": "2", "@patternslib/pat-code-editor": "4.0.1", "@patternslib/patternslib": "9.9.16", - "@plone/registry": "^1.7.0", + "@plone/registry": "^2.1.0", "backbone": "1.4.1", "backbone.paginator": "2.0.8", "bootstrap": "5.3.3", @@ -134,5 +134,6 @@ ], "publishConfig": { "access": "public" - } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/src/pat/contentbrowser/README.md b/src/pat/contentbrowser/README.md index 1aff8656e..727b27781 100644 --- a/src/pat/contentbrowser/README.md +++ b/src/pat/contentbrowser/README.md @@ -29,6 +29,7 @@ Show a widget to select items in an offcanvas miller-column browser. | recentlyUsed | boolean | false | Show the recently used items dropdown. | | recentlyUsedKey | integer | | Storage key for saving the recently used items. This is generated with fieldname and username in the patternoptions. | | recentlyUsedMaxItems | integer | 20 | Maximum items to keep in recently used list. 0: no restriction. | +| customComponentKeys | dict | {} | Register custom components. Currently only "SelectedItem" implemented | ## Default @@ -81,3 +82,44 @@ Show a widget to select items in an offcanvas miller-column browser. data-pat-contentbrowser='{"selectableTypes": ["Image", "File"], "vocabularyUrl": "contentbrowser-test.json", "upload": true}' /> ``` + +## Register custom component + +Currently only for `SelectedItem` component available. + +```html + +``` + +Copy the existing component `src/SelectedItem.svelte` to your addon, customize it and register it in your JS bundle as follows: + +```javascript +... +import plone_registry from "@plone/registry"; +... + +async function register_selecteditem_component() { + // we register our component to a custom keyname, + // which later can be used for pattern_options + const SelectedImages = (await import("./MySelectedItemComponent.svelte")).default; + plone_registry.registerComponent({ + name: "pat-contentbrowser.myfield.MySelectedItemComponent", + component: SelectedImages, + }); +} +register_selecteditem_component(); + +... + +``` + +Note: this needs the `svelte-loader` plugin in your webpack.config.js ... see mockups webpack config for info. + diff --git a/src/pat/contentbrowser/contentbrowser.js b/src/pat/contentbrowser/contentbrowser.js index 71cdad1c4..db7ecf35f 100644 --- a/src/pat/contentbrowser/contentbrowser.js +++ b/src/pat/contentbrowser/contentbrowser.js @@ -2,6 +2,7 @@ import { BasePattern } from "@patternslib/patternslib/src/core/basepattern"; import Parser from "@patternslib/patternslib/src/core/parser"; import registry from "@patternslib/patternslib/src/core/registry"; import utils from "../../core/utils"; +import plone_registry from "@plone/registry"; // Contentbrowser pattern @@ -48,6 +49,14 @@ class Pattern extends BasePattern { async init() { this.el.style.display = "none"; + // register default components in @plone/registry + const SelectedItem = (await import("./src/SelectedItem.svelte")).default; + + plone_registry.registerComponent({ + name: "pat-contentbrowser.SelectedItem", + component: SelectedItem, + }); + // ensure an id on our element (TinyMCE doesn't have one) let nodeId = this.el.getAttribute("id"); if (!nodeId) { diff --git a/src/pat/contentbrowser/src/App.svelte b/src/pat/contentbrowser/src/App.svelte index c07492bc3..36d608240 100644 --- a/src/pat/contentbrowser/src/App.svelte +++ b/src/pat/contentbrowser/src/App.svelte @@ -34,6 +34,7 @@ export let recentlyUsedKey; export let recentlyUsedMaxItems; export let bSize = 20; + export let componentRegistryKeys = {}; const log = logger.getLogger("pat-contentbrowser"); @@ -83,6 +84,7 @@ recentlyUsedKey: recentlyUsedKey, recentlyUsedMaxItems: recentlyUsedMaxItems, pageSize: bSize, + componentRegistryKeys: componentRegistryKeys, }; log.debug(`Initialized App<${fieldId}> with config ${JSON.stringify($config)}`); diff --git a/src/pat/contentbrowser/src/RecentlyUsed.svelte b/src/pat/contentbrowser/src/RecentlyUsed.svelte index 1663d69ad..38de37c24 100644 --- a/src/pat/contentbrowser/src/RecentlyUsed.svelte +++ b/src/pat/contentbrowser/src/RecentlyUsed.svelte @@ -30,7 +30,7 @@ {#each items.reverse() as recentlyUsed}
  • select(recentlyUsed)} class="dropdown-item" > diff --git a/src/pat/contentbrowser/src/SelectedItem.svelte b/src/pat/contentbrowser/src/SelectedItem.svelte new file mode 100644 index 000000000..1018db267 --- /dev/null +++ b/src/pat/contentbrowser/src/SelectedItem.svelte @@ -0,0 +1,59 @@ + + +
    +
    + + +
    + {item.Title}
    + {item.path} +
    +
    + {#if item.getURL && (item.getIcon || item.portal_type === "Image")}{item.Title}{/if} +
    + + diff --git a/src/pat/contentbrowser/src/SelectedItems.svelte b/src/pat/contentbrowser/src/SelectedItems.svelte index f5a1fb4a4..4b791deb0 100644 --- a/src/pat/contentbrowser/src/SelectedItems.svelte +++ b/src/pat/contentbrowser/src/SelectedItems.svelte @@ -1,10 +1,10 @@