+
+
+ ```
+
+ 💡 **Tips**: Notice that we use a `` tag: this is necessary if you want to add a
+ block snippet, and it will give you a few default options in edit mode. On the
+ contrary, if you only want to add an _inner snippet_ (a snippet that you can add
+ inside any other block), you don't necessarily need the ``.
+
+
+
+
+A stylesheet is defined in `/static/src/snippets/s_image_comparison/000.scss`,
+but it does not work for now. You need to register the asset through the XML
+view like so:
+
+```xml
+Check your code against the example
+ + ```xml +
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+ image comparison, before, after, compare, side-by-side, photo, picture, contrast, split, match, slider
+
+
+
+ ```
+
+
+
+To confirm that it works, open your website homepage in edit mode, drag or click
+on the "Images" category and select the image comparison block.
+
+## 4. Set up the before/after image interaction
+
+Now that we have the snippet, we can create its interaction. By convention, we
+add it in the same folder as the `000.scss`.
+
+If you have a similar structure to what I suggested earlier, this is going to be
+a simple interaction: you just need to listen for the slider `input` event and
+update the `--slider-position` CSS custom property.
+
+Once your interaction is running, you will see that it doesn't work in edit
+mode. That's normal: we have a separate registry category for edit interactions.
+If you want exactly the same behavior for the interaction in edit mode as on the
+frontend, just add it to the `public.interactions.edit` registry:
+
+```js
+registry.category("public.interactions.edit").add("awesome_website.image_comparison", {
+ Interaction: ImageComparison,
+});
+```
+
+💡 **Tip**: It's not working? Did you add your file to the manifest?
+
+## 5. Make an edit interaction
+
+What if you want to tweak the interaction in edit mode? Maybe you want to
+prevent an event from firing but still keep some parts of the interaction. Or
+maybe you need to add some features on top of the public ones. We've got you
+covered.
+
+Because in most cases an edit interaction derives from a public interaction, and
+the public interaction could itself extend another interaction (which could have
+its own edit interaction), edit interactions overrides are written as
+**mixins**. That allows the builder to apply all the overrides.
+
+Unfold to see the full xpath
+ + ```xml + +
+
+
+Here, for the sake of this demo, we consider that we don't want the slider to be
+actionable in edit*. Create `image_comparison.edit.js` and override your public
+interaction!
+
+🤓☝️ *Well actually, this could be achieved by disabling the interaction
+altogether. But for the sake of the exercise, let's imagine there are other
+features that we want to keep.
+
+Don't forget to add your mixin to the edit interactions registry category, and
+remove that same line from the base interaction file.
+
+```js
+registry.category("public.interactions.edit").add("awesome_website.image_comparison", {
+ Interaction: ImageComparison,
+ mixin: ImageComparisonEdit,
+});
+```
+
+To completely block the slider, we should also set `pointer-events: none`,
+otherwise you can still move the slider thumb. You can either add the Bootstrap
+class `.pe-none` through the edit interaction, or add the rule to the file
+`000.edit.scss`.
+
+💡 **Tip**: the file is already set to override the input's style. That allows
+to click on the images to replace them and have access to all the standard image
+options. Comment out the CSS rules to see the difference.
+
+You must add the edit files to the `website.assets_inside_builder_iframe`
+bundle.
+
+```py
+'website.assets_inside_builder_iframe': [
+ 'awesome_website/static/src/snippets/**/*.edit.*'
+],
+```
+
+
+💡 **Tip**: overriding `dynamicContent` in edit interactions
+- Unless that is exactly what you want, do not override the whole
+`dynamicContent`! Always keep a copy of the original with
+`dynamicContent = { ...this.dynamicContent, { ... } }`, or with
+`patchDynamicContent` (in the setup).
+Prefer `patchDynamicContent` if you add or override an entry of a selector whose
+other entries you want to keep.
+
+
+💡 **Tip**: When are interactions restarted in edition?
+- Through `getConfigurationSnapshot`, the `websiteEditService`'s patch on
+`Interaction` restarts an interaction if it detects a change in the `dataset` or
+in the style of the interaction root element.
+- If you have any other modification (class, child...), it won't restart the
+interaction. This is to avoid stopping and restarting every interaction all the
+time.
+- Then `shouldStop` returns `true` if the snapshot returned was different from
+what it used to be, or if `isImpactedBy` returns `true` (by default it always
+returns `false`)
+
+ If you do need to override that default behavior, you have 3 tools
+ available:
+
+ - override `getConfigurationSnapshot` (you can check existing
+ implementations, e.g. on `DynamicSnippetCarouselEdit`)
+ - override `isImpactedBy`, typically if you should restart depending on a
+ child (present or not), or possibly depending on a class. Note that if you
+ check if a class is present in `isImpactedBy`, the interaction will always
+ restart if the class is present. If you need to restart only when the class
+ is toggled, you should use `getConfigurationSnapshot`.
+ - override `shouldStop`. The most common override on that one is to return
+ `true` all the time, if all your options should trigger a restart of the
+ interaction. Note that it does mean it will restart *all* the time, so try
+ the other solutions first if they're not too heavy.
+
+## 5bis. Make a preview interaction
+
+This part is completely website-specific: when you drop a section snippet on a
+website page (or an HTML field), it opens the snippets preview dialog.
+
+There might be cases when you want the preview to look a very specific way or
+have a limited behavior (compared to its actual, full behavior). Typically, if
+the actual interaction implements a behavior when the user scrolls the page or
+when they click on a button (e.g. carousels), you may want to show a similar
+behavior on hover and on focus of the preview.
+
+💡 **Tip**: when you add `:hover` rules, always consider whether you should also
+add `:focus-visible` to account for keyboard accessibility.
+
+By convention, we suffix those files (`.js`, `.scss`) with `*.preview.*`.
+
+SCSS preview files must be registered in the manifest, in the
+`html_builder.iframe_add_dialog` bundle.
+
+JS preview interactions are, just like edit interactions, mixins and must be
+registered through the registry, in the category `public.interactions.preview`.
+
+️📃 In the case of our comparing slider, we could for instance add an animation
+on hover to move the slider to the left and to the right.
+
+## 6. Add builder options
+
+What we have been calling the "edit mode" since the beginning of this tutorial
+actually depends on the html_builder module. What it does is embedding the
+frontend in an iframe, and rendering options around it (or sometimes on top of
+it, e.g. the editor toolbar when you select some text).
+
+You probably already saw that you have some default options available when you
+click on your snippet. If you paid attention earlier, you remember that we used
+a `❓ It's not clear
+ + | Public | Edit | + | --------------- | ------------------ | + | Foo | FooEdit (override) | + | Bar extends Foo | BarEdit (override) | + + Where `Bar` applies on `.element`. + When you edit the page, if `.element` is on the page, it will apply both + `FooEdit` and `BarEdit` on `Bar`, in that order. + + **Why not extensions?** + + If we had used extends, it would not have been possible to apply both + overrides without copying code. + +
+
+
+
+️📃 Now it's your turn. Which options do we need for our snippet to shine? Choose
+one or two and try to make them work. Here are some ideas:
+
+- Choose between vertical and horizontal slide
+- Add before / after labels
+- Change the appearance of the corners (rounded, squared, cut...)
+- Set the default value of the slider on some other value (25%, 75%...)
+- Change the color of the handle
+- Adapt the handle size
+- Set a different icon on the slider handle
+- ...
+
+## 7. Use an OWL component
+
+If you need some reusable component and you do not care about it being editable,
+you may want to use an OWL component. You can do that very easily in 2 ways:
+
+- through the Interaction's `t-component` directive.
+- with an `More complex options that rely on a state can also extend + `BaseOptionComponent`, but this is not necessary here.
+ + ```js + export class MyToggleOption extends BaseOptionComponent { + static id = "my_toggle_option"; // Matches the XML tag name + static template = "awesome_website.MyToggleOption" + + setup() { + super.setup(); + this.state = useDomState((editingElement) => { + // handle state + }); + // custom logic + }; + } + + registry.category("website-options").add(MyToggleOption.id, MyToggleOption); + ``` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Clicks:
+
+
+ Bots
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Power multiplier
+
+
+
+
+
+
+
+
+
+
+
+ Trees
+
+
+
+
+
+
+
+
+
+
+
+
+ Fruits
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Counter:
+ some content
";
+ this.str2 = markup("some content
");
+ this.counters = useState([
+ { value: 1},
+ { value: 10 },
+ { value: 100 }
+ ]);
+ }
+
+ get sum() {
+ return this.counters[0].value + this.counters[1].value + this.counters[2].value;
+ }
+
+ increment(index) {
+ this.counters[index].value++;
+ }
}
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 4fb905d59f9..d787d3b00a9 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -4,7 +4,21 @@
hello world
+
+ The sum is:
+
+ content of card 1
+
+
+
+
+
+
+
+
+
+
+
+
+ Oh no,
+ -
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+