Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions entry_types/scrolled/config/locales/de.yml
Original file line number Diff line number Diff line change
Expand Up @@ -616,6 +616,9 @@ de:
mute: Ausblenden
play: Weiterspielen
turnDown: Leiser weiterspielen
autoplay:
inline_help: Automatisch abspielen, wenn das Element in den sichtbaren Bereich gescrollt wird.
label: Autoplay
id:
label: Audio
playerControlVariant:
Expand Down Expand Up @@ -1457,24 +1460,46 @@ de:
edit_defaults:
back: Erscheinungsbild
sections_info: Änderungen an diesen Einstellungen haben keine Auswirkungen auf existierende Abschnitte.
content_elements_info: |-
Änderungen an diesen Einstellungen haben keine Auswirkungen auf existierende Elemente.
Einstellungen können später für einzelne Elemente überschrieben werden.
all_elements: Alle Elemente
tabs:
sections: Neue Abschnitte
content_elements: Neue Elemente
attributes:
defaultSectionLayout:
label: Vordergrund-Positionierung
inline_help: |-
Standardposition der scrollenden Vordergrund-Ebene
neuer Abschnitte in Desktop-Darstellung.
values:
center: Mitte
centerRagged: Zentriert
left: Links
right: Rechts
defaultSectionAppearance:
label: Abblendung
inline_help: Standard-Erscheinung neuer Abschnitte.
values:
cards: Karte
shadow: Schatten
transparent: Keine
topPaddingVisualization:
label: Abstand oben
defaultSectionPaddingTop:
label: Abstand oben
inline_help: Standardabstand oberhalb des Inhalts neuer Abschnitte.
bottomPaddingVisualization:
label: Abstand unten
defaultSectionPaddingBottom:
label: Abstand unten
inline_help: Standardabstand unterhalb des Inhalts neuer Abschnitte.
defaultContentElementFullWidthInPhoneLayout:
label: Volle Breite im Phone-Layout
inline_help: |-
Standardmäßig Elemente auf kleineren Bildschirmen
die gesamte Breite des Viewports nutzen lassen.
typography_sizes:
xl: Sehr groß
lg: Groß
Expand Down
29 changes: 27 additions & 2 deletions entry_types/scrolled/config/locales/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -601,14 +601,17 @@ en:
mute: Mute
play: Keep playing
turnDown: Keep playing at lower volume
autoplay:
inline_help: Start playing automatically when the element is scrolled into view.
label: Autoplay
id:
label: Audio
playerControlVariant:
inline_help: Choose the style of player controls.
label: Waveform Style
label: Player Controls
values:
classic: Classic
waveform: Waveform (Fein)
waveform: Waveform (Fine)
waveformBars: Waveform (Bars)
waveformLines: Waveform (Lines)
posterId:
Expand Down Expand Up @@ -1440,24 +1443,46 @@ en:
edit_defaults:
back: Appearance
sections_info: Changes to these settings have no effect on existing sections.
content_elements_info: |-
Changes to these settings have no effect on existing elements.
Settings can later be changed for individual elements.
all_elements: All elements
tabs:
sections: New sections
content_elements: New elements
attributes:
defaultSectionLayout:
label: Content alignment
inline_help: |-
Default position of the scrolling foreground layer of
new sections on desktop devices.
values:
center: Centered
centerRagged: Centered (Ragged)
left: Left
right: Right
defaultSectionAppearance:
label: Text background
inline_help: Default appearance of new sections.
values:
cards: Card
shadow: Shadow
transparent: Transparent
topPaddingVisualization:
label: Top padding
defaultSectionPaddingTop:
label: Top padding
inline_help: Default vertical spacing above the content of new sections.
bottomPaddingVisualization:
label: Bottom padding
defaultSectionPaddingBottom:
label: Bottom padding
inline_help: Default vertical spacing below the content of new sections.
defaultContentElementFullWidthInPhoneLayout:
label: Full width in phone layout
inline_help: |-
By default, make elements span the full width of the
viewport on smaller screens.
typography_sizes:
xl: Very large
lg: Large
Expand Down
51 changes: 51 additions & 0 deletions entry_types/scrolled/doc/creating_content_element_types.md
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,57 @@ pageflow_scrolled:
inline_help: "..."
```

## Defaults Inputs

Content element types can contribute inputs to the entry defaults
settings. These inputs allow editors to configure default values that
are applied when creating new content elements of that type.

To define defaults inputs, provide a `defaultsInputs` function when
registering your content element type:

```javascript
import {editor} from 'pageflow-scrolled/editor';
import {CheckBoxInputView} from 'pageflow/ui';

editor.contentElementTypes.register('inlineImage', {
configurationEditor({entry}) {
// ...
},

defaultsInputs() {
this.input('enableFullscreen', CheckBoxInputView);
}
});
```

The `defaultsInputs` function is called in a similar context as the
`this.tab` callback in `configurationEditor`. Property names are
automatically prefixed with `default-{typeName}-` when stored in the
entry metadata configuration.

For translations, Pageflow first looks for keys under a `defaults`
namespace, then falls back to normal attribute translations:

```
pageflow_scrolled:
editor:
content_elements:
inlineImage:
defaults:
attributes:
enableFullscreen:
label: "..."
inline_help: "..."
attributes:
enableFullscreen:
label: "..."
inline_help: "..."
```

If the `defaults.attributes` translation is not found, the normal
`attributes` translation is used as a fallback.

## Using Palette Colors

[Palette
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,114 @@ describe('ContentElementTypeRegistry', () => {
});
});

describe('#getDefaultsInputsMapping', () => {
it('returns empty object for type without defaultsInputs', () => {
const registry = new ContentElementTypeRegistry({features: new Features()});
registry.register('textBlock', {});

const mapping = registry.getDefaultsInputsMapping('textBlock');

expect(mapping).toEqual({});
});

it('returns mapping from metadata keys to property names', () => {
const registry = new ContentElementTypeRegistry({features: new Features()});
registry.register('inlineImage', {
defaultsInputs() {
this.input('enableFullscreen');
this.input('autoplay');
}
});

const mapping = registry.getDefaultsInputsMapping('inlineImage');

expect(mapping).toEqual({
'default-inlineImage-enableFullscreen': 'enableFullscreen',
'default-inlineImage-autoplay': 'autoplay'
});
});
});

describe('#createDefaultsInputContext', () => {
it('prefixes property names passed to input', () => {
const registry = new ContentElementTypeRegistry({features: new Features()});
const tabView = {
input: jest.fn(),
view: jest.fn()
};

const context = registry.createDefaultsInputContext(tabView, 'inlineImage');
context.input('enableFullscreen', 'CheckBoxInputView', {some: 'option'});

expect(tabView.input).toHaveBeenCalledWith(
'default-inlineImage-enableFullscreen',
'CheckBoxInputView',
expect.objectContaining({some: 'option'})
);
});

it('adds attributeTranslationKeyPrefixes with fallback to normal attributes', () => {
const registry = new ContentElementTypeRegistry({features: new Features()});
const tabView = {
input: jest.fn(),
view: jest.fn()
};

const context = registry.createDefaultsInputContext(tabView, 'inlineImage');
context.input('enableFullscreen', 'CheckBoxInputView');

expect(tabView.input).toHaveBeenCalledWith(
expect.anything(),
expect.anything(),
expect.objectContaining({
attributeTranslationKeyPrefixes: [
'pageflow_scrolled.editor.content_elements.inlineImage.defaults.attributes',
'pageflow_scrolled.editor.content_elements.inlineImage.attributes'
],
attributeTranslationPropertyName: 'enableFullscreen'
})
);
});

it('preserves existing attributeTranslationKeyPrefixes', () => {
const registry = new ContentElementTypeRegistry({features: new Features()});
const tabView = {
input: jest.fn(),
view: jest.fn()
};

const context = registry.createDefaultsInputContext(tabView, 'inlineImage');
context.input('enableFullscreen', 'CheckBoxInputView', {
attributeTranslationKeyPrefixes: ['custom.prefix']
});

expect(tabView.input).toHaveBeenCalledWith(
expect.anything(),
expect.anything(),
expect.objectContaining({
attributeTranslationKeyPrefixes: [
'pageflow_scrolled.editor.content_elements.inlineImage.defaults.attributes',
'pageflow_scrolled.editor.content_elements.inlineImage.attributes',
'custom.prefix'
]
})
);
});

it('passes through view calls', () => {
const registry = new ContentElementTypeRegistry({features: new Features()});
const tabView = {
input: jest.fn(),
view: jest.fn()
};

const context = registry.createDefaultsInputContext(tabView, 'inlineImage');
context.view('SomeView', {some: 'option'});

expect(tabView.view).toHaveBeenCalledWith('SomeView', {some: 'option'});
});
});

describe('#toArray', () => {
it('returns array of with options passed to register', () => {
const registry = new ContentElementTypeRegistry({features: new Features()});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,15 @@ describe('Chapter', () => {
expect(section.configuration.get('layout')).toEqual('right');
});

it('uses default appearance from entry metadata configuration', () => {
const {entry} = testContext;

entry.metadata.configuration.set('defaultSectionAppearance', 'cards');
const section = entry.chapters.first().addSection();

expect(section.configuration.get('appearance')).toEqual('cards');
});

it('handles sparse positions correctly', () => {
const {entry} = testContext;

Expand Down
Loading
Loading